diff --git a/packages/react/src/hooks/useProvider.ts b/packages/react/src/hooks/useProvider.ts index dcc4a6bd..fd2e4cd5 100644 --- a/packages/react/src/hooks/useProvider.ts +++ b/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 }; }; diff --git a/packages/react/src/hooks/useProviderNetwork.ts b/packages/react/src/hooks/useProviderNetwork.ts new file mode 100644 index 00000000..ba4307eb --- /dev/null +++ b/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(null); + + useEffect(() => { + async function createProvider() { + if (network?.url) { + const fuelProvider = await Provider.create(network?.url); + setProvider(fuelProvider); + } + } + + createProvider(); + }, [network?.url]); + + return { provider }; +}; diff --git a/packages/react/src/hooks/useWallet.ts b/packages/react/src/hooks/useWallet.ts index 46b39728..2794ddc4 100644 --- a/packages/react/src/hooks/useWallet.ts +++ b/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; } diff --git a/packages/react/src/utils/queryKeys.ts b/packages/react/src/utils/queryKeys.ts index 8b86d1cb..aa9f8f02 100644 --- a/packages/react/src/utils/queryKeys.ts +++ b/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 => {