refactor: showing token amount across components

lifinance · Aug 10, 2022 · 9f8f032 · 9f8f032
1 parent a941359
commit 9f8f032
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 71 deletions.
diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
@@ -19,10 +19,8 @@ export const FormPriceHelperText: React.FC<
       SwapFormKeyHelper.getTokenKey(formType),
     ],
   });
-  const { token, isLoading, isFetching } = useTokenBalance(
-    chainId,
-    tokenAddress,
-  );
+
+  const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
 
   const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
 
@@ -47,7 +45,7 @@ export const FormPriceHelperText: React.FC<
           value: fromAmountTokenPrice,
         })}
       </Typography>
-      {isLoading && isFetching ? (
+      {isLoading && tokenAddress ? (
         <Skeleton
           variant="text"
           width={48}

diff --git a/packages/widget/src/components/SwapInput/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInput/SwapInputAdornment.tsx
@@ -17,18 +17,16 @@ export const SwapInputAdornment = ({ formType }: SwapFormTypeProps) => {
       SwapFormKeyHelper.getTokenKey(formType),
     ],
   });
-  const { token, isLoading, isFetching } = useTokenBalance(
-    chainId,
-    tokenAddress,
-  );
+
+  const { token, isLoading } = useTokenBalance(chainId, tokenAddress);
 
   const handleMax = () => {
     setValue(SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '');
   };
 
   return (
     <InputAdornment position="end">
-      {isLoading && isFetching ? (
+      {isLoading && tokenAddress ? (
         <Skeleton
           variant="rectangular"
           width={46}

diff --git a/packages/widget/src/hooks/useToken.ts b/packages/widget/src/hooks/useToken.ts
@@ -13,6 +13,7 @@ export const useToken = (chainId: number, tokenAddress: string) => {
 
   return {
     token,
-    isLoading: isLoading && isFetching,
+    isLoading,
+    isFetching,
   };
 };
diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -1,61 +1,20 @@
-import { TokenAmount } from '@lifi/sdk';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import { LiFi } from '../config/lifi';
-import { useWallet } from '../providers/WalletProvider';
-import { formatTokenAmount } from '../utils';
-import { useToken } from './useToken';
+import { useMemo } from 'react';
+import { useTokenBalances } from './useTokenBalances';
 
 export const useTokenBalance = (chainId: number, tokenAddress: string) => {
-  const { account } = useWallet();
-  const queryClient = useQueryClient();
-  const { token } = useToken(chainId, tokenAddress);
+  const { tokens, tokensWithBalance, isBalanceLoading, refetch } =
+    useTokenBalances(chainId);
 
-  const {
-    data: tokenWithBalance,
-    isLoading,
-    isFetching,
-    refetch,
-  } = useQuery(
-    ['token-balance', account.address, chainId, tokenAddress],
-    async ({ queryKey: [, address] }) => {
-      if (!address || !token) {
-        return null;
-      }
-      const tokenBalance = await LiFi.getTokenBalance(address as string, token);
-      return {
-        ...token,
-        ...tokenBalance,
-        amount: formatTokenAmount(tokenBalance?.amount),
-      };
-    },
-    {
-      enabled: Boolean(account.address) && Boolean(token),
-      refetchIntervalInBackground: true,
-      refetchInterval: 30_000,
-      staleTime: 30_000,
-      cacheTime: 30_000,
-    },
-  );
-
-  const refetchBalance = useCallback(
-    async (chainId?: number, tokenAddress?: string) => {
-      if (!chainId && !tokenAddress) {
-        refetch();
-        return;
-      }
-      await queryClient.invalidateQueries(
-        ['token-balance', account.address, chainId, tokenAddress],
-        { type: 'all', exact: true },
-      );
-    },
-    [account.address, queryClient, refetch],
-  );
+  const token = useMemo(() => {
+    const token = (tokensWithBalance ?? tokens)?.find(
+      (token) => token.address === tokenAddress && token.chainId === chainId,
+    );
+    return token;
+  }, [chainId, tokenAddress, tokens, tokensWithBalance]);
 
   return {
-    token: tokenWithBalance ?? (token as TokenAmount | undefined),
-    isLoading,
-    isFetching,
-    refetchBalance,
+    token,
+    isLoading: isBalanceLoading,
+    refetch,
   };
 };
diff --git a/packages/widget/src/hooks/useTokenBalances.ts b/packages/widget/src/hooks/useTokenBalances.ts
@@ -28,8 +28,8 @@ export const useTokenBalances = (selectedChainId: number) => {
     isFetched: isBalanceFetched,
     refetch,
   } = useQuery(
-    ['token-balances', selectedChainId, account.address, tokens?.length],
-    async ({ queryKey: [, , accountAddress] }) => {
+    ['token-balances', account.address, selectedChainId, tokens?.length],
+    async ({ queryKey: [, accountAddress] }) => {
       if (!accountAddress || !tokens) {
         return;
       }
@@ -63,7 +63,7 @@ export const useTokenBalances = (selectedChainId: number) => {
         token.amount = formatTokenAmount(token.amount);
         return token;
       });
-      return [
+      const result = [
         ...formattedTokens
           .filter(
             (token) =>
@@ -86,6 +86,7 @@ export const useTokenBalances = (selectedChainId: number) => {
             token.amount === '0' && !featuredTokenAddresses.has(token.address),
         ),
       ];
+      return result;
     },
     {
       enabled: isBalanceLoadingEnabled,
@@ -102,6 +103,6 @@ export const useTokenBalances = (selectedChainId: number) => {
     isLoading,
     isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
     isBalanceFetched,
-    updateBalances: refetch,
+    refetch,
   };
 };
diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -28,14 +28,14 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   const navigate = useNavigate();
   const ref = useRef<BottomSheetBase>(null);
   const { getChainById } = useChains();
-  const { token, refetchBalance } = useTokenBalance(
+  const { token, refetch: refetchBalance } = useTokenBalance(
     route.toChainId,
     route.toToken.address,
   );
   const { setValue } = useFormContext();
 
   const clearFromAmount = () => {
-    refetchBalance(route.fromChainId, route.fromToken.address);
+    refetchBalance();
     setValue(SwapFormKey.FromAmount, '');
   };