web2 and web3

client/src/App.tsx

@@ -39,7 +39,7 @@ interface AppState {
     }
     network: string
     web3: Web3
-    ocean: {}
+    ocean: any
     startLogin: () => void
     message: string
 }
@@ -95,7 +95,7 @@ class App extends Component<{}, AppState> {
             )
         ),
         account: '',
-        ocean: {},
+        ocean: {} as any,
         startLogin: this.startLogin,
         requestFromFaucet: this.requestFromFaucet,
         message: 'Connecting to Ocean...'
@@ -106,73 +106,77 @@ class App extends Component<{}, AppState> {
     }
 
     private startLoginProcess = async () => {
-        if (window.web3) {
-            const web3 = new Web3(window.web3.currentProvider)
         try {
-                const accounts = await web3.eth.getAccounts()
+            if (this.state.isWeb3 && window.ethereum) {
-                if (accounts.length > 0) {
-                    this.setState({
-                        isLogged: true,
-                        isWeb3: true,
-                        account: accounts[0],
-                        web3
-                    })
-                } else {
-                    if (accounts.length === 0 && window.ethereum) {
                 await window.ethereum.enable()
-                        const newAccounts = await web3.eth.getAccounts()
+                const accounts = await this.state.ocean.accounts.list()
-                        if (newAccounts.length > 0) {
+                if (accounts.length > 0) {
+                    const balance = await accounts[0].getBalance()
                     this.setState({
                         isLogged: true,
-                                isWeb3: true,
+                        balance,
-                                account: newAccounts[0],
+                        account: accounts[0].getId()
-                                web3
                     })
                 } else {
-                            // failed to unlock
+                    // not unlocked
-                        }
-                    } else {
-                        // no unlock procedure
-                    }
-                }
-            } catch (e) {
-                // something went wrong, show error?
                 }
             } else {
                 // no metamask/mist, show installation guide!
             }
+        } catch (e) {
+            Logger.log('error logging', e)
+            // error in logging process
+            // show error
+            // rerun bootstrap process?
+        }
     }
 
     private bootstrap = async () => {
+        try {
             if (window.web3) {
-            this.setState({ isWeb3: true })
                 const web3 = new Web3(window.web3.currentProvider)
-            try {
+                const { ocean } = await provideOcean(web3)
-                const accounts = await web3.eth.getAccounts()
-                if (accounts.length > 0) {
-                    this.setState({
-                        isLogged: true,
-                        account: accounts[0],
-                        web3
-                    })
-                }
-            } catch (e) {
-                Logger.log('web3 error', e)
-            }
-        }
-        try {
-            const { ocean } = await provideOcean()
-            this.setState({
-                isLoading: false,
-                ocean
-            })
                 const accounts = await ocean.accounts.list()
-            const balance = await accounts[0].getBalance()
                 const network = await ocean.keeper.getNetworkName()
                 const isNile = network === 'Nile'
-            this.setState({ balance, network, isNile })
+                if (accounts.length > 0) {
+                    const balance = await accounts[0].getBalance()
+                    this.setState({
+                        isWeb3: true,
+                        isLogged: true,
+                        isNile,
+                        ocean,
+                        web3,
+                        balance,
+                        network,
+                        account: accounts[0].getId(),
+                        isLoading: false,
+                    })
+                } else {
+                    this.setState({
+                        isWeb3: true,
+                        isNile,
+                        ocean,
+                        web3,
+                        network,
+                        isLoading: false
+                    })
+                }
+            } else {
+                const { ocean } = await provideOcean(this.state.web3)
+                const network = await ocean.keeper.getNetworkName()
+                const isNile = network === 'Nile'
+                this.setState({
+                    isNile,
+                    ocean,
+                    network,
+                    isLoading: false
+                })
+            }
         } catch (e) {
-            Logger.log('ocean/balance error', e)
+            // error in bootstrap process
+            // show error connecting to ocean
+            Logger.log('web3 error', e)
             this.setState({
                 isLoading: false
             })

client/src/components/organisms/AssetsUser.tsx

@@ -4,6 +4,7 @@ import { Logger } from '@oceanprotocol/squid'
 import { User } from '../../context/User'
 import Spinner from '../atoms/Spinner'
 import Asset from '../molecules/Asset'
+import Web3message from './Web3message'
 import styles from './AssetsUser.module.scss'
 
 export default class AssetsUser extends PureComponent<
@@ -49,7 +50,7 @@ export default class AssetsUser extends PureComponent<
     public render() {
         return (
             this.context.isNile &&
-            this.context.account && (
+            this.context.account ? (
                 <div className={styles.assetsUser}>
                     {this.props.recent && (
                         <h2 className={styles.subTitle}>
@@ -89,6 +90,8 @@ export default class AssetsUser extends PureComponent<
                         </div>
                     )}
                 </div>
+            ) : (
+                <Web3message />
             )
         )
     }

client/src/components/organisms/Web3message.tsx

@@ -26,9 +26,9 @@ export default class Web3message extends PureComponent {
     public noWeb3() {
         return (
             <div className={styles.message}>
-                <AccountStatus className={styles.status} /> No Web3 Browser. For
+                <AccountStatus className={styles.status} /> Not a Web3 Browser. For
-                publishing an asset you need to{' '}
+                publishing or consuming an asset you need to{' '}
-                <a href="https://docs.oceanprotocol.com/tutorials/metamask-setup/">
+                <a href="https://docs.oceanprotocol.com/tutorials/metamask-setup/" target="_blank">
                     setup MetaMask
                 </a>{' '}
                 or use any other Web3-capable plugin or browser.

client/src/data/menu.json

@@ -1,18 +1,15 @@
 [
   {
     "title": "Publish",
-    "link": "/publish",
+    "link": "/publish"
-    "web3": true
   },
   {
     "title": "History",
-    "link": "/history",
+    "link": "/history"
-    "web3": true
   },
   {
     "title": "Faucet",
-    "link": "/faucet",
+    "link": "/faucet"
-    "web3": true
   },
   {
     "title": "About",

client/src/ocean.ts

@@ -1,4 +1,5 @@
 import { Ocean } from '@oceanprotocol/squid'
+import Web3 from 'web3'
 
 import {
     aquariusHost,
@@ -20,7 +21,7 @@ import {
     verbose
 } from './config/config'
 
-export async function provideOcean() {
+export async function provideOcean(web3provider: Web3) {
     const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
     const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
     const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
@@ -28,6 +29,7 @@ export async function provideOcean() {
     const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
 
     const config = {
+        web3provider,
         nodeUri,
         aquariusUri,
         brizoUri,
@@ -37,7 +39,7 @@ export async function provideOcean() {
         verbose
     }
 
-    const ocean = await Ocean.getInstance(config)
+    const ocean: Ocean = await Ocean.getInstance(config)
 
     return { ocean }
 }

client/src/routes/Details/AssetFile.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
 import filesize from 'filesize'
-import { User } from '../../context/User'
 import Button from '../../components/atoms/Button'
 import Spinner from '../../components/atoms/Spinner'
+import { User } from '../../context/User'
 import styles from './AssetFile.module.scss'
 
 interface AssetFileProps {
@@ -79,6 +79,9 @@ export default class AssetFile extends PureComponent<
                 {this.state.isLoading ? (
                     <Spinner message={this.state.message} />
                 ) : (
+                    <User.Consumer>
+                        {states =>
+                            states.isLogged ? (
                                 <Button
                                     primary
                                     className={styles.buttonMain}
@@ -86,6 +89,17 @@ export default class AssetFile extends PureComponent<
                                 >
                                     Get file
                                 </Button>
+                            ) :
+                            states.isWeb3 && (
+                                <Button
+                                    primary
+                                    className={styles.buttonMain}
+                                    onClick={states.startLogin}>
+                                    Get file
+                                </Button>
+                            )
+                        }
+                    </User.Consumer>
                 )}
 
                 {this.state.error !== '' && (

client/src/routes/Details/AssetFilesDetails.tsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react'
 import AssetFile from './AssetFile'
+import { User } from '../../context/User'
+import Web3message from '../../components/organisms/Web3message'
 import styles from './AssetFilesDetails.module.scss'
 
 export default class AssetFilesDetails extends PureComponent<{
@@ -16,6 +18,13 @@ export default class AssetFilesDetails extends PureComponent<{
                         <AssetFile key={file.index} ddo={ddo} file={file} />
                     ))}
                 </div>
+                <User.Consumer>
+                    {states =>
+                        (!states.isNile || !states.isLogged) && (
+                            <Web3message />
+                        )
+                    }
+                </User.Consumer>
             </>
         ) : (
             <div>No files attached.</div>

client/src/routes/Faucet.tsx

@@ -47,14 +47,25 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
 
     private RequestMarkup = () => (
         <User.Consumer>
-            {states => (
+            {states =>
+                states.isLogged ? (
                     <Button
                         primary
                         onClick={() => this.getTokens(states.requestFromFaucet)}
                     >
                         Request Ether
                     </Button>
-            )}
+                ) :
+                states.isWeb3 ? (
+                    <Button onClick={states.startLogin}>
+                        Request Ether (unlock Metamask)
+                    </Button>
+                ) : (
+                    <Button onClick={(e: Event) => window.open("https://docs.oceanprotocol.com/tutorials/metamask-setup/", "_blank")}>
+                        Request Ether (install Metamask)
+                    </Button>
+                )
+            }
         </User.Consumer>
     )
 
@@ -93,7 +104,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                 title="Faucet"
                 description="Shower yourself with some Ether for the Ocean POA network."
             >
+                <User.Consumer>
+                    {states =>
+                        !states.isNile && (
                             <Web3message />
+                        )
+                    }
+                </User.Consumer>
 
                 <this.ActionMarkup />
             </Route>

client/src/routes/Publish/Step.tsx

@@ -158,9 +158,17 @@ export default class Step extends PureComponent<StepProps, {}> {
                             {states =>
                                 states.isLogged ? (
                                     <Button primary>Register asset</Button>
-                                ) : (
+                                ) :
+                                states.isWeb3 ? (
                                     <Button onClick={states.startLogin}>
-                                        Register asset (login first)
+                                        Register asset (unlock Metamask)
+                                    </Button>
+                                ) : (
+                                    <Button onClick={(e: Event) => {
+                                            e.preventDefault()
+                                            window.open("https://docs.oceanprotocol.com/tutorials/metamask-setup/", "_blank")
+                                        }}>
+                                        Register asset (install Metamask)
                                     </Button>
                                 )
                             }