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/config/data/ccip/utils.ts

@@ -189,3 +189,34 @@ 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
+  }
+}