From 54bc3ae8b5c2966bff15df5145ce3af56df6a3fc Mon Sep 17 00:00:00 2001
From: Kirah Sapong <kirah@tbd.email>
Date: Tue, 6 Feb 2024 12:18:12 -0800
Subject: [PATCH] Refactor modal bottom sheet list

---
 .../lib/features/deposit/deposit_page.dart    |  3 +-
 .../lib/features/withdraw/withdraw_page.dart  |  3 +-
 frontend/lib/shared/currency_modal.dart       | 59 +++++++++++--------
 .../features/deposit/deposit_page_test.dart   | 13 ++++
 .../features/withdraw/withdraw_page_test.dart | 13 ++++
 5 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/frontend/lib/features/deposit/deposit_page.dart b/frontend/lib/features/deposit/deposit_page.dart
index 0de6f6d6..c338561c 100644
--- a/frontend/lib/features/deposit/deposit_page.dart
+++ b/frontend/lib/features/deposit/deposit_page.dart
@@ -55,7 +55,8 @@ class DepositPage extends HookWidget {
                               (value) => selectedCurrencyItem.value =
                                   supportedCurrencyList.firstWhere(
                                       (element) => element['label'] == value),
-                              supportedCurrencyList);
+                              supportedCurrencyList,
+                              selectedCurrencyItem.value['label'].toString());
                         },
                       ),
                       const SizedBox(height: Grid.xl),
diff --git a/frontend/lib/features/withdraw/withdraw_page.dart b/frontend/lib/features/withdraw/withdraw_page.dart
index f9c29ab3..2e72bf34 100644
--- a/frontend/lib/features/withdraw/withdraw_page.dart
+++ b/frontend/lib/features/withdraw/withdraw_page.dart
@@ -56,7 +56,8 @@ class WithdrawPage extends HookWidget {
                               (value) => selectedCurrencyItem.value =
                                   supportedCurrencyList.firstWhere(
                                       (element) => element['label'] == value),
-                              supportedCurrencyList);
+                              supportedCurrencyList,
+                              selectedCurrencyItem.value['label'].toString());
                         },
                       ),
                       const SizedBox(height: Grid.xl),
diff --git a/frontend/lib/shared/currency_modal.dart b/frontend/lib/shared/currency_modal.dart
index fad79452..5d243ba7 100644
--- a/frontend/lib/shared/currency_modal.dart
+++ b/frontend/lib/shared/currency_modal.dart
@@ -5,39 +5,46 @@ class CurrencyModal {
   static Future<dynamic> showCurrencyModal(
       BuildContext context,
       Function(String) onPressed,
-      List<Map<String, Object>> supportedCurrencyList) {
+      List<Map<String, Object>> supportedCurrencyList,
+      String selectedCurrency) {
     return showModalBottomSheet(
         useSafeArea: true,
         isScrollControlled: true,
         context: context,
         builder: (BuildContext context) {
-          return SizedBox(
-            height: 200,
-            child: Center(
-              child: ListView(
-                children: supportedCurrencyList.map((Map<String, Object> map) {
+          return SafeArea(
+              child: SizedBox(
+            height: supportedCurrencyList.length * 80,
+            child: Column(children: [
+              Padding(
+                  padding: const EdgeInsets.symmetric(vertical: Grid.xs),
+                  child: Text(
+                    'Select currency',
+                    style: Theme.of(context).textTheme.titleMedium,
+                    textAlign: TextAlign.center,
+                  )),
+              Expanded(
+                child: ListView(
+                    children:
+                        supportedCurrencyList.map((Map<String, Object> map) {
                   IconData icon = map['icon'] as IconData;
                   String label = map['label'].toString();
-                  return TextButton(
-                      onPressed: () {
-                        onPressed(label);
-                        Navigator.pop(context);
-                      },
-                      child: Row(children: [
-                        Icon(icon),
-                        Expanded(
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(
-                                horizontal: Grid.side, vertical: Grid.xs),
-                            child: Text(label,
-                                style: Theme.of(context).textTheme.titleMedium),
-                          ),
-                        )
-                      ]));
-                }).toList(),
-              ),
-            ),
-          );
+                  return (ListTile(
+                    onTap: () {
+                      onPressed(label);
+                      Navigator.pop(context);
+                    },
+                    leading: Icon(icon),
+                    title: Text(label,
+                        style: Theme.of(context).textTheme.titleMedium),
+                    trailing: (selectedCurrency == label)
+                        ? const Icon(Icons.check)
+                        : null,
+                  ));
+                }).toList()),
+              )
+            ]),
+          ));
         });
   }
 }
diff --git a/frontend/test/features/deposit/deposit_page_test.dart b/frontend/test/features/deposit/deposit_page_test.dart
index 6ea279c0..c7c873ff 100644
--- a/frontend/test/features/deposit/deposit_page_test.dart
+++ b/frontend/test/features/deposit/deposit_page_test.dart
@@ -49,5 +49,18 @@ void main() {
         await tester.pump();
       }
     });
+
+    testWidgets(
+        'should show the currency list on tap of the currency converter dropdown toggle',
+        (tester) async {
+      await tester.pumpWidget(
+        WidgetHelpers.testableWidget(child: const DepositPage()),
+      );
+
+      await tester.tap(find.byIcon(Icons.keyboard_arrow_down));
+      await tester.pump();
+
+      expect(find.byType(ListView), findsOneWidget);
+    });
   });
 }
diff --git a/frontend/test/features/withdraw/withdraw_page_test.dart b/frontend/test/features/withdraw/withdraw_page_test.dart
index 584d3dfe..ef0d2aed 100644
--- a/frontend/test/features/withdraw/withdraw_page_test.dart
+++ b/frontend/test/features/withdraw/withdraw_page_test.dart
@@ -49,5 +49,18 @@ void main() {
         await tester.pump();
       }
     });
+
+    testWidgets(
+        'should show the currency list on tap of the currency converter dropdown toggle',
+        (tester) async {
+      await tester.pumpWidget(
+        WidgetHelpers.testableWidget(child: const WithdrawPage()),
+      );
+
+      await tester.tap(find.byIcon(Icons.keyboard_arrow_down));
+      await tester.pump();
+
+      expect(find.byType(ListView), findsOneWidget);
+    });
   });
 }