added networkmonitor

example/src/App.tsx

@@ -9,6 +9,7 @@ import { ConsumeDdo } from './ConsumeDdo'
 
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import Torus from '@toruslabs/torus-embed'
+import { NetworkMonitor } from './NetworkMonitor'
 
 // factory Address needs to be updated each time you deploy the contract on local network
 const config = {
@@ -52,8 +53,9 @@ function App() {
   }, [])
 
   return (
-    <OceanProvider config={configRinkeby} web3ModalOpts={web3ModalOpts}>
+    <OceanProvider initialConfig={configRinkeby} web3ModalOpts={web3ModalOpts}>
       <div className="container">
+        <NetworkMonitor/>
         <div>
           <Wallet />
         </div>

example/src/NetworkMonitor.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import { ConfigHelper } from '@oceanprotocol/lib'
+import { useEffect } from 'react'
+
+export function NetworkMonitor() {
+    const { connect, web3Provider } = useOcean()
+
+    const handleNetworkChanged = () => {
+        // const config = getOceanConfig(chainId)
+        const config = new ConfigHelper().getConfig('rinkeby')
+        connect(config)
+    }
+    useEffect(() => {
+
+        if (!web3Provider) return
+
+        web3Provider.on('chainChanged', handleNetworkChanged)
+
+        return () => {
+            web3Provider.removeListener('chainChanged', handleNetworkChanged)
+        }
+    }, [web3Provider])
+
+    return (
+        <>
+        </>
+    )
+}

src/hooks/useMetadata/useMetadata.ts

@@ -59,7 +59,7 @@ function useMetadata(did?: DID | string): UseMetadata {
       setTitle(metadata.main.name)
     }
     init()
-  }, [])
+  }, [ocean])
 
   return {
     ddo,

src/providers/OceanProvider/OceanProvider.tsx

@@ -38,12 +38,10 @@ const OceanContext = createContext(null)
 function OceanProvider({
   initialConfig,
   web3ModalOpts,
-  handleNetworkChanged,
   children
 }: {
   initialConfig: Config
   web3ModalOpts?: Partial<ICoreOptions>
-  handleNetworkChanged: (networkId: string | number) => Promise<void>
   children: any
 }): ReactElement {
   const [web3, setWeb3] = useState<Web3 | undefined>()
@@ -148,11 +146,11 @@ function OceanProvider({
 
     if (web3Provider !== undefined && web3Provider !== null) {
       web3Provider.on('accountsChanged', handleAccountsChanged)
-      web3Provider.on('chainChanged', handleNetworkChanged)
+      // web3Provider.on('chainChanged', handleNetworkChanged)
 
       return () => {
         web3Provider.removeListener('accountsChanged', handleAccountsChanged)
-        web3Provider.removeListener('chainChanged', handleNetworkChanged)
+        //  web3Provider.removeListener('chainChanged', handleNetworkChanged)
       }
     }
   }, [web3Modal, web3Provider])
@@ -175,6 +173,7 @@ function OceanProvider({
           logout,
           refreshBalance
         } as OceanProviderValue
+
       }
     >
       {children}