Add a flag to url when see more is clicked

src/components/CCIP/Landing/NetworkGrid.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import NetworkCard from "../Cards/NetworkCard"
 import SeeMore from "../SeeMore/SeeMore"
 import "./NetworkGrid.css"
@@ -18,6 +18,16 @@ const BEFORE_SEE_MORE = 2 * 7 // Number of networks to show before the "See more
 
 function NetworkGrid({ networks, environment }: NetworkGridProps) {
   const [seeMore, setSeeMore] = useState(networks.length <= BEFORE_SEE_MORE)
+
+  // Enables displaying all content when `showAll=true` is present in the URL query parameters.
+  // This is added to help expose additional content for the Algolia crawler.
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    if (urlParams.get("showAll") === "true") {
+      setSeeMore(true)
+    }
+  }, [])
+
   return (
     <>
       <div className="networks__grid">

src/components/CCIP/Tables/ChainTable.tsx

@@ -19,6 +19,7 @@ interface TableProps {
   lanes: {
     name: string
     logo: string
+    noOfSupportedTokens: number
     onRamp?: {
       address: string
       version: string
@@ -48,6 +49,15 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
     }
   }, [search])
 
+  // Enables displaying all content when `showAll=true` is present in the URL query parameters.
+  // This is added to help expose additional content for the Algolia crawler.
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    if (urlParams.get("showAll") === "true") {
+      setSeeMore(true)
+    }
+  }, [])
+
   useEffect(() => {
     const fetchOperationalState = async (network) => {
       if (network) {
@@ -92,7 +102,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
               .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE)
               .map((network, index) => (
                 <tr key={index}>
-                  <td>
+                  <td data-supported-tokens={network.noOfSupportedTokens}>
                     <div
                       className="ccip-table__network-name"
                       role="button"

src/components/CCIP/TokenGrid/TokenGrid.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import SeeMore from "../SeeMore/SeeMore"
 import "./TokenGrid.css"
 import TokenCard from "../Cards/TokenCard"
@@ -15,6 +15,16 @@ const BEFORE_SEE_MORE = 6 * 4 // Number of networks to show before the "See more
 
 function NetworkGrid({ tokens, environment }: TokenGridProps) {
   const [seeMore, setSeeMore] = useState(tokens.length <= BEFORE_SEE_MORE)
+
+  // Enables displaying all content when `showAll=true` is present in the URL query parameters.
+  // This is added to help expose additional content for the Algolia crawler.
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    if (urlParams.get("showAll") === "true") {
+      setSeeMore(true)
+    }
+  }, [])
+
   return (
     <>
       <div className="tokens__grid">

src/config/data/ccip/data.ts

@@ -531,6 +531,7 @@ export const getAllNetworkLanes = async ({
     logo: string
     key: string
     directory: SupportedChain
+    noOfSupportedTokens: number
     onRamp: {
       address: string
       version: string
@@ -541,6 +542,7 @@ export const getAllNetworkLanes = async ({
     }
   }[] = Object.keys(allLanes).map((lane) => {
     const laneData = allLanes[lane]
+    const noOfSupportedTokens = laneData?.supportedTokens ? Object.keys(laneData.supportedTokens).length : 0
 
     const directory = directoryToSupportedChain(lane || "")
     const title = getTitle(directory)
@@ -552,6 +554,7 @@ export const getAllNetworkLanes = async ({
       onRamp: laneData.onRamp,
       offRamp: laneData.offRamp,
       key: lane,
+      noOfSupportedTokens,
       directory,
     }
   })