feat: finish account creation panel (#931)

Co-authored-by: Dominik Toton <[email protected]>

catalyst_voices/lib/pages/registration/finish_account/finish_account_creation_panel.dart

@@ -0,0 +1,86 @@
+import 'package:catalyst_voices/pages/registration/next_step.dart';
+import 'package:catalyst_voices/pages/registration/registration_progress.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_filled_button.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class FinishAccountCreationPanel extends StatelessWidget {
+  const FinishAccountCreationPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const SizedBox(height: 24),
+        const Expanded(
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                _TitleText(),
+                SizedBox(height: 24),
+                RegistrationProgressKeychainCompleted()
+              ],
+            ),
+          ),
+        ),
+        const SizedBox(height: 10),
+        const _NextStep(),
+        const SizedBox(height: 10),
+        _LinkWalletAndRolesButton(onTap: () => _goToNextStep(context)),
+      ],
+    );
+  }
+
+  void _goToNextStep(BuildContext context) {
+    RegistrationCubit.of(context).nextStep();
+  }
+}
+
+class _TitleText extends StatelessWidget {
+  const _TitleText();
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final color = theme.colors.textOnPrimaryLevel1;
+
+    final l10n = context.l10n;
+
+    return Text(
+      l10n.createKeychainCreatedTitle,
+      style: theme.textTheme.titleMedium?.copyWith(color: color),
+    );
+  }
+}
+
+class _NextStep extends StatelessWidget {
+  const _NextStep();
+
+  @override
+  Widget build(BuildContext context) {
+    return NextStep(context.l10n.createKeychainCreatedNextStep);
+  }
+}
+
+class _LinkWalletAndRolesButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _LinkWalletAndRolesButton({
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesFilledButton(
+      onTap: onTap,
+      leading: VoicesAssets.icons.wallet.buildIcon(size: 18),
+      child: Text(context.l10n.createKeychainLinkWalletAndRoles),
+    );
+  }
+}

catalyst_voices/lib/pages/registration/registration_dialog.dart

@@ -1,7 +1,7 @@
 import 'package:catalyst_voices/dependency/dependencies.dart';
 import 'package:catalyst_voices/pages/registration/create_keychain/create_keychain_panel.dart';
+import 'package:catalyst_voices/pages/registration/finish_account/finish_account_creation_panel.dart';
 import 'package:catalyst_voices/pages/registration/get_started/get_started_panel.dart';
-import 'package:catalyst_voices/pages/registration/placeholder_panel.dart';
 import 'package:catalyst_voices/pages/registration/registration_info_panel.dart';
 import 'package:catalyst_voices/pages/registration/wallet_link/wallet_link_panel.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
@@ -45,7 +45,7 @@ class _RegistrationDialog extends StatelessWidget {
       left: const RegistrationInfoPanel(),
       right: switch (state) {
         GetStarted() => const GetStartedPanel(),
-        FinishAccountCreation() => const PlaceholderPanel(),
+        FinishAccountCreation() => const FinishAccountCreationPanel(),
         Recover() => const Placeholder(),
         CreateKeychain(:final stage, :final seedPhraseState) =>
           CreateKeychainPanel(

catalyst_voices/lib/pages/registration/registration_info_panel.dart

@@ -99,7 +99,8 @@ class RegistrationInfoPanel extends StatelessWidget {
 
     return switch (step) {
       GetStartedStep() => _HeaderStrings(title: context.l10n.getStarted),
-      FinishAccountCreationStep() => _HeaderStrings(title: 'TODO'),
+      FinishAccountCreationStep() =>
+        _HeaderStrings(title: context.l10n.catalystKeychain),
       RecoverStep() => _HeaderStrings(title: 'TODO'),
       CreateKeychainStep(:final stage) => buildKeychainStageHeader(stage),
       WalletLinkStep(:final stage) => buildWalletLinkStageHeader(stage),

catalyst_voices/lib/pages/registration/registration_progress.dart

@@ -0,0 +1,65 @@
+import 'package:catalyst_voices/widgets/indicators/process_progress_indicator.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+enum RegistrationProgressStepGroup {
+  createKeychain,
+  linkWallet,
+  accountCompleted;
+
+  String _localizedName(BuildContext context) {
+    return switch (this) {
+      RegistrationProgressStepGroup.createKeychain =>
+        context.l10n.registrationCreateKeychainStepGroup,
+      RegistrationProgressStepGroup.linkWallet =>
+        context.l10n.registrationLinkWalletStepGroup,
+      RegistrationProgressStepGroup.accountCompleted =>
+        context.l10n.registrationCompletedStepGroup,
+    };
+  }
+
+  ProcessProgressStep<RegistrationProgressStepGroup> _asProcessStep(
+    BuildContext context,
+  ) {
+    return ProcessProgressStep(
+      value: this,
+      name: _localizedName(context),
+    );
+  }
+}
+
+class RegistrationProgressKeychainCompleted extends StatelessWidget {
+  const RegistrationProgressKeychainCompleted({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const RegistrationProgress(
+      completed: {
+        RegistrationProgressStepGroup.createKeychain,
+      },
+      current: RegistrationProgressStepGroup.linkWallet,
+    );
+  }
+}
+
+class RegistrationProgress extends StatelessWidget {
+  final Set<RegistrationProgressStepGroup> completed;
+  final RegistrationProgressStepGroup current;
+
+  const RegistrationProgress({
+    super.key,
+    required this.completed,
+    required this.current,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ProcessProgressIndicator<RegistrationProgressStepGroup>(
+      steps: RegistrationProgressStepGroup.values
+          .map((e) => e._asProcessStep(context))
+          .toList(),
+      completed: completed,
+      current: current,
+    );
+  }
+}

catalyst_voices/packages/catalyst_voices_blocs/lib/src/registration/registration_cubit.dart

@@ -128,13 +128,23 @@ final class RegistrationCubit extends Cubit<RegistrationState> {
     final step = from ?? state.step;
 
     RegistrationStep nextKeychainStep() {
+      // if current step is not from create keychain just return current one
+      if (state.step is! CreateKeychainStep) {
+        return _keychainCreationCubit.state.step;
+      }
+
       final nextStep = _keychainCreationCubit.nextStep();
 
       // if there is no next step from keychain creation go to finish account.
       return nextStep ?? const FinishAccountCreationStep();
     }
 
     RegistrationStep nextWalletLinkStep() {
+      // if current step is not from create WalletLink just return current one
+      if (state.step is! WalletLinkStep) {
+        return _walletLinkCubit.state.step;
+      }
+
       final nextStep = _walletLinkCubit.nextStep();
 
       // if there is no next step from wallet link go to account completed.

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart

@@ -1257,6 +1257,42 @@ abstract class VoicesLocalizations {
   /// 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;
+
+  /// No description provided for @createKeychainCreatedTitle.
+  ///
+  /// In en, this message translates to:
+  /// **'Congratulations your Catalyst 
Keychain is created!'**
+  String get createKeychainCreatedTitle;
+
+  /// No description provided for @createKeychainCreatedNextStep.
+  ///
+  /// In en, this message translates to:
+  /// **'In the next step you write your Catalyst roles and 
account to the Cardano Mainnet.'**
+  String get createKeychainCreatedNextStep;
+
+  /// No description provided for @createKeychainLinkWalletAndRoles.
+  ///
+  /// In en, this message translates to:
+  /// **'Link your Cardano Wallet & Roles'**
+  String get createKeychainLinkWalletAndRoles;
+
+  /// No description provided for @registrationCreateKeychainStepGroup.
+  ///
+  /// In en, this message translates to:
+  /// **'Catalyst Keychain created'**
+  String get registrationCreateKeychainStepGroup;
+
+  /// No description provided for @registrationLinkWalletStepGroup.
+  ///
+  /// In en, this message translates to:
+  /// **'Link Cardano Wallet & Roles'**
+  String get registrationLinkWalletStepGroup;
+
+  /// No description provided for @registrationCompletedStepGroup.
+  ///
+  /// In en, this message translates to:
+  /// **'Catalyst account creation completed!'**
+  String get registrationCompletedStepGroup;
 }
 
 class _VoicesLocalizationsDelegate extends LocalizationsDelegate<VoicesLocalizations> {

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_en.dart

@@ -663,4 +663,22 @@ class VoicesLocalizationsEn extends VoicesLocalizations {
 
   @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.';
+
+  @override
+  String get createKeychainCreatedTitle => 'Congratulations your Catalyst 
Keychain is created!';
+
+  @override
+  String get createKeychainCreatedNextStep => 'In the next step you write your Catalyst roles and 
account to the Cardano Mainnet.';
+
+  @override
+  String get createKeychainLinkWalletAndRoles => 'Link your Cardano Wallet & Roles';
+
+  @override
+  String get registrationCreateKeychainStepGroup => 'Catalyst Keychain created';
+
+  @override
+  String get registrationLinkWalletStepGroup => 'Link Cardano Wallet & Roles';
+
+  @override
+  String get registrationCompletedStepGroup => 'Catalyst account creation completed!';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations_es.dart

@@ -663,4 +663,22 @@ class VoicesLocalizationsEs extends VoicesLocalizations {
 
   @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.';
+
+  @override
+  String get createKeychainCreatedTitle => 'Congratulations your Catalyst 
Keychain is created!';
+
+  @override
+  String get createKeychainCreatedNextStep => 'In the next step you write your Catalyst roles and 
account to the Cardano Mainnet.';
+
+  @override
+  String get createKeychainLinkWalletAndRoles => 'Link your Cardano Wallet & Roles';
+
+  @override
+  String get registrationCreateKeychainStepGroup => 'Catalyst Keychain created';
+
+  @override
+  String get registrationLinkWalletStepGroup => 'Link Cardano Wallet & Roles';
+
+  @override
+  String get registrationCompletedStepGroup => 'Catalyst account creation completed!';
 }

catalyst_voices/packages/catalyst_voices_localization/lib/l10n/intl_en.arb

@@ -746,5 +746,11 @@
   "yourNextStep": "Your next step",
   "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."
+  "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.",
+  "createKeychainCreatedTitle": "Congratulations your Catalyst \u2028Keychain is created!",
+  "createKeychainCreatedNextStep": "In the next step you write your Catalyst roles and \u2028account to the Cardano Mainnet.",
+  "createKeychainLinkWalletAndRoles": "Link your Cardano Wallet & Roles",
+  "registrationCreateKeychainStepGroup": "Catalyst Keychain created",
+  "registrationLinkWalletStepGroup": "Link Cardano Wallet & Roles",
+  "registrationCompletedStepGroup": "Catalyst account creation completed!"
 }