fix: skipAutoReconnect + useWallet (#404)

packages/react/src/hooks/useProvider.ts

@@ -1,7 +1,7 @@
-import { Provider } from 'fuels';
-import { type UseNamedQueryParams, useNamedQuery } from '../core';
-import { useFuel } from '../providers';
-import { QUERY_KEYS } from '../utils';
+import type { Provider } from 'fuels';
+import { useMemo } from 'react';
+import type { UseNamedQueryParams } from '../core';
+import { useWallet } from './useWallet';
 
 type UseProviderParams = {
   /**
@@ -29,33 +29,12 @@ type UseProviderParams = {
  * const { provider } = useProvider();
  * ```
  */
-export const useProvider = (params?: UseProviderParams) => {
-  const { fuel, networks } = useFuel();
-  return useNamedQuery('provider', {
-    queryKey: QUERY_KEYS.provider(),
-    queryFn: async () => {
-      const currentNetwork = await fuel.currentNetwork();
-      const network = networks.find(
-        (n) => n.chainId === currentNetwork.chainId,
-      );
-      if (!network?.url) {
-        const provider = await fuel.getProvider();
-        console.warn(
-          'Please provide a networks with a RPC url configuration to your FuelProvider getProvider will be removed.',
-        );
-        return provider || null;
-      }
-      const provider = await Provider.create(network.url);
-      if (provider.getChainId() !== currentNetwork.chainId) {
-        throw new Error(
-          `The provider's chainId (${provider.getChainId()}) does not match the current network's chainId (${
-            currentNetwork.chainId
-          })`,
-        );
-      }
-      return provider;
-    },
-    placeholderData: null,
-    ...params?.query,
-  });
+export const useProvider = (_params?: UseProviderParams) => {
+  const { wallet } = useWallet();
+
+  const provider = useMemo(() => {
+    return wallet?.provider;
+  }, [wallet?.provider, wallet?.provider.url]);
+
+  return { provider };
 };

packages/react/src/hooks/useProviderNetwork.ts

@@ -0,0 +1,21 @@
+import { Provider } from 'fuels';
+import { useEffect, useState } from 'react';
+import { useNetwork } from './useNetwork';
+
+export const useProviderNetwork = () => {
+  const { network } = useNetwork();
+  const [provider, setProvider] = useState<Provider | null>(null);
+
+  useEffect(() => {
+    async function createProvider() {
+      if (network?.url) {
+        const fuelProvider = await Provider.create(network?.url);
+        setProvider(fuelProvider);
+      }
+    }
+
+    createProvider();
+  }, [network?.url]);
+
+  return { provider };
+};

packages/react/src/hooks/useWallet.ts

@@ -1,4 +1,4 @@
-import { type Account, Address } from 'fuels';
+import { type Account, Address, Provider } from 'fuels';
 
 import {
   type DefinedNamedUseQueryResult,
@@ -7,7 +7,8 @@ import {
 } from '../core';
 import { useFuel } from '../providers';
 import { QUERY_KEYS } from '../utils';
-import { useProvider } from './useProvider';
+import { useAccount } from './useAccount';
+import { useNetwork } from './useNetwork';
 
 type UseWalletParamsDeprecated = string | null;
 
@@ -56,29 +57,44 @@ export function useWallet(
 
 export function useWallet(
   params?: UseWalletParamsDeprecated | UseWalletParams,
-): DefinedNamedUseQueryResult<'wallet', Account | null, Error> {
-  const { fuel } = useFuel();
-  const { provider } = useProvider();
+) {
+  const { fuel, networks } = useFuel();
+  const { network } = useNetwork();
+  const { account } = useAccount();
+
   const _params: UseWalletParams =
-    typeof params === 'string' ? { account: params } : params ?? {};
+    typeof params === 'string' ? { account: params } : (params ?? {});
 
-  return useNamedQuery('wallet', {
-    queryKey: QUERY_KEYS.wallet(_params.account, provider),
+  const queried = useNamedQuery('wallet', {
+    queryKey: QUERY_KEYS.wallet(account, network?.url),
     queryFn: async () => {
       try {
-        if (!provider) return null;
-        const accountAddress =
-          _params.account || (await fuel.currentAccount()) || '';
-        // Check if the address is valid
-        await Address.fromString(accountAddress);
-        const wallet = await fuel.getWallet(accountAddress);
-        wallet.connect(provider);
-        return wallet || null;
+        console.log('asd useWallet querying start', account, network?.url);
+        if (!account || !network?.url) return null;
+        await Address.fromString(account);
+        const wallet = await fuel.getWallet(account);
+
+        console.log('asd useWallet querying completed', wallet);
+
+        const configuredNetwork = networks.find(
+          (n) => n.chainId === network.chainId,
+        );
+
+        if (configuredNetwork?.url && configuredNetwork.url !== network.url) {
+          // if the user configured a different network for the same chainId, we connect to the configured network instead
+          const provider = await Provider.create(configuredNetwork.url);
+          wallet.connect(provider);
+        }
+
+        return wallet;
       } catch (_error: unknown) {
         return null;
       }
     },
+    enabled: !!account && !!network?.url,
     placeholderData: null,
     ..._params.query,
   });
+
+  return queried;
 }

packages/react/src/utils/queryKeys.ts

@@ -47,11 +47,10 @@ export const QUERY_KEYS = {
       queryKey.push(provider.getChainId());
     return queryKey;
   },
-  wallet: (address?: string | null, provider?: Provider | null): QueryKey => {
+  wallet: (address?: string | null, providerUrl?: string | null): QueryKey => {
     const queryKey = QUERY_KEYS.base.concat('wallet');
     if (address) queryKey.push(address);
-    if (provider?.getChainId?.() !== undefined)
-      queryKey.push(provider.getChainId());
+    if (providerUrl) queryKey.push(providerUrl);
     return queryKey;
   },
   transaction: (id?: string): QueryKey => {