Supported Networks fixes and tweaks (for Hayder)

website/src/components/Callout.tsx

@@ -53,7 +53,7 @@ export const Callout = ({
       ])}
       {...(props as ComponentPropsWithoutRef<'div'>)}
     >
-      <div className="flex size-7 shrink-0 items-center justify-center">
+      <div className="flex size-6 shrink-0 items-center justify-center">
         {variant === 'info' ? (
           <Lightbulb size={4} color="astro-500" alt={!title ? t('global.content.callout.note') : ''} />
         ) : (
@@ -63,7 +63,7 @@ export const Callout = ({
       <div
         className={`
           text-body-xsmall flex-1
-          first:*:text-white
+          -:first:*:text-white
           mdx-[:is(p,ul,ol):not(:last-child,:is(ul,ol)_*)]:mb-3
           mdx-[ul,ol]:gap-1
         `}

website/src/components/Table.tsx

@@ -18,18 +18,18 @@ export const Table = ({ className, children, variant = 'default', ...props }: Ta
     >
       <table
         className={`
-          min-w-full
+          h-max min-w-full overflow-clip
           ${
             isSupportedNetworks
               ? '-:nested-[td]:border-y -:nested-[td:not(:first-child)]:border-l -:nested-[td:not(:last-child)]:border-r -:nested-[td]:border-space-1500'
               : '-:nested-[th,td]:border -:nested-[th,td]:border-space-1500'
           }
           -:nested-[td:has(.highlight-cell)]:bg-purple-1200
-          ${isSupportedNetworks ? '-:nested-[th]:whitespace-nowrap' : '-:nested-[th]:whitespace-normal -:nested-[th]:bg-space-1700'}
+          ${isSupportedNetworks ? '-:nested-[th]:h-8 -:nested-[th]:whitespace-nowrap' : '-:nested-[th]:whitespace-normal -:nested-[th]:bg-space-1700'}
           -:nested-[tr:has(.highlight-row)_td]:bg-purple-1200
           -:nested-[th,td]:px-3.5
           -:nested-[th,td]:py-2.5
-          ${isSupportedNetworks ? '-:nested-[td]:align-middle' : '-:nested-[td]:align-top'}
+          ${isSupportedNetworks ? '-:nested-[td]:h-16 -:nested-[td]:align-middle' : '-:nested-[td]:align-top'}
           -:nested-[th]:font-medium
           mdx-[:is(p,ul,ol):not(:last-child,:is(ul,ol)_*)]:mb-3
           mdx-[ul,ol]:gap-1

website/src/pages/[locale]/supported-networks/[id].mdx

@@ -8,13 +8,16 @@ import { getSupportedNetworks } from '@/supportedNetworks'
 
 export const getStaticPaths = async () => {
   const networks = await getSupportedNetworks()
-  const paths = supportedLocales.flatMap((locale) =>
-    networks.map((network) => ({
-      params: { locale, id: network.id },
-    }))
-  )
-
-return { paths, fallback: false } }
+  const paths = []
+  for (const locale of supportedLocales) {
+    for (const network of networks) {
+      paths.push({
+        params: { locale, id: network.id },
+      })
+    }
+  }
+  return { paths, fallback: false }
+}
 
 export const getStaticProps = async ({ params }) => {
   const { locale, id } = params

website/src/supportedNetworks/components/EmptySearchResults.tsx

@@ -20,8 +20,8 @@ export const EmptySearchResults = ({ searchQuery, onClearSearch }: EmptySearchRe
           <EyeClosed size="36px" color="purple-100" alt="Information" />
         </DottedRingsSpinner>
       </div>
-      <p className="text-p20 mb-2 mt-0 font-medium">{t('index.supportedNetworks.emptySearch.title')}</p>
-      <p className="text-p16 mb-6 max-w-90 text-space-700">
+      <p className="text-body-large mb-2 mt-0 font-medium">{t('index.supportedNetworks.emptySearch.title')}</p>
+      <p className="text-body-small mb-6 max-w-90 text-space-700">
         {t('index.supportedNetworks.emptySearch.description', [searchQuery])}
       </p>
       <div className="flex flex-wrap justify-center gap-3">

website/src/supportedNetworks/components/NetworkPage.tsx

@@ -90,7 +90,7 @@ export const NetworkPage = memo(({ network }: NetworkPageProps) => {
                 )}
                 {networkData.docsUrl && (
                   <ExperimentalDescriptionList.Item label={t('index.supportedNetworks.docs')}>
-                    <ExperimentalLink className="text-p14" href={networkData.docsUrl} target="_blank">
+                    <ExperimentalLink className="text-14" href={networkData.docsUrl} target="_blank">
                       {networkData.docsUrl}
                     </ExperimentalLink>
                   </ExperimentalDescriptionList.Item>

website/src/supportedNetworks/components/NetworkRow.tsx

@@ -1,8 +1,7 @@
 import { motion } from 'framer-motion'
-import NextLink from 'next/link'
 import { memo } from 'react'
 
-import { ExperimentalCopyButton, Skeleton } from '@edgeandnode/gds'
+import { ButtonOrLink, ExperimentalCopyButton, Skeleton } from '@edgeandnode/gds'
 import { Check } from '@edgeandnode/gds/icons'
 import { NetworkIcon } from '@edgeandnode/go'
 
@@ -24,7 +23,7 @@ interface NetworkRowProps {
 export const NetworkRow = memo(({ network, locale }: NetworkRowProps) => {
   return (
     <motion.tr
-      className="group h-16 cursor-pointer transition-colors hover:bg-space-1600"
+      className="group/table-row isolate -outline-offset-1 transition hocus-visible-within:bg-space-1600 has-[a:focus-visible]:outline-focus"
       initial={{ opacity: 0, y: 16 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{
@@ -41,33 +40,24 @@ export const NetworkRow = memo(({ network, locale }: NetworkRowProps) => {
       }}
       layoutId={network.id}
     >
-      <td className="static min-w-48">
-        <NextLink
-          href={`/${locale}/supported-networks/${network.id}`}
-          className="absolute inset-0 z-10 flex size-full items-center px-3.5 py-2.5 -outline-offset-2"
-        >
-          <div className="flex items-center gap-2">
+      <td>
+        <ButtonOrLink href={`/${locale}/supported-networks/${network.id}`} className="static outline-none">
+          <span className="flex items-center gap-2">
             {shouldShowSkeleton(network.id) ? (
               <Skeleton borderRadius="FULL" height="20px" width="20px" />
             ) : (
               <NetworkIcon variant={getIconVariant(network.id)} caip2Id={network.caip2Id as any} size={5} />
             )}
-            <span className="text-p14">{network.shortName}</span>
-          </div>
-        </NextLink>
+            <span className="text-body-xsmall">{network.shortName}</span>
+          </span>
+          <span className="absolute inset-y-0 start-0 z-10 w-[1999px]" />
+        </ButtonOrLink>
       </td>
-      <td className="w-48">
-        <div className="flex w-full items-center justify-between gap-2">
-          <span className="text-p14 !mb-0">{network.id}</span>
-          <div className="z-20 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
-            <div
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-            >
-              <ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
-            </div>
+      <td>
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-body-xsmall">{network.id}</span>
+          <div className="z-20 shrink-0 opacity-0 transition group-focus-within/table-row:opacity-100 group-hover/table-row:opacity-100">
+            <ExperimentalCopyButton size="small" variant="tertiary" value={network.id} />
           </div>
         </div>
       </td>

website/src/supportedNetworks/components/NetworksTable.tsx

@@ -25,10 +25,10 @@ export const NetworksTable = memo(({ networks, isLoading, locale }: NetworksTabl
     <Table variant="supported-networks">
       <tbody>
         <tr>
-          <th className="w-48">
+          <th className="min-w-46">
             <Text.C10>{t('index.supportedNetworks.tableHeaders.name')}</Text.C10>
           </th>
-          <th className="w-48">
+          <th className="min-w-46">
             <Text.C10>{t('index.supportedNetworks.tableHeaders.id')}</Text.C10>
           </th>
           <th align="center">

website/src/supportedNetworks/components/SkeletonRow.tsx

@@ -4,14 +4,14 @@ import { Skeleton } from '@edgeandnode/gds'
 
 export const SkeletonRow = memo(() => {
   return (
-    <tr className="h-16">
-      <td className="w-48">
+    <tr>
+      <td>
         <div className="flex items-center gap-2">
           <Skeleton borderRadius="FULL" height="20px" width="20px" />
           <Skeleton borderRadius="XS" height="12px" width="100px" />
         </div>
       </td>
-      <td className="w-48">
+      <td>
         <Skeleton borderRadius="XS" height="12px" width="80px" />
       </td>
       <td align="center">

website/src/supportedNetworks/index.tsx

@@ -60,11 +60,13 @@ export function SupportedNetworksTable({
   return (
     <>
       <Callout variant="info" className="mb-6">
-        {t('index.supportedNetworks.infoText')}{' '}
-        <ExperimentalLink href="https://thegraph.com/docs/en/indexing/chain-integration-overview/">
-          {t('index.supportedNetworks.infoLink')}
-        </ExperimentalLink>
-        .
+        <p>
+          {t('index.supportedNetworks.infoText')}{' '}
+          <ExperimentalLink href="https://thegraph.com/docs/en/indexing/chain-integration-overview/">
+            {t('index.supportedNetworks.infoLink')}
+          </ExperimentalLink>
+          .
+        </p>
       </Callout>
 
       <NetworkFilters