feat: move token amount formatting to hook

lifinance · May 24, 2022 · ec55aa1 · ec55aa1
1 parent acd71c0
commit ec55aa1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment/SwapInputAdornment.tsx
@@ -1,13 +1,12 @@
 import { InputAdornment, Skeleton } from '@mui/material';
-import { useMemo } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
 import {
   SwapFormKeyHelper,
   SwapFormTypeProps,
 } from '../../providers/SwapFormProvider';
-import { formatTokenAmount, formatTokenPrice } from '../../utils/format';
+import { formatTokenPrice } from '../../utils/format';
 import { PriceTypography } from '../PriceTypography';
 import { SwapMaxAmountTypography } from './SwapInputAdornment.style';
 
@@ -27,13 +26,8 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
     tokenAddress,
   );
 
-  const amount = useMemo(
-    () => (token?.amount ? formatTokenAmount(token.amount) : null),
-    [token],
-  );
-
   const handleMax = () => {
-    setValue(SwapFormKeyHelper.getAmountKey(formType), amount);
+    setValue(SwapFormKeyHelper.getAmountKey(formType), token?.amount ?? '');
   };
 
   return (
@@ -56,7 +50,7 @@ export const SwapInputAdornment: React.FC<SwapFormTypeProps> = ({
             data-amount={token?.amount}
           >
             {t(`swap.maxAmount`, {
-              amount,
+              amount: token?.amount,
             })}
           </SwapMaxAmountTypography>
         ) : null

diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { LiFi } from '../lifi';
 import { useWallet } from '../providers/WalletProvider';
+import { formatTokenAmount } from '../utils/format';
 import { useToken } from './useToken';
 
 export const useTokenBalance = (chainId: number, tokenAddress: string) => {
@@ -22,7 +23,10 @@ export const useTokenBalance = (chainId: number, tokenAddress: string) => {
         return null;
       }
       const tokenBalance = await LiFi.getTokenBalance(address as string, token);
-      return tokenBalance;
+      return {
+        ...tokenBalance,
+        amount: formatTokenAmount(tokenBalance?.amount),
+      };
     },
     {
       enabled: Boolean(account.address) && Boolean(token),