Merge branch 'master' into feature/deploy_on_k8s

.bumpversion.cfg

@@ -0,0 +1,7 @@
+[bumpversion]
+current_version = 0.1.2
+
+[bumpversion:file:package.json]
+search = "version": "{current_version}",
+replace = "version": "{new_version}",
+

README.md

@@ -24,6 +24,8 @@ If you're a developer and want to contribute to, or want to utilize this marketp
   - [🐳 Use with Barge](#-use-with-barge)
 - [🛳 Production](#-production)
 - [👩‍🔬 Testing](#-testing)
+- [🎁 Contributing](#-contributing)
+- [⬆️ Bumping version](#-bumping-version)
 - [✨ Code Style](#-code-style)
 - [🏛 License](#-license)
 
@@ -76,6 +78,19 @@ npm test
 
 Launches the test runner in the interactive watch mode.
 
+## 🎁 Contributing
+
+See the page titled "[Ways to Contribute](https://docs.oceanprotocol.com/concepts/contributing/)" in the Ocean Protocol documentation.
+
+## ⬆️ Bumping version
+
+Use the `bumpversion.sh` script to bump the project version. You can execute the script using {major|minor|patch} as first argument to bump the version accordingly:
+  - To bump the patch version: `./bumpversion.sh patch`
+  - To bump the minor version: `./bumpversion.sh minor`
+  - To bump the major version: `./bumpversion.sh major`
+
+After that, you need to commit, push and git tag the commit if desired/needed.
+
 ## ✨ Code Style
 
 For linting and auto-formatting you can use from the root of the project:

bumpversion.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+set -x
+set -e
+
+usage(){
+  echo "Usage: $0 {major|minor|patch} [--tag]"
+  exit 1
+}
+
+if ! [ -x "$(command -v bumpversion)" ]; then
+  echo 'Error: bumpversion is not installed.' >&2
+  exit 1
+elif ! git diff-index --quiet HEAD -- >/dev/null 2>&1; then
+  echo 'There are local changes in your the git repository. Please commit or stash them before bumping version.' >&2
+  exit 1
+fi
+
+if [ "$#" -lt 1 ]; then
+    echo "Illegal number of parameters"
+    usage
+elif [[ $1 != 'major' && $1 != 'minor' && $1 != 'patch' ]]; then
+    echo 'First argument must be {major|minor|patch}'
+    usage
+fi
+
+if [[ $2 == '--tag' ]]; then
+  if git branch --contains $(git rev-parse --verify HEAD) | grep -E 'master'; then
+    bumpversion --tag --commit $1
+  else
+    echo "Only master tags can be tagged"
+    exit 1
+  fi
+else
+  bumpversion $1
+fi

client/src/components/molecules/AccountStatus/Popover.module.scss

@@ -13,6 +13,8 @@ $popoverWidth: 18rem;
     color: $brand-grey-light;
     font-size: $font-size-small;
     animation: showPopup .2s ease-in forwards;
+    white-space: initial;
+    text-align: left;
 }
 
 @keyframes showPopup {

client/src/components/molecules/Asset.module.scss

@@ -1,6 +1,10 @@
 @import '../../styles/variables';
 
 .asset {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+
     > a {
         display: block;
         height: 100%;
@@ -23,11 +27,6 @@
         font-size: $font-size-large;
         margin-top: 0;
     }
-
-    p {
-        margin-bottom: 0;
-        font-size: $font-size-small;
-    }
 }
 
 .assetList {
@@ -54,6 +53,24 @@
     }
 }
 
+.description {
+    &,
+    p,
+    strong,
+    a,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-weight: $font-weight-base;
+        font-family: $font-family-base;
+        margin-bottom: 0;
+        font-size: $font-size-small;
+        color: $brand-grey;
+    }
+}
+
 .date {
     font-size: $font-size-small;
     color: $brand-grey-light;

client/src/components/molecules/Asset.tsx

@@ -28,7 +28,10 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
                     <CategoryImage category={base.categories[0]} />
                 )}
                 <h1>{base.name}</h1>
-                <Markdown text={`${base.description.substring(0, 90)}...`} />
+                <Markdown
+                    className={styles.description}
+                    text={`${base.description.substring(0, 90)}...`}
+                />
 
                 <footer className={styles.assetFooter}>
                     {base.categories && <div>{base.categories[0]}</div>}

client/src/components/organisms/Header.module.scss

@@ -49,12 +49,17 @@
     overflow-y: hidden;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    margin-right: -($spacer / 2);
+    margin-right: -($spacer / 1.5);
     padding-right: $spacer;
+    border-left: 1px solid $brand-grey-lighter;
+    margin-left: $spacer / 8;
 
     @media (min-width: $break-point--medium) {
         padding-right: 0;
         margin-right: 0;
+        margin-left: 0;
+        border-left: 0;
+        overflow: initial;
     }
 
     &::-webkit-scrollbar,
@@ -93,6 +98,6 @@
 }
 
 .accountStatus {
-    margin-left: $spacer;
+    margin-left: $spacer / 2;
-    margin-bottom: .2rem;
+    margin-bottom: -.5rem;
 }

client/src/components/organisms/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import { User } from '../../context/User'
@@ -23,30 +23,32 @@ const MenuItem = ({ item, isWeb3 }: { item: any; isWeb3: boolean }) => {
     )
 }
 
-const Header = () => (
+export default class Header extends PureComponent {
-    <header className={styles.header}>
+    public render() {
-        <div className={styles.headerContent}>
+        const { isWeb3 } = this.context
-            <NavLink to={'/'} className={styles.headerLogo}>
-                <Logo className={styles.headerLogoImage} />
-                <h1 className={styles.headerTitle}>{meta.title}</h1>
-            </NavLink>
 
-            <nav className={styles.headerMenu}>
+        return (
-                <User.Consumer>
+            <header className={styles.header}>
-                    {states =>
+                <div className={styles.headerContent}>
-                        menu.map(item => (
+                    <NavLink to={'/'} className={styles.headerLogo}>
+                        <Logo className={styles.headerLogoImage} />
+                        <h1 className={styles.headerTitle}>{meta.title}</h1>
+                    </NavLink>
+
+                    <nav className={styles.headerMenu}>
+                        {menu.map(item => (
                             <MenuItem
                                 key={item.title}
                                 item={item}
-                                isWeb3={states.isWeb3}
+                                isWeb3={isWeb3}
                             />
-                        ))
+                        ))}
-                    }
+                        <AccountStatus className={styles.accountStatus} />
-                </User.Consumer>
+                    </nav>
-            </nav>
+                </div>
-            <AccountStatus className={styles.accountStatus} />
+            </header>
-        </div>
+        )
-    </header>
+    }
-)
+}
 
-export default Header
+Header.contextType = User

client/src/components/organisms/Web3message.module.scss

@@ -9,6 +9,7 @@
     border-top: .1rem solid $brand-grey-lighter;
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
+    text-align: left;
 }
 
 .account {

client/src/components/organisms/Web3message.tsx

@@ -5,6 +5,50 @@ import styles from './Web3message.module.scss'
 import { User } from '../../context/User'
 
 export default class Web3message extends PureComponent {
+    private noWeb3 = () => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Not a Web3 Browser. For
+            publishing or downloading an asset you need to{' '}
+            <a
+                href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                setup MetaMask
+            </a>{' '}
+            or use any other Web3-capable plugin or browser.
+        </div>
+    )
+
+    private unlockAccount = (states: any) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Account locked. For
+            publishing and downloading an asset you need to unlock your Web3
+            account.{' '}
+            <Button link onClick={states.startLogin}>
+                Unlock account
+            </Button>
+        </div>
+    )
+
+    private haveAccount = (account: string) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Connected with account
+            <code className={styles.account} title={account && account}>
+                {`${account && account.substring(0, 20)}...`}
+            </code>
+        </div>
+    )
+
+    private wrongNetwork = (network: string) => (
+        <div className={styles.message}>
+            <AccountStatus className={styles.status} /> Not connected to Nile
+            network, but to {network}.<br />
+            Please connect in MetaMask with Custom RPC{' '}
+            <code>{`https://nile.dev-ocean.com`}</code>
+        </div>
+    )
+
     public render() {
         return (
             <User.Consumer>
@@ -22,55 +66,4 @@ export default class Web3message extends PureComponent {
             </User.Consumer>
         )
     }
-
-    public noWeb3() {
-        return (
-            <div className={styles.message}>
-                <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.
-            </div>
-        )
-    }
-
-    public unlockAccount(states: any) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Account locked. For
-                publishing an asset you need to unlock your Web3 account.{' '}
-                <Button link onClick={states.startLogin}>
-                    Unlock account
-                </Button>
-            </div>
-        )
-    }
-
-    public haveAccount(account: string) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Connected with
-                account
-                <code className={styles.account} title={account && account}>
-                    {`${account && account.substring(0, 20)}...`}
-                </code>
-            </div>
-        )
-    }
-
-    public wrongNetwork(network: string) {
-        return (
-            <div className={styles.message}>
-                <AccountStatus className={styles.status} /> Not connected to
-                Nile network, but to {network}.<br />
-                Please connect in MetaMask with Custom RPC{' '}
-                <code>{`https://nile.dev-ocean.com`}</code>
-            </div>
-        )
-    }
 }

client/src/config/config.ts

@@ -72,4 +72,9 @@ export const faucetPort = process.env.REACT_APP_FAUCET_PORT || 443
 // export const faucetHost = 'localhost'
 // export const faucetPort = 3001
 
-export const verbose = true
+export const verbose = true
+
+//
+// APP CONFIG
+//
+export const analyticsId = 'UA-60614729-11'

client/src/routes/Details/AssetFile.tsx

@@ -39,7 +39,7 @@ export default class AssetFile extends PureComponent<
         })
 
         const { ocean } = this.context
-        
+
         try {
             const accounts = await ocean.accounts.list()
             const service = ddo.findServiceByType('Access')
@@ -75,6 +75,8 @@ export default class AssetFile extends PureComponent<
 
     public render() {
         const { ddo, file } = this.props
+        const { isLoading, message, error } = this.state
+        const { isLogged } = this.context
 
         return (
             <div className={styles.fileWrap}>
@@ -89,39 +91,20 @@ export default class AssetFile extends PureComponent<
                     {/* <li>{file.compression}</li> */}
                 </ul>
 
-                {this.state.isLoading ? (
+                {isLoading ? (
-                    <Spinner message={this.state.message} />
+                    <Spinner message={message} />
                 ) : (
-                    <User.Consumer>
+                    <Button
-                        {states =>
+                        primary
-                            states.isLogged ? (
+                        className={styles.buttonMain}
-                                <Button
+                        onClick={() => this.purchaseAsset(ddo, file.index)}
-                                    primary
+                        disabled={!isLogged}
-                                    className={styles.buttonMain}
+                    >
-                                    onClick={() =>
+                        Get file
-                                        this.purchaseAsset(ddo, file.index)
+                    </Button>
-                                    }
-                                >
-                                    Get file
-                                </Button>
-                            ) : (
-                                states.isWeb3 && (
-                                    <Button
-                                        primary
-                                        className={styles.buttonMain}
-                                        onClick={states.startLogin}
-                                    >
-                                        Get file
-                                    </Button>
-                                )
-                            )
-                        }
-                    </User.Consumer>
                 )}
 
-                {this.state.error !== '' && (
+                {error !== '' && <div className={styles.error}>{error}</div>}
-                    <div className={styles.error}>{this.state.error}</div>
-                )}
             </div>
         )
     }

client/src/routes/Faucet.tsx

@@ -36,53 +36,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
 
             this.setState({
                 isLoading: false,
-                success: `Successfully added ETH to your account.`
+                success: 'Successfully added ETH to your account.'
             })
         } catch (error) {
             this.setState({ isLoading: false, error })
         }
     }
 
-    private RequestMarkup = () => (
-        <User.Consumer>
-            {states =>
-                states.isLogged ? (
-                    <Button
-                        primary
-                        onClick={() => this.getTokens(states.requestFromFaucet)}
-                    >
-                        Request Ether
-                    </Button>
-                ) : states.isWeb3 ? (
-                    <Web3message />
-                ) : (
-                    <Web3message />
-                )
-            }
-        </User.Consumer>
-    )
-
-    private ActionMarkup = () => (
-        <div className={styles.action}>
-            {this.state.isLoading ? (
-                <Spinner message="Getting Ether..." />
-            ) : this.state.error ? (
-                <div className={styles.error}>
-                    <p>{this.state.error}</p>
-                    <Button onClick={this.reset}>Try again</Button>
-                </div>
-            ) : this.state.success ? (
-                <div className={styles.success}>{this.state.success}</div>
-            ) : (
-                <this.RequestMarkup />
-            )}
-
-            <p>
-                You can only request Ether once every 24 hours for your address.
-            </p>
-        </div>
-    )
-
     private reset = () => {
         this.setState({
             error: undefined,
@@ -91,18 +51,57 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
         })
     }
 
+    private Success = () => (
+        <div className={styles.success}>{this.state.success}</div>
+    )
+
+    private Error = () => (
+        <div className={styles.error}>
+            <p>{this.state.error}</p>
+            <Button onClick={() => this.reset()}>Try again</Button>
+        </div>
+    )
+
+    private Action = () => (
+        <>
+            <Button
+                primary
+                onClick={() => this.getTokens(this.context.requestFromFaucet)}
+                disabled={!this.context.isLogged}
+            >
+                Request Ether
+            </Button>
+            <p>
+                You can only request Ether once every 24 hours for your address.
+            </p>
+        </>
+    )
+
     public render() {
+        const { isWeb3 } = this.context
+        const { isLoading, error, success } = this.state
+
         return (
             <Route
                 title="Faucet"
-                description="Shower yourself with some Ether for the Ocean POA network."
+                description="Shower yourself with some Ether for Ocean's Nile test network."
             >
-                <User.Consumer>
+                <Web3message />
-                    {states => !states.isNile && <Web3message />}
-                </User.Consumer>
 
-                <this.ActionMarkup />
+                <div className={styles.action}>
+                    {isLoading ? (
+                        <Spinner message="Getting Ether..." />
+                    ) : error ? (
+                        <this.Error />
+                    ) : success ? (
+                        <this.Success />
+                    ) : (
+                        isWeb3 && <this.Action />
+                    )}
+                </div>
             </Route>
         )
     }
 }
+
+Faucet.contextType = User

client/src/routes/Publish/index.tsx

@@ -252,7 +252,7 @@ class Publish extends Component<{}, PublishState> {
         ReactGA.event({
             category: 'Publish',
             action: 'registerAsset-start'
-        });
+        })
         this.setState({
             publishingError: '',
             isPublishing: true

client/src/routes/Search.module.scss

@@ -4,7 +4,6 @@
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: $spacer;
-    max-width: 100%;
 
     @media (min-width: $break-point--small) {
         grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

client/src/withTracker.tsx

@@ -1,15 +1,19 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import ReactGA from 'react-ga'
 
+import { analyticsId } from './config/config'
+
 interface TrackerProps {
-    location: any
+    location: Location
 }
 
-ReactGA.initialize('UA-60614729-11', {testMode: process.env.NODE_ENV === 'test'})
+ReactGA.initialize(analyticsId, {
+    testMode: process.env.NODE_ENV === 'test'
+})
 
 export default function withTracker(WrappedComponent: any, options: any = {}) {
-    const trackPage = (page: any) => {
+    const trackPage = (page: string) => {
-        options.isWeb3 = (window.web3 !== undefined)
+        options.isWeb3 = window.web3 !== undefined
         ReactGA.set({
             page,
             ...options
@@ -17,25 +21,26 @@ export default function withTracker(WrappedComponent: any, options: any = {}) {
         ReactGA.pageview(page)
     }
 
-    const HOC = class extends Component<TrackerProps, {}> {
+    return class HOC extends PureComponent<TrackerProps, {}> {
-        componentDidMount() {
+        public componentDidMount() {
-            const page = this.props.location.pathname + this.props.location.search
+            const page =
+                this.props.location.pathname + this.props.location.search
             trackPage(page)
         }
 
-        componentWillReceiveProps(nextProps: any) {
+        public componentWillReceiveProps(nextProps: any) {
-            const currentPage = this.props.location.pathname;
+            const currentPage = this.props.location.pathname
-            const nextPage = nextProps.location.pathname;
+            const nextPage = nextProps.location.pathname
-      
+
             if (currentPage !== nextPage) {
-                trackPage(nextProps.location.pathname + nextProps.location.search);
+                trackPage(
+                    nextProps.location.pathname + nextProps.location.search
+                )
             }
         }
 
-        render() {
+        public render() {
             return <WrappedComponent {...this.props} />
         }
     }
-
+}
-    return HOC
-}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "commons",
   "description": "Ocean Protocol marketplace to explore, download, and publish open data sets.",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "license": "Apache-2.0",
   "scripts": {