Don't round balances (#2852)

* use amount.display to avoid rounding... * don't expose raw error!!! * rewrite amount formatting util * hack to truncate balances in UI
wormhole-foundation · Oct 17, 2024 · a40a8d0 · a40a8d0
1 parent 5071501
commit a40a8d0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
           <CircularProgress size={14} />
         ) : (
+          // TODO AMOUNT HACK... fix amount formatting in amount.Amount balance refactor
           <Typography
             fontSize={14}
             textAlign="right"
             className={classes.balance}
           >
-            {tokenBalance}
+            {parseFloat(tokenBalance).toLocaleString('en', {
+              maximumFractionDigits: 6,
+            })}
           </Typography>
         )}
       </Stack>

diff --git 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) {
       <Typography fontSize={14}>
         {props.isFetchingBalance ? (
           <CircularProgress size={24} />
+        ) : props.balance ? (
+          // TODO AMOUNT HACK... fix amount formatting in amount.Amount balance refactor
+          parseFloat(props.balance).toLocaleString('en', {
+            maximumFractionDigits: 6,
+          })
         ) : (
-          props.balance
+          ''
         )}
       </Typography>
     </ListItemButton>

diff --git 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]);