From a5bf88a89ab3e38ff1574e73657129ab29eb7b63 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 07:56:43 +0200 Subject: [PATCH 1/7] update the panel width --- src/components/CCIP/Drawer/Drawer.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css index f42721fad1d..a928a5001a5 100644 --- a/src/components/CCIP/Drawer/Drawer.css +++ b/src/components/CCIP/Drawer/Drawer.css @@ -48,8 +48,9 @@ } @media (min-width: 768px) { + /* Full width minus ESC button width (--space-12x) and spacing (--space-8x for gaps on both sides) */ .drawer__container { - width: 75%; + width: calc(100% - var(--space-12x) - var(--space-8x)); } .drawer__closeMobile { From 35a23386b2147c9dfc2559aeca9f6c3601a4ae57 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 08:07:34 +0200 Subject: [PATCH 2/7] change the colors of the headers and heros to the new color --- src/components/CCIP/ChainHero/ChainHero.css | 2 +- src/components/CCIP/ChainHero/LaneDetailsHero.css | 2 +- src/components/CCIP/Hero/Hero.css | 2 +- src/components/CCIP/Tables/Table.css | 1 + src/styles/index.css | 3 +++ 5 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index 34c38f7ae17..7d7ce722c95 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -1,5 +1,5 @@ .ccip-chain-hero { - background-color: var(--gray-100); + background: var(--Page-Background-Alt); border-bottom: 1px solid var(--gray-200); min-height: 241px; } diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css index 706ee384876..1f24319e613 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.css +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css @@ -1,5 +1,5 @@ .lane-details-hero { - background-color: var(--gray-100); + background: var(--Page-Background-Alt); padding: var(--space-6x); border-bottom: 1px solid var(--gray-200); } diff --git a/src/components/CCIP/Hero/Hero.css b/src/components/CCIP/Hero/Hero.css index f8d0c61579a..57bc1db56aa 100644 --- a/src/components/CCIP/Hero/Hero.css +++ b/src/components/CCIP/Hero/Hero.css @@ -1,5 +1,5 @@ .ccip-hero { - background-color: var(--gray-100); + background: var(--Page-Background-Alt); border-bottom: 1px solid var(--gray-200); } diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index b2207a0db75..fd042a84688 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -139,6 +139,7 @@ padding: var(--space-2x); color: var(--gray-900); margin-bottom: 0px; + background: var(--Page-Background-Alt); } .ccip-table__filters { diff --git a/src/styles/index.css b/src/styles/index.css index c282cc9327f..805359ae635 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -24,6 +24,9 @@ --user-font-scale: 1rem - 16px; --max-width: calc(100%); --fullwidth-max-width: calc(100% - 1rem); + + /* Page background and border colors */ + --Page-Background-Alt: #fafbfc; } /* Fonts provided via centralized design system/CDN; no local @font-face overrides here. */ From ac3771e6188c369ac989a0a4bd339ff372d47483 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 08:17:09 +0200 Subject: [PATCH 3/7] fix layout on lane panel hero --- .../CCIP/ChainHero/LaneDetailsHero.css | 17 ++++++++++------- .../CCIP/ChainHero/LaneDetailsHero.tsx | 4 ++-- src/components/CCIP/Drawer/LaneDrawer.tsx | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css index 1f24319e613..4bfbe4134b2 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.css +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css @@ -42,9 +42,16 @@ } .lane-details-hero__details { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-6x); + display: flex; + flex-wrap: wrap; + gap: var(--space-10x); +} + +.lane-details-hero__details__item { + display: flex; + flex-direction: column; + gap: var(--space-4x); + min-width: var(--space-45x); } .lane-details-hero__details__label { @@ -61,10 +68,6 @@ padding: var(--space-6x) var(--space-10x) var(--space-10x); } - .lane-details-hero__details { - grid-template-columns: 1fr 2fr; - } - .lane-details-hero__networks { flex-direction: row; align-items: center; diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx index 8c96ef2fde5..c6c4baaee4d 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx @@ -69,13 +69,13 @@ const DetailItem = ({ clipboardType?: string tooltip?: React.ReactNode }) => ( - <> +
{label} {tooltip}
{children}
- +
) function LaneDetailsHero({ diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index cfc602ea850..d7ef6d2b91d 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -39,7 +39,7 @@ function LaneDrawer({ return ( <> -

Lane details

+

Lane Details

Date: Thu, 4 Dec 2025 08:23:16 +0200 Subject: [PATCH 4/7] update the lane details hero with the correct items --- .../CCIP/ChainHero/LaneDetailsHero.tsx | 77 ++++++++----------- src/components/CCIP/Drawer/LaneDrawer.tsx | 2 +- 2 files changed, 35 insertions(+), 44 deletions(-) diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx index c6c4baaee4d..e92763ee216 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx @@ -19,8 +19,8 @@ interface LaneDetailsHeroProps { } onRamp: string offRamp: string + sourceAddress: string destinationAddress: string - enforceOutOfOrder?: boolean explorer: ExplorerInfo inOutbound: LaneFilter } @@ -83,17 +83,11 @@ function LaneDetailsHero({ destinationNetwork, onRamp, offRamp, + sourceAddress, destinationAddress, - enforceOutOfOrder, explorer, inOutbound, }: LaneDetailsHeroProps) { - // Map boolean values to display strings - const getOutOfOrderText = (value?: boolean) => { - if (value === true) return "Required" - if (value === false) return "Optional" - return "N/A" - } return (
@@ -115,44 +109,41 @@ function LaneDetailsHero({
- {/* Display address information based on lane type */} - {inOutbound === LaneFilter.Inbound ? ( - - - - ) : ( - : undefined} - > - - - )} + : undefined} + > + + - - {destinationAddress ? : "n/a"}{" "} + + - {inOutbound === LaneFilter.Outbound && ( - - } - > - {getOutOfOrderText(enforceOutOfOrder)} - - )} + } + > + {sourceAddress ? : "n/a"} + + + } + > + {destinationAddress ? : "n/a"} +
) diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index d7ef6d2b91d..891b0a06e5c 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -53,8 +53,8 @@ function LaneDrawer({ }} onRamp={lane.onRamp.address} offRamp={lane.offRamp.address} - enforceOutOfOrder={lane.onRamp.enforceOutOfOrder} explorer={explorer} + sourceAddress={sourceNetworkDetails?.chainSelector || ""} destinationAddress={destinationNetworkDetails?.chainSelector || ""} inOutbound={inOutbound} /> From ffa0c329ab0398b0bdd171f677645bfc880b1b95 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 08:32:35 +0200 Subject: [PATCH 5/7] update lane table header --- src/components/CCIP/Drawer/LaneDrawer.tsx | 112 ++++++++++++++++------ 1 file changed, 85 insertions(+), 27 deletions(-) diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index 891b0a06e5c..f32e3ffebe3 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -73,7 +73,7 @@ function LaneDrawer({ Ticker - Token address (Source) + Source token address Decimals Mechanism @@ -91,34 +91,84 @@ function LaneDrawer({ /> - Rate limit capacity - +
+ Rate limit capacity + +
+
+ (Tokens) +
- Rate limit refill rate - +
+ Rate limit refill rate + +
+
+ (Tokens/sec) +
+ + +
+ FTF Rate limit capacity + +
+
+ (Tokens) +
+ + +
+ FTF Rate limit refill rate + +
+
+ (Tokens/sec) +
@@ -209,6 +259,14 @@ function LaneDrawer({ /> )} + + {/* Placeholder for FTF Rate limit capacity - data not yet available */} + - + + + {/* Placeholder for FTF Rate limit refill rate - data not yet available */} + - + ) })} From 0e7423ef96552ff98f408074ce305f5bd9c0fbab Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 08:45:34 +0200 Subject: [PATCH 6/7] add unavailable and tooltip instead of N/A in lane table --- src/components/CCIP/Drawer/LaneDrawer.tsx | 33 ++++++++++++++++----- src/components/CCIP/Tooltip/RateTooltip.tsx | 19 ++++++++++++ 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index f32e3ffebe3..766eafc6a16 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -240,13 +240,31 @@ function LaneDrawer({ {lane.supportedTokens && - displayCapacity( - data[sourceNetwork.key].decimals, - token, - lane.supportedTokens[token]?.rateLimiterConfig?.[ - inOutbound === LaneFilter.Inbound ? "in" : "out" - ] - )} + (() => { + const capacity = displayCapacity( + data[sourceNetwork.key].decimals, + token, + lane.supportedTokens[token]?.rateLimiterConfig?.[ + inOutbound === LaneFilter.Inbound ? "in" : "out" + ] + ) + return capacity === "N/A" ? ( + + ) : ( + capacity + ) + })()} {lane.supportedTokens && ( @@ -256,6 +274,7 @@ function LaneDrawer({ symbol={token} decimals={data[sourceNetwork.key].decimals} position="left" + showUnavailableText={true} /> )} diff --git a/src/components/CCIP/Tooltip/RateTooltip.tsx b/src/components/CCIP/Tooltip/RateTooltip.tsx index 836644ab53d..78b6c948d9c 100644 --- a/src/components/CCIP/Tooltip/RateTooltip.tsx +++ b/src/components/CCIP/Tooltip/RateTooltip.tsx @@ -7,14 +7,33 @@ function RateTooltip({ symbol, decimals, position, + showUnavailableText = false, }: { destinationLane: SupportedTokenConfig inOutbound: LaneFilter symbol: string decimals: number position?: "top" | "bottom" | "left" | "right" + showUnavailableText?: boolean }) { if (!destinationLane.rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"]?.isEnabled) { + if (showUnavailableText) { + return ( + + ) + } return N/A } const { rateSecond, maxThroughput } = displayRate( From 1d73874689c539518e4e2943f7359c95d1ddb610 Mon Sep 17 00:00:00 2001 From: Mark Shenouda Date: Thu, 4 Dec 2025 08:54:35 +0200 Subject: [PATCH 7/7] add support for wide drawer layout in CCIP components --- src/components/CCIP/Drawer/Drawer.css | 6 +++++- src/components/CCIP/Drawer/Drawer.tsx | 11 +++++++++-- src/components/CCIP/Drawer/TokenDrawer.tsx | 3 ++- src/components/CCIP/Drawer/drawerStore.ts | 6 ++++++ src/components/CCIP/Search/Search.tsx | 7 ++++--- src/components/CCIP/Tables/ChainTable.tsx | 3 ++- 6 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css index a928a5001a5..0b8d48a4d6a 100644 --- a/src/components/CCIP/Drawer/Drawer.css +++ b/src/components/CCIP/Drawer/Drawer.css @@ -48,8 +48,12 @@ } @media (min-width: 768px) { - /* Full width minus ESC button width (--space-12x) and spacing (--space-8x for gaps on both sides) */ .drawer__container { + width: 75%; + } + + /* Wide drawer for lane details - full width minus ESC button width and spacing */ + .drawer__container--wide { width: calc(100% - var(--space-12x) - var(--space-8x)); } diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx index 9120bb98b0f..7846947b9dc 100644 --- a/src/components/CCIP/Drawer/Drawer.tsx +++ b/src/components/CCIP/Drawer/Drawer.tsx @@ -1,6 +1,6 @@ import { useStore } from "@nanostores/react" import "./Drawer.css" -import { drawerContentStore } from "./drawerStore.ts" +import { drawerContentStore, drawerWidthStore, DrawerWidth } from "./drawerStore.ts" import { useRef, useEffect, useState } from "react" import { clsx } from "~/lib/clsx/clsx.ts" import type { ReactNode } from "react" @@ -9,6 +9,7 @@ function Drawer() { const drawerRef = useRef(null) const drawerContentRef = useRef(null) const $drawerContent = useStore(drawerContentStore) as (() => ReactNode) | ReactNode | null + const $drawerWidth = useStore(drawerWidthStore) const [isOpened, setIsOpened] = useState(false) // exit when press esc @@ -47,6 +48,7 @@ function Drawer() { // Use transitionend event instead of setTimeout for better performance const handleTransitionEnd = () => { drawerContentStore.set(null) + drawerWidthStore.set(DrawerWidth.Default) drawerRef.current?.removeEventListener("transitionend", handleTransitionEnd) } @@ -62,7 +64,12 @@ function Drawer() { ref={drawerRef} onClick={handleClickOutside} > -
+