Skip to content

Commit 7578179

Browse files
markshenoudamarkshenouda
authored
feat: add feature flag to toggle Verifiers accordion in TokenDrawer (#260)
* feat: add feature flag to toggle Verifiers accordion in TokenDrawer Add SHOW_VERIFIERS_ACCORDION boolean at the top of TokenDrawer.tsx to enable/disable the verifiers expanding section and chevron. Set to false until the backend is ready; flip to true to re-enable. * feat: enable Verifiers accordion in TokenDrawer with updated feature flag * feat: implement NetworkLaneRow and VerifiersAccordionRow components for improved token drawer display * fix: simplify conditional for fetching destination verifiers in TokenDrawer * feat: implement NetworkLaneRowNoVerifiers component and update TokenDrawer to conditionally render based on feature flag * feat: update NetworkLaneRow and NetworkLaneRowNoVerifiers components with improved comments and structure for accordion functionality
1 parent aad128e commit 7578179

4 files changed

Lines changed: 290 additions & 163 deletions

File tree

‎src/components/CCIP/Drawer/NetworkLaneRow.tsx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// AI AGENT NOTE: This component is the accordion variant of the network lane row (used when SHOW_VERIFIERS_ACCORDION = true).
2+
// Any UI changes to the row layout (columns, styling, network name cell, rate limit cells, etc.) must also be
3+
// applied to NetworkLaneRowNoVerifiers.tsx to keep both variants in sync.
4+
//
5+
// When the Verifiers sub-table feature is fully released, we will:
6+
// 1. Remove the SHOW_VERIFIERS_ACCORDION feature flag from TokenDrawer.tsx
7+
// 2. Delete NetworkLaneRowNoVerifiers.tsx
8+
// 3. Use this component (NetworkLaneRow) unconditionally
9+
10+
import { Fragment } from "react"
11+
import type { RateLimiterConfig } from "~/lib/ccip/types/index.ts"
12+
import type { Verifier } from "~/config/data/ccip/index.ts"
13+
import type { ChainType, ExplorerInfo } from "~/config/index.ts"
14+
import { RateLimitCell } from "~/components/CCIP/RateLimitCell.tsx"
15+
import { VerifiersAccordionRow } from "./VerifiersAccordionRow.tsx"
16+
17+
export interface NetworkLaneRowProps {
18+
networkDetails: { name: string; logo: string }
19+
tokenPaused: boolean
20+
isExpanded: boolean
21+
onToggle: () => void
22+
mechanism: string
23+
allLimits: { standard: RateLimiterConfig | null; ftf: RateLimiterConfig | null }
24+
isLoadingRateLimits: boolean
25+
destinationVerifiers: Verifier[]
26+
explorer: ExplorerInfo
27+
chainType: ChainType
28+
}
29+
30+
export function NetworkLaneRow({
31+
networkDetails,
32+
tokenPaused,
33+
isExpanded,
34+
onToggle,
35+
mechanism,
36+
allLimits,
37+
isLoadingRateLimits,
38+
destinationVerifiers,
39+
explorer,
40+
chainType,
41+
}: NetworkLaneRowProps) {
42+
return (
43+
<Fragment>
44+
<tr
45+
className={`ccip-table__accordion-row ${tokenPaused ? "ccip-table__row--paused" : ""} ${isExpanded ? "ccip-table__accordion-row--expanded" : ""}`}
46+
onClick={onToggle}
47+
role="button"
48+
tabIndex={0}
49+
aria-expanded={isExpanded}
50+
aria-label={`${isExpanded ? "Hide" : "Show"} verifiers for ${networkDetails.name}`}
51+
onKeyDown={(e) => {
52+
if (e.key === "Enter" || e.key === " ") {
53+
e.preventDefault()
54+
onToggle()
55+
}
56+
}}
57+
>
58+
<td>
59+
<div className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}>
60+
<img
61+
src={networkDetails.logo}
62+
alt={`${networkDetails.name} blockchain logo`}
63+
className="ccip-table__logo"
64+
/>
65+
{networkDetails.name}
66+
{tokenPaused && (
67+
<span className="ccip-table__paused-badge" title="Transfers are currently paused">
68+
⏸️
69+
</span>
70+
)}
71+
</div>
72+
</td>
73+
<td>{mechanism}</td>
74+
<td>
75+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.standard} type="capacity" />
76+
</td>
77+
<td>
78+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.standard} type="rate" />
79+
</td>
80+
<td>
81+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.ftf} type="capacity" />
82+
</td>
83+
<td>
84+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.ftf} type="rate" />
85+
</td>
86+
<td>
87+
<div className="ccip-table__verifier-toggle">
88+
<svg
89+
className={`ccip-table__expand-icon ${isExpanded ? "ccip-table__expand-icon--expanded" : ""}`}
90+
width="16"
91+
height="16"
92+
viewBox="0 0 16 16"
93+
fill="none"
94+
xmlns="http://www.w3.org/2000/svg"
95+
>
96+
<path
97+
d="M4 6L8 10L12 6"
98+
stroke="currentColor"
99+
strokeWidth="2"
100+
strokeLinecap="round"
101+
strokeLinejoin="round"
102+
/>
103+
</svg>
104+
</div>
105+
</td>
106+
</tr>
107+
{isExpanded && (
108+
<VerifiersAccordionRow destinationVerifiers={destinationVerifiers} explorer={explorer} chainType={chainType} />
109+
)}
110+
</Fragment>
111+
)
112+
}

‎src/components/CCIP/Drawer/NetworkLaneRowNoVerifiers.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// AI AGENT NOTE: This is a temporary component used while SHOW_VERIFIERS_ACCORDION = false in TokenDrawer.tsx.
2+
// It mirrors the row layout of NetworkLaneRow.tsx without the accordion/verifiers functionality.
3+
// Any UI changes to the row layout (columns, styling, network name cell, rate limit cells, etc.) must also be
4+
// applied to NetworkLaneRow.tsx to keep both variants in sync.
5+
//
6+
// When the Verifiers sub-table feature is fully released, this file should be deleted entirely.
7+
8+
import type { RateLimiterConfig } from "~/lib/ccip/types/index.ts"
9+
import { RateLimitCell } from "~/components/CCIP/RateLimitCell.tsx"
10+
11+
export interface NetworkLaneRowNoVerifiersProps {
12+
networkDetails: { name: string; logo: string }
13+
tokenPaused: boolean
14+
mechanism: string
15+
allLimits: { standard: RateLimiterConfig | null; ftf: RateLimiterConfig | null }
16+
isLoadingRateLimits: boolean
17+
}
18+
19+
export function NetworkLaneRowNoVerifiers({
20+
networkDetails,
21+
tokenPaused,
22+
mechanism,
23+
allLimits,
24+
isLoadingRateLimits,
25+
}: NetworkLaneRowNoVerifiersProps) {
26+
return (
27+
<tr className={tokenPaused ? "ccip-table__row--paused" : ""}>
28+
<td>
29+
<div className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}>
30+
<img src={networkDetails.logo} alt={`${networkDetails.name} blockchain logo`} className="ccip-table__logo" />
31+
{networkDetails.name}
32+
{tokenPaused && (
33+
<span className="ccip-table__paused-badge" title="Transfers are currently paused">
34+
⏸️
35+
</span>
36+
)}
37+
</div>
38+
</td>
39+
<td>{mechanism}</td>
40+
<td>
41+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.standard} type="capacity" />
42+
</td>
43+
<td>
44+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.standard} type="rate" />
45+
</td>
46+
<td>
47+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.ftf} type="capacity" />
48+
</td>
49+
<td>
50+
<RateLimitCell isLoading={isLoadingRateLimits} rateLimit={allLimits.ftf} type="rate" />
51+
</td>
52+
</tr>
53+
)
54+
}

0 commit comments

Comments
 (0)