fix: show balance in unit based on settings on Send screen (#276)

Co-authored-by: Daniel <[email protected]>
joinmarket-webui · May 25, 2022 · b0c8c4f · b0c8c4f
1 parent 28574dd
commit b0c8c4f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 33 deletions.
diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { BTC, SATS, btcToSats, satsToBtc } from '../utils'
+import { BTC, SATS, btcToSats, satsToBtc, formatBtc, formatSats } from '../utils'
 import Sprite from './Sprite'
 import * as rb from 'react-bootstrap'
 import styles from './Balance.module.css'
@@ -8,43 +8,13 @@ const DISPLAY_MODE_BTC = 0
 const DISPLAY_MODE_SATS = 1
 const DISPLAY_MODE_HIDDEN = 2
 
-const decimalPoint = '\u002E'
-const nbHalfSpace = '\u202F'
-
 const getDisplayMode = (unit, showBalance) => {
   if (showBalance && unit === SATS) return DISPLAY_MODE_SATS
   if (showBalance && unit === BTC) return DISPLAY_MODE_BTC
 
   return DISPLAY_MODE_HIDDEN
 }
 
-const formatBtc = (value) => {
-  const formatter = new Intl.NumberFormat('en-US', {
-    minimumIntegerDigits: 1,
-    minimumFractionDigits: 8,
-  })
-
-  const numberString = formatter.format(value)
-
-  const [integerPart, fractionalPart] = numberString.split(decimalPoint)
-
-  const formattedFractionalPart = fractionalPart
-    .split('')
-    .map((char, idx) => (idx === 2 || idx === 5 ? `${nbHalfSpace}${char}` : char))
-    .join('')
-
-  return integerPart + decimalPoint + formattedFractionalPart
-}
-
-const formatSats = (value) => {
-  const formatter = new Intl.NumberFormat('en-US', {
-    minimumIntegerDigits: 1,
-    minimumFractionDigits: 0,
-  })
-
-  return formatter.format(value)
-}
-
 const BalanceComponent = ({ symbol, value, symbolIsPrefix }) => {
   return (
     <span className="d-inline-flex align-items-center">

diff --git a/src/components/Send.jsx b/src/components/Send.jsx
@@ -11,9 +11,9 @@ import { useServiceInfo, useReloadServiceInfo } from '../context/ServiceInfoCont
 import { useSettings } from '../context/SettingsContext'
 import { useBalanceSummary } from '../hooks/BalanceSummary'
 import * as Api from '../libs/JmWalletApi'
+import { btcToSats, SATS, formatBtc, formatSats } from '../utils'
 import { routes } from '../constants/routes'
 import styles from './Send.module.css'
-import { SATS } from '../utils'
 
 const IS_COINJOIN_DEFAULT_VAL = true
 // initial value for `minimum_makers` from the default joinmarket.cfg (last check on 2022-02-20 of v0.9.5)
@@ -617,7 +617,10 @@ export default function Send() {
                         {settings.useAdvancedWalletMode
                           ? t('send.account_selector_option_dev_mode', { number: accountIndex })
                           : t('send.account_selector_option', { number: accountIndex })}{' '}
-                        {settings.showBalance && `(\u20BF${totalBalance})`}
+                        {settings.showBalance &&
+                          (settings.unit === 'sats'
+                            ? `(${formatSats(btcToSats(totalBalance))} sats)`
+                            : `(\u20BF${formatBtc(totalBalance)})`)}
                       </option>
                     ))}
               </rb.Form.Select>

diff --git a/src/utils.ts b/src/utils.ts
@@ -42,3 +42,33 @@ export const copyToClipboard = (
       }
     })
 }
+
+export const formatBtc = (value: number) => {
+  const decimalPoint = '\u002E'
+  const nbHalfSpace = '\u202F'
+
+  const formatter = new Intl.NumberFormat('en-US', {
+    minimumIntegerDigits: 1,
+    minimumFractionDigits: 8,
+  })
+
+  const numberString = formatter.format(value)
+
+  const [integerPart, fractionalPart] = numberString.split(decimalPoint)
+
+  const formattedFractionalPart = fractionalPart
+    .split('')
+    .map((char, idx) => (idx === 2 || idx === 5 ? `${nbHalfSpace}${char}` : char))
+    .join('')
+
+  return integerPart + decimalPoint + formattedFractionalPart
+}
+
+export const formatSats = (value: number) => {
+  const formatter = new Intl.NumberFormat('en-US', {
+    minimumIntegerDigits: 1,
+    minimumFractionDigits: 0,
+  })
+
+  return formatter.format(value)
+}