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

feat: Add wallet balance display and currency formatting

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

35
src/components/layout/Navbar.vue
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" />