make network switching work

.env.example

@@ -2,5 +2,4 @@
 GATSBY_NETWORK="rinkeby"
 
 #GATSBY_INFURA_PROJECT_ID="xxx"
-#GATSBY_METADATA_CACHE_URI="xxx"
 #GATSBY_MARKET_FEE_ADDRESS="0xxx"

app.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   network: process.env.GATSBY_NETWORK || 'rinkeby',
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
-  metadataCacheUri: process.env.GATSBY_METADATA_CACHE_URI,
   // The ETH address the marketplace fee will be sent to.
   marketFeeAddress:
     process.env.GATSBY_MARKET_FEE_ADDRESS ||

src/helpers/NetworkMonitor.tsx

@@ -1,47 +1,58 @@
 import React, { ReactElement, useEffect } from 'react'
 import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
-import appConfig from '../../app.config'
 import { Logger } from '@oceanprotocol/lib'
 
 export function NetworkMonitor(): ReactElement {
-  const { metadataCacheUri } = appConfig
   const { connect, web3Provider } = useOcean()
 
+  async function handleNetworkChanged(chainId: string) {
+    const initialNewConfig = getOceanConfig(Number(chainId.replace('0x', '')))
+
+    const newConfig = {
+      ...initialNewConfig,
+
+      // add local dev values
+      ...(chainId === '8996' && {
+        factoryAddress: '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f',
+        poolFactoryAddress: '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4',
+        fixedRateExchangeAddress: '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8',
+        metadataContractAddress: '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
+      })
+    }
+
+    try {
+      await connect(newConfig)
+    } catch (error) {
+      Logger.error(error.message)
+    }
+  }
+
+  // Re-connect on mount when network is different from user network
+  // useEffect(() => {
+  //   if (!web3 || !networkId) return
+
+  //   async function init() {
+  //     if (
+  //       (await web3.eth.getChainId()) ===
+  //       (config as ConfigHelperConfig).networkId
+  //     )
+  //       return
+  //     await handleNetworkChanged(networkId)
+  //   }
+  //   init()
+  // }, [web3, networkId])
+
+  // Handle network change events
   useEffect(() => {
     if (!web3Provider) return
 
-    async function handleNetworkChanged(chainId: string) {
-      const initialConfig = getOceanConfig(Number(chainId.replace('0x', '')))
-
-      const newConfig = {
-        ...initialConfig,
-        // add metadataCacheUri only when defined
-        ...(metadataCacheUri && { metadataCacheUri })
-      }
-      if (chainId === '8996') {
-        newConfig.factoryAddress = '0x312213d6f6b5FCF9F56B7B8946A6C727Bf4Bc21f'
-        newConfig.poolFactoryAddress =
-          '0xF9E633CBeEB2A474D3Fe22261046C99e805beeC4'
-        newConfig.fixedRateExchangeAddress =
-          '0xefdcb16b16C7842ec27c6fdCf56adc316B9B29B8'
-        newConfig.metadataContractAddress =
-          '0xEBe77E16736359Bf0F9013F6017242a5971cAE76'
-      }
-
-      try {
-        await connect(newConfig)
-      } catch (error) {
-        Logger.error(error.message)
-      }
-    }
-
     web3Provider.on('chainChanged', handleNetworkChanged)
 
     return () => {
       web3Provider.removeListener('chainChanged', handleNetworkChanged)
     }
-  }, [web3Provider, connect, metadataCacheUri])
+  }, [web3Provider])
 
   return <></>
 }

src/helpers/wrapRootElement.tsx

@@ -24,17 +24,14 @@ export default function wrapRootElement({
 }: {
   element: ReactElement
 }): ReactElement {
-  const { metadataCacheUri, network } = appConfig
+  const { network } = appConfig
   const oceanInitialConfig = getOceanConfig(network)
 
-  const initialConfig = {
-    ...oceanInitialConfig,
-    // add metadataCacheUri only when defined
-    ...(metadataCacheUri && { metadataCacheUri })
-  }
-
   return (
-    <OceanProvider initialConfig={initialConfig} web3ModalOpts={web3ModalOpts}>
+    <OceanProvider
+      initialConfig={oceanInitialConfig}
+      web3ModalOpts={web3ModalOpts}
+    >
       <UserPreferencesProvider>
         <NetworkMonitor />
         {element}