Format an amount for dApp

We should correctly display user balances. Let us use the formatting functions and display the balance correctly by region.

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -10,6 +10,7 @@ import {
   useRequestEthereumAccount,
 } from "../../hooks"
 import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext"
+import { formatSatoshiAmount } from "../../utils"
 
 export type ConnectButtonsProps = {
   leftIcon: string
@@ -46,7 +47,9 @@ export default function ConnectWallet() {
       <Box display="flex" gap="2">
         <Text>Balance</Text>
         <Text as="b">
-          {!btcAccount ? "0.00" : btcAccount.balance.toString()}
+          {!btcAccount || btcAccount?.balance.isZero()
+            ? "0.00"
+            : formatSatoshiAmount(btcAccount.balance.toString())}
         </Text>
         <Text>{BITCOIN.token}</Text>
       </Box>

dapp/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./numbers"

dapp/src/utils/numbers.ts

@@ -0,0 +1,26 @@
+const toLocaleString = (value: number): string =>
+  value.toLocaleString("default", { maximumFractionDigits: 2 })
+
+// Parse token amount by moving the decimal point
+export function bigIntToUserAmount(
+  amount: bigint,
+  decimals = 18,
+  desiredDecimals = 2,
+): string {
+  const desiredDecimalsAmount =
+    amount / 10n ** BigInt(Math.max(1, decimals - desiredDecimals))
+
+  return toLocaleString(
+    Number(desiredDecimalsAmount) / 10 ** Math.min(desiredDecimals, decimals),
+  )
+}
+export const formatTokenAmount = (
+  amount: number | string,
+  decimals = 18,
+  desiredDecimals = 2,
+) => bigIntToUserAmount(BigInt(amount), decimals, desiredDecimals)
+
+export const formatSatoshiAmount = (
+  amount: number | string,
+  desiredDecimals = 2,
+) => formatTokenAmount(amount, 8, desiredDecimals)