hooks update, network monitor

package-lock.json

@@ -3606,9 +3606,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.32",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.32.tgz",
-      "integrity": "sha512-MN0/kpAGfqod9mFKbynhfElMYqYSZuT5as/Nnr3YKAuaCDiuTGc7jqF2nnNZraN5nOcti8DKHkCLsLF9qNNRpw==",
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.34.tgz",
+      "integrity": "sha512-xgKNuVszU0eYtDnByPaI0PSZgO1S+haWlMOGvmLTfxiKv2A/m2qK09gFiY5SgiGsPozphG5daTw7M0dyf0tD1w==",
       "requires": {
         "@oceanprotocol/lib": "^0.1.11",
         "axios": "^0.19.2",

package.json

@@ -23,7 +23,7 @@
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.1.11",
-    "@oceanprotocol/react": "^0.0.32",
+    "@oceanprotocol/react": "^0.0.34",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.1.0",

src/helpers/NetworkMonitor.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useOcean } from '@oceanprotocol/react'
+import { ConfigHelper } from '@oceanprotocol/lib'
+import { useEffect } from 'react'
+import { getOceanConfig } from './wrapRootElement'
+
+export function NetworkMonitor() {
+    const { connect, web3Provider } = useOcean()
+
+    const handleNetworkChanged = (chainId: number) => {
+        // temp hack
+        let network = ''
+        switch (chainId) {
+            case 1:
+                {
+                    network = 'mainnet'
+                }
+            case 4: {
+                network = 'rinkeby'
+            }
+        }
+        const config = getOceanConfig(network)
+        connect(config)
+    }
+    useEffect(() => {
+        if (!web3Provider) return
+
+        web3Provider.on('chainChanged', handleNetworkChanged)
+
+        return () => {
+            web3Provider.removeListener('chainChanged', handleNetworkChanged)
+        }
+    }, [web3Provider])
+
+    return (<></>)
+}

src/helpers/wrapRootElement.tsx

@@ -3,8 +3,9 @@ import { OceanProvider } from '@oceanprotocol/react'
 import { ConfigHelper } from '@oceanprotocol/lib'
 import { web3ModalOpts } from '../utils/wallet'
 import { useSiteMetadata } from '../hooks/useSiteMetadata'
+import { NetworkMonitor } from './NetworkMonitor'
 
-function getOceanConfig(network: string): ConfigHelper {
+export function getOceanConfig(network: string): ConfigHelper {
   return new ConfigHelper().getConfig(
     network,
     process.env.GATSBY_INFURA_PROJECT_ID
@@ -24,6 +25,7 @@ export default function wrapRootElement({
       initialConfig={oceanInitialConfig}
       web3ModalOpts={web3ModalOpts}
     >
+      <NetworkMonitor/>
       {element}
     </OceanProvider>
   )