diff --git a/example/src/App.tsx b/example/src/App.tsx index 3acf7f9..c9016b3 100644 --- a/example/src/App.tsx +++ b/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 ( - +
+
diff --git a/example/src/NetworkMonitor.tsx b/example/src/NetworkMonitor.tsx new file mode 100644 index 0000000..0eb9abd --- /dev/null +++ b/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 ( + <> + + ) +} diff --git a/src/hooks/useMetadata/useMetadata.ts b/src/hooks/useMetadata/useMetadata.ts index 1ce2be9..3d9b037 100644 --- a/src/hooks/useMetadata/useMetadata.ts +++ b/src/hooks/useMetadata/useMetadata.ts @@ -59,7 +59,7 @@ function useMetadata(did?: DID | string): UseMetadata { setTitle(metadata.main.name) } init() - }, []) + }, [ocean]) return { ddo, diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index 18d1eea..6934b82 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/src/providers/OceanProvider/OceanProvider.tsx @@ -38,12 +38,10 @@ const OceanContext = createContext(null) function OceanProvider({ initialConfig, web3ModalOpts, - handleNetworkChanged, children }: { initialConfig: Config web3ModalOpts?: Partial - handleNetworkChanged: (networkId: string | number) => Promise children: any }): ReactElement { const [web3, setWeb3] = useState() @@ -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}