thisdot · Zelig880 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
@@ -75,16 +75,15 @@ const searchLanes = getSearchLanes({ environment })
         <h2>Tokens <span>({allTokens.length})</span></h2>
         <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">List my token</a>
       </div>
-      <div class="tokens__grid">
-        <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
-      </div>
+
+      <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
     </div>
   </section>
 </CcipLayout>
 
 <style scoped="false">
   .layout {
-    --gutter: var(--space-6x);
+    --gutter: var(--space-10x);
     --doc-padding: var(--space-6x);
     margin: var(--space-8x) auto;
     display: flex;
@@ -119,12 +118,6 @@ const searchLanes = getSearchLanes({ environment })
     gap: var(--space-2x);
   }
 
-  .tokens__grid {
-    display: grid;
-    grid-template-columns: 32% 32% 32%;
-    gap: var(--space-2x);
-  }
-
   @media (min-width: 50em) {
     .layout {
       max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
@@ -135,6 +128,9 @@ const searchLanes = getSearchLanes({ environment })
   @media (min-width: 992px) {
     .layout {
       display: grid;
+      --doc-padding: var(--space-10x);
+      padding-top: var(--doc-padding);
+      padding-bottom: var(--doc-padding);
       grid-template-columns: 1fr 1fr;
       gap: var(--space-24x);
     }
@@ -145,12 +141,6 @@ const searchLanes = getSearchLanes({ environment })
       min-height: 420px;
     }
 
-    .tokens__grid {
-      min-height: 420px;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-4x);
-    }
-
     .ccip-heading {
       border-bottom: 1px solid var(--gray-200);
     }

@@ -0,0 +1,13 @@
+.tokens__grid {
+  display: grid;
+  grid-template-columns: 32% 32% 32%;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .tokens__grid {
+    min-height: 420px;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--space-4x);
+  }
+}
@@ -3,7 +3,9 @@ import TokenCard from "../Cards/TokenCard"
 import { drawerContentStore } from "../Drawer/drawerStore"
 import TokenDrawer from "../Drawer/TokenDrawer"
 import { directoryToSupportedChain, getChainIcon, getTitle } from "~/features/utils"
-import React from "react"
+import { useState } from "react"
+import "./ChainTokenGrid.css"
+import SeeMore from "../SeeMore/SeeMore"
 
 interface ChainTokenGridProps {
   tokens: {
@@ -24,62 +26,72 @@ interface ChainTokenGridProps {
   environment: Environment
 }
 
+const BEFORE_SEE_MORE = 6 * 4 // Number of networks to show before the "See more" button, 7 rows x 4 items
+
 function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
-  return tokens.map((token) => {
-    const data = getTokenData({
-      environment,
-      version: Version.V1_2_0,
-      tokenSymbol: token.name || "",
-    })
-    return (
-      <TokenCard
-        name={token.name}
-        logo={token.logo}
-        key={token.name}
-        onClick={() => {
-          const selectedNetwork = Object.keys(data)
-            .map((key) => {
-              const directory = directoryToSupportedChain(key || "")
-              const title = getTitle(directory) || ""
-              const networkLogo = getChainIcon(directory) || ""
-              return {
-                name: title,
-                token: data[key].name || "",
-                key,
-                logo: networkLogo,
-                symbol: token,
-                tokenLogo: network.logo || "",
-                decimals: data[key].decimals || 0,
-                tokenAddress: data[key].tokenAddress || "",
-                tokenPoolType: data[key].poolType || "",
-                tokenPoolAddress: data[key].poolAddress || "",
-                explorerUrl: network.explorerUrl,
-              }
-            })
-            .find((n) => n.key === network.key)
+  const [seeMore, setSeeMore] = useState(tokens.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="tokens__grid">
+        {tokens.slice(0, seeMore ? tokens.length : BEFORE_SEE_MORE).map((token) => {
+          const data = getTokenData({
+            environment,
+            version: Version.V1_2_0,
+            tokenSymbol: token.name || "",
+          })
+          return (
+            <TokenCard
+              name={token.name}
+              logo={token.logo}
+              key={token.name}
+              onClick={() => {
+                const selectedNetwork = Object.keys(data)
+                  .map((key) => {
+                    const directory = directoryToSupportedChain(key || "")
+                    const title = getTitle(directory) || ""
+                    const networkLogo = getChainIcon(directory) || ""
+                    return {
+                      name: title,
+                      token: data[key].name || "",
+                      key,
+                      logo: networkLogo,
+                      symbol: token,
+                      tokenLogo: network.logo || "",
+                      decimals: data[key].decimals || 0,
+                      tokenAddress: data[key].tokenAddress || "",
+                      tokenPoolType: data[key].poolType || "",
+                      tokenPoolAddress: data[key].poolAddress || "",
+                      explorerUrl: network.explorerUrl,
+                    }
+                  })
+                  .find((n) => n.key === network.key)
 
-          if (selectedNetwork) {
-            drawerContentStore.set(() => (
-              <TokenDrawer
-                token={{
-                  name: data[Object.keys(data)[0]]?.name || "",
-                  logo: token.logo,
-                  symbol: token.name,
-                }}
-                network={selectedNetwork}
-                destinationLanes={getAllTokenLanes({
-                  environment,
-                  version: Version.V1_2_0,
-                  token: token.name || "",
-                })}
-                environment={environment}
-              />
-            ))
-          }
-        }}
-      />
-    )
-  })
+                if (selectedNetwork) {
+                  drawerContentStore.set(() => (
+                    <TokenDrawer
+                      token={{
+                        name: data[Object.keys(data)[0]]?.name || "",
+                        logo: token.logo,
+                        symbol: token.name,
+                      }}
+                      network={selectedNetwork}
+                      destinationLanes={getAllTokenLanes({
+                        environment,
+                        version: Version.V1_2_0,
+                        token: token.name || "",
+                      })}
+                      environment={environment}
+                    />
+                  ))
+                }
+              }}
+            />
+          )
+        })}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
 }
 
 export default ChainTokenGrid
@@ -0,0 +1,12 @@
+.networks__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .networks__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-6x);
+  }
+}
@@ -0,0 +1,40 @@
+import { useState } from "react"
+import NetworkCard from "../Cards/NetworkCard"
+import SeeMore from "../SeeMore/SeeMore"
+import "./NetworkGrid.css"
+
+interface NetworkGridProps {
+  networks: {
+    name: string
+    totalLanes: number
+    totalTokens: number
+    logo: string
+    chain: string
+  }[]
+  environment: string
+}
+
+const BEFORE_SEE_MORE = 2 * 7 // Number of networks to show before the "See more" button, 2 rows x 8 items
+
+function NetworkGrid({ networks, environment }: NetworkGridProps) {
+  const [seeMore, setSeeMore] = useState(networks.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="networks__grid">
+        {networks.slice(0, seeMore ? networks.length : BEFORE_SEE_MORE).map((chain) => (
+          <a href={`/ccip/supported-networks/${environment}/chain/${chain.chain}`}>
+            <NetworkCard
+              name={chain.name}
+              totalLanes={chain.totalLanes}
+              totalTokens={chain.totalTokens}
+              logo={chain.logo}
+            />
+          </a>
+        ))}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
+}
+
+export default NetworkGrid
@@ -10,10 +10,9 @@ import {
   getSearchLanes,
   Version,
 } from "~/config/data/ccip"
-import NetworkCard from "~/components/CCIP/Cards/NetworkCard"
-import TokenCard from "~/components/CCIP/Cards/TokenCard"
 import { getTokenIconUrl } from "~/features/utils"
-import Drawer from "../Drawer/Drawer"
+import NetworkGrid from "./NetworkGrid"
+import TokenGrid from "../TokenGrid/TokenGrid"
 export type Props = {
   environment: Environment
 }
@@ -48,45 +47,22 @@ const searchLanes = getSearchLanes({ environment })
       <div class="ccip-heading">
         <h2>Networks {environment} <span>({networks.length})</span></h2>
       </div>
-      <div class="networks__grid">
-        {
-          networks.map((chain) => (
-            <a href={`/ccip/supported-networks/${environment}/chain/${chain.chain}`}>
-              <NetworkCard
-                name={chain.name}
-                totalLanes={chain.totalLanes}
-                totalTokens={chain.totalTokens}
-                logo={chain.logo}
-              />
-            </a>
-          ))
-        }
-      </div>
+      <NetworkGrid networks={networks} environment={environment} client:load />
     </div>
     <div>
       <div class="ccip-heading">
         <h2>Tokens <span>({allTokens.length})</span></h2>
-        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">List my token</a>
+        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">Add my token</a>
       </div>
 
-      <div class="tokens__grid">
-        {
-          allTokens.map((token) => (
-            <TokenCard
-              name={token.name}
-              logo={token.logo}
-              link={`/ccip/supported-networks/${environment}/token/${token.name}`}
-            />
-          ))
-        }
-      </div>
+      <TokenGrid tokens={allTokens} environment={environment} client:load />
     </div>
   </section>
 </CcipLayout>
 
 <style>
   .layout {
-    --gutter: var(--space-6x);
+    --gutter: var(--space-10x);
     --doc-padding: var(--space-6x);
     margin: var(--space-8x) auto;
     display: flex;
@@ -116,18 +92,6 @@ const searchLanes = getSearchLanes({ environment })
     letter-spacing: 0.5px;
   }
 
-  .networks__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--space-2x);
-  }
-
-  .tokens__grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: var(--space-2x);
-  }
-
   @media (min-width: 50em) {
     .layout {
       max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
@@ -137,20 +101,12 @@ const searchLanes = getSearchLanes({ environment })
 
   @media (min-width: 992px) {
     .layout {
-      --doc-padding: var(--space-6x);
+      --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);
     }
-
-    .networks__grid {
-      grid-template-columns: 1fr 1fr;
-      gap: var(--space-6x);
-    }
-
-    .tokens__grid {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      gap: var(--space-4x);
-    }
   }
 </style>
@@ -0,0 +1,7 @@
+.seeMore {
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #2e7bff;
+  margin-top: var(--space-6x);
+}
@@ -0,0 +1,14 @@
+import "./SeeMore.css"
+interface SeeMoreProps {
+  onClick?: () => void
+}
+
+function SeeMore({ onClick }: SeeMoreProps) {
+  return (
+    <button className="seeMore" onClick={onClick}>
+      See more
+    </button>
+  )
+}
+
+export default SeeMore