From 129c46fca02725ffccc28b2bc53345877703437c Mon Sep 17 00:00:00 2001 From: julian Date: Tue, 14 May 2024 11:11:09 -0600 Subject: [PATCH] make recovery screen scrollable on desktop --- .../new_wallet_recovery_phrase_view.dart | 276 ++++++++++-------- 1 file changed, 148 insertions(+), 128 deletions(-) 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 8a22bc8f2..bb855d757 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 @@ -31,6 +31,7 @@ import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/wallets/isar/providers/wallet_info_provider.dart'; import 'package:stackwallet/wallets/wallet/wallet.dart'; +import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; @@ -180,152 +181,171 @@ class _NewWalletRecoveryPhraseViewState 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, + child: ConditionalParent( + condition: Util.isDesktop, + builder: (child) => LayoutBuilder( + builder: (context, constraints) { + return SingleChildScrollView( + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: constraints.maxHeight, + ), + child: IntrinsicHeight( + child: child, + ), + ), + ); + }, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + if (isDesktop) + const Spacer( + flex: 10, + ), + if (!isDesktop) + const SizedBox( + height: 4, + ), + if (!isDesktop) + Text( + ref.watch(pWalletName(_wallet.walletId)), + textAlign: TextAlign.center, + style: STextStyles.label(context).copyWith( + fontSize: 12, + ), + ), + SizedBox( + height: isDesktop ? 24 : 4, ), - if (!isDesktop) Text( - ref.watch(pWalletName(_wallet.walletId)), + "Recovery Phrase", textAlign: TextAlign.center, - style: STextStyles.label(context).copyWith( - fontSize: 12, - ), + style: isDesktop + ? STextStyles.desktopH2(context) + : STextStyles.pageTitleH1(context), ), - 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()!.background - : Theme.of(context).extension()!.popupBG, - borderRadius: BorderRadius.circular( - Constants.size.circularBorderRadius), + const SizedBox( + height: 16, ), - 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()! - .accentColorDark), + Container( + decoration: BoxDecoration( + color: isDesktop + ? Theme.of(context) + .extension()! + .background + : Theme.of(context).extension()!.popupBG, + borderRadius: BorderRadius.circular( + Constants.size.circularBorderRadius), ), - ), - ), - SizedBox( - height: isDesktop ? 21 : 8, - ), - if (!isDesktop) - Expanded( - child: SingleChildScrollView( - child: MnemonicTable( - words: _mnemonic, - isDesktop: isDesktop, + 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()! + .accentColorDark), ), ), ), - if (isDesktop) - MnemonicTable( - words: _mnemonic, - isDesktop: isDesktop, + SizedBox( + height: isDesktop ? 21 : 8, ), - SizedBox( - height: isDesktop ? 24 : 16, - ), - if (isDesktop) + if (!isDesktop) + Expanded( + child: SingleChildScrollView( + child: MnemonicTable( + words: _mnemonic, + isDesktop: isDesktop, + ), + ), + ), + if (isDesktop) + MnemonicTable( + words: _mnemonic, + isDesktop: isDesktop, + ), SizedBox( - height: 70, + 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, + color: Theme.of(context) + .extension()! + .buttonTextSecondary, + ), + 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 { - await _copy(); + 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(_wallet, _mnemonic), + )); }, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SvgPicture.asset( - Assets.svg.copy, - width: 20, - height: 20, - color: Theme.of(context) - .extension()! - .buttonTextSecondary, - ), - const SizedBox( - width: 10, - ), - Text( - "Copy to clipboard", - style: STextStyles.desktopButtonSecondaryEnabled( - context), - ) - ], + style: Theme.of(context) + .extension()! + .getPrimaryEnabledButtonStyle(context), + child: Text( + "I saved my recovery phrase", + style: isDesktop + ? STextStyles.desktopButtonEnabled(context) + : STextStyles.button(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(_wallet, _mnemonic), - )); - }, - style: Theme.of(context) - .extension()! - .getPrimaryEnabledButtonStyle(context), - child: Text( - "I saved my recovery phrase", - style: isDesktop - ? STextStyles.desktopButtonEnabled(context) - : STextStyles.button(context), + if (isDesktop) + const Spacer( + flex: 15, ), - ), - ), - if (isDesktop) - const Spacer( - flex: 15, - ), - ], + ], + ), ), ), ),