Skip to content

Commit a0c8b46

Browse files
markshenoudamarkshenouda
authored
Add sublabels to rate limit columns and fix table styling issues (#229)
* Add sublabels to rate limit columns and fix table styling issues - Add sublabels (Tokens) and (Tokens/sec) to rate limit columns in TokenDrawer lanes table - Scope table column width rules to drawer container to prevent breaking TokenChainsTable layout - Remove padding-left from general th elements and scope to drawer lanes table only - Add ccip-table__verifier-name-header class to prevent padding on Verifiers tab table - Set drawer width to Wide when opening token details from token cards and chains table * fix: remove extraneous quotation mark in certification page image tag * fix: adjust margin and padding in ChainHero component for improved layout * fix: update layout and styling for ChainHero and LaneDetailsHero components to support drawer view * fix: add mobile responsive styles for Token Drawer tables * fix: align text to the right for the seventh column in drawer table * fix: update drawer container styles and improve column specifications for LaneDrawer and TokenDrawer
1 parent 849e34e commit a0c8b46

10 files changed

Lines changed: 298 additions & 68 deletions

File tree

‎src/components/CCIP/Chain/ChainTokenGrid.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Environment, Version, Network, PoolType } from "~/config/data/ccip/types.ts"
22
import { getAllTokenLanes, getTokenData } from "~/config/data/ccip/data.ts"
33
import TokenCard from "../Cards/TokenCard.tsx"
4-
import { drawerContentStore } from "../Drawer/drawerStore.ts"
4+
import { drawerContentStore, DrawerWidth, drawerWidthStore } from "../Drawer/drawerStore.ts"
55
import TokenDrawer from "../Drawer/TokenDrawer.tsx"
66
import { directoryToSupportedChain, getChainIcon, getChainTypeAndFamily, getTitle } from "~/features/utils/index.ts"
77
import { useState } from "react"
@@ -69,6 +69,7 @@ function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
6969
version: Version.V1_2_0,
7070
token: token.id,
7171
})[selectedNetwork.key]
72+
drawerWidthStore.set(DrawerWidth.Wide)
7273
drawerContentStore.set(() => (
7374
<TokenDrawer
7475
token={{

‎src/components/CCIP/ChainHero/ChainHero.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,12 @@
170170
padding: var(--space-10x) var(--space-8x);
171171
}
172172

173+
/* Drawer-specific styles to match drawer heading width */
174+
.ccip-chain-hero--drawer .ccip-chain-hero__content {
175+
padding: var(--space-10x);
176+
margin: 0;
177+
}
178+
173179
.ccip-chain-hero__fee-tokens-group-item {
174180
grid-column: 1 / -1; /* Span all columns */
175181
}

‎src/components/CCIP/ChainHero/LaneDetailsHero.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@
6565

6666
@media screen and (min-width: 768px) {
6767
.lane-details-hero {
68+
padding: var(--space-6x) var(--space-8x) var(--space-10x);
69+
}
70+
71+
/* Drawer-specific styles to match drawer heading width */
72+
.lane-details-hero--drawer {
6873
padding: var(--space-6x) var(--space-10x) var(--space-10x);
6974
}
7075

‎src/components/CCIP/ChainHero/LaneDetailsHero.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ interface LaneDetailsHeroProps {
2323
destinationAddress: string
2424
explorer: ExplorerInfo
2525
inOutbound: LaneFilter
26+
inDrawer?: boolean
2627
}
2728

2829
// Arrow component to avoid duplication
@@ -87,9 +88,10 @@ function LaneDetailsHero({
8788
destinationAddress,
8889
explorer,
8990
inOutbound,
91+
inDrawer = false,
9092
}: LaneDetailsHeroProps) {
9193
return (
92-
<div className="lane-details-hero">
94+
<div className={`lane-details-hero ${inDrawer ? "lane-details-hero--drawer" : ""}`}>
9395
{/* Display networks with direction based on lane type */}
9496
<div className="lane-details-hero__networks">
9597
{inOutbound === LaneFilter.Inbound ? (

‎src/components/CCIP/ChainHero/TokenDetailsHero.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ interface TokenDetailsHeroProps {
2323
poolType: PoolType
2424
poolAddress: string
2525
}
26+
inDrawer?: boolean
2627
}
2728

28-
function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
29+
function TokenDetailsHero({ network, token, inDrawer = false }: TokenDetailsHeroProps) {
2930
return (
30-
<section className="ccip-chain-hero">
31+
<section className={`ccip-chain-hero ${inDrawer ? "ccip-chain-hero--drawer" : ""}`}>
3132
<div className="ccip-chain-hero__content">
3233
<div className="ccip-chain-hero__heading">
3334
<div className="ccip-chain-hero__heading__images">

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

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,10 @@ function LaneDrawer({
7676
sourceAddress={sourceNetworkDetails?.chainSelector || ""}
7777
destinationAddress={destinationNetworkDetails?.chainSelector || ""}
7878
inOutbound={inOutbound}
79+
inDrawer={true}
7980
/>
8081

81-
<div className="ccip-table__drawer-container">
82+
<div className="ccip-table__drawer-container ccip-table__drawer-container--lane">
8283
<div className="ccip-table__filters">
8384
<div>
8485
<div className="ccip-table__filters-title">
@@ -125,9 +126,7 @@ function LaneDrawer({
125126
}}
126127
/>
127128
</div>
128-
<div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
129-
(Tokens)
130-
</div>
129+
<span className="ccip-table__header-sublabel">(Tokens)</span>
131130
</th>
132131
<th style={{ width: "180px" }}>
133132
<div>
@@ -145,9 +144,7 @@ function LaneDrawer({
145144
}}
146145
/>
147146
</div>
148-
<div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
149-
(Tokens/sec)
150-
</div>
147+
<span className="ccip-table__header-sublabel">(Tokens/sec)</span>
151148
</th>
152149
<th style={{ width: "150px" }}>
153150
<div>
@@ -165,9 +162,7 @@ function LaneDrawer({
165162
}}
166163
/>
167164
</div>
168-
<div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
169-
(Tokens)
170-
</div>
165+
<span className="ccip-table__header-sublabel">(Tokens)</span>
171166
</th>
172167
<th style={{ width: "180px" }}>
173168
<div>
@@ -185,9 +180,7 @@ function LaneDrawer({
185180
}}
186181
/>
187182
</div>
188-
<div style={{ color: "var(--muted-more-foreground)", fontSize: "0.875rem", fontWeight: "normal" }}>
189-
(Tokens/sec)
190-
</div>
183+
<span className="ccip-table__header-sublabel">(Tokens/sec)</span>
191184
</th>
192185
</tr>
193186
</thead>

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

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,9 @@ function TokenDrawer({
182182
explorer: network.explorer,
183183
chainType: network.chainType,
184184
}}
185+
inDrawer={true}
185186
/>
186-
<div className="ccip-table__drawer-container">
187+
<div className="ccip-table__drawer-container ccip-table__drawer-container--token">
187188
<div className="ccip-table__filters">
188189
<div>
189190
<Tabs
@@ -211,7 +212,7 @@ function TokenDrawer({
211212
<table className="ccip-table">
212213
<thead>
213214
<tr>
214-
<th>
215+
<th className="ccip-table__verifier-name-header">
215216
<Typography variant="body-semi-s">Verifier name</Typography>
216217
</th>
217218
<th>
@@ -287,37 +288,49 @@ function TokenDrawer({
287288
/>
288289
</th>
289290
<th>
290-
Rate limit capacity
291-
<Tooltip
292-
label=""
293-
tip="Maximum amount per transaction"
294-
labelStyle={{
295-
marginRight: "5px",
296-
}}
297-
style={{
298-
display: "inline-block",
299-
verticalAlign: "middle",
300-
marginBottom: "2px",
301-
}}
302-
/>
291+
<div>
292+
Rate limit capacity
293+
<Tooltip
294+
label=""
295+
tip="Maximum amount per transaction"
296+
labelStyle={{
297+
marginRight: "5px",
298+
}}
299+
style={{
300+
display: "inline-block",
301+
verticalAlign: "middle",
302+
marginBottom: "2px",
303+
}}
304+
/>
305+
</div>
306+
<span className="ccip-table__header-sublabel">(Tokens)</span>
303307
</th>
304308
<th>
305-
Rate limit refill rate
306-
<Tooltip
307-
label=""
308-
tip="Rate at which available capacity is replenished"
309-
labelStyle={{
310-
marginRight: "5px",
311-
}}
312-
style={{
313-
display: "inline-block",
314-
verticalAlign: "middle",
315-
marginBottom: "2px",
316-
}}
317-
/>
309+
<div>
310+
Rate limit refill rate
311+
<Tooltip
312+
label=""
313+
tip="Rate at which available capacity is replenished"
314+
labelStyle={{
315+
marginRight: "5px",
316+
}}
317+
style={{
318+
display: "inline-block",
319+
verticalAlign: "middle",
320+
marginBottom: "2px",
321+
}}
322+
/>
323+
</div>
324+
<span className="ccip-table__header-sublabel">(Tokens/sec)</span>
325+
</th>
326+
<th>
327+
<div>FTF Rate limit capacity</div>
328+
<span className="ccip-table__header-sublabel">(Tokens)</span>
329+
</th>
330+
<th>
331+
<div>FTF Rate limit refill rate</div>
332+
<span className="ccip-table__header-sublabel">(Tokens/sec)</span>
318333
</th>
319-
<th>FTF Rate limit capacity</th>
320-
<th>FTF Rate limit refill rate</th>
321334
<th>Verifiers</th>
322335
</tr>
323336
</thead>

0 commit comments

Comments
 (0)