Hook up audit rpc to UI balance

apps/guardian-ui/src/GuardianApi.ts

@@ -1,6 +1,7 @@
 import { JsonRpcError, JsonRpcWebsocket } from 'jsonrpc-client-websocket';
 import { ConfigGenParams, ConsensusState, PeerHashMap } from './setup/types';
 import {
+  AuditSummary,
   ConfigResponse,
   FederationStatus,
   ServerStatus,
@@ -208,6 +209,7 @@ enum AdminRpc {
   inviteCode = 'invite_code',
   config = 'config',
   module = 'module',
+  audit = 'audit',
 }
 
 export enum LightningModuleRpc {
@@ -221,6 +223,7 @@ export interface AdminApiInterface extends SharedApiInterface {
   fetchEpochCount: () => Promise<number>;
   inviteCode: () => Promise<string>;
   config: (connection: string) => Promise<ConfigResponse>;
+  audit: () => Promise<AuditSummary>;
   moduleApiCall: <T>(moduleId: number, rpc: ModuleRpc) => Promise<T>;
 }
 
@@ -366,6 +369,10 @@ export class GuardianApi
     return this.base.call<ConfigResponse>(AdminRpc.config, connection);
   };
 
+  audit = (): Promise<AuditSummary> => {
+    return this.base.call<AuditSummary>(AdminRpc.audit);
+  };
+
   moduleApiCall = <T>(moduleId: number, rpc: ModuleRpc): Promise<T> => {
     const method = `${AdminRpc.module}_${moduleId}_${rpc}`;
     return this.base.call_any_method<T>(method);

apps/guardian-ui/src/components/BalanceCard.tsx

@@ -1,21 +1,37 @@
-import { Card, CardBody, CardHeader, Text } from '@chakra-ui/react';
+import { Card, CardBody, CardHeader, Skeleton, Text } from '@chakra-ui/react';
 import { KeyValues } from '@fedimint/ui';
-import { useTranslation } from '@fedimint/utils';
-import React, { useMemo } from 'react';
+import { MSats, formatMsatsToBtc, useTranslation } from '@fedimint/utils';
+import React, { useEffect, useMemo, useState } from 'react';
+import { AuditSummary } from '../types';
+import { useAdminContext } from '../hooks';
 
 export const BalanceCard: React.FC = () => {
   const { t } = useTranslation();
+  const { api } = useAdminContext();
+  const [auditSummary, setAuditSummary] = useState<AuditSummary>();
+
+  const walletBalance = auditSummary
+    ? auditSummary.module_summaries.wallet?.net_assets || (0 as MSats)
+    : undefined;
+
+  useEffect(() => {
+    api.audit().then(setAuditSummary).catch(console.error);
+  }, [api]);
 
   const keyValues = useMemo(
     () => [
       {
         key: 'bitcoin',
         label: t('common.bitcoin'),
-        // TODO: Use `audit` api to fill this in
-        value: '0.00000000',
+        value:
+          typeof walletBalance === 'number' ? (
+            formatMsatsToBtc(walletBalance)
+          ) : (
+            <Skeleton height='20px' />
+          ),
       },
     ],
-    [t]
+    [walletBalance, t]
   );
 
   return (

apps/guardian-ui/src/types.tsx

@@ -1,3 +1,5 @@
+import type { MSats } from '@fedimint/utils';
+
 export enum ServerStatus {
   AwaitingPassword = 'AwaitingPassword',
   SharingConfigGenParams = 'SharingConfigGenParams',
@@ -153,3 +155,12 @@ export interface InitializationState {
   needsAuth: boolean;
   serverStatus: ServerStatus;
 }
+
+export interface ModuleSummary {
+  net_assets: MSats;
+}
+
+export interface AuditSummary {
+  net_assets: MSats;
+  module_summaries: Record<string, ModuleSummary | undefined>;
+}

docker-compose.yml

@@ -71,6 +71,8 @@ services:
       - '18184:18184'
     volumes:
       - ./fm_2/data:/data
+    depends_on:
+      - bitcoind
 
   # gatewayd_2:
   #   image: fedimint/gatewayd:master
@@ -92,6 +94,8 @@ services:
       - '18185:18185'
     volumes:
       - ./fm_3/data:/data
+    depends_on:
+      - bitcoind
 
   fedimintd_4:
     image: fedimint/fedimintd:v0.1.0-rc3
@@ -107,6 +111,8 @@ services:
       - '18186:18186'
     volumes:
       - ./fm_4/data:/data
+    depends_on:
+      - bitcoind
 
   bitcoind:
     image: btcpayserver/bitcoin:24.1

packages/utils/src/format.tsx

@@ -1,3 +1,5 @@
+import { MSats } from './types';
+
 /**
  * Given a string, turn it into an "ellipsis sandwich" with the start and
  * end showing. If the text is shorter than it would be with an ellipsis,
@@ -9,3 +11,14 @@ export function formatEllipsized(text: string, size = 6) {
   }
   return `${text.substring(0, size)}...${text.substring(text.length - size)}`;
 }
+
+/**
+ * Given some number of msats, return a formatted string in the format of
+ * 0.0000000 or 1,234,5678.9000000
+ */
+export function formatMsatsToBtc(msats: MSats): string {
+  return Intl.NumberFormat(undefined, {
+    style: 'decimal',
+    minimumFractionDigits: 8,
+  }).format(msats / 1_00_000_000_000);
+}

packages/utils/src/index.tsx

@@ -1,2 +1,3 @@
 export * from './i18n';
 export * from './format';
+export * from './types';

packages/utils/src/types.ts

@@ -0,0 +1,5 @@
+// Opaque numeric types to avoid mixing different denominations of bitcoin
+type BitcoinUnit<K, T> = K & { _: T };
+export type Btc = BitcoinUnit<number, 'Btc'>;
+export type Sats = BitcoinUnit<number, 'Sats'>;
+export type MSats = BitcoinUnit<number, 'MSats'>;