fix: max button should return full amount

lifinance · May 22, 2023 · 64e0592 · 64e0592
1 parent 4638a6e
commit 64e0592
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 46 deletions.
diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useTokenAddressBalance } from '../../hooks';
 import type { SwapFormTypeProps } from '../../providers';
 import { SwapFormKeyHelper } from '../../providers';
-import { formatTokenPrice } from '../../utils';
+import { formatTokenAmount, formatTokenPrice } from '../../utils';
 
 export const FormPriceHelperText: React.FC<SwapFormTypeProps> = ({
   formType,
@@ -59,7 +59,7 @@ export const FormPriceHelperText: React.FC<SwapFormTypeProps> = ({
           pl={0.25}
         >
           {`/ ${t(`format.number`, {
-            value: token?.amount,
+            value: formatTokenAmount(token?.amount),
           })}`}
         </Typography>
       ) : null}

diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import type { SwapFormTypeProps } from '../../providers';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { DisabledUI } from '../../types';
-import { formatAmount } from '../../utils';
+import { formatInputAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { FitInputText } from './FitInputText';
 import { FormPriceHelperText } from './FormPriceHelperText';
@@ -32,15 +32,15 @@ export const SwapInput: React.FC<SwapFormTypeProps & BoxProps> = ({
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { value } = event.target;
-    const formattedAmount = formatAmount(value, true);
+    const formattedAmount = formatInputAmount(value, true);
     onChange(formattedAmount);
   };
 
   const handleBlur = (
     event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { value } = event.target;
-    const formattedAmount = formatAmount(value);
+    const formattedAmount = formatInputAmount(value);
     onChange(formattedAmount);
     onBlur();
   };

diff --git a/packages/widget/src/components/SwapInput/SwapInputEndAdornment.tsx b/packages/widget/src/components/SwapInput/SwapInputEndAdornment.tsx
@@ -28,7 +28,7 @@ export const SwapInputEndAdornment = ({ formType }: SwapFormTypeProps) => {
 
   const handleMax = () => {
     const chain = getChainById(chainId);
-    let maxAmount;
+    let maxAmount = token?.amount;
     if (
       chain?.nativeToken.address === tokenAddress &&
       data?.available &&
@@ -45,13 +45,9 @@ export const SwapInputEndAdornment = ({ formType }: SwapFormTypeProps) => {
       }
     }
 
-    setValue(
-      SwapFormKeyHelper.getAmountKey(formType),
-      maxAmount || token?.amount || '',
-      {
-        shouldTouch: true,
-      },
-    );
+    setValue(SwapFormKeyHelper.getAmountKey(formType), maxAmount || '', {
+      shouldTouch: true,
+    });
   };
 
   return (

diff --git a/packages/widget/src/components/TokenList/TokenListItem.tsx b/packages/widget/src/components/TokenList/TokenListItem.tsx
@@ -11,7 +11,11 @@ import {
 } from '@mui/material';
 import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { formatTokenPrice, shortenAddress } from '../../utils';
+import {
+  formatTokenAmount,
+  formatTokenPrice,
+  shortenAddress,
+} from '../../utils';
 import { LinkButton, ListItem, ListItemButton } from './TokenList.style';
 import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 
@@ -141,7 +145,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
             {Number(token.amount) ? (
               <Typography variant="body1" noWrap>
                 {t('format.number', {
-                  value: token.amount,
+                  value: formatTokenAmount(token.amount),
                 })}
               </Typography>
             ) : null}

diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -2,7 +2,6 @@ import type { Token, TokenAmount } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useWallet } from '../providers';
-import { formatTokenAmount } from '../utils';
 import { useGetTokenBalancesWithRetry } from './useGetTokenBalancesWithRetry';
 
 const defaultRefetchInterval = 30_000;
@@ -48,9 +47,9 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => {
       const cachedTokenAmount =
         queryClient.getQueryData<TokenAmount>(tokenBalanceQueryKey);
 
-      const formattedAmount = formatTokenAmount(tokenBalances[0].amount);
+      const tokenAmount = tokenBalances[0].amount;
 
-      if (cachedTokenAmount?.amount !== formattedAmount) {
+      if (cachedTokenAmount?.amount !== tokenAmount) {
         queryClient.setQueryDefaults(tokenBalanceQueryKey, {
           refetchInterval: defaultRefetchInterval,
           staleTime: defaultRefetchInterval,
@@ -67,7 +66,7 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => {
             );
             clonedData[index] = {
               ...clonedData[index],
-              amount: formattedAmount,
+              amount: tokenAmount,
             };
             return clonedData;
           }
@@ -76,7 +75,7 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => {
 
       return {
         ...tokenBalances[0],
-        amount: formattedAmount,
+        amount: tokenAmount,
       } as TokenAmount;
     },
     {

diff --git a/packages/widget/src/hooks/useTokenBalances.ts b/packages/widget/src/hooks/useTokenBalances.ts
@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useLiFi, useWallet } from '../providers';
 import type { TokenAmount } from '../types';
-import { formatTokenAmount } from '../utils';
 import { useFeaturedTokens } from './useFeaturedTokens';
 import { useTokens } from './useTokens';
 
@@ -39,11 +38,9 @@ export const useTokenBalances = (selectedChainId?: number) => {
         parseFloat(a.amount ?? '0') * parseFloat(a.priceUSD ?? '0');
 
       const formattedTokens = (
-        (tokenBalances.length === 0 ? tokens : tokenBalances) as TokenAmount[]
-      ).map((token) => {
-        token.amount = formatTokenAmount(token.amount);
-        return token;
-      });
+        tokenBalances.length === 0 ? tokens : tokenBalances
+      ) as TokenAmount[];
+
       const result = [
         ...formattedTokens
           .filter(

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -119,8 +119,8 @@
     "inProgress": "in progress",
     "insurance": {
       "bridgeExploits": "Bridge malfunctions, hacks or exploits",
-      "insure": "Insure <strong>{{amount}} {{tokenSymbol}}</strong> in transit.",
-      "insured": "You've insured <strong>{{amount}} {{tokenSymbol}}</strong> in transit:",
+      "insure": "Insure <strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> in transit.",
+      "insured": "You've insured <strong>{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}}</strong> in transit:",
       "slippageError": "Error in slippage for tokens received"
     },
     "info": {

diff --git a/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx b/packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx
@@ -108,7 +108,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
           : t('swap.success.title.swapSuccessful');
       if (token) {
         primaryMessage = t('swap.success.message.swapSuccessful', {
-          amount: token.amount,
+          amount: formatTokenAmount(token.amount),
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),
@@ -125,7 +125,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
       });
       if (token) {
         secondaryMessage = t('swap.success.message.swapSuccessful', {
-          amount: token.amount,
+          amount: formatTokenAmount(token.amount),
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),
@@ -142,7 +142,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
       });
       if (token) {
         secondaryMessage = t('swap.success.message.swapSuccessful', {
-          amount: token.amount,
+          amount: formatTokenAmount(token.amount),
           tokenSymbol: token.symbol,
           chainName: getChainById(token.chainId)?.name,
           walletAddress: shortenAddress(route.toAddress),

diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx
@@ -2,7 +2,7 @@ import type { ChainKey } from '@lifi/sdk';
 import { getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useId, useMemo } from 'react';
 import { setDefaultSettings } from '../../stores';
-import { formatAmount } from '../../utils';
+import { formatInputAmount } from '../../utils';
 import type { WidgetContextProps, WidgetProviderProps } from './types';
 
 const initialContext: WidgetContextProps = {
@@ -81,7 +81,7 @@ export const WidgetProvider: React.FC<
         fromAmount:
           typeof searchParams.fromAmount === 'string' &&
           !isNaN(parseFloat(searchParams.fromAmount))
-            ? formatAmount(searchParams.fromAmount)
+            ? formatInputAmount(searchParams.fromAmount)
             : fromAmount,
         elementId,
         integrator,

diff --git a/packages/widget/src/utils/format.ts b/packages/widget/src/utils/format.ts
@@ -29,9 +29,7 @@ export const formatTokenAmount = (
     decimalPlaces++;
   }
 
-  return Big(
-    parseFloat(Big(parsedAmount).toFixed(decimalPlaces + 1, 0)),
-  ).toString();
+  return Big(parsedAmount).toFixed(decimalPlaces + 1, 0);
 };
 
 export const formatSlippage = (
@@ -61,8 +59,8 @@ export const formatSlippage = (
   return parsedSlippage.toString();
 };
 
-export const formatAmount = (
-  amount: string = '',
+export const formatInputAmount = (
+  amount: string,
   returnInitial: boolean = false,
 ) => {
   if (!amount) {
@@ -76,20 +74,15 @@ export const formatAmount = (
   if (isNaN(Number(formattedAmount)) && !isNaN(parsedAmount)) {
     return parsedAmount.toString();
   }
-  if (isNaN(parsedAmount)) {
-    return '';
-  }
-  if (parsedAmount < 0) {
-    return Math.abs(parsedAmount).toString();
-  }
   try {
-    if (returnInitial && Big(formattedAmount)) {
+    const absFormattedAmount = Big(formattedAmount).abs();
+    if (returnInitial) {
       return formattedAmount;
     }
+    return absFormattedAmount.toString();
   } catch {
     return '';
   }
-  return Big(parsedAmount).toString();
 };
 
 export const formatTokenPrice = (amount?: string, price?: string) => {