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

50
src/components/ui/CurrencyDisplay.vue Normal file
View file

@ -0,0 +1,50 @@
<template>
<div class="flex items-center gap-1 bg-muted/30 rounded-lg p-1 border">
<!-- Platinum -->
<div v-if="currency.platinum > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-blue-900/50 border border-blue-700/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-slate-300 to-slate-500 border border-slate-400"></div>
<span class="text-xs font-mono font-bold text-blue-100">{{ currency.platinum }}</span>
</div>
<!-- Gold -->
<div v-if="currency.gold > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-yellow-900/50 border border-yellow-700/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 border border-yellow-400"></div>
<span class="text-xs font-mono font-bold text-yellow-100">{{ currency.gold }}</span>
</div>
<!-- Silver -->
<div v-if="currency.silver > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-gray-700/50 border border-gray-600/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-gray-300 to-gray-500 border border-gray-400"></div>
<span class="text-xs font-mono font-bold text-gray-100">{{ currency.silver }}</span>
</div>
<!-- Copper -->
<div v-if="currency.copper > 0" class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
<span class="text-xs font-mono font-bold text-orange-100">{{ currency.copper }}</span>
</div>
<!-- Show 0c if no currency -->
<div v-if="currency.platinum === 0 && currency.gold === 0 && currency.silver === 0 && currency.copper === 0"
class="flex items-center gap-1 px-2 py-1 rounded bg-orange-900/50 border border-orange-700/30">
<div class="w-3 h-3 rounded-full bg-gradient-to-br from-orange-300 to-orange-500 border border-orange-400"></div>
<span class="text-xs font-mono font-bold text-orange-100">0</span>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { satoshisToEverQuest, type EverQuestCurrency } from '@/lib/utils/currency'
interface Props {
balanceMsat: number
}
const props = defineProps<Props>()
const currency = computed<EverQuestCurrency>(() => {
const satoshis = Math.floor(props.balanceMsat / 1000)
return satoshisToEverQuest(satoshis)
})
</script>