diff --git a/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx b/packages/widget/src/components/SwapInput/FormPriceHelperText.tsx index c005498b7..a3d045433 100644 --- 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 = ({ formType, @@ -59,7 +59,7 @@ export const FormPriceHelperText: React.FC = ({ pl={0.25} > {`/ ${t(`format.number`, { - value: token?.amount, + value: formatTokenAmount(token?.amount), })}`} ) : null} diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx index b72f7b6f4..7e3c57f29 100644 --- 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,7 +32,7 @@ export const SwapInput: React.FC = ({ event: ChangeEvent, ) => { const { value } = event.target; - const formattedAmount = formatAmount(value, true); + const formattedAmount = formatInputAmount(value, true); onChange(formattedAmount); }; @@ -40,7 +40,7 @@ export const SwapInput: React.FC = ({ event: ChangeEvent, ) => { 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 index 39e6badda..4e1f0fad2 100644 --- 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 index 91c2ee8de..a45875c16 100644 --- 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 = ({ {Number(token.amount) ? ( {t('format.number', { - value: token.amount, + value: formatTokenAmount(token.amount), })} ) : null} diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts index cb18957f9..5d5e372f3 100644 --- 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(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 index c17ea03b7..4005c82b2 100644 --- 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 index 7b959e7a0..6825c09e0 100644 --- 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 {{amount}} {{tokenSymbol}} in transit.", - "insured": "You've insured {{amount}} {{tokenSymbol}} in transit:", + "insure": "Insure {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in transit.", + "insured": "You've insured {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} 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 index 0739954b9..2e264a207 100644 --- 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 = ({ : 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 = ({ }); 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 = ({ }); 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 index 133cd8f1d..85cd30471 100644 --- 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 index 7ffe10639..60d01b9d1 100644 --- 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) => {