refactor: prepare removing /display request on every page load (#564)

* refactor: prepare removing display request

* refactor: Navbar from jsx to tsx

* refactor: SettingsContext from jsx to tsx

* refactor: use calculated balance in sats instead of totalBalance as string

* refactor: remove totalBalance and availableBalance from BalanceSummary

* refactor: simplify navbar states

src/components/ActivityIndicators.tsx

@@ -16,7 +16,8 @@ function ActivityIndicator({ isOn, children }: PropsWithChildren<ActivityIndicat
 
 interface JoiningIndicatorProps {
   isOn: boolean
-  size: number
+  size?: number
+  title?: string
   className?: string
 }
 

src/components/Balance.jsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { BTC, SATS, btcToSats, satsToBtc, formatBtc, formatSats } from '../utils'
+import { useState, useEffect } from 'react'
+import { SATS, BTC, btcToSats, satsToBtc, formatBtc, formatSats } from '../utils'
 import Sprite from './Sprite'
 import * as rb from 'react-bootstrap'
 import styles from './Balance.module.css'
@@ -33,8 +33,7 @@ const BalanceComponent = ({ symbol, value, symbolIsPrefix }) => {
  * For example:
  *  - 0, 10, 2100000000000000 are treated as a value in SATS; while
  *  - 0.00000000, 150.00000001, 21000000.00000000 are treated as a value in BTC.
- * @param {convertToUnit}: The unit to convert the `valueString` to.
- * Possible options are `BTC` and `SATS` from `src/utils.js`
+ * @param {convertToUnit}: The unit to convert the `valueString` to. Type {@link Unit}.
  * @param {showBalance}: A flag indicating whether to render or hide the balance.
  * Hidden balances are masked with `*****`.
  * @param {loading}: A loading flag that renders a placeholder while true.

src/components/JarSelectorModal.tsx

@@ -1,17 +1,17 @@
 import { useState, useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { calculateFillLevel, SelectableJar } from './jars/Jar'
+import { jarFillLevel, SelectableJar } from './jars/Jar'
 import { AccountBalances } from '../context/BalanceSummary'
-import { BalanceString } from '../context/WalletContext'
+import { AmountSats } from '../libs/JmWalletApi'
 import Sprite from './Sprite'
 import styles from './JarSelectorModal.module.css'
 
 interface JarSelectorModalProps {
   isShown: boolean
   title: string
   accountBalances: AccountBalances
-  totalBalance: BalanceString
+  totalBalance: AmountSats
   disabledJar?: JarIndex
   onCancel: () => void
   onConfirm: (jarIndex: JarIndex) => void
@@ -74,10 +74,10 @@ export default function JarSelectorModal({
               <SelectableJar
                 key={account.accountIndex}
                 index={account.accountIndex}
-                balance={account.totalBalance}
+                balance={account.calculatedTotalBalanceInSats}
                 isSelectable={account.accountIndex !== disabledJar}
                 isSelected={account.accountIndex === selectedJar}
-                fillLevel={calculateFillLevel(account.totalBalance, totalBalance)}
+                fillLevel={jarFillLevel(account.calculatedTotalBalanceInSats, totalBalance)}
                 onClick={(jarIndex) => setSelectedJar(jarIndex)}
               />
             )

src/components/Jars.jsx → src/components/Jars.tsx

@@ -1,11 +1,20 @@
 import { useMemo } from 'react'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import styles from './Jars.module.css'
+import { AccountBalances } from '../context/BalanceSummary'
+import { AmountSats } from '../libs/JmWalletApi'
+import { OpenableJar, jarFillLevel } from './jars/Jar'
 import Sprite from './Sprite'
-import { calculateFillLevel, OpenableJar } from './jars/Jar'
 
-const Jars = ({ accountBalances, totalBalance, onClick }) => {
+import styles from './Jars.module.css'
+
+interface JarsProps {
+  accountBalances: AccountBalances
+  totalBalance: AmountSats
+  onClick: (jarIndex: JarIndex) => void
+}
+
+const Jars = ({ accountBalances, totalBalance, onClick }: JarsProps) => {
   const { t } = useTranslation()
   const sortedAccountBalances = useMemo(() => {
     if (!accountBalances) return []
@@ -28,14 +37,14 @@ const Jars = ({ accountBalances, totalBalance, onClick }) => {
       </rb.OverlayTrigger>
       <div className={styles.jarsContainer}>
         {sortedAccountBalances.map((account) => {
-          const jarIsEmpty = parseInt(account.totalBalance, 10) === 0
+          const jarIsEmpty = account.calculatedTotalBalanceInSats === 0
 
           return (
             <OpenableJar
               key={account.accountIndex}
               index={account.accountIndex}
-              balance={account.totalBalance}
-              fillLevel={calculateFillLevel(account.totalBalance, totalBalance)}
+              balance={account.calculatedTotalBalanceInSats}
+              fillLevel={jarFillLevel(account.calculatedTotalBalanceInSats, totalBalance)}
               tooltipText={
                 account.accountIndex === 0 && jarIsEmpty
                   ? t('current_wallet.jar_tooltip_empty_jar_0')

src/components/MainWalletView.jsx

@@ -13,7 +13,7 @@ import { JarDetailsOverlay } from './jar_details/JarDetailsOverlay'
 import { Jars } from './Jars'
 import styles from './MainWalletView.module.css'
 
-const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
+const WalletHeader = ({ name, balance /*: AmountSats */, unit, showBalance, loading }) => {
   return (
     <div className="d-flex flex-column align-items-center">
       {loading && (
@@ -30,7 +30,7 @@ const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
       {!loading && (
         <h2>
           <Balance
-            valueString={balance}
+            valueString={`${balance}`}
             convertToUnit={unit}
             showBalance={showBalance || false}
             enableVisibilityToggle={false}
@@ -64,7 +64,7 @@ export default function MainWalletView({ wallet }) {
 
   const onJarClicked = (jarIndex) => {
     if (jarIndex === 0) {
-      const isEmpty = Number(currentWalletInfo?.balanceSummary.accountBalances[jarIndex]?.totalBalance) === 0
+      const isEmpty = currentWalletInfo?.balanceSummary.accountBalances[jarIndex]?.calculatedTotalBalanceInSats === 0
 
       if (isEmpty) {
         navigate(routes.receive, { state: { account: jarIndex } })
@@ -115,7 +115,7 @@ export default function MainWalletView({ wallet }) {
       <rb.Row onClick={() => settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
         <WalletHeader
           name={wallet.name}
-          balance={currentWalletInfo?.balanceSummary.totalBalance}
+          balance={currentWalletInfo?.balanceSummary.calculatedTotalBalanceInSats}
           unit={settings.unit}
           showBalance={settings.showBalance}
           loading={isLoading}
@@ -166,7 +166,7 @@ export default function MainWalletView({ wallet }) {
               ) : (
                 <Jars
                   accountBalances={currentWalletInfo?.balanceSummary.accountBalances}
-                  totalBalance={currentWalletInfo?.balanceSummary.totalBalance}
+                  totalBalance={currentWalletInfo?.balanceSummary.calculatedTotalBalanceInSats}
                   onClick={onJarClicked}
                 />
               )}

src/components/Navbar.jsx → src/components/Navbar.tsx

@@ -1,28 +1,36 @@
-import React, { useMemo, useState } from 'react'
-import { Link, NavLink } from 'react-router-dom'
+import { useMemo, useState } from 'react'
+import { Link, NavLink, To } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import Sprite from './Sprite'
 import Balance from './Balance'
 import { TabActivityIndicator, JoiningIndicator } from './ActivityIndicators'
 import { useSettings } from '../context/SettingsContext'
-import { useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
+import { CurrentWallet, useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext'
 import { useServiceInfo, useSessionConnectionError } from '../context/ServiceInfoContext'
 import { walletDisplayName } from '../utils'
 import { routes } from '../constants/routes'
+import { AmountSats } from '../libs/JmWalletApi'
 
-const WalletPreview = ({ wallet, totalBalance, unit, showBalance }) => {
+interface WalletPreviewProps {
+  wallet: CurrentWallet
+  totalBalance?: AmountSats
+  unit: Unit
+  showBalance?: boolean
+}
+
+const WalletPreview = ({ wallet, totalBalance, unit, showBalance = false }: WalletPreviewProps) => {
   return (
     <div className="d-flex align-items-center">
       <Sprite symbol="wallet" width="30" height="30" className="text-body" />
       <div className="d-flex flex-column ms-2 fs-6">
         {wallet && <div className="fw-normal">{walletDisplayName(wallet.name)}</div>}
-        {totalBalance && unit ? (
+        {totalBalance !== undefined ? (
           <div className="text-body">
             <Balance
-              valueString={totalBalance}
+              valueString={`${totalBalance}`}
               convertToUnit={unit}
-              showBalance={showBalance || false}
+              showBalance={showBalance}
               enableVisibilityToggle={false}
             />
           </div>
@@ -34,7 +42,14 @@ const WalletPreview = ({ wallet, totalBalance, unit, showBalance }) => {
   )
 }
 
-const CenterNav = ({ makerRunning, schedulerRunning, singleCollaborativeTransactionRunning, onClick }) => {
+interface CenterNavProps {
+  makerRunning: boolean
+  schedulerRunning: boolean
+  singleCoinJoinRunning: boolean
+  onClick?: () => void
+}
+
+const CenterNav = ({ makerRunning, schedulerRunning, singleCoinJoinRunning, onClick }: CenterNavProps) => {
   const { t } = useTranslation()
 
   return (
@@ -61,7 +76,7 @@ const CenterNav = ({ makerRunning, schedulerRunning, singleCollaborativeTransact
         >
           <div className="d-flex align-items-start">
             {t('navbar.tab_send')}
-            <TabActivityIndicator isOn={singleCollaborativeTransactionRunning} className="ms-1" />
+            <TabActivityIndicator isOn={singleCoinJoinRunning} className="ms-1" />
           </div>
         </NavLink>
       </rb.Nav.Item>
@@ -99,7 +114,12 @@ const CenterNav = ({ makerRunning, schedulerRunning, singleCollaborativeTransact
   )
 }
 
-const TrailingNav = ({ joiningRoute, onClick }) => {
+interface TrailingNavProps {
+  joiningRoute?: To
+  onClick?: () => void
+}
+
+const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
   const { t } = useTranslation()
 
   return (
@@ -145,18 +165,23 @@ export default function Navbar() {
 
   const [isExpanded, setIsExpanded] = useState(false)
 
-  const joiningRoute = useMemo(() => {
-    if (!serviceInfo) return null
+  const makerRunning = useMemo(() => serviceInfo?.makerRunning || false, [serviceInfo])
+  const schedulerRunning = useMemo(
+    () => (serviceInfo?.coinjoinInProgress && serviceInfo?.schedule !== null) || false,
+    [serviceInfo]
+  )
+  const singleCoinJoinRunning = useMemo(
+    () => (serviceInfo?.coinjoinInProgress && serviceInfo?.schedule === null) || false,
+    [serviceInfo]
+  )
 
-    if (serviceInfo.coinjoinInProgress) {
-      return serviceInfo.schedule ? routes.jam : routes.send
-    }
-    if (serviceInfo.makerRunning) {
-      return routes.earn
-    }
+  const joiningRoute = useMemo(() => {
+    if (schedulerRunning) return routes.jam
+    if (singleCoinJoinRunning) return routes.send
+    if (makerRunning) return routes.earn
 
-    return null
-  }, [serviceInfo])
+    return undefined
+  }, [makerRunning, schedulerRunning, singleCoinJoinRunning])
 
   const height = '75px'
 
@@ -223,14 +248,12 @@ export default function Navbar() {
                         'leading-nav-link nav-link d-flex align-items-center' + (isActive ? ' active' : '')
                       }
                     >
-                      <>
-                        <WalletPreview
-                          wallet={currentWallet}
-                          totalBalance={currentWalletInfo?.balanceSummary.totalBalance}
-                          showBalance={settings.showBalance}
-                          unit={settings.unit}
-                        />
-                      </>
+                      <WalletPreview
+                        wallet={currentWallet}
+                        totalBalance={currentWalletInfo?.balanceSummary.calculatedTotalBalanceInSats}
+                        showBalance={settings.showBalance}
+                        unit={settings.unit}
+                      />
                     </NavLink>
                   </rb.Nav.Item>
                 </rb.Nav>
@@ -245,23 +268,19 @@ export default function Navbar() {
                   </rb.Offcanvas.Header>
                   <rb.Offcanvas.Body>
                     <CenterNav
-                      makerRunning={serviceInfo?.makerRunning}
-                      schedulerRunning={serviceInfo?.coinjoinInProgress && serviceInfo?.schedule !== null}
-                      singleCollaborativeTransactionRunning={
-                        serviceInfo?.coinjoinInProgress && serviceInfo?.schedule === null
-                      }
+                      makerRunning={makerRunning}
+                      schedulerRunning={schedulerRunning}
+                      singleCoinJoinRunning={singleCoinJoinRunning}
                       onClick={() => setIsExpanded(!isExpanded)}
                     />
                     <TrailingNav joiningRoute={joiningRoute} onClick={() => setIsExpanded(!isExpanded)} />
                   </rb.Offcanvas.Body>
                 </rb.Navbar.Offcanvas>
                 <rb.Container className="d-none d-md-flex flex-1 flex-grow-0 align-items-stretch">
                   <CenterNav
-                    makerRunning={serviceInfo?.makerRunning}
-                    schedulerRunning={serviceInfo?.coinjoinInProgress && serviceInfo?.schedule !== null}
-                    singleCollaborativeTransactionRunning={
-                      serviceInfo?.coinjoinInProgress && serviceInfo?.schedule === null
-                    }
+                    makerRunning={makerRunning}
+                    schedulerRunning={schedulerRunning}
+                    singleCoinJoinRunning={singleCoinJoinRunning}
                   />
                 </rb.Container>
                 <rb.Container className="d-none d-md-flex flex-1 align-items-stretch">

src/components/Receive.jsx

@@ -10,7 +10,7 @@ import PageTitle from './PageTitle'
 import Sprite from './Sprite'
 import { CopyButton } from './CopyButton'
 import { ShareButton, checkIsWebShareAPISupported } from './ShareButton'
-import { SelectableJar, calculateFillLevel } from './jars/Jar'
+import { SelectableJar, jarFillLevel } from './jars/Jar'
 import styles from './Receive.module.css'
 
 export default function Receive({ wallet }) {
@@ -126,10 +126,13 @@ export default function Receive({ wallet }) {
                     <SelectableJar
                       key={it.accountIndex}
                       index={it.accountIndex}
-                      balance={it.totalBalance}
+                      balance={it.calculatedTotalBalanceInSats}
                       isSelectable={true}
                       isSelected={it.accountIndex === selectedJarIndex}
-                      fillLevel={calculateFillLevel(it.totalBalance, walletInfo.balanceSummary.totalBalance)}
+                      fillLevel={jarFillLevel(
+                        it.calculatedTotalBalanceInSats,
+                        walletInfo.balanceSummary.calculatedTotalBalanceInSats
+                      )}
                       onClick={(jarIndex) => setSelectedJarIndex(jarIndex)}
                     />
                   ))}