feat: improve number of requests

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,18 +14,12 @@ 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>
       <a
-        href={`https://faucet-testnet.fuel.network/?address=${address}`}
+        href={`https://faucet-testnet.fuel.network/?address=${address}&autoClose`}
         target="_blank"
         className={`btn ${
           isSigning

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';

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,
   };
 };

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'
+>;

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;
 };

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>
     );
   }