desktop exchange coin selection ui

lib/pages/exchange_view/exchange_coin_selection/fixed_rate_pair_coin_selection_view.dart

@@ -8,6 +8,8 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/utilities/util.dart';
+import 'package:stackwallet/widgets/conditional_parent.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -16,8 +18,6 @@ import 'package:stackwallet/widgets/stack_text_field.dart';
 import 'package:stackwallet/widgets/textfield_icon_button.dart';
 import 'package:tuple/tuple.dart';
 
-import 'package:stackwallet/utilities/util.dart';
-
 class FixedRateMarketPairCoinSelectionView extends ConsumerStatefulWidget {
   const FixedRateMarketPairCoinSelectionView({
     Key? key,
@@ -120,8 +120,13 @@ class _FixedRateMarketPairCoinSelectionViewState
 
   @override
   Widget build(BuildContext context) {
+    final isDesktop = Util.isDesktop;
+    return ConditionalParent(
+      condition: !isDesktop,
+      builder: (child) {
         return Scaffold(
-      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
+          backgroundColor:
+              Theme.of(context).extension<StackColors>()!.background,
           appBar: AppBar(
             leading: AppBarBackButton(
               onPressed: () async {
@@ -143,9 +148,14 @@ class _FixedRateMarketPairCoinSelectionViewState
             padding: const EdgeInsets.symmetric(
               horizontal: 16,
             ),
+            child: child,
+          ),
+        );
+      },
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          if (!isDesktop)
             const SizedBox(
               height: 16,
             ),
@@ -208,7 +218,8 @@ class _FixedRateMarketPairCoinSelectionViewState
           const SizedBox(
             height: 12,
           ),
-            Builder(builder: (context) {
+          Flexible(
+            child: Builder(builder: (context) {
               final items = _markets
                   .where((e) => Coin.values
                       .where((coin) =>
@@ -221,6 +232,7 @@ class _FixedRateMarketPairCoinSelectionViewState
                 padding: const EdgeInsets.all(0),
                 child: ListView.builder(
                   shrinkWrap: true,
+                  primary: isDesktop ? false : null,
                   itemCount: items.length,
                   itemBuilder: (builderContext, index) {
                     final String ticker =
@@ -282,6 +294,7 @@ class _FixedRateMarketPairCoinSelectionViewState
                 ),
               );
             }),
+          ),
           const SizedBox(
             height: 20,
           ),
@@ -297,6 +310,7 @@ class _FixedRateMarketPairCoinSelectionViewState
               padding: const EdgeInsets.all(0),
               child: ListView.builder(
                 shrinkWrap: true,
+                primary: isDesktop ? false : null,
                 itemCount: _markets.length,
                 itemBuilder: (builderContext, index) {
                   final String ticker =
@@ -360,7 +374,6 @@ class _FixedRateMarketPairCoinSelectionViewState
           ),
         ],
       ),
-      ),
     );
   }
 }

lib/pages/exchange_view/exchange_coin_selection/floating_rate_currency_selection_view.dart

@@ -6,6 +6,8 @@ import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/utilities/util.dart';
+import 'package:stackwallet/widgets/conditional_parent.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
@@ -13,8 +15,6 @@ 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 'package:stackwallet/utilities/util.dart';
-
 class FloatingRateCurrencySelectionView extends StatefulWidget {
   const FloatingRateCurrencySelectionView({
     Key? key,
@@ -76,8 +76,13 @@ class _FloatingRateCurrencySelectionViewState
 
   @override
   Widget build(BuildContext context) {
+    final isDesktop = Util.isDesktop;
+    return ConditionalParent(
+      condition: !isDesktop,
+      builder: (child) {
         return Scaffold(
-      backgroundColor: Theme.of(context).extension<StackColors>()!.background,
+          backgroundColor:
+              Theme.of(context).extension<StackColors>()!.background,
           appBar: AppBar(
             leading: AppBarBackButton(
               onPressed: () async {
@@ -99,9 +104,15 @@ class _FloatingRateCurrencySelectionViewState
             padding: const EdgeInsets.symmetric(
               horizontal: 16,
             ),
+            child: child,
+          ),
+        );
+      },
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: isDesktop ? MainAxisSize.min : MainAxisSize.max,
         children: [
+          if (!isDesktop)
             const SizedBox(
               height: 16,
             ),
@@ -110,8 +121,8 @@ class _FloatingRateCurrencySelectionViewState
               Constants.size.circularBorderRadius,
             ),
             child: TextField(
-                autocorrect: Util.isDesktop ? false : true,
+              autocorrect: !isDesktop,
-                enableSuggestions: Util.isDesktop ? false : true,
+              enableSuggestions: !isDesktop,
               controller: _searchController,
               focusNode: _searchFocusNode,
               onChanged: filter,
@@ -120,6 +131,7 @@ class _FloatingRateCurrencySelectionViewState
                 "Search",
                 _searchFocusNode,
                 context,
+                desktopMed: isDesktop,
               ).copyWith(
                 prefixIcon: Padding(
                   padding: const EdgeInsets.symmetric(
@@ -165,7 +177,8 @@ class _FloatingRateCurrencySelectionViewState
           const SizedBox(
             height: 12,
           ),
-            Builder(builder: (context) {
+          Flexible(
+            child: Builder(builder: (context) {
               final items = _currencies
                   .where((e) => Coin.values
                       .where((coin) =>
@@ -177,6 +190,7 @@ class _FloatingRateCurrencySelectionViewState
                 padding: const EdgeInsets.all(0),
                 child: ListView.builder(
                   shrinkWrap: true,
+                  primary: isDesktop ? false : null,
                   itemCount: items.length,
                   itemBuilder: (builderContext, index) {
                     return Padding(
@@ -234,6 +248,7 @@ class _FloatingRateCurrencySelectionViewState
                 ),
               );
             }),
+          ),
           const SizedBox(
             height: 20,
           ),
@@ -249,6 +264,7 @@ class _FloatingRateCurrencySelectionViewState
               padding: const EdgeInsets.all(0),
               child: ListView.builder(
                 shrinkWrap: true,
+                primary: isDesktop ? false : null,
                 itemCount: _currencies.length,
                 itemBuilder: (builderContext, index) {
                   return Padding(
@@ -308,7 +324,6 @@ class _FloatingRateCurrencySelectionViewState
           ),
         ],
       ),
-      ),
     );
   }
 }

lib/pages/exchange_view/exchange_form.dart

@@ -39,6 +39,7 @@ import 'package:stackwallet/widgets/desktop/secondary_button.dart';
 import 'package:stackwallet/widgets/desktop/simple_desktop_dialog.dart';
 import 'package:stackwallet/widgets/loading_indicator.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
+import 'package:stackwallet/widgets/rounded_white_container.dart';
 import 'package:stackwallet/widgets/stack_dialog.dart';
 import 'package:tuple/tuple.dart';
 
@@ -410,7 +411,59 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
       }
     }).toList(growable: false);
 
-    final result = await Navigator.of(context).push(
+    final result = isDesktop
+        ? await showDialog<Currency?>(
+            context: context,
+            builder: (context) {
+              return DesktopDialog(
+                maxHeight: 700,
+                maxWidth: 580,
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Padding(
+                          padding: const EdgeInsets.only(
+                            left: 32,
+                          ),
+                          child: Text(
+                            "Choose a coin to exchange",
+                            style: STextStyles.desktopH3(context),
+                          ),
+                        ),
+                        const DesktopDialogCloseButton(),
+                      ],
+                    ),
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.only(
+                          left: 32,
+                          right: 32,
+                          bottom: 32,
+                        ),
+                        child: Row(
+                          children: [
+                            Expanded(
+                              child: RoundedWhiteContainer(
+                                padding: const EdgeInsets.all(16),
+                                borderColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .background,
+                                child: FloatingRateCurrencySelectionView(
+                                  currencies: tickers,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              );
+            })
+        : await Navigator.of(context).push(
             MaterialPageRoute<dynamic>(
               builder: (_) => FloatingRateCurrencySelectionView(
                 currencies: tickers,
@@ -490,11 +543,69 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
           .toList(growable: false);
     }
 
-    final result = await Navigator.of(context).push(
+    final result = isDesktop
+        ? await showDialog<String?>(
+            context: context,
+            builder: (context) {
+              return DesktopDialog(
+                maxHeight: 700,
+                maxWidth: 580,
+                child: Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Padding(
+                          padding: const EdgeInsets.only(
+                            left: 32,
+                          ),
+                          child: Text(
+                            "Choose a coin to exchange",
+                            style: STextStyles.desktopH3(context),
+                          ),
+                        ),
+                        const DesktopDialogCloseButton(),
+                      ],
+                    ),
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.only(
+                          left: 32,
+                          right: 32,
+                          bottom: 32,
+                        ),
+                        child: Row(
+                          children: [
+                            Expanded(
+                              child: RoundedWhiteContainer(
+                                padding: const EdgeInsets.all(16),
+                                borderColor: Theme.of(context)
+                                    .extension<StackColors>()!
+                                    .background,
+                                child: FixedRateMarketPairCoinSelectionView(
+                                  markets: marketsThatPairWithExcludedTicker,
+                                  currencies: ref
+                                      .read(
+                                          availableChangeNowCurrenciesProvider)
+                                      .currencies,
+                                  isFrom: excludedTicker != fromTicker,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              );
+            })
+        : await Navigator.of(context).push(
             MaterialPageRoute<dynamic>(
               builder: (_) => FixedRateMarketPairCoinSelectionView(
                 markets: marketsThatPairWithExcludedTicker,
-          currencies: ref.read(availableChangeNowCurrenciesProvider).currencies,
+                currencies:
+                    ref.read(availableChangeNowCurrenciesProvider).currencies,
                 isFrom: excludedTicker != fromTicker,
               ),
             ),