@@ -76,10 +90,16 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
+
+
+
Verifiers ({allVerifiers.length})
+
+
+
@@ -125,11 +145,9 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
@media (min-width: 992px) {
.layout {
--doc-padding: var(--space-10x);
- display: grid;
padding-top: var(--doc-padding);
padding-bottom: var(--doc-padding);
- grid-template-columns: 1fr 1fr;
- gap: var(--space-24x);
+ gap: var(--space-10x);
}
}
diff --git a/src/components/CCIP/RateLimitCell.tsx b/src/components/CCIP/RateLimitCell.tsx
new file mode 100644
index 00000000000..61a4a8c7aa1
--- /dev/null
+++ b/src/components/CCIP/RateLimitCell.tsx
@@ -0,0 +1,46 @@
+import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
+import type { RateLimiterConfig } from "~/lib/ccip/types/index.ts"
+import { formatRateLimit } from "~/lib/ccip/utils/rate-limit-formatter.ts"
+
+interface RateLimitCellProps {
+ isLoading: boolean
+ rateLimit: RateLimiterConfig | null | undefined
+ type: "capacity" | "rate"
+ showUnavailableTooltip?: boolean
+}
+
+/**
+ * Component for displaying rate limit values in table cells
+ * Handles loading, disabled, unavailable, and value states
+ */
+export function RateLimitCell({ isLoading, rateLimit, type, showUnavailableTooltip = false }: RateLimitCellProps) {
+ if (isLoading) {
+ return <>Loading...
+ }
+
+ if (!rateLimit) {
+ if (showUnavailableTooltip) {
+ return (
+
+ Unavailable
+
+
+ )
+ }
+ return <>N/A
+ }
+
+ if (!rateLimit.isEnabled) {
+ return <>Disabled
+ }
+
+ const value = type === "capacity" ? rateLimit.capacity : rateLimit.rate
+ return <>{formatRateLimit(value)}
+}
diff --git a/src/components/CCIP/Search/Search.css b/src/components/CCIP/Search/Search.css
index 1134619167d..484a9e80960 100644
--- a/src/components/CCIP/Search/Search.css
+++ b/src/components/CCIP/Search/Search.css
@@ -33,6 +33,10 @@
outline: none;
}
+.ccip-hero__search input::placeholder {
+ font-style: normal;
+}
+
.ccip-hero__search input::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
diff --git a/src/components/CCIP/Search/Search.tsx b/src/components/CCIP/Search/Search.tsx
index f869bf20860..7d908596af7 100644
--- a/src/components/CCIP/Search/Search.tsx
+++ b/src/components/CCIP/Search/Search.tsx
@@ -4,7 +4,7 @@ import { clsx } from "~/lib/clsx/clsx.ts"
import { useClickOutside } from "~/hooks/useClickOutside.tsx"
import { Environment, LaneConfig, LaneFilter } from "~/config/data/ccip/types.ts"
import { directoryToSupportedChain, getExplorer, fallbackTokenIconUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
import LaneDrawer from "../Drawer/LaneDrawer.tsx"
import { ChainType, ExplorerInfo } from "~/config/types.ts"
import type { WorkerMessage, WorkerResponse } from "~/workers/data-worker.ts"
@@ -38,11 +38,18 @@ interface SearchProps {
}
lane: LaneConfig
}[]
+ verifiers?: {
+ id: string
+ name: string
+ type: string
+ logo: string
+ totalNetworks: number
+ }[]
small?: boolean
environment: Environment
}
-function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
+function Search({ chains, tokens, small, environment, lanes, verifiers = [] }: SearchProps) {
const [search, setSearch] = useState("")
const [debouncedSearch, setDebouncedSearch] = useState("")
const [openSearchMenu, setOpenSearchMenu] = useState(false)
@@ -50,6 +57,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
const [networksResults, setNetworksResults] = useState
([])
const [tokensResults, setTokensResults] = useState([])
const [lanesResults, setLanesResults] = useState([])
+ const [verifiersResults, setVerifiersResults] = useState([])
const searchRef = useRef(null)
const workerRef = useRef(null)
const workerReadyRef = useRef(false)
@@ -59,10 +67,11 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
if (workerReadyRef.current || typeof window === "undefined") return
workerRef.current = new Worker(new URL("~/workers/data-worker.ts", import.meta.url), { type: "module" })
workerRef.current.onmessage = (event: MessageEvent) => {
- const { networks, tokens: workerTokens, lanes: workerLanes } = event.data
+ const { networks, tokens: workerTokens, lanes: workerLanes, verifiers: workerVerifiers } = event.data
setNetworksResults(networks || [])
setTokensResults(workerTokens || [])
setLanesResults(workerLanes || [])
+ setVerifiersResults(workerVerifiers || [])
}
workerReadyRef.current = true
}
@@ -90,6 +99,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
setNetworksResults([])
setTokensResults([])
setLanesResults([])
+ setVerifiersResults([])
return
}
@@ -102,11 +112,12 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
chains,
tokens,
lanes,
+ verifiers,
},
}
workerRef.current.postMessage(message)
}
- }, [debouncedSearch, chains, tokens, lanes])
+ }, [debouncedSearch, chains, tokens, lanes, verifiers])
// Handle menu visibility
useEffect(() => {
@@ -146,7 +157,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
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) {
diff --git a/src/components/CCIP/SeeMore/SeeMore.css b/src/components/CCIP/SeeMore/SeeMore.css
index 8c4c9209c51..102d96cf4b1 100644
--- a/src/components/CCIP/SeeMore/SeeMore.css
+++ b/src/components/CCIP/SeeMore/SeeMore.css
@@ -7,6 +7,6 @@
}
.seeMore__container {
display: flex;
- justify-content: center;
+ justify-content: flex-start;
align-items: center;
}
diff --git a/src/components/CCIP/SeeMore/SeeMore.tsx b/src/components/CCIP/SeeMore/SeeMore.tsx
index 3e0b7c17278..cab963897c7 100644
--- a/src/components/CCIP/SeeMore/SeeMore.tsx
+++ b/src/components/CCIP/SeeMore/SeeMore.tsx
@@ -1,14 +1,22 @@
import "./SeeMore.css"
interface SeeMoreProps {
onClick?: () => void
+ label?: string
+ href?: string
}
-function SeeMore({ onClick }: SeeMoreProps) {
+function SeeMore({ onClick, label = "See more", href }: SeeMoreProps) {
return (
)
}
diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index d487faf20ee..7ab6c7c559e 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -4,7 +4,7 @@ import Tabs from "./Tabs.tsx"
import TableSearchInput from "./TableSearchInput.tsx"
import { useEffect, useState } from "react"
import { getExplorerAddressUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
import LaneDrawer from "../Drawer/LaneDrawer.tsx"
import { Environment, Version, LaneFilter } from "~/config/data/ccip/types.ts"
import { getLane } from "~/config/data/ccip/data.ts"
@@ -68,9 +68,6 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
onChange={(key) => setInOutbound(key as LaneFilter)}
/>
+ {text}
+
- Add my token
-
+