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:
parent
c959cf8101
commit
4cf2b769d6
2 changed files with 110 additions and 1 deletions
|
|
@ -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
76
src/lib/utils/currency.ts
Normal 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue