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 (