wallet UI & feedback refactor

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",

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",

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 */

src/components/molecules/Menu.module.css

@@ -1,6 +1,7 @@
 .menu {
 }
 
+.menu > div,
 .link {
   display: inline-block;
   color: var(--brand-grey);

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} />
       ))}

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;
-}

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

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;
+}

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>
+  )
+}

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 {

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
 }

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

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>
+  )
+}

src/components/molecules/Web3Feedback/Wallet.tsx

@@ -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

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 {

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'

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'

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 (

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;