[FEAT] API Data integration

src/components/CCIP/Cards/TokenCard.css

@@ -51,3 +51,58 @@
     height: 124px;
   }
 }
+
+/* Square variant styles */
+.token-card__square-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6x);
+  width: 100%;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--space-1x);
+  text-align: center;
+}
+
+.token-card__square-container:hover {
+  background-color: var(--gray-50);
+}
+
+.token-card__square-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--space-4x);
+}
+
+.token-card__square-logo object,
+.token-card__square-logo object img {
+  width: var(--space-16x);
+  height: var(--space-16x);
+  border-radius: 50%;
+}
+
+.token-card__square-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.token-card__square-content 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);
+  text-align: center;
+}
+
+.token-card__square-content p {
+  margin-bottom: 0;
+  font-size: var(--space-3x);
+  line-height: var(--space-5x);
+  color: var(--gray-500);
+  text-align: center;
+}

src/components/CCIP/Cards/TokenCard.tsx

@@ -9,9 +9,17 @@ interface TokenCardProps {
   link?: string
   onClick?: () => void
   totalNetworks?: number
+  variant?: "default" | "square"
 }
 
-const TokenCard = memo(function TokenCard({ id, logo, link, onClick, totalNetworks }: TokenCardProps) {
+const TokenCard = memo(function TokenCard({
+  id,
+  logo,
+  link,
+  onClick,
+  totalNetworks,
+  variant = "default",
+}: TokenCardProps) {
   const logoElement = (
     <object data={logo} type="image/png" aria-label={`${id} token logo`}>
       <img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
@@ -21,6 +29,41 @@ const TokenCard = memo(function TokenCard({ id, logo, link, onClick, totalNetwor
   const subtitle =
     totalNetworks !== undefined ? `${totalNetworks} ${totalNetworks === 1 ? "network" : "networks"}` : undefined
 
+  if (variant === "square") {
+    const content = (
+      <>
+        <div className="token-card__square-logo">{logoElement}</div>
+        <div className="token-card__square-content">
+          <h3>{id}</h3>
+          {subtitle && <p>{subtitle}</p>}
+        </div>
+      </>
+    )
+
+    if (link) {
+      return (
+        <a href={link} aria-label={`View ${id} token details`}>
+          <div className="token-card__square-container">{content}</div>
+        </a>
+      )
+    }
+
+    if (onClick) {
+      return (
+        <button
+          type="button"
+          className="token-card__square-container"
+          onClick={onClick}
+          aria-label={`View ${id} token details`}
+        >
+          {content}
+        </button>
+      )
+    }
+
+    return <div className="token-card__square-container">{content}</div>
+  }
+
   return (
     <Card
       logo={logoElement}

src/components/CCIP/Chain/Chain.astro

@@ -6,6 +6,7 @@ import {
   Network,
   getAllNetworkLanes,
   getAllNetworks,
+  getAllUniqueVerifiers,
   getSearchLanes,
   getTokensOfChain,
   Version,
@@ -49,6 +50,11 @@ const lanes = await getAllNetworkLanes({
 
 const searchLanes = getSearchLanes({ environment })
 
+const allVerifiers = getAllUniqueVerifiers({
+  environment,
+  version: Version.V1_2_0,
+})
+
 // Generate dynamic metadata for this specific chain
 const environmentText = environment === Environment.Mainnet ? "Mainnet" : "Testnet"
 const logoPath = network.logo || ""
@@ -107,6 +113,7 @@ const chainStructuredData = generateChainStructuredData(
     network={network}
     environment={environment}
     lanes={searchLanes}
+    verifiers={allVerifiers}
     client:load
   />
   <section class="layout">
@@ -187,8 +194,12 @@ const chainStructuredData = generateChainStructuredData(
       display: grid;
       --doc-padding: var(--space-10x);
       padding: var(--doc-padding) var(--space-8x);
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-24x);
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-8x);
+    }
+
+    .layout > div {
+      min-width: 0;
     }
 
     .networks__grid {

src/components/CCIP/Chain/ChainTokenGrid.css

@@ -6,7 +6,6 @@
 
 @media (min-width: 992px) {
   .tokens__grid {
-    min-height: 420px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: var(--space-4x);
   }

src/components/CCIP/Chain/ChainTokenGrid.tsx

@@ -36,6 +36,7 @@ function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
               id={token.id}
               logo={token.logo}
               key={token.id}
+              variant="square"
               onClick={() => {
                 const selectedNetwork = Object.keys(data)
                   .map((key) => {

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -46,6 +46,13 @@ interface ChainHeroProps {
     }
     lane: LaneConfig
   }[]
+  verifiers?: {
+    id: string
+    name: string
+    type: string
+    logo: string
+    totalNetworks: number
+  }[]
   network?: Network
   token?: {
     id: string
@@ -60,7 +67,16 @@ interface ChainHeroProps {
   }>
 }
 
-function ChainHero({ chains, tokens, network, token, environment, lanes, breadcrumbItems }: ChainHeroProps) {
+function ChainHero({
+  chains,
+  tokens,
+  network,
+  token,
+  environment,
+  lanes,
+  verifiers = [],
+  breadcrumbItems,
+}: ChainHeroProps) {
   // Get chain-specific tooltip configuration
   const chainTooltipConfig = network?.chain ? getChainTooltip(network.chain) : null
 
@@ -119,7 +135,14 @@ function ChainHero({ chains, tokens, network, token, environment, lanes, breadcr
             }
           />
           <div className="ccip-chain-hero__chainSearch">
-            <Search chains={chains} tokens={tokens} small environment={environment} lanes={lanes} />
+            <Search
+              chains={chains}
+              tokens={tokens}
+              small
+              environment={environment}
+              lanes={lanes}
+              verifiers={verifiers}
+            />
           </div>
         </div>