Wrap message table cells in anchor links

src/components/icons/ChainIcon.tsx

@@ -88,7 +88,7 @@ interface Props {
   background?: boolean;
 }
 
-function _ChainIcon({ chainId, size = 36, color = true, background = false }: Props) {
+function _ChainIcon({ chainId, size = 32, color = true, background = false }: Props) {
   const iconSet = color ? CHAIN_TO_COLOR_ICON : CHAIN_TO_MONOCHROME_ICON;
   const imageSrc = (chainId && iconSet[chainId]) || QuestionMark;
 

src/components/icons/ChainToChain.tsx

@@ -9,7 +9,7 @@ import { ChainIcon } from './ChainIcon';
 function _ChainToChain({
   originChainId,
   destinationChainId,
-  size = 36,
+  size = 32,
   arrowSize = 32,
   isNarrow = false,
 }: {

src/features/messages/MessageTable.tsx

@@ -1,4 +1,6 @@
+import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { PropsWithChildren } from 'react';
 
 import { ChainIcon } from '../../components/icons/ChainIcon';
 import { MessageStatus, MessageStub } from '../../types';
@@ -35,7 +37,7 @@ export function MessageTable({
             className={`cursor-pointer hover:bg-gray-100 active:bg-gray-200 border-b border-gray-100 last:border-0 ${
               isFetching && 'blur-xs'
             } transition-all duration-500`}
-            onClick={() => router.push(`/message/${m.id}`)}
+            // onClick={() => router.push(`/message/${m.id}`)}
           >
             <MessageSummaryRow message={m} />
           </tr>
@@ -47,6 +49,7 @@ export function MessageTable({
 
 export function MessageSummaryRow({ message }: { message: MessageStub }) {
   const {
+    id,
     status,
     sender,
     recipient,
@@ -68,50 +71,59 @@ export function MessageSummaryRow({ message }: { message: MessageStub }) {
 
   return (
     <>
-      <td className="py-3.5">
-        <div className="flex items-center pl-3 sm:pl-5">
-          <ChainIcon chainId={originChainId} size={22} />
-          <div className={styles.valueChainName}>{getChainDisplayName(originChainId, true)}</div>
-        </div>
-      </td>
-      <td>
-        <div className="flex items-center">
-          <ChainIcon chainId={destinationChainId} size={22} />
-          <div className={styles.valueChainName}>
-            {getChainDisplayName(destinationChainId, true)}
-          </div>
-        </div>
-      </td>
-      <td className="hidden sm:table-cell">
-        <div className={styles.value}>{shortenAddress(sender) || 'Invalid Address'}</div>
-      </td>
-      <td className="hidden sm:table-cell">
-        <div className={styles.value}>{shortenAddress(recipient) || 'Invalid Address'}</div>
-      </td>
-      <td>
-        <div className={styles.valueTruncated}>{getHumanReadableTimeString(originTimestamp)}</div>
-      </td>
-      <td className="hidden lg:table-cell text-center px-4">
-        <div className={styles.valueTruncated}>
+      <LinkCell id={id} aClasses="flex items-center py-3.5 pl-3 sm:pl-5">
+        <ChainIcon chainId={originChainId} size={20} />
+        <div className={styles.chainName}>{getChainDisplayName(originChainId, true)}</div>
+      </LinkCell>
+      <LinkCell id={id} aClasses="flex items-center py-3.5 ">
+        <ChainIcon chainId={destinationChainId} size={20} />
+        <div className={styles.chainName}>{getChainDisplayName(destinationChainId, true)}</div>
+      </LinkCell>
+      <LinkCell id={id} tdClasses="hidden sm:table-cell" aClasses={styles.value}>
+        {shortenAddress(sender) || 'Invalid Address'}
+      </LinkCell>
+      <LinkCell id={id} tdClasses="hidden sm:table-cell" aClasses={styles.value}>
+        {shortenAddress(recipient) || 'Invalid Address'}
+      </LinkCell>
+      <LinkCell id={id} aClasses={styles.valueTruncated}>
+        {getHumanReadableTimeString(originTimestamp)}
+      </LinkCell>
+      <LinkCell
+        id={id}
+        tdClasses="hidden lg:table-cell text-center px-4"
+        aClasses={styles.valueTruncated}
+      >
         {destinationTimestamp
           ? getHumanReadableDuration(destinationTimestamp - originTimestamp, 3)
           : '-'}
-        </div>
-      </td>
-      <td>
-        <div className="flex items-center justify-center">
+      </LinkCell>
+      <LinkCell id={id} aClasses="flex items-center justify-center">
         <div className={`text-center w-20 md:w-[5.25rem] py-1.5 text-sm rounded ${statusColor}`}>
           {statusText}
         </div>
-        </div>
-      </td>
+      </LinkCell>
     </>
   );
 }
 
+function LinkCell({
+  id,
+  tdClasses,
+  aClasses,
+  children,
+}: PropsWithChildren<{ id: number; tdClasses?: string; aClasses?: string }>) {
+  return (
+    <td className={tdClasses}>
+      <Link href={`/message/${id}`}>
+        <a className={aClasses}>{children}</a>
+      </Link>
+    </td>
+  );
+}
+
 const styles = {
   header: 'text-sm text-gray-700 font-normal pt-2 pb-3 text-center',
-  value: 'text-sm text-center px-1',
-  valueChainName: 'text-sm ml-2',
-  valueTruncated: 'text-sm text-center truncate',
+  value: 'py-3.5 flex items-center justify-center text-sm text-center px-1',
+  valueTruncated: 'py-3.5 flex items-center justify-center text-sm text-center truncate',
+  chainName: 'text-sm ml-2',
 };

src/images/logos/chains-color/ethereum.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" viewBox="-110 0 999.4 1277.4"><g fill-rule="nonzero"><path fill="#343434" d="m392.1 0-8.6 29.1v844.6l8.6 8.6 392-231.8z"/><path fill="#8C8C8C" d="M392.1 0 0 650.5l392.1 231.8v-410z"/><path fill="#3C3C3B" d="m392.1 956.5-4.9 5.9v300.9l4.9 14.1 392.3-552.5z"/><path fill="#8C8C8C" d="M392.1 1277.4V956.5L0 724.9z"/><path fill="#141414" d="m392.1 882.3 392-231.8-392-178.2z"/><path fill="#393939" d="m0 650.5 392.1 231.8v-410z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" viewBox="-150 0 1100 1277.4"><g fill-rule="nonzero"><path fill="#343434" d="m392.1 0-8.6 29.1v844.6l8.6 8.6 392-231.8z"/><path fill="#8C8C8C" d="M392.1 0 0 650.5l392.1 231.8v-410z"/><path fill="#3C3C3B" d="m392.1 956.5-4.9 5.9v300.9l4.9 14.1 392.3-552.5z"/><path fill="#8C8C8C" d="M392.1 1277.4V956.5L0 724.9z"/><path fill="#141414" d="m392.1 882.3 392-231.8-392-178.2z"/><path fill="#393939" d="m0 650.5 392.1 231.8v-410z"/></g></svg>