From eacc1480c8a9bd57d620e24403f892cdab265d0e Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 5 Mar 2026 21:20:36 +0200 Subject: [PATCH 1/2] Remove Verifier tab from Token Details drawer --- src/components/CCIP/Drawer/TokenDrawer.tsx | 100 ++------------------- 1 file changed, 6 insertions(+), 94 deletions(-) diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx index 2cbf4fba382..84463a113b4 100644 --- a/src/components/CCIP/Drawer/TokenDrawer.tsx +++ b/src/components/CCIP/Drawer/TokenDrawer.tsx @@ -11,7 +11,6 @@ import { getTokenData, LaneConfig, getVerifiersByNetwork, - getVerifierTypeDisplay, } from "~/config/data/ccip/index.ts" import { useState, useMemo } from "react" import { ChainType, ExplorerInfo, SupportedChain } from "~/config/index.ts" @@ -28,7 +27,6 @@ import { Typography } from "@chainlink/blocks" enum TokenTab { Outbound = "outbound", Inbound = "inbound", - Verifiers = "verifiers", } function TokenDrawer({ @@ -77,25 +75,6 @@ function TokenDrawer({ setExpandedRows(newExpandedRows) } - // Get verifiers for the current network - const verifiers = getVerifiersByNetwork({ - networkId: network.key, - environment, - version: Version.V1_2_0, - }) - - // Filter verifiers based on search - const filteredVerifiers = useMemo(() => { - if (!search) return verifiers - const searchLower = search.toLowerCase() - return verifiers.filter( - (verifier) => - verifier.name.toLowerCase().includes(searchLower) || - verifier.address.toLowerCase().includes(searchLower) || - verifier.type.toLowerCase().includes(searchLower) - ) - }, [verifiers, search]) - type LaneRow = { networkDetails: { name: string @@ -197,77 +176,13 @@ function TokenDrawer({ name: "Inbound lanes", key: TokenTab.Inbound, }, - { - name: "Verifiers", - key: TokenTab.Verifiers, - }, ]} onChange={(key) => setActiveTab(key as TokenTab)} /> - {activeTab === TokenTab.Verifiers ? ( -
- - - - - - - - - - - {verifiers.length === 0 ? ( - - - - ) : ( - filteredVerifiers.map((verifier) => ( - - - - - - - )) - )} - -
- Verifier name - - Verifier address - - Verifier type - - Threshold amount -
- No verifiers found for this network. -
-
- {`${verifier.name} - {verifier.name} -
- 		-
-
- {getVerifierTypeDisplay(verifier.type)} - - N/A -
-
- ) : ( -
+
@@ -550,15 +465,12 @@ function TokenDrawer({
- )} - {activeTab !== TokenTab.Verifiers && ( -
- {laneRows?.filter( - ({ networkDetails }) => networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase()) - ).length === 0 && <>No lanes found} -
- )} +
+ {laneRows?.filter( + ({ networkDetails }) => networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase()) + ).length === 0 && <>No lanes found} +
) From d3566a032cec16de9d32e5ebe9d7c3add2c92ac6 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Mon, 9 Mar 2026 15:48:09 +0200 Subject: [PATCH 2/2] Enhance Token Details table with tooltips for rate limit columns and remove Verifiers column --- src/components/CCIP/Drawer/TokenDrawer.tsx | 488 ++++++++++----------- 1 file changed, 230 insertions(+), 258 deletions(-) diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx index 84463a113b4..6d9ab5e5a26 100644 --- a/src/components/CCIP/Drawer/TokenDrawer.tsx +++ b/src/components/CCIP/Drawer/TokenDrawer.tsx @@ -183,15 +183,31 @@ function TokenDrawer({
- - - - -
{activeTab === TokenTab.Inbound ? "Source" : "Destination"} network - Mechanism + + + + + + - - - - - - - - - {laneRows - ?.filter( - ({ networkDetails }) => - networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase()) - ) - .map(({ networkDetails, laneData, destinationChain, destinationPoolType }) => { - if (!laneData || !networkDetails) return null + + (Tokens) + + + + + + + + + {laneRows + ?.filter( + ({ networkDetails }) => + networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase()) + ) + .map(({ networkDetails, laneData, destinationChain, destinationPoolType }) => { + if (!laneData || !networkDetails) return null - // Get rate limit data for this lane - const source = activeTab === TokenTab.Outbound ? network.key : destinationChain - const destination = activeTab === TokenTab.Outbound ? destinationChain : network.key - const laneKey = `${source}-${destination}` - const laneRateLimits = rateLimitsMap[laneKey] - const tokenRateLimits = laneRateLimits?.[token.id] + // Get rate limit data for this lane + const source = activeTab === TokenTab.Outbound ? network.key : destinationChain + const destination = activeTab === TokenTab.Outbound ? destinationChain : network.key + const laneKey = `${source}-${destination}` + const laneRateLimits = rateLimitsMap[laneKey] + const tokenRateLimits = laneRateLimits?.[token.id] - const direction = activeTab === TokenTab.Outbound ? "out" : "in" + const direction = activeTab === TokenTab.Outbound ? "out" : "in" - // Get standard and FTF rate limits - const allLimits = realtimeDataService.getAllRateLimitsForDirection(tokenRateLimits, direction) + // Get standard and FTF rate limits + const allLimits = realtimeDataService.getAllRateLimitsForDirection(tokenRateLimits, direction) - // Token is paused if standard rate limit capacity is 0 - const tokenPaused = allLimits.standard?.capacity === "0" + // Token is paused if standard rate limit capacity is 0 + const tokenPaused = allLimits.standard?.capacity === "0" - // Get verifiers for the destination network - const destinationVerifiers = getVerifiersByNetwork({ - networkId: destinationChain, - environment, - version: Version.V1_2_0, - }) + // Get verifiers for the destination network + const destinationVerifiers = getVerifiersByNetwork({ + networkId: destinationChain, + environment, + version: Version.V1_2_0, + }) - const isExpanded = expandedRows.has(networkDetails.name) + const isExpanded = expandedRows.has(networkDetails.name) - return ( - <> - toggleRowExpansion(networkDetails.name)} - role="button" - tabIndex={0} - aria-expanded={isExpanded} - aria-label={`${isExpanded ? "Hide" : "Show"} verifiers for ${networkDetails?.name}`} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - e.preventDefault() - toggleRowExpansion(networkDetails.name) - } - }} - > - toggleRowExpansion(networkDetails.name)} + role="button" + tabIndex={0} + aria-expanded={isExpanded} + aria-label={`${isExpanded ? "Hide" : "Show"} verifiers for ${networkDetails?.name}`} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault() + toggleRowExpansion(networkDetails.name) + } + }} + > + + + + + + + + + {isExpanded && ( + + - - - - - - - {isExpanded && ( - - - - )} - - ) - })} - -
{activeTab === TokenTab.Inbound ? "Source" : "Destination"} network + Mechanism + + +
+ Rate limit capacity -
-
- Rate limit capacity - -
- (Tokens) - 		-
- Rate limit refill rate - -
- (Tokens/sec) - 		-
- FTF Rate limit capacity - -
- (Tokens) - 		-
- FTF Rate limit refill rate - -
- (Tokens/sec) - 		Verifiers
+
+ Rate limit refill rate + +
+ (Tokens/sec) + 		+
FTF Rate limit capacity
+ (Tokens) + 		+
FTF Rate limit refill rate
+ (Tokens/sec) + 		Verifiers
-
+
+
+ {`${networkDetails?.name} + {networkDetails?.name} + {tokenPaused && ( + + ⏸️ + + )} +
+ 		+ {activeTab === TokenTab.Outbound + ? determineTokenMechanism(network.tokenPoolType, destinationPoolType) + : determineTokenMechanism(destinationPoolType, network.tokenPoolType)} + + + + + + + + + +
+ - {`${networkDetails?.name} - {networkDetails?.name} - {tokenPaused && ( - - ⏸️ - + +
+
+
+ {destinationVerifiers.length === 0 ? ( +
+ No verifiers found for this network. +
+ ) : ( + + + + + + + + + + + {destinationVerifiers.map((verifier) => ( + + + + + + + ))} + +
VerifierSource verifier addressDestination verifier addressThreshold amount
+
+ {`${verifier.name} + {verifier.name} +
+ 		+
+
+
+
+ 150,000 +
)}
- {activeTab === TokenTab.Outbound - ? determineTokenMechanism(network.tokenPoolType, destinationPoolType) - : determineTokenMechanism(destinationPoolType, network.tokenPoolType)} - - - - - - - - - -
- - - -
-
-
- {destinationVerifiers.length === 0 ? ( -
- No verifiers found for this network. -
- ) : ( - - - - - - - - - - - {destinationVerifiers.map((verifier) => ( - - - - - - - ))} - -
VerifierSource verifier addressDestination verifier addressThreshold amount
-
- {`${verifier.name} - {verifier.name} -
- 		-
-
-
-
- 150,000 -
- )} -
-
- + )} + + ) + })} + +
+
{laneRows?.filter(