Merge branch 'master' into feature/search-tweaks

2023-03-15 18:03:00 +01:00 · 2019-04-08 10:51:12 +02:00 · 2019-04-08 10:51:12 +02:00 · ae2911c689
commit ae2911c689
parent e81e2c866b 3a8ee145c7
12 changed files with 205 additions and 156 deletions
--- a/README.md
+++ b/README.md
@ -10,32 +10,30 @@
 [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
 [![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)

+<img alt="screen shot 2019-02-08 at 16 53 57" src="https://user-images.githubusercontent.com/90316/52489283-27080e80-2bc2-11e9-8ec0-508c21eb86f7.png">
+
 ---

-**This marketplace is deployed under https://commons.oceanprotocol.com and can be used there. Feel free to [report any issues](https://github.com/oceanprotocol/commons/issues) you encounter.**
+### 🦑🦑🦑 This marketplace is deployed under https://commons.oceanprotocol.com and can be used there. Feel free to [report any issues](https://github.com/oceanprotocol/commons/issues) you encounter. 🦑🦑🦑

 If you're a developer and want to contribute to, or want to utilize this marketplace's code in your projects, then keep on reading.

 ---

- [Get Started](#get-started)
-  - [Use with Barge](#use-with-barge)
- [Production](#production)
- [Testing](#testing)
- [Code Style](#code-style)
- [License](#license)
-
-<img alt="screen shot 2019-02-08 at 16 53 57" src="https://user-images.githubusercontent.com/90316/52489283-27080e80-2bc2-11e9-8ec0-508c21eb86f7.png">
-
-## Get Started
-
-To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to [Ocean's Nile test network](https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet) remotely.
+- [🏄 Get Started](#-get-started)
+  - [🐳 Use with Barge](#-use-with-barge)
+- [🛳 Production](#-production)
+- [👩‍🔬 Testing](#-testing)
+- [✨ Code Style](#-code-style)
+- [🏛 License](#-license)

 This repo contains a client and a server, both written in TypeScript:

 - **client**: React app setup with [squid-js](https://github.com/oceanprotocol/squid-js), bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
 - **server**: Node.js app, utilizing [Express](https://expressjs.com). The server provides various microservices, like remote file checking.

+## 🏄 Get Started
+
 To spin up both, the client and the server in a watch mode for local development, execute:

 ```bash
@ -43,12 +41,11 @@ npm install
 npm start
 ```

-This will run both, client and server in development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view the client in the browser.
+Open [http://localhost:3000](http://localhost:3000) to view the client in the browser. The page will reload if you make edits to files in either `./client` or `./server`.

-The page will reload if you make edits to files in either `./client` or `./server`.
+To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to [Ocean's Nile test network](https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet) remotely.

-### Use with Barge
+### 🐳 Use with Barge

 If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local network:

@ -59,9 +56,9 @@ cd barge
 ./start_ocean.sh --latest --no-pleuston --local-spree-node
 ```

-Modify `./client/src/config.ts` to use those local connections.
+Modify `./client/src/config/config.ts` to use those local connections.

-## Production
+## 🛳 Production

 To create a production build of both, the client and the server, run from the root of the project:

@ -71,7 +68,7 @@ npm run build

 Builds the client for production to the `./client/build` folder, and the server into the `./server/dist` folder.

-## Testing
+## 👩‍🔬 Testing

 ```bash
 npm test
@ -79,7 +76,7 @@ npm test

 Launches the test runner in the interactive watch mode.

-## Code Style
+## ✨ Code Style

 For linting and auto-formatting you can use from the root of the project:

@ -91,7 +88,7 @@ npm run lint
 npm run format
 ```

-## License
+## 🏛 License

 ```text
 Copyright 2018 Ocean Protocol Foundation Ltd.
--- a/client/package-lock.json
+++ b/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",
--- a/client/src/App.tsx
+++ b/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
            })
--- a/client/src/components/organisms/AssetsUser.tsx
+++ b/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 />
        )
    }
 }
--- a/client/src/components/organisms/Web3message.tsx
+++ b/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>
--- a/client/src/data/menu.json
+++ b/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",
--- a/client/src/ocean.ts
+++ b/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 }
 }
--- a/client/src/routes/Details/AssetFile.tsx
+++ b/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 !== '' && (
--- a/client/src/routes/Details/AssetFilesDetails.tsx
+++ b/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>
--- a/client/src/routes/Faucet.tsx
+++ b/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>
--- a/client/src/routes/Publish/Step.tsx
+++ b/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>
                                )
                            }
--- a/server/src/routes/UrlCheckRouter.ts
+++ b/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