WIP: decouple handling oceanConfig with burner wallet & metamask

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)

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 {

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 (
             <User.Consumer>

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() {