feat: redesign for CurrencyPicker and FiatPicker, introduce recents and currency groupings (#3248)

* Redesign for CurrencyPicker and FiatPicker, introduce recents and currency groupings

* chore: cleanup

* refactor: switch recents to previously completed trades, specify stables to be displayed, fix scrollable and adjust badge

* refactor: switch recents to previously completed trades, specify stables to be displayed, fix scrollable, adjust badge, add fiat and multinetwork currency pickers to buy and sell flows

* fresh set of changes and fixes for new currency picker flow

* add chain label to items on search and smooth pop

* add chain pill and label to xstocks

* properly filter search results

* shorten chain pill name for BSC tokens

* Review fixes

* cleanups

* safe pop

---------

Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com>

lib/src/screens/buy/buy_sell_page.dart

@@ -3,6 +3,9 @@ import 'package:cake_wallet/core/address_validator.dart';
 import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/entities/parse_address_from_domain.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/currency_picker/currency_picker_args.dart';
+import 'package:cake_wallet/new-ui/widgets/currency_picker/currency_picker_sheet.dart';
+import 'package:cake_wallet/new-ui/widgets/currency_picker/fiat_currency_picker_sheet.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart';
@@ -398,6 +401,7 @@ class BuySellPage extends BasePage {
         showLimitsField: false,
         currencies: buySellViewModel.fiatCurrencies,
         onCurrencySelected: (currency) => buySellViewModel.changeFiatCurrency(currency: currency),
+        onTapCurrencyPicker: _presentFiatPicker,
         imageArrow: Image.asset(
           'assets/images/arrow_bottom_purple_icon.png',
           color: Theme.of(context).colorScheme.primary,
@@ -435,6 +439,7 @@ class BuySellPage extends BasePage {
         isMoneroWallet: buySellViewModel.wallet == WalletType.monero,
         currencies: buySellViewModel.cryptoCurrencies,
         onCurrencySelected: (currency) => buySellViewModel.changeCryptoCurrency(currency: currency),
+        onTapCurrencyPicker: _presentCryptoPicker,
         imageArrow: Image.asset(
           'assets/images/arrow_bottom_cake_green.png',
           color: Theme.of(context).colorScheme.primary,
@@ -504,6 +509,29 @@ class BuySellPage extends BasePage {
     );
   }
 
+  void _presentFiatPicker(BuildContext context) {
+    FiatCurrencyPickerSheet.show(
+      context: context,
+      selected: buySellViewModel.fiatCurrency,
+      onSelected: (currency) => buySellViewModel.changeFiatCurrency(currency: currency),
+    );
+  }
+
+  void _presentCryptoPicker(BuildContext context) {
+    final items = [...buySellViewModel.cryptoCurrencies];
+    appendEvmDefaultTokens(items);
+    CurrencyPickerSheet.show(
+      context: context,
+      args: CurrencyPickerArgs(
+        items: items,
+        selected: buySellViewModel.cryptoCurrency,
+        recentsSource: RecentsSource.orders,
+        onSelected: (currency) => buySellViewModel.changeCryptoCurrency(currency: currency),
+        symbolResolver: buySellViewModel.amountParsingProxy.getCryptoSymbol,
+      ),
+    );
+  }
+
   Future<String> fetchParsedAddress(
     BuildContext context,
     String domain,

lib/src/screens/exchange/widgets/exchange_card.dart

@@ -48,6 +48,7 @@ class ExchangeCard<T extends Currency> extends StatefulWidget {
     this.onPushAddressBookButton,
     this.onDispose,
     this.useSatoshis = false,
+    this.onTapCurrencyPicker,
     required this.cardInstanceName,
   }) : super(key: key);
 
@@ -84,6 +85,7 @@ class ExchangeCard<T extends Currency> extends StatefulWidget {
   final String cardInstanceName;
   final Color fillColor;
   final bool useSatoshis;
+  final void Function(BuildContext context)? onTapCurrencyPicker;
 
   @override
   ExchangeCardState<T> createState() => ExchangeCardState<T>();
@@ -447,6 +449,10 @@ class ExchangeCardState<T extends Currency> extends State<ExchangeCard<T>> {
   }
 
   void _presentPicker(BuildContext context) {
+    if (widget.onTapCurrencyPicker != null) {
+      widget.onTapCurrencyPicker!(context);
+      return;
+    }
     showPopUp<void>(
       context: context,
       builder: (_) => CurrencyPicker(

lib/src/screens/settings/display_settings_page.dart

@@ -1,11 +1,11 @@
 import 'package:cake_wallet/entities/bitcoin_amount_display_mode.dart';
-import 'package:cake_wallet/entities/fiat_currency.dart';
 import 'package:cake_wallet/entities/language_service.dart';
 import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_regular_row.dart';
 import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_selector.dart';
 import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_toggle.dart';
 import 'package:cake_wallet/entities/sync_status_display_mode.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/currency_picker/fiat_currency_picker_sheet.dart';
 import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
 import 'package:cake_wallet/src/screens/settings/widgets/settings_choices_cell.dart';
 import 'package:cake_wallet/src/screens/settings/widgets/settings_theme_choice.dart';
@@ -179,35 +179,11 @@ class DisplaySettingsPage extends StatelessWidget {
                             keyValue: "display_settings_fiat_currency",
                             label: S.of(context).settings_currency,
                             options: [_displaySettingsViewModel.fiatCurrency.title],
-                            onTap: () async {
-                              final items = FiatCurrency.all;
-
-                              final selectedAtIndex =
-                              items.indexOf(_displaySettingsViewModel.fiatCurrency);
-
-                              await showPopUp<void>(
-                                context: context,
-                                builder: (_) => Picker(
-                                  items: items,
-                                  selectedAtIndex: selectedAtIndex,
-                                  mainAxisAlignment: MainAxisAlignment.start,
-                                  onItemSelected: (FiatCurrency currency) {
-                                    _displaySettingsViewModel.setFiatCurrency(currency);
-                                  },
-                                  images: FiatCurrency.all
-                                      .map((e) => Image.asset("assets/images/flags/${e.countryCode}.png"))
-                                      .toList(),
-                                  hintText: S.of(context).search_currency,
-                                  isGridView: true,
-                                  matchingCriteria: (FiatCurrency currency, String searchText) {
-                                    return currency.title.toLowerCase().contains(searchText) ||
-                                        currency.fullName.toLowerCase().contains(searchText);
-                                  },
-                                  isSeparated: false,
-
-                                ),
-                              );
-                            }),
+                            onTap: () => FiatCurrencyPickerSheet.show(
+                                  context: context,
+                                  selected: _displaySettingsViewModel.fiatCurrency,
+                                  onSelected: _displaySettingsViewModel.setFiatCurrency,
+                                )),
                       ListItemSelector(
                           keyValue: "display_settings_language",
                           label: S.of(context).settings_change_language,