Skip to content

Commit c129b5f

Browse files
markshenoudamarkshenouda
committed
Merge remote-tracking branch 'origin/ccip-1-7' into verifiers-page
2 parents b2133eb + fed6a73 commit c129b5f

File tree

18 files changed

+246
-112
lines changed

18 files changed

+246
-112
lines changed

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

Lines changed: 9 additions & 2 deletions
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
}
55

@@ -16,6 +16,12 @@
1616
margin: 0;
1717
font-size: 28px;
1818
font-weight: 500;
19+
display: flex;
20+
align-items: center;
21+
gap: 8px;
22+
position: relative;
23+
overflow: visible;
24+
line-height: var(--space-6x);
1925
}
2026

2127
.ccip-chain-hero__heading img {
@@ -120,7 +126,8 @@
120126
.ccip-chain-hero__token-logo__symbol {
121127
font-weight: 500;
122128
font-size: 18px;
123-
color: var(--gray-700);
129+
color: var(--Page-Foreground-Muted, #6c7585);
130+
align-self: self-end;
124131
}
125132

126133
.ccip-chain-hero__feeTokens__list {

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,9 @@ function ChainHero({ chains, tokens, network, token, environment, lanes, breadcr
134134
currentTarget.src = fallbackTokenIconUrl
135135
}}
136136
/>
137-
<h1
138-
style={{
139-
display: "flex",
140-
alignItems: "center",
141-
gap: "8px",
142-
position: "relative",
143-
overflow: "visible",
144-
}}
145-
>
146-
{network?.name || token?.id}
147-
<span className="ccip-chain-hero__token-logo__symbol">{token?.name}</span>
137+
<h1>
138+
{network?.name || token?.name}
139+
<span className="ccip-chain-hero__token-logo__symbol">{token?.id}</span>
148140

149141
{chainTooltipConfig && (
150142
<Tooltip

‎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)