feat: Add information to msg transaction cards (#104)

- Display duration in dest tx card per request from @Skunkchain 
- Display mailbox address in both tx cards
- Hide API docs page link which was disabled in #77 
- Fix missing type annotation

src/components/nav/Header.tsx

@@ -62,9 +62,9 @@ export function Header({ pathName }: { pathName: string }) {
           <a className={navLinkClass()} target="_blank" href={links.home} rel="noopener noreferrer">
             About
           </a>
-          <Link href="/api-docs" className={navLinkClass('/api-docs')}>
+          {/* <Link href="/api-docs" className={navLinkClass('/api-docs')}>
             API
-          </Link>
+          </Link> */}
           <a
             className={navLinkClass()}
             target="_blank"
@@ -95,11 +95,11 @@ export function Header({ pathName }: { pathName: string }) {
                   Settings
                 </MobileNavLink>
               ),
-              (c: Fn) => (
+              // (c: Fn) => (
-                <MobileNavLink href="/api" closeDropdown={c} key="API">
+              //   <MobileNavLink href="/api" closeDropdown={c} key="API">
-                  API
+              //     API
-                </MobileNavLink>
+              //   </MobileNavLink>
-              ),
+              // ),
               (c: Fn) => (
                 <MobileNavLink href={docLinks.home} closeDropdown={c} key="Docs">
                   Docs

src/features/messages/MessageDetails.tsx

@@ -10,6 +10,7 @@ import CheckmarkIcon from '../../images/icons/checkmark-circle.svg';
 import { useMultiProvider, useStore } from '../../store';
 import { Message, MessageStatus } from '../../types';
 import { logger } from '../../utils/logger';
+import { getHumanReadableDuration } from '../../utils/time';
 import { getChainDisplayName, isEvmChain } from '../chains/utils';
 import { useMessageDeliveryStatus } from '../deliveryStatus/useMessageDeliveryStatus';
 
@@ -84,6 +85,10 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
     isPiMsg,
   } = message;
 
+  const duration = destination?.timestamp
+    ? getHumanReadableDuration(destination.timestamp - origin.timestamp, 3)
+    : undefined;
+
   const showTimeline =
     !isPiMsg &&
     isEvmChain(multiProvider, originChainId) &&
@@ -120,6 +125,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
           domainId={destinationDomainId}
           status={status}
           transaction={destination}
+          duration={duration}
           debugResult={debugResult}
           isStatusFetching={isDeliveryStatusFetching}
           isPiMsg={isPiMsg}

src/features/messages/cards/TransactionCard.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { PropsWithChildren, ReactNode, useState } from 'react';
 
 import { MultiProvider } from '@hyperlane-xyz/sdk';
+import { isAddress, isZeroish } from '@hyperlane-xyz/utils';
 
 import { Spinner } from '../../../components/animations/Spinner';
 import { ChainLogo } from '../../../components/icons/ChainLogo';
@@ -48,6 +49,7 @@ export function DestinationTransactionCard({
   domainId,
   status,
   transaction,
+  duration,
   debugResult,
   isStatusFetching,
   isPiMsg,
@@ -57,6 +59,7 @@ export function DestinationTransactionCard({
   domainId: DomainId;
   status: MessageStatus;
   transaction?: MessageTx;
+  duration?: string;
   debugResult?: MessageDebugResult;
   isStatusFetching: boolean;
   isPiMsg?: boolean;
@@ -74,6 +77,7 @@ export function DestinationTransactionCard({
         transaction={transaction}
         chainId={chainId}
         domainId={domainId}
+        duration={duration}
         blur={blur}
       />
     );
@@ -190,16 +194,18 @@ function TransactionDetails({
   chainId,
   domainId,
   transaction,
+  duration,
   blur,
 }: {
   chainId: ChainId;
   domainId: DomainId;
   transaction: MessageTx;
+  duration?: string;
   blur: boolean;
 }) {
   const multiProvider = useMultiProvider();
 
-  const { hash, from, timestamp, blockNumber } = transaction;
+  const { hash, from, timestamp, blockNumber, mailbox } = transaction;
 
   const txExplorerLink =
     hash && !new BigNumber(hash).isZero()
@@ -230,6 +236,16 @@ function TransactionDetails({
         showCopy={true}
         blurValue={blur}
       />
+      {mailbox && isAddress(mailbox) && !isZeroish(mailbox) && (
+        <KeyValueRow
+          label="Mailbox:"
+          labelWidth="w-16"
+          display={mailbox}
+          displayWidth="w-60 sm:w-64"
+          showCopy={true}
+          blurValue={blur}
+        />
+      )}
       {!!timestamp && (
         <KeyValueRow
           label="Time:"
@@ -247,6 +263,15 @@ function TransactionDetails({
         displayWidth="w-60 sm:w-64"
         blurValue={blur}
       />
+      {duration && (
+        <KeyValueRow
+          label="Duration:"
+          labelWidth="w-16"
+          display={duration}
+          displayWidth="w-60 sm:w-64"
+          blurValue={blur}
+        />
+      )}
       {txExplorerLink && (
         <a
           className={`block ${styles.textLink}`}

src/types.ts

@@ -22,7 +22,7 @@ export interface MessageTx extends MessageTxStub {
   nonce: number;
   gasLimit: number;
   gasPrice: number;
-  effectiveGasPrice;
+  effectiveGasPrice: number;
   gasUsed: number;
   cumulativeGasUsed: number;
   maxFeePerGas: number;

src/utils/time.ts

@@ -37,14 +37,14 @@ export function getHumanReadableDuration(ms: number, minSec?: number) {
   }
 
   if (seconds <= 60) {
-    return `${seconds} sec`;
+    return `${seconds} seconds`;
   }
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) {
-    return `${minutes} min`;
+    return `${minutes} minutes`;
   }
   const hours = Math.floor(minutes / 60);
-  return `${hours} hr`;
+  return `${hours} hours`;
 }
 
 export function getDateTimeString(timestamp: number) {