remove refetch intervals

gear-tech · Nov 21, 2024 · 00b0ca2 · 00b0ca2
1 parent 875e740
commit 00b0ca2
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 65 deletions.
diff --git a/frontend/src/features/history/components/latest-transactions/latest-transactions.tsx b/frontend/src/features/history/components/latest-transactions/latest-transactions.tsx
@@ -1,23 +1,33 @@
 import { useQuery } from '@tanstack/react-query';
 import { request } from 'graphql-request';
+import { useMemo } from 'react';
 
-import { useTokens } from '@/hooks';
+import { useInvalidateOnBlock, useTokens } from '@/hooks';
 
-import { TRANSFERS_QUERY, REFETCH_INTERVAL, LATEST_TRANSACTIONS_LIMIT, INDEXER_ADDRESS } from '../../consts';
+import { TRANSFERS_QUERY, LATEST_TRANSACTIONS_LIMIT, INDEXER_ADDRESS } from '../../consts';
 import { TransactionCard } from '../transaction-card';
 
 import styles from './latest-transactions.module.scss';
 
-function LatestTransactions() {
-  const { data, isLoading: isTransactionsQueryLoading } = useQuery({
-    queryKey: ['latestTransactions'],
+function useLatestTransactions() {
+  const queryKey = useMemo(() => ['latestTransactions'], []);
+
+  const query = useQuery({
+    queryKey,
     queryFn: () =>
       request(INDEXER_ADDRESS, TRANSFERS_QUERY, { limit: LATEST_TRANSACTIONS_LIMIT, offset: 0, where: null }),
-    refetchInterval: REFETCH_INTERVAL,
     select: ({ transfers }) => transfers,
   });
 
+  useInvalidateOnBlock({ queryKey });
+
+  return query;
+}
+
+function LatestTransactions() {
+  const { data, isLoading: isTransactionsQueryLoading } = useLatestTransactions();
   const { decimals, symbols, isLoading: isTokensQueryLoading } = useTokens();
+
   const isLoading = isTransactionsQueryLoading || isTokensQueryLoading;
 
   const renderTransactions = () =>

diff --git a/frontend/src/features/history/consts/index.ts b/frontend/src/features/history/consts/index.ts
@@ -1,11 +1,10 @@
 import { INDEXER_ADDRESS } from './env';
 import { FIELD_NAME, DEFAULT_VALUES, TIMESTAMP_OPTIONS, STATUS_OPTIONS } from './filters';
-import { REFETCH_INTERVAL, TRANSACTIONS_LIMIT, LATEST_TRANSACTIONS_LIMIT, TRANSFERS_QUERY } from './queries';
+import { TRANSACTIONS_LIMIT, LATEST_TRANSACTIONS_LIMIT, TRANSFERS_QUERY } from './queries';
 
 export {
   INDEXER_ADDRESS,
   TRANSFERS_QUERY,
-  REFETCH_INTERVAL,
   TRANSACTIONS_LIMIT,
   LATEST_TRANSACTIONS_LIMIT,
   FIELD_NAME,

diff --git a/frontend/src/features/history/consts/queries.ts b/frontend/src/features/history/consts/queries.ts
@@ -1,6 +1,5 @@
 import { graphql } from '../graphql';
 
-const REFETCH_INTERVAL = 10000;
 const LATEST_TRANSACTIONS_LIMIT = 5;
 const TRANSACTIONS_LIMIT = 12;
 
@@ -30,4 +29,4 @@ const TRANSFERS_CONNECTION_QUERY = graphql(`
   }
 `);
 
-export { REFETCH_INTERVAL, TRANSACTIONS_LIMIT, LATEST_TRANSACTIONS_LIMIT, TRANSFERS_QUERY, TRANSFERS_CONNECTION_QUERY };
+export { TRANSACTIONS_LIMIT, LATEST_TRANSACTIONS_LIMIT, TRANSFERS_QUERY, TRANSFERS_CONNECTION_QUERY };
diff --git a/frontend/src/features/swap/consts/index.ts b/frontend/src/features/swap/consts/index.ts
@@ -9,9 +9,6 @@ const NETWORK_INDEX = {
   ETH: 1,
 };
 
-const BALANCE_REFETCH_INTERVAL = 10000;
-const ALLOWANCE_REFETCH_INTERVAL = BALANCE_REFETCH_INTERVAL;
-
 export {
   ETH_BRIDGING_PAYMENT_CONTRACT_ADDRESS,
   BRIDGING_PAYMENT_ABI,
@@ -20,8 +17,6 @@ export {
   ADDRESS_SCHEMA,
   EVENT_NAME,
   ERROR_MESSAGE,
-  BALANCE_REFETCH_INTERVAL,
-  ALLOWANCE_REFETCH_INTERVAL,
   NETWORK_INDEX,
   SERVICE_NAME,
   QUERY_NAME,

diff --git a/frontend/src/features/swap/hooks/eth/use-eth-account-balance.ts b/frontend/src/features/swap/hooks/eth/use-eth-account-balance.ts
@@ -1,7 +1,7 @@
 import { formatEther } from 'viem';
 import { useBalance } from 'wagmi';
 
-import { useEthAccount } from '@/hooks';
+import { useEthAccount, useInvalidateOnBlock } from '@/hooks';
 
 const withPrecision = (value: string) => {
   // simplest solution without rounding for now
@@ -13,10 +13,12 @@ const withPrecision = (value: string) => {
 function useEthAccountBalance() {
   const ethAccount = useEthAccount();
 
-  const { data, isPending } = useBalance({
+  const { data, isPending, queryKey } = useBalance({
     address: ethAccount?.address,
   });
 
+  useInvalidateOnBlock({ queryKey });
+
   const { value } = data || {};
   const formattedValue = data ? withPrecision(formatEther(data.value)) : undefined;
   const isLoading = isPending;

diff --git a/frontend/src/features/swap/hooks/eth/use-eth-ft-allowance.ts b/frontend/src/features/swap/hooks/eth/use-eth-ft-allowance.ts
@@ -2,23 +2,26 @@ import { HexString } from '@gear-js/api';
 import { useReadContract } from 'wagmi';
 
 import { FUNGIBLE_TOKEN_ABI } from '@/consts';
-import { useEthAccount } from '@/hooks';
-
-import { ALLOWANCE_REFETCH_INTERVAL } from '../../consts';
+import { useEthAccount, useInvalidateOnBlock } from '@/hooks';
 
 import { useERC20ManagerAddress } from './use-erc20-manager-address';
 
 function useEthFTAllowance(address: HexString | undefined) {
   const { data: erc20ManagerAddress } = useERC20ManagerAddress();
   const ethAccount = useEthAccount();
 
-  return useReadContract({
+  const state = useReadContract({
     address,
     abi: FUNGIBLE_TOKEN_ABI,
     functionName: 'allowance',
     args: ethAccount.address && erc20ManagerAddress ? [ethAccount.address, erc20ManagerAddress] : undefined,
-    query: { refetchInterval: ALLOWANCE_REFETCH_INTERVAL },
   });
+
+  const { queryKey } = state;
+
+  useInvalidateOnBlock({ queryKey });
+
+  return state;
 }
 
 export { useEthFTAllowance };
diff --git a/frontend/src/features/swap/hooks/eth/use-eth-ft-balance.ts b/frontend/src/features/swap/hooks/eth/use-eth-ft-balance.ts
@@ -3,30 +3,29 @@ import { formatUnits } from 'viem';
 import { useReadContract } from 'wagmi';
 
 import { FUNGIBLE_TOKEN_ABI } from '@/consts';
-import { useEthAccount } from '@/hooks';
+import { useEthAccount, useInvalidateOnBlock } from '@/hooks';
 import { isUndefined } from '@/utils';
 
-import { BALANCE_REFETCH_INTERVAL } from '../../consts';
 import { FUNCTION_NAME } from '../../consts/eth';
 
 const abi = FUNGIBLE_TOKEN_ABI;
 
 function useEthFTBalance(address: HexString | undefined, decimals: number | undefined) {
   const ethAccount = useEthAccount();
+  const enabled = Boolean(address) && Boolean(ethAccount.address);
 
   // TODO: logger
-  const { data, isLoading } = useReadContract({
+  const { data, isLoading, queryKey } = useReadContract({
     address,
     abi,
     functionName: FUNCTION_NAME.FUNGIBLE_TOKEN_BALANCE,
     args: ethAccount.address ? [ethAccount.address] : undefined,
 
-    query: {
-      refetchInterval: BALANCE_REFETCH_INTERVAL,
-      enabled: Boolean(address) && Boolean(ethAccount.address),
-    },
+    query: { enabled },
   });
 
+  useInvalidateOnBlock({ queryKey, enabled });
+
   const value = data;
   const formattedValue = !isUndefined(value) && !isUndefined(decimals) ? formatUnits(value, decimals) : undefined;
 

diff --git a/frontend/src/features/swap/hooks/vara/use-derive-balances-all.ts b/frontend/src/features/swap/hooks/vara/use-derive-balances-all.ts
diff --git a/frontend/src/features/swap/hooks/vara/use-vara-account-balance.ts b/frontend/src/features/swap/hooks/vara/use-vara-account-balance.ts
@@ -1,13 +1,11 @@
-import { useAccount, useBalanceFormat } from '@gear-js/react-hooks';
+import { useAccount, useBalanceFormat, useDeriveBalancesAll } from '@gear-js/react-hooks';
 import { useMemo } from 'react';
 
-import { useDeriveBalancesAll } from './use-derive-balances-all';
-
 function useVaraAccountBalance() {
   const { account, isAccountReady } = useAccount();
   const { getFormattedBalance } = useBalanceFormat();
 
-  const { data, isPending } = useDeriveBalancesAll(account?.address);
+  const data = useDeriveBalancesAll(account?.address);
   const { freeBalance } = data || {};
   const value = freeBalance?.toBigInt();
   const formattedValue = value !== undefined ? getFormattedBalance(value).value : undefined;
@@ -17,8 +15,8 @@ function useVaraAccountBalance() {
     if (!isAccountReady) return true;
     if (!account) return false;
 
-    return isPending;
-  }, [account, isAccountReady, isPending]);
+    return !data;
+  }, [account, isAccountReady, data]);
 
   return { value, formattedValue, isLoading };
 }

diff --git a/frontend/src/features/swap/hooks/vara/use-vara-ft-allowance.ts b/frontend/src/features/swap/hooks/vara/use-vara-ft-allowance.ts
@@ -3,8 +3,6 @@ import { useAccount, useProgram, useProgramQuery } from '@gear-js/react-hooks';
 
 import { BRIDGING_PAYMENT_CONTRACT_ADDRESS, VftProgram } from '@/consts';
 
-import { ALLOWANCE_REFETCH_INTERVAL } from '../../consts';
-
 function useVaraFTAllowance(address: HexString | undefined) {
   const { account } = useAccount();
 
@@ -19,7 +17,8 @@ function useVaraFTAllowance(address: HexString | undefined) {
     functionName: 'allowance',
     // TODO: remove assertion after @gear-js/react-hooks update to support empty args
     args: [account?.decodedAddress as HexString, BRIDGING_PAYMENT_CONTRACT_ADDRESS],
-    query: { enabled: Boolean(account), refetchInterval: ALLOWANCE_REFETCH_INTERVAL },
+    query: { enabled: Boolean(account) },
+    watch: true,
   });
 }
 

diff --git a/frontend/src/features/swap/hooks/vara/use-vara-ft-balance.ts b/frontend/src/features/swap/hooks/vara/use-vara-ft-balance.ts
@@ -5,7 +5,7 @@ import { formatUnits } from 'viem';
 import { VftProgram } from '@/consts';
 import { isUndefined } from '@/utils';
 
-import { BALANCE_REFETCH_INTERVAL, QUERY_NAME, SERVICE_NAME } from '../../consts';
+import { QUERY_NAME, SERVICE_NAME } from '../../consts';
 
 function useVaraFTBalance(address: HexString | undefined, decimals: number | undefined) {
   const { account } = useAccount();
@@ -20,7 +20,8 @@ function useVaraFTBalance(address: HexString | undefined, decimals: number | und
     serviceName: SERVICE_NAME.VFT,
     functionName: QUERY_NAME.BALANCE,
     args: [account?.decodedAddress || '0x00'],
-    query: { enabled: Boolean(account), refetchInterval: BALANCE_REFETCH_INTERVAL },
+    query: { enabled: Boolean(account) },
+    watch: true,
   });
 
   const value = data;

diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -2,5 +2,6 @@ import { useAccount as useEthAccount } from 'wagmi';
 
 import { useChangeEffect, useLoading, useModal, useDebounce } from './common';
 import { useTokens } from './tokens';
+import { useInvalidateOnBlock } from './use-invalidate-on-block';
 
-export { useEthAccount, useModal, useLoading, useChangeEffect, useDebounce, useTokens };
+export { useEthAccount, useModal, useLoading, useChangeEffect, useDebounce, useTokens, useInvalidateOnBlock };
diff --git a/frontend/src/hooks/use-invalidate-on-block.ts b/frontend/src/hooks/use-invalidate-on-block.ts
@@ -0,0 +1,12 @@
+import { QueryKey, useQueryClient } from '@tanstack/react-query';
+import { useWatchBlockNumber } from 'wagmi';
+
+function useInvalidateOnBlock({ queryKey, enabled }: { queryKey: QueryKey; enabled?: boolean }) {
+  const queryClient = useQueryClient();
+
+  const onBlockNumber = () => void queryClient.invalidateQueries({ queryKey }, { cancelRefetch: false });
+
+  useWatchBlockNumber({ enabled, onBlockNumber });
+}
+
+export { useInvalidateOnBlock };