From 1d2203d97c9a86fbb4eec1b09d50278cd66faa6f Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Wed, 5 Mar 2025 10:27:02 +0100 Subject: [PATCH 1/2] Add url flag when see more is clicked --- src/components/CCIP/Landing/NetworkGrid.tsx | 20 ++++++++++++++++++-- src/components/CCIP/Tables/ChainTable.tsx | 20 ++++++++++++++++++-- src/config/data/ccip/data.ts | 3 +++ 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/components/CCIP/Landing/NetworkGrid.tsx b/src/components/CCIP/Landing/NetworkGrid.tsx index dc062c67041..a11697db398 100644 --- a/src/components/CCIP/Landing/NetworkGrid.tsx +++ b/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,22 @@ 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) + + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search) + if (urlParams.get("showAll") === "true") { + setSeeMore(true) + } + }, []) + + const handleSeeMoreClick = () => { + setSeeMore(true) + const urlParams = new URLSearchParams(window.location.search) + urlParams.set("showAll", "true") + const newUrl = `${window.location.pathname}?${urlParams.toString()}` + window.history.replaceState({ path: newUrl }, "", newUrl) + } + return ( <>
@@ -33,7 +49,7 @@ function NetworkGrid({ networks, environment }: NetworkGridProps) { ))}
- {!seeMore && setSeeMore(!seeMore)} />} + {!seeMore && } ) } diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx index ab947a7268c..39bc1045d92 100644 --- a/src/components/CCIP/Tables/ChainTable.tsx +++ b/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,13 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro } }, [search]) + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search) + if (urlParams.get("showAll") === "true") { + setSeeMore(true) + } + }, []) + useEffect(() => { const fetchOperationalState = async (network) => { if (network) { @@ -59,6 +67,14 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro fetchOperationalState(sourceNetwork.key) }, [sourceNetwork]) + const handleSeeMoreClick = () => { + setSeeMore(true) + const urlParams = new URLSearchParams(window.location.search) + urlParams.set("showAll", "true") + const newUrl = `${window.location.pathname}?${urlParams.toString()}` + window.history.replaceState({ path: newUrl }, "", newUrl) + } + return ( <>
@@ -92,7 +108,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE) .map((network, index) => ( - +
- {!seeMore && setSeeMore(!seeMore)} />} + {!seeMore && }
{lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && ( <>No lanes found diff --git a/src/config/data/ccip/data.ts b/src/config/data/ccip/data.ts index 5a63ca728ef..ee6b213e678 100644 --- a/src/config/data/ccip/data.ts +++ b/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, } }) From 299d6a2e7de6f2eef9ff795045f185e750f059c3 Mon Sep 17 00:00:00 2001 From: Victor Chukwuebuka Umeh <41862157+vyktoremario@users.noreply.github.com> Date: Wed, 5 Mar 2025 12:58:18 +0100 Subject: [PATCH 2/2] keep showAll logic internal and add comment --- src/components/CCIP/Landing/NetworkGrid.tsx | 12 +++--------- src/components/CCIP/Tables/ChainTable.tsx | 12 +++--------- src/components/CCIP/TokenGrid/TokenGrid.tsx | 12 +++++++++++- 3 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/CCIP/Landing/NetworkGrid.tsx b/src/components/CCIP/Landing/NetworkGrid.tsx index a11697db398..82b4e6ab915 100644 --- a/src/components/CCIP/Landing/NetworkGrid.tsx +++ b/src/components/CCIP/Landing/NetworkGrid.tsx @@ -19,6 +19,8 @@ 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") { @@ -26,14 +28,6 @@ function NetworkGrid({ networks, environment }: NetworkGridProps) { } }, []) - const handleSeeMoreClick = () => { - setSeeMore(true) - const urlParams = new URLSearchParams(window.location.search) - urlParams.set("showAll", "true") - const newUrl = `${window.location.pathname}?${urlParams.toString()}` - window.history.replaceState({ path: newUrl }, "", newUrl) - } - return ( <>
@@ -49,7 +43,7 @@ function NetworkGrid({ networks, environment }: NetworkGridProps) { ))}
- {!seeMore && } + {!seeMore && setSeeMore(!seeMore)} />} ) } diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx index 39bc1045d92..83fe03968bf 100644 --- a/src/components/CCIP/Tables/ChainTable.tsx +++ b/src/components/CCIP/Tables/ChainTable.tsx @@ -49,6 +49,8 @@ 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") { @@ -67,14 +69,6 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro fetchOperationalState(sourceNetwork.key) }, [sourceNetwork]) - const handleSeeMoreClick = () => { - setSeeMore(true) - const urlParams = new URLSearchParams(window.location.search) - urlParams.set("showAll", "true") - const newUrl = `${window.location.pathname}?${urlParams.toString()}` - window.history.replaceState({ path: newUrl }, "", newUrl) - } - return ( <>
@@ -174,7 +168,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
- {!seeMore && } + {!seeMore && setSeeMore(!seeMore)} />}
{lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && ( <>No lanes found diff --git a/src/components/CCIP/TokenGrid/TokenGrid.tsx b/src/components/CCIP/TokenGrid/TokenGrid.tsx index 165a991e119..2220b8c41c6 100644 --- a/src/components/CCIP/TokenGrid/TokenGrid.tsx +++ b/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 ( <>