feat: make jars interactive (#331)

joinmarket-webui · Jun 15, 2022 · 95b3f09 · 95b3f09
1 parent c68e4c5
commit 95b3f09
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 20 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/components/Jars.jsx b/src/components/Jars.jsx
@@ -1,27 +1,57 @@
-import React, { useMemo } from 'react'
+import React, { useState, useRef, useMemo } from 'react'
+import * as rb from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
 import { useSettings } from '../context/SettingsContext'
 import styles from './Jars.module.css'
 import Sprite from './Sprite'
 import Balance from './Balance'
 
 const Jar = ({ accountIndex, balance, fill, onClick }) => {
   const settings = useSettings()
+  const { t } = useTranslation()
+
+  const [jarIsOpen, setJarIsOpen] = useState(false)
+  const tooltipTarget = useRef(null)
 
   const jarSymbol = ((fill) => {
     switch (fill) {
       case 1:
-        return 'jar-closed-fill-25'
+        return jarIsOpen ? 'jar-open-fill-25' : 'jar-closed-fill-25'
       case 2:
-        return 'jar-closed-fill-50'
+        return jarIsOpen ? 'jar-open-fill-50' : 'jar-closed-fill-50'
       case 3:
-        return 'jar-closed-fill-75'
+        return jarIsOpen ? 'jar-open-fill-75' : 'jar-closed-fill-75'
       default:
-        return 'jar-closed-empty'
+        return jarIsOpen ? 'jar-open-empty' : 'jar-closed-empty'
     }
   })(fill)
 
+  const onMouseOver = () => setJarIsOpen(true)
+  const onMouseOut = () => setJarIsOpen(false)
+
   return (
-    <div className="d-flex flex-column align-items-center gap-1">
+    <div ref={tooltipTarget} className={styles['jar-container']} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
+      <rb.Overlay
+        target={tooltipTarget.current}
+        show={jarIsOpen}
+        placement="top"
+        popperConfig={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 5],
+              },
+            },
+          ],
+        }}
+      >
+        {(props) => (
+          <rb.Tooltip id="jar-tooltip" {...props}>
+            {t('current_wallet.jar_tooltip')}
+          </rb.Tooltip>
+        )}
+      </rb.Overlay>
       <Sprite className={styles['jar-sprite']} symbol={jarSymbol} width="32px" height="48px" onClick={onClick} />
       <div className={styles['jar-index']}>{'#' + accountIndex}</div>
       <div className={styles['jar-balance']}>
@@ -32,6 +62,7 @@ const Jar = ({ accountIndex, balance, fill, onClick }) => {
 }
 
 const Jars = ({ accountBalances, totalBalance, onClick }) => {
+  const { t } = useTranslation()
   const sortedAccountBalances = useMemo(() => {
     if (!accountBalances) return []
     return Object.values(accountBalances).sort((lhs, rhs) => lhs.accountIndex - rhs.accountIndex)
@@ -50,19 +81,33 @@ const Jars = ({ accountBalances, totalBalance, onClick }) => {
     return 0
   }
 
+  const jarsDescriptionPopover = (
+    <rb.Popover id="popover-basic">
+      <rb.Popover.Body>{t('current_wallet.jars_title_popover')}</rb.Popover.Body>
+    </rb.Popover>
+  )
+
   return (
-    <div className={styles['jars-container']}>
-      {sortedAccountBalances.map((account) => {
-        return (
-          <Jar
-            key={account.accountIndex}
-            accountIndex={account.accountIndex}
-            balance={account.totalBalance}
-            fill={calculateFillLevel(account.totalBalance, totalBalance)}
-            onClick={() => onClick(account.accountIndex)}
-          />
-        )
-      })}
+    <div className="d-flex flex-column align-items-center gap-5">
+      <rb.OverlayTrigger placement="top" overlay={jarsDescriptionPopover}>
+        <div className={styles['jars-title']}>
+          <div>{t('current_wallet.jars_title')}</div>
+          <Sprite className={styles['info-icon']} symbol="info" width="18" height="18" />
+        </div>
+      </rb.OverlayTrigger>
+      <div className={styles['jars-container']}>
+        {sortedAccountBalances.map((account) => {
+          return (
+            <Jar
+              key={account.accountIndex}
+              accountIndex={account.accountIndex}
+              balance={account.totalBalance}
+              fill={calculateFillLevel(account.totalBalance, totalBalance)}
+              onClick={() => onClick(account.accountIndex)}
+            />
+          )
+        })}
+      </div>
     </div>
   )
 }

diff --git a/src/components/Jars.module.css b/src/components/Jars.module.css
@@ -1,3 +1,18 @@
+.jars-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  padding: 0 0.5rem 0 0;
+}
+
+.jars-title .info-icon {
+  color: var(--bs-gray-500);
+  border: 1px solid var(--bs-gray-500);
+  border-radius: 50%;
+}
+
 .jars-container {
   display: flex;
   flex-direction: column;
@@ -7,10 +22,17 @@
   color: var(--bs-body-color);
 }
 
-.jar-sprite {
+.jar-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   cursor: pointer;
 }
 
+.jar-sprite {
+  margin: 0 0 0.25rem 0;
+}
+
 .jar-index {
   font-size: 0.8rem;
   color: var(--bs-gray-600);

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -114,7 +114,10 @@
     "text_loading": "Loading",
     "button_deposit": "Receive",
     "button_withdraw": "Send",
-    "error_loading_failed": "Loading wallet failed."
+    "error_loading_failed": "Loading wallet failed.",
+    "jar_tooltip": "Look inside",
+    "jars_title": "Wallet distribution",
+    "jars_title_popover": "Todo: Description of what Jars (mixdepths) are."
   },
   "current_wallet_advanced": {
     "error_loading_utxos_failed": "Loading UTXOs failed.",