From 4b9418e94a6a3ff596863967a79506fae4e9e676 Mon Sep 17 00:00:00 2001 From: Max Berman Date: Tue, 21 Jan 2020 12:41:11 +0100 Subject: [PATCH] WIP: decouple handling oceanConfig with burner wallet & metamask --- .../components/molecules/NetworkSwitcher.tsx | 22 +++++++ .../molecules/VersionNumbers/index.tsx | 2 + .../src/components/organisms/Web3message.tsx | 2 +- client/src/context/UserProvider.tsx | 61 ++++++++++--------- 4 files changed, 58 insertions(+), 29 deletions(-) diff --git a/client/src/components/molecules/NetworkSwitcher.tsx b/client/src/components/molecules/NetworkSwitcher.tsx index 5c46c8c..17bab81 100644 --- a/client/src/components/molecules/NetworkSwitcher.tsx +++ b/client/src/components/molecules/NetworkSwitcher.tsx @@ -1,8 +1,29 @@ import React, { useState, useContext, useEffect, useRef } from 'react' +import Web3 from 'web3' import { urlq, getObjByKey } from '../../utils/utils' import { CONNECTIONS } from '../../config' +import { MetamaskProvider } from '../../context/MetamaskProvider' import { User } from '../../context' import styles from './NetworkSwitcher.module.scss' +import { Ocean, Account, Config } from '@oceanprotocol/squid' + +const isMetaMask = localStorage.getItem('logType') === 'Metamask' + +export const getCurrentNetConfigFromMetamask: any = async () => { + const NETWORKS = { + 2199: 'duero', + 846353: 'pacific', + 8995: 'nile' + } + const metamaskProvider = new MetamaskProvider() + const web3 = metamaskProvider.getProvider() + const netId = await web3.eth.net.getId() + const netName = (NETWORKS as any)[netId] + const netConfig = (CONNECTIONS as any)[netName] + return { netId, web3, netName, netConfig } +} + +//getCurrentNetConfigFromMetamask().then((config: any) => console.log(config)) const defaultNetwork = process.env.REACT_APP_OCEAN_NETWORK || 'pacific' const netUrlParam: string = urlq.get('network') || defaultNetwork @@ -16,6 +37,7 @@ export function NetworkSwitcher() { const [isToggled, setIsToggled] = useState(false) const handleToggle = (e: any) => { + if (isMetaMask) return // avoid click event firing twice if (e.which === 1) { const isClickedInside = node.current.contains(e.target) diff --git a/client/src/components/molecules/VersionNumbers/index.tsx b/client/src/components/molecules/VersionNumbers/index.tsx index 5f5b029..00fa60c 100644 --- a/client/src/components/molecules/VersionNumbers/index.tsx +++ b/client/src/components/molecules/VersionNumbers/index.tsx @@ -15,6 +15,8 @@ import VersionStatus from './VersionStatus' import { NetworkSwitcher, oceanConfig } from '../../molecules/NetworkSwitcher' +console.log(oceanConfig) + const { nodeUri, faucetUri } = oceanConfig interface VersionNumbersProps { diff --git a/client/src/components/organisms/Web3message.tsx b/client/src/components/organisms/Web3message.tsx index a0e0656..8270854 100644 --- a/client/src/components/organisms/Web3message.tsx +++ b/client/src/components/organisms/Web3message.tsx @@ -20,7 +20,7 @@ export default class Web3message extends PureComponent<{ extended?: boolean }> { private Message = () => { const { networkMatch, network } = this.context - console.log(networkMatch) + console.log({ networkMatch }) return ( diff --git a/client/src/context/UserProvider.tsx b/client/src/context/UserProvider.tsx index 8f331a0..c0f9959 100644 --- a/client/src/context/UserProvider.tsx +++ b/client/src/context/UserProvider.tsx @@ -6,9 +6,14 @@ import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean' import MarketProvider from './MarketProvider' import { MetamaskProvider } from './MetamaskProvider' import { BurnerWalletProvider } from './BurnerWalletProvider' -import { urlq } from '../utils/utils' -import { oceanConfig } from '../components/molecules/NetworkSwitcher' +import { urlq, getObjByKey } from '../utils/utils' +import { + oceanConfig, + getCurrentNetConfigFromMetamask +} from '../components/molecules/NetworkSwitcher' +import { CONNECTIONS } from '../config' +//const nodeUri = oceanConfig.then((c: any) => c.nodeUri) const { nodeUri } = oceanConfig const POLL_ACCOUNTS = 1000 // every 1s @@ -16,8 +21,6 @@ const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min const DEFAULT_WEB3 = new Web3(new Web3.providers.HttpProvider(nodeUri)) // default web3 const networkUrlParam = urlq.get('network') || '' -console.log({ nodeUri }) - interface UserProviderState { isLogged: boolean isBurner: boolean @@ -69,6 +72,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> { } private switchNetwork = async (network: string, config: Config) => { + console.log('TEST') this.setState({ network }, async () => { this.loadOcean({ web3Provider: this.state.web3, @@ -174,30 +178,28 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> { private bootstrap = async () => { const logType = localStorage.getItem('logType') - const metamaskProvider = new MetamaskProvider() - switch (logType) { case 'Metamask': - if ( - (await metamaskProvider.isAvailable()) && - (await metamaskProvider.isLogged()) - ) { - const web3 = metamaskProvider.getProvider() - this.setState( - { - isLogged: true, - web3 - }, - () => { - this.loadOcean({ - web3Provider: this.state.web3, - ...oceanConfig - }) - } - ) - } else { - this.loadDefaultWeb3() - } + await getCurrentNetConfigFromMetamask() + .then((obj: any) => { + console.log(obj) + const { netConfig, web3, netName } = obj + this.setState( + { + isLogged: true, + web3, + network: netName + }, + () => { + this.loadOcean({ + web3Provider: web3, + ...netConfig + }) + } + ) + }) + .catch(() => this.loadDefaultWeb3()) + break case 'BurnerWallet': this.loginBurnerWallet() @@ -261,11 +263,14 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> { let network = 'Unknown' if (ocean.keeper) { network = await ocean.keeper.getNetworkName() + const networkId = await ocean.keeper.getNetworkId() + const netId = await this.state.web3.eth.net.getId() + + console.log('Network Name:', network, networkId, netId) } if (network !== this.state.network) { - this.setState({ network }) + this.setState({ network }, () => {}) } - console.log(await ocean.keeper.getNetworkName()) } public render() {