make initial network switching based on user network work

src/helpers/NetworkMonitor.tsx

@@ -2,12 +2,15 @@ import React, { ReactElement, useEffect } from 'react'
 import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
 import { Logger } from '@oceanprotocol/lib'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 
 export function NetworkMonitor(): ReactElement {
-  const { connect, web3Provider } = useOcean()
+  const { connect, web3Provider, web3, networkId, config } = useOcean()
 
-  async function handleNetworkChanged(chainId: string) {
+  async function handleNetworkChanged(chainId: string | number) {
-    const initialNewConfig = getOceanConfig(Number(chainId.replace('0x', '')))
+    const initialNewConfig = getOceanConfig(
+      typeof chainId === 'string' ? Number(chainId.replace('0x', '')) : chainId
+    )
 
     const newConfig = {
       ...initialNewConfig,
@@ -28,20 +31,22 @@ export function NetworkMonitor(): ReactElement {
     }
   }
 
-  // Re-connect on mount when network is different from user network
+  // Re-connect on mount when network is different from user network.
-  // useEffect(() => {
+  // Bit nasty to just overwrite the initialConfig passed to OceanProvider
-  //   if (!web3 || !networkId) return
+  // while it's connecting to that, but YOLO.
+  useEffect(() => {
+    if (!web3 || !networkId) return
 
-  //   async function init() {
+    async function init() {
-  //     if (
+      if (
-  //       (await web3.eth.getChainId()) ===
+        (await web3.eth.getChainId()) ===
-  //       (config as ConfigHelperConfig).networkId
+        (config as ConfigHelperConfig).networkId
-  //     )
+      )
-  //       return
+        return
-  //     await handleNetworkChanged(networkId)
+      await handleNetworkChanged(networkId)
-  //   }
+    }
-  //   init()
+    init()
-  // }, [web3, networkId])
+  }, [web3, networkId])
 
   // Handle network change events
   useEffect(() => {