diff --git a/wormhole-connect/src/store/transferInput.ts b/wormhole-connect/src/store/transferInput.ts index 75a8faf04..eac908135 100644 --- a/wormhole-connect/src/store/transferInput.ts +++ b/wormhole-connect/src/store/transferInput.ts @@ -3,7 +3,6 @@ import { Context } from 'sdklegacy'; import config from 'config'; import { TokenConfig } from 'config/types'; import { getTokenDecimals } from 'utils'; -import { toDecimals } from 'utils/balance'; import { switchChain, TransferWallet, @@ -18,7 +17,7 @@ import { receiveDataWrapper, } from './helpers'; import { isPorticoRoute } from 'routes/porticoBridge/utils'; -import { Chain } from '@wormhole-foundation/sdk'; +import { amount, Chain } from '@wormhole-foundation/sdk'; export type Balance = { lastUpdated: number; @@ -35,12 +34,19 @@ export type WalletBalances = { [key: WalletAddress]: BalancesCache }; export const formatBalance = ( chain: Chain, token: TokenConfig, - balance: bigint | null, -) => { + balance: string | bigint | null, +): string | null => { + if (!balance) { + return null; + } const decimals = getTokenDecimals(chain, token.tokenId); - const formattedBalance = - balance !== null ? toDecimals(balance, decimals, 6) : null; - return formattedBalance; + const balanceNum = amount.whole({ + amount: balance.toString(), + decimals, + }); + return balanceNum.toLocaleString('en', { + maximumFractionDigits: 4, + }); }; // for use in USDC or other tokens that have versions on many chains diff --git a/wormhole-connect/src/utils/index.ts b/wormhole-connect/src/utils/index.ts index 21c17b2eb..a4dc5e88d 100644 --- a/wormhole-connect/src/utils/index.ts +++ b/wormhole-connect/src/utils/index.ts @@ -380,3 +380,13 @@ export const isFrankensteinToken = (token: TokenConfig, chain: Chain) => { export const isWrappedToken = (token: TokenConfig, chain: Chain) => { return token.nativeChain !== chain; }; + +export const millisToHumanString = (ts: number): string => { + if (ts > 60000) { + const minutes = Math.ceil(ts / 60000); + return `~${minutes} min`; + } else { + const seconds = Math.ceil(ts / 1000); + return `~${seconds} sec`; + } +}; diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx index 7199056f5..7b5863fb8 100644 --- a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx +++ b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx @@ -14,11 +14,11 @@ import { amount, routes } from '@wormhole-foundation/sdk'; import config from 'config'; import TokenIcon from 'icons/TokenIcons'; -import { isEmptyObject, calculateUSDPrice } from 'utils'; -import { millisToMinutesAndSeconds } from 'utils/transferValidation'; +import { isEmptyObject, calculateUSDPrice, millisToHumanString } from 'utils'; import type { RouteData } from 'config/routes'; import type { RootState } from 'store'; +import { formatBalance } from 'store/transferInput'; const useStyles = makeStyles()((theme: any) => ({ container: { @@ -144,7 +144,7 @@ const SingleRoute = (props: Props) => { ) : ( - {millisToMinutesAndSeconds(quote?.eta ?? 0)} + {quote?.eta ? millisToHumanString(quote.eta) : 'N/A'} )} @@ -263,15 +263,25 @@ const SingleRoute = (props: Props) => { return quote ? amount.whole(quote?.destinationToken.amount) : undefined; }, [quote]); + const receiveAmountTrunc = useMemo(() => { + return quote && destChain + ? formatBalance( + destChain, + destTokenConfig, + quote.destinationToken.amount.amount, + ) + : undefined; + }, [quote]); + const routeCardHeader = useMemo(() => { return typeof receiveAmount === 'undefined' ? ( ) : ( - {receiveAmount} {destTokenConfig.symbol} + {receiveAmountTrunc} {destTokenConfig.symbol} ); - }, [destToken, receiveAmount]); + }, [destToken, receiveAmountTrunc]); const routeCardSubHeader = useMemo(() => { if (typeof receiveAmount === 'undefined') { diff --git a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx index 0c9a9afc9..eb9e7775f 100644 --- a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx +++ b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx @@ -14,8 +14,12 @@ import { makeStyles } from 'tss-react/mui'; import config from 'config'; import { RouteContext } from 'contexts/RouteContext'; import TokenIcon from 'icons/TokenIcons'; -import { calculateUSDPrice, trimAddress, trimTxHash } from 'utils'; -import { millisToMinutesAndSeconds } from 'utils/transferValidation'; +import { + calculateUSDPrice, + millisToHumanString, + trimAddress, + trimTxHash, +} from 'utils'; import { getExplorerLink } from 'utils/sdkv2'; import type { RootState } from 'store'; @@ -253,7 +257,7 @@ const TransactionDetails = () => { let etaDisplay: string | ReactNode = ; if (eta) { - etaDisplay = millisToMinutesAndSeconds(eta); + etaDisplay = millisToHumanString(eta); } return ( diff --git a/wormhole-connect/src/views/v2/Redeem/index.tsx b/wormhole-connect/src/views/v2/Redeem/index.tsx index fe6a64e5b..d310dd3de 100644 --- a/wormhole-connect/src/views/v2/Redeem/index.tsx +++ b/wormhole-connect/src/views/v2/Redeem/index.tsx @@ -22,13 +22,10 @@ import PoweredByIcon from 'icons/PoweredBy'; import { SDKv2Signer } from 'routes/sdkv2/signer'; import { setRedeemTx, setTransferComplete } from 'store/redeem'; import { setRoute } from 'store/router'; -import { displayAddress } from 'utils'; +import { displayAddress, millisToHumanString } from 'utils'; import { interpretTransferError } from 'utils/errors'; import { joinClass } from 'utils/style'; -import { - millisToMinutesAndSeconds, - minutesAndSecondsWithPadding, -} from 'utils/transferValidation'; +import { minutesAndSecondsWithPadding } from 'utils/transferValidation'; import { TransferWallet, registerWalletSigner, @@ -216,7 +213,7 @@ const Redeem = () => { let etaElement: string | ReactNode = ; if (eta) { - etaElement = millisToMinutesAndSeconds(eta); + etaElement = millisToHumanString(eta); } return (