From 3c47190494a554d4414cb6b3ae8b0ee7e6dae099 Mon Sep 17 00:00:00 2001
From: julian <julian@cypherstack.com>
Date: Sun, 25 Sep 2022 14:23:12 -0600
Subject: [PATCH] new/restore desktop layout fixes
---
.../create_or_restore_wallet_view.dart | 7 +-
.../name_your_wallet_view.dart | 10 +-
.../new_wallet_recovery_phrase_view.dart | 414 +++++++++---------
...w_wallet_recovery_phrase_warning_view.dart | 23 +-
.../restore_options_view.dart | 14 +-
.../restore_wallet_view.dart | 13 +-
.../verify_recovery_phrase_view.dart | 8 +
7 files changed, 267 insertions(+), 222 deletions(-)
diff --git a/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart b/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart
index ffd32479d..b3be99e25 100644
--- a/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart
+++ b/lib/pages/add_wallet_views/create_or_restore_wallet_view/create_or_restore_wallet_view.dart
@@ -37,9 +37,11 @@ class CreateOrRestoreWalletView extends StatelessWidget {
body: SizedBox(
width: 480,
child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
+ const Spacer(
+ flex: 10,
+ ),
CreateRestoreWalletTitle(
coin: coin,
isDesktop: isDesktop,
@@ -67,6 +69,9 @@ class CreateOrRestoreWalletView extends StatelessWidget {
coin: coin,
isDesktop: isDesktop,
),
+ const Spacer(
+ flex: 15,
+ ),
],
),
),
diff --git a/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart b/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart
index cff9fd2cf..f7dbe3d33 100644
--- a/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart
+++ b/lib/pages/add_wallet_views/name_your_wallet_view/name_your_wallet_view.dart
@@ -151,6 +151,10 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
crossAxisAlignment:
isDesktop ? CrossAxisAlignment.center : CrossAxisAlignment.stretch,
children: [
+ if (isDesktop)
+ const Spacer(
+ flex: 10,
+ ),
if (!isDesktop)
const Spacer(
flex: 1,
@@ -163,7 +167,7 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
height: 100,
),
SizedBox(
- height: isDesktop ? 24 : 16,
+ height: isDesktop ? 0 : 16,
),
Text(
"Name your ${coin.prettyName} wallet",
@@ -358,6 +362,10 @@ class _NameYourWalletViewState extends ConsumerState<NameYourWalletView> {
),
),
),
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
],
);
}
diff --git a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart
index 207451569..9ef8881c9 100644
--- a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart
+++ b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_view/new_wallet_recovery_phrase_view.dart
@@ -90,224 +90,230 @@ class _NewWalletRecoveryPhraseViewState
Widget build(BuildContext context) {
debugPrint("BUILD: $runtimeType");
return WillPopScope(
- onWillPop: onWillPop,
- child: MasterScaffold(
- isDesktop: isDesktop,
- appBar: isDesktop
- ? DesktopAppBar(
- isCompactHeight: false,
- leading: AppBarBackButton(
- onPressed: () async {
- await delete();
+ onWillPop: onWillPop,
+ child: MasterScaffold(
+ isDesktop: isDesktop,
+ appBar: isDesktop
+ ? DesktopAppBar(
+ isCompactHeight: false,
+ leading: AppBarBackButton(
+ onPressed: () async {
+ await delete();
- if (mounted) {
- Navigator.of(context).popUntil(
- ModalRoute.withName(
- NewWalletRecoveryPhraseWarningView.routeName,
- ),
- );
- }
- // Navigator.of(context).pop();
- },
- ),
- trailing: ExitToMyStackButton(
- onPressed: () async {
- await delete();
- if (mounted) {
- Navigator.of(context).popUntil(
- ModalRoute.withName(DesktopHomeView.routeName),
- );
- }
- },
- ),
- )
- : AppBar(
- leading: AppBarBackButton(
- onPressed: () async {
- await delete();
+ if (mounted) {
+ Navigator.of(context).popUntil(
+ ModalRoute.withName(
+ NewWalletRecoveryPhraseWarningView.routeName,
+ ),
+ );
+ }
+ // Navigator.of(context).pop();
+ },
+ ),
+ trailing: ExitToMyStackButton(
+ onPressed: () async {
+ await delete();
+ if (mounted) {
+ Navigator.of(context).popUntil(
+ ModalRoute.withName(DesktopHomeView.routeName),
+ );
+ }
+ },
+ ),
+ )
+ : AppBar(
+ leading: AppBarBackButton(
+ onPressed: () async {
+ await delete();
- if (mounted) {
- Navigator.of(context).popUntil(
- ModalRoute.withName(
- NewWalletRecoveryPhraseWarningView.routeName,
- ),
- );
- }
- },
- ),
- actions: [
- Padding(
- padding: const EdgeInsets.all(10),
- child: AspectRatio(
- aspectRatio: 1,
- child: AppBarIconButton(
+ if (mounted) {
+ Navigator.of(context).popUntil(
+ ModalRoute.withName(
+ NewWalletRecoveryPhraseWarningView.routeName,
+ ),
+ );
+ }
+ },
+ ),
+ actions: [
+ Padding(
+ padding: const EdgeInsets.all(10),
+ child: AspectRatio(
+ aspectRatio: 1,
+ child: AppBarIconButton(
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .background,
+ shadows: const [],
+ icon: SvgPicture.asset(
+ Assets.svg.copy,
+ width: 24,
+ height: 24,
color: Theme.of(context)
.extension<StackColors>()!
- .background,
- shadows: const [],
- icon: SvgPicture.asset(
- Assets.svg.copy,
- width: 24,
- height: 24,
- color: Theme.of(context)
- .extension<StackColors>()!
- .topNavIconPrimary,
- ),
- onPressed: () async {
- await _copy();
- },
+ .topNavIconPrimary,
),
- ),
- ),
- ],
- ),
- body: Container(
- color: Theme.of(context).extension<StackColors>()!.background,
- width: isDesktop ? 600 : null,
- child: Padding(
- padding: isDesktop
- ? const EdgeInsets.all(0)
- : const EdgeInsets.all(16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- if (!isDesktop)
- const SizedBox(
- height: 4,
- ),
- if (!isDesktop)
- Text(
- _manager.walletName,
- textAlign: TextAlign.center,
- style: STextStyles.label(context).copyWith(
- fontSize: 12,
- ),
- ),
- SizedBox(
- height: isDesktop ? 24 : 4,
- ),
- Text(
- "Recovery Phrase",
- textAlign: TextAlign.center,
- style: isDesktop
- ? STextStyles.desktopH2(context)
- : STextStyles.pageTitleH1(context),
- ),
- const SizedBox(
- height: 16,
- ),
- Container(
- decoration: BoxDecoration(
- color: isDesktop
- ? Theme.of(context)
- .extension<StackColors>()!
- .background
- : Theme.of(context).extension<StackColors>()!.popupBG,
- borderRadius: BorderRadius.circular(
- Constants.size.circularBorderRadius),
- ),
- child: Padding(
- padding: isDesktop
- ? const EdgeInsets.all(0)
- : const EdgeInsets.all(12),
- child: Text(
- "Please write down your recovery phrase in the correct order and save it to keep your funds secure. You will also be asked to verify the words on the next screen.",
- textAlign: TextAlign.center,
- style: isDesktop
- ? STextStyles.desktopSubtitleH2(context)
- : STextStyles.label(context).copyWith(
- color: Theme.of(context)
- .extension<StackColors>()!
- .accentColorDark),
- ),
- ),
- ),
- SizedBox(
- height: isDesktop ? 21 : 8,
- ),
- if (!isDesktop)
- Expanded(
- child: SingleChildScrollView(
- child: MnemonicTable(
- words: _mnemonic,
- isDesktop: isDesktop,
- ),
- ),
- ),
- if (isDesktop)
- MnemonicTable(
- words: _mnemonic,
- isDesktop: isDesktop,
- ),
- SizedBox(
- height: isDesktop ? 24 : 16,
- ),
- if (isDesktop)
- SizedBox(
- height: 70,
- child: TextButton(
onPressed: () async {
await _copy();
},
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- SvgPicture.asset(
- Assets.svg.copy,
- width: 20,
- height: 20,
- ),
- const SizedBox(
- width: 10,
- ),
- Text(
- "Copy to clipboard",
- style: STextStyles.desktopButtonSecondaryEnabled(
- context),
- )
- ],
- ),
- ),
- ),
- if (isDesktop)
- const SizedBox(
- height: 16,
- ),
- ConstrainedBox(
- constraints: BoxConstraints(
- minHeight: isDesktop ? 70 : 0,
- ),
- child: TextButton(
- onPressed: () async {
- final int next = Random().nextInt(_mnemonic.length);
- ref
- .read(verifyMnemonicWordIndexStateProvider.state)
- .update((state) => next);
-
- ref
- .read(verifyMnemonicCorrectWordStateProvider.state)
- .update((state) => _mnemonic[next]);
-
- unawaited(Navigator.of(context).pushNamed(
- VerifyRecoveryPhraseView.routeName,
- arguments: Tuple2(_manager, _mnemonic),
- ));
- },
- style: Theme.of(context)
- .extension<StackColors>()!
- .getPrimaryEnabledButtonColor(context),
- child: Text(
- "I saved my recovery phrase",
- style: isDesktop
- ? STextStyles.desktopButtonEnabled(context)
- : STextStyles.button(context),
),
),
),
],
),
+ body: Container(
+ color: Theme.of(context).extension<StackColors>()!.background,
+ width: isDesktop ? 600 : null,
+ child: Padding(
+ padding:
+ isDesktop ? const EdgeInsets.all(0) : const EdgeInsets.all(16),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ if (isDesktop)
+ const Spacer(
+ flex: 10,
+ ),
+ if (!isDesktop)
+ const SizedBox(
+ height: 4,
+ ),
+ if (!isDesktop)
+ Text(
+ _manager.walletName,
+ textAlign: TextAlign.center,
+ style: STextStyles.label(context).copyWith(
+ fontSize: 12,
+ ),
+ ),
+ SizedBox(
+ height: isDesktop ? 24 : 4,
+ ),
+ Text(
+ "Recovery Phrase",
+ textAlign: TextAlign.center,
+ style: isDesktop
+ ? STextStyles.desktopH2(context)
+ : STextStyles.pageTitleH1(context),
+ ),
+ const SizedBox(
+ height: 16,
+ ),
+ Container(
+ decoration: BoxDecoration(
+ color: isDesktop
+ ? Theme.of(context).extension<StackColors>()!.background
+ : Theme.of(context).extension<StackColors>()!.popupBG,
+ borderRadius: BorderRadius.circular(
+ Constants.size.circularBorderRadius),
+ ),
+ child: Padding(
+ padding: isDesktop
+ ? const EdgeInsets.all(0)
+ : const EdgeInsets.all(12),
+ child: Text(
+ "Please write down your recovery phrase in the correct order and save it to keep your funds secure. You will also be asked to verify the words on the next screen.",
+ textAlign: TextAlign.center,
+ style: isDesktop
+ ? STextStyles.desktopSubtitleH2(context)
+ : STextStyles.label(context).copyWith(
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .accentColorDark),
+ ),
+ ),
+ ),
+ SizedBox(
+ height: isDesktop ? 21 : 8,
+ ),
+ if (!isDesktop)
+ Expanded(
+ child: SingleChildScrollView(
+ child: MnemonicTable(
+ words: _mnemonic,
+ isDesktop: isDesktop,
+ ),
+ ),
+ ),
+ if (isDesktop)
+ MnemonicTable(
+ words: _mnemonic,
+ isDesktop: isDesktop,
+ ),
+ SizedBox(
+ height: isDesktop ? 24 : 16,
+ ),
+ if (isDesktop)
+ SizedBox(
+ height: 70,
+ child: TextButton(
+ onPressed: () async {
+ await _copy();
+ },
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ SvgPicture.asset(
+ Assets.svg.copy,
+ width: 20,
+ height: 20,
+ ),
+ const SizedBox(
+ width: 10,
+ ),
+ Text(
+ "Copy to clipboard",
+ style: STextStyles.desktopButtonSecondaryEnabled(
+ context),
+ )
+ ],
+ ),
+ ),
+ ),
+ if (isDesktop)
+ const SizedBox(
+ height: 16,
+ ),
+ ConstrainedBox(
+ constraints: BoxConstraints(
+ minHeight: isDesktop ? 70 : 0,
+ ),
+ child: TextButton(
+ onPressed: () async {
+ final int next = Random().nextInt(_mnemonic.length);
+ ref
+ .read(verifyMnemonicWordIndexStateProvider.state)
+ .update((state) => next);
+
+ ref
+ .read(verifyMnemonicCorrectWordStateProvider.state)
+ .update((state) => _mnemonic[next]);
+
+ unawaited(Navigator.of(context).pushNamed(
+ VerifyRecoveryPhraseView.routeName,
+ arguments: Tuple2(_manager, _mnemonic),
+ ));
+ },
+ style: Theme.of(context)
+ .extension<StackColors>()!
+ .getPrimaryEnabledButtonColor(context),
+ child: Text(
+ "I saved my recovery phrase",
+ style: isDesktop
+ ? STextStyles.desktopButtonEnabled(context)
+ : STextStyles.button(context),
+ ),
+ ),
+ ),
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
+ ],
),
),
- ));
+ ),
+ ),
+ );
}
}
diff --git a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
index 603e5cca1..9aa9dc341 100644
--- a/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
+++ b/lib/pages/add_wallet_views/new_wallet_recovery_phrase_warning_view/new_wallet_recovery_phrase_warning_view.dart
@@ -79,9 +79,14 @@ class _NewWalletRecoveryPhraseWarningViewState
? CrossAxisAlignment.center
: CrossAxisAlignment.stretch,
children: [
- const SizedBox(
- height: 4,
- ),
+ if (isDesktop)
+ const Spacer(
+ flex: 10,
+ ),
+ if (!isDesktop)
+ const SizedBox(
+ height: 4,
+ ),
if (!isDesktop)
Text(
walletName,
@@ -90,9 +95,10 @@ class _NewWalletRecoveryPhraseWarningViewState
fontSize: 12,
),
),
- const SizedBox(
- height: 4,
- ),
+ if (!isDesktop)
+ const SizedBox(
+ height: 4,
+ ),
Text(
"Recovery Phrase",
textAlign: TextAlign.center,
@@ -130,6 +136,7 @@ class _NewWalletRecoveryPhraseWarningViewState
builder: (_, ref, __) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
+ mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {
@@ -291,6 +298,10 @@ class _NewWalletRecoveryPhraseWarningViewState
},
),
),
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
],
),
),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart
index 4ae72a56a..7d658e87f 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart
+++ b/lib/pages/add_wallet_views/restore_wallet_view/restore_options_view/restore_options_view.dart
@@ -263,10 +263,9 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- if (!isDesktop)
- const Spacer(
- flex: 1,
- ),
+ Spacer(
+ flex: isDesktop ? 10 : 1,
+ ),
if (!isDesktop)
Image(
image: AssetImage(
@@ -275,7 +274,7 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
height: 100,
),
SizedBox(
- height: isDesktop ? 24 : 16,
+ height: isDesktop ? 0 : 16,
),
Text(
"Restore options",
@@ -420,6 +419,11 @@ class _RestoreOptionsViewState extends ConsumerState<RestoreOptionsView> {
isDesktop: isDesktop,
onPressed: _nextEnabled ? nextPressed : null,
),
+
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
],
),
),
diff --git a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart b/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
index 8a88e5237..b7134293d 100644
--- a/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
+++ b/lib/pages/add_wallet_views/restore_wallet_view/restore_wallet_view.dart
@@ -617,11 +617,11 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
- mainAxisAlignment: isDesktop
- ? MainAxisAlignment.spaceAround
- : MainAxisAlignment.start,
children: [
- if (isDesktop) const Spacer(),
+ if (isDesktop)
+ const Spacer(
+ flex: 10,
+ ),
if (!isDesktop)
Text(
widget.walletName,
@@ -921,7 +921,10 @@ class _RestoreWalletViewState extends ConsumerState<RestoreWalletView> {
},
),
),
- if (isDesktop) const Spacer(),
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
if (!isDesktop)
Expanded(
child: SingleChildScrollView(
diff --git a/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart b/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart
index 5745c6b65..1e0b422cd 100644
--- a/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart
+++ b/lib/pages/add_wallet_views/verify_recovery_phrase_view/verify_recovery_phrase_view.dart
@@ -236,6 +236,10 @@ class _VerifyRecoveryPhraseViewState
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
+ if (isDesktop)
+ const Spacer(
+ flex: 10,
+ ),
SizedBox(
height: isDesktop ? 24 : 4,
),
@@ -349,6 +353,10 @@ class _VerifyRecoveryPhraseViewState
),
],
),
+ if (isDesktop)
+ const Spacer(
+ flex: 15,
+ ),
],
),
),