diff --git a/example/src/App.tsx b/example/src/App.tsx index 3acf7f9..565fb4f 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..d14abe2 --- /dev/null +++ b/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 <> +} 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 4c2c29a..d5378e1 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/src/providers/OceanProvider/OceanProvider.tsx @@ -28,7 +28,7 @@ interface OceanProviderValue { balance: Balance chainId: number | undefined status: ProviderStatus - connect: (opts?: Partial) => Promise + connect: (config: Config) => Promise logout: () => Promise refreshBalance: () => Promise } @@ -36,11 +36,11 @@ interface OceanProviderValue { const OceanContext = createContext(null) function OceanProvider({ - config, + initialConfig, web3ModalOpts, children }: { - config: Config + initialConfig: Config web3ModalOpts?: Partial children: any }): ReactElement { @@ -51,6 +51,7 @@ function OceanProvider({ const [chainId, setChainId] = useState() const [account, setAccount] = useState() const [accountId, setAccountId] = useState() + const [config, setConfig] = useState(initialConfig) const [balance, setBalance] = useState({ 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])