mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2025-03-25 08:38:45 +00:00
new/restore desktop layout fixes
This commit is contained in:
julian
parent
bd5711e098
commit
3c47190494
7 changed files with 267 additions and 222 deletions
lib/pages/add_wallet_views
create_or_restore_wallet_view
name_your_wallet_view
new_wallet_recovery_phrase_view
new_wallet_recovery_phrase_warning_view
restore_wallet_view
verify_recovery_phrase_view
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
));
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
|
|||
Loading…
Reference in a new issue