split up network list into main & test networks

src/components/atoms/NetworkName.tsx

@@ -5,7 +5,7 @@ import { ReactComponent as PolygonIcon } from '../../images/polygon.svg'
 import { ReactComponent as MoonbeamIcon } from '../../images/moonbeam.svg'
 import {
   EthereumListsChain,
-  getNetworkData,
+  getNetworkDataById,
   getNetworkDisplayName
 } from '../../utils/web3'
 import styles from './NetworkName.module.css'
@@ -53,7 +53,7 @@ export default function NetworkName({
   const data = useStaticQuery(networksQuery)
   const networksList: { node: EthereumListsChain }[] =
     data.allNetworksMetadataJson.edges
-  const networkData = getNetworkData(networksList, networkId)
+  const networkData = getNetworkDataById(networksList, networkId)
   const networkName = getNetworkDisplayName(networkData, networkId)
 
   return (

src/components/molecules/UserPreferences/Chain.module.css

@@ -1,3 +1,10 @@
+.titleGroup {
+  font-size: var(--font-size-small);
+  margin-bottom: calc(var(--spacer) / 6);
+  margin-top: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+}
+
 .chains {
   composes: box from '../../atoms/Box.module.css';
   box-shadow: none;

src/components/molecules/UserPreferences/Chain.tsx

@@ -6,8 +6,56 @@ import NetworkName from '../../atoms/NetworkName'
 import { removeItemFromArray } from '../../../utils'
 import FormHelp from '../../atoms/Input/Help'
 import styles from './Chain.module.css'
+import { useStaticQuery, graphql } from 'gatsby'
+import { EthereumListsChain, getNetworkDataById } from '../../../utils/web3'
+
+const networksQuery = graphql`
+  query {
+    allNetworksMetadataJson {
+      edges {
+        node {
+          chain
+          network
+          networkId
+          chainId
+        }
+      }
+    }
+  }
+`
+
+function ChainItem({
+  isDefaultChecked,
+  chainId,
+  handleChainChanged
+}: {
+  isDefaultChecked: boolean
+  chainId: number
+  handleChainChanged: (e: ChangeEvent<HTMLInputElement>) => void
+}) {
+  return (
+    <div className={styles.radioWrap} key={chainId}>
+      <label className={styles.radioLabel} htmlFor={`opt-${chainId}`}>
+        <input
+          className={styles.input}
+          id={`opt-${chainId}`}
+          type="checkbox"
+          name="chainIds"
+          value={chainId}
+          onChange={handleChainChanged}
+          defaultChecked={isDefaultChecked}
+        />
+        <NetworkName key={chainId} networkId={chainId} />
+      </label>
+    </div>
+  )
+}
 
 export default function Chain(): ReactElement {
+  const data = useStaticQuery(networksQuery)
+  const networksList: { node: EthereumListsChain }[] =
+    data.allNetworksMetadataJson.edges
+
   const { appConfig } = useSiteMetadata()
   const { chainIds, setChainIds } = useUserPreferences()
 
@@ -23,27 +71,42 @@ export default function Chain(): ReactElement {
     setChainIds(newChainIds)
   }
 
+  const chainsMain = appConfig.chainIdsSupported
+    .filter((chainId: number) => {
+      const networkData = getNetworkDataById(networksList, chainId)
+      return networkData.network === 'mainnet'
+    })
+    .map((chainId) => (
+      <ChainItem
+        key={chainId}
+        chainId={chainId}
+        isDefaultChecked={chainIds.includes(chainId)}
+        handleChainChanged={handleChainChanged}
+      />
+    ))
+
+  const chainsTest = appConfig.chainIdsSupported
+    .filter((chainId: number) => {
+      const networkData = getNetworkDataById(networksList, chainId)
+      return networkData.network !== 'mainnet'
+    })
+    .map((chainId) => (
+      <ChainItem
+        key={chainId}
+        chainId={chainId}
+        isDefaultChecked={chainIds.includes(chainId)}
+        handleChainChanged={handleChainChanged}
+      />
+    ))
+
   return (
     <li>
       <Label htmlFor="chains">Chains</Label>
-      <div className={styles.chains}>
+
-        {appConfig.chainIdsSupported.map((chainId) => (
+      <h4 className={styles.titleGroup}>Main</h4>
-          <div className={styles.radioWrap} key={chainId}>
+      <div className={styles.chains}>{chainsMain}</div>
-            <label className={styles.radioLabel} htmlFor={`opt-${chainId}`}>
+      <h4 className={styles.titleGroup}>Test</h4>
-              <input
+      <div className={styles.chains}>{chainsTest}</div>
-                className={styles.input}
-                id={`opt-${chainId}`}
-                type="checkbox"
-                name="chainIds"
-                value={chainId}
-                onChange={handleChainChanged}
-                defaultChecked={chainIds.includes(chainId)}
-              />
-              <NetworkName key={chainId} networkId={chainId} />
-            </label>
-          </div>
-        ))}
-      </div>
 
       <FormHelp>Switch the data source for the interface.</FormHelp>
     </li>

src/components/molecules/Wallet/Network.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { useOcean } from '../../../providers/Ocean'
 import Status from '../../atoms/Status'
-import { ConfigHelper, ConfigHelperConfig } from '@oceanprotocol/lib'
+import { ConfigHelper } from '@oceanprotocol/lib'
 import Badge from '../../atoms/Badge'
 import Tooltip from '../../atoms/Tooltip'
 import { useWeb3 } from '../../../providers/Web3'
@@ -11,7 +10,8 @@ import styles from './Network.module.css'
 export default function Network(): ReactElement {
   const { networkId, isTestnet } = useWeb3()
 
-  const [isSupportedNetwork, setIsSupportedNetwork] = useState<boolean>()
+  const [isSupportedOceanNetwork, setIsSupportedOceanNetwork] =
+    useState<boolean>()
 
   useEffect(() => {
     // take network from user when present
@@ -19,13 +19,15 @@ export default function Network(): ReactElement {
 
     // Check networkId against ocean.js ConfigHelper configs
     // to figure out if network is supported.
-    const isSupportedNetwork = Boolean(new ConfigHelper().getConfig(network))
+    const isSupportedOceanNetwork = Boolean(
-    setIsSupportedNetwork(isSupportedNetwork)
+      new ConfigHelper().getConfig(network)
+    )
+    setIsSupportedOceanNetwork(isSupportedOceanNetwork)
   }, [networkId])
 
   return networkId ? (
     <div className={styles.network}>
-      {!isSupportedNetwork && (
+      {!isSupportedOceanNetwork && (
         <Tooltip content="No Ocean Protocol contracts are deployed to this network.">
           <Status state="error" className={styles.warning} />
         </Tooltip>

src/providers/Web3.tsx

@@ -15,7 +15,7 @@ import { Logger } from '@oceanprotocol/lib'
 import { isBrowser } from '../utils'
 import {
   EthereumListsChain,
-  getNetworkData,
+  getNetworkDataById,
   getNetworkDisplayName
 } from '../utils/web3'
 import { graphql, useStaticQuery } from 'gatsby'
@@ -230,7 +230,7 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
   useEffect(() => {
     if (!networkId) return
 
-    const networkData = getNetworkData(networksList, networkId)
+    const networkData = getNetworkDataById(networksList, networkId)
     setNetworkData(networkData)
     Logger.log('[web3] Network metadata found.', networkData)
 
@@ -339,6 +339,3 @@ const useWeb3 = (): Web3ProviderValue => useContext(Web3Context)
 
 export { Web3Provider, useWeb3, Web3ProviderValue, Web3Context }
 export default Web3Provider
-function getTokenBalance() {
-  throw new Error('Function not implemented.')
-}

src/utils/web3.ts

@@ -54,7 +54,7 @@ export function getNetworkDisplayName(
   return displayName
 }
 
-export function getNetworkData(
+export function getNetworkDataById(
   data: { node: EthereumListsChain }[],
   networkId: number
 ): EthereumListsChain {