fix (frontend): show balance and threshold in BTC

Author: krsnapaudel

frontend/public/config.json

@@ -5,9 +5,9 @@
   "networkStatusRefetchIntervalS": 60,
   "bridgeStatusRefetchIntervalS": 120,
   "balanceRefetchIntervalS": 30,
-  "faucetBalanceSatsThresholds": {
-    "signet": 20000000000,
-    "alpen": 20000000000
+  "faucetBalanceBtcThresholds": {
+    "signet": 200,
+    "alpen": 200
   },
   "environment": "staging"
 }

frontend/src/components/BridgeOperatorBalance.tsx

@@ -1,22 +1,14 @@
-import type {
+import {
   BridgeOperatorBalances,
   BridgeOperatorWalletBalance,
 } from '../hooks/useBalances';
-import { truncateHex } from '../utils';
+import { formatBTC, truncateHex } from '../utils';
 
 interface BridgeOperatorBalanceProps {
   bridgeOperators: BridgeOperatorBalances;
   title: string;
 }
 
-function formatSats(sats: number): string {
-  if (sats === 0) return '0 SATS';
-
-  // Add comma separators for readability
-  const formattedNumber = sats.toLocaleString();
-  return `${formattedNumber} SATS`;
-}
-
 export default function BridgeOperatorBalance({
   bridgeOperators,
   title,
@@ -103,12 +95,12 @@ export default function BridgeOperatorBalance({
                 </td>
                 <td className="table-cell">
                   {operator.generalWalletBalance
-                    ? formatSats(operator.generalWalletBalance.balance_sats)
+                    ? formatBTC(operator.generalWalletBalance.balance_sats)
                     : '-'}
                 </td>
                 <td className="table-cell">
                   {operator.stakeChainWalletBalance
-                    ? formatSats(operator.stakeChainWalletBalance.balance_sats)
+                    ? formatBTC(operator.stakeChainWalletBalance.balance_sats)
                     : '-'}
                 </td>
               </tr>

frontend/src/components/FaucetBalance.tsx

@@ -1,19 +1,15 @@
 import type { FaucetBalances } from '../hooks/useBalances';
 import { useConfig } from '../hooks/useConfig';
+import { btcToSats } from '../utils';
+import { formatBTC } from '../utils';
 
 interface FaucetBalanceProps {
   faucet: FaucetBalances;
   title: string;
 }
 
-function formatSats(sats: number): string {
-  if (sats === 0) return '0 SATS';
-
-  const formattedNumber = sats.toLocaleString('en-US');
-  return `${formattedNumber} SATS`;
-}
-
-function getHealthStatus(balanceSats: number, thresholdSats: number): string {
+function getHealthStatus(balanceSats: number, thresholdBtc: number): string {
+  const thresholdSats = btcToSats(thresholdBtc);
   return balanceSats >= thresholdSats ? 'Healthy' : 'Low';
 }
 
@@ -24,12 +20,12 @@ export default function FaucetBalance({ faucet, title }: FaucetBalanceProps) {
     {
       name: 'Signet wallet',
       balance_sats: faucet.l1_balance_sats,
-      threshold_sats: config.faucetBalanceSatsThresholds.signet,
+      threshold_btc: config.faucetBalanceBtcThresholds.signet,
     },
     {
       name: 'Alpen wallet',
       balance_sats: faucet.l2_balance_sats,
-      threshold_sats: config.faucetBalanceSatsThresholds.alpen,
+      threshold_btc: config.faucetBalanceBtcThresholds.alpen,
     },
   ];
 
@@ -50,14 +46,10 @@ export default function FaucetBalance({ faucet, title }: FaucetBalanceProps) {
             {faucetWallets.map(wallet => (
               <tr key={wallet.name} className="operators-row">
                 <td className="table-cell">{wallet.name}</td>
+                <td className="table-cell">{formatBTC(wallet.balance_sats)}</td>
+                <td className="table-cell">{wallet.threshold_btc} BTC</td>
                 <td className="table-cell">
-                  {formatSats(wallet.balance_sats)}
-                </td>
-                <td className="table-cell">
-                  {formatSats(wallet.threshold_sats)}
-                </td>
-                <td className="table-cell">
-                  {getHealthStatus(wallet.balance_sats, wallet.threshold_sats)}
+                  {getHealthStatus(wallet.balance_sats, wallet.threshold_btc)}
                 </td>
               </tr>
             ))}

frontend/src/providers/ConfigProvider.tsx

@@ -9,7 +9,7 @@ export interface AppConfig {
   networkStatusRefetchIntervalS: number;
   balanceRefetchIntervalS: number;
   environment: string;
-  faucetBalanceSatsThresholds: {
+  faucetBalanceBtcThresholds: {
     signet: number;
     alpen: number;
   };

frontend/src/utils.ts

@@ -1,5 +1,14 @@
 // utils.ts
 
+// Bitcoin conversion constants
+const SATOSHIS_PER_BTC = 100_000_000;
+
+// Convert BTC to satoshis
+export const btcToSats = (btc: number): number => btc * SATOSHIS_PER_BTC;
+
+// Convert satoshis to BTC
+export const satsToBtc = (sats: number): number => sats / SATOSHIS_PER_BTC;
+
 /**
  * Truncate a hex string to a short display format.
  * E.g., "0xabcdef...123456"
@@ -8,3 +17,17 @@ export function truncateHex(hex: string, length: number = 6): string {
   if (hex.length <= 2 * length + 2) return hex;
   return `${hex.slice(0, length)}...${hex.slice(-length)}`;
 }
+
+/**
+ * Format satoshis as BTC with 2 decimal places and comma separators.
+ * E.g., "1,234.56 BTC"
+ */
+export function formatBTC(sats: number): string {
+  if (sats === 0) return '0.00 BTC';
+
+  // Convert satoshis to BTC using the utility function
+  const btc = satsToBtc(sats);
+  
+  // Display as BTC with 2 decimal places and comma separators
+  return `${btc.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} BTC`;
+}