Merge pull request #14 from oceanprotocol/feature/web3-message

Web3 messages

src/components/Web3message.module.scss

@@ -0,0 +1,44 @@
+@import '../styles/variables';
+
+.message {
+    margin-bottom: $spacer;
+    color: $brand-grey-light;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+// 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: .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 {
+    font-family: $font-family-monospace;
+    display: inline-block;
+    margin-left: $spacer / 8;
+}

src/components/Web3message.tsx

@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react'
+import Button from '../components/atoms/Button'
+import styles from './Web3message.module.scss'
+
+export default class Web3message extends PureComponent {
+    public render() {
+        // let indicatorClasses = styles.indicatorCloseEnough
+
+        // if (this.props.activeAccount) {
+        //     indicatorClasses = styles.indicatorActive
+        // }
+
+        return (
+            <>
+                {/* IF no Web3 */}
+                <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>
+
+                {/* IF connected and account locked */}
+                <div className={styles.message}>
+                    <span className={styles.indicatorCloseEnough} /> Account
+                    locked. For publishing an asset you need to unlock your Web3
+                    account.
+                    <Button link>Unlock account</Button>
+                </div>
+
+                {/* IF connected and unlocked */}
+                <div className={styles.message}>
+                    <span className={styles.indicatorActive} /> Connected with
+                    account
+                    <span
+                        className={styles.account}
+                        title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
+                    >
+                        0xfehz2u89n...
+                    </span>
+                </div>
+            </>
+        )
+    }
+}

src/components/atoms/Button.module.scss

@@ -4,6 +4,7 @@
     border: 0;
     cursor: pointer;
     outline: 0;
+    margin: 0;
     display: inline-block;
     width: fit-content;
     padding: $spacer / 4 $spacer;

src/routes/Publish.tsx

@@ -5,6 +5,7 @@ import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
 import { User } from '../context/User'
 import AssetModel from '../models/AssetModel'
+import Web3message from '../components/Web3message'
 
 import form from '../data/form-publish.json'
 
@@ -117,6 +118,8 @@ class Publish extends Component<{}, PublishState> {
 
         return (
             <Route title="Publish">
+                <Web3message />
+
                 <Form
                     title={form.title}
                     description={form.description}