CW-427-Refactor-wallet-type-selection-UI (#968)

* refactor the asset selection screen

* formatting

* ui fixes

* remove Ethereum related

cw_core/lib/wallet_type.dart

@@ -26,7 +26,7 @@ enum WalletType {
   litecoin,
 
   @HiveField(4)
-  haven
+  haven,
 }
 
 int serializeToInt(WalletType type) {
@@ -77,13 +77,13 @@ String walletTypeToString(WalletType type) {
 String walletTypeToDisplayName(WalletType type) {
   switch (type) {
     case WalletType.monero:
-      return 'Monero';
+      return 'Monero (XMR)';
     case WalletType.bitcoin:
-      return 'Bitcoin (Electrum)';
+      return 'Bitcoin (BTC)';
     case WalletType.litecoin:
-      return 'Litecoin (Electrum)';
+      return 'Litecoin (LTC)';
     case WalletType.haven:
-      return 'Haven';
+      return 'Haven (XHV)';
     default:
       return '';
   }

lib/src/screens/new_wallet/new_wallet_type_page.dart

@@ -1,13 +1,14 @@
-import 'package:cake_wallet/utils/responsive_layout_util.dart';
-import 'package:cw_core/wallet_type.dart';
-import 'package:cake_wallet/themes/theme_base.dart';
-import 'package:flutter/material.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
+import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
-import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
+import 'package:cake_wallet/src/widgets/search_bar_widget.dart';
+import 'package:cake_wallet/themes/theme_base.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/wallet_types.g.dart';
+import 'package:cw_core/wallet_type.dart';
+import 'package:flutter/material.dart';
 
 class NewWalletTypePage extends BasePage {
   NewWalletTypePage({required this.onTypeSelected});
@@ -40,92 +41,82 @@ class WalletTypeFormState extends State<WalletTypeForm> {
 
   static const aspectRatioImage = 1.22;
 
-  final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
-  final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
-  final litecoinIcon = Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
-  final walletTypeImage = Image.asset('assets/images/wallet_type.png');
-  final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
-  final havenIcon = Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
+  final TextEditingController searchController = TextEditingController();
 
   WalletType? selected;
   List<WalletType> types;
+  List<WalletType> filteredTypes = [];
 
   @override
   void initState() {
-    types = availableWalletTypes;
+    types = filteredTypes = availableWalletTypes;
     super.initState();
+
+    searchController.addListener(() {
+      setState(() {
+        filteredTypes = List.from(types.where((type) => walletTypeToDisplayName(type)
+            .toLowerCase()
+            .contains(searchController.text.toLowerCase())));
+        return;
+      });
+    });
   }
 
   @override
   Widget build(BuildContext context) {
-    return ScrollableWithBottomSection(
-      contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-      content: Center(
+    return Center(
         child: ConstrainedBox(
-          constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: <Widget>[
-              Padding(
-                padding: EdgeInsets.only(left: 12, right: 12),
-                child: AspectRatio(
-                    aspectRatio: aspectRatioImage,
-                    child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
-              ),
-              Padding(
-                padding: EdgeInsets.only(top: 48),
-                child: Text(
-                  S.of(context).choose_wallet_currency,
-                  textAlign: TextAlign.center,
-                  style: TextStyle(
-                      fontSize: 16,
-                      fontWeight: FontWeight.w500,
-                      color: Theme.of(context)
-                          .primaryTextTheme!
-                          .titleLarge!
-                          .color!),
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            child: Column(
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(top: 48),
+                  child: Text(
+                    S.of(context).choose_wallet_currency,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w500,
+                        color: Theme.of(context).primaryTextTheme!.titleLarge!.color!),
+                  ),
                 ),
-              ),
-              ...types.map((type) => Padding(
-                    padding: EdgeInsets.only(top: 24),
-                    child: SelectButton(
-                        image: _iconFor(type),
-                        text: walletTypeToDisplayName(type),
-                        isSelected: selected == type,
-                        onTap: () => setState(() => selected = type)),
-                  ))
-            ],
-          ),
-        ),
-      ),
-      bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
-      bottomSection: PrimaryButton(
-        onPressed: () => onTypeSelected(),
-        text: S.of(context).seed_language_next,
-        color: Theme.of(context)
-            .accentTextTheme!
-            .bodyLarge!
-            .color!,
-        textColor: Colors.white,
-        isDisabled: selected == null,
-      ),
-    );
-  }
-
-  Image _iconFor(WalletType type) {
-    switch (type) {
-      case WalletType.monero:
-        return moneroIcon;
-      case WalletType.bitcoin:
-        return bitcoinIcon;
-      case WalletType.litecoin:
-        return litecoinIcon;
-      case WalletType.haven:
-        return havenIcon;
-      default:
-        throw Exception(
-            '_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
-    }
+                Padding(
+                  padding: const EdgeInsets.fromLTRB(24, 24, 24, 12),
+                  child: SearchBarWidget(searchController: searchController, borderRadius: 24),
+                ),
+                Expanded(
+                  child: ScrollableWithBottomSection(
+                    contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
+                    content: Column(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: <Widget>[
+                        ...filteredTypes.map((type) => Padding(
+                              padding: EdgeInsets.only(top: 12),
+                              child: SelectButton(
+                                  image: Image.asset(
+                                      walletTypeToCryptoCurrency(type).iconPath ?? '',
+                                      height: 24,
+                                      width: 24),
+                                  text: walletTypeToDisplayName(type),
+                                  showTrailingIcon: false,
+                                  height: 54,
+                                  isSelected: selected == type,
+                                  onTap: () => setState(() => selected = type)),
+                            ))
+                      ],
+                    ),
+                    bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
+                    bottomSection: PrimaryButton(
+                      onPressed: () => onTypeSelected(),
+                      text: S.of(context).seed_language_next,
+                      color: Theme.of(context).accentTextTheme!.bodyLarge!.color!,
+                      textColor: Colors.white,
+                      isDisabled: selected == null,
+                    ),
+                  ),
+                ),
+              ],
+            )));
   }
 
   Future<void> onTypeSelected() async {

lib/src/screens/new_wallet/widgets/select_button.dart

@@ -6,12 +6,16 @@ class SelectButton extends StatelessWidget {
     required this.onTap,
     this.image,
     this.isSelected = false,
+    this.showTrailingIcon = true,
+    this.height = 60,
   });
 
   final Image? image;
   final String text;
   final bool isSelected;
   final VoidCallback onTap;
+  final bool showTrailingIcon;
+  final double height;
 
   @override
   Widget build(BuildContext context) {
@@ -44,7 +48,7 @@ class SelectButton extends StatelessWidget {
       onTap: onTap,
       child: Container(
         width: double.infinity,
-        height: 60,
+        height: height,
         padding: EdgeInsets.only(left: 30, right: 30),
         alignment: Alignment.center,
         decoration: BoxDecoration(
@@ -76,7 +80,7 @@ class SelectButton extends StatelessWidget {
                 )
               ],
             ),
-            selectArrowImage
+            if (showTrailingIcon) selectArrowImage
           ],
         ),
       ),

lib/src/widgets/picker.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: deprecated_member_use
 
+import 'package:cake_wallet/src/widgets/search_bar_widget.dart';
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:flutter/material.dart';
 import 'package:cw_core/currency.dart';
@@ -158,37 +159,7 @@ class _PickerState<Item> extends State<Picker<Item>> {
                     if (widget.hintText != null)
                       Padding(
                         padding: const EdgeInsets.all(16),
-                        child: TextFormField(
-                          controller: searchController,
-                          style: TextStyle(
-                              color: Theme.of(context)
-                                  .primaryTextTheme!
-                                  .titleLarge!
-                                  .color!),
-                          decoration: InputDecoration(
-                            hintText: widget.hintText,
-                            prefixIcon:
-                                Image.asset("assets/images/search_icon.png"),
-                            filled: true,
-                            fillColor: Theme.of(context)
-                                .accentTextTheme!
-                                .displaySmall!
-                                .color!,
-                            alignLabelWithHint: false,
-                            contentPadding: const EdgeInsets.symmetric(
-                                vertical: 4, horizontal: 16),
-                            enabledBorder: OutlineInputBorder(
-                                borderRadius: BorderRadius.circular(14),
-                                borderSide: const BorderSide(
-                                  color: Colors.transparent,
-                                )),
-                            focusedBorder: OutlineInputBorder(
-                                borderRadius: BorderRadius.circular(14),
-                                borderSide: const BorderSide(
-                                  color: Colors.transparent,
-                                )),
-                          ),
-                        ),
+                        child: SearchBarWidget(searchController: searchController),
                       ),
                     Divider(
                       color: Theme.of(context)

lib/src/widgets/search_bar_widget.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/generated/i18n.dart';
+
+class SearchBarWidget extends StatelessWidget {
+  const SearchBarWidget({
+    required this.searchController,
+    this.hintText,
+    this.borderRadius = 14,
+  });
+
+  final TextEditingController searchController;
+  final String? hintText;
+  final double borderRadius;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: searchController,
+      style: TextStyle(color: Theme.of(context).primaryTextTheme!.titleLarge!.color!),
+      decoration: InputDecoration(
+        hintText: hintText ?? S.of(context).search_currency,
+        prefixIcon: Image.asset("assets/images/search_icon.png"),
+        filled: true,
+        fillColor: Theme.of(context).accentTextTheme!.displaySmall!.color!,
+        alignLabelWithHint: false,
+        contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
+        enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(borderRadius),
+            borderSide: const BorderSide(
+              color: Colors.transparent,
+            )),
+        focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(borderRadius),
+            borderSide: const BorderSide(
+              color: Colors.transparent,
+            )),
+      ),
+    );
+  }
+}