diff --git a/catalyst_voices/lib/pages/registration/create_keychain/create_keychain_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/create_keychain_panel.dart index 32f8ec65db..7a52d1d905 100644 --- a/catalyst_voices/lib/pages/registration/create_keychain/create_keychain_panel.dart +++ b/catalyst_voices/lib/pages/registration/create_keychain/create_keychain_panel.dart @@ -1,9 +1,10 @@ -import 'package:catalyst_voices/pages/registration/create_keychain/stage/check_seed_phrase_instructions_panel.dart'; import 'package:catalyst_voices/pages/registration/create_keychain/stage/instructions_panel.dart'; +import 'package:catalyst_voices/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart'; import 'package:catalyst_voices/pages/registration/create_keychain/stage/seed_phrase_check_panel.dart'; import 'package:catalyst_voices/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart'; import 'package:catalyst_voices/pages/registration/create_keychain/stage/seed_phrase_panel.dart'; import 'package:catalyst_voices/pages/registration/create_keychain/stage/splash_panel.dart'; +import 'package:catalyst_voices/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart'; import 'package:catalyst_voices/pages/registration/placeholder_panel.dart'; import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart'; import 'package:catalyst_voices_models/catalyst_voices_models.dart'; @@ -30,16 +31,16 @@ class CreateKeychainPanel extends StatelessWidget { isNextEnabled: seedPhraseState.isStoredConfirmed, ), CreateKeychainStage.checkSeedPhraseInstructions => - const CheckSeedPhraseInstructionsPanel(), + const SeedPhraseCheckInstructionsPanel(), CreateKeychainStage.checkSeedPhrase => SeedPhraseCheckPanel( seedPhrase: seedPhraseState.seedPhrase, ), CreateKeychainStage.checkSeedPhraseResult => SeedPhraseCheckResultPanel( isCheckConfirmed: seedPhraseState.isCheckConfirmed, ), - CreateKeychainStage.unlockPasswordInstructions || - CreateKeychainStage.unlockPasswordCreate => - const PlaceholderPanel(), + CreateKeychainStage.unlockPasswordInstructions => + const UnlockPasswordInstructionsPanel(), + CreateKeychainStage.unlockPasswordCreate => const PlaceholderPanel(), }; } } diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart index 4e5257ff24..92ade85b88 100644 --- a/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart +++ b/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart @@ -8,15 +8,21 @@ class InstructionsPanel extends StatelessWidget { @override Widget build(BuildContext context) { + final l10n = context.l10n; + return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ const SizedBox(height: 24), - RegistrationStageMessage( - title: context.l10n.accountInstructionsTitle, - subtitle: context.l10n.accountInstructionsMessage, + Expanded( + child: SingleChildScrollView( + child: RegistrationStageMessage( + title: l10n.accountInstructionsTitle, + subtitle: l10n.accountInstructionsMessage, + ), + ), ), - const Spacer(), + const SizedBox(height: 10), const RegistrationBackNextNavigation(), ], ); diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart new file mode 100644 index 0000000000..15947ba660 --- /dev/null +++ b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart @@ -0,0 +1,32 @@ +import 'package:catalyst_voices/pages/registration/registration_stage_message.dart'; +import 'package:catalyst_voices/pages/registration/registration_stage_navigation.dart'; +import 'package:catalyst_voices_localization/catalyst_voices_localization.dart'; +import 'package:flutter/material.dart'; + +class SeedPhraseCheckInstructionsPanel extends StatelessWidget { + const SeedPhraseCheckInstructionsPanel({ + super.key, + }); + + @override + Widget build(BuildContext context) { + final l10n = context.l10n; + + return Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + const SizedBox(height: 24), + Expanded( + child: SingleChildScrollView( + child: RegistrationStageMessage( + title: l10n.createKeychainSeedPhraseCheckInstructionsTitle, + subtitle: l10n.createKeychainSeedPhraseCheckInstructionsSubtitle, + ), + ), + ), + const SizedBox(height: 10), + const RegistrationBackNextNavigation(), + ], + ); + } +} diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_panel.dart index a8bf730d11..81a2933a92 100644 --- a/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_panel.dart +++ b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_panel.dart @@ -23,12 +23,14 @@ class _SeedPhraseCheckPanelState extends State { final _shuffledSeedPhraseWords = []; final _userWords = []; - bool get _isStageValid { - if (_seedPhraseWords.isEmpty) { - return false; - } + bool get _hasSeedPhraseWords => _seedPhraseWords.isNotEmpty; + + bool get _completedWordsSequence { + return _hasSeedPhraseWords && _userWords.length == _seedPhraseWords.length; + } - return listEquals(_seedPhraseWords, _userWords); + bool get _completedCorrectlyWordsSequence { + return _hasSeedPhraseWords && listEquals(_userWords, _seedPhraseWords); } @override @@ -36,7 +38,7 @@ class _SeedPhraseCheckPanelState extends State { super.initState(); _updateSeedPhraseWords(); - _updateUserWords(_seedPhraseWords); + _updateUserWords(); } @override @@ -69,7 +71,7 @@ class _SeedPhraseCheckPanelState extends State { ), ), const SizedBox(height: 10), - RegistrationBackNextNavigation(isNextEnabled: _isStageValid), + RegistrationBackNextNavigation(isNextEnabled: _completedWordsSequence), ], ); } @@ -109,9 +111,10 @@ class _SeedPhraseCheckPanelState extends State { ..clear() ..addAll(words); - RegistrationCubit.of(context).setSeedPhraseCheckConfirmed( - isConfirmed: _isStageValid, - ); + final isConfirmed = _completedCorrectlyWordsSequence; + + RegistrationCubit.of(context) + .setSeedPhraseCheckConfirmed(isConfirmed: isConfirmed); } } diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart index 754413a3a8..357a4714b4 100644 --- a/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart +++ b/catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart @@ -14,18 +14,27 @@ class SeedPhraseCheckResultPanel extends StatelessWidget { @override Widget build(BuildContext context) { + final l10n = context.l10n; + return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ const SizedBox(height: 24), - RegistrationStageMessage( - title: context.l10n.createKeychainSeedPhraseCheckSuccessTitle, - subtitle: context.l10n.createKeychainSeedPhraseCheckSuccessSubtitle, - ), - const Spacer(), - NextStep( - context.l10n.createKeychainSeedPhraseCheckSuccessNextStep, + // TODO(damian-molinski): use correct strings when available. + Expanded( + child: SingleChildScrollView( + child: RegistrationStageMessage( + title: isCheckConfirmed + ? l10n.createKeychainSeedPhraseCheckSuccessTitle + : 'Seed phrase words does not match!', + subtitle: isCheckConfirmed + ? l10n.createKeychainSeedPhraseCheckSuccessSubtitle + : 'Go back ana make sure order is correct', + ), + ), ), + if (isCheckConfirmed) + NextStep(l10n.createKeychainSeedPhraseCheckSuccessNextStep), const SizedBox(height: 10), RegistrationBackNextNavigation(isNextEnabled: isCheckConfirmed), ], diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/check_seed_phrase_instructions_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart similarity index 55% rename from catalyst_voices/lib/pages/registration/create_keychain/stage/check_seed_phrase_instructions_panel.dart rename to catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart index 8d2af89b71..e161f421e0 100644 --- a/catalyst_voices/lib/pages/registration/create_keychain/stage/check_seed_phrase_instructions_panel.dart +++ b/catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart @@ -3,23 +3,28 @@ import 'package:catalyst_voices/pages/registration/registration_stage_navigation import 'package:catalyst_voices_localization/catalyst_voices_localization.dart'; import 'package:flutter/material.dart'; -class CheckSeedPhraseInstructionsPanel extends StatelessWidget { - const CheckSeedPhraseInstructionsPanel({ +class UnlockPasswordInstructionsPanel extends StatelessWidget { + const UnlockPasswordInstructionsPanel({ super.key, }); @override Widget build(BuildContext context) { + final l10n = context.l10n; + return Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ const SizedBox(height: 24), - RegistrationStageMessage( - title: context.l10n.createKeychainSeedPhraseCheckInstructionsTitle, - subtitle: - context.l10n.createKeychainSeedPhraseCheckInstructionsSubtitle, + Expanded( + child: SingleChildScrollView( + child: RegistrationStageMessage( + title: l10n.createKeychainUnlockPasswordInstructionsTitle, + subtitle: l10n.createKeychainUnlockPasswordInstructionsSubtitle, + ), + ), ), - const Spacer(), + const SizedBox(height: 10), const RegistrationBackNextNavigation(), ], ); diff --git a/catalyst_voices/lib/pages/registration/pictures/password_picture.dart b/catalyst_voices/lib/pages/registration/pictures/password_picture.dart new file mode 100644 index 0000000000..552fdd2220 --- /dev/null +++ b/catalyst_voices/lib/pages/registration/pictures/password_picture.dart @@ -0,0 +1,17 @@ +import 'package:catalyst_voices/pages/registration/pictures/task_picture.dart'; +import 'package:catalyst_voices_assets/catalyst_voices_assets.dart'; +import 'package:flutter/material.dart'; + +class PasswordPicture extends StatelessWidget { + const PasswordPicture({super.key}); + + @override + Widget build(BuildContext context) { + return TaskPicture( + child: TaskPictureIconBox( + type: TaskPictureType.error, + child: VoicesAssets.icons.lockClosed.buildIcon(size: 48), + ), + ); + } +} diff --git a/catalyst_voices/lib/pages/registration/registration_info_panel.dart b/catalyst_voices/lib/pages/registration/registration_info_panel.dart index 3e285d922b..05ff377caa 100644 --- a/catalyst_voices/lib/pages/registration/registration_info_panel.dart +++ b/catalyst_voices/lib/pages/registration/registration_info_panel.dart @@ -1,5 +1,6 @@ import 'package:catalyst_voices/pages/registration/information_panel.dart'; import 'package:catalyst_voices/pages/registration/pictures/keychain_picture.dart'; +import 'package:catalyst_voices/pages/registration/pictures/password_picture.dart'; import 'package:catalyst_voices/pages/registration/pictures/seed_phrase_picture.dart'; import 'package:catalyst_voices/pages/registration/pictures/task_picture.dart'; import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart'; @@ -66,9 +67,9 @@ class RegistrationInfoPanel extends StatelessWidget { subtitle: context.l10n.createKeychainSeedPhraseCheckSubtitle, body: context.l10n.createKeychainSeedPhraseCheckBody, ), - CreateKeychainStage.checkSeedPhraseResult => + CreateKeychainStage.checkSeedPhraseResult || + CreateKeychainStage.unlockPasswordInstructions => _HeaderStrings(title: context.l10n.catalystKeychain), - CreateKeychainStage.unlockPasswordInstructions || CreateKeychainStage.unlockPasswordCreate => _HeaderStrings(title: 'TODO'), }; @@ -138,7 +139,7 @@ class _RegistrationPicture extends StatelessWidget { ), CreateKeychainStage.unlockPasswordInstructions || CreateKeychainStage.unlockPasswordCreate => - const KeychainPicture(), + const PasswordPicture(), }; } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart index bbe8304270..3d45330bd0 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart @@ -1113,6 +1113,18 @@ abstract class VoicesLocalizations { /// In en, this message translates to: /// **'Now let’s set your Unlock password for this device!'** String get createKeychainSeedPhraseCheckSuccessNextStep; + + /// No description provided for @createKeychainUnlockPasswordInstructionsTitle. + /// + /// In en, this message translates to: + /// **'Set your Catalyst unlock password 
for this device'** + String get createKeychainUnlockPasswordInstructionsTitle; + + /// No description provided for @createKeychainUnlockPasswordInstructionsSubtitle. + /// + /// In en, this message translates to: + /// **'With over 300 trillion possible combinations, your 12 word seed phrase is great for keeping your account safe. 

But it can be a bit tedious to enter every single time you want to use the app. 

In this next step, you\'ll set your Unlock Password for your current device. It\'s like a shortcut for proving ownership of your Keychain. 

Whenever you recover your account for the first time on a new device, you\'ll need to use your Catalyst Keychain to get started. Every time after that, you can use your Unlock Password to quickly regain access.'** + String get createKeychainUnlockPasswordInstructionsSubtitle; } class _VoicesLocalizationsDelegate extends LocalizationsDelegate { diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart index d226a79f52..4b95551381 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart @@ -572,4 +572,10 @@ class VoicesLocalizationsEn extends VoicesLocalizations { @override String get createKeychainSeedPhraseCheckSuccessNextStep => 'Now let’s set your Unlock password for this device!'; + + @override + String get createKeychainUnlockPasswordInstructionsTitle => 'Set your Catalyst unlock password 
for this device'; + + @override + String get createKeychainUnlockPasswordInstructionsSubtitle => 'With over 300 trillion possible combinations, your 12 word seed phrase is great for keeping your account safe. 

But it can be a bit tedious to enter every single time you want to use the app. 

In this next step, you\'ll set your Unlock Password for your current device. It\'s like a shortcut for proving ownership of your Keychain. 

Whenever you recover your account for the first time on a new device, you\'ll need to use your Catalyst Keychain to get started. Every time after that, you can use your Unlock Password to quickly regain access.'; } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart index 6bd06ae1e7..87b8823f5d 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart @@ -572,4 +572,10 @@ class VoicesLocalizationsEs extends VoicesLocalizations { @override String get createKeychainSeedPhraseCheckSuccessNextStep => 'Now let’s set your Unlock password for this device!'; + + @override + String get createKeychainUnlockPasswordInstructionsTitle => 'Set your Catalyst unlock password 
for this device'; + + @override + String get createKeychainUnlockPasswordInstructionsSubtitle => 'With over 300 trillion possible combinations, your 12 word seed phrase is great for keeping your account safe. 

But it can be a bit tedious to enter every single time you want to use the app. 

In this next step, you\'ll set your Unlock Password for your current device. It\'s like a shortcut for proving ownership of your Keychain. 

Whenever you recover your account for the first time on a new device, you\'ll need to use your Catalyst Keychain to get started. Every time after that, you can use your Unlock Password to quickly regain access.'; } diff --git a/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb b/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb index 3ac9476d1a..323b35c44f 100644 --- a/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb +++ b/catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb @@ -649,5 +649,7 @@ "createKeychainSeedPhraseCheckSuccessTitle": "Nice job! You've successfully verified the seed phrase for your keychain.", "createKeychainSeedPhraseCheckSuccessSubtitle": "Enter your seed phrase to recover your Catalyst Keychain on any device.\u2028\u2028It's kinda like your email and password all rolled into one, so keep it somewhere safe!\u2028\u2028In the next step we’ll add a password to your Catalyst Keychain, so you can lock/unlock access to Voices.", "yourNextStep": "Your next step", - "createKeychainSeedPhraseCheckSuccessNextStep": "Now let’s set your Unlock password for this device!" + "createKeychainSeedPhraseCheckSuccessNextStep": "Now let’s set your Unlock password for this device!", + "createKeychainUnlockPasswordInstructionsTitle": "Set your Catalyst unlock password \u2028for this device", + "createKeychainUnlockPasswordInstructionsSubtitle": "With over 300 trillion possible combinations, your 12 word seed phrase is great for keeping your account safe. \u2028\u2028But it can be a bit tedious to enter every single time you want to use the app. \u2028\u2028In this next step, you'll set your Unlock Password for your current device. It's like a shortcut for proving ownership of your Keychain. \u2028\u2028Whenever you recover your account for the first time on a new device, you'll need to use your Catalyst Keychain to get started. Every time after that, you can use your Unlock Password to quickly regain access." } \ No newline at end of file