+ {text}
+
+ {text}
+
+
+
diff --git a/src/components/CCIP/Cards/Card.css b/src/components/CCIP/Cards/Card.css
new file mode 100644
index 00000000000..bb77dae5555
--- /dev/null
+++ b/src/components/CCIP/Cards/Card.css
@@ -0,0 +1,40 @@
+.card__container {
+ 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);
+ /* Optimize rendering performance */
+ contain: layout style paint;
+ will-change: background-color;
+}
+
+.card__container:hover {
+ background-color: var(--gray-50);
+}
+
+.card__container img,
+.card__container object,
+.card__container object img {
+ width: var(--space-10x);
+ height: var(--space-10x);
+ margin-top: auto;
+ margin-bottom: auto;
+}
+
+.card__container h3 {
+ font-size: var(--space-4x);
+ font-weight: var(--font-weight-medium);
+ line-height: var(--space-6x);
+ color: var(--gray-950);
+ margin-bottom: var(--space-1x);
+}
+
+.card__container p {
+ margin-bottom: 0;
+ font-size: var(--space-3x);
+ line-height: var(--space-5x);
+ color: var(--gray-500);
+}
diff --git a/src/components/CCIP/Cards/Card.tsx b/src/components/CCIP/Cards/Card.tsx
new file mode 100644
index 00000000000..669bd9155ff
--- /dev/null
+++ b/src/components/CCIP/Cards/Card.tsx
@@ -0,0 +1,43 @@
+import { memo, type ReactNode } from "react"
+import "./Card.css"
+
+interface CardProps {
+ logo: ReactNode
+ title: string
+ subtitle?: string
+ link?: string
+ onClick?: () => void
+ ariaLabel?: string
+}
+
+const Card = memo(function Card({ logo, title, subtitle, link, onClick, ariaLabel }: CardProps) {
+ const content = (
+ <>
+ {logo}
+ {subtitle}
} +- {totalLanes} {totalLanes > 1 ? "lanes" : "lane"} | {totalTokens} {totalTokens > 1 ? "tokens" : "token"} -
-{subtitle}
}
- Add my token
-
+ | {inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network | -
- Rate limit capacity
- |
-
- Rate limit refill rate
- |
-
- Mechanism
- |
- {/* Status | */} -|||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Verifier | +Verifier address | +Verifier type | +Threshold amount | +|||
|---|---|---|---|---|---|---|
| + No verifiers configured + | +||||||
| - | -- {/* TODO: Fetch rate limits from API for both inbound and outbound - GET /api/ccip/v1/lanes/by-internal-id/{source}/{destination}/supported-tokens?environment={environment} - Response will contain both standard and custom rate limits per token */} - Disabled + {verifier.name} + | - {/* TODO: Fetch rate limits from API for both inbound and outbound - Display refill rate from standard.in/out or custom.in/out based on inOutbound filter */} - Disabled + | -- {inOutbound === LaneFilter.Outbound - ? determineTokenMechanism(network.tokenPoolType, destinationPoolType) - : determineTokenMechanism(destinationPoolType, network.tokenPoolType)} - | - {/*+ | {getVerifierTypeDisplay(verifier.type)} | +N/A | +
| {activeTab === TokenTab.Inbound ? "Source" : "Destination"} network | +
+ Rate limit capacity
+ |
+
+ Rate limit refill rate
+ |
+ FTF Rate limit capacity | +FTF Rate limit refill rate | +
+ Mechanism
+ |
+ {/* Status | */} +
|---|---|---|---|---|---|---|
| + + | +
+ |
+
+ |
+
+ |
+
+ |
+ + {activeTab === TokenTab.Outbound + ? determineTokenMechanism(network.tokenPoolType, destinationPoolType) + : determineTokenMechanism(destinationPoolType, network.tokenPoolType)} + | + {/**/} - |
setSearch(e.target.value)}
onFocus={() => {
@@ -154,7 +165,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
ensureWorker()
}}
onBlur={() => setIsActive(false)}
- aria-label="Search networks, tokens, and lanes"
+ aria-label="Search networks, tokens, lanes, and verifiers"
aria-describedby={openSearchMenu ? "search-results" : undefined}
/>
{openSearchMenu && (
@@ -167,9 +178,12 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
aria-live="polite"
aria-label="Search results"
>
- {networksResults.length === 0 && tokensResults.length === 0 && (
- No results found
- )}
+ {networksResults.length === 0 &&
+ tokensResults.length === 0 &&
+ lanesResults.length === 0 &&
+ verifiersResults.length === 0 && (
+ No results found
+ )}
{networksResults.length > 0 && (
<>
Networks
@@ -236,7 +250,8 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
| Verifier | +Network | +Verifier address | +Verifier type | +
|---|---|---|---|
|
+
+
+
+ |
+
+
+
+
+ |
+ + + | +{getVerifierTypeDisplay(verifier.type)} | +
{title}
+{description}
+
+
diff --git a/src/components/Cards/CardsWrapper.astro b/src/components/Cards/CardsWrapper.astro
new file mode 100644
index 00000000000..cb91045a25d
--- /dev/null
+++ b/src/components/Cards/CardsWrapper.astro
@@ -0,0 +1,15 @@
+---
+import Card from "./Card.astro"
+import styles from "./cards.module.css"
+import { ICard } from "./types.ts"
+
+interface Props {
+ links: ICard[]
+}
+
+const { links } = Astro.props
+---
+
+
+