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.
This commit is contained in:
padreug 2025-08-01 23:49:39 +02:00
parent c959cf8101
commit 4cf2b769d6
2 changed files with 110 additions and 1 deletions

View file

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

76
src/lib/utils/currency.ts Normal file
View file

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