refactor: use caip2Id to determine EVM networks instead of network list

Author: hayderkg

website/src/supportedNetworks/components/NetworkDetailsPage.tsx

@@ -1,24 +1,13 @@
-import { NetworkType } from '@pinax/graph-networks-registry'
-import type { ComponentPropsWithoutRef } from 'react'
 import { memo } from 'react'
 
-import { classNames } from '@edgeandnode/gds'
 import { Subgraph, Substreams, SubstreamsPoweredSubgraph } from '@edgeandnode/gds/icons'
 
 import { Card, TimeIcon } from '@/components'
 import { useI18n } from '@/i18n'
-import { isNonEVMNetwork } from '@/supportedNetworks/utils'
+import { isEVMNetwork, type Network } from '../utils'
 
 type NetworkDetailsPageProps = {
-  network: {
-    id: string
-    fullName: string
-    networkType: NetworkType
-    protocol: string
-    chainId: number | string
-    nativeCurrency: string
-    docs: string
-  }
+  network: Network
 }
 
 const EVMResources = memo(() => {
@@ -128,7 +117,7 @@ const NetworkDetailsPage = memo(({ network }: NetworkDetailsPageProps) => {
   return (
     <>
       <h3 className="text-h18 mt-0">{t('index.supportedNetworks.guides')}</h3>
-      {isNonEVMNetwork(network.id) ? <NonEVMResources /> : <EVMResources />}
+      {isEVMNetwork(network) ? <EVMResources /> : <NonEVMResources />}
     </>
   )
 })

website/src/supportedNetworks/components/NetworkPage.tsx

@@ -1,6 +1,5 @@
 import { NetworkType } from '@pinax/graph-networks-registry'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { useData } from 'nextra/hooks'
 import { memo } from 'react'
 
@@ -9,22 +8,7 @@ import { NetworkIcon } from '@edgeandnode/go'
 
 import NetworkDetailsPage from './NetworkDetailsPage'
 import { useI18n } from '@/i18n'
-import { getIconVariant, shouldShowSkeleton } from '@/supportedNetworks/utils'
-
-type CAIP2Id = `${string}:${string | number}`
-
-interface Network {
-  id: string
-  fullName: string
-  shortName?: string
-  networkType: NetworkType
-  graphNode?: {
-    protocol: string
-  }
-  caip2Id?: CAIP2Id
-  nativeToken?: string
-  docsUrl?: string
-}
+import { getIconVariant, shouldShowSkeleton, type Network } from '../utils'
 
 interface NetworkPageProps {
   network?: Network
@@ -38,9 +22,10 @@ export const NetworkPage = memo(({ network }: NetworkPageProps) => {
       id: '',
       fullName: '',
       networkType: NetworkType.Mainnet,
+      caip2Id: '',
     }
+
   const { t } = useI18n()
-  const router = useRouter()
 
   return (
     <>
@@ -120,17 +105,7 @@ export const NetworkPage = memo(({ network }: NetworkPageProps) => {
 
         <hr />
 
-        <NetworkDetailsPage
-          network={{
-            id: networkData.id,
-            fullName: networkData.fullName,
-            networkType: networkData.networkType,
-            protocol: networkData.graphNode?.protocol ?? '',
-            chainId: networkData.caip2Id?.split(':')[1] ?? '',
-            nativeCurrency: networkData.nativeToken ?? '',
-            docs: networkData.docsUrl ?? '',
-          }}
-        />
+        <NetworkDetailsPage network={networkData} />
       </div>
     </>
   )

website/src/supportedNetworks/utils.ts

@@ -1,3 +1,5 @@
+import { NetworkType } from '@pinax/graph-networks-registry'
+
 // Networks that should use the "mono" icon variant
 export const MONO_ICON_NETWORKS = [
   'vana',
@@ -25,38 +27,6 @@ export const MONO_ICON_NETWORKS = [
 // Skeleton networks (no icon available)
 export const MISSING_ICON_NETWORKS = ['ink-sepolia']
 
-// Non-EVM networks
-export const NON_EVM_NETWORKS = [
-  'eos',
-  'jungle4',
-  'kylin',
-  'telos-testnet',
-  'telos',
-  'wax-testnet',
-  'wax',
-  'arweave-mainnet',
-  'gnosis-chiado-cl',
-  'gnosis-cl',
-  'holesky-cl',
-  'mainnet-cl',
-  'sepolia-cl',
-  'btc',
-  'litecoin',
-  'injective-mainnet',
-  'injective-testnet',
-  'mantra-mainnet',
-  'mantra-testnet',
-  'near-mainnet',
-  'near-testnet',
-  'solana-accounts',
-  'solana-devnet',
-  'solana-mainnet',
-  'solana-mainnet-beta',
-  'solana-testnet',
-  'starknet-mainnet',
-  'starknet-testnet',
-]
-
 // Networks with Token API support (TODO: remove once the registry has this information)
 export const TOKEN_API_NETWORKS = ['mainnet', 'base', 'bsc', 'arbitrum-one', 'matic', 'optimism']
 
@@ -68,14 +38,23 @@ export const shouldShowSkeleton = (networkId: string): boolean => {
   return MISSING_ICON_NETWORKS.includes(networkId) || !networkId
 }
 
-export const isNonEVMNetwork = (networkId: string): boolean => {
-  return NON_EVM_NETWORKS.includes(networkId)
-}
-
 export const supportsTokenAPI = (networkId: string): boolean => {
   return TOKEN_API_NETWORKS.includes(networkId)
 }
 
+export interface Network {
+  id: string
+  fullName: string
+  shortName?: string
+  networkType: NetworkType
+  graphNode?: {
+    protocol: string
+  }
+  caip2Id: string
+  nativeToken?: string
+  docsUrl?: string
+}
+
 export interface NetworkData {
   id: string
   shortName: string
@@ -128,3 +107,7 @@ export const processNetworksData = (networks: NetworkData[]): ProcessedNetwork[]
     })
     .sort((a, b) => a.fullName.localeCompare(b.fullName))
 }
+
+export const isEVMNetwork = (network: Network | NetworkData): boolean => {
+  return network.caip2Id.startsWith('eip155:')
+}