Skip to content

Commit 086551f

Browse files
markshenoudamarkshenouda
authored
Update lane side panel (#174)
* update the panel width * change the colors of the headers and heros to the new color * fix layout on lane panel hero * update the lane details hero with the correct items * update lane table header * add unavailable and tooltip instead of N/A in lane table * add support for wide drawer layout in CCIP components * update lane drawer to display 'TBC' for unavailable FTF rate limit data * remove unnecessary blank line in LaneDetailsHero component * conditionally render DetailItem components for onRamp, offRamp, sourceAddress, and destinationAddress * refactor: adjust padding for table header and cells in CCIP table * fix: reduce endLength for onRamp and offRamp addresses in LaneDetailsHero component * fix: adjust flex direction for lane details in LaneDetailsHero component
1 parent ddf4936 commit 086551f

File tree

14 files changed

+214
-93
lines changed

14 files changed

+214
-93
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.ccip-chain-hero {
2-
background-color: var(--gray-100);
2+
background: var(--Page-Background-Alt);
33
border-bottom: 1px solid var(--gray-200);
44
min-height: 241px;
55
}

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.lane-details-hero {
2-
background-color: var(--gray-100);
2+
background: var(--Page-Background-Alt);
33
padding: var(--space-6x);
44
border-bottom: 1px solid var(--gray-200);
55
}
@@ -42,9 +42,16 @@
4242
}
4343

4444
.lane-details-hero__details {
45-
display: grid;
46-
grid-template-columns: 1fr 1fr;
47-
gap: var(--space-6x);
45+
display: flex;
46+
flex-direction: column;
47+
gap: var(--space-10x);
48+
}
49+
50+
.lane-details-hero__details__item {
51+
display: flex;
52+
flex-direction: column;
53+
gap: var(--space-4x);
54+
min-width: var(--space-45x);
4855
}
4956

5057
.lane-details-hero__details__label {
@@ -61,10 +68,6 @@
6168
padding: var(--space-6x) var(--space-10x) var(--space-10x);
6269
}
6370

64-
.lane-details-hero__details {
65-
grid-template-columns: 1fr 2fr;
66-
}
67-
6871
.lane-details-hero__networks {
6972
flex-direction: row;
7073
align-items: center;
@@ -74,4 +77,9 @@
7477
transform: rotate(0deg);
7578
margin-left: 0;
7679
}
80+
81+
.lane-details-hero__details {
82+
flex-direction: row;
83+
flex-wrap: wrap;
84+
}
7785
}

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

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ interface LaneDetailsHeroProps {
1919
}
2020
onRamp: string
2121
offRamp: string
22+
sourceAddress: string
2223
destinationAddress: string
23-
enforceOutOfOrder?: boolean
2424
explorer: ExplorerInfo
2525
inOutbound: LaneFilter
2626
}
@@ -69,32 +69,25 @@ const DetailItem = ({
6969
clipboardType?: string
7070
tooltip?: React.ReactNode
7171
}) => (
72-
<>
72+
<div className="lane-details-hero__details__item">
7373
<div className="lane-details-hero__details__label">
7474
{label}
7575
{tooltip}
7676
</div>
7777
<div data-clipboard-type={clipboardType}>{children}</div>
78-
</>
78+
</div>
7979
)
8080

8181
function LaneDetailsHero({
8282
sourceNetwork,
8383
destinationNetwork,
8484
onRamp,
8585
offRamp,
86+
sourceAddress,
8687
destinationAddress,
87-
enforceOutOfOrder,
8888
explorer,
8989
inOutbound,
9090
}: LaneDetailsHeroProps) {
91-
// Map boolean values to display strings
92-
const getOutOfOrderText = (value?: boolean) => {
93-
if (value === true) return "Required"
94-
if (value === false) return "Optional"
95-
return "N/A"
96-
}
97-
9891
return (
9992
<div className="lane-details-hero">
10093
{/* Display networks with direction based on lane type */}
@@ -115,42 +108,47 @@ function LaneDetailsHero({
115108
</div>
116109

117110
<div className="lane-details-hero__details">
118-
{/* Display address information based on lane type */}
119-
{inOutbound === LaneFilter.Inbound ? (
120-
<DetailItem label="OffRamp address" clipboardType="offramp">
121-
<AddressComponent
122-
address={offRamp}
123-
endLength={6}
124-
contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
125-
/>
126-
</DetailItem>
127-
) : (
111+
{onRamp && (
128112
<DetailItem
129113
label="OnRamp address"
130114
clipboardType="onramp"
131115
tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
132116
>
133117
<AddressComponent
134118
address={onRamp}
135-
endLength={6}
119+
endLength={4}
136120
contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
137121
/>
138122
</DetailItem>
139123
)}
140124

141-
<DetailItem label="Destination chain selector" clipboardType="destination-chain-selector">
142-
{destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}{" "}
143-
</DetailItem>
125+
{offRamp && (
126+
<DetailItem label="OffRamp address" clipboardType="offramp">
127+
<AddressComponent
128+
address={offRamp}
129+
endLength={4}
130+
contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
131+
/>
132+
</DetailItem>
133+
)}
134+
135+
{sourceAddress && (
136+
<DetailItem
137+
label="Source chain selector"
138+
clipboardType="source-chain-selector"
139+
tooltip={<StyledTooltip tip="Unique identifier for the source blockchain network." />}
140+
>
141+
<CopyValue value={sourceAddress} />
142+
</DetailItem>
143+
)}
144144

145-
{inOutbound === LaneFilter.Outbound && (
145+
{destinationAddress && (
146146
<DetailItem
147-
label="Out of Order Execution"
148-
clipboardType="out-of-order-execution"
149-
tooltip={
150-
<StyledTooltip tip="Controls the execution order of your messages on the destination blockchain. Setting this to true allows messages to be executed in any order. Setting it to false ensures messages are executed in sequence, so a message will only be executed if the preceding one has been executed. On lanes where 'Out of Order Execution' is required, you must set this to true; otherwise, the transaction will revert." />
151-
}
147+
label="Destination chain selector"
148+
clipboardType="destination-chain-selector"
149+
tooltip={<StyledTooltip tip="Unique identifier for the destination blockchain network." />}
152150
>
153-
{getOutOfOrderText(enforceOutOfOrder)}
151+
<CopyValue value={destinationAddress} />
154152
</DetailItem>
155153
)}
156154
</div>

‎src/components/CCIP/Drawer/Drawer.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@
5252
width: 75%;
5353
}
5454

55+
/* Wide drawer for lane details - full width minus ESC button width and spacing */
56+
.drawer__container--wide {
57+
width: calc(100% - var(--space-12x) - var(--space-8x));
58+
}
59+
5560
.drawer__closeMobile {
5661
display: none;
5762
}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useStore } from "@nanostores/react"
22
import "./Drawer.css"
3-
import { drawerContentStore } from "./drawerStore.ts"
3+
import { drawerContentStore, drawerWidthStore, DrawerWidth } from "./drawerStore.ts"
44
import { useRef, useEffect, useState } from "react"
55
import { clsx } from "~/lib/clsx/clsx.ts"
66
import type { ReactNode } from "react"
@@ -9,6 +9,7 @@ function Drawer() {
99
const drawerRef = useRef<HTMLDivElement>(null)
1010
const drawerContentRef = useRef<HTMLDivElement>(null)
1111
const $drawerContent = useStore(drawerContentStore) as (() => ReactNode) | ReactNode | null
12+
const $drawerWidth = useStore(drawerWidthStore)
1213
const [isOpened, setIsOpened] = useState(false)
1314

1415
// exit when press esc
@@ -47,6 +48,7 @@ function Drawer() {
4748
// Use transitionend event instead of setTimeout for better performance
4849
const handleTransitionEnd = () => {
4950
drawerContentStore.set(null)
51+
drawerWidthStore.set(DrawerWidth.Default)
5052
drawerRef.current?.removeEventListener("transitionend", handleTransitionEnd)
5153
}
5254

@@ -62,7 +64,12 @@ function Drawer() {
6264
ref={drawerRef}
6365
onClick={handleClickOutside}
6466
>
65-
<div className="drawer__container" ref={drawerContentRef}>
67+
<div
68+
className={clsx("drawer__container", {
69+
"drawer__container--wide": $drawerWidth === DrawerWidth.Wide,
70+
})}
71+
ref={drawerContentRef}
72+
>
6673
<div className="drawer__close">
6774
<button id="drawer-exit" onClick={handleClose} aria-label="Close drawer">
6875
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">

0 commit comments

Comments
 (0)