diff --git a/src/components/CCIP/Cards/NetworkCard.css b/src/components/CCIP/Cards/NetworkCard.css index ca133e32929..70446a6e715 100644 --- a/src/components/CCIP/Cards/NetworkCard.css +++ b/src/components/CCIP/Cards/NetworkCard.css @@ -2,7 +2,7 @@ display: flex; padding: var(--space-6x); gap: var(--space-3x); - + width: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--space-1x); diff --git a/src/components/CCIP/Cards/TokenCard.css b/src/components/CCIP/Cards/TokenCard.css index 533203d5437..5650d6efb67 100644 --- a/src/components/CCIP/Cards/TokenCard.css +++ b/src/components/CCIP/Cards/TokenCard.css @@ -1,7 +1,8 @@ .token-card__container { display: flex; - width: 137px; - height: 124px; + width: 100%; + height: 110px; + margin: 0 auto; flex-direction: column; align-items: center; text-align: center; @@ -38,3 +39,9 @@ text-overflow: ellipsis; /* Add ellipsis (…) when the text is truncated */ width: 200px; /* Adjust the width as needed */ } + +@media (min-width: 992px) { + .token-card__container { + height: 124px; + } +} diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro index 681037ee6b7..8786f5a537b 100644 --- a/src/components/CCIP/Chain/Chain.astro +++ b/src/components/CCIP/Chain/Chain.astro @@ -48,13 +48,20 @@ const searchLanes = getSearchLanes({ environment }) - +
.layout { --gutter: var(--space-6x); - --doc-padding: 2rem; + --doc-padding: var(--space-6x); margin: var(--space-8x) auto; - display: grid; - grid-template-columns: 1fr; + display: flex; + flex-direction: column; gap: var(--gutter); padding: var(--doc-padding); } @@ -89,7 +96,6 @@ const searchLanes = getSearchLanes({ environment }) .ccip-heading { display: flex; padding-bottom: var(--space-4x); - border-bottom: 1px solid var(--gray-200); margin-bottom: var(--space-6x); justify-content: space-between; } @@ -110,13 +116,13 @@ const searchLanes = getSearchLanes({ environment }) .networks__grid { display: grid; grid-template-columns: 1fr; - gap: var(--space-8x); + gap: var(--space-2x); } .tokens__grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-8x); + grid-template-columns: 32% 32% 32%; + gap: var(--space-2x); } @media (min-width: 50em) { @@ -127,6 +133,7 @@ const searchLanes = getSearchLanes({ environment }) @media (min-width: 992px) { .layout { + display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24x); } @@ -142,5 +149,9 @@ const searchLanes = getSearchLanes({ environment }) grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-4x); } + + .ccip-heading { + border-bottom: 1px solid var(--gray-200); + } } diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index 8caa8ca4d74..b196d6a5c2d 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -36,13 +36,10 @@ } .ccip-chain-hero__content { - --gutter: var(--space-10x); - --doc-padding: 2rem; + --gutter: var(--space-6x); + --doc-padding: var(--space-6x); gap: var(--gutter); - padding-left: var(--space-4x); - padding-right: var(--space-4x); - padding-top: var(--space-10x); - padding-bottom: var(--space-10x); + padding: var(--space-6x); margin: 0 auto; display: flex; flex-direction: column; @@ -54,19 +51,20 @@ .ccip-chain-hero__top { display: flex; + flex-direction: column-reverse; justify-content: space-between; - align-items: center; - gap: var(--space-16x); + align-items: start; + gap: var(--space-6x); } .ccip-chain-hero__chainSearch { - width: 358px; + width: 100%; } .ccip-chain-hero__details { display: grid; - gap: var(--space-4x); - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: var(--space-6x); + grid-template-columns: 1fr; } .ccip-chain-hero__details__label { @@ -76,18 +74,20 @@ font-weight: 600; font-size: 14px; line-height: 22px; - padding-bottom: var(--space-4x); + padding-bottom: var(--space-2x); color: var(--gray-500); } .ccip-chain-hero__feeTokens__list { display: flex; - align-items: center; - gap: var(--space-20x); + align-items: start; + flex-direction: column; + gap: var(--space-4x); } .ccip-chain-hero__feeTokens__item { display: flex; + align-items: center; gap: var(--space-2x); color: var(--gray-900); @@ -137,7 +137,29 @@ } @media (min-width: 992px) { + .ccip-chain-hero__top { + flex-direction: row; + gap: var(--space-16x); + align-items: center; + } + + .ccip-chain-hero__chainSearch { + width: 358px; + } + + .ccip-chain-hero__details { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: var(--space-4x); + } + + .ccip-chain-hero__feeTokens__list { + align-items: center; + flex-direction: row; + gap: var(--space-20x); + } + .ccip-chain-hero__content { + --gutter: var(--space-10x); grid-template-columns: 1fr 1fr; padding-left: var(--space-10x); padding-right: var(--space-10x); diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css index cd58f44478a..9ac4d70c002 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.css +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css @@ -1,6 +1,6 @@ .lane-details-hero { background-color: var(--gray-100); - padding: var(--space-4x) var(--space-6x); + padding: var(--space-6x); border-bottom: 1px solid var(--gray-200); } @@ -15,15 +15,20 @@ .lane-details-hero__networks { display: flex; - align-items: center; + flex-direction: column; + align-items: start; gap: var(--space-6x); - font-style: normal; font-weight: var(--font-weight-medium); font-size: 28px; margin: var(--space-10x) 0; } +.lane-details-hero__networks svg { + transform: rotate(90deg); + margin-left: var(--space-4x); +} + .lane-details-hero__network { display: flex; align-items: center; @@ -63,4 +68,14 @@ .lane-details-hero__details { grid-template-columns: 1fr 2fr; } + + .lane-details-hero__networks { + flex-direction: row; + align-items: center; + } + + .lane-details-hero__networks svg { + transform: rotate(0deg); + margin-left: 0; + } } diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css index 3f0566ca6cc..bd8fb9c0a38 100644 --- a/src/components/CCIP/Drawer/Drawer.css +++ b/src/components/CCIP/Drawer/Drawer.css @@ -31,6 +31,7 @@ .drawer__content { overflow-y: auto; + height: 100%; } .drawer__open .drawer__container { diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx index 4905d8072fd..e5cc3889d50 100644 --- a/src/components/CCIP/Drawer/Drawer.tsx +++ b/src/components/CCIP/Drawer/Drawer.tsx @@ -73,7 +73,7 @@ function Drawer() { - {typeof $drawerContent === "function" ? $drawerContent() : $drawerContent} +
{typeof $drawerContent === "function" ? $drawerContent() : $drawerContent}
diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index dcb7ece1cf5..d8975861ab3 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -67,112 +67,114 @@ function LaneDrawer({ -
- - - - - - - - - - - - {lane.supportedTokens && - Object.keys(lane.supportedTokens) - ?.filter((token) => token.toLowerCase().includes(search.toLowerCase())) - .map((token, index) => { - const data = getTokenData({ - environment, - version: Version.V1_2_0, - tokenSymbol: token || "", - }) - if (!Object.keys(data).length) return null - const logo = getTokenIconUrl(token) - return ( - - - - - - - - + + + + + + + ) + })} + +
TickerToken address (Source)DecimalsMechanism - Rate limit capacity - - - Rate limit refil rate - -
- -
- {`${token} { - currentTarget.onerror = null // prevents looping - currentTarget.src = fallbackTokenIconUrl - }} - /> - {token} -
- - 		-
-
{data[sourceNetwork.key].decimals}{data[sourceNetwork.key].poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} - {lane.supportedTokens && - displayCapacity( - String( - lane.supportedTokens[token]?.rateLimiterConfig?.[ - inOutbound === LaneFilter.Inbound ? "in" : "out" - ]?.capacity || 0 - ), - data[sourceNetwork.key].decimals - )}{" "} - {token} - - {lane.supportedTokens && ( - + + + + + + + + + + + + + {lane.supportedTokens && + Object.keys(lane.supportedTokens) + ?.filter((token) => token.toLowerCase().includes(search.toLowerCase())) + .map((token, index) => { + const data = getTokenData({ + environment, + version: Version.V1_2_0, + tokenSymbol: token || "", + }) + if (!Object.keys(data).length) return null + const logo = getTokenIconUrl(token) + return ( + + + - - ) - })} - -
TickerToken address (Source)DecimalsMechanism + Rate limit capacity + + + Rate limit refil rate + +
+ +
+ {`${token} { + currentTarget.onerror = null // prevents looping + currentTarget.src = fallbackTokenIconUrl + }} + /> + {token} +
+ + 		+
- )} -
+ 		{data[sourceNetwork.key].decimals}{data[sourceNetwork.key].poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} + {lane.supportedTokens && + displayCapacity( + String( + lane.supportedTokens[token]?.rateLimiterConfig?.[ + inOutbound === LaneFilter.Inbound ? "in" : "out" + ]?.capacity || 0 + ), + data[sourceNetwork.key].decimals + )}{" "} + {token} + + {lane.supportedTokens && ( + + )} +
+
{lane.supportedTokens && Object.keys(lane.supportedTokens)?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx index 32c29624805..bac80ebe6db 100644 --- a/src/components/CCIP/Drawer/TokenDrawer.tsx +++ b/src/components/CCIP/Drawer/TokenDrawer.tsx @@ -84,122 +84,124 @@ function TokenDrawer({
- - - - - - - - {/* */} - - - - {Object.keys(destinationLanes) - ?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) - .map((lane, index) => { - const networkDetails = getNetwork({ - filter: environment, - chain: lane, - }) - const laneData = getLane({ - sourceChain: network?.key as SupportedChain, - destinationChain: lane as SupportedChain, - environment, - version: Version.V1_2_0, - }) +
+ {" "} +
{inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network - Rate limit capacity - - - Rate limit refil rate - - - Mechanism - - Status
+ + + + + + + {/* */} + + + + {Object.keys(destinationLanes) + ?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) + .map((lane, index) => { + const networkDetails = getNetwork({ + filter: environment, + chain: lane, + }) + const laneData = getLane({ + sourceChain: network?.key as SupportedChain, + destinationChain: lane as SupportedChain, + environment, + version: Version.V1_2_0, + }) - if (!laneData) return null + if (!laneData) return null - return ( - - - - - - {/* + + + + + {/* */} - - ) - })} - -
{inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network + Rate limit capacity + + + Rate limit refil rate + + + Mechanism + + Status
-
{ - drawerContentStore.set(() => ( - - )) - }} - > - {networkDetails?.name} - {networkDetails?.name} -
- 		- {displayCapacity( - String( - destinationLanes[lane].rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"] - ?.capacity || 0 - ), - network.decimals - )}{" "} - {token.name} - - - {network.tokenPoolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} + return ( +
+
{ + drawerContentStore.set(() => ( + + )) + }} + > + {networkDetails?.name} + {networkDetails?.name} +
+ 		+ {displayCapacity( + String( + destinationLanes[lane].rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"] + ?.capacity || 0 + ), + network.decimals + )}{" "} + {token.name} + + + {network.tokenPoolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"}
+ + ) + })} + + + +
{Object.keys(destinationLanes)?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())).length === 0 && <>No lanes found} diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro index 55f43b3ee62..c525a1f4a33 100644 --- a/src/components/CCIP/Landing/ccip-landing.astro +++ b/src/components/CCIP/Landing/ccip-landing.astro @@ -42,7 +42,6 @@ const searchLanes = getSearchLanes({ environment }) --- -
@@ -88,11 +87,10 @@ const searchLanes = getSearchLanes({ environment })