From 081da3acce1030b2a013dc4a973ec047c7b3315c Mon Sep 17 00:00:00 2001
From: Damian-4chain <damian.zoltowski@4chain.studio>
Date: Mon, 4 Nov 2024 13:15:19 +0100
Subject: [PATCH] feat(SPV-1139): add user balance

---
 src/components/UserBalance/UserBalance.tsx | 26 ++++++++++++++++++++++
 src/components/UserBalance/index.ts        |  1 +
 src/routes/user/_user.tsx                  |  2 ++
 src/utils/userBalanceQueryOptions.tsx      | 16 +++++++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 src/components/UserBalance/UserBalance.tsx
 create mode 100644 src/components/UserBalance/index.ts
 create mode 100644 src/utils/userBalanceQueryOptions.tsx

diff --git a/src/components/UserBalance/UserBalance.tsx b/src/components/UserBalance/UserBalance.tsx
new file mode 100644
index 00000000..ab555276
--- /dev/null
+++ b/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}
+    </>
+  );
+};
diff --git a/src/components/UserBalance/index.ts b/src/components/UserBalance/index.ts
new file mode 100644
index 00000000..4300bb6c
--- /dev/null
+++ b/src/components/UserBalance/index.ts
@@ -0,0 +1 @@
+export * from './UserBalance.tsx';
diff --git a/src/routes/user/_user.tsx b/src/routes/user/_user.tsx
index 2cae7b7d..a1901c8b 100644
--- a/src/routes/user/_user.tsx
+++ b/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>
diff --git a/src/utils/userBalanceQueryOptions.tsx b/src/utils/userBalanceQueryOptions.tsx
new file mode 100644
index 00000000..70e16bfa
--- /dev/null
+++ b/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;
+    },
+  });
+};