desktop exchange flow styling and choose addresses from addressbook functionality

lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_1.dart

@@ -2,10 +2,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/models/exchange/incomplete_exchange.dart';
 import 'package:stackwallet/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart';
 import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_item.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
 import 'package:stackwallet/widgets/desktop/primary_button.dart';
 import 'package:stackwallet/widgets/desktop/secondary_button.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
@@ -97,8 +100,24 @@ class DesktopStep1 extends ConsumerWidget {
                 child: PrimaryButton(
                   label: "Next",
                   buttonHeight: ButtonHeight.l,
-                  onPressed: () {
+                  onPressed: () async {
-                    // todo
+                    await showDialog<void>(
+                      context: context,
+                      barrierColor: Colors.transparent,
+                      builder: (context) {
+                        return DesktopDialog(
+                          maxWidth: 720,
+                          maxHeight: double.infinity,
+                          child: StepScaffold(
+                            step: 2,
+                            model: model,
+                            body: DesktopStep2(
+                              model: model,
+                            ),
+                          ),
+                        );
+                      },
+                    );
                   },
                 ),
               ),

lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart

@@ -2,10 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:stackwallet/models/exchange/incomplete_exchange.dart';
-import 'package:stackwallet/pages/address_book_views/address_book_view.dart';
-import 'package:stackwallet/pages/address_book_views/subviews/contact_popup.dart';
 import 'package:stackwallet/pages/exchange_view/choose_from_stack_view.dart';
-import 'package:stackwallet/providers/exchange/exchange_flow_is_active_state_provider.dart';
+import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/sub_widgets/address_book_address_chooser/address_book_address_chooser.dart';
 import 'package:stackwallet/providers/exchange/exchange_send_from_wallet_id_provider.dart';
 import 'package:stackwallet/providers/global/wallets_provider.dart';
 import 'package:stackwallet/utilities/clipboard_interface.dart';
@@ -24,6 +22,10 @@ import 'package:stackwallet/widgets/rounded_white_container.dart';
 import 'package:stackwallet/widgets/stack_text_field.dart';
 import 'package:stackwallet/widgets/textfield_icon_button.dart';
 
+import '../../../../models/contact_address_entry.dart';
+import '../../../../widgets/desktop/desktop_dialog.dart';
+import '../../../../widgets/desktop/desktop_dialog_close_button.dart';
+
 class DesktopStep2 extends ConsumerStatefulWidget {
   const DesktopStep2({
     Key? key,
@@ -105,42 +107,96 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
     }
   }
 
-  void selectRecipientFromAddressBook() {
+  void selectRecipientFromAddressBook() async {
-    ref.read(exchangeFlowIsActiveStateProvider.state).state = true;
+    final coin = coinFromTickerCaseInsensitive(
-    Navigator.of(context)
+      model.receiveTicker,
-        .pushNamed(
-      AddressBookView.routeName,
-    )
-        .then((_) {
-      ref.read(exchangeFlowIsActiveStateProvider.state).state = false;
-
-      final address =
-          ref.read(exchangeFromAddressBookAddressStateProvider.state).state;
-      if (address.isNotEmpty) {
-        _toController.text = address;
-        model.recipientAddress = _toController.text;
-        ref.read(exchangeFromAddressBookAddressStateProvider.state).state = "";
-      }
-    });
-  }
-
-  void selectRefundFromAddressBook() {
-    ref.read(exchangeFlowIsActiveStateProvider.state).state = true;
-    Navigator.of(context)
-        .pushNamed(
-      AddressBookView.routeName,
-    )
-        .then(
-      (_) {
-        ref.read(exchangeFlowIsActiveStateProvider.state).state = false;
-        final address =
-            ref.read(exchangeFromAddressBookAddressStateProvider.state).state;
-        if (address.isNotEmpty) {
-          _refundController.text = address;
-          model.refundAddress = _refundController.text;
-        }
-      },
     );
+
+    final entry = await showDialog<ContactAddressEntry?>(
+      context: context,
+      barrierColor: Colors.transparent,
+      builder: (context) => DesktopDialog(
+        maxWidth: 720,
+        maxHeight: 670,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: 32,
+                  ),
+                  child: Text(
+                    "Address book",
+                    style: STextStyles.desktopH3(context),
+                  ),
+                ),
+                const DesktopDialogCloseButton(),
+              ],
+            ),
+            Expanded(
+              child: AddressBookAddressChooser(
+                coin: coin,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    if (entry != null) {
+      _toController.text = entry.address;
+      model.recipientAddress = entry.address;
+      setState(() {});
+    }
+  }
+
+  void selectRefundFromAddressBook() async {
+    final coin = coinFromTickerCaseInsensitive(
+      model.sendTicker,
+    );
+
+    final entry = await showDialog<ContactAddressEntry?>(
+      context: context,
+      barrierColor: Colors.transparent,
+      builder: (context) => DesktopDialog(
+        maxWidth: 720,
+        maxHeight: 670,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(
+                    left: 32,
+                  ),
+                  child: Text(
+                    "Address book",
+                    style: STextStyles.desktopH3(context),
+                  ),
+                ),
+                const DesktopDialogCloseButton(),
+              ],
+            ),
+            Expanded(
+              child: AddressBookAddressChooser(
+                coin: coin,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    if (entry != null) {
+      _refundController.text = entry.address;
+      model.refundAddress = entry.address;
+      setState(() {});
+    }
   }
 
   @override
@@ -198,10 +254,12 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
   @override
   Widget build(BuildContext context) {
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         Text(
           "Enter exchange details",
           style: STextStyles.desktopTextMedium(context),
+          textAlign: TextAlign.center,
         ),
         const SizedBox(
           height: 8,
@@ -209,6 +267,7 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
         Text(
           "Enter your recipient and refund addresses",
           style: STextStyles.desktopTextExtraExtraSmall(context),
+          textAlign: TextAlign.center,
         ),
         const SizedBox(
           height: 20,
@@ -231,7 +290,7 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
           ],
         ),
         const SizedBox(
-          height: 4,
+          height: 10,
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(
@@ -321,9 +380,10 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
           ),
         ),
         const SizedBox(
-          height: 6,
+          height: 10,
         ),
         RoundedWhiteContainer(
+          borderColor: Theme.of(context).extension<StackColors>()!.background,
           child: Text(
             "This is the wallet where your ${model.receiveTicker.toUpperCase()} will be sent to.",
             style: STextStyles.desktopTextExtraExtraSmall(context),
@@ -350,7 +410,7 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
           ],
         ),
         const SizedBox(
-          height: 4,
+          height: 10,
         ),
         ClipRRect(
           borderRadius: BorderRadius.circular(
@@ -380,6 +440,7 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
               "Enter ${model.sendTicker.toUpperCase()} refund address",
               _refundFocusNode,
               context,
+              desktopMed: true,
             ).copyWith(
               contentPadding: const EdgeInsets.only(
                 left: 16,
@@ -441,7 +502,7 @@ class _DesktopStep2State extends ConsumerState<DesktopStep2> {
           ),
         ),
         const SizedBox(
-          height: 6,
+          height: 10,
         ),
         RoundedWhiteContainer(
           borderColor: Theme.of(context).extension<StackColors>()!.background,