padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Integrate CurrencyDisplay component for wallet balance in Navbar

Browse source 
- 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.
This commit is contained in:
padreug 2025-08-01 23:54:37 +02:00
parent 4cf2b769d6
commit 437da6ad72
2 changed files with 54 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/layout/Navbar.vue
View file

@ -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">