From 3d428719be2007610683c844747784cdcdfdf709 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Mon, 15 Sep 2025 00:07:47 +0200
Subject: [PATCH] Refactor transaction display logic in WalletPage for improved
 status handling

- 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.
---
 src/modules/wallet/views/WalletPage.vue | 42 +++++++++----------------
 1 file changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/modules/wallet/views/WalletPage.vue b/src/modules/wallet/views/WalletPage.vue
index c638700..d83559a 100644
--- a/src/modules/wallet/views/WalletPage.vue
+++ b/src/modules/wallet/views/WalletPage.vue
@@ -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