feat(SPV-1139): add user balance

src/components/UserBalance/UserBalance.tsx

@@ -0,0 +1,26 @@
+import { useSpvWalletClient } from '@/contexts';
+import { userBalanceQueryOptions } from '@/utils/userBalanceQueryOptions';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Badge } from '../ui';
+import { WalletIcon } from 'lucide-react';
+
+export const UserBalance = () => {
+  const { spvWalletClient } = useSpvWalletClient();
+
+  const { data: balance } = useSuspenseQuery(
+    userBalanceQueryOptions({
+      spvWalletClient: spvWalletClient!,
+    }),
+  );
+
+  return (
+    <>
+      {balance ? (
+        <Badge variant="outline" className="p-2 pl-3 pr-3 flex justify-center items-center gap-2">
+          <WalletIcon size="16px" />
+          {balance.toLocaleString()} SATS
+        </Badge>
+      ) : null}
+    </>
+  );
+};

src/components/UserBalance/index.ts

@@ -0,0 +1 @@
+export * from './UserBalance.tsx';

src/routes/user/_user.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
 import { PageRefreshButton } from '@/components/PageRefreshButton';
+import { UserBalance } from '@/components/UserBalance';
 
 export const Route = createFileRoute('/user/_user')({
   beforeLoad: ({ context, location }) => {
@@ -73,6 +74,7 @@ function LayoutComponent() {
           </Sheet>
           <div className="ml-auto flex items-center gap-4">
             <PageRefreshButton />
+            <UserBalance />
             <ModeToggle />
             <Profile />
           </div>

src/utils/userBalanceQueryOptions.tsx

@@ -0,0 +1,16 @@
+import { SpvWalletClientExtended } from '@/contexts';
+import { queryOptions } from '@tanstack/react-query';
+
+export interface UserBalanceQueryOptions {
+  spvWalletClient: SpvWalletClientExtended;
+}
+
+export const userBalanceQueryOptions = (opts: UserBalanceQueryOptions) => {
+  return queryOptions({
+    queryKey: ['balance', opts],
+    queryFn: async () => {
+      const user = await opts.spvWalletClient.GetUserInfo();
+      return user.currentBalance;
+    },
+  });
+};