Network metadata updates on chainid.network (#980)

* network field removed, build fixed

* separation between main/test networks fix

* network names fix

* duplicate code removed, comment added

* remove unnecessary check

* name fix

* console.log deleted

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>

src/components/molecules/UserPreferences/Networks/index.tsx

@@ -2,7 +2,11 @@ import React, { ReactElement } from 'react'
 import Label from '../../../atoms/Input/Label'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import FormHelp from '../../../atoms/Input/Help'
-import { EthereumListsChain, getNetworkDataById } from '../../../../utils/web3'
+import {
+  EthereumListsChain,
+  getNetworkDataById,
+  getNetworkType
+} from '../../../../utils/web3'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { ReactComponent as Network } from '../../../../images/network.svg'
@@ -19,18 +23,7 @@ export function filterNetworksByType(
 ): number[] {
   const finalNetworks = chainIds.filter((chainId: number) => {
     const networkData = getNetworkDataById(networksList, chainId)
-
-    // HEADS UP! Only networkData.network === 'mainnet' is consistent
-    // while not every test network in the network data has 'testnet'
-    // in its place. So for the 'testnet' case filter for all non-'mainnet'.
-    //
-    // HEADS UP NO. 2! We hack in mainnet detection for moonriver as their
-    // network data uses the `network` key wrong over in
-    // https://github.com/ethereum-lists/chains/blob/master/_data/chains/eip155-1285.json
-    //
-    return type === 'mainnet'
-      ? networkData.network === type || networkData.network === 'moonriver'
-      : networkData.network !== 'mainnet' && networkData.network !== 'moonriver'
+    return type === getNetworkType(networkData)
   })
   return finalNetworks
 }

src/hooks/useNetworkMetadata.ts

@@ -11,7 +11,8 @@ const networksQuery = graphql`
       edges {
         node {
           chain
-          network
+          name
+          title
           networkId
           chainId
           rpc

src/utils/web3.ts

@@ -3,6 +3,7 @@ import { getOceanConfig } from './ocean'
 
 export interface EthereumListsChain {
   name: string
+  title?: string
   chainId: number
   shortName: string
   chain: string
@@ -49,6 +50,22 @@ export function accountTruncate(account: string): string {
   return truncated
 }
 
+export function getNetworkType(network: EthereumListsChain): string {
+  // HEADS UP! Hack for getting network's type main/test, without using
+  // .network field, which is innexistent on https://chainid.network/chains.json
+  // We hack in mainnet detection for moonriver.
+
+  if (
+    !network.name.includes('Testnet') &&
+    !network.title?.includes('Testnet') &&
+    network.name !== 'Moonbase Alpha'
+  ) {
+    return 'mainnet'
+  } else {
+    return 'testnet'
+  }
+}
+
 export function getNetworkDisplayName(
   data: EthereumListsChain,
   networkId: number
@@ -71,9 +88,15 @@ export function getNetworkDisplayName(
     case 8996:
       displayName = 'Development'
       break
+    case 3:
+      displayName = 'ETH Ropsten'
+      break
+    case 2021000:
+      displayName = 'GAIA-X Testnet'
+      break
     default:
       displayName = data
-        ? `${data.chain} ${data.network === 'mainnet' ? '' : data.network}`
+        ? `${data.chain} ${getNetworkType(data) === 'mainnet' ? '' : data.name}`
         : 'Unknown'
       break
   }