Skip to content

Add a flag to url when see more is clicked #2437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+36 −3
Open

Add a flag to url when see more is clicked #2437

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d2203d
Add url flag when see more is clicked
vyktoremario Mar 5, 2025
299d6a2
keep showAll logic internal and add comment
vyktoremario Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions src/components/CCIP/Landing/NetworkGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Three points:

  • I do not think we should show the parameter if someone clicks the show all manually, it is good to keep it hidden
  • Add a comment on the "seeMore" logic, so that people know why it has been added (algolia crawler)
  • Auto "show" also all the tokens in this page


return (
<>
<div className="networks__grid">
Expand All @@ -33,7 +49,7 @@ function NetworkGrid({ networks, environment }: NetworkGridProps) {
</a>
))}
</div>
{!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
{!seeMore && <SeeMore onClick={handleSeeMoreClick} />}
</>
)
}
Expand Down
20 changes: 18 additions & 2 deletions src/components/CCIP/Tables/ChainTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ interface TableProps {
lanes: {
name: string
logo: string
noOfSupportedTokens: number
onRamp?: {
address: string
version: string
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, remove this and add comment

return (
<>
<div className="ccip-table__filters">
Expand Down Expand Up @@ -92,7 +108,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"
Expand Down Expand Up @@ -158,7 +174,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
</tbody>
</table>
</div>
{!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
{!seeMore && <SeeMore onClick={handleSeeMoreClick} />}
<div className="ccip-table__notFound">
{lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && (
<>No lanes found</>
Expand Down
3 changes: 3 additions & 0 deletions src/config/data/ccip/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,7 @@ export const getAllNetworkLanes = async ({
logo: string
key: string
directory: SupportedChain
noOfSupportedTokens: number
onRamp: {
address: string
version: string
Expand All @@ -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)
Expand All @@ -552,6 +554,7 @@ export const getAllNetworkLanes = async ({
onRamp: laneData.onRamp,
offRamp: laneData.offRamp,
key: lane,
noOfSupportedTokens,
directory,
}
})
Expand Down