Merge pull request #25 from oceanprotocol/feature/account-popup

Account & Faucet UI

package-lock.json

@@ -2402,8 +2402,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-      "dev": true
     },
     "asn1": {
       "version": "0.2.4",
@@ -5048,6 +5047,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -6274,6 +6282,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -7474,6 +7490,35 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -8982,6 +9027,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -10476,6 +10526,26 @@
         "isarray": "1.0.0"
       }
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -13404,6 +13474,11 @@
         "ts-pnp": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -17233,6 +17308,19 @@
       "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-0.8.4.tgz",
       "integrity": "sha512-QhI19OcfhiAn60/O6bMR0w8ApXrPFCjv6+eV0I/P9/AswzjgEAx4L7VxMBCpS/jrythLa12Q9v88req+ys4YpA=="
     },
+    "react-popper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
+      "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "<=0.2.2",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -21343,6 +21431,11 @@
         "mime-types": "~2.1.18"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -21363,6 +21456,11 @@
       "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
@@ -23384,8 +23482,7 @@
     "whatwg-fetch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
-      "dev": true
     },
     "whatwg-mimetype": {
       "version": "2.3.0",

package.json

@@ -25,6 +25,7 @@
     "react-dom": "^16.8.3",
     "react-helmet": "^5.2.0",
     "react-moment": "^0.8.4",
+    "react-popper": "^1.3.3",
     "react-router-dom": "^4.3.1",
     "react-transition-group": "^2.6.0",
     "slugify": "^1.3.4",

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Web3 from 'web3'
 import { BrowserRouter as Router } from 'react-router-dom'
+import { Logger } from '@oceanprotocol/squid'
 import Header from './components/Header'
 import Footer from './components/Footer'
 import Spinner from './components/atoms/Spinner'
@@ -31,6 +32,11 @@ interface AppState {
     isLoading: boolean
     isWeb3: boolean
     account: string
+    balance: {
+        eth: number
+        ocn: number
+    }
+    network: string
     web3: Web3
     ocean: {}
     startLogin: () => void
@@ -62,7 +68,7 @@ class App extends Component<{}, AppState> {
                     }
                 )
             } catch (error) {
-                // show error
+                Logger.log('requestFromFaucet', error)
             }
         } else {
             // no account found
@@ -73,6 +79,11 @@ class App extends Component<{}, AppState> {
         isLogged: false,
         isLoading: true,
         isWeb3: false,
+        balance: {
+            eth: 0,
+            ocn: 0
+        },
+        network: '',
         web3: new Web3(
             new Web3.providers.HttpProvider(
                 `${nodeScheme}://${nodeHost}:${nodePort}`
@@ -140,7 +151,7 @@ class App extends Component<{}, AppState> {
                     })
                 }
             } catch (e) {
-                // continue with default
+                Logger.log('web3 error', e)
             }
         }
         try {
@@ -149,8 +160,13 @@ class App extends Component<{}, AppState> {
                 isLoading: false,
                 ocean
             })
+            // TODO: squid-js balance retrieval fix
+            const accounts = await ocean.getAccounts()
+            const balance = await accounts[0].getBalance()
+            this.setState({ balance })
+            // TODO: squid-js expose keeper for getNetworkName
         } catch (e) {
-            // show loading error / unable to initialize ocean
+            Logger.log('ocean/balance error', e)
             this.setState({
                 isLoading: false
             })

src/Routes.tsx

@@ -7,6 +7,7 @@ import Home from './routes/Home'
 import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'
 import Search from './routes/Search'
+import Faucet from './routes/Faucet'
 import Styleguide from './routes/Styleguide'
 
 const Routes = () => (
@@ -17,6 +18,7 @@ const Routes = () => (
         <Route component={Publish} path="/publish" />
         <Route component={Search} path="/search" />
         <Route component={Details} path="/asset/:did" />
+        <Route component={Faucet} path="/faucet" />
         <Route component={NotFound} />
     </Switch>
 )

src/components/Header.module.scss

@@ -1,9 +1,6 @@
 @import '../styles/variables';
 
 .header {
-    // background: $brand-black
-    //     url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center -6rem;
-    // background-size: cover;
     width: 100%;
     padding: $spacer / 2 0;
 }
@@ -94,3 +91,8 @@
     color: $brand-pink;
     pointer-events: none;
 }
+
+.accountStatus {
+    margin-left: $spacer;
+    margin-bottom: .2rem;
+}

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
+import AccountStatus from './molecules/AccountStatus/'
 import styles from './Header.module.scss'
 
 import menu from '../data/menu.json'
@@ -27,6 +28,7 @@ const Header = () => (
                     </NavLink>
                 ))}
             </nav>
+            <AccountStatus className={styles.accountStatus} />
         </div>
     </header>
 )

src/components/Web3message.module.scss

@@ -1,48 +0,0 @@
-@import '../styles/variables';
-
-.message {
-    margin-bottom: $spacer;
-    color: $brand-grey;
-    padding-left: 1.5rem;
-    position: relative;
-    border-bottom: .1rem solid $brand-grey-lighter;
-    border-top: .1rem solid $brand-grey-lighter;
-    padding-top: $spacer / 2;
-    padding-bottom: $spacer / 2;
-}
-
-// default: red square
-.indicator {
-    display: inline-block;
-    width: $font-size-small;
-    height: $font-size-small;
-    background: $red;
-    margin-right: $spacer / 8;
-    position: absolute;
-    left: 0;
-    top: ($spacer / 2) + .3rem;
-}
-
-// yellow triangle
-.indicatorCloseEnough {
-    composes: indicator;
-    background: none;
-    width: 0;
-    height: 0;
-    border-left: $font-size-small / 1.75 solid transparent;
-    border-right: $font-size-small / 1.75 solid transparent;
-    border-bottom: $font-size-small solid $yellow;
-}
-
-// green circle
-.indicatorActive {
-    composes: indicator;
-    border-radius: 50%;
-    background: $green;
-}
-
-.account {
-    display: inline-block;
-    margin-left: $spacer / 8;
-    background: none;
-}

src/components/Web3message.tsx

@@ -1,62 +0,0 @@
-import React, { PureComponent } from 'react'
-import Button from '../components/atoms/Button'
-import styles from './Web3message.module.scss'
-import { User } from '../context/User'
-
-export default class Web3message extends PureComponent {
-    public render() {
-        return (
-            <>
-                <User.Consumer>
-                    {states =>
-                        !states.isWeb3
-                            ? this.noWeb3()
-                            : !states.isLogged
-                            ? this.unlockAccount(states)
-                            : states.isLogged
-                            ? this.haveAccount(states.account)
-                            : null
-                    }
-                </User.Consumer>
-            </>
-        )
-    }
-
-    public noWeb3() {
-        return (
-            <div className={styles.message}>
-                <span className={styles.indicator} /> No Web3 Browser. For
-                publishing an asset you need to use a Web3-capable plugin or
-                browser, like{' '}
-                <a href="https://docs.oceanprotocol.com/tutorials/wallets/#how-to-setup-metamask">
-                    MetaMask
-                </a>
-                .
-            </div>
-        )
-    }
-
-    public unlockAccount(states: any) {
-        return (
-            <div className={styles.message}>
-                <span className={styles.indicatorCloseEnough} /> 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}>
-                <span className={styles.indicatorActive} /> Connected with
-                account
-                <code className={styles.account} title={account && account}>
-                    {`${account && account.substring(0, 20)}...`}
-                </code>
-            </div>
-        )
-    }
-}

src/components/atoms/Spinner.module.scss

@@ -3,8 +3,8 @@
 .spinner {
     position: relative;
     text-align: center;
-    margin-bottom: $spacer;
+    margin-top: $spacer * $line-height;
-    margin-top: $spacer * 2;
+    margin-bottom: $spacer / 2;
 
     &:before {
         content: '';

src/components/molecules/AccountStatus/Indicator.module.scss

@@ -0,0 +1,33 @@
+@import '../../../styles/variables';
+
+.status {
+    display: inline-block;
+    position: relative;
+    cursor: help;
+}
+
+// default: red square
+.statusIndicator {
+    width: $font-size-small;
+    height: $font-size-small;
+    display: block;
+    background: $red;
+}
+
+// yellow triangle
+.statusIndicatorCloseEnough {
+    composes: statusIndicator;
+    background: none;
+    width: 0;
+    height: 0;
+    border-left: $font-size-small / 1.7 solid transparent;
+    border-right: $font-size-small / 1.7 solid transparent;
+    border-bottom: $font-size-small solid $yellow;
+}
+
+// green circle
+.statusIndicatorActive {
+    composes: statusIndicator;
+    border-radius: 50%;
+    background: $green;
+}

src/components/molecules/AccountStatus/Indicator.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import cx from 'classnames'
+import { User } from '../../../context/User'
+import styles from './Indicator.module.scss'
+
+const Indicator = ({
+    className,
+    togglePopover,
+    forwardedRef
+}: {
+    className?: string
+    togglePopover: () => void
+    forwardedRef: (ref: HTMLElement | null) => void
+}) => (
+    <div
+        className={cx(styles.status, className)}
+        onMouseOver={togglePopover}
+        onMouseOut={togglePopover}
+        ref={forwardedRef}
+    >
+        <User.Consumer>
+            {states =>
+                !states.isWeb3 ? (
+                    <span className={styles.statusIndicator} />
+                ) : !states.isLogged ? (
+                    <span className={styles.statusIndicatorCloseEnough} />
+                ) : states.isLogged ? (
+                    <span className={styles.statusIndicatorActive} />
+                ) : null
+            }
+        </User.Consumer>
+    </div>
+)
+
+export default Indicator

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

@@ -0,0 +1,62 @@
+@import '../../../styles/variables';
+
+$popoverWidth: 18rem;
+
+.popover {
+    position: relative;
+    width: $popoverWidth;
+    padding: $spacer / 2;
+    background: $brand-black;
+    border-radius: .1rem;
+    border: .1rem solid $brand-grey-light;
+    box-shadow: 0 6px 16px 0 rgba($brand-black, .3);
+    color: $brand-grey-light;
+    font-size: $font-size-small;
+    animation: showPopup .2s ease-in forwards;
+}
+
+@keyframes showPopup {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.popoverInfoline {
+    border-bottom: .05rem solid $brand-grey;
+    padding: $spacer / 3 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+    }
+
+    button {
+        font-size: $font-size-small;
+    }
+}
+
+.address {
+    width: 15rem;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.balance {
+    font-size: $font-size-small;
+    margin-left: $spacer / 2;
+    white-space: nowrap;
+
+    &:first-child {
+        margin-left: 0;
+    }
+}

src/components/molecules/AccountStatus/Popover.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { User } from '../../../context/User'
+import styles from './Popover.module.scss'
+
+const Popover = ({
+    forwardedRef,
+    style
+}: {
+    forwardedRef: (ref: HTMLElement | null) => void
+    style: React.CSSProperties
+}) => (
+    <div className={styles.popover} ref={forwardedRef} style={style}>
+        <User.Consumer>
+            {states =>
+                states.account &&
+                states.balance && (
+                    <div className={styles.popoverInfoline}>
+                        <span
+                            className={styles.balance}
+                            title={(states.balance.eth / 1e18).toFixed(10)}
+                        >
+                            <strong>
+                                {(states.balance.eth / 1e18)
+                                    .toFixed(3)
+                                    .slice(0, -1)}
+                            </strong>{' '}
+                            ETH
+                        </span>
+                        <span className={styles.balance}>
+                            <strong>{states.balance.ocn}</strong> OCEAN
+                        </span>
+                    </div>
+                )
+            }
+        </User.Consumer>
+
+        <div className={styles.popoverInfoline}>
+            <User.Consumer>
+                {states =>
+                    states.account ? (
+                        <span className={styles.address} title={states.account}>
+                            {states.account}
+                        </span>
+                    ) : (
+                        <em>No account selected</em>
+                    )
+                }
+            </User.Consumer>
+        </div>
+
+        <div className={styles.popoverInfoline}>
+            <User.Consumer>
+                {states => states.network && states.network}
+            </User.Consumer>
+        </div>
+    </div>
+)
+
+export default Popover

src/components/molecules/AccountStatus/index.tsx

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import { Manager, Reference, Popper } from 'react-popper'
+import AccountPopover from './Popover'
+import AccountIndicator from './Indicator'
+
+interface AccountStatusProps {
+    className?: string
+}
+
+interface AccountStatusState {
+    isPopoverOpen: boolean
+}
+
+export default class AccountStatus extends PureComponent<
+    AccountStatusProps,
+    AccountStatusState
+> {
+    public state = {
+        isPopoverOpen: false
+    }
+
+    public togglePopover() {
+        this.setState(prevState => ({
+            isPopoverOpen: !prevState.isPopoverOpen
+        }))
+    }
+
+    public render() {
+        return (
+            <Manager>
+                <Reference>
+                    {({ ref }) => (
+                        <AccountIndicator
+                            togglePopover={() => this.togglePopover()}
+                            className={this.props.className}
+                            forwardedRef={ref}
+                        />
+                    )}
+                </Reference>
+                {this.state.isPopoverOpen && (
+                    <Popper placement="auto">
+                        {({ ref, style, placement }) => (
+                            <AccountPopover
+                                forwardedRef={ref}
+                                style={style}
+                                data-placement={placement}
+                            />
+                        )}
+                    </Popper>
+                )}
+            </Manager>
+        )
+    }
+}

src/components/molecules/Web3message.module.scss

@@ -0,0 +1,23 @@
+@import '../../styles/variables';
+
+.message {
+    margin-bottom: $spacer;
+    color: $brand-grey;
+    padding-left: 2rem;
+    position: relative;
+    border-bottom: .1rem solid $brand-grey-lighter;
+    border-top: .1rem solid $brand-grey-lighter;
+    padding-top: $spacer / 2;
+    padding-bottom: $spacer / 2;
+}
+
+.account {
+    display: inline-block;
+    margin-left: $spacer / 8;
+    background: none;
+}
+
+.status {
+    margin-left: -($spacer);
+    margin-right: $spacer / 3;
+}

src/components/molecules/Web3message.tsx

@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react'
+import Button from '../atoms/Button'
+import AccountStatus from './AccountStatus/'
+import styles from './Web3message.module.scss'
+import { User } from '../../context/User'
+
+export default class Web3message extends PureComponent {
+    public render() {
+        return (
+            <User.Consumer>
+                {states =>
+                    !states.isWeb3
+                        ? this.noWeb3()
+                        : !states.isLogged
+                        ? this.unlockAccount(states)
+                        : states.isLogged
+                        ? this.haveAccount(states.account)
+                        : null
+                }
+            </User.Consumer>
+        )
+    }
+
+    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/">
+                    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>
+        )
+    }
+}

src/context/User.ts

@@ -7,6 +7,11 @@ export const User = React.createContext({
     account: '',
     web3: {},
     ocean: {},
+    balance: {
+        eth: 0,
+        ocn: 0
+    },
+    network: '',
     startLogin: () => {
         /* empty */
     },

src/data/menu.json

@@ -3,6 +3,10 @@
     "title": "Publish",
     "link": "/publish"
   },
+  {
+    "title": "Faucet",
+    "link": "/faucet"
+  },
   {
     "title": "About",
     "link": "/about"

src/routes/Faucet.module.scss

@@ -0,0 +1,15 @@
+@import '../styles/variables';
+
+.action {
+    text-align: center;
+    margin-top: $spacer * 2;
+
+    p {
+        margin-top: $spacer;
+        color: $brand-grey-light;
+    }
+}
+
+.success {
+    color: $green;
+}

src/routes/Faucet.tsx

@@ -0,0 +1,96 @@
+import React, { PureComponent } from 'react'
+import Route from '../components/templates/Route'
+import Button from '../components/atoms/Button'
+import Spinner from '../components/atoms/Spinner'
+import { User } from '../context/User'
+import Web3message from '../components/molecules/Web3message'
+import styles from './Faucet.module.scss'
+
+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'
+    }
+
+    private getTokens = async (requestFromFaucet: () => void) => {
+        this.setState({ isLoading: true })
+
+        try {
+            await requestFromFaucet()
+            this.setState({
+                isLoading: false,
+                success: `Successfully added ${
+                    this.state.eth
+                } ETH to your account.`
+            })
+        } catch (error) {
+            this.setState({ isLoading: false, error })
+        }
+    }
+
+    private RequestMarkup = () => (
+        <User.Consumer>
+            {states => (
+                <Button
+                    primary
+                    onClick={() => this.getTokens(states.requestFromFaucet)}
+                >
+                    Request Ether
+                </Button>
+            )}
+        </User.Consumer>
+    )
+
+    private ActionMarkup = () => (
+        <div className={styles.action}>
+            {this.state.isLoading ? (
+                <Spinner message="Getting Ether..." />
+            ) : this.state.error ? (
+                <div className={styles.error}>
+                    {this.state.error}{' '}
+                    <Button link 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,
+            success: undefined,
+            isLoading: false
+        })
+    }
+
+    public render() {
+        return (
+            <Route
+                title="Faucet"
+                description="Shower yourself with some Ether for the Ocean POA network."
+            >
+                <Web3message />
+
+                <this.ActionMarkup />
+            </Route>
+        )
+    }
+}

src/routes/Publish/StepRegisterContent.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import Web3message from '../../components/Web3message'
+import Web3message from '../../components/molecules/Web3message'
 import Spinner from '../../components/atoms/Spinner'
 import styles from './StepRegisterContent.module.scss'