initial prototype

.prettierrc

@@ -1,6 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-    "trailingComma": "none",
-    "tabWidth": 2
+  "trailingComma": "none"
 }

client/src/components/molecules/AssetTeaser.tsx

@@ -46,7 +46,7 @@ const AssetTeaser = ({
                     />
                 )}
                 <h1>{main.name}</h1>
-
+                <h2>test</h2>
                 {!minimal && (
                     <div className={styles.description}>
                         <Dotdotdot clamp={3}>

client/src/components/molecules/NetworkSwitcher.tsx

@@ -1,15 +1,30 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import { CONNECTIONS } from '../../config'
+import { User } from '../../context'
 
 /* NETWORK SWITCHER */
 
 const urlParams = new URLSearchParams(window.location.search)
 const networkFromParam = urlParams.get('network') || 'pacific'
-const idx = Object.keys(CONNECTIONS).indexOf(networkFromParam)
-const commonsNetwork = Object.values(CONNECTIONS)[idx] // TypeScript won't let me access CONNECTIONS[networkFromParam] directly
 
-console.log(commonsNetwork)
+// console.log(Object.keys(CONNECTIONS))
 
 export function NetworkSwitcher() {
-  return null
+    const userContext = useContext(User)
+    const switchNetwork = (networkName: string): any => {
+        const idx = Object.keys(CONNECTIONS).indexOf(networkName)
+        userContext.switchNetwork(networkName, Object.values(CONNECTIONS)[idx]) // TypeScript won't let me access CONNECTIONS[networkName] directly
+    }
+    return (
+        <div>
+            <ul>
+                {Object.keys(CONNECTIONS).map((networkName, i) => (
+                    <li key={i} onClick={() => switchNetwork(networkName)}>
+                        {networkName}
+                    </li>
+                ))}
+            </ul>
+            <em>{userContext.network}</em>
+        </div>
+    )
 }

client/src/config.ts

@@ -4,6 +4,24 @@
 export const serviceUri =
     process.env.REACT_APP_SERVICE_URI || 'http://localhost:4000'
 
+//
+// APP CONFIG
+//
+export const verbose = true
+export const analyticsId = 'UA-60614729-11'
+
+export const showChannels =
+    process.env.REACT_APP_SHOW_CHANNELS === 'true' || false
+export const allowPricing =
+    process.env.REACT_APP_ALLOW_PRICING === 'true' || false
+export const showRequestTokens =
+    process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON === 'true' || false
+// https://ipfs.github.io/public-gateway-checker/
+export const ipfsGatewayUri =
+    process.env.REACT_APP_IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
+export const ipfsNodeUri =
+    process.env.REACT_APP_IPFS_NODE_URI || 'https://ipfs.infura.io:5001'
+
 //
 // OCEAN REMOTE CONNECTIONS
 //
@@ -23,47 +41,32 @@ export const secretStoreUri =
 export const faucetUri =
     process.env.REACT_APP_FAUCET_URI || 'https://faucet.oceanprotocol.com'
 
-//
-// APP CONFIG
-//
-export const verbose = true
-export const analyticsId = 'UA-60614729-11'
-
-export const showChannels =
-  process.env.REACT_APP_SHOW_CHANNELS === 'true' || false
-export const allowPricing =
-  process.env.REACT_APP_ALLOW_PRICING === 'true' || false
-export const showRequestTokens =
-  process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON === 'true' || false
-// https://ipfs.github.io/public-gateway-checker/
-export const ipfsGatewayUri =
-  process.env.REACT_APP_IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
-export const ipfsNodeUri =
-  process.env.REACT_APP_IPFS_NODE_URI || 'https://ipfs.infura.io:5001'
-
 export const CONNECTIONS = {
-  pacific: {
+    Pacific: {
         nodeUri: 'https://pacific.oceanprotocol.com',
         aquariusUri: 'https://aquarius.commons.oceanprotocol.com',
         brizoUri: 'https://brizo.commons.oceanprotocol.com',
         brizoAddress: '0x008c25ed3594e094db4592f4115d5fa74c4f41ea',
         secretStoreUri: 'https://secret-store.oceanprotocol.com',
-    faucetUri: 'https://faucet.oceanprotocol.com'
+        //faucetUri: 'https://faucet.oceanprotocol.com',
+        verbose: true
     },
-  nile: {
+    Nile: {
         nodeUri: 'https://nile.dev-ocean.com',
         aquariusUri: 'https://aquarius.nile.dev-ocean.com',
         brizoUri: 'https://brizo.nile.dev-ocean.com',
         brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
         secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
-    faucetUri: 'https://faucet.nile.dev-ocean.com'
+        //faucetUri: 'https://faucet.nile.dev-ocean.com',
+        verbose: true
     },
-  duero: {
+    Duero: {
         nodeUri: 'https://duero.dev-ocean.com',
         aquariusUri: 'https://aquarius.duero.dev-ocean.com',
         brizoUri: 'https://brizo.duero.dev-ocean.com',
         brizoAddress: '0x9d4ed58293f71122ad6a733c1603927a150735d0',
         secretStoreUri: 'https://secret-store.duero.dev-ocean.com',
-    faucetUri: 'https://faucet.duero.dev-ocean.com'
+        //faucetUri: 'https://faucet.duero.dev-ocean.com',
+        verbose: true
     }
 }

client/src/context/UserProvider.tsx

@@ -6,7 +6,6 @@ import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
 import MarketProvider from './MarketProvider'
 import { MetamaskProvider } from './MetamaskProvider'
 import { BurnerWalletProvider } from './BurnerWalletProvider'
-
 import { NetworkSwitcher } from '../components/molecules/NetworkSwitcher'
 
 import {
@@ -15,9 +14,19 @@ import {
     brizoAddress,
     nodeUri,
     secretStoreUri,
-  verbose
+    verbose,
+    CONNECTIONS
 } from '../config'
 
+const oceanConfig = {
+    nodeUri,
+    aquariusUri,
+    brizoUri,
+    brizoAddress,
+    secretStoreUri,
+    verbose
+}
+
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
 const DEFAULT_WEB3 = new Web3(new Web3.providers.HttpProvider(nodeUri)) // default web3
@@ -35,6 +44,7 @@ interface UserProviderState {
     network: string
     web3: Web3
     ocean: Ocean
+    switchNetwork(network: string, config: Config): any
     requestFromFaucet(account: string): Promise<FaucetResponse>
     loginMetamask(): Promise<any>
     loginBurnerWallet(): Promise<any>
@@ -43,17 +53,48 @@ interface UserProviderState {
     message: string
 }
 
-const oceanConfig = {
-  nodeUri,
-  aquariusUri,
-  brizoUri,
-  brizoAddress,
-  secretStoreUri,
-  verbose
-}
-
 export default class UserProvider extends PureComponent<{}, UserProviderState> {
+    public state = {
+        isLogged: false,
+        isBurner: false,
+        isWeb3Capable: Boolean(window.web3 || window.ethereum),
+        isLoading: true,
+        balance: {
+            eth: 0,
+            ocn: 0
+        },
+        network: '',
+        web3: DEFAULT_WEB3,
+        account: '',
+        ocean: {} as any,
+        requestFromFaucet: () => requestFromFaucet(''),
+        loginMetamask: () => this.loginMetamask(),
+        switchNetwork: (network: string, config: Config) =>
+            this.switchNetwork(network, config),
+        loginBurnerWallet: () => this.loginBurnerWallet(),
+        logoutBurnerWallet: () => this.logoutBurnerWallet(),
+        loadOcean: (config: Config) => this.loadOcean(config),
+        message: 'Connecting to Ocean...'
+    }
+
+    private switchNetwork = (network: string, config: Config) => {
+        console.log({ network, config, oceanConfig })
+        const nodeUrl: any = config.nodeUri
+        this.setState(
+            {
+                network,
+                web3: new Web3(new Web3.providers.HttpProvider(nodeUrl))
+            },
+            () =>
+                this.loadOcean({
+                    web3Provider: this.state.web3,
+                    ...config
+                })
+        )
+    }
+
     private loginMetamask = async () => {
+        console.log('loginMetamask')
         const metamaskProvider = new MetamaskProvider()
         await metamaskProvider.startLogin()
         const web3 = metamaskProvider.getProvider()
@@ -73,6 +114,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     }
 
     private loginBurnerWallet = async () => {
+        console.log('loginMetamask')
         const burnerwalletProvider = new BurnerWalletProvider()
         await burnerwalletProvider.startLogin()
         const web3 = burnerwalletProvider.getProvider()
@@ -96,27 +138,6 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         await burnerwalletProvider.logout()
     }
 
-  public state = {
-    isLogged: false,
-    isBurner: false,
-    isWeb3Capable: Boolean(window.web3 || window.ethereum),
-    isLoading: true,
-    balance: {
-      eth: 0,
-      ocn: 0
-    },
-    network: '',
-    web3: DEFAULT_WEB3,
-    account: '',
-    ocean: {} as any,
-    requestFromFaucet: () => requestFromFaucet(''),
-    loginMetamask: () => this.loginMetamask(),
-    loginBurnerWallet: () => this.loginBurnerWallet(),
-    logoutBurnerWallet: () => this.logoutBurnerWallet(),
-    loadOcean: (config: Config) => this.loadOcean(config),
-    message: 'Connecting to Ocean...'
-  }
-
     private accountsInterval: any = null
 
     private networkInterval: any = null
@@ -127,7 +148,10 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
 
     private initAccountsPoll() {
         if (!this.accountsInterval) {
-      this.accountsInterval = setInterval(this.fetchAccounts, POLL_ACCOUNTS)
+            this.accountsInterval = setInterval(
+                this.fetchAccounts,
+                POLL_ACCOUNTS
+            )
         }
     }
 
@@ -138,6 +162,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     }
 
     private loadDefaultWeb3 = async () => {
+        console.log('loadDefaultWeb3')
         this.setState(
             {
                 isLogged: false,
@@ -154,6 +179,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     }
 
     private loadOcean = async (config: Config) => {
+        console.log('load ocean', config)
         const { ocean } = await provideOcean({
             web3Provider: this.state.web3,
             ...config
@@ -170,6 +196,8 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         const logType = localStorage.getItem('logType')
         const metamaskProvider = new MetamaskProvider()
 
+        console.log('BOOTSTRAP', { logType })
+
         switch (logType) {
             case 'Metamask':
                 if (
@@ -233,7 +261,11 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
                     await this.fetchBalance(accounts[0])
                 }
             } else {
-        !isLogged && this.setState({ isLogged: false, account: '' })
+                !isLogged &&
+                    this.setState({
+                        isLogged: false,
+                        account: ''
+                    })
             }
         }
     }
@@ -248,11 +280,14 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
 
     private fetchNetwork = async () => {
         const { ocean } = this.state
+        console.log('1 this.state.network', this.state.network)
         let network = 'Unknown'
         if (ocean.keeper) {
             network = await ocean.keeper.getNetworkName()
         }
+
         network !== this.state.network && this.setState({ network })
+        console.log('2 this.state.network', this.state.network)
     }
 
     public render() {

client/src/context/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Config } from '@oceanprotocol/squid'
 
 export const User = React.createContext({
     isLogged: false,
@@ -13,6 +14,9 @@ export const User = React.createContext({
         ocn: 0
     },
     network: '',
+    switchNetwork: (network: string, config: Config) => {
+        /* empty */
+    },
     requestFromFaucet: () => {
         /* empty */
     },