Improve bip 353 payment method selection modal (#2052)

* update selection modal UI

* localisation

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,