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

Refactor transaction display logic in WalletPage for improved status handling

Browse source 
- Updated the getTransactionIcon and getTransactionColor functions to accept transaction status, allowing for dynamic icon and color changes based on transaction state.
- Removed the getStatusColor function as its functionality is now integrated into the updated color logic.
- Enhanced transaction display in the WalletPage to reflect pending status with appropriate styling, improving user visibility of transaction states.

These changes enhance the clarity and responsiveness of transaction information presented in the wallet module.
This commit is contained in:
padreug 2025-09-15 00:07:47 +02:00
parent d2a5d90427
commit 3d428719be
1 changed files with 15 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/modules/wallet/views/WalletPage.vue
View file

@ -62,26 +62,20 @@ async function refresh() {
await authService?.refresh()
}
function getTransactionIcon(type: string) {
function getTransactionIcon(type: string, status: string) {
if (status === 'pending') {
return Clock
}
return type === 'received' ? ArrowDownLeft : ArrowUpRight
}
function getTransactionColor(type: string) {
return type === 'received' ? 'text-green-600' : 'text-orange-600'
function getTransactionColor(type: string, status: string) {
if (status === 'pending') {
return 'text-amber-500'
}
return type === 'received' ? 'text-green-600' : 'text-red-600'
}
function getStatusColor(status: string) {
switch (status) {
case 'confirmed':
return 'default'
case 'pending':
return 'secondary'
case 'failed':
return 'destructive'
default:
return 'outline'
}
}
// Initialize on mount
onMounted(() => {
@ -191,10 +185,10 @@ onMounted(() => {
<div class="flex items-center gap-3">
<div
class="p-1.5 rounded-full bg-background border"
:class="getTransactionColor(tx.type)"
:class="getTransactionColor(tx.type, tx.status)"
>
<component
:is="getTransactionIcon(tx.type)"
:is="getTransactionIcon(tx.type, tx.status)"
class="h-3.5 w-3.5"
/>
</div>
@ -222,7 +216,7 @@ onMounted(() => {
<div class="text-right">
<p
class="font-semibold text-base"
:class="getTransactionColor(tx.type)"
:class="getTransactionColor(tx.type, tx.status)"
>
{{ tx.type === 'received' ? '+' : '-' }}{{ tx.amount.toLocaleString() }}
</p>
@ -237,9 +231,6 @@ onMounted(() => {
<!-- Badges Row -->
<div class="flex items-center gap-2 flex-wrap">
<Badge :variant="getStatusColor(tx.status)" class="text-xs">
{{ tx.status }}
</Badge>
<Badge v-if="tx.tag" variant="outline" class="text-xs">
{{ tx.tag }}
</Badge>
@ -254,10 +245,10 @@ onMounted(() => {
<div class="flex items-center gap-4">
<div
class="p-2 rounded-full bg-background border"
:class="getTransactionColor(tx.type)"
:class="getTransactionColor(tx.type, tx.status)"
>
<component
:is="getTransactionIcon(tx.type)"
:is="getTransactionIcon(tx.type, tx.status)"
class="h-4 w-4"
/>
</div>
@ -284,9 +275,6 @@ onMounted(() => {
}
})()
}}</span>
<Badge :variant="getStatusColor(tx.status)" class="text-xs">
{{ tx.status }}
</Badge>
<Badge v-if="tx.tag" variant="outline" class="text-xs">
{{ tx.tag }}
</Badge>
@ -297,7 +285,7 @@ onMounted(() => {
<div class="text-right ml-4">
<p
class="font-semibold"
:class="getTransactionColor(tx.type)"
:class="getTransactionColor(tx.type, tx.status)"
>
{{ tx.type === 'received' ? '+' : '-' }}
{{ tx.amount.toLocaleString() }} sats