From b0c8c4f83c7e98b61be4f9a551a2b7d70c40aa43 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Wed, 25 May 2022 04:19:02 -0600
Subject: [PATCH] fix: show balance in unit based on settings on Send screen
 (#276)

Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com>
---
 src/components/Balance.jsx | 32 +-------------------------------
 src/components/Send.jsx    |  7 +++++--
 src/utils.ts               | 30 ++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx
index fba1374f0..8f453975b 100644
--- 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,9 +8,6 @@ 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
@@ -18,33 +15,6 @@ const getDisplayMode = (unit, showBalance) => {
   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
index f1b6152da..e8a3e66b9 100644
--- 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
index 0f7e51dfe..fa4fd4cc6 100644
--- 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)
+}