Merge pull request #73 from oceanprotocol/feature/config

config based on network

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,25 @@
+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

@@ -28,7 +28,7 @@ interface OceanProviderValue {
   balance: Balance
   chainId: number | undefined
   status: ProviderStatus
-  connect: (opts?: Partial<ICoreOptions>) => Promise<void>
+  connect: (config: Config) => Promise<void>
   logout: () => Promise<void>
   refreshBalance: () => Promise<void>
 }
@@ -36,11 +36,11 @@ interface OceanProviderValue {
 const OceanContext = createContext(null)
 
 function OceanProvider({
-  config,
+  initialConfig,
   web3ModalOpts,
   children
 }: {
-  config: Config
+  initialConfig: Config
   web3ModalOpts?: Partial<ICoreOptions>
   children: any
 }): ReactElement {
@@ -51,6 +51,7 @@ function OceanProvider({
   const [chainId, setChainId] = useState<number | undefined>()
   const [account, setAccount] = useState<Account | undefined>()
   const [accountId, setAccountId] = useState<string | undefined>()
+  const [config, setConfig] = useState<Config>(initialConfig)
   const [balance, setBalance] = useState<Balance | undefined>({
     eth: undefined,
     ocean: undefined
@@ -85,10 +86,12 @@ function OceanProvider({
     web3Modal.cachedProvider && connect()
   }, [web3Modal])
 
-  async function connect() {
+  async function connect(newConfig?: Config) {
     try {
       Logger.log('Connecting ...')
 
+      newConfig && setConfig(newConfig)
+
       const provider = await web3Modal.connect()
       setWeb3Provider(provider)
 
@@ -100,8 +103,8 @@ function OceanProvider({
       setChainId(chainId)
       Logger.log('chain id ', chainId)
 
-      config.web3Provider = web3
-      const ocean = await Ocean.getInstance(config)
+      newConfig.web3Provider = web3
+      const ocean = await Ocean.getInstance(newConfig)
       setOcean(ocean)
       Logger.log('Ocean instance created.', ocean)
 
@@ -131,29 +134,11 @@ function OceanProvider({
     web3Modal.clearCachedProvider()
   }
 
-  //
-  // Listen for provider, account & network changes
-  // and react to it
-  //
-
-  // const handleConnect = async (provider: any) => {
-  //   Logger.debug("Handling 'connect' event with payload", provider)
-  // }
-
   const handleAccountsChanged = async (accounts: string[]) => {
     Logger.debug("Handling 'accountsChanged' event with payload", accounts)
     connect()
   }
 
-  const handleNetworkChanged = async (networkId: string | number) => {
-    Logger.debug(
-      "Handling 'chainChanged' event with payload",
-      networkId,
-      status
-    )
-    connect()
-  }
-
   // TODO: #68 Refetch balance periodically, or figure out some event to subscribe to
 
   useEffect(() => {
@@ -161,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])