From 697b147d88d04e6ddb1bb6764b5d94b7d2d14f5e Mon Sep 17 00:00:00 2001
From: luizstacio <luizstacio@gmail.com>
Date: Thu, 8 Aug 2024 13:44:32 -0300
Subject: [PATCH] feat: improve number of queries

---
 examples/react-app/src/components/balance.tsx |  9 +----
 .../react-app/src/components/transfer.tsx     |  2 +-
 examples/react-app/src/hooks/useWallet.ts     | 16 ++++-----
 packages/react/src/core/useNamedQuery.ts      |  5 +++
 packages/react/src/hooks/useBalance.ts        | 36 +++++++------------
 packages/react/src/providers/FuelProvider.tsx | 14 ++++++--
 6 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/examples/react-app/src/components/balance.tsx b/examples/react-app/src/components/balance.tsx
index 450aa35b..83f3df85 100644
--- a/examples/react-app/src/components/balance.tsx
+++ b/examples/react-app/src/components/balance.tsx
@@ -1,5 +1,4 @@
 import { bn } from 'fuels';
-import { useEffect } from 'react';
 import { useWallet } from '../hooks/useWallet';
 import Feature from './feature';
 
@@ -15,13 +14,7 @@ const BalanceSkeleton = () => (
 );
 
 export default function Balance({ isSigning }: Props) {
-  const { refetchWallet, balance, address } = useWallet();
-
-  useEffect(() => {
-    const interval = setInterval(() => refetchWallet(), 5000);
-    return () => clearInterval(interval);
-  }, [refetchWallet]);
-
+  const { balance, address } = useWallet();
   return (
     <Feature title="Balance">
       <code>{balance ? `${balance?.format()} ETH` : <BalanceSkeleton />}</code>
diff --git a/examples/react-app/src/components/transfer.tsx b/examples/react-app/src/components/transfer.tsx
index b861e63c..1188106a 100644
--- a/examples/react-app/src/components/transfer.tsx
+++ b/examples/react-app/src/components/transfer.tsx
@@ -1,4 +1,4 @@
-import { Address, Provider } from 'fuels';
+import { Address } from 'fuels';
 import { useState } from 'react';
 import { useWallet } from '../hooks/useWallet';
 import type { CustomError } from '../utils/customError';
diff --git a/examples/react-app/src/hooks/useWallet.ts b/examples/react-app/src/hooks/useWallet.ts
index 6043ae62..0fbd562b 100644
--- a/examples/react-app/src/hooks/useWallet.ts
+++ b/examples/react-app/src/hooks/useWallet.ts
@@ -25,7 +25,7 @@ export const useWallet = () => {
     isConnecting,
     isLoading: isLoadingConnectors,
   } = useConnectUI();
-  const { isConnected, refetch: refetchConnected } = useIsConnected();
+  const { isConnected } = useIsConnected();
   const {
     account,
     isLoading: isLoadingAccount,
@@ -40,15 +40,16 @@ export const useWallet = () => {
     balance,
     isLoading: isLoadingBalance,
     isFetching: isFetchingBalance,
-  } = useBalance({ address });
-
+  } = useBalance(
+    { address },
+    {
+      refetchOnWindowFocus: true,
+      refetchInterval: 10000,
+    },
+  );
   const [currentConnector, setCurrentConnector] =
     useState<ICurrentConnector>(DEFAULT_CONNECTOR);
 
-  useEffect(() => {
-    refetchConnected();
-  }, [refetchConnected]);
-
   useEffect(() => {
     if (!isConnected) {
       setCurrentConnector(DEFAULT_CONNECTOR);
@@ -83,7 +84,6 @@ export const useWallet = () => {
     isLoadingConnectors,
     wallet,
     connect,
-    refetchConnected,
     refetchWallet,
   };
 };
diff --git a/packages/react/src/core/useNamedQuery.ts b/packages/react/src/core/useNamedQuery.ts
index 7cff742b..d730c1b7 100644
--- a/packages/react/src/core/useNamedQuery.ts
+++ b/packages/react/src/core/useNamedQuery.ts
@@ -125,3 +125,8 @@ export function useNamedQuery<
 
   return proxy;
 }
+
+export type ServiceOptions<TQueryData, TError, TData> = Omit<
+  UseQueryOptions<TQueryData, TError, TData>,
+  'queryFn' | 'queryKey' | 'initialData' | 'data'
+>;
diff --git a/packages/react/src/hooks/useBalance.ts b/packages/react/src/hooks/useBalance.ts
index 07639823..c2f65b01 100644
--- a/packages/react/src/hooks/useBalance.ts
+++ b/packages/react/src/hooks/useBalance.ts
@@ -1,22 +1,23 @@
-import type { BytesLike } from 'fuels';
+import type { BN, BytesLike } from 'fuels';
 import { Address } from 'fuels';
-import { useEffect } from 'react';
 
-import { useNamedQuery } from '../core';
+import { type ServiceOptions, useNamedQuery } from '../core';
 import { QUERY_KEYS } from '../utils';
 
 import { useProvider } from './useProvider';
 
-export const useBalance = ({
-  address,
-  assetId,
-}: {
+type UseBalanceParams = {
   address?: string;
   assetId?: BytesLike;
-}) => {
-  const { provider } = useProvider();
+};
 
-  const query = useNamedQuery('balance', {
+export const useBalance = (
+  { address, assetId }: UseBalanceParams,
+  options?: ServiceOptions<unknown, Error, BN | null>,
+) => {
+  const { provider } = useProvider();
+  return useNamedQuery('balance', {
+    ...options,
     queryKey: QUERY_KEYS.balance(address, assetId),
     queryFn: async () => {
       try {
@@ -32,21 +33,8 @@ export const useBalance = ({
         return null;
       }
     },
+    refetchOnWindowFocus: true,
     initialData: null,
     enabled: !!provider,
   });
-
-  useEffect(() => {
-    const listenerAccountFetcher = () => {
-      query.refetch();
-    };
-
-    window.addEventListener('focus', listenerAccountFetcher);
-
-    return () => {
-      window.removeEventListener('focus', listenerAccountFetcher);
-    };
-  }, [query]);
-
-  return query;
 };
diff --git a/packages/react/src/providers/FuelProvider.tsx b/packages/react/src/providers/FuelProvider.tsx
index 3ae575ac..32d4c896 100644
--- a/packages/react/src/providers/FuelProvider.tsx
+++ b/packages/react/src/providers/FuelProvider.tsx
@@ -13,6 +13,15 @@ type FuelProviderProps = {
   fuelConfig?: FuelConfig;
 } & FuelUIProviderProps;
 
+function FuelUI({ theme, children, fuelConfig }: FuelProviderProps) {
+  return (
+    <FuelUIProvider theme={theme} fuelConfig={fuelConfig}>
+      <Connect />
+      {children}
+    </FuelUIProvider>
+  );
+}
+
 export function FuelProvider({
   theme,
   children,
@@ -22,10 +31,9 @@ export function FuelProvider({
   if (ui) {
     return (
       <FuelHooksProvider fuelConfig={fuelConfig}>
-        <FuelUIProvider theme={theme} fuelConfig={fuelConfig}>
-          <Connect />
+        <FuelUI fuelConfig={fuelConfig} theme={theme}>
           {children}
-        </FuelUIProvider>
+        </FuelUI>
       </FuelHooksProvider>
     );
   }