Display more details about wallet history items when expanded

get10101 · Aug 2, 2023 · ab4e65e · ab4e65e
1 parent 6b77d96
commit ab4e65e
Showing 1 changed file with 76 additions and 56 deletions.
diff --git a/mobile/lib/features/wallet/wallet_history_item.dart b/mobile/lib/features/wallet/wallet_history_item.dart
@@ -1,11 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:get_10101/common/amount_text.dart';
+import 'package:get_10101/common/expansion_tile_with_arrow.dart';
 import 'package:get_10101/features/wallet/domain/payment_flow.dart';
 import 'package:get_10101/features/wallet/domain/wallet_history.dart';
 import 'package:intl/intl.dart';
 import 'package:timeago/timeago.dart' as timeago;
 
 class WalletHistoryItem extends StatelessWidget {
   final WalletHistoryItemData data;
+  static final dateFormat = DateFormat("yyyy-MM-dd HH:mm:ss");
 
   const WalletHistoryItem({super.key, required this.data});
 
@@ -52,20 +55,30 @@ class WalletHistoryItem extends StatelessWidget {
     String title = () {
       switch (data.type) {
         case WalletHistoryItemDataType.lightning:
-          return data.paymentHash ?? "";
         case WalletHistoryItemDataType.onChain:
-          return data.txid ?? "";
+          return "Payment";
         case WalletHistoryItemDataType.trade:
-          final orderId = data.orderId!.substring(0, 8);
           switch (data.flow) {
             case PaymentFlow.inbound:
-              return "Closed position with order $orderId";
+              return "Closed position";
             case PaymentFlow.outbound:
-              return "Opened position with order $orderId";
+              return "Opened position";
           }
+        case WalletHistoryItemDataType.orderMatchingFee:
+          return "Matching fee";
+      }
+    }();
+
+    String txOrOrder = () {
+      switch (data.type) {
+        case WalletHistoryItemDataType.lightning:
+          return "Payment hash: ${data.paymentHash ?? ''}";
+        case WalletHistoryItemDataType.onChain:
+          return "Transaction id: ${data.txid ?? ''}";
+        case WalletHistoryItemDataType.trade:
         case WalletHistoryItemDataType.orderMatchingFee:
           final orderId = data.orderId!.substring(0, 8);
-          return "Matching fee for $orderId";
+          return "Order: $orderId";
       }
     }();
 
@@ -98,59 +111,66 @@ class WalletHistoryItem extends StatelessWidget {
       }
     }();
 
-    var amountFormatter = NumberFormat.compact(locale: "en_IN");
+    var amountFormatter = NumberFormat.compact(locale: "en_UK");
 
     return Card(
-      child: ListTile(
-          leading: Stack(children: [
-            Container(
-              padding: const EdgeInsets.only(bottom: 20.0),
-              child: SizedBox(height: statusIconSize, width: statusIconSize, child: statusIcon),
-            ),
-            Container(
-                padding: const EdgeInsets.only(left: 5.0, top: 10.0),
-                child: SizedBox(height: flowIconSize, width: flowIconSize, child: flowIcon)),
-          ]),
-          title: RichText(
-            overflow: TextOverflow.ellipsis,
-            text: TextSpan(
-              style: DefaultTextStyle.of(context).style,
-              children: <TextSpan>[
-                TextSpan(text: title),
-              ],
-            ),
+      child: ExpansionTileWithArrow(
+        leading: Stack(children: [
+          Container(
+            padding: const EdgeInsets.only(bottom: 20.0),
+            child: SizedBox(height: statusIconSize, width: statusIconSize, child: statusIcon),
+          ),
+          Container(
+              padding: const EdgeInsets.only(left: 5.0, top: 10.0),
+              child: SizedBox(height: flowIconSize, width: flowIconSize, child: flowIcon)),
+        ]),
+        title: RichText(
+          overflow: TextOverflow.ellipsis,
+          text: TextSpan(
+            style: DefaultTextStyle.of(context).style,
+            children: <TextSpan>[
+              TextSpan(text: title),
+            ],
+          ),
+        ),
+        subtitle: RichText(
+            textWidthBasis: TextWidthBasis.longestLine,
+            text: TextSpan(style: DefaultTextStyle.of(context).style, children: <TextSpan>[
+              TextSpan(
+                  text: timeago.format(data.timestamp), style: const TextStyle(color: Colors.grey)),
+            ])),
+        trailing: Padding(
+          padding: const EdgeInsets.only(top: 11.0, bottom: 5.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              RichText(
+                text: TextSpan(style: DefaultTextStyle.of(context).style, children: <InlineSpan>[
+                  TextSpan(
+                      text: "$sign${amountFormatter.format(data.amount.sats)} sats",
+                      style: TextStyle(
+                          color: color,
+                          fontFamily: "Courier",
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold))
+                ]),
+              ),
+              RichText(
+                  text: TextSpan(style: DefaultTextStyle.of(context).style, children: <TextSpan>[
+                TextSpan(text: onOrOff, style: const TextStyle(color: Colors.grey)),
+              ]))
+            ],
           ),
-          subtitle: RichText(
-              textWidthBasis: TextWidthBasis.longestLine,
-              text: TextSpan(style: DefaultTextStyle.of(context).style, children: <TextSpan>[
-                TextSpan(
-                    text: timeago.format(data.timestamp),
-                    style: const TextStyle(color: Colors.grey)),
-              ])),
-          trailing: Padding(
-            padding: const EdgeInsets.only(top: 11.0, bottom: 5.0),
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              crossAxisAlignment: CrossAxisAlignment.end,
-              children: [
-                RichText(
-                  text: TextSpan(style: DefaultTextStyle.of(context).style, children: <InlineSpan>[
-                    TextSpan(
-                        text: "$sign${amountFormatter.format(data.amount.sats)} sats",
-                        style: TextStyle(
-                            color: color,
-                            fontFamily: "Courier",
-                            fontSize: 16,
-                            fontWeight: FontWeight.bold))
-                  ]),
-                ),
-                RichText(
-                    text: TextSpan(style: DefaultTextStyle.of(context).style, children: <TextSpan>[
-                  TextSpan(text: onOrOff, style: const TextStyle(color: Colors.grey)),
-                ]))
-              ],
-            ),
-          )),
+        ),
+        expandedCrossAxisAlignment: CrossAxisAlignment.start,
+        expandedAlignment: Alignment.centerLeft,
+        children: [
+          Text(txOrOrder),
+          Text("Amount: ${formatSats(data.amount)}"),
+          Text("Time: ${dateFormat.format(data.timestamp)}")
+        ],
+      ),
     );
   }
 }