From 1f7be93bf6f1fe818eb8b1007bde2d0dec4fe0c6 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Thu, 6 Aug 2020 16:39:41 +0300 Subject: [PATCH 1/5] config based on network --- src/providers/OceanProvider/OceanProvider.tsx | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index 4c2c29a..1e39007 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,12 +36,14 @@ interface OceanProviderValue { const OceanContext = createContext(null) function OceanProvider({ - config, + initialConfig, web3ModalOpts, + handleNetworkChanged, children }: { - config: Config + initialConfig: Config web3ModalOpts?: Partial + handleNetworkChanged: (networkId: string | number)=>Promise children: any }): ReactElement { const [web3, setWeb3] = useState() @@ -51,6 +53,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 +88,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) @@ -131,28 +136,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 From 56a9531f3ed9ed91910a27351e4d8974420f61a5 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Thu, 6 Aug 2020 16:41:49 +0300 Subject: [PATCH 2/5] format --- src/providers/OceanProvider/OceanProvider.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index 1e39007..cb117ed 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/src/providers/OceanProvider/OceanProvider.tsx @@ -43,7 +43,7 @@ function OceanProvider({ }: { initialConfig: Config web3ModalOpts?: Partial - handleNetworkChanged: (networkId: string | number)=>Promise + handleNetworkChanged: (networkId: string | number) => Promise children: any }): ReactElement { const [web3, setWeb3] = useState() @@ -141,7 +141,6 @@ function OceanProvider({ connect() } - // TODO: #68 Refetch balance periodically, or figure out some event to subscribe to useEffect(() => { From 0498e3ae750fa2a69b45d47a6ef033a4da0ac435 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Thu, 6 Aug 2020 16:45:50 +0300 Subject: [PATCH 3/5] correct config on connect --- src/providers/OceanProvider/OceanProvider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index cb117ed..18d1eea 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/src/providers/OceanProvider/OceanProvider.tsx @@ -105,8 +105,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) From 16ab66695240425b0c95a057fc597964c3f0d98c Mon Sep 17 00:00:00 2001 From: mihaisc Date: Mon, 10 Aug 2020 13:34:54 +0300 Subject: [PATCH 4/5] added networkmonitor --- example/src/App.tsx | 4 ++- example/src/NetworkMonitor.tsx | 29 +++++++++++++++++++ src/hooks/useMetadata/useMetadata.ts | 2 +- src/providers/OceanProvider/OceanProvider.tsx | 7 ++--- 4 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 example/src/NetworkMonitor.tsx 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} From 100903d10b3ea6116c12fe6452bf867122434012 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Tue, 11 Aug 2020 10:30:27 +0300 Subject: [PATCH 5/5] format --- example/src/App.tsx | 2 +- example/src/NetworkMonitor.tsx | 34 ++++++++----------- src/providers/OceanProvider/OceanProvider.tsx | 1 - 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index c9016b3..565fb4f 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -55,7 +55,7 @@ function App() { return (
- +
diff --git a/example/src/NetworkMonitor.tsx b/example/src/NetworkMonitor.tsx index 0eb9abd..d14abe2 100644 --- a/example/src/NetworkMonitor.tsx +++ b/example/src/NetworkMonitor.tsx @@ -4,26 +4,22 @@ import { ConfigHelper } from '@oceanprotocol/lib' import { useEffect } from 'react' export function NetworkMonitor() { - const { connect, web3Provider } = useOcean() + const { connect, web3Provider } = useOcean() - const handleNetworkChanged = () => { - // const config = getOceanConfig(chainId) - const config = new ConfigHelper().getConfig('rinkeby') - connect(config) + 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) } - useEffect(() => { + }, [web3Provider]) - if (!web3Provider) return - - web3Provider.on('chainChanged', handleNetworkChanged) - - return () => { - web3Provider.removeListener('chainChanged', handleNetworkChanged) - } - }, [web3Provider]) - - return ( - <> - - ) + return <> } diff --git a/src/providers/OceanProvider/OceanProvider.tsx b/src/providers/OceanProvider/OceanProvider.tsx index 6934b82..d5378e1 100644 --- a/src/providers/OceanProvider/OceanProvider.tsx +++ b/src/providers/OceanProvider/OceanProvider.tsx @@ -173,7 +173,6 @@ function OceanProvider({ logout, refreshBalance } as OceanProviderValue - } > {children}