UX: Add visual indicators for paused CCIP tokens (capacity ≤ 1)

src/components/CCIP/Drawer/LaneDrawer.tsx

@@ -2,7 +2,7 @@ import Address from "~/components/AddressReact.tsx"
 import "../Tables/Table.css"
 import { Environment, LaneConfig, LaneFilter, Version } from "~/config/data/ccip/types.ts"
 import { getNetwork, getTokenData } from "~/config/data/ccip/data.ts"
-import { displayCapacity, determineTokenMechanism } from "~/config/data/ccip/utils.ts"
+import { displayCapacity, determineTokenMechanism, isTokenPaused } from "~/config/data/ccip/utils.ts"
 import { useState } from "react"
 import LaneDetailsHero from "../ChainHero/LaneDetailsHero.tsx"
 import { getExplorerAddressUrl, getTokenIconUrl, fallbackTokenIconUrl } from "~/features/utils/index.ts"
@@ -136,11 +136,22 @@ function LaneDrawer({
                     })
                     if (!Object.keys(data).length) return null
                     const logo = getTokenIconUrl(token)
+
+                    // Check if token is paused
+                    const tokenPaused = isTokenPaused(
+                      data[sourceNetwork.key].decimals,
+                      lane.supportedTokens?.[token]?.rateLimiterConfig?.[
+                        inOutbound === LaneFilter.Inbound ? "in" : "out"
+                      ]
+                    )
+
                     return (
-                      <tr key={index}>
+                      <tr key={index} className={tokenPaused ? "ccip-table__row--paused" : ""}>
                         <td>
                           <a href={`/ccip/directory/${environment}/token/${token}`}>
-                            <div className="ccip-table__network-name">
+                            <div
+                              className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
+                            >
                               <img
                                 src={logo}
                                 alt={`${token} logo`}
@@ -151,6 +162,11 @@ function LaneDrawer({
                                 }}
                               />
                               {token}
+                              {tokenPaused && (
+                                <span className="ccip-table__paused-badge" title="Transfers are currently paused">
+                                  ⏸️
+                                </span>
+                              )}
                             </div>
                           </a>
                         </td>

src/components/CCIP/Drawer/TokenDrawer.tsx

@@ -14,6 +14,7 @@ import {
   getTokenData,
   LaneConfig,
 } from "~/config/data/ccip/index.ts"
+import { isTokenPaused } from "~/config/data/ccip/utils.ts"
 import { useState } from "react"
 import { ChainType, ExplorerInfo, SupportedChain } from "~/config/index.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
@@ -214,11 +215,19 @@ function TokenDrawer({
                 .map(({ networkDetails, laneData, destinationChain, destinationPoolType }) => {
                   if (!laneData || !networkDetails) return null
 
+                  // Check if token is paused on this lane
+                  const tokenPaused = isTokenPaused(
+                    network.tokenDecimals,
+                    destinationLanes[destinationChain].rateLimiterConfig?.[
+                      inOutbound === LaneFilter.Inbound ? "in" : "out"
+                    ]
+                  )
+
                   return (
-                    <tr key={networkDetails.name}>
+                    <tr key={networkDetails.name} className={tokenPaused ? "ccip-table__row--paused" : ""}>
                       <td>
                         <div
-                          className="ccip-table__network-name"
+                          className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
                           role="button"
                           onClick={() => {
                             drawerContentStore.set(() => (
@@ -239,6 +248,11 @@ function TokenDrawer({
                         >
                           <img src={networkDetails?.logo} alt={networkDetails?.name} className="ccip-table__logo" />
                           {networkDetails?.name}
+                          {tokenPaused && (
+                            <span className="ccip-table__paused-badge" title="Transfers are currently paused">
+                              ⏸️
+                            </span>
+                          )}
                         </div>
                       </td>
                       <td>

src/components/CCIP/Tables/Table.css

@@ -253,3 +253,48 @@
     justify-content: center;
   }
 }
+
+/* Paused token styles */
+.ccip-table__row--paused {
+  opacity: 0.6;
+  background-color: var(--gray-50);
+}
+
+.ccip-table__row--paused:hover {
+  opacity: 0.8;
+  background-color: var(--gray-100);
+}
+
+.ccip-table__network-name--paused {
+  color: var(--gray-400) !important;
+  filter: grayscale(0.7);
+}
+
+.ccip-table__network-name--paused img {
+  filter: grayscale(0.8) opacity(0.7);
+}
+
+.ccip-table__paused-badge {
+  margin-left: var(--space-2x);
+  font-size: 12px;
+  opacity: 0.8;
+  display: inline-flex;
+  align-items: center;
+  cursor: help;
+}
+
+/* Ensure paused tokens still allow interaction for tooltips */
+.ccip-table__row--paused .ccip-table__network-name {
+  pointer-events: auto;
+}
+
+/* Additional styling for capacity and rate cells in paused state */
+.ccip-table__row--paused td {
+  color: var(--gray-400);
+}
+
+.ccip-table__row--paused a {
+  color: var(--gray-400);
+  text-decoration: none;
+  pointer-events: none;
+}

src/components/CCIP/Tables/TokenChainsTable.tsx

@@ -2,6 +2,7 @@ import Address from "~/components/AddressReact.tsx"
 import "./Table.css"
 import { drawerContentStore } from "../Drawer/drawerStore.ts"
 import { Environment, SupportedTokenConfig, tokenPoolDisplay, PoolType } from "~/config/data/ccip/index.ts"
+import { areAllLanesPaused } from "~/config/data/ccip/utils.ts"
 import { ChainType, ExplorerInfo } from "~/config/types.ts"
 import TableSearchInput from "./TableSearchInput.tsx"
 import { useState } from "react"
@@ -64,66 +65,79 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
           <tbody>
             {networks
               ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase()))
-              .map((network, index) => (
-                <tr key={index}>
-                  <td>
-                    <div
-                      className="ccip-table__network-name"
-                      role="button"
-                      onClick={() => {
-                        drawerContentStore.set(() => (
-                          <TokenDrawer
-                            token={token}
-                            network={network}
-                            destinationLanes={lanes[network.key]}
-                            environment={environment}
+              .map((network, index) => {
+                // Check if all lanes for this token on this network are paused
+                const allLanesPaused = areAllLanesPaused(network.tokenDecimals, lanes[network.key] || {})
+
+                return (
+                  <tr key={index} className={allLanesPaused ? "ccip-table__row--paused" : ""}>
+                    <td>
+                      <div
+                        className={`ccip-table__network-name ${allLanesPaused ? "ccip-table__network-name--paused" : ""}`}
+                        role="button"
+                        onClick={() => {
+                          drawerContentStore.set(() => (
+                            <TokenDrawer
+                              token={token}
+                              network={network}
+                              destinationLanes={lanes[network.key]}
+                              environment={environment}
+                            />
+                          ))
+                        }}
+                      >
+                        <span className="ccip-table__logoContainer">
+                          <img
+                            src={network.logo}
+                            alt={network.name}
+                            className="ccip-table__logo"
+                            onError={({ currentTarget }) => {
+                              currentTarget.onerror = null // prevents looping
+                              currentTarget.src = fallbackTokenIconUrl
+                            }}
+                          />
+                          <img
+                            src={network.tokenLogo}
+                            alt={network.tokenId}
+                            className="ccip-table__smallLogo"
+                            onError={({ currentTarget }) => {
+                              currentTarget.onerror = null // prevents looping
+                              currentTarget.src = fallbackTokenIconUrl
+                            }}
                           />
-                        ))
-                      }}
-                    >
-                      <span className="ccip-table__logoContainer">
-                        <img
-                          src={network.logo}
-                          alt={network.name}
-                          className="ccip-table__logo"
-                          onError={({ currentTarget }) => {
-                            currentTarget.onerror = null // prevents looping
-                            currentTarget.src = fallbackTokenIconUrl
-                          }}
-                        />
-                        <img
-                          src={network.tokenLogo}
-                          alt={network.tokenId}
-                          className="ccip-table__smallLogo"
-                          onError={({ currentTarget }) => {
-                            currentTarget.onerror = null // prevents looping
-                            currentTarget.src = fallbackTokenIconUrl
-                          }}
-                        />
-                      </span>
-                      {network.name}
-                    </div>
-                  </td>
-                  <td>{network.tokenName}</td>
-                  <td>{network.tokenSymbol}</td>
-                  <td>{network.tokenDecimals}</td>
-                  <td data-clipboard-type="token">
-                    <Address
-                      contractUrl={getExplorerAddressUrl(network.explorer)(network.tokenAddress)}
-                      address={network.tokenAddress}
-                      endLength={6}
-                    />
-                  </td>
-                  <td>{tokenPoolDisplay(network.tokenPoolType)}</td>
-                  <td data-clipboard-type="token-pool">
-                    <Address
-                      contractUrl={getExplorerAddressUrl(network.explorer)(network.tokenPoolAddress)}
-                      address={network.tokenPoolAddress}
-                      endLength={6}
-                    />
-                  </td>
-                </tr>
-              ))}
+                        </span>
+                        {network.name}
+                        {allLanesPaused && (
+                          <span
+                            className="ccip-table__paused-badge"
+                            title="All transfers from this network are currently paused"
+                          >
+                            ⏸️
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td>{network.tokenName}</td>
+                    <td>{network.tokenSymbol}</td>
+                    <td>{network.tokenDecimals}</td>
+                    <td data-clipboard-type="token">
+                      <Address
+                        contractUrl={getExplorerAddressUrl(network.explorer)(network.tokenAddress)}
+                        address={network.tokenAddress}
+                        endLength={6}
+                      />
+                    </td>
+                    <td>{tokenPoolDisplay(network.tokenPoolType)}</td>
+                    <td data-clipboard-type="token-pool">
+                      <Address
+                        contractUrl={getExplorerAddressUrl(network.explorer)(network.tokenPoolAddress)}
+                        address={network.tokenPoolAddress}
+                        endLength={6}
+                      />
+                    </td>
+                  </tr>
+                )
+              })}
           </tbody>
         </table>
         <div className="ccip-table__notFound">

src/config/data/ccip/utils.ts

@@ -189,3 +189,71 @@ export const displayRate = (capacity: string, rate: string, symbol: string, deci
     maxThroughput: `Refills from 0 to ${commify(cleanedCapacity)} ${symbol} in ${displayTime}`,
   }
 }
+
+// ==============================
+// UTILITY FUNCTIONS FOR TOKEN STATUS
+// ==============================
+
+/**
+ * Determines if a token is paused based on its rate limiter configuration
+ * A token is considered paused if its capacity is <= 1
+ *
+ */
+export const isTokenPaused = (decimals = 18, rateLimiterConfig?: RateLimiterConfig): boolean => {
+  if (!rateLimiterConfig?.isEnabled) {
+    return false // N/A tokens are not considered paused
+  }
+
+  const capacity = rateLimiterConfig?.capacity || "0"
+
+  try {
+    // Convert to BigInt for precise comparison
+    const capacityBigInt = BigInt(capacity)
+    // Calculate threshold: 1 token in smallest units = 10^decimals
+    const oneTokenInSmallestUnits = BigInt(10) ** BigInt(decimals)
+
+    // Direct BigInt comparison - no floating point risks
+    return capacityBigInt <= oneTokenInSmallestUnits
+  } catch (error) {
+    // If capacity is not a valid number, treat as paused for safety
+    console.warn(`Invalid capacity value for rate limiter: ${capacity}`, error)
+    return true
+  }
+}
+
+/**
+ * Determines if all outbound lanes for a token from a specific network are paused
+ * Used to grey out network rows in the token view when all destination lanes are paused
+ *
+ * @example
+ * // Example: LBTC (8 decimals) on Ink with only one destination lane that has capacity "2"
+ * const destinationLanes = {
+ *   "ethereum-mainnet-ink-1": {
+ *     rateLimiterConfig: {
+ *       out: {
+ *         capacity: "2",
+ *         isEnabled: true,
+ *         rate: "1"
+ *       }
+ *     }
+ *   }
+ * }
+ * areAllLanesPaused(8, destinationLanes) // returns true (2 ≤ 10^8)
+ */
+export const areAllLanesPaused = (
+  decimals = 18,
+  destinationLanes: { [destinationChain: string]: { rateLimiterConfig?: { out?: RateLimiterConfig } } }
+): boolean => {
+  const laneKeys = Object.keys(destinationLanes)
+
+  // If no lanes exist, don't consider it paused
+  if (laneKeys.length === 0) {
+    return false
+  }
+
+  // Check if ALL outbound lanes are paused
+  return laneKeys.every((destinationChain) => {
+    const outboundConfig = destinationLanes[destinationChain]?.rateLimiterConfig?.out
+    return isTokenPaused(decimals, outboundConfig)
+  })
+}