fix: hooks with outdated data or stuck in loading

.changeset/nine-chefs-thank.md

@@ -0,0 +1,6 @@
+---
+"@fuels/react": patch
+"docs": patch
+---
+
+Fixed hooks with outdated data or stuck in loading

packages/docs/src/guide/react-hooks/useAccount.md

@@ -17,6 +17,6 @@ console.log(account);
 ```
 
 #### Defined in
-[packages/react/src/hooks/useAccount.ts:26](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useAccount.ts#L26)
+[packages/react/src/hooks/useAccount.ts:29](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useAccount.ts#L29)
 
 ___

packages/docs/src/guide/react-hooks/useChain.md

@@ -17,6 +17,6 @@ console.log(chain);
 ```
 
 #### Defined in
-[packages/react/src/hooks/useChain.ts:32](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useChain.ts#L32)
+[packages/react/src/hooks/useChain.ts:22](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useChain.ts#L22)
 
 ___

packages/docs/src/guide/react-hooks/useCurrentConnector.md

@@ -23,6 +23,6 @@ console.log(currentConnector);
 ```
 
 #### Defined in
-[packages/react/src/hooks/useCurrentConnector.tsx:31](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useCurrentConnector.tsx#L31)
+[packages/react/src/hooks/useCurrentConnector.tsx:36](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useCurrentConnector.tsx#L36)
 
 ___

packages/docs/src/guide/react-hooks/useIsSupportedNetwork.md

@@ -17,6 +17,6 @@ console.log(isSupportedNetwork);
 ```
 
 #### Defined in
-[packages/react/src/hooks/useIsSupportedNetwork.tsx:29](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useIsSupportedNetwork.tsx#L29)
+[packages/react/src/hooks/useIsSupportedNetwork.tsx:30](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useIsSupportedNetwork.tsx#L30)
 
 ___

packages/docs/src/guide/react-hooks/useNetwork.md

@@ -18,6 +18,6 @@ console.log(network);
 ```
 
 #### Defined in
-[packages/react/src/hooks/useNetwork.ts:29](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useNetwork.ts#L29)
+[packages/react/src/hooks/useNetwork.ts:36](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useNetwork.ts#L36)
 
 ___

packages/docs/src/guide/react-hooks/useProvider.md

@@ -17,6 +17,6 @@ const { provider } = useProvider();
 ```
 
 #### Defined in
-[packages/react/src/hooks/useProvider.ts:32](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useProvider.ts#L32)
+[packages/react/src/hooks/useProvider.ts:37](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useProvider.ts#L37)
 
 ___

packages/docs/src/guide/react-hooks/useWallet.md

@@ -24,4 +24,4 @@ const { wallet } = useWallet();
 Use `useWallet({ account })` instead.
 
 #### Defined in
-[packages/react/src/hooks/useWallet.ts:53](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useWallet.ts#L53)
+[packages/react/src/hooks/useWallet.ts:55](https://github.com/fuellabs/fuel-connectors/blob/main/packages/react/src/hooks/useWallet.ts#L55)

packages/react/src/hooks/index.ts

@@ -11,6 +11,7 @@ export * from './useConnectors';
 export * from './useDisconnect';
 export * from './useIsConnected';
 export * from './useNetwork';
+export * from './useNetworkProvider';
 export * from './useNetworks';
 export * from './useNodeInfo';
 export * from './useProvider';

packages/react/src/hooks/useAccount.ts

@@ -29,16 +29,13 @@ export const useAccount = (
   const { fuel } = useFuel();
 
   return useNamedQuery('account', {
-    queryKey: QUERY_KEYS.account(),
+    queryKey: QUERY_KEYS.account(fuel.name),
     queryFn: async () => {
-      try {
-        const currentFuelAccount = await fuel?.currentAccount();
-        return currentFuelAccount;
-      } catch (_error: unknown) {
-        return null;
-      }
+      return await fuel?.currentAccount();
     },
     placeholderData: null,
+    retry: 5,
+    retryDelay: 100,
     ...params?.query,
   });
 };

packages/react/src/hooks/useChain.ts

@@ -1,19 +1,9 @@
 // should import ChainInfo because of this error: https://github.com/FuelLabs/fuels-ts/issues/1054
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ChainInfo } from 'fuels';
-import type { UseNamedQueryParams } from '../core';
 
-import { useNamedQuery } from '../core';
-import { QUERY_KEYS } from '../utils';
-
-import { useProvider } from './useProvider';
-
-type UseChainParams<TName extends string, TData> = {
-  /**
-   * Additional query parameters to customize the behavior of `useNamedQuery`.
-   */
-  query?: UseNamedQueryParams<TName, TData, Error, TData>;
-};
+import { useMemo } from 'react';
+import { useNetworkProvider } from './useNetworkProvider';
 
 // @TODO: Add a link to fuel connector's documentation.
 /**
@@ -29,23 +19,17 @@ type UseChainParams<TName extends string, TData> = {
  * console.log(chain);
  * ```
  */
-export const useChain = (
-  params?: UseChainParams<'chain', ChainInfo | null>,
-) => {
-  const { provider } = useProvider();
+export const useChain = () => {
+  const providerData = useNetworkProvider();
+  const provider = providerData?.networkProvider;
 
-  return useNamedQuery('chain', {
-    queryKey: QUERY_KEYS.chain(),
-    queryFn: async () => {
-      try {
-        const currentFuelChain = await provider?.getChain();
-        return currentFuelChain || null;
-      } catch (_error: unknown) {
-        return null;
-      }
-    },
-    placeholderData: null,
-    enabled: !!provider,
-    ...params?.query,
-  });
+  return useMemo(() => {
+    try {
+      const currentFuelChain = provider?.getChain();
+      return { chain: currentFuelChain || null };
+    } catch (e) {
+      console.error(e);
+      return { provider: null };
+    }
+  }, [provider]);
 };

packages/react/src/hooks/useCurrentConnector.tsx

@@ -1,4 +1,9 @@
-import type { FuelConnector } from 'fuels';
+import {
+  type FuelConnector,
+  FuelConnectorEventType,
+  FuelConnectorEventTypes,
+} from 'fuels';
+import { useEffect } from 'react';
 import { type UseNamedQueryParams, useNamedQuery } from '../core';
 import { useFuel } from '../providers';
 import { QUERY_KEYS } from '../utils';
@@ -36,7 +41,7 @@ export const useCurrentConnector = <
 }: UseCurrentConnectorParams<TName, TData> = {}) => {
   const { fuel } = useFuel();
   return useNamedQuery('currentConnector', {
-    queryKey: QUERY_KEYS.currentConnector(),
+    queryKey: QUERY_KEYS.currentConnector(fuel.name),
     queryFn: async () => {
       const isConnected = await fuel.isConnected();
       if (!isConnected) return null;

packages/react/src/hooks/useNetwork.ts

@@ -4,11 +4,16 @@ import { useFuel } from '../providers';
 import { QUERY_KEYS } from '../utils';
 import { useIsConnected } from './useIsConnected';
 
+const TIMEOUT = 500;
+
 type UseNetwork = {
   /**
    * Additional query parameters to customize the behavior of `useNamedQuery`.
    */
-  query?: UseNamedQueryParams<'network', Network | null, Error, Network | null>;
+  query?: Omit<
+    UseNamedQueryParams<'network', Network | null, Error, Network | null>,
+    'queryKey' | 'queryFn' | 'refetchInterval'
+  >;
 };
 
 // @TODO: Add a link to fuel connector's documentation.
@@ -28,25 +33,41 @@ type UseNetwork = {
  */
 export const useNetwork = (params?: UseNetwork) => {
   const { fuel } = useFuel();
-  const { isConnected } = useIsConnected();
-  return useNamedQuery('network', {
-    queryKey: QUERY_KEYS.currentNetwork(),
-    queryFn: async () => {
-      const current = await fuel.currentNetwork();
-      if (!current && isConnected) {
-        throw new Error('Network not found');
-      }
-      return current;
-    },
-    placeholderData: null,
-    refetchOnMount: true,
-    refetchInterval: (e) => {
-      if (!e.state.data || e.state.error) {
-        return 4000;
-      }
-      return false;
+  const connectedQuery = useIsConnected();
+  const isConnected = connectedQuery.isConnected;
+
+  return useNamedQuery(
+    'network',
+    {
+      queryKey: QUERY_KEYS.currentNetwork(isConnected),
+      queryFn: async () => {
+        const timeout = new Promise((_, reject) =>
+          setTimeout(() => reject('Time out fetching network'), TIMEOUT),
+        );
+        const current = await fuel.currentNetwork();
+        if (!current && isConnected) {
+          throw new Error('Network not found');
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        return Promise.race([current, timeout as any]);
+      },
+      placeholderData: null,
+      refetchOnMount: true,
+      refetchInterval: (e) => {
+        if (!e.state.data || e.state.error) {
+          return TIMEOUT;
+        }
+        return false;
+      },
+      retry: (attempts) => {
+        if (attempts > 10) {
+          return false;
+        }
+        return true;
+      },
+      enabled: isConnected,
+      ...params?.query,
     },
-    enabled: isConnected,
-    ...params?.query,
-  });
+    undefined,
+  );
 };

packages/react/src/hooks/useNetworkProvider.ts

@@ -0,0 +1,84 @@
+import { keepPreviousData } from '@tanstack/react-query';
+import { Provider } from 'fuels';
+import { type UseNamedQueryParams, useNamedQuery } from '../core';
+import { QUERY_KEYS } from '../utils';
+import { useNetwork } from './useNetwork';
+
+type UseNetworkProviderParams = {
+  networkUrl?: string;
+  chainId?: number;
+  /**
+   * Additional query parameters to customize the behavior of `useNamedQuery`.
+   */
+  query?: UseNamedQueryParams<
+    'networkProvider',
+    Provider | null,
+    Error,
+    Provider | null
+  >;
+};
+
+// @TODO: Add a link to fuel connector's documentation.
+/**
+ * A hook to retrieve the current provider in the connected app.
+ *
+ * @returns {object} An object containing:
+ * - `provider`: The provider data or `null`.
+ * - {@link https://tanstack.com/query/latest/docs/framework/react/reference/useQuery | `...queryProps`}: Destructured properties from `useQuery` result.
+ *
+ * @examples
+ * To get the current provider:
+ * ```ts
+ * const { networkProvider } = useNetworkProvider();
+ * ```
+ */
+export const useNetworkProvider = (params?: UseNetworkProviderParams) => {
+  const networkQuery = useNetwork();
+  const currentNetwork = networkQuery.network;
+  const networkUrl = params?.networkUrl || currentNetwork?.url;
+  const chainId = params?.chainId || currentNetwork?.chainId;
+
+  return useNamedQuery(
+    'networkProvider',
+    {
+      queryKey: QUERY_KEYS.networkProvider(networkUrl, chainId),
+      queryFn: async () => {
+        async function fetchProvider() {
+          if (!networkUrl) {
+            throw new Error(
+              'Please provide a networks with a RPC url configuration to your FuelProvider getProvider will be removed.',
+            );
+          }
+          const provider = await Provider.create(networkUrl);
+          if (chainId && provider.getChainId() !== chainId) {
+            throw new Error(
+              `The provider's chainId (${provider.getChainId()}) does not match the current network's chainId (${chainId})`,
+            );
+          }
+          return provider;
+        }
+
+        const timeout = new Promise((_, reject) =>
+          setTimeout(() => reject('Time out fetching provider'), 1000),
+        ) as Promise<Provider | null>;
+
+        return Promise.race([fetchProvider(), timeout]);
+      },
+      placeholderData: keepPreviousData,
+      refetchInterval: (e) => {
+        if (!e.state.data || e.state.error) {
+          return 500;
+        }
+        return false;
+      },
+      retry: (attempts) => {
+        if (attempts > 10) {
+          return false;
+        }
+        return true;
+      },
+      ...params?.query,
+    },
+    undefined,
+  );
+};

packages/react/src/hooks/useNodeInfo.ts

@@ -4,7 +4,7 @@ import { type UseNamedQueryParams, useNamedQuery } from '../core';
 import { QUERY_KEYS } from '../utils';
 
 import type { NodeInfo } from 'fuels';
-import { useProvider } from './useProvider';
+import { useNetworkProvider } from './useNetworkProvider';
 
 type UseNodeInfoParams = {
   /**
@@ -45,8 +45,8 @@ export const useNodeInfo = ({
   version = '0.0.0',
   query: queryParams,
 }: UseNodeInfoParams = {}) => {
-  const { provider } = useProvider();
-
+  const networkProviderQuery = useNetworkProvider();
+  const provider = networkProviderQuery.networkProvider;
   const query = useNamedQuery('nodeInfo', {
     queryKey: QUERY_KEYS.nodeInfo(provider?.url),
     queryFn: () => {