diff --git a/lib/pages/exchange_view/exchange_form.dart b/lib/pages/exchange_view/exchange_form.dart index 2d89c7660..148c74920 100644 --- a/lib/pages/exchange_view/exchange_form.dart +++ b/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 { await showDialog( context: context, builder: (context) { - return const DesktopDialog( - maxWidth: 700, + return DesktopDialog( + maxWidth: 720, + maxHeight: double.infinity, child: StepScaffold( - step: 1, + step: 2, + body: DesktopStep2( + model: model, + ), ), ); }, @@ -936,10 +941,14 @@ class _ExchangeFormState extends ConsumerState { await showDialog( context: context, builder: (context) { - return const DesktopDialog( - maxWidth: 700, + return DesktopDialog( + maxWidth: 720, + maxHeight: double.infinity, child: StepScaffold( - step: 0, + step: 1, + body: DesktopStep1( + model: model, + ), ), ); }, diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart index 09aea9dbf..62a293c27 100644 --- a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart +++ b/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 { @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 { ], ), const SizedBox( - height: 32, + height: 12, ), - DesktopExchangeStepsIndicator( - currentStep: currentStep, + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 32, + ), + child: DesktopExchangeStepsIndicator( + currentStep: currentStep, + ), ), const SizedBox( height: 32, ), - Container( - height: 200, - color: Colors.red, + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 32, + ), + child: widget.body, ), ], ); diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_1.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_1.dart new file mode 100644 index 000000000..7334cae05 --- /dev/null +++ b/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()!.background, + padding: const EdgeInsets.all(0), + child: Column( + children: [ + const StepOneItem( + label: "Exchange", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You send", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You receive", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.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 + }, + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart new file mode 100644 index 000000000..c9072cb76 --- /dev/null +++ b/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 + }, + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_3.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_3.dart new file mode 100644 index 000000000..1e2743ef5 --- /dev/null +++ b/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()!.background, + padding: const EdgeInsets.all(0), + child: Column( + children: [ + const StepOneItem( + label: "Exchange", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You send", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You receive", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.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 + }, + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_4.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_4.dart new file mode 100644 index 000000000..8604e7c23 --- /dev/null +++ b/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()!.background, + padding: const EdgeInsets.all(0), + child: Column( + children: [ + const StepOneItem( + label: "Exchange", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You send", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.background, + ), + const StepOneItem( + label: "You receive", + value: "lol", + ), + Container( + height: 1, + color: Theme.of(context).extension()!.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 + }, + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart b/lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart new file mode 100644 index 000000000..001383a17 --- /dev/null +++ b/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()!.textDark, + ), + ), + ], + ), + ); + } +} diff --git a/lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart b/lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart index 44831bb4b..ddcd2e6c4 100644 --- a/lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart +++ b/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( - color: getColor(context, 0), + style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( + 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( - color: getColor(context, 1), + style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( + 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( - color: getColor(context, 2), + style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( + 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( - color: getColor(context, 3), + style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( + color: getColor(context, 4), ), ), const SizedBox( height: verticalSpacing, ), RoundedContainer( - color: getColor(context, 3), + color: getColor(context, 4), height: barHeight, + width: double.infinity, ), ], ),