From 24c01070365cbfcfc52d6cddad73d866bbbcf0dc Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Fri, 22 Jul 2022 11:55:47 +0200
Subject: [PATCH 1/9] fix: spacing in jar overlay header and `onKeyDown` (#421)

* fix: spacing in jar overlay header

* fix: onKeyDown handling in jar overlay
---
 .../DisplayAccountsOverlay.module.css         |  4 +-
 src/components/DisplayAccountsOverlay.tsx     | 47 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/DisplayAccountsOverlay.module.css b/src/components/DisplayAccountsOverlay.module.css
index ad30788ff..0f8da7c4e 100644
--- a/src/components/DisplayAccountsOverlay.module.css
+++ b/src/components/DisplayAccountsOverlay.module.css
@@ -16,8 +16,8 @@
 
 .accounts-overlay-header-title {
   display: inline-flex;
-  justify-content: space-between;
-  width: 8ch;
+  justify-content: center;
+  min-width: 8ch;
   margin: 0 0.5rem;
 }
 
diff --git a/src/components/DisplayAccountsOverlay.tsx b/src/components/DisplayAccountsOverlay.tsx
index 1ed17d5e6..c2f161089 100644
--- a/src/components/DisplayAccountsOverlay.tsx
+++ b/src/components/DisplayAccountsOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { DisplayBranchHeader, DisplayBranchBody } from './DisplayBranch'
@@ -26,33 +26,36 @@ export function DisplayAccountsOverlay({ accounts, selectedAccountIndex = 0, sho
     setAccountIndex(selectedAccountIndex)
   }, [selectedAccountIndex])
 
-  const nextAccount = () => {
-    const currentIndex = account === null ? 0 : accounts.indexOf(account)
-    setAccountIndex(currentIndex + 1 >= accounts.length ? 0 : currentIndex + 1)
-  }
-  const previousAccount = () => {
-    const currentIndex = account === null ? 0 : accounts.indexOf(account)
-    setAccountIndex(currentIndex - 1 < 0 ? accounts.length - 1 : currentIndex - 1)
-  }
+  const nextAccount = useCallback(
+    () => setAccountIndex((current) => (current + 1 >= accounts.length ? 0 : current + 1)),
+    [accounts]
+  )
+  const previousAccount = useCallback(
+    () => setAccountIndex((current) => (current - 1 < 0 ? accounts.length - 1 : current - 1)),
+    [accounts]
+  )
 
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.code === 'ArrowLeft') previousAccount()
-    else if (e.code === 'ArrowRight') nextAccount()
-  }
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'ArrowLeft') previousAccount()
+      else if (e.code === 'ArrowRight') nextAccount()
+    },
+    [previousAccount, nextAccount]
+  )
+
+  useEffect(() => {
+    if (!show) return
+
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [show, onKeyDown])
 
   if (!account) {
     return <></>
   }
 
   return (
-    <rb.Offcanvas
-      className={styles['accounts-overlay']}
-      show={show}
-      onHide={onHide}
-      placement="bottom"
-      tabIndex={-1}
-      onKeyDown={onKeyDown}
-    >
+    <rb.Offcanvas className={styles['accounts-overlay']} show={show} onHide={onHide} placement="bottom" tabIndex={-1}>
       <rb.Offcanvas.Header className={styles['accounts-overlay-header']}>
         <div className="d-flex flex-1">
           <rb.Col>
@@ -70,7 +73,7 @@ export function DisplayAccountsOverlay({ accounts, selectedAccountIndex = 0, sho
                 <Sprite symbol="caret-left" width="24" height="24" />
               </rb.Button>
               <div className={`${styles['accounts-overlay-header-title']}`}>
-                {t('current_wallet_advanced.account')} <span className="ml-1">{account.account}</span>
+                {t('current_wallet_advanced.account')} <span className="ms-1">#{account.account}</span>
               </div>
               <rb.Button
                 variant="link"

From 662faf2c5523c073385a81053ff5bd861429d039 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Fri, 22 Jul 2022 11:58:33 +0200
Subject: [PATCH 2/9] fix: do not display freeze info when all utxos have been
 selected (#420)

---
 src/components/fb/FidelityBondSteps.tsx | 42 ++++++++++++++-----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
index 61c5a6cf0..25cf64acd 100644
--- a/src/components/fb/FidelityBondSteps.tsx
+++ b/src/components/fb/FidelityBondSteps.tsx
@@ -209,26 +209,30 @@ const FreezeUtxos = ({ walletInfo, jar, utxos, selectedUtxos, isLoading = false
           isSelected={true}
         />
       ))}
-      {fb.utxo.allAreFrozen(utxosToFreeze) ? (
-        <div className={styles.stepDescription}>
-          {t('earn.fidelity_bond.freeze_utxos.description_unselected_utxos')}
-        </div>
-      ) : (
-        <div className={styles.stepDescription}>
-          {t('earn.fidelity_bond.freeze_utxos.description_unselected_utxos')}{' '}
-          {t('earn.fidelity_bond.freeze_utxos.description_selected_utxos_to_freeze', { jar })}
-        </div>
+      {utxosToFreeze.length > 0 && (
+        <>
+          {fb.utxo.allAreFrozen(utxosToFreeze) ? (
+            <div className={styles.stepDescription}>
+              {t('earn.fidelity_bond.freeze_utxos.description_unselected_utxos')}
+            </div>
+          ) : (
+            <div className={styles.stepDescription}>
+              {t('earn.fidelity_bond.freeze_utxos.description_unselected_utxos')}{' '}
+              {t('earn.fidelity_bond.freeze_utxos.description_selected_utxos_to_freeze', { jar })}
+            </div>
+          )}
+          {utxosToFreeze.map((utxo, index) => (
+            <UtxoCard
+              key={index}
+              utxo={utxo}
+              status={walletInfo.addressSummary[utxo.address]?.status}
+              isSelectable={false}
+              isSelected={false}
+              isLoading={isLoading}
+            />
+          ))}
+        </>
       )}
-      {utxosToFreeze.map((utxo, index) => (
-        <UtxoCard
-          key={index}
-          utxo={utxo}
-          status={walletInfo.addressSummary[utxo.address]?.status}
-          isSelectable={false}
-          isSelected={false}
-          isLoading={isLoading}
-        />
-      ))}
     </div>
   )
 }

From 47aab8046707fc631345c80afd36ffab807401f9 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Tue, 26 Jul 2022 09:16:37 +0200
Subject: [PATCH 3/9] refactor: move filtering for Fidelity Bonds to
 WalletContext (#418)

---
 src/components/CurrentWalletAdvanced.tsx |  9 +++------
 src/components/Earn.jsx                  | 14 +++-----------
 src/components/fb/CreateFidelityBond.jsx |  2 +-
 src/context/WalletContext.tsx            | 14 ++++++++++++++
 src/hooks/BalanceSummary.test.tsx        |  3 +++
 5 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/CurrentWalletAdvanced.tsx b/src/components/CurrentWalletAdvanced.tsx
index 2a9d5c9e1..101a2ac7b 100644
--- 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/Earn.jsx b/src/components/Earn.jsx
index cf6762997..05219caf1 100644
--- a/src/components/Earn.jsx
+++ b/src/components/Earn.jsx
@@ -157,10 +157,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 +204,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 })
       })
diff --git a/src/components/fb/CreateFidelityBond.jsx b/src/components/fb/CreateFidelityBond.jsx
index 041977126..b25112a35 100644
--- a/src/components/fb/CreateFidelityBond.jsx
+++ b/src/components/fb/CreateFidelityBond.jsx
@@ -178,7 +178,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, accountBalances, totalBal
             // Note that two fidelity bonds with the same locktime will end up on the same address.
             // Therefore, this might not actually be the UTXO we just created.
             // Since we're using it only for displaying locktime and address, this should be fine though.
-            const fbUtxo = walletInfo.data.utxos.utxos.find((utxo) => utxo.address === timelockedAddress)
+            const fbUtxo = walletInfo.fidelityBondSummary.fbOutputs.find((utxo) => utxo.address === timelockedAddress)
 
             if (fbUtxo !== undefined) {
               setCreatedFidelityBondUtxo(fbUtxo)
diff --git a/src/context/WalletContext.tsx b/src/context/WalletContext.tsx
index 00794e631..8fa506b63 100644
--- a/src/context/WalletContext.tsx
+++ b/src/context/WalletContext.tsx
@@ -83,8 +83,13 @@ type AddressSummary = {
   [key: Api.BitcoinAddress]: AddressInfo
 }
 
+type FidenlityBondSummary = {
+  fbOutputs: Utxos
+}
+
 export interface WalletInfo {
   addressSummary: AddressSummary
+  fidelityBondSummary: FidenlityBondSummary
   data: CombinedRawWalletData
 }
 
@@ -106,6 +111,13 @@ const toAddressSummary = (data: CombinedRawWalletData): AddressSummary => {
     }, {} as AddressSummary)
 }
 
+const toFidelityBondSummary = (data: CombinedRawWalletData): FidenlityBondSummary => {
+  const fbOutputs = data.utxos.utxos.filter((utxo) => utxo.locktime)
+  return {
+    fbOutputs,
+  }
+}
+
 const WalletContext = createContext<WalletContextEntry | undefined>(undefined)
 
 const restoreWalletFromSession = (): CurrentWallet | null => {
@@ -140,9 +152,11 @@ const loadWalletInfoData = async ({
 
 const toWalletInfo = (data: CombinedRawWalletData): WalletInfo => {
   const addressSummary = toAddressSummary(data)
+  const fidelityBondSummary = toFidelityBondSummary(data)
 
   return {
     addressSummary,
+    fidelityBondSummary,
     data,
   }
 }
diff --git a/src/hooks/BalanceSummary.test.tsx b/src/hooks/BalanceSummary.test.tsx
index f54569dee..9b44f1c5c 100644
--- a/src/hooks/BalanceSummary.test.tsx
+++ b/src/hooks/BalanceSummary.test.tsx
@@ -37,6 +37,7 @@ describe('BalanceSummary', () => {
       balanceSummary = setup(
         {
           addressSummary: {},
+          fidelityBondSummary: { fbOutputs: [] },
           data: {
             utxos: {
               utxos: [],
@@ -67,6 +68,7 @@ describe('BalanceSummary', () => {
       balanceSummary = setup(
         {
           addressSummary: {},
+          fidelityBondSummary: { fbOutputs: [] },
           data: {
             utxos: {
               utxos: [
@@ -129,6 +131,7 @@ describe('BalanceSummary', () => {
       balanceSummary = setup(
         {
           addressSummary: {},
+          fidelityBondSummary: { fbOutputs: [] },
           data: {
             utxos: {
               utxos: [

From b41f21532bbc6aaec760188e2f6d56cf43e12485 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Jul 2022 09:20:12 +0200
Subject: [PATCH 4/9] build(deps): bump terser from 5.10.0 to 5.14.2 (#415)

Bumps [terser](https://github.com/terser/terser) from 5.10.0 to 5.14.2.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 148 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 117 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f60884570..1aa157df6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2634,6 +2634,64 @@
         "@types/yargs-parser": "*"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -17383,13 +17441,14 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dev": true,
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "bin": {
@@ -17397,14 +17456,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "peerDependencies": {
-        "acorn": "^8.5.0"
-      },
-      "peerDependenciesMeta": {
-        "acorn": {
-          "optional": true
-        }
       }
     },
     "node_modules/terser-webpack-plugin": {
@@ -17465,15 +17516,6 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -20885,6 +20927,55 @@
         }
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -31926,13 +32017,14 @@
       }
     },
     "terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
       },
       "dependencies": {
@@ -31941,12 +32033,6 @@
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
         }
       }
     },

From 95def422550030fb80fbfe3d5f4f77c4cdfaa802 Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Tue, 26 Jul 2022 12:29:08 +0200
Subject: [PATCH 5/9] refactor: move BalanceSummary to WalletContext (#419)

---
 src/components/CurrentWalletMagic.jsx   |  10 +-
 src/components/Earn.jsx                 |   8 +-
 src/components/Jam.jsx                  |   6 +-
 src/components/Navbar.jsx               |   4 +-
 src/components/Receive.jsx              |  14 +-
 src/components/Send.jsx                 |  16 +-
 src/components/fb/FidelityBondSteps.tsx |   2 +-
 src/context/BalanceSummary.test.tsx     | 188 +++++++++++++++++++
 src/context/BalanceSummary.ts           | 124 ++++++++++++
 src/context/WalletContext.tsx           |   7 +-
 src/hooks/BalanceSummary.test.tsx       | 238 ------------------------
 src/hooks/BalanceSummary.ts             | 143 --------------
 12 files changed, 343 insertions(+), 417 deletions(-)
 create mode 100644 src/context/BalanceSummary.test.tsx
 create mode 100644 src/context/BalanceSummary.ts
 delete mode 100644 src/hooks/BalanceSummary.test.tsx
 delete mode 100644 src/hooks/BalanceSummary.ts

diff --git a/src/components/CurrentWalletMagic.jsx b/src/components/CurrentWalletMagic.jsx
index 92e0bf4b9..7f7920244 100644
--- 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 { DisplayAccountsOverlay } from './DisplayAccountsOverlay'
 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)
@@ -66,7 +64,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 } })
@@ -115,7 +113,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}
@@ -165,8 +163,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
index 05219caf1..6114b48bc 100644
--- 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,7 +90,6 @@ export default function Earn() {
   const reloadCurrentWalletInfo = useReloadCurrentWalletInfo()
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
-  const balanceSummary = useBalanceSummary(currentWalletInfo)
 
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false)
   const [alert, setAlert] = useState(null)
@@ -308,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 })}
diff --git a/src/components/Jam.jsx b/src/components/Jam.jsx
index 10e017ef8..5cd7b9186 100644
--- 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
index aa00da0f9..5099470bc 100644
--- 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}
                         />
diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx
index d2623dcfc..9277f00e2 100644
--- a/src/components/Receive.jsx
+++ b/src/components/Receive.jsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 
 import { useSettings } from '../context/SettingsContext'
 import { useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 import * as Api from '../libs/JmWalletApi'
 
 import { BitcoinQR } from './BitcoinQR'
@@ -22,7 +21,6 @@ export default function Receive() {
   const settings = useSettings()
   const currentWallet = useCurrentWallet()
   const walletInfo = useCurrentWalletInfo()
-  const balanceSummary = useBalanceSummary(walletInfo)
   const [validated, setValidated] = useState(false)
   const [alert, setAlert] = useState(null)
   const [isLoading, setIsLoading] = useState(false)
@@ -33,9 +31,11 @@ export default function Receive() {
   const [showSettings, setShowSettings] = useState(false)
 
   const sortedAccountBalances = useMemo(() => {
-    if (!balanceSummary) return []
-    return Object.values(balanceSummary.accountBalances).sort((lhs, rhs) => lhs.accountIndex - rhs.accountIndex)
-  }, [balanceSummary])
+    if (!walletInfo) return []
+    return Object.values(walletInfo.balanceSummary.accountBalances).sort(
+      (lhs, rhs) => lhs.accountIndex - rhs.accountIndex
+    )
+  }, [walletInfo])
 
   useEffect(() => {
     const abortCtrl = new AbortController()
@@ -119,7 +119,7 @@ export default function Receive() {
           </rb.Button>
           {showSettings && (
             <div className="my-4">
-              {!balanceSummary || sortedAccountBalances.length === 0 ? (
+              {!walletInfo || sortedAccountBalances.length === 0 ? (
                 <rb.Placeholder as="div" animation="wave">
                   <rb.Placeholder className={styles.jarsPlaceholder} />
                 </rb.Placeholder>
@@ -132,7 +132,7 @@ export default function Receive() {
                       balance={it.totalBalance}
                       isSelectable={true}
                       isSelected={it.accountIndex === selectedJarIndex}
-                      fillLevel={calculateFillLevel(it.totalBalance, balanceSummary.totalBalance)}
+                      fillLevel={calculateFillLevel(it.totalBalance, walletInfo.balanceSummary.totalBalance)}
                       onClick={() => setSelectedJarIndex(it.accountIndex)}
                     />
                   ))}
diff --git a/src/components/Send.jsx b/src/components/Send.jsx
index da5eea15f..a96fe0763 100644
--- a/src/components/Send.jsx
+++ b/src/components/Send.jsx
@@ -13,7 +13,6 @@ import { useReloadCurrentWalletInfo, useCurrentWallet, useCurrentWalletInfo } fr
 import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoContext'
 import { useLoadConfigValue } from '../context/ServiceConfigContext'
 import { useSettings } from '../context/SettingsContext'
-import { useBalanceSummary } from '../hooks/BalanceSummary'
 import { COINJOIN_PRECONDITIONS, useCoinjoinPreconditionSummary } from '../hooks/CoinjoinPrecondition'
 
 import * as Api from '../libs/JmWalletApi'
@@ -309,10 +308,9 @@ export default function Send() {
   const [numCollaborators, setNumCollaborators] = useState(initialNumCollaborators(minNumCollaborators))
   const [formIsValid, setFormIsValid] = useState(false)
 
-  const balanceSummary = useBalanceSummary(walletInfo)
   const accountBalanceOrNull = useMemo(
-    () => (balanceSummary && balanceSummary.accountBalances[account]) || null,
-    [balanceSummary, account]
+    () => (walletInfo && walletInfo.balanceSummary.accountBalances[account]) || null,
+    [walletInfo, account]
   )
 
   const sourceJarUtxos = useMemo(() => {
@@ -708,12 +706,12 @@ export default function Send() {
           <CoinjoinPreconditionFailedAlert coinjoinPreconditionSummary={coinjoinPreconditionSummary} />
         )}
 
-        {!isLoading && balanceSummary && (
+        {!isLoading && walletInfo && (
           <JarSelectorModal
             isShown={destinationJarPickerShown}
             title={'Select a jar from your wallet to send the funds to.'}
-            accountBalances={balanceSummary?.accountBalances}
-            totalBalance={balanceSummary?.totalBalance}
+            accountBalances={walletInfo.balanceSummary.accountBalances}
+            totalBalance={walletInfo.balanceSummary.totalBalance}
             disabledJar={account}
             onCancel={() => setDestinationJarPickerShown(false)}
             onConfirm={(selectedJar) => {
@@ -755,8 +753,8 @@ export default function Send() {
                 isInvalid={!isValidAccount(account)}
                 disabled={isOperationDisabled}
               >
-                {balanceSummary &&
-                  Object.values(balanceSummary.accountBalances)
+                {walletInfo &&
+                  Object.values(walletInfo.balanceSummary.accountBalances)
                     .sort((lhs, rhs) => lhs.accountIndex - rhs.accountIndex)
                     .map(({ accountIndex, totalBalance, calculatedTotalBalanceInSats }) => (
                       <option key={accountIndex} value={accountIndex}>
diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
index 25cf64acd..b2c96c2d3 100644
--- a/src/components/fb/FidelityBondSteps.tsx
+++ b/src/components/fb/FidelityBondSteps.tsx
@@ -4,7 +4,7 @@ import classnamesBind from 'classnames/bind'
 import * as Api from '../../libs/JmWalletApi'
 import { useTranslation } from 'react-i18next'
 import { useSettings } from '../../context/SettingsContext'
-import { AccountBalances, AccountBalanceSummary } from '../../hooks/BalanceSummary'
+import { AccountBalances, AccountBalanceSummary } from '../../context/BalanceSummary'
 import { Utxo, AddressStatus, WalletInfo } from '../../context/WalletContext'
 import { calculateFillLevel, SelectableJar } from '../jars/Jar'
 import Sprite from '../Sprite'
diff --git a/src/context/BalanceSummary.test.tsx b/src/context/BalanceSummary.test.tsx
new file mode 100644
index 000000000..143dfd27a
--- /dev/null
+++ b/src/context/BalanceSummary.test.tsx
@@ -0,0 +1,188 @@
+import { toBalanceSummary } from './BalanceSummary'
+import { Utxo } from '../context/WalletContext'
+
+const now = Date.UTC(2009, 0, 3)
+
+describe('BalanceSummary', () => {
+  it('should handle <=v0.9.6 balance format', () => {
+    const balanceSummary = toBalanceSummary(
+      {
+        utxos: {
+          utxos: [],
+        },
+        display: {
+          walletinfo: {
+            wallet_name: 'test.jmdat',
+            total_balance: '2.00000000',
+            available_balance: '1.00000000',
+            accounts: [],
+          },
+        },
+      },
+      now
+    )
+
+    expect(balanceSummary).not.toBeNull()
+    expect(balanceSummary!.totalBalance).toBe('2.00000000')
+    expect(balanceSummary!.availableBalance).toBe('1.00000000')
+  })
+
+  it('should populate balance properties calculated from utxo data', () => {
+    const balanceSummary = toBalanceSummary(
+      {
+        utxos: {
+          utxos: [
+            {
+              value: 1,
+              mixdepth: 0,
+              frozen: false,
+            } as Utxo,
+            {
+              value: 2,
+              mixdepth: 0,
+              frozen: false,
+              // unfrozen but not yet expired
+              locktime: '2999-12',
+              path: `m/84'/1'/0'/0/2:${now / 1_000 + 1}`,
+            } as Utxo,
+            {
+              value: 3,
+              mixdepth: 0,
+              confirmations: 0,
+              frozen: true,
+            } as Utxo,
+            {
+              value: 4,
+              mixdepth: 0,
+              // unfrozen and expired
+              frozen: false,
+              locktime: '2009-01',
+              path: `m/84'/1'/0'/0/2:${now / 1_000 - 1}`,
+            } as Utxo,
+          ],
+        },
+        display: {
+          walletinfo: {
+            wallet_name: 'test.jmdat',
+            total_balance: '0.00000010',
+            available_balance: '0.00000005',
+            accounts: [],
+          },
+        },
+      },
+      now
+    )
+
+    expect(balanceSummary).not.toBeNull()
+    expect(balanceSummary!.totalBalance).toBe('0.00000010')
+    expect(balanceSummary!.availableBalance).toBe('0.00000005')
+    expect(balanceSummary!.calculatedTotalBalanceInSats).toBe(10)
+    expect(balanceSummary!.calculatedAvailableBalanceInSats).toBe(5)
+    expect(balanceSummary!.calculatedFrozenOrLockedBalanceInSats).toBe(5)
+    expect(balanceSummary!.accountBalances).toEqual({})
+  })
+
+  it('should populate account balance data', () => {
+    const balanceSummary = toBalanceSummary(
+      {
+        utxos: {
+          utxos: [
+            {
+              value: 111111111,
+              mixdepth: 1,
+            } as Utxo,
+            {
+              value: 222222222,
+              mixdepth: 2,
+            } as Utxo,
+            {
+              value: 11111111,
+              mixdepth: 2,
+              frozen: true,
+            } as Utxo,
+            {
+              value: 333333333,
+              mixdepth: 3,
+              confirmations: 0,
+              frozen: true,
+            } as Utxo,
+          ],
+        },
+        display: {
+          walletinfo: {
+            wallet_name: 'test.jmdat',
+            total_balance: '6.77777777',
+            available_balance: '3.33333333',
+            accounts: [
+              {
+                account: '0',
+                account_balance: '0.00000000',
+                available_balance: '0.00000000',
+                branches: [],
+              },
+              {
+                account: '1',
+                account_balance: '1.11111111',
+                available_balance: '1.11111111',
+                branches: [],
+              },
+              {
+                account: '2',
+                account_balance: '2.33333333',
+                available_balance: '2.22222222',
+                branches: [],
+              },
+              {
+                account: '3',
+                account_balance: '3.33333333',
+                available_balance: '0.00000000',
+                branches: [],
+              },
+            ],
+          },
+        },
+      },
+      now
+    )
+
+    expect(balanceSummary).not.toBeNull()
+    expect(balanceSummary!.totalBalance).toBe('6.77777777')
+    expect(balanceSummary!.availableBalance).toBe('3.33333333')
+    expect(balanceSummary!.calculatedTotalBalanceInSats).toBe(677777777)
+    expect(balanceSummary!.calculatedAvailableBalanceInSats).toBe(333333333)
+    expect(balanceSummary!.calculatedFrozenOrLockedBalanceInSats).toBe(344444444)
+    expect(Object.keys(balanceSummary!.accountBalances)).toHaveLength(4)
+
+    const account0 = balanceSummary!.accountBalances[0]
+    expect(account0.accountIndex).toBe(0)
+    expect(account0.totalBalance).toBe('0.00000000')
+    expect(account0.availableBalance).toBe('0.00000000')
+    expect(account0.calculatedTotalBalanceInSats).toBe(0)
+    expect(account0.calculatedAvailableBalanceInSats).toBe(0)
+    expect(account0.calculatedFrozenOrLockedBalanceInSats).toBe(0)
+
+    const account1 = balanceSummary!.accountBalances[1]
+    expect(account1.accountIndex).toBe(1)
+    expect(account1.totalBalance).toBe('1.11111111')
+    expect(account1.availableBalance).toBe('1.11111111')
+    expect(account1.calculatedTotalBalanceInSats).toBe(111111111)
+    expect(account1.calculatedAvailableBalanceInSats).toBe(111111111)
+    expect(account1.calculatedFrozenOrLockedBalanceInSats).toBe(0)
+
+    const account2 = balanceSummary!.accountBalances[2]
+    expect(account2.accountIndex).toBe(2)
+    expect(account2.totalBalance).toBe('2.33333333')
+    expect(account2.availableBalance).toBe('2.22222222')
+    expect(account2.calculatedTotalBalanceInSats).toBe(233333333)
+    expect(account2.calculatedAvailableBalanceInSats).toBe(222222222)
+    expect(account2.calculatedFrozenOrLockedBalanceInSats).toBe(11111111)
+
+    const account3 = balanceSummary!.accountBalances[3]
+    expect(account3.accountIndex).toBe(3)
+    expect(account3.totalBalance).toBe('3.33333333')
+    expect(account3.availableBalance).toBe('0.00000000')
+    expect(account3.calculatedTotalBalanceInSats).toBe(333333333)
+    expect(account3.calculatedAvailableBalanceInSats).toBe(0)
+    expect(account3.calculatedFrozenOrLockedBalanceInSats).toBe(333333333)
+  })
+})
diff --git a/src/context/BalanceSummary.ts b/src/context/BalanceSummary.ts
new file mode 100644
index 000000000..45d7c0060
--- /dev/null
+++ b/src/context/BalanceSummary.ts
@@ -0,0 +1,124 @@
+import { CombinedRawWalletData, BalanceString, Utxos } from '../context/WalletContext'
+
+import * as fb from '../components/fb/utils'
+import { AmountSats } from '../libs/JmWalletApi'
+
+type Milliseconds = number
+
+interface BalanceSummary {
+  totalBalance: BalanceString
+  /**
+   * @since clientserver v0.9.7
+   * @description available balance (total - frozen - locked)
+   *   This value can report less than available in case of address reuse.
+   *   See https://github.com/JoinMarket-Org/joinmarket-clientserver/pull/1285#issuecomment-1136438072
+   *   Utxos controlled by the same key will not be taken into account if at least one output is
+   *   frozen (last checked on 2022-05-24).
+   *
+   *   Please use {@link BalanceSummarySupport#calculatedAvailableBalanceInSats}) if applicable.
+   */
+  availableBalance: BalanceString
+}
+
+type BalanceSummarySupport = BalanceSummary & {
+  /**
+   * @description Manually calculated total balance in sats.
+   */
+  calculatedTotalBalanceInSats: AmountSats
+  /**
+   * @description Manually calculated available balance in sats.
+   *   Same as {@link BalanceSummary#availableBalance} except address reuse is taken into account.
+   */
+  calculatedAvailableBalanceInSats: AmountSats
+  /**
+   * @description Manually calculated frozen or locked balance in sats.
+   */
+  calculatedFrozenOrLockedBalanceInSats: AmountSats
+}
+
+type AccountBalanceSummary = BalanceSummarySupport & {
+  accountIndex: number
+}
+
+type AccountBalances = {
+  [key: number]: AccountBalanceSummary
+}
+
+export type WalletBalanceSummary = BalanceSummarySupport & {
+  accountBalances: AccountBalances
+}
+
+const calculateFrozenOrLockedBalance = (utxos: Utxos, refTime: Milliseconds = Date.now()) => {
+  const frozenOrLockedUtxos = utxos.filter((utxo) => utxo.frozen || fb.utxo.isLocked(utxo, refTime))
+  return frozenOrLockedUtxos.reduce((acc, utxo) => acc + utxo.value, 0)
+}
+
+const toBalanceSummary = (rawWalletData: CombinedRawWalletData, now?: Milliseconds): WalletBalanceSummary => {
+  const refTime = now !== undefined ? now : Date.now()
+
+  const accounts = rawWalletData.display.walletinfo.accounts
+  const utxos = rawWalletData.utxos.utxos
+
+  const walletBalanceSummary: BalanceSummary = {
+    totalBalance: rawWalletData.display.walletinfo.total_balance,
+    availableBalance: rawWalletData.display.walletinfo.available_balance,
+  }
+  const utxosByAccount = utxos.reduce((acc, utxo) => {
+    const key = `${utxo.mixdepth}`
+    acc[key] = acc[key] || []
+    acc[key].push(utxo)
+    return acc
+  }, {} as { [key: string]: Utxos })
+
+  const totalCalculatedByAccount = Object.fromEntries(
+    Object.entries(utxosByAccount).map(([account, utxos]) => {
+      return [account, utxos.reduce((acc, utxo) => acc + utxo.value, 0)]
+    })
+  )
+  const frozenOrLockedCalculatedByAccount = Object.fromEntries(
+    Object.entries(utxosByAccount).map(([account, utxos]) => {
+      return [account, calculateFrozenOrLockedBalance(utxos, refTime)]
+    })
+  )
+
+  const accountsBalanceSummary = accounts
+    .map(({ account, account_balance, available_balance }) => {
+      const accountBalanceSummary: BalanceSummary = {
+        totalBalance: account_balance,
+        availableBalance: available_balance,
+      }
+      const accountTotalCalculated: AmountSats = totalCalculatedByAccount[account] || 0
+      const accountFrozenOrLockedCalculated: AmountSats = frozenOrLockedCalculatedByAccount[account] || 0
+      const accountAvailableCalculated: AmountSats = accountTotalCalculated - accountFrozenOrLockedCalculated
+      return {
+        ...accountBalanceSummary,
+        calculatedTotalBalanceInSats: accountTotalCalculated,
+        calculatedFrozenOrLockedBalanceInSats: accountFrozenOrLockedCalculated,
+        calculatedAvailableBalanceInSats: accountAvailableCalculated,
+        accountIndex: parseInt(account, 10),
+      } as AccountBalanceSummary
+    })
+    .reduce((acc, curr) => ({ ...acc, [curr.accountIndex]: curr }), {} as AccountBalances)
+
+  const walletTotalCalculated: AmountSats = Object.values(totalCalculatedByAccount).reduce(
+    (acc, totalSats) => acc + totalSats,
+    0
+  )
+
+  const walletFrozenOrLockedCalculated: AmountSats = Object.values(frozenOrLockedCalculatedByAccount).reduce(
+    (acc, frozenOrLockedSats) => acc + frozenOrLockedSats,
+    0
+  )
+
+  const walletAvailableCalculated = walletTotalCalculated - walletFrozenOrLockedCalculated
+
+  return {
+    ...walletBalanceSummary,
+    accountBalances: accountsBalanceSummary,
+    calculatedTotalBalanceInSats: walletTotalCalculated,
+    calculatedFrozenOrLockedBalanceInSats: walletFrozenOrLockedCalculated,
+    calculatedAvailableBalanceInSats: walletAvailableCalculated,
+  }
+}
+
+export { toBalanceSummary, AccountBalances, AccountBalanceSummary }
diff --git a/src/context/WalletContext.tsx b/src/context/WalletContext.tsx
index 8fa506b63..1d6fe90b4 100644
--- a/src/context/WalletContext.tsx
+++ b/src/context/WalletContext.tsx
@@ -3,6 +3,8 @@ import React, { createContext, useEffect, useCallback, useState, useContext, Pro
 import { getSession } from '../session'
 import * as Api from '../libs/JmWalletApi'
 
+import { WalletBalanceSummary, toBalanceSummary } from './BalanceSummary'
+
 export interface CurrentWallet {
   name: string
   token: string
@@ -69,7 +71,7 @@ export interface BranchEntry {
   extradata: string
 }
 
-type CombinedRawWalletData = {
+export type CombinedRawWalletData = {
   utxos: UtxosResponse
   display: WalletDisplayResponse
 }
@@ -88,6 +90,7 @@ type FidenlityBondSummary = {
 }
 
 export interface WalletInfo {
+  balanceSummary: WalletBalanceSummary
   addressSummary: AddressSummary
   fidelityBondSummary: FidenlityBondSummary
   data: CombinedRawWalletData
@@ -151,10 +154,12 @@ const loadWalletInfoData = async ({
 }
 
 const toWalletInfo = (data: CombinedRawWalletData): WalletInfo => {
+  const balanceSummary = toBalanceSummary(data)
   const addressSummary = toAddressSummary(data)
   const fidelityBondSummary = toFidelityBondSummary(data)
 
   return {
+    balanceSummary,
     addressSummary,
     fidelityBondSummary,
     data,
diff --git a/src/hooks/BalanceSummary.test.tsx b/src/hooks/BalanceSummary.test.tsx
deleted file mode 100644
index 9b44f1c5c..000000000
--- a/src/hooks/BalanceSummary.test.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import React from 'react'
-import { render } from '../testUtils'
-import { act } from 'react-dom/test-utils'
-
-import { useBalanceSummary, WalletBalanceSummary } from './BalanceSummary'
-import { WalletInfo, Utxo } from '../context/WalletContext'
-
-const now = Date.UTC(2009, 0, 3)
-
-describe('BalanceSummary', () => {
-  function setup(walletInfo: WalletInfo | null, refTime: number) {
-    const returnVal: { data: WalletBalanceSummary | null | undefined } = { data: undefined }
-    const TestComponent: React.FunctionComponent = () => {
-      returnVal.data = useBalanceSummary(walletInfo, refTime)
-      return <></>
-    }
-
-    render(<TestComponent />)
-
-    return returnVal
-  }
-
-  it('should handle missing wallet info without errors', () => {
-    let balanceSummary: WalletBalanceSummary | null | undefined
-
-    act(() => {
-      balanceSummary = setup(null, now).data
-    })
-
-    expect(balanceSummary).toBeNull()
-  })
-
-  it('should handle <=v0.9.6 balance format', () => {
-    let balanceSummary: WalletBalanceSummary | null | undefined
-
-    act(() => {
-      balanceSummary = setup(
-        {
-          addressSummary: {},
-          fidelityBondSummary: { fbOutputs: [] },
-          data: {
-            utxos: {
-              utxos: [],
-            },
-            display: {
-              walletinfo: {
-                wallet_name: 'test.jmdat',
-                total_balance: '2.00000000',
-                available_balance: '1.00000000',
-                accounts: [],
-              },
-            },
-          },
-        },
-        now
-      ).data
-    })
-
-    expect(balanceSummary).not.toBeNull()
-    expect(balanceSummary!.totalBalance).toBe('2.00000000')
-    expect(balanceSummary!.availableBalance).toBe('1.00000000')
-  })
-
-  it('should populate balance properties calculated from utxo data', () => {
-    let balanceSummary: WalletBalanceSummary | null | undefined
-
-    act(() => {
-      balanceSummary = setup(
-        {
-          addressSummary: {},
-          fidelityBondSummary: { fbOutputs: [] },
-          data: {
-            utxos: {
-              utxos: [
-                {
-                  value: 1,
-                  mixdepth: 0,
-                  frozen: false,
-                } as Utxo,
-                {
-                  value: 2,
-                  mixdepth: 0,
-                  frozen: false,
-                  // unfrozen but not yet expired
-                  locktime: '2999-12',
-                  path: `m/84'/1'/0'/0/2:${now / 1_000 + 1}`,
-                } as Utxo,
-                {
-                  value: 3,
-                  mixdepth: 0,
-                  confirmations: 0,
-                  frozen: true,
-                } as Utxo,
-                {
-                  value: 4,
-                  mixdepth: 0,
-                  // unfrozen and expired
-                  frozen: false,
-                  locktime: '2009-01',
-                  path: `m/84'/1'/0'/0/2:${now / 1_000 - 1}`,
-                } as Utxo,
-              ],
-            },
-            display: {
-              walletinfo: {
-                wallet_name: 'test.jmdat',
-                total_balance: '0.00000010',
-                available_balance: '0.00000005',
-                accounts: [],
-              },
-            },
-          },
-        },
-        now
-      ).data
-    })
-
-    expect(balanceSummary).not.toBeNull()
-    expect(balanceSummary!.totalBalance).toBe('0.00000010')
-    expect(balanceSummary!.availableBalance).toBe('0.00000005')
-    expect(balanceSummary!.calculatedTotalBalanceInSats).toBe(10)
-    expect(balanceSummary!.calculatedAvailableBalanceInSats).toBe(5)
-    expect(balanceSummary!.calculatedFrozenOrLockedBalanceInSats).toBe(5)
-    expect(balanceSummary!.accountBalances).toEqual({})
-  })
-
-  it('should populate account balance data', () => {
-    let balanceSummary: WalletBalanceSummary | null | undefined
-
-    act(() => {
-      balanceSummary = setup(
-        {
-          addressSummary: {},
-          fidelityBondSummary: { fbOutputs: [] },
-          data: {
-            utxos: {
-              utxos: [
-                {
-                  value: 111111111,
-                  mixdepth: 1,
-                } as Utxo,
-                {
-                  value: 222222222,
-                  mixdepth: 2,
-                } as Utxo,
-                {
-                  value: 11111111,
-                  mixdepth: 2,
-                  frozen: true,
-                } as Utxo,
-                {
-                  value: 333333333,
-                  mixdepth: 3,
-                  confirmations: 0,
-                  frozen: true,
-                } as Utxo,
-              ],
-            },
-            display: {
-              walletinfo: {
-                wallet_name: 'test.jmdat',
-                total_balance: '6.77777777',
-                available_balance: '3.33333333',
-                accounts: [
-                  {
-                    account: '0',
-                    account_balance: '0.00000000',
-                    available_balance: '0.00000000',
-                    branches: [],
-                  },
-                  {
-                    account: '1',
-                    account_balance: '1.11111111',
-                    available_balance: '1.11111111',
-                    branches: [],
-                  },
-                  {
-                    account: '2',
-                    account_balance: '2.33333333',
-                    available_balance: '2.22222222',
-                    branches: [],
-                  },
-                  {
-                    account: '3',
-                    account_balance: '3.33333333',
-                    available_balance: '0.00000000',
-                    branches: [],
-                  },
-                ],
-              },
-            },
-          },
-        },
-        now
-      ).data
-    })
-
-    expect(balanceSummary).not.toBeNull()
-    expect(balanceSummary!.totalBalance).toBe('6.77777777')
-    expect(balanceSummary!.availableBalance).toBe('3.33333333')
-    expect(balanceSummary!.calculatedTotalBalanceInSats).toBe(677777777)
-    expect(balanceSummary!.calculatedAvailableBalanceInSats).toBe(333333333)
-    expect(balanceSummary!.calculatedFrozenOrLockedBalanceInSats).toBe(344444444)
-    expect(Object.keys(balanceSummary!.accountBalances)).toHaveLength(4)
-
-    const account0 = balanceSummary!.accountBalances[0]
-    expect(account0.accountIndex).toBe(0)
-    expect(account0.totalBalance).toBe('0.00000000')
-    expect(account0.availableBalance).toBe('0.00000000')
-    expect(account0.calculatedTotalBalanceInSats).toBe(0)
-    expect(account0.calculatedAvailableBalanceInSats).toBe(0)
-    expect(account0.calculatedFrozenOrLockedBalanceInSats).toBe(0)
-
-    const account1 = balanceSummary!.accountBalances[1]
-    expect(account1.accountIndex).toBe(1)
-    expect(account1.totalBalance).toBe('1.11111111')
-    expect(account1.availableBalance).toBe('1.11111111')
-    expect(account1.calculatedTotalBalanceInSats).toBe(111111111)
-    expect(account1.calculatedAvailableBalanceInSats).toBe(111111111)
-    expect(account1.calculatedFrozenOrLockedBalanceInSats).toBe(0)
-
-    const account2 = balanceSummary!.accountBalances[2]
-    expect(account2.accountIndex).toBe(2)
-    expect(account2.totalBalance).toBe('2.33333333')
-    expect(account2.availableBalance).toBe('2.22222222')
-    expect(account2.calculatedTotalBalanceInSats).toBe(233333333)
-    expect(account2.calculatedAvailableBalanceInSats).toBe(222222222)
-    expect(account2.calculatedFrozenOrLockedBalanceInSats).toBe(11111111)
-
-    const account3 = balanceSummary!.accountBalances[3]
-    expect(account3.accountIndex).toBe(3)
-    expect(account3.totalBalance).toBe('3.33333333')
-    expect(account3.availableBalance).toBe('0.00000000')
-    expect(account3.calculatedTotalBalanceInSats).toBe(333333333)
-    expect(account3.calculatedAvailableBalanceInSats).toBe(0)
-    expect(account3.calculatedFrozenOrLockedBalanceInSats).toBe(333333333)
-  })
-})
diff --git a/src/hooks/BalanceSummary.ts b/src/hooks/BalanceSummary.ts
deleted file mode 100644
index a797bc049..000000000
--- a/src/hooks/BalanceSummary.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { WalletInfo, BalanceString, Utxos } from '../context/WalletContext'
-
-import * as fb from '../components/fb/utils'
-import { AmountSats } from '../libs/JmWalletApi'
-
-type Milliseconds = number
-
-interface BalanceSummary {
-  totalBalance: BalanceString
-  /**
-   * @since clientserver v0.9.7
-   * @description available balance (total - frozen - locked)
-   *   This value can report less than available in case of address reuse.
-   *   See https://github.com/JoinMarket-Org/joinmarket-clientserver/pull/1285#issuecomment-1136438072
-   *   Utxos controlled by the same key will not be taken into account if at least one output is
-   *   frozen (last checked on 2022-05-24).
-   *
-   *   Please use {@link BalanceSummarySupport.calculatedAvailableBalanceInSats}) if applicable.
-   */
-  availableBalance: BalanceString
-}
-
-type BalanceSummarySupport = BalanceSummary & {
-  /**
-   * @description Manually calculated total balance in sats.
-   */
-  calculatedTotalBalanceInSats: AmountSats
-  /**
-   * @description Manually calculated available balance in sats.
-   *   Same as {@link BalanceSummary.availableBalance} except address reuse is taken into account.
-   */
-  calculatedAvailableBalanceInSats: AmountSats
-  /**
-   * @description Manually calculated frozen or locked balance in sats.
-   */
-  calculatedFrozenOrLockedBalanceInSats: AmountSats
-}
-
-type AccountBalanceSummary = BalanceSummarySupport & {
-  accountIndex: number
-}
-
-type AccountBalances = {
-  [key: number]: AccountBalanceSummary
-}
-
-export type WalletBalanceSummary = BalanceSummarySupport & {
-  accountBalances: AccountBalances
-}
-
-const calculateFrozenOrLockedBalance = (utxos: Utxos, refTime: Milliseconds = Date.now()) => {
-  const frozenOrLockedUtxos = utxos.filter((utxo) => utxo.frozen || fb.utxo.isLocked(utxo, refTime))
-  return frozenOrLockedUtxos.reduce((acc, utxo) => acc + utxo.value, 0)
-}
-
-const useBalanceSummary = (currentWalletInfo: WalletInfo | null, now?: Milliseconds): WalletBalanceSummary | null => {
-  const [refTime, setRefTime] = useState<Milliseconds>(now !== undefined ? now : Date.now())
-
-  useEffect(() => {
-    if (!currentWalletInfo) return
-    setRefTime(now !== undefined ? now : Date.now())
-  }, [now, currentWalletInfo])
-
-  const balanceSummary = useMemo(() => {
-    if (!currentWalletInfo) {
-      return null
-    }
-
-    const accounts = currentWalletInfo.data.display.walletinfo.accounts
-    const utxos = currentWalletInfo.data.utxos.utxos
-
-    try {
-      const walletBalanceSummary: BalanceSummary = {
-        totalBalance: currentWalletInfo.data.display.walletinfo.total_balance,
-        availableBalance: currentWalletInfo.data.display.walletinfo.available_balance,
-      }
-      const utxosByAccount = utxos.reduce((acc, utxo) => {
-        const key = `${utxo.mixdepth}`
-        acc[key] = acc[key] || []
-        acc[key].push(utxo)
-        return acc
-      }, {} as { [key: string]: Utxos })
-
-      const totalCalculatedByAccount = Object.fromEntries(
-        Object.entries(utxosByAccount).map(([account, utxos]) => {
-          return [account, utxos.reduce((acc, utxo) => acc + utxo.value, 0)]
-        })
-      )
-      const frozenOrLockedCalculatedByAccount = Object.fromEntries(
-        Object.entries(utxosByAccount).map(([account, utxos]) => {
-          return [account, calculateFrozenOrLockedBalance(utxos, refTime)]
-        })
-      )
-
-      const accountsBalanceSummary = accounts
-        .map(({ account, account_balance, available_balance }) => {
-          const accountBalanceSummary: BalanceSummary = {
-            totalBalance: account_balance,
-            availableBalance: available_balance,
-          }
-          const accountTotalCalculated: AmountSats = totalCalculatedByAccount[account] || 0
-          const accountFrozenOrLockedCalculated: AmountSats = frozenOrLockedCalculatedByAccount[account] || 0
-          const accountAvailableCalculated: AmountSats = accountTotalCalculated - accountFrozenOrLockedCalculated
-          return {
-            ...accountBalanceSummary,
-            calculatedTotalBalanceInSats: accountTotalCalculated,
-            calculatedFrozenOrLockedBalanceInSats: accountFrozenOrLockedCalculated,
-            calculatedAvailableBalanceInSats: accountAvailableCalculated,
-            accountIndex: parseInt(account, 10),
-          } as AccountBalanceSummary
-        })
-        .reduce((acc, curr) => ({ ...acc, [curr.accountIndex]: curr }), {} as AccountBalances)
-
-      const walletTotalCalculated: AmountSats = Object.values(totalCalculatedByAccount).reduce(
-        (acc, totalSats) => acc + totalSats,
-        0
-      )
-
-      const walletFrozenOrLockedCalculated: AmountSats = Object.values(frozenOrLockedCalculatedByAccount).reduce(
-        (acc, frozenOrLockedSats) => acc + frozenOrLockedSats,
-        0
-      )
-
-      const walletAvailableCalculated = walletTotalCalculated - walletFrozenOrLockedCalculated
-
-      return {
-        ...walletBalanceSummary,
-        accountBalances: accountsBalanceSummary,
-        calculatedTotalBalanceInSats: walletTotalCalculated,
-        calculatedFrozenOrLockedBalanceInSats: walletFrozenOrLockedCalculated,
-        calculatedAvailableBalanceInSats: walletAvailableCalculated,
-      }
-    } catch (e) {
-      console.warn('"useBalanceSummary" hook cannot determine balance format', e)
-      return null
-    }
-  }, [currentWalletInfo, refTime])
-
-  return balanceSummary
-}
-
-export { useBalanceSummary, AccountBalances, AccountBalanceSummary }

From 893dfd03978909ecff36a9aa0aedd084e9b1c669 Mon Sep 17 00:00:00 2001
From: Gigi <109058+dergigi@users.noreply.github.com>
Date: Tue, 26 Jul 2022 15:13:10 +0200
Subject: [PATCH 6/9] feat(cheatsheet): re-word to remove 'yield' (#426)

Fixes #326
---
 src/i18n/locales/en/translation.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 9601a9d8c..e73759a40 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -366,8 +366,8 @@
       "description": "A fidelity bond increases your chances of selling liquidity substantially."
     },
     "item_4": {
-      "title": "<0>Earn</0> yield by providing liquidity.",
-      "description": "Offer your sats to the marketplace. No trust or custody required—you are always in full control of your funds."
+      "title": "<0>Earn</0> sats by providing liquidity.",
+      "description": "Offer liquidity to the marketplace for a fee. No trust or custody required—you are always in full control of your funds."
     },
     "item_5": {
       "title": "<0>Send</0> a collaborative transaction to yourself.",

From b442d58b61c8ff24f65bb6c12c295cdda195e0a1 Mon Sep 17 00:00:00 2001
From: Gigi <109058+dergigi@users.noreply.github.com>
Date: Tue, 26 Jul 2022 15:45:55 +0200
Subject: [PATCH 7/9] feat(cheatsheet): link to jamdocs.org (#427)

---
 src/components/Cheatsheet.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Cheatsheet.tsx b/src/components/Cheatsheet.tsx
index 2f3f8ffa2..49a8b02c8 100644
--- a/src/components/Cheatsheet.tsx
+++ b/src/components/Cheatsheet.tsx
@@ -124,11 +124,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>
                 .

From 087eb0782eb22bd44085faff977e9d624876f15e Mon Sep 17 00:00:00 2001
From: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>
Date: Tue, 26 Jul 2022 16:29:49 +0200
Subject: [PATCH 8/9] deps: update dependencies (#425)

* deps: remove unused lib moving-letters

* deps: update react-bootstrap from v2.4.0 to v2.5.0-beta.1

* deps: update react-router-bootstrap from v0.26.1 to v0.26.2

* deps: update bootstrap from v5.1.3 to v5.2.0

* dev: update node from v16.11.0 to v16.16.0 in GitHub build action

* dev: harmonize options button styles on Receive and Earn page
---
 .github/workflows/build.yml       |   2 +-
 package-lock.json                 | 178 +++++++++++++-----------------
 package.json                      |   7 +-
 src/components/Earn.jsx           |  64 +++++------
 src/components/Earn.module.css    |   9 +-
 src/components/Receive.jsx        |   6 +-
 src/components/Receive.module.css |   6 +-
 src/components/Send.module.css    |   2 +-
 src/index.css                     |   2 +-
 9 files changed, 126 insertions(+), 150 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e3c759749..bacbada42 100644
--- 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
index 1aa157df6..b4475de50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,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",
@@ -33,14 +33,13 @@
         "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",
@@ -1974,9 +1973,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.7.tgz",
-      "integrity": "sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
@@ -2738,21 +2737,21 @@
       }
     },
     "node_modules/@react-aria/ssr": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz",
-      "integrity": "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
+      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.6.2"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@restart/hooks": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.6.tgz",
-      "integrity": "sha512-FzpEzy6QeLB3OpUrC9OQD/lWCluQmilLfRGa/DqbB6OmV05AEt/0Lgn3Jf6l27UIJMK0qFmNcps6p8DNLXa6Pw==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
       "dev": true,
       "dependencies": {
         "dequal": "^2.0.2"
@@ -2762,15 +2761,15 @@
       }
     },
     "node_modules/@restart/ui": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.2.0.tgz",
-      "integrity": "sha512-oIh2t3tG8drZtZ9SlaV5CY6wGsUViHk8ZajjhcI+74IQHyWy+AnxDv8rJR5wVgsgcgrPBUvGNkC1AEdcGNPaLQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.1.tgz",
+      "integrity": "sha512-MYvMs2eeZTHu2dBJHOXKx72vxzEZeWbZx2z1QjeXq62iYjpjIyukBC2ZEy8x+sb9Gl0AiOiHkPXrl1wn95aOGQ==",
       "dev": true,
       "dependencies": {
-        "@babel/runtime": "^7.13.16",
-        "@popperjs/core": "^2.10.1",
-        "@react-aria/ssr": "^3.0.1",
-        "@restart/hooks": "^0.4.0",
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
         "@types/warning": "^3.0.0",
         "dequal": "^2.0.2",
         "dom-helpers": "^5.2.0",
@@ -3586,7 +3585,7 @@
     "node_modules/@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
       "dev": true
     },
     "node_modules/@types/ws": {
@@ -4222,11 +4221,6 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
-    "node_modules/animejs": {
-      "version": "3.2.1",
-      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==",
-      "dev": true
-    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -4959,15 +4953,22 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "5.1.3",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
       "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
       "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
+        "@popperjs/core": "^2.11.5"
       }
     },
     "node_modules/boxen": {
@@ -6809,9 +6810,9 @@
       }
     },
     "node_modules/dequal": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
-      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -12682,23 +12683,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/moving-letters": {
-      "version": "1.0.1",
-      "integrity": "sha512-819kOfUHOY1VNtlF7pjHik84EEiMow3kC0fETGe+y1L6iaj7QAJrVepurDDWulosdzY3prbvhFedOL3z5qNLLg==",
-      "dev": true,
-      "dependencies": {
-        "animejs": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.5.4",
-        "react": "^15.0.0 || ^16.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
@@ -15018,14 +15002,14 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",
-      "integrity": "sha512-dn599jNK1Fg5GGjJH+lQQDwELVzigh/MdusKpB/0el+sCjsO5MZDH5gRMmBjRhC+vb7VlCDr6OXffPIDSkNMLw==",
+      "version": "2.5.0-beta.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0-beta.1.tgz",
+      "integrity": "sha512-brHUvpjJrNmShg2xjT3qNfZ7mKLEUyGvh+wp+IgxcFKrh7BPKzpbAtJYa2S1QJx5MuPBT/D0ywMFbz1LBY0Qvg==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.17.2",
         "@restart/hooks": "^0.4.6",
-        "@restart/ui": "^1.2.0",
+        "@restart/ui": "^1.3.0",
         "@types/react-transition-group": "^4.4.4",
         "classnames": "^2.3.1",
         "dom-helpers": "^5.2.1",
@@ -15233,9 +15217,9 @@
       }
     },
     "node_modules/react-router-bootstrap": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.1.tgz",
-      "integrity": "sha512-qgFDfnN2U5RBARTf4L/Xrk0xjNid4wRtBQFrzI2Z2Gu74nlfKT5qZreUxDiYvv4sI+NrWcYacRZEqS5yeLYH0A==",
+      "version": "0.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.2.tgz",
+      "integrity": "sha512-YlpI9Xi+Uqp6zFAUO8D/wu6P8mr1ujqq+0V5MhJG1kx9dr/95fAMoGk4J+/CsysOkwtR3tYSac4DDWmHwXvC8w==",
       "dev": true,
       "dependencies": {
         "prop-types": "^15.7.2"
@@ -20371,9 +20355,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.17.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.7.tgz",
-      "integrity": "sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==",
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
       "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
@@ -21009,33 +20993,33 @@
       "dev": true
     },
     "@react-aria/ssr": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz",
-      "integrity": "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
+      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.6.2"
       }
     },
     "@restart/hooks": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.6.tgz",
-      "integrity": "sha512-FzpEzy6QeLB3OpUrC9OQD/lWCluQmilLfRGa/DqbB6OmV05AEt/0Lgn3Jf6l27UIJMK0qFmNcps6p8DNLXa6Pw==",
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
       "dev": true,
       "requires": {
         "dequal": "^2.0.2"
       }
     },
     "@restart/ui": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.2.0.tgz",
-      "integrity": "sha512-oIh2t3tG8drZtZ9SlaV5CY6wGsUViHk8ZajjhcI+74IQHyWy+AnxDv8rJR5wVgsgcgrPBUvGNkC1AEdcGNPaLQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.1.tgz",
+      "integrity": "sha512-MYvMs2eeZTHu2dBJHOXKx72vxzEZeWbZx2z1QjeXq62iYjpjIyukBC2ZEy8x+sb9Gl0AiOiHkPXrl1wn95aOGQ==",
       "dev": true,
       "requires": {
-        "@babel/runtime": "^7.13.16",
-        "@popperjs/core": "^2.10.1",
-        "@react-aria/ssr": "^3.0.1",
-        "@restart/hooks": "^0.4.0",
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
         "@types/warning": "^3.0.0",
         "dequal": "^2.0.2",
         "dom-helpers": "^5.2.0",
@@ -21690,7 +21674,7 @@
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
       "dev": true
     },
     "@types/ws": {
@@ -22170,11 +22154,6 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
-    "animejs": {
-      "version": "3.2.1",
-      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==",
-      "dev": true
-    },
     "ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -22731,8 +22710,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
       "dev": true,
       "requires": {}
     },
@@ -24104,9 +24084,9 @@
       "dev": true
     },
     "dequal": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
-      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true
     },
     "destroy": {
@@ -28628,14 +28608,6 @@
       "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
-    "moving-letters": {
-      "version": "1.0.1",
-      "integrity": "sha512-819kOfUHOY1VNtlF7pjHik84EEiMow3kC0fETGe+y1L6iaj7QAJrVepurDDWulosdzY3prbvhFedOL3z5qNLLg==",
-      "dev": true,
-      "requires": {
-        "animejs": "^3.1.0"
-      }
-    },
     "ms": {
       "version": "2.1.2",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
@@ -30216,14 +30188,14 @@
       }
     },
     "react-bootstrap": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",
-      "integrity": "sha512-dn599jNK1Fg5GGjJH+lQQDwELVzigh/MdusKpB/0el+sCjsO5MZDH5gRMmBjRhC+vb7VlCDr6OXffPIDSkNMLw==",
+      "version": "2.5.0-beta.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0-beta.1.tgz",
+      "integrity": "sha512-brHUvpjJrNmShg2xjT3qNfZ7mKLEUyGvh+wp+IgxcFKrh7BPKzpbAtJYa2S1QJx5MuPBT/D0ywMFbz1LBY0Qvg==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.17.2",
         "@restart/hooks": "^0.4.6",
-        "@restart/ui": "^1.2.0",
+        "@restart/ui": "^1.3.0",
         "@types/react-transition-group": "^4.4.4",
         "classnames": "^2.3.1",
         "dom-helpers": "^5.2.1",
@@ -30372,9 +30344,9 @@
       }
     },
     "react-router-bootstrap": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.1.tgz",
-      "integrity": "sha512-qgFDfnN2U5RBARTf4L/Xrk0xjNid4wRtBQFrzI2Z2Gu74nlfKT5qZreUxDiYvv4sI+NrWcYacRZEqS5yeLYH0A==",
+      "version": "0.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-bootstrap/-/react-router-bootstrap-0.26.2.tgz",
+      "integrity": "sha512-YlpI9Xi+Uqp6zFAUO8D/wu6P8mr1ujqq+0V5MhJG1kx9dr/95fAMoGk4J+/CsysOkwtR3tYSac4DDWmHwXvC8w==",
       "dev": true,
       "requires": {
         "prop-types": "^15.7.2"
diff --git a/package.json b/package.json
index 3dca0140b..bde51898a 100644
--- 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,14 +31,13 @@
     "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",
diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx
index 6114b48bc..4f9bcd28a 100644
--- a/src/components/Earn.jsx
+++ b/src/components/Earn.jsx
@@ -91,7 +91,7 @@ export default function Earn() {
   const serviceInfo = useServiceInfo()
   const reloadServiceInfo = useReloadServiceInfo()
 
-  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)
@@ -333,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
@@ -482,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
index 8f53024c4..c35b0b212 100644
--- 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/Receive.jsx b/src/components/Receive.jsx
index 9277f00e2..baa8b1ca8 100644
--- a/src/components/Receive.jsx
+++ b/src/components/Receive.jsx
@@ -112,7 +112,7 @@ export default function Receive() {
           <rb.Button
             variant={`${settings.theme}`}
             className={`${styles['settings-btn']} d-flex align-items-center`}
-            onClick={() => setShowSettings(!showSettings)}
+            onClick={() => setShowSettings((current) => !current)}
           >
             {t('receive.button_settings')}
             <Sprite symbol={`caret-${showSettings ? 'up' : 'down'}`} className="ms-1" width="20" height="20" />
@@ -163,10 +163,10 @@ export default function Receive() {
               </rb.Form.Group>
             </div>
           )}
-          <hr />
+          <hr className="m-0" />
         </div>
 
-        <div className="mt-2 d-flex justify-content-center">
+        <div className="mt-4 d-flex justify-content-center">
           <rb.Button
             variant="outline-dark"
             type="submit"
diff --git a/src/components/Receive.module.css b/src/components/Receive.module.css
index 0871a0e5a..e55434c01 100644
--- a/src/components/Receive.module.css
+++ b/src/components/Receive.module.css
@@ -1,10 +1,10 @@
 .receive hr {
-  background-color: rgba(222, 222, 222, 1);
+  border-color: rgba(222, 222, 222, 1);
   opacity: 100%;
 }
 
 :root[data-theme='dark'] .receive hr {
-  background-color: var(--bs-gray-800);
+  border-color: var(--bs-gray-800);
   opacity: 100%;
 }
 
@@ -22,6 +22,8 @@
   background-color: transparent !important;
   border: none;
   padding-left: 0;
+  height: 3rem;
+  width: 100%;
 }
 
 .receive form input {
diff --git a/src/components/Send.module.css b/src/components/Send.module.css
index d7a254c72..db0154b64 100644
--- a/src/components/Send.module.css
+++ b/src/components/Send.module.css
@@ -95,7 +95,7 @@ input[type='number'] {
   color: var(--bs-white) !important;
 }
 
-:root[data-theme='dark'] .sweep-breakdoown-paragraph {
+:root[data-theme='dark'] .sweep-breakdown-paragraph {
   color: var(--bs-white) !important;
 }
 
diff --git a/src/index.css b/src/index.css
index 362ed878c..d609bcdce 100644
--- a/src/index.css
+++ b/src/index.css
@@ -609,7 +609,7 @@ h2 {
 }
 
 :root[data-theme='dark'] .link-dark {
-  color: var(--bs-white);
+  color: var(--bs-white) !important;
 }
 
 :root[data-theme='dark'] .toast {

From 05c908d6f6a671e19d41021cd883cf9483dc4052 Mon Sep 17 00:00:00 2001
From: Gigi <109058+dergigi@users.noreply.github.com>
Date: Tue, 26 Jul 2022 16:30:22 +0200
Subject: [PATCH 9/9] feat(cheatsheet): link to jamdocs.org (#429)

---
 src/components/Cheatsheet.tsx | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/Cheatsheet.tsx b/src/components/Cheatsheet.tsx
index 49a8b02c8..cf38db850 100644
--- 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>