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 { Button } from '@/components/ui/button'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
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 LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||||
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
||||||
import ProfileDialog from '@/components/auth/ProfileDialog.vue'
|
import ProfileDialog from '@/components/auth/ProfileDialog.vue'
|
||||||
import { auth } from '@/composables/useAuth'
|
import { auth } from '@/composables/useAuth'
|
||||||
|
import { formatWalletBalance } from '@/lib/utils/currency'
|
||||||
|
|
||||||
interface NavigationItem {
|
interface NavigationItem {
|
||||||
name: string
|
name: string
|
||||||
|
|
@ -30,6 +31,19 @@ const navigation = computed<NavigationItem[]>(() => [
|
||||||
{ name: t('nav.support'), href: '/support' },
|
{ 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 = () => {
|
const toggleMenu = () => {
|
||||||
isOpen.value = !isOpen.value
|
isOpen.value = !isOpen.value
|
||||||
}
|
}
|
||||||
|
|
@ -83,6 +97,12 @@ const handleLogout = async () => {
|
||||||
|
|
||||||
<!-- Theme Toggle, Language, and Identity -->
|
<!-- Theme Toggle, Language, and Identity -->
|
||||||
<div class="flex items-center gap-2 lg:gap-4 xl:gap-6">
|
<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 -->
|
<!-- Authentication Management -->
|
||||||
<div class="hidden sm:block">
|
<div class="hidden sm:block">
|
||||||
<DropdownMenu v-if="auth.isAuthenticated.value">
|
<DropdownMenu v-if="auth.isAuthenticated.value">
|
||||||
|
|
@ -94,6 +114,12 @@ const handleLogout = async () => {
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end" class="w-56 lg:w-64">
|
<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">
|
<DropdownMenuItem @click="openProfileDialog" class="gap-2">
|
||||||
<User class="h-4 w-4" />
|
<User class="h-4 w-4" />
|
||||||
Profile
|
Profile
|
||||||
|
|
@ -156,6 +182,13 @@ const handleLogout = async () => {
|
||||||
<span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
|
<span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
|
||||||
<Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
|
<Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
|
||||||
</div>
|
</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">
|
<div class="space-y-1">
|
||||||
<Button variant="ghost" size="sm" @click="openProfileDialog" class="w-full justify-start gap-2">
|
<Button variant="ghost" size="sm" @click="openProfileDialog" class="w-full justify-start gap-2">
|
||||||
<User class="h-4 w-4" />
|
<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