From f5cd2c140a561844da6b67d60da46bff7f692e2c Mon Sep 17 00:00:00 2001 From: Emre Bogazliyanlioglu Date: Thu, 19 Sep 2024 22:52:00 +0300 Subject: [PATCH] [Redesign] Styling fixes Tx History Signed-off-by: Emre Bogazliyanlioglu --- wormhole-connect/src/utils/index.ts | 24 ++++++++++++++++++ .../src/views/v2/Bridge/index.tsx | 2 +- .../v2/Redeem/TransactionDetails/index.tsx | 2 +- .../src/views/v2/TxHistory/Item/index.tsx | 25 ++++++++++++------- .../src/views/v2/TxHistory/index.tsx | 2 +- wormhole-connect/vite.config.ts | 7 +++++- 6 files changed, 49 insertions(+), 13 deletions(-) diff --git a/wormhole-connect/src/utils/index.ts b/wormhole-connect/src/utils/index.ts index f949a4b42..1a53ef24a 100644 --- a/wormhole-connect/src/utils/index.ts +++ b/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'; + } +}; diff --git a/wormhole-connect/src/views/v2/Bridge/index.tsx b/wormhole-connect/src/views/v2/Bridge/index.tsx index 1600ad011..6bd897105 100644 --- a/wormhole-connect/src/views/v2/Bridge/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/index.tsx @@ -350,7 +350,7 @@ const Bridge = () => { const isTxHistoryDisabled = !sendingWallet?.address; return (
-
+
diff --git a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx index 950314b6e..f6bd24ff4 100644 --- a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx +++ b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx @@ -295,7 +295,7 @@ const TransactionDetails = () => { {`Transaction # ${trimTxHash(sendTx)}`} + >{`Transaction #${trimTxHash(sendTx)}`} {sentAmount} {verticalConnector} {receivedAmount} diff --git a/wormhole-connect/src/views/v2/TxHistory/Item/index.tsx b/wormhole-connect/src/views/v2/TxHistory/Item/index.tsx index a92080c9b..9dc25ab4f 100644 --- a/wormhole-connect/src/views/v2/TxHistory/Item/index.tsx +++ b/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 ( { {`${getUSDFormat(amountUsd, true)} \u2022 ${ sourceChainConfig?.displayName - } ${senderAddress}`} + }`} @@ -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} - {`${receiveAmountDisplay}${destChainConfig?.displayName} ${recipientAddress}`} + {`${receiveAmountDisplay}${destChainConfig?.displayName}`} @@ -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" > - {`Transaction # ${trimTxHash(txHash)}`} + {`Transaction #${trimTxHash(txHash)}`} {transactionDateTime} } diff --git a/wormhole-connect/src/views/v2/TxHistory/index.tsx b/wormhole-connect/src/views/v2/TxHistory/index.tsx index dee7ba415..c4f17b1a4 100644 --- a/wormhole-connect/src/views/v2/TxHistory/index.tsx +++ b/wormhole-connect/src/views/v2/TxHistory/index.tsx @@ -104,7 +104,7 @@ const TxHistory = () => { const txHistoryHeader = useMemo(() => { return (
-
+
dispatch(setAppRoute('bridge'))}> diff --git a/wormhole-connect/vite.config.ts b/wormhole-connect/vite.config.ts index e65c1eede..d32f856dd 100644 --- a/wormhole-connect/vite.config.ts +++ b/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 {