feat: restructure CCIP pool API response to match upstream spec

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

src/components/CCIP/ChainHero/TokenDetailsHero.tsx

@@ -21,10 +21,23 @@ interface TokenDetailsHeroProps {
     poolRawType: string
     poolAddress: string
   }
+  poolDetails?: {
+    version: string
+    hook: string | null
+    finality: { finalityDepth: number; finalitySafe: boolean } | null
+    ccv: { thresholdAmount: string | null } | null
+  } | null
+  isLoadingPoolDetails?: boolean
   inDrawer?: boolean
 }
 
-function TokenDetailsHero({ network, token, inDrawer = false }: TokenDetailsHeroProps) {
+function TokenDetailsHero({
+  network,
+  token,
+  poolDetails,
+  isLoadingPoolDetails,
+  inDrawer = false,
+}: TokenDetailsHeroProps) {
   return (
     <section className={`ccip-chain-hero ${inDrawer ? "ccip-chain-hero--drawer" : ""}`}>
       <div className="ccip-chain-hero__content">
@@ -81,6 +94,49 @@ function TokenDetailsHero({ network, token, inDrawer = false }: TokenDetailsHero
               />
             </div>
           </div>
+          {poolDetails && (
+            <>
+              <div className="ccip-chain-hero__details__item">
+                <div className="ccip-chain-hero__details__label">Pool version</div>
+                <div className="ccip-chain-hero__details__value">{poolDetails.version || "—"}</div>
+              </div>
+              <div className="ccip-chain-hero__details__item">
+                <div className="ccip-chain-hero__details__label">Custom finality</div>
+                <div className="ccip-chain-hero__details__value">
+                  {poolDetails.finality ? (poolDetails.finality.finalitySafe ? "Yes" : "No") : "—"}
+                </div>
+              </div>
+              {poolDetails.finality?.finalitySafe && (
+                <div className="ccip-chain-hero__details__item">
+                  <div className="ccip-chain-hero__details__label">Finality depth</div>
+                  <div className="ccip-chain-hero__details__value">{poolDetails.finality.finalityDepth}</div>
+                </div>
+              )}
+              {poolDetails.ccv && poolDetails.ccv.thresholdAmount && poolDetails.ccv.thresholdAmount !== "0" && (
+                <div className="ccip-chain-hero__details__item">
+                  <div className="ccip-chain-hero__details__label">CCV threshold</div>
+                  <div className="ccip-chain-hero__details__value">{poolDetails.ccv.thresholdAmount}</div>
+                </div>
+              )}
+              {poolDetails.hook && (
+                <div className="ccip-chain-hero__details__item">
+                  <div className="ccip-chain-hero__details__label">Pool hook</div>
+                  <div className="ccip-chain-hero__details__value">
+                    <Address
+                      endLength={4}
+                      contractUrl={getExplorerAddressUrl(network?.explorer, network?.chainType)(poolDetails.hook)}
+                      address={poolDetails.hook}
+                    />
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+          {isLoadingPoolDetails && !poolDetails && (
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__value">Loading pool details...</div>
+            </div>
+          )}
         </div>
       </div>
     </section>

src/components/CCIP/Drawer/LaneDrawer.tsx

@@ -189,11 +189,29 @@ function LaneDrawer({
               </tr>
             </thead>
             <tbody>
-              {processedTokens.map((token, index) => (
-                <tr key={index} className={token.isPaused ? "ccip-table__row--paused" : ""}>
-                  <td>
-                    <a href={`/ccip/directory/${environment}/token/${token.id}`}>
-                      <div
+              {processedTokens.map((token, index) => {
+                const tokenHref = `/ccip/directory/${environment}/token/${token.id}`
+                const rowProps = token.isPaused
+                  ? { className: "ccip-table__row--paused" }
+                  : {
+                      className: "ccip-table__row--clickable",
+                      onClick: () => {
+                        window.location.assign(tokenHref)
+                      },
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-label": `View ${token.id} token details`,
+                      onKeyDown: (e: React.KeyboardEvent<HTMLTableRowElement>) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          e.currentTarget.click()
+                        }
+                      },
+                    }
+                return (
+                  <tr key={index} {...rowProps}>
+                    <td>
+                      <span
                         className={`ccip-table__network-name ${token.isPaused ? "ccip-table__network-name--paused" : ""}`}
                       >
                         <img
@@ -211,47 +229,51 @@ function LaneDrawer({
                             ⏸️
                           </span>
                         )}
-                      </div>
-                    </a>
-                  </td>
-                  <td data-clipboard-type="token">
-                    <Address
-                      address={token.tokenAddress}
-                      endLength={4}
-                      contractUrl={getExplorerAddressUrl(explorer)(token.tokenAddress)}
-                    />
-                  </td>
-                  <td>{token.decimals}</td>
-                  <td>
-                    {inOutbound === LaneFilter.Outbound
-                      ? determineTokenMechanism(token.sourcePoolType as PoolType, token.destPoolType as PoolType)
-                      : determineTokenMechanism(token.destPoolType as PoolType, token.sourcePoolType as PoolType)}
-                  </td>
+                      </span>
+                    </td>
+                    <td data-clipboard-type="token">
+                      <Address
+                        address={token.tokenAddress}
+                        endLength={4}
+                        contractUrl={getExplorerAddressUrl(explorer)(token.tokenAddress)}
+                      />
+                    </td>
+                    <td>{token.decimals}</td>
+                    <td>
+                      {inOutbound === LaneFilter.Outbound
+                        ? determineTokenMechanism(token.sourcePoolType as PoolType, token.destPoolType as PoolType)
+                        : determineTokenMechanism(token.destPoolType as PoolType, token.sourcePoolType as PoolType)}
+                    </td>
 
-                  <td>
-                    <RateLimitCell
-                      isLoading={isLoadingRateLimits}
-                      rateLimit={token.rateLimits.standard}
-                      type="capacity"
-                      showUnavailableTooltip
-                    />
-                  </td>
-                  <td className="rate-tooltip-cell">
-                    <RateLimitCell isLoading={isLoadingRateLimits} rateLimit={token.rateLimits.standard} type="rate" />
-                  </td>
-                  <td>
-                    <RateLimitCell
-                      isLoading={isLoadingRateLimits}
-                      rateLimit={token.rateLimits.ftf}
-                      type="capacity"
-                      showUnavailableTooltip
-                    />
-                  </td>
-                  <td>
-                    <RateLimitCell isLoading={isLoadingRateLimits} rateLimit={token.rateLimits.ftf} type="rate" />
-                  </td>
-                </tr>
-              ))}
+                    <td>
+                      <RateLimitCell
+                        isLoading={isLoadingRateLimits}
+                        rateLimit={token.rateLimits.standard}
+                        type="capacity"
+                        showUnavailableTooltip
+                      />
+                    </td>
+                    <td className="rate-tooltip-cell">
+                      <RateLimitCell
+                        isLoading={isLoadingRateLimits}
+                        rateLimit={token.rateLimits.standard}
+                        type="rate"
+                      />
+                    </td>
+                    <td>
+                      <RateLimitCell
+                        isLoading={isLoadingRateLimits}
+                        rateLimit={token.rateLimits.ftf}
+                        type="capacity"
+                        showUnavailableTooltip
+                      />
+                    </td>
+                    <td>
+                      <RateLimitCell isLoading={isLoadingRateLimits} rateLimit={token.rateLimits.ftf} type="rate" />
+                    </td>
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         </div>

src/components/CCIP/Drawer/TokenDrawer.tsx

@@ -115,6 +115,17 @@ function TokenDrawer({
           explorer: network.explorer,
           chainType: network.chainType,
         }}
+        poolDetails={
+          tokenDirectory?.pool
+            ? {
+                version: tokenDirectory.pool.version,
+                hook: tokenDirectory.pool.hook,
+                finality: tokenDirectory.pool.finality,
+                ccv: tokenDirectory.pool.ccv,
+              }
+            : null
+        }
+        isLoadingPoolDetails={isLoadingRateLimits}
         inDrawer={true}
       />
       <div className="ccip-table__drawer-container ccip-table__drawer-container--token">

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" }}

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";