port over account popup from pleuston

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 />
         </div>
     </header>
 )

src/components/Web3message.module.scss

@@ -11,36 +11,6 @@
     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;

src/components/Web3message.tsx

@@ -1,33 +1,31 @@
 import React, { PureComponent } from 'react'
 import Button from '../components/atoms/Button'
+import AccountStatus from './molecules/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>
-            </>
+            <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{' '}
+                <AccountStatus /> 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>
@@ -39,8 +37,8 @@ export default class Web3message extends PureComponent {
     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.
+                <AccountStatus /> Account locked. For publishing an asset you
+                need to unlock your Web3 account.
                 <Button link onClick={states.startLogin}>
                     Unlock account
                 </Button>
@@ -51,8 +49,7 @@ export default class Web3message extends PureComponent {
     public haveAccount(account: string) {
         return (
             <div className={styles.message}>
-                <span className={styles.indicatorActive} /> Connected with
-                account
+                <AccountStatus /> Connected with account
                 <code className={styles.account} title={account && account}>
                     {`${account && account.substring(0, 20)}...`}
                 </code>

src/components/molecules/AccountStatus.module.scss

@@ -0,0 +1,106 @@
+@import '../../styles/variables';
+
+.status {
+    display: inline-block;
+    position: relative;
+}
+
+// default: red square
+.statusIndicator {
+    width: $font-size-small;
+    height: $font-size-small;
+    display: block;
+    background: $red;
+    margin-bottom: -.1rem;
+}
+
+// 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;
+}
+
+$popoverWidth: 18rem;
+
+.popover {
+    position: absolute;
+    top: 1.5rem;
+    right: -($spacer / 3);
+    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;
+
+    &:after {
+        bottom: 100%;
+        right: 2%;
+        border: solid transparent;
+        content: '';
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-color: transparent;
+        border-bottom-color: $brand-grey-light;
+        border-width: 10px;
+        margin-left: -10px;
+    }
+}
+
+.popoverInfoline {
+    border-bottom: .05rem solid $brand-grey;
+    padding: $spacer / 3 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+    }
+
+    button {
+        font-size: $font-size-small;
+    }
+}
+
+.accountName {
+    composes: popoverInfoline;
+    flex-wrap: nowrap;
+
+    // blockies avatar
+    canvas {
+        display: inline-block;
+        border-radius: 50%;
+        overflow: hidden;
+        flex: 0 0 20px;
+        margin-right: $spacer / 4;
+    }
+}
+
+.address {
+    width: 15rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

src/components/molecules/AccountStatus.tsx

@@ -0,0 +1,88 @@
+import React, { PureComponent } from 'react'
+// import Blockies from 'react-blockies'
+import Button from '../atoms/Button'
+import { User } from '../../context/User'
+import styles from './AccountStatus.module.scss'
+
+interface AccountStatusState {
+    popoverOpen: boolean
+}
+
+export default class AccountStatus extends PureComponent<
+    {},
+    AccountStatusState
+> {
+    public state = {
+        popoverOpen: false
+    }
+
+    private togglePopover() {
+        this.setState(prevState => ({
+            popoverOpen: !prevState.popoverOpen
+        }))
+    }
+
+    public render() {
+        return (
+            <div
+                className={styles.status}
+                onMouseEnter={() => this.togglePopover()}
+                onMouseLeave={() => this.togglePopover()}
+                onTouchStart={() => this.togglePopover()}
+            >
+                <User.Consumer>
+                    {states =>
+                        !states.isWeb3 ? (
+                            <span className={styles.statusIndicator} />
+                        ) : !states.isLogged ? (
+                            <span
+                                className={styles.statusIndicatorCloseEnough}
+                            />
+                        ) : states.isLogged ? (
+                            <span className={styles.statusIndicatorActive} />
+                        ) : null
+                    }
+                </User.Consumer>
+
+                {this.state.popoverOpen && <AccountPopover />}
+            </div>
+        )
+    }
+}
+
+const AccountPopover = () => (
+    <div className={styles.popover}>
+        <div className={styles.accountName}>
+            <User.Consumer>
+                {states =>
+                    states.account ? (
+                        <>
+                            {/* <Blockies
+                            size={10}
+                            scale={2}
+                            className={styles.avatar}
+                            seed={activeAccount.getId()}
+                        /> */}
+                            <span
+                                className={styles.address}
+                                title={states.account}
+                            >
+                                {states.account}
+                            </span>
+                        </>
+                    ) : (
+                        'No account selected'
+                    )
+                }
+            </User.Consumer>
+        </div>
+        <div className={styles.popoverInfoline}>
+            Network: &nbsp;<strong>{''}</strong>
+        </div>
+        <div className={styles.popoverInfoline}>
+            <Button link onClick={''}>
+                Make it rain
+            </Button>
+        </div>
+    </div>
+)