From d5256d2dc0dd515e2cb084f71bc75ffc61f5a2fd Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 8 Jul 2020 16:39:12 +0200
Subject: [PATCH] wallet UI & feedback refactor

---
 package-lock.json                             | 18 ++++++
 package.json                                  |  2 +
 src/components/atoms/Status.module.css        | 10 ++--
 src/components/molecules/Menu.module.css      |  1 +
 src/components/molecules/Menu.tsx             |  2 +
 .../Account.module.css}                       | 18 ++----
 src/components/molecules/Wallet/Account.tsx   | 29 +++++++++
 .../molecules/Wallet/Details.module.css       | 23 +++++++
 src/components/molecules/Wallet/Details.tsx   | 36 +++++++++++
 .../Feedback.module.css}                      | 19 ++----
 .../index.tsx => Wallet/Feedback.tsx}         | 29 +++------
 .../molecules/Wallet/index.module.css         |  0
 .../index.stories.tsx                         |  2 +-
 src/components/molecules/Wallet/index.tsx     | 60 +++++++++++++++++++
 .../molecules/Web3Feedback/Wallet.tsx         | 38 ------------
 src/components/organisms/Compute.tsx          |  2 +-
 src/components/organisms/Consume.tsx          |  2 +-
 src/components/pages/History.tsx              |  2 +-
 src/components/pages/Publish.tsx              |  2 +-
 src/global/_variables.css                     |  2 +-
 20 files changed, 200 insertions(+), 97 deletions(-)
 rename src/components/molecules/{Web3Feedback/Wallet.module.css => Wallet/Account.module.css} (62%)
 create mode 100644 src/components/molecules/Wallet/Account.tsx
 create mode 100644 src/components/molecules/Wallet/Details.module.css
 create mode 100644 src/components/molecules/Wallet/Details.tsx
 rename src/components/molecules/{Web3Feedback/index.module.css => Wallet/Feedback.module.css} (56%)
 rename src/components/molecules/{Web3Feedback/index.tsx => Wallet/Feedback.tsx} (73%)
 create mode 100644 src/components/molecules/Wallet/index.module.css
 rename src/components/molecules/{Web3Feedback => Wallet}/index.stories.tsx (98%)
 create mode 100644 src/components/molecules/Wallet/index.tsx
 delete mode 100644 src/components/molecules/Web3Feedback/Wallet.tsx

diff --git a/package-lock.json b/package-lock.json
index 778d151aa..f41c18802 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6071,6 +6071,15 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/loadable__component": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.10.0.tgz",
+      "integrity": "sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/lodash": {
       "version": "4.14.157",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz",
@@ -28779,6 +28788,15 @@
         "throttle-debounce": "^2.1.0"
       }
     },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-syntax-highlighter": {
       "version": "12.2.1",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz",
diff --git a/package.json b/package.json
index 994535585..e9c3987be 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react-paginate": "^6.3.2",
     "react-rating": "^2.0.5",
     "react-responsive-modal": "^5.0.2",
+    "react-spring": "^8.0.27",
     "react-toastify": "^6.0.8",
     "shortid": "^2.2.15",
     "slugify": "^1.4.4",
@@ -78,6 +79,7 @@
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.4",
     "@types/jest": "^26.0.4",
+    "@types/loadable__component": "^5.10.0",
     "@types/node": "^14.0.19",
     "@types/numeral": "^0.0.28",
     "@types/react": "^16.9.41",
diff --git a/src/components/atoms/Status.module.css b/src/components/atoms/Status.module.css
index 34dfcbfba..6d22da38f 100644
--- a/src/components/atoms/Status.module.css
+++ b/src/components/atoms/Status.module.css
@@ -1,7 +1,7 @@
 /* default: success, green circle */
 .status {
-  width: var(--font-size-mini);
-  height: var(--font-size-mini);
+  width: var(--font-size-small);
+  height: var(--font-size-small);
   border-radius: 50%;
   display: inline-block;
   background: var(--brand-alert-green);
@@ -14,9 +14,9 @@
   background: none;
   width: 0;
   height: 0;
-  border-left: calc(var(--font-size-mini) / 1.7) solid transparent;
-  border-right: calc(var(--font-size-mini) / 1.7) solid transparent;
-  border-bottom: var(--font-size-mini) solid var(--brand-alert-orange);
+  border-left: calc(var(--font-size-small) / 1.7) solid transparent;
+  border-right: calc(var(--font-size-small) / 1.7) solid transparent;
+  border-bottom: var(--font-size-small) solid var(--brand-alert-yellow);
 }
 
 /* red square */
diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css
index fa10aff2a..50dd4df3c 100644
--- a/src/components/molecules/Menu.module.css
+++ b/src/components/molecules/Menu.module.css
@@ -1,6 +1,7 @@
 .menu {
 }
 
+.menu > div,
 .link {
   display: inline-block;
   color: var(--brand-grey);
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
index 363cbd4f0..15648f0bd 100644
--- a/src/components/molecules/Menu.tsx
+++ b/src/components/molecules/Menu.tsx
@@ -3,6 +3,7 @@ import { Link } from 'gatsby'
 import { useLocation } from '@reach/router'
 import styles from './Menu.module.css'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+import Wallet from './Wallet'
 
 declare type MenuItem = {
   name: string
@@ -29,6 +30,7 @@ export default function Menu() {
 
   return (
     <nav className={styles.menu}>
+      <Wallet />
       {menu.map((item: MenuItem) => (
         <MenuLink key={item.name} item={item} />
       ))}
diff --git a/src/components/molecules/Web3Feedback/Wallet.module.css b/src/components/molecules/Wallet/Account.module.css
similarity index 62%
rename from src/components/molecules/Web3Feedback/Wallet.module.css
rename to src/components/molecules/Wallet/Account.module.css
index d8066dcf6..a99269df3 100644
--- a/src/components/molecules/Web3Feedback/Wallet.module.css
+++ b/src/components/molecules/Wallet/Account.module.css
@@ -1,8 +1,11 @@
 .wallet {
-  text-align: right;
+  border: 1px solid var(--brand-grey-lighter);
+  border-radius: var(--border-radius);
+  padding: calc(var(--spacer) / 8) calc(var(--spacer) / 4);
 }
 
 .address {
+  font-size: var(--font-size-small);
   font-family: var(--font-family-monospace);
   white-space: nowrap;
   margin-bottom: calc(var(--spacer) / 8);
@@ -17,16 +20,3 @@
   vertical-align: middle;
   margin-right: calc(var(--spacer) / 6);
 }
-
-.balance {
-  color: var(--color-secondary);
-  white-space: nowrap;
-  font-size: var(--font-size-mini);
-}
-
-.balance span {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-  display: inline-block;
-  margin-left: 0.1rem;
-}
diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx
new file mode 100644
index 000000000..34ecdeda2
--- /dev/null
+++ b/src/components/molecules/Wallet/Account.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import Button from '../../atoms/Button'
+import styles from './Account.module.css'
+import { useWeb3 } from '@oceanprotocol/react'
+import { toDataUrl } from 'ethereum-blockies'
+
+// Forward ref for Tippy.js
+// eslint-disable-next-line
+const Account = React.forwardRef((props, ref: any) => {
+  const { account, web3Connect } = useWeb3()
+  const blockies = account && toDataUrl(account)
+
+  return (
+    <div className={styles.wallet} ref={ref}>
+      {account ? (
+        <div className={styles.address}>
+          <img className={styles.blockies} src={blockies} alt="Blockies" />
+          {`${account.substring(0, 12)}...`}
+        </div>
+      ) : (
+        <Button style="text" size="small" onClick={() => web3Connect.connect()}>
+          Activate Wallet
+        </Button>
+      )}
+    </div>
+  )
+})
+
+export default Account
diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css
new file mode 100644
index 000000000..a79fa9988
--- /dev/null
+++ b/src/components/molecules/Wallet/Details.module.css
@@ -0,0 +1,23 @@
+.details {
+  composes: box from '../../atoms/Box.module.css';
+  padding: calc(var(--spacer) / 2) !important;
+  min-width: 20rem;
+  max-width: 25rem;
+}
+
+.details > ul {
+  margin-bottom: calc(var(--spacer) / 4);
+}
+
+.balance {
+  color: var(--color-secondary);
+  white-space: nowrap;
+  font-size: var(--font-size-small);
+}
+
+.balance span {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  display: inline-block;
+  margin-left: 0.1rem;
+}
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
new file mode 100644
index 000000000..8de372d01
--- /dev/null
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -0,0 +1,36 @@
+import React, { ReactElement } from 'react'
+import Button from '../../atoms/Button'
+import styles from './Details.module.css'
+import { useWeb3, useOcean } from '@oceanprotocol/react'
+import Web3Feedback from './Feedback'
+import { formatNumber } from '../../../utils'
+
+export default function Details({ attrs }: { attrs: any }): ReactElement {
+  const { balance, web3Connect } = useWeb3()
+  const { balanceInOcean } = useOcean()
+  const ethBalanceText = formatNumber(Number(balance))
+  const oceanBalanceText = formatNumber(Number(balanceInOcean))
+
+  return (
+    <div className={styles.details}>
+      <ul {...attrs}>
+        <li className={styles.balance}>
+          OCEAN <span>{oceanBalanceText}</span>
+        </li>
+        <li className={styles.balance}>
+          ETH <span>{ethBalanceText}</span>
+        </li>
+        <li>
+          <Button
+            style="text"
+            size="small"
+            onClick={() => web3Connect.toggleModal()}
+          >
+            Switch Wallet
+          </Button>
+        </li>
+      </ul>
+      <Web3Feedback />
+    </div>
+  )
+}
diff --git a/src/components/molecules/Web3Feedback/index.module.css b/src/components/molecules/Wallet/Feedback.module.css
similarity index 56%
rename from src/components/molecules/Web3Feedback/index.module.css
rename to src/components/molecules/Wallet/Feedback.module.css
index 4dc83ebb9..ccf04c63c 100644
--- a/src/components/molecules/Web3Feedback/index.module.css
+++ b/src/components/molecules/Wallet/Feedback.module.css
@@ -1,29 +1,22 @@
 .feedback {
   font-size: var(--font-size-small);
-  display: flex;
-  max-width: 100%;
-  padding-left: calc(var(--spacer) / 1.5);
+  padding-left: var(--spacer);
+  padding-top: calc(var(--spacer) / 2);
+  margin-top: calc(var(--spacer) / 2);
+  border-top: 1px solid var(--brand-grey-lighter);
   position: relative;
   width: 100%;
 }
 
-.statuscontainer {
-  flex-grow: 1;
-}
-
-.walletcontainer {
-  width: 35%;
-}
-
 .feedback i {
   position: absolute;
   left: 0;
-  top: 2px;
+  top: calc(var(--spacer) / 2);
 }
 
 .title {
   margin-bottom: calc(var(--spacer) / 12);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-base);
 }
 
 .error {
diff --git a/src/components/molecules/Web3Feedback/index.tsx b/src/components/molecules/Wallet/Feedback.tsx
similarity index 73%
rename from src/components/molecules/Web3Feedback/index.tsx
rename to src/components/molecules/Wallet/Feedback.tsx
index 49964706a..1169fc587 100644
--- a/src/components/molecules/Web3Feedback/index.tsx
+++ b/src/components/molecules/Wallet/Feedback.tsx
@@ -1,13 +1,7 @@
 import React, { ReactElement } from 'react'
 import Status from '../../atoms/Status'
-import Wallet from './Wallet'
-import styles from './index.module.css'
-import {
-  useWeb3,
-  useOcean,
-  InjectedProviderStatus,
-  OceanConnectionStatus
-} from '@oceanprotocol/react'
+import styles from './Feedback.module.css'
+import { useWeb3, useOcean } from '@oceanprotocol/react'
 
 export declare type Web3Error = {
   status: 'error' | 'warning' | 'success'
@@ -21,7 +15,7 @@ export default function Web3Feedback({
   isBalanceInsufficient?: boolean
 }): ReactElement {
   const { ethProviderStatus } = useWeb3()
-  const { status, balanceInOcean } = useOcean()
+  const { status } = useOcean()
   const isEthProviderAbsent = ethProviderStatus === -1
   const isEthProviderDisconnected = ethProviderStatus === 0
   const isOceanDisconnected = status === 0
@@ -60,18 +54,11 @@ export default function Web3Feedback({
     ? 'You do not have enough OCEAN in your wallet to purchase this asset.'
     : 'Something went wrong.'
 
-  return (
+  return !hasSuccess ? (
     <section className={styles.feedback}>
-      <div className={styles.statuscontainer}>
-        <Status state={state} aria-hidden />
-        <h3 className={styles.title}>{title}</h3>
-        {!hasSuccess && <p className={styles.error}>{message}</p>}
-      </div>
-      {!isEthProviderAbsent && (
-        <div className={styles.walletcontainer}>
-          <Wallet balanceOcean={balanceInOcean} />
-        </div>
-      )}
+      <Status state={state} aria-hidden />
+      <h3 className={styles.title}>{title}</h3>
+      <p className={styles.error}>{message}</p>
     </section>
-  )
+  ) : null
 }
diff --git a/src/components/molecules/Wallet/index.module.css b/src/components/molecules/Wallet/index.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/molecules/Web3Feedback/index.stories.tsx b/src/components/molecules/Wallet/index.stories.tsx
similarity index 98%
rename from src/components/molecules/Web3Feedback/index.stories.tsx
rename to src/components/molecules/Wallet/index.stories.tsx
index aa2f36eef..ce4c6a0a1 100644
--- a/src/components/molecules/Web3Feedback/index.stories.tsx
+++ b/src/components/molecules/Wallet/index.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Web3Feedback from '.'
+import Web3Feedback from './Feedback'
 import web3Mock from '../../../../tests/unit/__mocks__/web3'
 import web3ProviderMock, {
   context
diff --git a/src/components/molecules/Wallet/index.tsx b/src/components/molecules/Wallet/index.tsx
new file mode 100644
index 000000000..1815e95a0
--- /dev/null
+++ b/src/components/molecules/Wallet/index.tsx
@@ -0,0 +1,60 @@
+import React, { ReactElement } from 'react'
+import loadable from '@loadable/component'
+import { useSpring, animated } from 'react-spring'
+import { useWeb3 } from '@oceanprotocol/react'
+import Account from './Account'
+import Details from './Details'
+
+const Tippy = loadable(() => import('@tippyjs/react/headless'))
+
+const animation = {
+  config: { tension: 400, friction: 20 },
+  from: { transform: 'scale(0.5) translateY(-3rem)' },
+  to: { transform: 'scale(1) translateY(0)' }
+}
+
+export default function Wallet(): ReactElement {
+  const { account, ethProviderStatus } = useWeb3()
+  const [props, setSpring] = useSpring(() => animation.from)
+
+  function onMount() {
+    setSpring({
+      transform: 'scale(1) translateY(0)',
+      onRest: (): void => null,
+      config: animation.config
+    })
+  }
+
+  function onHide({ unmount }: { unmount: any }) {
+    setSpring({
+      ...animation.from,
+      onRest: unmount,
+      config: { ...animation.config, clamp: true }
+    })
+  }
+
+  const isEthProviderAbsent = ethProviderStatus === -1
+  if (isEthProviderAbsent) return null
+
+  return (
+    <Tippy
+      interactive
+      interactiveBorder={30}
+      render={(attrs: any) => (
+        <animated.div style={props}>
+          <Details attrs={attrs} />
+        </animated.div>
+      )}
+      appendTo={
+        typeof document !== 'undefined' && document.querySelector('body')
+      }
+      animation
+      onMount={onMount}
+      onHide={onHide}
+      disabled={!account}
+      fallback={<Account />}
+    >
+      <Account />
+    </Tippy>
+  )
+}
diff --git a/src/components/molecules/Web3Feedback/Wallet.tsx b/src/components/molecules/Web3Feedback/Wallet.tsx
deleted file mode 100644
index a04ecf622..000000000
--- a/src/components/molecules/Web3Feedback/Wallet.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { ReactElement } from 'react'
-import { toDataUrl } from 'ethereum-blockies'
-import styles from './Wallet.module.css'
-import Button from '../../atoms/Button'
-import { formatNumber } from '../../../utils'
-import { useWeb3 } from '@oceanprotocol/react'
-
-const Wallet = ({ balanceOcean }: { balanceOcean: string }): ReactElement => {
-  const { account, balance, web3Connect } = useWeb3()
-  const ethBalanceText = formatNumber(Number(balance))
-  const oceanBalanceText = formatNumber(Number(balanceOcean))
-  const blockies = account && toDataUrl(account)
-
-  return (
-    <div className={styles.wallet}>
-      {account ? (
-        <ul>
-          <li className={styles.address} title={account}>
-            <img className={styles.blockies} src={blockies} alt="Blockies" />
-            {`${account.substring(0, 8)}...`}
-          </li>
-          <li className={styles.balance}>
-            OCEAN <span>{oceanBalanceText}</span>
-          </li>
-          <li className={styles.balance}>
-            ETH <span>{ethBalanceText}</span>
-          </li>
-        </ul>
-      ) : (
-        <Button style="text" size="small" onClick={() => web3Connect.connect()}>
-          Activate Wallet
-        </Button>
-      )}
-    </div>
-  )
-}
-
-export default Wallet
diff --git a/src/components/organisms/Compute.tsx b/src/components/organisms/Compute.tsx
index e02484c8a..00e355291 100644
--- a/src/components/organisms/Compute.tsx
+++ b/src/components/organisms/Compute.tsx
@@ -3,7 +3,7 @@ import { Ocean } from '@oceanprotocol/squid'
 import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
 import Loader from '../atoms/Loader'
-import Web3Feedback from '../molecules/Web3Feedback'
+import Web3Feedback from '../molecules/Wallet/Feedback'
 import Dropzone from '../atoms/Dropzone'
 import Price from '../atoms/Price'
 import {
diff --git a/src/components/organisms/Consume.tsx b/src/components/organisms/Consume.tsx
index ef1238af8..2804792b9 100644
--- a/src/components/organisms/Consume.tsx
+++ b/src/components/organisms/Consume.tsx
@@ -4,7 +4,7 @@ import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
 import Button from '../atoms/Button'
 import File from '../atoms/File'
 import Price from '../atoms/Price'
-import Web3Feedback from '../molecules/Web3Feedback'
+import Web3Feedback from '../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../atoms/Loader'
 import { useOcean, useConsume } from '@oceanprotocol/react'
diff --git a/src/components/pages/History.tsx b/src/components/pages/History.tsx
index 0c043e994..8148c64b6 100644
--- a/src/components/pages/History.tsx
+++ b/src/components/pages/History.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './History.module.css'
-import Web3Feedback from '../molecules/Web3Feedback'
+import Web3Feedback from '../molecules/Wallet/Feedback'
 import ConsumedList from '../organisms/ConsumedList'
 import PublishedList from '../organisms/PublishedList'
 import JobsList from '../organisms/JobsList'
diff --git a/src/components/pages/Publish.tsx b/src/components/pages/Publish.tsx
index 2848424c5..ff71a4449 100644
--- a/src/components/pages/Publish.tsx
+++ b/src/components/pages/Publish.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PublishForm from '../molecules/PublishForm/PublishForm'
 import styles from './Publish.module.css'
-import Web3Feedback from '../molecules/Web3Feedback'
+import Web3Feedback from '../molecules/Wallet/Feedback'
 
 const PublishPage: React.FC = () => {
   return (
diff --git a/src/global/_variables.css b/src/global/_variables.css
index e7546b517..9c48d0428 100644
--- a/src/global/_variables.css
+++ b/src/global/_variables.css
@@ -28,7 +28,7 @@
   --font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
     'Courier New', monospace;
 
-  --font-size-root: 16px;
+  --font-size-root: 14px;
   --font-size-base: 1rem;
   --font-size-large: 1.2rem;
   --font-size-small: 0.85rem;