WIP: desktop transactions list

lib/pages/wallet_view/sub_widgets/transactions_list.dart

@@ -10,6 +10,7 @@ import 'package:stackwallet/providers/global/wallets_provider.dart';
 import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/trade_card.dart';
 import 'package:stackwallet/widgets/transaction_card.dart';
@@ -67,6 +68,65 @@ class _TransactionsListState extends ConsumerState<TransactionsList> {
     );
   }
 
+  Widget itemBuilder(
+      BuildContext context, Transaction tx, BorderRadius? radius) {
+    final matchingTrades = ref
+        .read(tradesServiceProvider)
+        .trades
+        .where((e) => e.payInTxid == tx.txid || e.payOutTxid == tx.txid);
+    if (tx.txType == "Sent" && matchingTrades.isNotEmpty) {
+      final trade = matchingTrades.first;
+      return Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).extension<StackColors>()!.popupBG,
+          borderRadius: radius,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            TransactionCard(
+              // this may mess with combined firo transactions
+              key: Key(tx.toString()), //
+              transaction: tx,
+              walletId: widget.walletId,
+            ),
+            TradeCard(
+              // this may mess with combined firo transactions
+              key: Key(tx.toString() + trade.uuid), //
+              trade: trade,
+              onTap: () {
+                unawaited(
+                  Navigator.of(context).pushNamed(
+                    TradeDetailsView.routeName,
+                    arguments: Tuple4(
+                      trade.tradeId,
+                      tx,
+                      widget.walletId,
+                      ref.read(managerProvider).walletName,
+                    ),
+                  ),
+                );
+              },
+            )
+          ],
+        ),
+      );
+    } else {
+      return Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).extension<StackColors>()!.popupBG,
+          borderRadius: radius,
+        ),
+        child: TransactionCard(
+          // this may mess with combined firo transactions
+          key: Key(tx.toString()), //
+          transaction: tx,
+          walletId: widget.walletId,
+        ),
+      );
+    }
+  }
+
   @override
   void initState() {
     managerProvider = widget.managerProvider;
@@ -119,7 +179,30 @@ class _TransactionsListState extends ConsumerState<TransactionsList> {
                 unawaited(ref.read(managerProvider).refresh());
               }
             },
-            child: ListView.builder(
+            child: Util.isDesktop
+                ? ListView.separated(
+                    itemBuilder: (context, index) {
+                      BorderRadius? radius;
+                      if (index == list.length - 1) {
+                        radius = _borderRadiusLast;
+                      } else if (index == 0) {
+                        radius = _borderRadiusFirst;
+                      }
+                      final tx = list[index];
+                      return itemBuilder(context, tx, radius);
+                    },
+                    separatorBuilder: (context, index) {
+                      return Container(
+                        width: double.infinity,
+                        height: 2,
+                        color: Theme.of(context)
+                            .extension<StackColors>()!
+                            .background,
+                      );
+                    },
+                    itemCount: list.length,
+                  )
+                : ListView.builder(
                     itemCount: list.length,
                     itemBuilder: (context, index) {
                       BorderRadius? radius;
@@ -129,65 +212,7 @@ class _TransactionsListState extends ConsumerState<TransactionsList> {
                         radius = _borderRadiusFirst;
                       }
                       final tx = list[index];
-
+                      return itemBuilder(context, tx, radius);
-                final matchingTrades = ref
-                    .read(tradesServiceProvider)
-                    .trades
-                    .where((e) =>
-                        e.payInTxid == tx.txid || e.payOutTxid == tx.txid);
-                if (tx.txType == "Sent" && matchingTrades.isNotEmpty) {
-                  final trade = matchingTrades.first;
-                  return Container(
-                    decoration: BoxDecoration(
-                      color:
-                          Theme.of(context).extension<StackColors>()!.popupBG,
-                      borderRadius: radius,
-                    ),
-                    child: Column(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        TransactionCard(
-                          // this may mess with combined firo transactions
-                          key: Key(tx.toString()), //
-                          transaction: tx,
-                          walletId: widget.walletId,
-                        ),
-                        TradeCard(
-                          // this may mess with combined firo transactions
-                          key: Key(tx.toString() + trade.uuid), //
-                          trade: trade,
-                          onTap: () {
-                            unawaited(
-                              Navigator.of(context).pushNamed(
-                                TradeDetailsView.routeName,
-                                arguments: Tuple4(
-                                  trade.tradeId,
-                                  tx,
-                                  widget.walletId,
-                                  ref.read(managerProvider).walletName,
-                                ),
-                              ),
-                            );
-                          },
-                        )
-                      ],
-                    ),
-                  );
-                } else {
-                  return Container(
-                    decoration: BoxDecoration(
-                      color:
-                          Theme.of(context).extension<StackColors>()!.popupBG,
-                      borderRadius: radius,
-                    ),
-                    child: TransactionCard(
-                      // this may mess with combined firo transactions
-                      key: Key(tx.toString()), //
-                      transaction: tx,
-                      walletId: widget.walletId,
-                    ),
-                  );
-                }
                     },
                   ),
           );

lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart

@@ -7,6 +7,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart';
 import 'package:stackwallet/pages/exchange_view/wallet_initiated_exchange_view.dart';
 import 'package:stackwallet/pages/settings_views/wallet_settings_view/wallet_network_settings_view/wallet_network_settings_view.dart';
+import 'package:stackwallet/pages/wallet_view/sub_widgets/transactions_list.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_summary.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/receive/desktop_receive.dart';
 import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/send/desktop_send.dart';
@@ -324,8 +325,10 @@ class _DesktopWalletViewState extends ConsumerState<DesktopWalletView> {
                   const SizedBox(
                     width: 16,
                   ),
-                  const Expanded(
+                  Expanded(
-                    child: RecentDesktopTransactions(),
+                    child: RecentDesktopTransactions(
+                      walletId: walletId,
+                    ),
                   ),
                 ],
               ),
@@ -543,15 +546,21 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
   }
 }
 
-class RecentDesktopTransactions extends StatefulWidget {
+class RecentDesktopTransactions extends ConsumerStatefulWidget {
-  const RecentDesktopTransactions({Key? key}) : super(key: key);
+  const RecentDesktopTransactions({
+    Key? key,
+    required this.walletId,
+  }) : super(key: key);
+
+  final String walletId;
 
   @override
-  State<RecentDesktopTransactions> createState() =>
+  ConsumerState<RecentDesktopTransactions> createState() =>
       _RecentDesktopTransactionsState();
 }
 
-class _RecentDesktopTransactionsState extends State<RecentDesktopTransactions> {
+class _RecentDesktopTransactionsState
+    extends ConsumerState<RecentDesktopTransactions> {
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -579,9 +588,10 @@ class _RecentDesktopTransactionsState extends State<RecentDesktopTransactions> {
           height: 16,
         ),
         Expanded(
-          child: RoundedWhiteContainer(
+          child: TransactionsList(
-            padding: const EdgeInsets.all(0),
+            managerProvider: ref.watch(walletsChangeNotifierProvider
-            child: Container(),
+                .select((value) => value.getManagerProvider(widget.walletId))),
+            walletId: widget.walletId,
           ),
         ),
       ],

lib/widgets/trade_card.dart

@@ -7,6 +7,7 @@ import 'package:stackwallet/models/exchange/response_objects/trade.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
 class TradeCard extends ConsumerWidget {
@@ -84,7 +85,7 @@ class TradeCard extends ConsumerWidget {
                         style: STextStyles.itemSubtitle12(context),
                       ),
                       Text(
-                        "${Decimal.tryParse(trade.payInAmount) ?? "..."} ${trade.payInCurrency.toUpperCase()}",
+                        "${Util.isDesktop ? "-" : ""}${Decimal.tryParse(trade.payInAmount) ?? "..."} ${trade.payInCurrency.toUpperCase()}",
                         style: STextStyles.itemSubtitle12(context),
                       ),
                     ],

lib/widgets/transaction_card.dart

@@ -13,6 +13,7 @@ import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/format.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/utilities/util.dart';
 import 'package:tuple/tuple.dart';
 
 class TransactionCard extends ConsumerStatefulWidget {
@@ -100,6 +101,17 @@ class _TransactionCardState extends ConsumerState<TransactionCard> {
             .select((value) => value.getPrice(coin)))
         .item1;
 
+    late final String prefix;
+    if (Util.isDesktop) {
+      if (_transaction.txType == "Sent") {
+        prefix = "-";
+      } else if (_transaction.txType == "Received") {
+        prefix = "+";
+      }
+    } else {
+      prefix = "";
+    }
+
     return Material(
       color: Theme.of(context).extension<StackColors>()!.popupBG,
       elevation: 0,
@@ -126,14 +138,16 @@ class _TransactionCardState extends ConsumerState<TransactionCard> {
               ));
               return;
             }
-            unawaited(Navigator.of(context).pushNamed(
+            unawaited(
+              Navigator.of(context).pushNamed(
                 TransactionDetailsView.routeName,
                 arguments: Tuple3(
                   _transaction,
                   coin,
                   walletId,
                 ),
-            ));
+              ),
+            );
           },
           child: Padding(
             padding: const EdgeInsets.all(8),
@@ -176,7 +190,7 @@ class _TransactionCardState extends ConsumerState<TransactionCard> {
                                           ? (_transaction.amount ~/ 1000)
                                           : _transaction.amount;
                                   return Text(
-                                    "${Format.satoshiAmountToPrettyString(amount, locale)} ${coin.ticker}",
+                                    "$prefix${Format.satoshiAmountToPrettyString(amount, locale)} ${coin.ticker}",
                                     style:
                                         STextStyles.itemSubtitle12_600(context),
                                   );
@@ -223,7 +237,7 @@ class _TransactionCardState extends ConsumerState<TransactionCard> {
                                     }
 
                                     return Text(
-                                      "${Format.localizedStringAsFixed(
+                                      "$prefix${Format.localizedStringAsFixed(
                                         value: Format.satoshisToAmount(value) *
                                             price,
                                         locale: locale,