Improve bip 353 payment method selection modal

lib/entities/bip_353_record.dart

@@ -1,5 +1,6 @@
 import 'package:basic_utils/basic_utils.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/src/widgets/alert_with_picker_option.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:cw_core/crypto_currency.dart';
@@ -100,44 +101,41 @@ class Bip353Record {
     Map<String, String> addressMap,
   ) async {
     final entriesList = addressMap.entries.toList();
-    final displayItems = entriesList.map((e) {
-      final extendedKeyName = keyDisplayMap[e.key] ?? e.key;
-      final truncatedValue = _truncate(e.value, front: 6, back: 6);
-      return '$extendedKeyName :  $truncatedValue';
+    final List<Map<String, String>> displayItems = entriesList.map((entry) {
+      final originalKey = entry.key;
+      final originalValue = entry.value;
+
+      final extendedKeyName = keyDisplayMap[originalKey] ?? originalKey;
+      final truncatedValue = _truncate(originalValue, front: 6, back: 6);
+
+      return {
+        'displayKey': extendedKeyName,
+        'displayValue': truncatedValue,
+        'originalKey': originalKey,
+        'originalValue': originalValue,
+      };
     }).toList();
 
-    String? selectedDisplayItem;
+    String? selectedOriginalValue;
 
     if (context.mounted) {
       await showPopUp<void>(
         context: context,
         builder: (dialogContext) {
-          return Picker<String>(
-            selectedAtIndex: 0,
-            title:
-                '$bip353Name \n was successfully resolved to the following addresses, please choose one:',
-            items: displayItems,
-            onItemSelected: (String displayItem) {
-              selectedDisplayItem = displayItem;
+          return AlertWithPickerOption(
+            alertTitle:  S.of(context).multiple_addresses_detected + '\n$bip353Name',
+            alertTitleTextSize: 14,
+            alertSubtitle: S.of(context).please_choose_one + ':',
+            options: displayItems,
+            onOptionSelected: (Map<String, String> chosenItem) {
+              selectedOriginalValue = chosenItem['originalValue'];
             },
+            alertBarrierDismissible: true,
           );
         },
       );
     }
-
-    if (selectedDisplayItem == null) {
-      if (displayItems.isEmpty) {
-        return null;
-      }
-      selectedDisplayItem = displayItems[0];
-    }
-
-    final index = displayItems.indexOf(selectedDisplayItem!);
-    if (index < 0) {
-      return null;
-    }
-
-    return entriesList[index].value;
+    return selectedOriginalValue;
   }
 
   static String _truncate(String value, {int front = 6, int back = 6}) {

lib/src/widgets/alert_with_picker_option.dart

@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
+
+class AlertWithPickerOption extends BaseAlertDialog {
+  AlertWithPickerOption(
+      {required this.alertTitle,
+      required this.alertTitleTextSize,
+      required this.alertSubtitle,
+      required this.options,
+      this.onOptionSelected,
+      this.alertBarrierDismissible = true,
+      Key? key});
+
+  final String alertTitle;
+  final double alertTitleTextSize;
+  final String alertSubtitle;
+  final List<Map<String, String>> options;
+  final ValueChanged<Map<String, String>>? onOptionSelected;
+  final bool alertBarrierDismissible;
+
+  @override
+  String get titleText => alertTitle;
+
+  @override
+  double? get titleTextSize => alertTitleTextSize;
+
+  @override
+  String get contentText => alertSubtitle;
+
+  @override
+  bool get barrierDismissible => alertBarrierDismissible;
+
+  @override
+  Widget actionButtons(BuildContext context) => Container();
+
+  @override
+  bool get isBottomDividerExists => false;
+
+  @override
+  Widget content(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        const SizedBox(height: 16),
+        Text(
+          contentText,
+          textAlign: TextAlign.center,
+          style: TextStyle(
+              fontSize: 10,
+              fontWeight: FontWeight.w500,
+              fontFamily: 'Lato',
+              color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+              decoration: TextDecoration.none),
+        ),
+        const SizedBox(height: 4),
+        Container(
+          constraints: const BoxConstraints(maxHeight: 200),
+          child: ListView.separated(
+            shrinkWrap: true,
+            padding: EdgeInsets.zero,
+            separatorBuilder: (context, index) => const SizedBox(height: 8),
+            itemCount: options.length,
+            itemBuilder: (context, index) {
+              final item = options[index];
+              final displayKey = item['displayKey'] ?? '';
+              final displayValue = item['displayValue'] ?? '';
+              return GestureDetector(
+                onTap: () {
+                  onOptionSelected?.call(item);
+                  Navigator.of(context).pop();
+                },
+                child: Container(
+                  width: double.infinity,
+                  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(30),
+                      color: Theme.of(context).colorScheme.background),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        displayKey,
+                        style: TextStyle(
+                          fontSize: 12,
+                          fontFamily: 'Lato',
+                          color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                          decoration: TextDecoration.none,
+                        ),
+                      ),
+                      Row(
+                        children: [
+                          Text(
+                            displayValue,
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontFamily: 'Lato',
+                              color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                              decoration: TextDecoration.none,
+                            ),
+                          ),
+                          const SizedBox(width: 4),
+                          Icon(
+                            Icons.arrow_forward_ios,
+                            size: 18,
+                            color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/src/widgets/base_alert_dialog.dart

@@ -9,6 +9,8 @@ class BaseAlertDialog extends StatelessWidget {
 
   String? get titleText => '';
 
+  double? get titleTextSize => 20;
+
   String get contentText => '';
 
   String get leftActionButtonText => '';
@@ -46,7 +48,7 @@ class BaseAlertDialog extends StatelessWidget {
       titleText!,
       textAlign: TextAlign.center,
       style: TextStyle(
-        fontSize: 20,
+        fontSize: titleTextSize,
         fontFamily: 'Lato',
         fontWeight: FontWeight.w600,
         color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,

res/values/strings_ar.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": " ضوء مونيرو",
   "moonpay_alert_text": "يجب أن تكون قيمة المبلغ أكبر من أو تساوي ${minAmount} ${fiatCurrency}",
   "more_options": "المزيد من الخيارات",
+  "multiple_addresses_detected": "عناوين متعددة تم اكتشافها",
   "mweb_confirmed": "أكد MWEB",
   "mweb_unconfirmed": "غير مؤكد MWEB",
   "name": "ﻢﺳﺍ",
@@ -513,6 +514,7 @@
   "pin_number": "الرقم السري",
   "placeholder_contacts": "سيتم عرض جهات الاتصال الخاصة بك هنا",
   "placeholder_transactions": "سيتم عرض معاملاتك هنا",
+  "please_choose_one": "الرجاء اختيار واحد",
   "please_fill_totp": "يرجى ملء الرمز المكون من 8 أرقام الموجود على جهازك الآخر",
   "please_make_selection": "يرجى الأختيار لإنشاء أو استعادة محفظتك.",
   "please_reference_document": "يرجى الرجوع إلى الوثائق أدناه لمزيد من المعلومات.",

res/values/strings_bg.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Лека тема Monero",
   "moonpay_alert_text": "Сумата трябва да бъде най-малко ${minAmount} ${fiatCurrency}",
   "more_options": "Още настройки",
+  "multiple_addresses_detected": "Открити множество адреси",
   "mweb_confirmed": "Потвърден MWeb",
   "mweb_unconfirmed": "Непотвърден mweb",
   "name": "Име",
@@ -513,6 +514,7 @@
   "pin_number": "PIN код",
   "placeholder_contacts": "Вашите контакти ще се покажат тук",
   "placeholder_transactions": "Вашите транзакции ще се покажат тук",
+  "please_choose_one": "Моля, изберете един",
   "please_fill_totp": "Моля, попълнете 8-цифрения код на другото ви устройство",
   "please_make_selection": "Моля, изберете отдолу за създаване или възстановяване на портфейл.",
   "please_reference_document": "Моля, вижте документите по-долу за повече информация.",

res/values/strings_cs.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Světlé téma Monero",
   "moonpay_alert_text": "Částka musí být větší nebo rovna ${minAmount} ${fiatCurrency}",
   "more_options": "Více možností",
+  "multiple_addresses_detected": "Detekované více adres",
   "mweb_confirmed": "Potvrzený mweb",
   "mweb_unconfirmed": "Nepotvrzené mWeb",
   "name": "název",
@@ -513,6 +514,7 @@
   "pin_number": "Číslo PIN",
   "placeholder_contacts": "Vaše kontakty budou zobrazeny zde",
   "placeholder_transactions": "Vaše transakce budou zobrazeny zde",
+  "please_choose_one": "Vyberte si prosím jeden",
   "please_fill_totp": "Vyplňte prosím 8místný kód na vašem druhém zařízení",
   "please_make_selection": "Prosím vyberte si níže, jestli chcete vytvořit, nebo obnovit peněženku.",
   "please_reference_document": "Více informací naleznete v dokumentu níže.",

res/values/strings_de.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Monero Light-Thema",
   "moonpay_alert_text": "Der Wert des Betrags muss größer oder gleich ${minAmount} ${fiatCurrency} sein",
   "more_options": "Weitere Optionen",
+  "multiple_addresses_detected": "Mehrere Adressen erkannt",
   "mweb_confirmed": "Bestätigt MWeb",
   "mweb_unconfirmed": "Unbestätigter MWeb",
   "name": "Name",
@@ -513,6 +514,7 @@
   "pin_number": "PIN-Nummer",
   "placeholder_contacts": "Ihre Kontakte werden hier angezeigt",
   "placeholder_transactions": "Ihre Transaktionen werden hier angezeigt",
+  "please_choose_one": "Bitte wählen Sie einen",
   "please_fill_totp": "Bitte geben Sie den 8-stelligen Code ein, der auf Ihrem anderen Gerät vorhanden ist",
   "please_make_selection": "Bitte treffen Sie unten eine Auswahl zum Erstellen oder Wiederherstellen Ihrer Wallet.",
   "please_reference_document": "Bitte verweisen Sie auf die folgenden Dokumente, um weitere Informationen zu erhalten.",

res/values/strings_en.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Monero Light Theme",
   "moonpay_alert_text": "Value of the amount must be more or equal to ${minAmount} ${fiatCurrency}",
   "more_options": "More Options",
+  "multiple_addresses_detected": "Multiple addresses detected",
   "mweb_confirmed": "Confirmed MWEB",
   "mweb_unconfirmed": "Unconfirmed MWEB",
   "name": "Name",
@@ -514,6 +515,7 @@
   "pin_number": "PIN number",
   "placeholder_contacts": "Your contacts will be displayed here",
   "placeholder_transactions": "Your transactions will be displayed here",
+  "please_choose_one": "Please choose one",
   "please_fill_totp": "Please fill in the 8-digit code present on your other device",
   "please_make_selection": "Please make a selection below to create or recover your wallet.",
   "please_reference_document": "Please reference the documents below for more information.",

res/values/strings_es.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Tema ligero de Monero",
   "moonpay_alert_text": "El valor de la cantidad debe ser mayor o igual a ${minAmount} ${fiatCurrency}",
   "more_options": "Más Opciones",
+  "multiple_addresses_detected": "Múltiples direcciones detectadas",
   "mweb_confirmed": "Confirmado mweb",
   "mweb_unconfirmed": "Mweb no confirmado",
   "name": "Nombre",
@@ -514,6 +515,7 @@
   "pin_number": "Número PIN",
   "placeholder_contacts": "Tus contactos se mostrarán aquí",
   "placeholder_transactions": "Tus transacciones se mostrarán aquí",
+  "please_choose_one": "Elija uno",
   "please_fill_totp": "Completa el código de 8 dígitos presente en su otro dispositivo",
   "please_make_selection": "Selecciona a continuación para crear o recuperar su billetera.",
   "please_reference_document": "Consulta los documentos a continuación para obtener más información.",

res/values/strings_fr.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Thème de lumière Monero",
   "moonpay_alert_text": "Le montant doit être au moins égal à ${minAmount} ${fiatCurrency}",
   "more_options": "Plus d'options",
+  "multiple_addresses_detected": "Plusieurs adresses détectées",
   "mweb_confirmed": "Confirmé MWEB",
   "mweb_unconfirmed": "Mweb non confirmé",
   "name": "Nom",
@@ -513,6 +514,7 @@
   "pin_number": "Numéro PIN",
   "placeholder_contacts": "Vos contacts apparaîtront ici",
   "placeholder_transactions": "Vos transactions apparaîtront ici",
+  "please_choose_one": "Veuillez en choisir un",
   "please_fill_totp": "Veuillez renseigner le code à 8 chiffres affiché sur votre autre appareil",
   "please_make_selection": "Merci de faire un choix ci-dessous pour créer ou restaurer votre portefeuille (wallet).",
   "please_reference_document": "Veuillez vous référer aux documents ci-dessous pour plus d'informations.",

res/values/strings_ha.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Jigon Hasken Monero",
   "moonpay_alert_text": "Darajar adadin dole ne ya zama fiye ko daidai da ${minAmount} ${fiatCurrency}",
   "more_options": "Ƙarin Zaɓuɓɓuka",
+  "multiple_addresses_detected": "An gano adiresoshin da aka gano",
   "mweb_confirmed": "Tabbatar da Mweb",
   "mweb_unconfirmed": "Myconfired",
   "name": "Suna",
@@ -515,6 +516,7 @@
   "pin_number": "Lambar PIN",
   "placeholder_contacts": "Za a nuna lambobin sadarwar ku anan",
   "placeholder_transactions": "Za a nuna ma'amalolin ku anan",
+  "please_choose_one": "Da fatan za a zabi ɗaya",
   "please_fill_totp": "Da fatan za a cika lambar lambobi 8 da ke yanzu a kan sauran na'urarku",
   "please_make_selection": "Don Allah zaɓi ƙasa don ƙirƙira ko dawo da kwalinku.",
   "please_reference_document": "Da fatan za a nemi takaddun da ke ƙasa don ƙarin bayani.",

res/values/strings_hi.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "मोनेरो लाइट थीम",
   "moonpay_alert_text": "राशि का मूल्य अधिक है या करने के लिए बराबर होना चाहिए ${minAmount} ${fiatCurrency}",
   "more_options": "और विकल्प",
+  "multiple_addresses_detected": "कई पते का पता चला",
   "mweb_confirmed": "MWEB की पुष्टि की",
   "mweb_unconfirmed": "अपुष्ट MWEB",
   "name": "नाम",
@@ -505,15 +506,16 @@
   "paste": "पेस्ट करें",
   "pause_wallet_creation": "हेवन वॉलेट बनाने की क्षमता फिलहाल रुकी हुई है।",
   "payment_id": "भुगतान ID: ",
-  "Payment_was_received": "आपका भुगतान प्राप्त हो गया था।",
   "payment_was_received": "आपका भुगतान प्राप्त हुआ था।",
+  "Payment_was_received": "आपका भुगतान प्राप्त हो गया था।",
   "pending": " (अपूर्ण)",
   "percentageOf": "${amount} का",
   "pin_at_top": "शीर्ष पर ${token} पिन करें",
   "pin_is_incorrect": "पिन गलत है",
   "pin_number": "पिन नंबर",
   "placeholder_contacts": "आपके संपर्क यहां प्रदर्शित होंगे",
   "placeholder_transactions": "आपके लेनदेन यहां प्रदर्शित होंगे",
+  "please_choose_one": "एक का चयन करें",
   "please_fill_totp": "कृपया अपने दूसरे डिवाइस पर मौजूद 8 अंकों का कोड भरें",
   "please_make_selection": "कृपया नीचे चयन करें अपना बटुआ बनाएं या पुनर्प्राप्त करें.",
   "please_reference_document": "कृपया अधिक जानकारी के लिए नीचे दिए गए दस्तावेज़ देखें।",

res/values/strings_hr.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Monero lagana tema",
   "moonpay_alert_text": "Vrijednost iznosa mora biti veća ili jednaka ${minAmount} ${fiatCurrency}",
   "more_options": "Više opcija",
+  "multiple_addresses_detected": "Otkrivene više adresa",
   "mweb_confirmed": "Potvrđen MWeb",
   "mweb_unconfirmed": "Nepotvrđeni mWeb",
   "name": "Ime",
@@ -513,6 +514,7 @@
   "pin_number": "PIN broj",
   "placeholder_contacts": "Vaši će kontakti biti prikazani ovdje",
   "placeholder_transactions": "Vaše će transakcije biti prikazane ovdje",
+  "please_choose_one": "Molimo odaberite jedan",
   "please_fill_totp": "Unesite 8-znamenkasti kod koji se nalazi na vašem drugom uređaju",
   "please_make_selection": "Molimo odaberite opcije niže za izradu novog novčanika ili za oporavak postojećeg.",
   "please_reference_document": "Molimo pogledajte dokumente ispod za više informacija.",

res/values/strings_hy.arb

@@ -437,6 +437,7 @@
   "monero_light_theme": "Monero պայծառ տեսք",
   "moonpay_alert_text": "Գումարի արժեքը պետք է լինի հավասար կամ ավելի քան ${minAmount} ${fiatCurrency}",
   "more_options": "Այլ տարբերակներ",
+  "multiple_addresses_detected": "Հայտնաբերվել են բազմաթիվ հասցեներ",
   "mweb_confirmed": "Հաստատված MWEB",
   "mweb_unconfirmed": "Չկարգավորված Mweb",
   "name": "Անուն",
@@ -513,6 +514,7 @@
   "pin_number": "Պին-կոդ",
   "placeholder_contacts": "Ձեր կոնտակտները այստեղ կցուցադրվեն",
   "placeholder_transactions": "Ձեր գործարքները այստեղ կցուցադրվեն",
+  "please_choose_one": "Խնդրում ենք ընտրել մեկը",
   "please_fill_totp": "Խնդրում ենք լրացնել 8-նիշյա կոդը, որը կա ձեր այլ սարքի վրա",
   "please_make_selection": "Խնդրում ենք ընտրություն կատարել ներքևում ձեր դրամապանակը ստեղծելու կամ վերականգնելու համար",
   "please_reference_document": "Խնդրում ենք դիտել ներքևի փաստաթղթերը ավելի շատ տեղեկատվության համար",