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

@@ -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) {
+function getTransactionColor(type: string, status: string) {
-  return type === 'received' ? 'text-green-600' : 'text-orange-600'
+  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