diff --git a/wormhole-connect/src/hooks/useGetTokenBalances.ts b/wormhole-connect/src/hooks/useGetTokenBalances.ts index 6e0203350..6e4f03cdb 100644 --- a/wormhole-connect/src/hooks/useGetTokenBalances.ts +++ b/wormhole-connect/src/hooks/useGetTokenBalances.ts @@ -2,14 +2,10 @@ import { useDispatch, useSelector } from 'react-redux'; import { RootState } from 'store'; import { TokenId } from 'sdklegacy'; import { useEffect, useState } from 'react'; -import { - accessBalance, - Balances, - formatBalance, - updateBalances, -} from 'store/transferInput'; +import { accessBalance, Balances, updateBalances } from 'store/transferInput'; import config, { getWormholeContextV2 } from 'config'; import { TokenConfig } from 'config/types'; +import { formatAmount } from 'utils/amount'; import { chainToPlatform } from '@wormhole-foundation/sdk-base'; import { getTokenBridgeWrappedTokenAddress } from 'utils/sdkv2'; import { Chain, TokenAddress } from '@wormhole-foundation/sdk'; @@ -133,7 +129,7 @@ const useGetTokenBalances = ( const balance = result[tokenAddress]; let formatted: string | null = null; if (balance !== null) { - formatted = formatBalance(chain, tokenConfig, BigInt(balance)); + formatted = formatAmount(chain, tokenConfig, balance); } updatedBalances[tokenConfig.key] = { balance: formatted, diff --git a/wormhole-connect/src/store/transferInput.ts b/wormhole-connect/src/store/transferInput.ts index 5fe126273..c744c8156 100644 --- a/wormhole-connect/src/store/transferInput.ts +++ b/wormhole-connect/src/store/transferInput.ts @@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { Context } from 'sdklegacy'; import config from 'config'; import { TokenConfig } from 'config/types'; -import { getTokenDecimals } from 'utils'; import { switchChain, TransferWallet, @@ -16,7 +15,7 @@ import { getEmptyDataWrapper, receiveDataWrapper, } from './helpers'; -import { amount, Chain } from '@wormhole-foundation/sdk'; +import { Chain } from '@wormhole-foundation/sdk'; export type Balance = { lastUpdated: number; @@ -30,24 +29,6 @@ export type BalancesCache = { [key in Chain]?: ChainBalances }; type WalletAddress = string; export type WalletBalances = { [key: WalletAddress]: BalancesCache }; -export const formatBalance = ( - chain: Chain, - token: TokenConfig, - balance: string | bigint | null, -): string | null => { - if (!balance) { - return null; - } - const decimals = getTokenDecimals(chain, token.tokenId); - const balanceNum = amount.whole({ - amount: balance.toString(), - decimals, - }); - return balanceNum.toLocaleString('en', { - maximumFractionDigits: 6, - }); -}; - export const formatStringAmount = (amountStr = '0'): string => { const amountNum = parseFloat(amountStr); return amountNum.toLocaleString('en', { diff --git a/wormhole-connect/src/utils/amount.ts b/wormhole-connect/src/utils/amount.ts new file mode 100644 index 000000000..91f10915b --- /dev/null +++ b/wormhole-connect/src/utils/amount.ts @@ -0,0 +1,24 @@ +import { getTokenDecimals } from 'utils'; +import { amount, Chain } from '@wormhole-foundation/sdk'; +import { TokenConfig } from 'config/types'; + +export const formatAmount = ( + chain: Chain, + token: TokenConfig, + val: string | bigint | null, + truncate?: number, +): string | null => { + if (!val) { + return null; + } + + const decimals = getTokenDecimals(chain, token.tokenId); + + let balanceAmount = amount.fromBaseUnits(BigInt(val), decimals); + + if (truncate) { + balanceAmount = amount.truncate(balanceAmount, truncate); + } + + return amount.display(balanceAmount); +}; diff --git a/wormhole-connect/src/utils/errors.ts b/wormhole-connect/src/utils/errors.ts index b7cefa00b..e80fd6f04 100644 --- a/wormhole-connect/src/utils/errors.ts +++ b/wormhole-connect/src/utils/errors.ts @@ -36,7 +36,7 @@ export function interpretTransferError( uiErrorMessage = 'Transfer timed out, please try again'; internalErrorCode = ERR_TIMEOUT; } else if (InsufficientFundsForGasError.MESSAGE_REGEX.test(e?.message)) { - uiErrorMessage = e.message; + uiErrorMessage = 'Insufficient funds'; internalErrorCode = ERR_INSUFFICIENT_GAS; } else if (USER_REJECTED_REGEX.test(e?.message)) { uiErrorMessage = 'Transfer rejected in wallet, please try again'; diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx index 8bd3f3cfa..a5b3ca3af 100644 --- a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx @@ -124,7 +124,7 @@ const AmountInput = (props: Props) => { ); const tokenBalance = useMemo( - () => balances?.[sourceToken]?.balance || '', + () => balances?.[sourceToken]?.balance || '0', [balances, sourceToken], ); @@ -151,12 +151,15 @@ const AmountInput = (props: Props) => { {isFetching ? ( ) : ( + // TODO AMOUNT HACK... fix amount formatting in amount.Amount balance refactor - {tokenBalance} + {parseFloat(tokenBalance).toLocaleString('en', { + maximumFractionDigits: 6, + })} )} diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx index 4de9c2f01..7eb2f42c5 100644 --- a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx @@ -100,8 +100,13 @@ function TokenItem(props: TokenItemProps) { {props.isFetchingBalance ? ( + ) : props.balance ? ( + // TODO AMOUNT HACK... fix amount formatting in amount.Amount balance refactor + parseFloat(props.balance).toLocaleString('en', { + maximumFractionDigits: 6, + }) ) : ( - props.balance + '' )} diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx index 4efd30b96..6473b5312 100644 --- a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx +++ b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx @@ -25,7 +25,7 @@ import { import type { RouteData } from 'config/routes'; import type { RootState } from 'store'; -import { formatBalance } from 'store/transferInput'; +import { formatAmount } from 'utils/amount'; import { toFixedDecimals } from 'utils/balance'; import { TokenConfig } from 'config/types'; import FastestRoute from 'icons/FastestRoute'; @@ -356,10 +356,11 @@ const SingleRoute = (props: Props) => { const receiveAmountTrunc = useMemo(() => { return quote && destChain && destTokenConfig - ? formatBalance( + ? formatAmount( destChain, destTokenConfig, quote.destinationToken.amount.amount, + 6, ) : undefined; }, [quote]);