Error when switching to a network that is not added in Metamask (#846)

* use nodeUri instead of providerUri

* get rpc node from query

* remove ocean config

* fix and complete data for new network config

src/components/molecules/WalletNetworkSwitcher.tsx

@@ -2,20 +2,17 @@ import React, { ReactElement } from 'react'
 import { useWeb3 } from '../../providers/Web3'
 import {
   addCustomNetwork,
-  getNetworkConfigObject,
   getNetworkDisplayName,
   getNetworkDataById
 } from '../../utils/web3'
 import Button from '../atoms/Button'
 import styles from './WalletNetworkSwitcher.module.css'
 import useNetworkMetadata from '../../hooks/useNetworkMetadata'
-import { getOceanConfig } from '../../utils/ocean'
 import { useAsset } from '../../providers/Asset'
 
 export default function WalletNetworkSwitcher(): ReactElement {
   const { networkId, web3Provider } = useWeb3()
   const { ddo } = useAsset()
-  const oceanConfig = getOceanConfig(ddo.chainId)
   const { networksList } = useNetworkMetadata()
   const ddoNetworkData = getNetworkDataById(networksList, ddo.chainId)
   const walletNetworkData = getNetworkDataById(networksList, networkId)
@@ -28,12 +25,10 @@ export default function WalletNetworkSwitcher(): ReactElement {
   )
 
   async function switchWalletNetwork() {
-    const networkNode = networksList.find(
+    const networkNode = await networksList.find(
       (data) => data.node.chainId === ddo.chainId
     ).node
-    const network = { ...networkNode, providerUri: oceanConfig.providerUri }
+    addCustomNetwork(web3Provider, networkNode)
-    const networkConfig = getNetworkConfigObject(network)
-    addCustomNetwork(web3Provider, networkConfig)
   }
 
   return (

src/hooks/useNetworkMetadata.ts

@@ -14,6 +14,10 @@ const networksQuery = graphql`
           network
           networkId
           chainId
+          rpc
+          explorers {
+            url
+          }
           nativeCurrency {
             name
             symbol

src/utils/web3.ts

@@ -10,19 +10,22 @@ export interface EthereumListsChain {
   networkId: number
   nativeCurrency: { name: string; symbol: string; decimals: number }
   rpc: string[]
-  faucets: string[]
   infoURL: string
+  faucets: string[]
+  explorers: [{ url: string }]
 }
 
 export interface NetworkObject {
   chainId: number
   name: string
+  nativeCurrency: string
+  explorers: [{ url: string }]
   urlList: string[]
 }
 
 const configGaiaX = getOceanConfig(2021000)
 
-export const networkDataGaiaX = {
+export const networkDataGaiaX: EthereumListsChain = {
   name: 'GAIA-X Testnet',
   chainId: 2021000,
   shortName: 'GAIA-X',
@@ -35,17 +38,8 @@ export const networkDataGaiaX = {
     'https://faucet.gaiaxtestnet.oceanprotocol.com/',
     'https://faucet.gx.gaiaxtestnet.oceanprotocol.com/'
   ],
-  infoURL: 'https://www.gaia-x.eu'
+  infoURL: 'https://www.gaia-x.eu',
-}
+  explorers: [{ url: '' }]
-
-export function getNetworkConfigObject(node: any): NetworkObject {
-  const networkConfig = {
-    name: node.chain,
-    symbol: node.nativeCurrency.symbol,
-    chainId: node.chainId,
-    urlList: [node.providerUri]
-  }
-  return networkConfig
 }
 
 export function accountTruncate(account: string): string {
@@ -98,12 +92,14 @@ export function getNetworkDataById(
 
 export async function addCustomNetwork(
   web3Provider: any,
-  network: NetworkObject
+  network: EthereumListsChain
 ): Promise<void> {
   const newNewtworkData = {
     chainId: `0x${network.chainId.toString(16)}`,
-    chainName: network.name,
+    chainName: getNetworkDisplayName(network, network.chainId),
-    rpcUrls: network.urlList
+    nativeCurrency: network.nativeCurrency,
+    rpcUrls: network.rpc,
+    blockExplorerUrls: [network.explorers[0].url]
   }
   try {
     await web3Provider.request({
@@ -112,7 +108,7 @@ export async function addCustomNetwork(
     })
   } catch (switchError) {
     if (switchError.code === 4902) {
-      web3Provider.request(
+      await web3Provider.request(
         {
           method: 'wallet_addEthereumChain',
           params: [newNewtworkData]