Bridge V2 view minor UI improvements (wormhole-foundation#2539)

* fix(redesing): show ETAs rounded * fix(redesing): show 4 decimals for token account instead of 6
wormholelabs-xyz · Sep 6, 2024 · ea21887 · ea21887
1 parent 53af315
commit ea21887
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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) => {
           <CircularProgress size={14} />
         ) : (
           <Typography fontSize={14}>
-            {millisToMinutesAndSeconds(quote?.eta ?? 0)}
+            {quote?.eta ? millisToHumanString(quote.eta) : 'N/A'}
           </Typography>
         )}
       </>
@@ -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' ? (
       <CircularProgress size={18} />
     ) : (
       <Typography>
-        {receiveAmount} {destTokenConfig.symbol}
+        {receiveAmountTrunc} {destTokenConfig.symbol}
       </Typography>
     );
-  }, [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
@@ -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 = <CircularProgress size={14} />;
 
     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
@@ -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 = <CircularProgress size={14} />;
 
     if (eta) {
-      etaElement = millisToMinutesAndSeconds(eta);
+      etaElement = millisToHumanString(eta);
     }
 
     return (