Merge branch 'master' into utxo-list

joinmarket-webui · Jul 28, 2022 · 9c21378 · 9c21378
2 parents 2ccc619 + 05c908d
commit 9c21378
Show file tree

Hide file tree

Showing 23 changed files with 849 additions and 729 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['16.11.0']
+        node-version: ['16.16.0']
 
     steps:
       - name: Checkout

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@types/node": "^17.0.35",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.0",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
     "conventional-changelog": "^3.1.25",
@@ -31,24 +31,23 @@
     "jest-watch-typeahead": "^0.6.5",
     "jest-websocket-mock": "^2.3.0",
     "lint-staged": "^12.4.2",
-    "moving-letters": "^1.0.1",
     "prettier": "^2.6.2",
     "qrcode": "^1.5.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.4.0",
+    "react-bootstrap": "^2.5.0-beta.1",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.16.9",
-    "react-router-bootstrap": "^0.26.1",
+    "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.7.2",
-    "web-vitals": "^2.1.4"
-  },
-  "dependencies": {
+    "web-vitals": "^2.1.4",
     "@emotion/react": "^11.9.3",
     "@table-library/react-table-library": "^4.0.10",
     "install": "^0.13.0",
-    "npm": "^8.15.0",
+    "npm": "^8.15.0"
+  },
+  "dependencies": {
     "serve": "13.0.2"
   },
   "scripts": {

diff --git a/src/components/Cheatsheet.tsx b/src/components/Cheatsheet.tsx
@@ -50,27 +50,15 @@ export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
           <div className="small text-secondary">
             <Trans i18nKey="cheatsheet.description">
               Follow the steps below to increase your financial privacy. It is advisable to switch from{' '}
-              <a
-                href="https://github.com/openoms/bitcoin-tutorials/blob/master/joinmarket/joinmarket_private_flow.md#the-maker-role"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href="https://jamdocs.org/glossary/#maker" target="_blank" rel="noopener noreferrer">
                 earning as a maker
               </a>{' '}
               to{' '}
-              <a
-                href="https://github.com/openoms/bitcoin-tutorials/blob/master/joinmarket/joinmarket_private_flow.md#the-taker-role"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href="https://jamdocs.org/glossary/#taker" target="_blank" rel="noopener noreferrer">
                 sending as a taker
               </a>{' '}
               back and forth.{' '}
-              <a
-                href="https://github.com/openoms/bitcoin-tutorials/blob/master/joinmarket/joinmarket_private_flow.md#a-private-flow-through-joinmarket"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <a href="https://jamdocs.org/interface/00-cheatsheet/" target="_blank" rel="noopener noreferrer">
                 Learn more.
               </a>
             </Trans>
@@ -124,11 +112,7 @@ export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
             <div className="small text-secondary">
               <Trans i18nKey="cheatsheet.item_last.description">
                 Still confused?{' '}
-                <a
-                  href="https://github.com/openoms/bitcoin-tutorials/blob/master/joinmarket/joinmarket_private_flow.md#a-private-flow-through-joinmarket"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <a href="https://jamdocs.org/interface/00-cheatsheet/" target="_blank" rel="noopener noreferrer">
                   Dig into the documentation
                 </a>
                 .

diff --git a/src/components/CurrentWalletAdvanced.tsx b/src/components/CurrentWalletAdvanced.tsx
@@ -39,12 +39,9 @@ export default function CurrentWalletAdvanced() {
 
     reloadCurrentWalletInfo({ signal: abortCtrl.signal })
       .then((info) => {
-        if (info && !abortCtrl.signal.aborted) {
-          const unspentOutputs = info.data.utxos.utxos
-          setUtxos(unspentOutputs)
-
-          const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
-          setFidelityBonds(fbOutputs)
+        if (!abortCtrl.signal.aborted) {
+          setFidelityBonds(info.fidelityBondSummary.fbOutputs)
+          setUtxos(info.data.utxos.utxos)
         }
       })
       .catch((err) => {

diff --git a/src/components/CurrentWalletMagic.jsx b/src/components/CurrentWalletMagic.jsx
@@ -10,7 +10,6 @@ import { walletDisplayName } from '../utils'
 import styles from './CurrentWalletMagic.module.css'
 import { ExtendedLink } from './ExtendedLink'
 import { routes } from '../constants/routes'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 import { JarDetailsOverlay } from './jar_details/JarDetailsOverlay'
 import { Jars } from './Jars'
 
@@ -50,7 +49,6 @@ export default function CurrentWalletMagic() {
   const settingsDispatch = useSettingsDispatch()
   const currentWallet = useCurrentWallet()
   const currentWalletInfo = useCurrentWalletInfo()
-  const balanceSummary = useBalanceSummary(currentWalletInfo)
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
 
   const [alert, setAlert] = useState(null)
@@ -77,7 +75,7 @@ export default function CurrentWalletMagic() {
 
   const onJarClicked = (accountIndex) => {
     if (accountIndex === 0) {
-      const isEmpty = Number(balanceSummary?.accountBalances[accountIndex]?.totalBalance) === 0
+      const isEmpty = Number(currentWalletInfo?.balanceSummary.accountBalances[accountIndex]?.totalBalance) === 0
 
       if (isEmpty) {
         navigate(routes.receive, { state: { account: accountIndex } })
@@ -129,7 +127,7 @@ export default function CurrentWalletMagic() {
       <rb.Row onClick={() => settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
         <WalletHeader
           name={currentWallet?.name}
-          balance={balanceSummary?.totalBalance}
+          balance={currentWalletInfo?.balanceSummary.totalBalance}
           unit={settings.unit}
           showBalance={settings.showBalance}
           loading={isLoading}
@@ -179,8 +177,8 @@ export default function CurrentWalletMagic() {
                 </rb.Placeholder>
               ) : (
                 <Jars
-                  accountBalances={balanceSummary?.accountBalances}
-                  totalBalance={balanceSummary?.totalBalance}
+                  accountBalances={currentWalletInfo?.balanceSummary.accountBalances}
+                  totalBalance={currentWalletInfo?.balanceSummary.totalBalance}
                   onClick={onJarClicked}
                 />
               )}

diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 import { useSettings } from '../context/SettingsContext'
 import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
 import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 import Sprite from './Sprite'
 import PageTitle from './PageTitle'
 import SegmentedTabs from './SegmentedTabs'
@@ -91,9 +90,8 @@ export default function Earn() {
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
-  const balanceSummary = useBalanceSummary(currentWalletInfo)
 
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false)
+  const [showSettings, setShowSettings] = useState(false)
   const [alert, setAlert] = useState(null)
   const [serviceInfoAlert, setServiceInfoAlert] = useState(null)
   const [isLoading, setIsLoading] = useState(true)
@@ -157,10 +155,8 @@ export default function Earn() {
 
     const reloadingServiceInfo = reloadServiceInfo({ signal: abortCtrl.signal })
     const reloadingCurrentWalletInfo = reloadCurrentWalletInfo({ signal: abortCtrl.signal }).then((info) => {
-      if (info && !abortCtrl.signal.aborted) {
-        const unspentOutputs = info.data.utxos.utxos
-        const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
-        setFidelityBonds(fbOutputs)
+      if (!abortCtrl.signal.aborted) {
+        setFidelityBonds(info.fidelityBondSummary.fbOutputs)
       }
     })
 
@@ -206,13 +202,7 @@ export default function Earn() {
         resolve(reloadCurrentWalletInfo({ signal: abortCtrl.signal }))
       }, delay)
     })
-      .then((info) => {
-        if (info) {
-          const unspentOutputs = info.data.utxos.utxos
-          const fbOutputs = unspentOutputs.filter((utxo) => utxo.locktime)
-          setFidelityBonds(fbOutputs)
-        }
-      })
+      .then((info) => setFidelityBonds(info.fidelityBondSummary.fbOutputs))
       .catch((err) => {
         setAlert({ variant: 'danger', message: err.message })
       })
@@ -316,11 +306,11 @@ export default function Earn() {
                   {!serviceInfo?.makerRunning &&
                     !isWaitingMakerStart &&
                     !isWaitingMakerStop &&
-                    (!isLoading && balanceSummary ? (
+                    (!isLoading && currentWalletInfo ? (
                       <CreateFidelityBond
                         otherFidelityBondExists={fidelityBonds.length > 0}
-                        accountBalances={balanceSummary?.accountBalances}
-                        totalBalance={balanceSummary?.totalBalance}
+                        accountBalances={currentWalletInfo.balanceSummary.accountBalances}
+                        totalBalance={currentWalletInfo.balanceSummary.totalBalance}
                         wallet={currentWallet}
                         walletInfo={currentWalletInfo}
                         onDone={() => reloadFidelityBonds({ delay: RELOAD_FIDELITY_BONDS_DELAY_MS })}
@@ -343,17 +333,17 @@ export default function Earn() {
                       <rb.Button
                         variant={`${settings.theme}`}
                         className={`${styles['settings-btn']} d-flex align-items-center`}
-                        onClick={() => setShowAdvancedSettings((current) => !current)}
+                        onClick={() => setShowSettings((current) => !current)}
                       >
                         {t('earn.button_settings')}
                         <Sprite
-                          symbol={`caret-${showAdvancedSettings ? 'up' : 'down'}`}
+                          symbol={`caret-${showSettings ? 'up' : 'down'}`}
                           className="ms-1"
                           width="20"
                           height="20"
                         />
                       </rb.Button>
-                      {showAdvancedSettings && (
+                      {showSettings && (
                         <div className="my-4">
                           <rb.Form.Group className="mb-4 d-flex justify-content-center" controlId="offertype">
                             <SegmentedTabs
@@ -492,33 +482,35 @@ export default function Earn() {
                       <hr className="m-0" />
                     </div>
                   )}
-                  <rb.Button
-                    variant="dark"
-                    type="submit"
-                    className="mt-4"
-                    disabled={isLoading || isSubmitting || isWaitingMakerStart || isWaitingMakerStop}
-                  >
-                    <div className="d-flex justify-content-center align-items-center">
-                      {(isWaitingMakerStart || isWaitingMakerStop) && (
-                        <rb.Spinner
-                          as="span"
-                          animation="border"
-                          size="sm"
-                          role="status"
-                          aria-hidden="true"
-                          className="me-2"
-                        />
-                      )}
-                      {isWaitingMakerStart || isWaitingMakerStop ? (
-                        <>
-                          {isWaitingMakerStart && t('earn.text_starting')}
-                          {isWaitingMakerStop && t('earn.text_stopping')}
-                        </>
-                      ) : (
-                        <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')}</>
-                      )}
-                    </div>
-                  </rb.Button>
+                  <div class="mt-4">
+                    <rb.Button
+                      variant="dark"
+                      type="submit"
+                      className={styles['earn-btn']}
+                      disabled={isLoading || isSubmitting || isWaitingMakerStart || isWaitingMakerStop}
+                    >
+                      <div className="d-flex justify-content-center align-items-center">
+                        {(isWaitingMakerStart || isWaitingMakerStop) && (
+                          <rb.Spinner
+                            as="span"
+                            animation="border"
+                            size="sm"
+                            role="status"
+                            aria-hidden="true"
+                            className="me-2"
+                          />
+                        )}
+                        {isWaitingMakerStart || isWaitingMakerStop ? (
+                          <>
+                            {isWaitingMakerStart && t('earn.text_starting')}
+                            {isWaitingMakerStop && t('earn.text_stopping')}
+                          </>
+                        ) : (
+                          <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')}</>
+                        )}
+                      </div>
+                    </rb.Button>
+                  </div>
                 </rb.Form>
               )}
             </Formik>

diff --git a/src/components/Earn.module.css b/src/components/Earn.module.css
@@ -12,7 +12,7 @@
   height: 3.5rem;
 }
 
-.earn form button {
+.earn .earn-btn {
   height: 3rem;
   width: 100%;
 }
@@ -25,7 +25,8 @@
   background-color: transparent !important;
   border: none;
   padding-left: 0;
-  font-weight: 500;
+  height: 3rem;
+  width: 100%;
 }
 
 .settings-container .input-group-text {
@@ -37,11 +38,11 @@
 }
 
 .earn hr {
-  background-color: rgba(222, 222, 222, 1);
+  border-color: rgba(222, 222, 222, 1);
   opacity: 100%;
 }
 
 :root[data-theme='dark'] .earn hr {
-  background-color: var(--bs-gray-800);
+  border-color: var(--bs-gray-800);
   opacity: 100%;
 }
diff --git a/src/components/Jam.jsx b/src/components/Jam.jsx
@@ -7,7 +7,6 @@ import { useSettings } from '../context/SettingsContext'
 import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
 import { useCurrentWallet, useCurrentWalletInfo, useReloadCurrentWalletInfo } from '../context/WalletContext'
 import { isDebugFeatureEnabled } from '../constants/debugFeatures'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 import { COINJOIN_PRECONDITIONS, useCoinjoinPreconditionSummary } from '../hooks/CoinjoinPrecondition'
 import PageTitle from './PageTitle'
 import ToggleSwitch from './ToggleSwitch'
@@ -46,7 +45,6 @@ export default function Jam() {
   const reloadServiceInfo = useReloadServiceInfo()
   const wallet = useCurrentWallet()
   const walletInfo = useCurrentWalletInfo()
-  const balanceSummary = useBalanceSummary(walletInfo)
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
 
   const [alert, setAlert] = useState(null)
@@ -315,7 +313,7 @@ export default function Jam() {
               </>
             </rb.Alert>
           </rb.Fade>
-          {!collaborativeOperationRunning && balanceSummary && (
+          {!collaborativeOperationRunning && walletInfo && (
             <>
               <div className="d-flex align-items-center justify-content-between mb-4">
                 <div className="d-flex align-items-center gap-2">
@@ -329,7 +327,7 @@ export default function Jam() {
                 </div>
                 <>
                   <Balance
-                    valueString={`${balanceSummary.calculatedAvailableBalanceInSats}`}
+                    valueString={`${walletInfo.balanceSummary.calculatedAvailableBalanceInSats}`}
                     convertToUnit={settings.unit}
                     showBalance={settings.showBalance}
                   />

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -10,7 +10,6 @@ import { useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext
 import { useServiceInfo, useSessionConnectionError } from '../context/ServiceInfoContext'
 import { walletDisplayName } from '../utils'
 import { routes } from '../constants/routes'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 
 const WalletPreview = ({ wallet, totalBalance, unit, showBalance }) => {
   return (
@@ -131,7 +130,6 @@ export default function Navbar() {
   const settings = useSettings()
   const currentWallet = useCurrentWallet()
   const currentWalletInfo = useCurrentWalletInfo()
-  const balanceSummary = useBalanceSummary(currentWalletInfo)
 
   const serviceInfo = useServiceInfo()
   const sessionConnectionError = useSessionConnectionError()
@@ -206,7 +204,7 @@ export default function Navbar() {
                       <>
                         <WalletPreview
                           wallet={currentWallet}
-                          totalBalance={balanceSummary?.totalBalance}
+                          totalBalance={currentWalletInfo?.balanceSummary.totalBalance}
                           showBalance={settings.showBalance}
                           unit={settings.unit}
                         />