desktop exchange steps scaffolding

lib/pages/exchange_view/exchange_form.dart

@@ -19,12 +19,13 @@ import 'package:stackwallet/pages/exchange_view/sub_widgets/exchange_provider_op
 import 'package:stackwallet/pages/exchange_view/sub_widgets/exchange_rate_sheet.dart';
 import 'package:stackwallet/pages/exchange_view/sub_widgets/rate_type_toggle.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_1.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart';
 import 'package:stackwallet/providers/providers.dart';
 import 'package:stackwallet/services/exchange/change_now/change_now_exchange.dart';
 import 'package:stackwallet/services/exchange/simpleswap/simpleswap_exchange.dart';
 import 'package:stackwallet/utilities/assets.dart';
 import 'package:stackwallet/utilities/enums/coin_enum.dart';
-import 'package:stackwallet/utilities/enums/flush_bar_type.dart';
 import 'package:stackwallet/utilities/logger.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/utilities/theme/stack_colors.dart';
@@ -913,10 +914,14 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
           await showDialog<void>(
             context: context,
             builder: (context) {
-              return const DesktopDialog(
+              return DesktopDialog(
-                maxWidth: 700,
+                maxWidth: 720,
+                maxHeight: double.infinity,
                 child: StepScaffold(
-                  step: 1,
+                  step: 2,
+                  body: DesktopStep2(
+                    model: model,
+                  ),
                 ),
               );
             },
@@ -936,10 +941,14 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
           await showDialog<void>(
             context: context,
             builder: (context) {
-              return const DesktopDialog(
+              return DesktopDialog(
-                maxWidth: 700,
+                maxWidth: 720,
+                maxHeight: double.infinity,
                 child: StepScaffold(
-                  step: 0,
+                  step: 1,
+                  body: DesktopStep1(
+                    model: model,
+                  ),
                 ),
               );
             },

lib/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart

@@ -4,8 +4,13 @@ import 'package:stackwallet/utilities/text_styles.dart';
 import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
 
 class StepScaffold extends StatefulWidget {
-  const StepScaffold({Key? key, required this.step}) : super(key: key);
+  const StepScaffold({
+    Key? key,
+    required this.body,
+    required this.step,
+  }) : super(key: key);
 
+  final Widget body;
   final int step;
 
   @override
@@ -24,11 +29,13 @@ class _StepScaffoldState extends State<StepScaffold> {
   @override
   Widget build(BuildContext context) {
     return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
       children: [
         Row(
           children: [
             const AppBarBackButton(
               isCompact: true,
+              iconSize: 23,
             ),
             Text(
               "Exchange XXX to XXX",
@@ -37,17 +44,24 @@ class _StepScaffoldState extends State<StepScaffold> {
           ],
         ),
         const SizedBox(
-          height: 32,
+          height: 12,
         ),
-        DesktopExchangeStepsIndicator(
+        Padding(
-          currentStep: currentStep,
+          padding: const EdgeInsets.symmetric(
+            horizontal: 32,
+          ),
+          child: DesktopExchangeStepsIndicator(
+            currentStep: currentStep,
+          ),
         ),
         const SizedBox(
           height: 32,
         ),
-        Container(
+        Padding(
-          height: 200,
+          padding: const EdgeInsets.symmetric(
-          color: Colors.red,
+            horizontal: 32,
+          ),
+          child: widget.body,
         ),
       ],
     );

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

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/models/exchange/incomplete_exchange.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.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';
+
+class DesktopStep1 extends StatelessWidget {
+  const DesktopStep1({
+    Key? key,
+    required this.model,
+  }) : super(key: key);
+
+  final IncompleteExchangeModel model;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          "Confirm amount",
+          style: STextStyles.desktopTextMedium(context),
+        ),
+        const SizedBox(
+          height: 8,
+        ),
+        Text(
+          "Network fees and other exchange charges are included in the rate.",
+          style: STextStyles.desktopTextExtraExtraSmall(context),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        RoundedWhiteContainer(
+          borderColor: Theme.of(context).extension<StackColors>()!.background,
+          padding: const EdgeInsets.all(0),
+          child: Column(
+            children: [
+              const StepOneItem(
+                label: "Exchange",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You send",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You receive",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "Rate",
+                value: "lol",
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(
+            top: 20,
+            bottom: 32,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: SecondaryButton(
+                  label: "Back",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: Navigator.of(context).pop,
+                ),
+              ),
+              const SizedBox(
+                width: 16,
+              ),
+              Expanded(
+                child: PrimaryButton(
+                  label: "Next",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: () {
+                    // todo
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/models/exchange/incomplete_exchange.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/widgets/desktop/primary_button.dart';
+import 'package:stackwallet/widgets/desktop/secondary_button.dart';
+
+class DesktopStep2 extends StatelessWidget {
+  const DesktopStep2({
+    Key? key,
+    required this.model,
+  }) : super(key: key);
+
+  final IncompleteExchangeModel model;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          "Enter exchange details",
+          style: STextStyles.desktopTextMedium(context),
+        ),
+        const SizedBox(
+          height: 8,
+        ),
+        Text(
+          "Enter your recipient and refund addresses",
+          style: STextStyles.desktopTextExtraExtraSmall(context),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        //
+        Padding(
+          padding: const EdgeInsets.only(
+            top: 20,
+            bottom: 32,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: SecondaryButton(
+                  label: "Back",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: Navigator.of(context).pop,
+                ),
+              ),
+              const SizedBox(
+                width: 16,
+              ),
+              Expanded(
+                child: PrimaryButton(
+                  label: "Next",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: () {
+                    // todo
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.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';
+
+class DesktopStep3 extends StatelessWidget {
+  const DesktopStep3({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          "Confirm exchange details",
+          style: STextStyles.desktopTextMedium(context),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        RoundedWhiteContainer(
+          borderColor: Theme.of(context).extension<StackColors>()!.background,
+          padding: const EdgeInsets.all(0),
+          child: Column(
+            children: [
+              const StepOneItem(
+                label: "Exchange",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You send",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You receive",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "Rate",
+                value: "lol",
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(
+            top: 20,
+            bottom: 32,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: SecondaryButton(
+                  label: "Back",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: Navigator.of(context).pop,
+                ),
+              ),
+              const SizedBox(
+                width: 16,
+              ),
+              Expanded(
+                child: PrimaryButton(
+                  label: "Confirm",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: () {
+                    // todo
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.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';
+
+class DesktopStep4 extends StatelessWidget {
+  const DesktopStep4({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Text(
+          "Confirm amount",
+          style: STextStyles.desktopTextMedium(context),
+        ),
+        const SizedBox(
+          height: 8,
+        ),
+        Text(
+          "Network fees and other exchange charges are included in the rate.",
+          style: STextStyles.desktopTextExtraExtraSmall(context),
+        ),
+        const SizedBox(
+          height: 20,
+        ),
+        RoundedWhiteContainer(
+          borderColor: Theme.of(context).extension<StackColors>()!.background,
+          padding: const EdgeInsets.all(0),
+          child: Column(
+            children: [
+              const StepOneItem(
+                label: "Exchange",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You send",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "You receive",
+                value: "lol",
+              ),
+              Container(
+                height: 1,
+                color: Theme.of(context).extension<StackColors>()!.background,
+              ),
+              const StepOneItem(
+                label: "Rate",
+                value: "lol",
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(
+            top: 20,
+            bottom: 32,
+          ),
+          child: Row(
+            children: [
+              Expanded(
+                child: SecondaryButton(
+                  label: "Send from Stack Wallet",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: Navigator.of(context).pop,
+                ),
+              ),
+              const SizedBox(
+                width: 16,
+              ),
+              Expanded(
+                child: PrimaryButton(
+                  label: "Show QR code",
+                  buttonHeight: ButtonHeight.l,
+                  onPressed: () {
+                    // todo
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+
+class StepOneItem extends StatelessWidget {
+  const StepOneItem({
+    Key? key,
+    required this.label,
+    required this.value,
+    this.padding = const EdgeInsets.all(16),
+  }) : super(key: key);
+
+  final String label;
+  final String value;
+  final EdgeInsets padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            label,
+            style: STextStyles.desktopTextExtraExtraSmall(context),
+          ),
+          Text(
+            value,
+            style: STextStyles.desktopTextExtraExtraSmall(context).copyWith(
+              color: Theme.of(context).extension<StackColors>()!.textDark,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart

@@ -22,9 +22,9 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
     }
   }
 
-  static const double verticalSpacing = 4;
+  static const double verticalSpacing = 6;
   static const double horizontalSpacing = 16;
-  static const double barHeight = 6;
+  static const double barHeight = 4;
 
   @override
   Widget build(BuildContext context) {
@@ -35,16 +35,17 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
             children: [
               Text(
                 "Confirm amount",
-                style: STextStyles.desktopTextSmall(context).copyWith(
+                style: STextStyles.desktopTextExtraExtraSmall(context).copyWith(
-                  color: getColor(context, 0),
+                  color: getColor(context, 1),
                 ),
               ),
               const SizedBox(
                 height: verticalSpacing,
               ),
               RoundedContainer(
-                color: getColor(context, 0),
+                color: getColor(context, 1),
                 height: barHeight,
+                width: double.infinity,
               ),
             ],
           ),
@@ -57,16 +58,17 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
             children: [
               Text(
                 "Enter details",
-                style: STextStyles.desktopTextSmall(context).copyWith(
+                style: STextStyles.desktopTextExtraExtraSmall(context).copyWith(
-                  color: getColor(context, 1),
+                  color: getColor(context, 2),
                 ),
               ),
               const SizedBox(
                 height: verticalSpacing,
               ),
               RoundedContainer(
-                color: getColor(context, 1),
+                color: getColor(context, 2),
                 height: barHeight,
+                width: double.infinity,
               ),
             ],
           ),
@@ -79,16 +81,17 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
             children: [
               Text(
                 "Confirm details",
-                style: STextStyles.desktopTextSmall(context).copyWith(
+                style: STextStyles.desktopTextExtraExtraSmall(context).copyWith(
-                  color: getColor(context, 2),
+                  color: getColor(context, 3),
                 ),
               ),
               const SizedBox(
                 height: verticalSpacing,
               ),
               RoundedContainer(
-                color: getColor(context, 2),
+                color: getColor(context, 3),
                 height: barHeight,
+                width: double.infinity,
               ),
             ],
           ),
@@ -101,16 +104,17 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
             children: [
               Text(
                 "Complete exchange",
-                style: STextStyles.desktopTextSmall(context).copyWith(
+                style: STextStyles.desktopTextExtraExtraSmall(context).copyWith(
-                  color: getColor(context, 3),
+                  color: getColor(context, 4),
                 ),
               ),
               const SizedBox(
                 height: verticalSpacing,
               ),
               RoundedContainer(
-                color: getColor(context, 3),
+                color: getColor(context, 4),
                 height: barHeight,
+                width: double.infinity,
               ),
             ],
           ),