From 437da6ad728e3c4b6a6b98ef63beb0634b370796 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 1 Aug 2025 23:54:37 +0200
Subject: [PATCH] feat: Integrate CurrencyDisplay component for wallet balance
 in Navbar

- Replace formatted balance display with CurrencyDisplay component in Navbar.vue, enhancing the visual representation of wallet balances.
- Introduce CurrencyDisplay.vue to handle the display of various currency denominations, improving clarity for users regarding their wallet contents.
---
 src/components/layout/Navbar.vue      | 12 +++----
 src/components/ui/CurrencyDisplay.vue | 50 +++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/CurrencyDisplay.vue

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 2301de0..66f513b 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -10,8 +10,8 @@ import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet } from 'lucide-vue-nex
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import LoginDialog from '@/components/auth/LoginDialog.vue'
 import ProfileDialog from '@/components/auth/ProfileDialog.vue'
+import CurrencyDisplay from '@/components/ui/CurrencyDisplay.vue'
 import { auth } from '@/composables/useAuth'
-import { formatWalletBalance } from '@/lib/utils/currency'
 
 interface NavigationItem {
   name: string
@@ -40,10 +40,6 @@ const totalBalance = computed(() => {
   }, 0)
 })
 
-const formattedBalance = computed(() => {
-  return formatWalletBalance(totalBalance.value)
-})
-
 const toggleMenu = () => {
   isOpen.value = !isOpen.value
 }
@@ -100,7 +96,7 @@ const handleLogout = async () => {
         <!-- 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>
+          <CurrencyDisplay :balance-msat="totalBalance" />
         </div>
 
         <!-- Authentication Management -->
@@ -117,7 +113,7 @@ const handleLogout = async () => {
               <!-- 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>
+                <CurrencyDisplay :balance-msat="totalBalance" />
               </div>
               
               <DropdownMenuItem @click="openProfileDialog" class="gap-2">
@@ -186,7 +182,7 @@ const handleLogout = async () => {
             <!-- 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>
+              <CurrencyDisplay :balance-msat="totalBalance" />
             </div>
             
             <div class="space-y-1">
diff --git a/src/components/ui/CurrencyDisplay.vue b/src/components/ui/CurrencyDisplay.vue
new file mode 100644
index 0000000..c783d9b
--- /dev/null
+++ b/src/components/ui/CurrencyDisplay.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="flex items-center gap-1 bg-muted/30 rounded-lg p-1 border">
+    <!-- Platinum -->
+    <div v-if="currency.platinum > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-blue-900/50 border border-blue-700/30">
+      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-slate-300 to-slate-500 border border-slate-400"></div>
+      <span class="text-xs font-mono font-bold text-blue-100">{{ currency.platinum }}</span>
+    </div>
+    
+    <!-- Gold -->
+    <div v-if="currency.gold > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-yellow-900/50 border border-yellow-700/30">
+      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 border border-yellow-400"></div>
+      <span class="text-xs font-mono font-bold text-yellow-100">{{ currency.gold }}</span>
+    </div>
+    
+    <!-- Silver -->
+    <div v-if="currency.silver > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-gray-700/50 border border-gray-600/30">
+      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-gray-300 to-gray-500 border border-gray-400"></div>
+      <span class="text-xs font-mono font-bold text-gray-100">{{ currency.silver }}</span>
+    </div>
+    
+    <!-- Copper -->
+    <div v-if="currency.copper > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
+      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
+      <span class="text-xs font-mono font-bold text-orange-100">{{ currency.copper }}</span>
+    </div>
+    
+    <!-- Show 0c if no currency -->
+    <div v-if="currency.platinum === 0 && currency.gold === 0 && currency.silver === 0 && currency.copper === 0" 
+         class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
+      <div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
+      <span class="text-xs font-mono font-bold text-orange-100">0</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { satoshisToEverQuest, type EverQuestCurrency } from '@/lib/utils/currency'
+
+interface Props {
+  balanceMsat: number
+}
+
+const props = defineProps<Props>()
+
+const currency = computed<EverQuestCurrency>(() => {
+  const satoshis = Math.floor(props.balanceMsat / 1000)
+  return satoshisToEverQuest(satoshis)
+})
+</script> 
\ No newline at end of file