fix: add time elapsed in transaction list (Home

src/components/timer/TimeElapsed.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+import { getHumanReadableTimeString } from '../../utils/time';
+
+type TimeElapsedProps = {
+  timestamp: number;
+};
+
+const TimeElapsed = ({ timestamp }: TimeElapsedProps) => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setCount((count) => count + 1), 1000);
+    return () => clearInterval(interval);
+  }, [timestamp]);
+
+  return <span key={count}>{getHumanReadableTimeString(timestamp)}</span>;
+};
+
+export default TimeElapsed;

src/features/messages/MessageTable.tsx

@@ -1,15 +1,20 @@
 import Link from 'next/link';
 import { PropsWithChildren } from 'react';
 
+
+
 import { MultiProvider } from '@hyperlane-xyz/sdk';
 import { shortenAddress } from '@hyperlane-xyz/utils';
 
 import { ChainLogo } from '../../components/icons/ChainLogo';
+import TimeElapsed from '../../components/timer/TimeElapsed';
 import { MessageStatus, MessageStub } from '../../types';
-import { getHumanReadableDuration, getHumanReadableTimeString } from '../../utils/time';
+import { getHumanReadableDuration } from '../../utils/time';
 import { getChainDisplayName } from '../chains/utils';
 import { useMultiProvider } from '../providers/multiProvider';
 
+
+
 import { serializeMessage } from './utils';
 
 export function MessageTable({
@@ -94,7 +99,7 @@ export function MessageSummaryRow({ message, mp }: { message: MessageStub; mp: M
         {shortenAddress(recipient) || 'Invalid Address'}
       </LinkCell>
       <LinkCell id={msgId} base64={base64} aClasses={styles.valueTruncated}>
-        {getHumanReadableTimeString(origin.timestamp)}
+        <TimeElapsed timestamp={origin.timestamp} />
       </LinkCell>
       <LinkCell
         id={msgId}
@@ -140,4 +145,4 @@ const styles = {
   value: 'py-3.5 flex items-center justify-center text-sm text-center font-light px-1',
   valueTruncated: 'py-3.5 flex items-center justify-center text-sm text-center font-light truncate',
   chainName: 'text-sm font-light ml-2',
-};
+};