Merge pull request #72 from oceanprotocol/feature/web3-noweb3-views

web2 and web3

client/package-lock.json

@@ -1026,14 +1026,14 @@
       "integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw=="
     },
     "@oceanprotocol/keeper-contracts": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.9.0.tgz",
-      "integrity": "sha512-QrTCQNiQa9KszH6/dTAS0a8AoW/SIEkZazXTwA2aoePBS0X8fNpsKvT3N2OuR1YPAjCU3rGWzYdV4TNnMNbsSw=="
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.9.1.tgz",
+      "integrity": "sha512-c1LvaH+e1tzow0gZLwSWe19ap+DrZuNmZfxBdwEVEPQXarI0jTXa5qVDoiBow8kBWaqSIUgFAzQOJW8rKdlS1A=="
     },
     "@oceanprotocol/squid": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.0.tgz",
-      "integrity": "sha512-yGu121WJ9XEX1U4ql/p7ISV36fqNydxGBYgXHbOjeXS/kvNFx3hP2emBf4QA12PjPZcmuLz0wE+7GBL4H/v+eA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.1.tgz",
+      "integrity": "sha512-YJewmMIpHG5cjsOsgOynky7z+5YT7l5+niW9AqCMOoMGy76VEe1+6nmAhZ/PB9BtIpYCGWOl1Y68I32qhX9IWQ==",
       "requires": {
         "@oceanprotocol/keeper-contracts": "^0.9.0",
         "bignumber.js": "^8.0.1",

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()
+        try {
+            if (this.state.isWeb3 && window.ethereum) {
+                await window.ethereum.enable()
+                const accounts = await this.state.ocean.accounts.list()
                 if (accounts.length > 0) {
+                    const balance = await accounts[0].getBalance()
                     this.setState({
                         isLogged: true,
-                        isWeb3: true,
-                        account: accounts[0],
-                        web3
+                        balance,
+                        account: accounts[0].getId()
                     })
                 } else {
-                    if (accounts.length === 0 && window.ethereum) {
-                        await window.ethereum.enable()
-                        const newAccounts = await web3.eth.getAccounts()
-                        if (newAccounts.length > 0) {
-                            this.setState({
-                                isLogged: true,
-                                isWeb3: true,
-                                account: newAccounts[0],
-                                web3
-                            })
-                        } else {
-                            // failed to unlock
-                        }
-                    } else {
-                        // no unlock procedure
-                    }
+                    // not unlocked
                 }
-            } catch (e) {
-                // something went wrong, show error?
+            } else {
+                // no metamask/mist, show installation guide!
             }
-        } 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 () => {
-        if (window.web3) {
-            this.setState({ isWeb3: true })
-            const web3 = new Web3(window.web3.currentProvider)
-            try {
-                const accounts = await web3.eth.getAccounts()
+        try {
+            if (window.web3) {
+                const web3 = new Web3(window.web3.currentProvider)
+                const { ocean } = await provideOcean(web3)
+                const accounts = await ocean.accounts.list()
+                const network = await ocean.keeper.getNetworkName()
+                const isNile = network === 'Nile'
                 if (accounts.length > 0) {
+                    const balance = await accounts[0].getBalance()
                     this.setState({
+                        isWeb3: true,
                         isLogged: true,
-                        account: accounts[0],
-                        web3
+                        isNile,
+                        ocean,
+                        web3,
+                        balance,
+                        network,
+                        account: accounts[0].getId(),
+                        isLoading: false
+                    })
+                } else {
+                    this.setState({
+                        isWeb3: true,
+                        isNile,
+                        ocean,
+                        web3,
+                        network,
+                        isLoading: false
                     })
                 }
-            } catch (e) {
-                Logger.log('web3 error', e)
+            } 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
+                })
             }
-        }
-        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 })
         } 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<
@@ -47,49 +48,48 @@ export default class AssetsUser extends PureComponent<
     }
 
     public render() {
-        return (
-            this.context.isNile &&
-            this.context.account && (
-                <div className={styles.assetsUser}>
-                    {this.props.recent && (
-                        <h2 className={styles.subTitle}>
-                            Your Latest Published Data Sets
-                        </h2>
-                    )}
+        return this.context.isNile && this.context.account ? (
+            <div className={styles.assetsUser}>
+                {this.props.recent && (
+                    <h2 className={styles.subTitle}>
+                        Your Latest Published Data Sets
+                    </h2>
+                )}
 
-                    {this.state.isLoading ? (
-                        <Spinner />
-                    ) : this.state.results.length ? (
-                        <>
-                            {this.state.results
-                                .slice(
-                                    0,
-                                    this.props.recent
-                                        ? this.props.recent
-                                        : undefined
-                                )
-                                .filter(asset => !!asset)
-                                .map((asset: any) => (
-                                    <Asset
-                                        list={this.props.list}
-                                        key={asset.id}
-                                        asset={asset}
-                                    />
-                                ))}
-                            {this.props.recent && (
-                                <Link className={styles.link} to={'/history'}>
-                                    All Data Sets
-                                </Link>
-                            )}
-                        </>
-                    ) : (
-                        <div className={styles.empty}>
-                            <p>No Data Sets Yet.</p>
-                            <Link to="/publish">+ Publish A Data Set</Link>
-                        </div>
-                    )}
-                </div>
-            )
+                {this.state.isLoading ? (
+                    <Spinner />
+                ) : this.state.results.length ? (
+                    <>
+                        {this.state.results
+                            .slice(
+                                0,
+                                this.props.recent
+                                    ? this.props.recent
+                                    : undefined
+                            )
+                            .filter(asset => !!asset)
+                            .map((asset: any) => (
+                                <Asset
+                                    list={this.props.list}
+                                    key={asset.id}
+                                    asset={asset}
+                                />
+                            ))}
+                        {this.props.recent && (
+                            <Link className={styles.link} to={'/history'}>
+                                All Data Sets
+                            </Link>
+                        )}
+                    </>
+                ) : (
+                    <div className={styles.empty}>
+                        <p>No Data Sets Yet.</p>
+                        <Link to="/publish">+ Publish A Data Set</Link>
+                    </div>
+                )}
+            </div>
+        ) : (
+            <Web3message />
         )
     }
 }

client/src/components/organisms/Web3message.tsx

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

client/src/config/config.ts

@@ -13,24 +13,32 @@ export const nodeHost = process.env.REACT_APP_NODE_HOST || 'nile.dev-ocean.com'
 export const nodePort = process.env.REACT_APP_NODE_PORT || 443
 
 export const aquariusScheme = process.env.REACT_APP_AQUARIUS_SCHEME || 'https'
-export const aquariusHost = process.env.REACT_APP_AQUARIUS_HOST || 'nginx-aquarius.dev-ocean.com'
+export const aquariusHost =
+    process.env.REACT_APP_AQUARIUS_HOST || 'nginx-aquarius.dev-ocean.com'
 export const aquariusPort = process.env.REACT_APP_AQUARIUS_PORT || 443
 
 export const brizoScheme = process.env.REACT_APP_BRIZO_SCHEME || 'https'
-export const brizoHost = process.env.REACT_APP_BRIZO_HOST || 'nginx-brizo.dev-ocean.com'
+export const brizoHost =
+    process.env.REACT_APP_BRIZO_HOST || 'nginx-brizo.dev-ocean.com'
 export const brizoPort = process.env.REACT_APP_BRIZO_PORT || 443
-export const brizoAddress = process.env.REACT_APP_BRIZO_ADDRESS || '0x376817c638d2a04f475a73af37f7b51a2862d567'
+export const brizoAddress =
+    process.env.REACT_APP_BRIZO_ADDRESS ||
+    '0x376817c638d2a04f475a73af37f7b51a2862d567'
 
 export const parityScheme = process.env.REACT_APP_PARITY_SCHEME || 'https'
-export const parityHost = process.env.REACT_APP_PARITY_HOST || 'nile.dev-ocean.com'
+export const parityHost =
+    process.env.REACT_APP_PARITY_HOST || 'nile.dev-ocean.com'
 export const parityPort = process.env.REACT_APP_PARITY_PORT || 443
 
-export const secretStoreScheme = process.env.REACT_APP_SECRET_STORE_SCHEME || 'https'
-export const secretStoreHost = process.env.REACT_APP_SECRET_STORE_HOST || 'secret-store.dev-ocean.com'
+export const secretStoreScheme =
+    process.env.REACT_APP_SECRET_STORE_SCHEME || 'https'
+export const secretStoreHost =
+    process.env.REACT_APP_SECRET_STORE_HOST || 'secret-store.dev-ocean.com'
 export const secretStorePort = process.env.REACT_APP_SECRET_STORE_PORT || 443
 
 export const faucetScheme = process.env.REACT_APP_FAUCET_SCHEME || 'https'
-export const faucetHost = process.env.REACT_APP_FAUCET_HOST || 'faucet.nile.dev-ocean.com'
+export const faucetHost =
+    process.env.REACT_APP_FAUCET_HOST || 'faucet.nile.dev-ocean.com'
 export const faucetPort = process.env.REACT_APP_FAUCET_PORT || 443
 
 //
@@ -65,4 +73,3 @@ export const faucetPort = process.env.REACT_APP_FAUCET_PORT || 443
 // export const faucetPort = 3001
 
 export const verbose = true
-

client/src/data/menu.json

@@ -1,18 +1,15 @@
 [
   {
     "title": "Publish",
-    "link": "/publish",
-    "web3": true
+    "link": "/publish"
   },
   {
     "title": "History",
-    "link": "/history",
-    "web3": true
+    "link": "/history"
   },
   {
     "title": "Faucet",
-    "link": "/faucet",
-    "web3": true
+    "link": "/faucet"
   },
   {
     "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,13 +79,31 @@ export default class AssetFile extends PureComponent<
                 {this.state.isLoading ? (
                     <Spinner message={this.state.message} />
                 ) : (
-                    <Button
-                        primary
-                        className={styles.buttonMain}
-                        onClick={() => this.purchaseAsset(ddo, file.index)}
-                    >
-                        Get file
-                    </Button>
+                    <User.Consumer>
+                        {states =>
+                            states.isLogged ? (
+                                <Button
+                                    primary
+                                    className={styles.buttonMain}
+                                    onClick={() =>
+                                        this.purchaseAsset(ddo, file.index)
+                                    }
+                                >
+                                    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,11 @@ 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

@@ -10,15 +10,13 @@ interface FaucetState {
     isLoading: boolean
     success?: string
     error?: string
-    eth?: string
 }
 
 export default class Faucet extends PureComponent<{}, FaucetState> {
     public state = {
         isLoading: false,
         success: undefined,
-        error: undefined,
-        eth: 'xx'
+        error: undefined
     }
 
     private getTokens = async (requestFromFaucet: () => any) => {
@@ -47,14 +45,20 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
 
     private RequestMarkup = () => (
         <User.Consumer>
-            {states => (
-                <Button
-                    primary
-                    onClick={() => this.getTokens(states.requestFromFaucet)}
-                >
-                    Request Ether
-                </Button>
-            )}
+            {states =>
+                states.isLogged ? (
+                    <Button
+                        primary
+                        onClick={() => this.getTokens(states.requestFromFaucet)}
+                    >
+                        Request Ether
+                    </Button>
+                ) : states.isWeb3 ? (
+                    <Web3message />
+                ) : (
+                    <Web3message />
+                )
+            }
         </User.Consumer>
     )
 
@@ -93,7 +97,9 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
                 title="Faucet"
                 description="Shower yourself with some Ether for the Ocean POA network."
             >
-                <Web3message />
+                <User.Consumer>
+                    {states => !states.isNile && <Web3message />}
+                </User.Consumer>
 
                 <this.ActionMarkup />
             </Route>

client/src/routes/Publish/Step.tsx

@@ -158,9 +158,21 @@ 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>
                                 )
                             }

server/src/routes/UrlCheckRouter.ts

@@ -22,7 +22,10 @@ export class UrlCheckRouter {
                 headers: { Range: 'bytes=0-' }
             },
             (error, response) => {
-                if (response && response.statusCode.toString().startsWith('2')) {
+                if (
+                    response &&
+                    response.statusCode.toString().startsWith('2')
+                ) {
                     const result: any = {}
                     result.found = true