From 4cf2b769d6a22b0201656a7d28352dfc2ac712ff Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 1 Aug 2025 23:49:39 +0200
Subject: [PATCH] feat: Add wallet balance display and currency formatting

- Implement wallet balance computation and formatting in Navbar.vue, enhancing user experience by displaying wallet balance in both the main navigation and dropdown menu.
- Introduce currency conversion utilities in currency.ts to format wallet balances into EverQuest currency denominations, improving clarity for users.
---
 src/components/layout/Navbar.vue | 35 ++++++++++++++-
 src/lib/utils/currency.ts        | 76 ++++++++++++++++++++++++++++++++
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/utils/currency.ts

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index c67e99d..2301de0 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -6,11 +6,12 @@ import { useTheme } from '@/components/theme-provider'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { Sun, Moon, Menu, X, User, LogOut, Ticket } from 'lucide-vue-next'
+import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet } from 'lucide-vue-next'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import ProfileDialog from '@/components/auth/ProfileDialog.vue'
 import { auth } from '@/composables/useAuth'
+import { formatWalletBalance } from '@/lib/utils/currency'
 
 interface NavigationItem {
   name: string
@@ -30,6 +31,19 @@ const navigation = computed<NavigationItem[]>(() => [
   { name: t('nav.support'), href: '/support' },
 ])
 
+// Compute total wallet balance
+const totalBalance = computed(() => {
+  if (!auth.currentUser.value?.wallets) return 0
+  
+  return auth.currentUser.value.wallets.reduce((total, wallet) => {
+    return total + (wallet.balance_msat || 0)
+  }, 0)
+})
+
+const formattedBalance = computed(() => {
+  return formatWalletBalance(totalBalance.value)
+})
+
 const toggleMenu = () => {
   isOpen.value = !isOpen.value
 }
@@ -83,6 +97,12 @@ const handleLogout = async () => {
 
       <!-- Theme Toggle, Language, and Identity -->
       <div class="flex items-center gap-2 lg:gap-4 xl:gap-6">
+        <!-- Wallet Balance Display -->
+        <div v-if="auth.isAuthenticated.value" class="hidden sm:flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border">
+          <Wallet class="h-4 w-4 text-muted-foreground" />
+          <span class="text-sm font-mono font-medium">{{ formattedBalance }}</span>
+        </div>
+
         <!-- Authentication Management -->
         <div class="hidden sm:block">
           <DropdownMenu v-if="auth.isAuthenticated.value">
@@ -94,6 +114,12 @@ const handleLogout = async () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" class="w-56 lg:w-64">
+              <!-- Wallet Balance in Dropdown -->
+              <div class="flex items-center gap-2 px-2 py-1.5 text-sm border-b">
+                <Wallet class="h-4 w-4 text-muted-foreground" />
+                <span class="font-mono font-medium">{{ formattedBalance }}</span>
+              </div>
+              
               <DropdownMenuItem @click="openProfileDialog" class="gap-2">
                 <User class="h-4 w-4" />
                 Profile
@@ -156,6 +182,13 @@ const handleLogout = async () => {
               <span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
               <Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
             </div>
+            
+            <!-- Mobile Wallet Balance -->
+            <div class="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded-lg">
+              <Wallet class="h-4 w-4 text-muted-foreground" />
+              <span class="text-sm font-mono font-medium">{{ formattedBalance }}</span>
+            </div>
+            
             <div class="space-y-1">
               <Button variant="ghost" size="sm" @click="openProfileDialog" class="w-full justify-start gap-2">
                 <User class="h-4 w-4" />
diff --git a/src/lib/utils/currency.ts b/src/lib/utils/currency.ts
new file mode 100644
index 0000000..b889ec2
--- /dev/null
+++ b/src/lib/utils/currency.ts
@@ -0,0 +1,76 @@
+/**
+ * EverQuest Currency Conversion
+ * 1 sat = 1 copper
+ * 100 copper = 1 silver
+ * 100 silver = 1 gold  
+ * 100 gold = 1 platinum
+ */
+
+export interface EverQuestCurrency {
+  platinum: number
+  gold: number
+  silver: number
+  copper: number
+}
+
+export function satoshisToEverQuest(satoshis: number): EverQuestCurrency {
+  // Convert satoshis to copper (1 sat = 1 copper)
+  let copper = satoshis
+  
+  // Convert to higher denominations
+  const platinum = Math.floor(copper / 1000000) // 100 gold = 1 platinum
+  copper %= 1000000
+  
+  const gold = Math.floor(copper / 10000) // 100 silver = 1 gold
+  copper %= 10000
+  
+  const silver = Math.floor(copper / 100) // 100 copper = 1 silver
+  copper %= 100
+  
+  return {
+    platinum,
+    gold,
+    silver,
+    copper
+  }
+}
+
+export function formatEverQuestCurrency(currency: EverQuestCurrency): string {
+  const parts: string[] = []
+  
+  if (currency.platinum > 0) {
+    parts.push(`${currency.platinum}p`)
+  }
+  
+  if (currency.gold > 0) {
+    parts.push(`${currency.gold}g`)
+  }
+  
+  if (currency.silver > 0) {
+    parts.push(`${currency.silver}s`)
+  }
+  
+  if (currency.copper > 0) {
+    parts.push(`${currency.copper}c`)
+  }
+  
+  // If no currency, show 0c
+  if (parts.length === 0) {
+    return '0c'
+  }
+  
+  return parts.join(' ')
+}
+
+export function formatWalletBalance(balanceMsat: number): string {
+  // Convert msat to satoshis (1 sat = 1000 msat)
+  const satoshis = Math.floor(balanceMsat / 1000)
+  const currency = satoshisToEverQuest(satoshis)
+  return formatEverQuestCurrency(currency)
+}
+
+// Test examples:
+// 100 sat = 1s (1 silver)
+// 10000 sat = 1g (1 gold) 
+// 1000000 sat = 1p (1 platinum)
+// 1234567 sat = 1p 2g 3s 4c 
\ No newline at end of file