From fabc21d909f35dae9a510106fe06889f4bd50c83 Mon Sep 17 00:00:00 2001
From: Mark Shenouda <mark.s.shenouda@gmail.com>
Date: Wed, 20 May 2026 22:01:55 +0300
Subject: [PATCH] feat: make full table rows clickable to open drawer in CCIP
 directory

---
 src/components/AddressReact.tsx               | 12 +++-
 src/components/CCIP/Tables/ChainTable.tsx     | 70 +++++++++++--------
 src/components/CCIP/Tables/Table.css          |  4 ++
 .../CCIP/Tables/TokenChainsTable.tsx          | 42 ++++++-----
 4 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/src/components/AddressReact.tsx b/src/components/AddressReact.tsx
index 46d3e69bace..c54e3d2e300 100644
--- a/src/components/AddressReact.tsx
+++ b/src/components/AddressReact.tsx
@@ -16,14 +16,22 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
 
   if (!address) return null
 
-  const handleClick = (e) => {
+  const handleClick = (e: React.MouseEvent) => {
     e.preventDefault()
+    e.stopPropagation()
     if (address) navigator.clipboard.writeText(address)
   }
 
   return (
     <span className={`addressContainer ${urlClass || ""}`} id={urlId}>
-      <a title={address} className="addressLink" href={contractUrl} target="_blank" rel="noopener noreferrer">
+      <a
+        title={address}
+        className="addressLink"
+        href={contractUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
+      >
         {endLength && address ? address.slice(0, endLength + 2) + "..." + address.slice(-endLength) : address}
       </a>
       <button
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index 7ab6c7c559e..03b0c479caf 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -117,40 +117,48 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
               ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase()))
               .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE)
               .map((network, index) => (
-                <tr key={index}>
-                  <td>
-                    <button
-                      type="button"
-                      className="ccip-table__network-name"
-                      onClick={() => {
-                        const laneData = getLane({
-                          sourceChain: sourceNetwork.key as SupportedChain,
-                          destinationChain: network.key as SupportedChain,
-                          environment,
-                          version: Version.V1_2_0,
-                        })
+                <tr
+                  key={index}
+                  className="ccip-table__row--clickable"
+                  onClick={() => {
+                    const laneData = getLane({
+                      sourceChain: sourceNetwork.key as SupportedChain,
+                      destinationChain: network.key as SupportedChain,
+                      environment,
+                      version: Version.V1_2_0,
+                    })
 
-                        drawerWidthStore.set(DrawerWidth.Wide)
-                        drawerContentStore.set(() => (
-                          <LaneDrawer
-                            environment={environment}
-                            lane={laneData}
-                            sourceNetwork={sourceNetwork}
-                            destinationNetwork={{
-                              name: network?.name || "",
-                              logo: network?.logo || "",
-                              key: network.key,
-                            }}
-                            inOutbound={inOutbound}
-                            explorer={explorer}
-                          />
-                        ))
-                      }}
-                      aria-label={`View lane details for ${network.name}`}
-                    >
+                    drawerWidthStore.set(DrawerWidth.Wide)
+                    drawerContentStore.set(() => (
+                      <LaneDrawer
+                        environment={environment}
+                        lane={laneData}
+                        sourceNetwork={sourceNetwork}
+                        destinationNetwork={{
+                          name: network?.name || "",
+                          logo: network?.logo || "",
+                          key: network.key,
+                        }}
+                        inOutbound={inOutbound}
+                        explorer={explorer}
+                      />
+                    ))
+                  }}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`View lane details for ${network.name}`}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      e.currentTarget.click()
+                    }
+                  }}
+                >
+                  <td>
+                    <span className="ccip-table__network-name">
                       <img src={network.logo} alt={`${network.name} blockchain logo`} className="ccip-table__logo" />
                       {network.name}
-                    </button>
+                    </span>
                   </td>
                   <td
                     style={{ textAlign: "right" }}
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index ae024a3887c..67c8a2053f7 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -105,6 +105,10 @@
   background-color: var(--gray-50);
 }
 
+.ccip-table__row--clickable {
+  cursor: pointer;
+}
+
 .ccip-table thead th {
   /* Body/Body Semi S */
   font-family: "Inter";
diff --git a/src/components/CCIP/Tables/TokenChainsTable.tsx b/src/components/CCIP/Tables/TokenChainsTable.tsx
index 0f168e8504c..89801d2d741 100644
--- a/src/components/CCIP/Tables/TokenChainsTable.tsx
+++ b/src/components/CCIP/Tables/TokenChainsTable.tsx
@@ -89,23 +89,33 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
                 const allLanesPaused = areAllLanesPaused(network.tokenDecimals, lanes[network.key] || {})
 
                 return (
-                  <tr key={index} className={allLanesPaused ? "ccip-table__row--paused" : ""}>
+                  <tr
+                    key={index}
+                    className={`ccip-table__row--clickable ${allLanesPaused ? "ccip-table__row--paused" : ""}`}
+                    onClick={() => {
+                      drawerWidthStore.set(DrawerWidth.Wide)
+                      drawerContentStore.set(() => (
+                        <TokenDrawer
+                          token={token}
+                          network={network}
+                          environment={environment}
+                          poolTypesByChain={poolTypesByChain}
+                        />
+                      ))
+                    }}
+                    role="button"
+                    tabIndex={0}
+                    aria-label={`View ${network.name} token details`}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        e.currentTarget.click()
+                      }
+                    }}
+                  >
                     <td>
-                      <button
-                        type="button"
+                      <span
                         className={`ccip-table__network-name ${allLanesPaused ? "ccip-table__network-name--paused" : ""}`}
-                        onClick={() => {
-                          drawerWidthStore.set(DrawerWidth.Wide)
-                          drawerContentStore.set(() => (
-                            <TokenDrawer
-                              token={token}
-                              network={network}
-                              environment={environment}
-                              poolTypesByChain={poolTypesByChain}
-                            />
-                          ))
-                        }}
-                        aria-label={`View ${network.name} token details`}
                       >
                         <span className="ccip-table__logoContainer">
                           <img
@@ -136,7 +146,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
                             ⏸️
                           </span>
                         )}
-                      </button>
+                      </span>
                     </td>
                     <td>{network.tokenName}</td>
                     <td>{network.tokenSymbol}</td>