[Redesign] Styling fixes Tx History

wormhole-connect/src/utils/index.ts

@@ -417,3 +417,27 @@ export const millisToHumanString = (ts: number): string => {
     return `~${seconds} sec`;
   }
 };
+
+// Generates relative time string for days, hours and minutes
+export const millisToRelativeTime = (ts: number): string => {
+  const minsMultiplier = 1000 * 60;
+  const hoursMultiplier = minsMultiplier * 60;
+  const daysMultiplier = hoursMultiplier * 24;
+
+  if (ts > daysMultiplier) {
+    // It's been more than a day, show "# days ago"
+    const days = Math.floor(ts / daysMultiplier);
+    return `~${days} ${days === 1 ? 'day' : 'days'} ago`;
+  } else if (ts > hoursMultiplier) {
+    // It's been more than an hour, show "# hours ago"
+    const hours = Math.floor(ts / hoursMultiplier);
+    return `~${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+  } else if (ts > minsMultiplier) {
+    // It's been more than a minute ago, show "# minutes ago"
+    const minutes = Math.floor(ts / minsMultiplier);
+    return `~${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
+  } else {
+    // It's been less than a minute ago, but we approx up to one minute
+    return '~1 minute ago';
+  }
+};

wormhole-connect/src/views/v2/Bridge/index.tsx

@@ -350,7 +350,7 @@ const Bridge = () => {
     const isTxHistoryDisabled = !sendingWallet?.address;
     return (
       <div className={classes.bridgeHeader}>
-        <Header align="left" text={config.ui.title} size={20} />
+        <Header align="left" text={config.ui.title} size={18} />
         <Tooltip
           title={isTxHistoryDisabled ? 'No connected wallets found' : ''}
         >

wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx

@@ -295,7 +295,7 @@ const TransactionDetails = () => {
           <Typography
             color={theme.palette.text.secondary}
             marginBottom="12px"
-          >{`Transaction # ${trimTxHash(sendTx)}`}</Typography>
+          >{`Transaction #${trimTxHash(sendTx)}`}</Typography>
           {sentAmount}
           {verticalConnector}
           {receivedAmount}

wormhole-connect/src/views/v2/TxHistory/Item/index.tsx

@@ -14,7 +14,7 @@ import TokenIcon from 'icons/TokenIcons';
 import {
   calculateUSDPrice,
   getUSDFormat,
-  trimAddress,
+  millisToRelativeTime,
   trimTxHash,
 } from 'utils';
 
@@ -63,8 +63,6 @@ const TxHistoryItem = (props: Props) => {
     const sourceTokenConfig = config.tokens[tokenKey];
     const sourceChainConfig = config.chains[fromChain]!;
 
-    const senderAddress = sender ? trimAddress(sender) : '';
-
     return (
       <Stack alignItems="center" direction="row" justifyContent="flex-start">
         <Badge
@@ -88,7 +86,7 @@ const TxHistoryItem = (props: Props) => {
           <Typography color={theme.palette.text.secondary} fontSize={14}>
             {`${getUSDFormat(amountUsd, true)} \u2022 ${
               sourceChainConfig?.displayName
-            } ${senderAddress}`}
+            }`}
           </Typography>
         </Stack>
       </Stack>
@@ -102,8 +100,6 @@ const TxHistoryItem = (props: Props) => {
       ? config.tokens[receivedTokenKey]
       : undefined;
 
-    const recipientAddress = recipient ? trimAddress(recipient) : '';
-
     const receiveAmountPrice = calculateUSDPrice(
       receiveAmount,
       props.tokenPrices,
@@ -134,7 +130,7 @@ const TxHistoryItem = (props: Props) => {
             {receiveAmount} {destTokenConfig?.symbol}
           </Typography>
           <Typography color={theme.palette.text.secondary} fontSize={14}>
-            {`${receiveAmountDisplay}${destChainConfig?.displayName} ${recipientAddress}`}
+            {`${receiveAmountDisplay}${destChainConfig?.displayName}`}
           </Typography>
         </Stack>
       </Stack>
@@ -160,7 +156,18 @@ const TxHistoryItem = (props: Props) => {
 
     const senderDate = new Date(senderTimestamp);
 
-    return `${senderDate.toLocaleDateString()} ${senderDate.toLocaleTimeString()}`;
+    // If it's been less than a day, show relative time
+    const timePassed = Date.now() - senderDate.getTime();
+    if (timePassed < 1000 * 60 * 60 * 24) {
+      return millisToRelativeTime(timePassed);
+    }
+
+    const dateTimeFormat = new Intl.DateTimeFormat('en-US', {
+      dateStyle: 'short',
+      timeStyle: 'short',
+    });
+
+    return `${dateTimeFormat.format(senderDate)}`;
   }, [senderTimestamp]);
 
   return (
@@ -180,7 +187,7 @@ const TxHistoryItem = (props: Props) => {
                 color={theme.palette.text.secondary}
                 display="flex"
               >
-                <span>{`Transaction # ${trimTxHash(txHash)}`}</span>
+                <span>{`Transaction #${trimTxHash(txHash)}`}</span>
                 <span>{transactionDateTime}</span>
               </Typography>
             }

wormhole-connect/src/views/v2/TxHistory/index.tsx

@@ -104,7 +104,7 @@ const TxHistory = () => {
   const txHistoryHeader = useMemo(() => {
     return (
       <div className={classes.txHistoryHeader}>
-        <Header align="left" text="Transaction history" size={20} />
+        <Header align="left" size={18} text="Transaction history" />
         <IconButton onClick={() => dispatch(setAppRoute('bridge'))}>
           <SwapHorizIcon />
         </IconButton>

wormhole-connect/vite.config.ts

@@ -89,7 +89,12 @@ const plugins = [
 ];
 
 const optimizeDeps = {
-  include: ['@emotion/styled'],
+  include: [
+    '@emotion/react',
+    '@emotion/styled',
+    '@mui/material/Tooltip',
+    '@mui/material/Unstable_Grid2',
+  ],
 };
 
 interface AssetInfo {