Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-12-23 11:59:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop exchange steps scaffolding

Browse source
This commit is contained in:
julian 2022-11-21 09:15:13 -06:00
parent 345ed958e0
commit b22b4195d6
8 changed files with 452 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
lib/pages/exchange_view/exchange_form.dart
View file

@ -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(
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<ExchangeForm> {
await showDialog<void>(
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,
),
),
);
},

28
lib/pages_desktop_specific/desktop_exchange/exchange_steps/step_scaffold.dart
View file

@ -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(
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,
),
],
);

104
lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_1.dart Normal file
View file

@ -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
},
),
),
],
),
),
],
);
}
}

66
lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_2.dart Normal file
View file

@ -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
},
),
),
],
),
),
],
);
}
}

91
lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_3.dart Normal file
View file

@ -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
},
),
),
],
),
),
],
);
}
}

98
lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/desktop_step_4.dart Normal file
View file

@ -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
},
),
),
],
),
),
],
);
}
}

38
lib/pages_desktop_specific/desktop_exchange/exchange_steps/subwidgets/step_one_item.dart Normal file
View file

@ -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,
),
),
],
),
);
}
}

32
lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart
View file

@ -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,
),
],
),