From 1cdd3338f3c4d0d401386741fab50309e391a2c0 Mon Sep 17 00:00:00 2001
From: julian <julian@cypherstack.com>
Date: Tue, 28 Feb 2023 09:07:41 -0600
Subject: [PATCH] fade bottom of transaction list on mobile

---
 .../sub_widgets/transactions_list.dart        | 19 ++++++++--
 lib/pages/wallet_view/wallet_view.dart        | 38 +++++++++++++------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/lib/pages/wallet_view/sub_widgets/transactions_list.dart b/lib/pages/wallet_view/sub_widgets/transactions_list.dart
index 0c48e69b6..3d9b9c95e 100644
--- a/lib/pages/wallet_view/sub_widgets/transactions_list.dart
+++ b/lib/pages/wallet_view/sub_widgets/transactions_list.dart
@@ -5,11 +5,13 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/models/isar/models/isar_models.dart';
 import 'package:stackwallet/pages/exchange_view/trade_details_view.dart';
 import 'package:stackwallet/pages/wallet_view/sub_widgets/no_transactions_found.dart';
+import 'package:stackwallet/pages/wallet_view/wallet_view.dart';
 import 'package:stackwallet/providers/global/trades_service_provider.dart';
 import 'package:stackwallet/providers/global/wallets_provider.dart';
 import 'package:stackwallet/route_generator.dart';
 import 'package:stackwallet/services/coins/manager.dart';
 import 'package:stackwallet/utilities/constants.dart';
+import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
@@ -20,8 +22,6 @@ import 'package:stackwallet/widgets/trade_card.dart';
 import 'package:stackwallet/widgets/transaction_card.dart';
 import 'package:tuple/tuple.dart';
 
-import '../../../utilities/enums/coin_enum.dart';
-
 class TransactionsList extends ConsumerStatefulWidget {
   const TransactionsList({
     Key? key,
@@ -281,17 +281,30 @@ class _TransactionsListState extends ConsumerState<TransactionsList> {
                     itemCount: _transactions2.length,
                     itemBuilder: (context, index) {
                       BorderRadius? radius;
+                      bool shouldWrap = false;
                       if (_transactions2.length == 1) {
                         radius = BorderRadius.circular(
                           Constants.size.circularBorderRadius,
                         );
                       } else if (index == _transactions2.length - 1) {
                         radius = _borderRadiusLast;
+                        shouldWrap = true;
                       } else if (index == 0) {
                         radius = _borderRadiusFirst;
                       }
                       final tx = _transactions2[index];
-                      return itemBuilder(context, tx, radius, manager.coin);
+                      if (shouldWrap) {
+                        return Column(
+                          children: [
+                            itemBuilder(context, tx, radius, manager.coin),
+                            const SizedBox(
+                              height: WalletView.navBarHeight + 14,
+                            ),
+                          ],
+                        );
+                      } else {
+                        return itemBuilder(context, tx, radius, manager.coin);
+                      }
                     },
                   ),
           );
diff --git a/lib/pages/wallet_view/wallet_view.dart b/lib/pages/wallet_view/wallet_view.dart
index c8b832875..5937930d1 100644
--- a/lib/pages/wallet_view/wallet_view.dart
+++ b/lib/pages/wallet_view/wallet_view.dart
@@ -666,18 +666,34 @@ class _WalletViewState extends ConsumerState<WalletView> {
                         children: [
                           Padding(
                             padding: const EdgeInsets.symmetric(horizontal: 16),
-                            child: Padding(
-                              padding: const EdgeInsets.only(bottom: 14),
-                              child: ClipRRect(
-                                borderRadius: BorderRadius.vertical(
-                                  top: Radius.circular(
-                                    Constants.size.circularBorderRadius,
-                                  ),
-                                  bottom: Radius.circular(
-                                    // WalletView.navBarHeight / 2.0,
-                                    Constants.size.circularBorderRadius,
-                                  ),
+                            child: ClipRRect(
+                              borderRadius: BorderRadius.vertical(
+                                top: Radius.circular(
+                                  Constants.size.circularBorderRadius,
                                 ),
+                                bottom: Radius.circular(
+                                  // WalletView.navBarHeight / 2.0,
+                                  Constants.size.circularBorderRadius,
+                                ),
+                              ),
+                              child: ShaderMask(
+                                blendMode: BlendMode.dstOut,
+                                shaderCallback: (Rect bounds) {
+                                  return const LinearGradient(
+                                    begin: Alignment.topCenter,
+                                    end: Alignment.bottomCenter,
+                                    colors: [
+                                      Colors.transparent,
+                                      Colors.transparent,
+                                      Colors.white,
+                                    ],
+                                    stops: [
+                                      0.0,
+                                      0.8,
+                                      1.0,
+                                    ], // 10% purple, 80% transparent, 10% purple
+                                  ).createShader(bounds);
+                                },
                                 child: Container(
                                   decoration: BoxDecoration(
                                     color: Colors.transparent,