fix: query key (#247)

Author: helciofranco

packages/app-portal/package.json

@@ -19,7 +19,7 @@
     "@fuel-bridge/solidity-contracts": "0.5.0",
     "@fuels/assets": "^0.17.0",
     "@fuels/connectors": "0.1.0",
-    "@fuels/react": "^0.17.0",
+    "@fuels/react": "0.17.0",
     "@fuels/react-xstore": "^0.17.0",
     "@fuels/ui": "workspace:*",
     "@hookform/resolvers": "^3.1.1",
@@ -58,4 +58,4 @@
     "tailwindcss-radix": "2.8.0",
     "typescript": "5.3.3"
   }
-}
+}

packages/app-portal/src/systems/Bridge/hooks/useBridge.tsx

@@ -16,6 +16,7 @@ import {
 } from '~portal/systems/Chains';
 
 import { FUEL_CHAIN } from 'app-commons';
+import { useEthBalance } from '~portal/systems/Chains/eth/hooks/useEthBalance';
 import { BridgeStatus } from '../machines';
 import type { BridgeMachineState } from '../machines';
 import { getChainFromUrlParam } from '../utils';
@@ -79,14 +80,14 @@ export function useBridge() {
     address: ethAddress,
     handlers: ethHandlers,
     isConnecting: ethIsConnecting,
-    balance: ethBalance,
     walletClient: ethWalletClient,
     publicClient: ethPublicClient,
-  } = useEthAccountConnection({
-    erc20Address: ethAssetAddress?.startsWith('0x')
+  } = useEthAccountConnection();
+  const { ethBalance } = useEthBalance(
+    ethAssetAddress?.startsWith('0x')
       ? (ethAssetAddress as `0x${string}`)
       : undefined,
-  });
+  );
 
   const {
     account: fuelAccount,
@@ -121,13 +122,15 @@ export function useBridge() {
 
     return bn(0);
   }, [ethBalance, fromNetwork, fuelBalance]);
+
   const status = store.useSelector(
     Services.bridge,
     selectors.status({ ethAccount: ethAddress, fuelAccount, assetBalance }),
   );
 
   const router = useRouter();
   const params = useSearchParams();
+
   // console.log(params);
   // const location = useLocation();
   // const queryParams = new URLSearchParams(location.search);

packages/app-portal/src/systems/Bridge/hooks/useWithdrawDelay.tsx

@@ -8,7 +8,7 @@ export function useWithdrawDelay() {
   const publicClient = usePublicClient();
 
   const { fuelChainState } = useNamedQuery('fuelChainState', {
-    queryKey: ['bridge', 'withdraw', 'state'],
+    queryKey: ['fuel', 'bridge', 'withdraw', 'state'],
     queryFn: getBridgeSolidityContracts,
     select: (bridgeSolidityContracts) => {
       return EthConnectorService.connectToFuelChainState({
@@ -21,7 +21,7 @@ export function useWithdrawDelay() {
   });
 
   return useNamedQuery('timeToWithdrawFormatted', {
-    queryKey: ['bridge', 'withdraw', 'formatted'],
+    queryKey: ['fuel', 'bridge', 'withdraw', 'formatted'],
     queryFn: async () => {
       const [blocksPerCommitInterval, timeToFinalize] = (await Promise.all([
         fuelChainState?.read.BLOCKS_PER_COMMIT_INTERVAL(),

packages/app-portal/src/systems/Chains/eth/hooks/useEthAccountConnection.tsx

@@ -1,7 +1,6 @@
 import { useModal } from 'connectkit';
 import {
   useAccount,
-  useBalance,
   useDisconnect,
   useEnsAvatar,
   useEnsName,
@@ -14,18 +13,11 @@ import { useEffect } from 'react';
 import { useOverlay } from '~portal/systems/Overlay';
 import { parseEthAddressToFuel } from '../utils';
 
-export function useEthAccountConnection(props?: {
-  erc20Address?: `0x${string}`;
-}) {
+export function useEthAccountConnection() {
   const overlay = useOverlay();
-  const { erc20Address } = props || {};
   const { address, isConnected } = useAccount();
   const { data: ensName } = useEnsName({ address });
   const { data: ensAvatar } = useEnsAvatar({ name: address });
-  const { data: balance } = useBalance({
-    address,
-    token: erc20Address,
-  });
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
 
@@ -72,6 +64,5 @@ export function useEthAccountConnection(props?: {
     signer: walletClient || undefined,
     walletClient: walletClient || undefined,
     publicClient: publicClient || undefined,
-    balance,
   };
 }

packages/app-portal/src/systems/Chains/eth/hooks/useEthBalance.tsx

@@ -0,0 +1,23 @@
+import { useAccount, useBalance, useBlockNumber } from 'wagmi';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+export function useEthBalance(token?: `0x${string}`) {
+  const queryClient = useQueryClient();
+
+  const { address } = useAccount();
+  const { data: blockNumber } = useBlockNumber({ watch: true });
+  const { data: ethBalance, queryKey: ethBalanceQueryKey } = useBalance({
+    address,
+    token,
+  });
+
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ethBalanceQueryKey });
+  }, [queryClient, blockNumber, ethBalanceQueryKey]);
+
+  return {
+    ethBalance,
+  };
+}

packages/app-portal/src/systems/Chains/fuel/hooks/useBalance.tsx

@@ -1,5 +1,6 @@
 import {
   useAccount,
+  useBalance,
   useConnectUI,
   useDisconnect,
   useFuel,
@@ -12,17 +13,14 @@ import { store } from '~portal/store';
 import type { AssetFuel } from '~portal/systems/Assets/utils';
 import { useFuelNetwork } from '~portal/systems/Settings/providers/FuelNetworkProvider';
 
-import { useBalance } from './useBalance';
-
 export const useFuelAccountConnection = (props?: { assetId?: string }) => {
   const { assetId } = props || {};
   const { fuel } = useFuel();
   const { fuelProvider, isLoading: isLoadingProvider } = useFuelNetwork();
   const { account, isLoading: isLoadingAccount } = useAccount();
   const { balance, isLoading: isLoadingBalance } = useBalance({
     assetId,
-    address: account || '',
-    provider: fuelProvider,
+    address: account || undefined,
   });
 
   const { isLoading: isLoadingConnected } = useIsConnected();

packages/app-portal/src/systems/Chains/fuel/hooks/useFuelAccountConnection.tsx

@@ -4,7 +4,7 @@ import { createProvider } from '~portal/systems/Chains/fuel/utils/provider';
 
 export const useFuelNetwork = () => {
   return useNamedQuery('fuelProvider', {
-    queryKey: ['bridge', 'fuel', 'provider'],
+    queryKey: ['fuel', 'bridge', 'fuel', 'provider'],
     queryFn: async () => {
       const provider = await createProvider(FUEL_CHAIN.providerUrl);
       return provider;