Merge branch 'main' into test/voices-main-integration-test

catalyst_voices/lib/dependency/dependencies.dart

@@ -27,7 +27,9 @@ final class Dependencies extends DependencyProvider {
           authenticationRepository: get(),
         ),
       )
-      ..registerLazySingleton<SessionBloc>(SessionBloc.new);
+      ..registerLazySingleton<SessionBloc>(SessionBloc.new)
+      // Factory will rebuild it each time needed
+      ..registerFactory<RegistrationBloc>(RegistrationBloc.new);
   }
 
   void _registerRepositories() {

catalyst_voices/lib/pages/registration/create_keychain/create_keychain_panel.dart

@@ -0,0 +1,28 @@
+import 'package:catalyst_voices/pages/registration/create_keychain/stage/stages.dart';
+import 'package:catalyst_voices_models/catalyst_voices_models.dart';
+import 'package:flutter/material.dart';
+
+class CreateKeychainPanel extends StatelessWidget {
+  final CreateKeychainStage stage;
+
+  const CreateKeychainPanel({
+    super.key,
+    required this.stage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (stage) {
+      CreateKeychainStage.splash => const SplashPanel(),
+      CreateKeychainStage.instructions => const InstructionsPanel(),
+      CreateKeychainStage.seedPhrase ||
+      CreateKeychainStage.checkSeedPhraseInstructions ||
+      CreateKeychainStage.checkSeedPhrase ||
+      CreateKeychainStage.checkSeedPhraseResult ||
+      CreateKeychainStage.unlockPasswordInstructions ||
+      CreateKeychainStage.unlockPasswordCreate ||
+      CreateKeychainStage.created =>
+        const Placeholder(),
+    };
+  }
+}

catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart

@@ -0,0 +1,59 @@
+import 'package:catalyst_voices/widgets/widgets.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 InstructionsPanel extends StatelessWidget {
+  const InstructionsPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textColor = theme.colors.textOnPrimaryLevel0;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Text(
+          context.l10n.accountInstructionsTitle,
+          style: theme.textTheme.titleMedium?.copyWith(color: textColor),
+        ),
+        const SizedBox(height: 24),
+        Text(
+          context.l10n.accountInstructionsMessage,
+          style: theme.textTheme.bodyMedium?.copyWith(color: textColor),
+        ),
+        const Spacer(),
+        const _Navigation(),
+      ],
+    );
+  }
+}
+
+class _Navigation extends StatelessWidget {
+  const _Navigation();
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: VoicesBackButton(
+            onTap: () {
+              RegistrationBloc.of(context).add(const PreviousStepEvent());
+            },
+          ),
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: VoicesNextButton(
+            onTap: () {
+              RegistrationBloc.of(context).add(const NextStepEvent());
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/create_keychain/stage/splash_panel.dart

@@ -0,0 +1,37 @@
+import 'package:catalyst_voices/widgets/widgets.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 SplashPanel extends StatelessWidget {
+  const SplashPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textColor = theme.colors.textOnPrimaryLevel0;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Text(
+          context.l10n.accountCreationSplashTitle,
+          style: theme.textTheme.titleMedium?.copyWith(color: textColor),
+        ),
+        const SizedBox(height: 24),
+        Text(
+          context.l10n.accountCreationSplashMessage,
+          style: theme.textTheme.bodyMedium?.copyWith(color: textColor),
+        ),
+        const Spacer(),
+        VoicesFilledButton(
+          child: Text(context.l10n.accountCreationSplashNextButton),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/create_keychain/stage/stages.dart

@@ -0,0 +1,2 @@
+export 'instructions_panel.dart';
+export 'splash_panel.dart';

catalyst_voices/lib/pages/account/creation/get_started/account_create_dialog.dart → catalyst_voices/lib/pages/registration/get_started/get_started_panel.dart

@@ -1,79 +1,13 @@
-import 'package:catalyst_voices/pages/account/creation/task_picture.dart';
-import 'package:catalyst_voices/widgets/buttons/voices_buttons.dart';
-import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.dart';
-import 'package:catalyst_voices/widgets/modals/voices_dialog.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:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:flutter/material.dart';
 
-enum AccountCreateType {
-  createNew,
-  recover;
-
-  SvgGenImage get _icon => switch (this) {
-        AccountCreateType.createNew => VoicesAssets.icons.colorSwatch,
-        AccountCreateType.recover => VoicesAssets.icons.download,
-      };
-
-  String _getTitle(VoicesLocalizations l10n) => switch (this) {
-        AccountCreateType.createNew => l10n.accountCreationCreate,
-        AccountCreateType.recover => l10n.accountCreationRecover,
-      };
-
-  String _getSubtitle(VoicesLocalizations l10n) {
-    return l10n.accountCreationOnThisDevice;
-  }
-}
-
-class AccountCreateDialog extends StatelessWidget {
-  const AccountCreateDialog._();
-
-  static Future<AccountCreateType?> show(BuildContext context) {
-    return VoicesDialog.show(
-      context: context,
-      builder: (context) => const AccountCreateDialog._(),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return const VoicesDesktopPanelsDialog(
-      left: _LeftPanel(),
-      right: _RightPanel(),
-    );
-  }
-}
-
-class _LeftPanel extends StatelessWidget {
-  const _LeftPanel();
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(
-          context.l10n.getStarted,
-          style: theme.textTheme.titleLarge?.copyWith(
-            color: theme.colors.textOnPrimaryLevel0,
-          ),
-        ),
-        const SizedBox(height: 12),
-        const Expanded(child: Center(child: TaskKeychainPicture())),
-        const SizedBox(height: 32),
-        // TODO(damian-molinski): External url redirect
-        VoicesLearnMoreButton(onTap: () {}),
-      ],
-    );
-  }
-}
-
-class _RightPanel extends StatelessWidget {
-  const _RightPanel();
+class GetStartedPanel extends StatelessWidget {
+  const GetStartedPanel({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -106,12 +40,15 @@ class _RightPanel extends StatelessWidget {
         const SizedBox(height: 24),
         Column(
           mainAxisSize: MainAxisSize.min,
-          children: AccountCreateType.values
+          children: CreateAccountType.values
               .map<Widget>((type) {
-                return _AccountCreateTypeTile(
+                return _CreateAccountTypeTile(
                   key: ValueKey(type),
                   type: type,
-                  onTap: () => Navigator.of(context).pop(type),
+                  onTap: () {
+                    final event = CreateAccountTypeEvent(type: type);
+                    RegistrationBloc.of(context).add(event);
+                  },
                 );
               })
               .separatedBy(const SizedBox(height: 12))
@@ -122,11 +59,11 @@ class _RightPanel extends StatelessWidget {
   }
 }
 
-class _AccountCreateTypeTile extends StatelessWidget {
-  final AccountCreateType type;
+class _CreateAccountTypeTile extends StatelessWidget {
+  final CreateAccountType type;
   final VoidCallback? onTap;
 
-  const _AccountCreateTypeTile({
+  const _CreateAccountTypeTile({
     super.key,
     required this.type,
     this.onTap,
@@ -185,3 +122,19 @@ class _AccountCreateTypeTile extends StatelessWidget {
     );
   }
 }
+
+extension _CreateAccountTypeExt on CreateAccountType {
+  SvgGenImage get _icon => switch (this) {
+        CreateAccountType.createNew => VoicesAssets.icons.colorSwatch,
+        CreateAccountType.recover => VoicesAssets.icons.download,
+      };
+
+  String _getTitle(VoicesLocalizations l10n) => switch (this) {
+        CreateAccountType.createNew => l10n.accountCreationCreate,
+        CreateAccountType.recover => l10n.accountCreationRecover,
+      };
+
+  String _getSubtitle(VoicesLocalizations l10n) {
+    return l10n.accountCreationOnThisDevice;
+  }
+}

catalyst_voices/lib/pages/registration/information_panel.dart

@@ -0,0 +1,109 @@
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
+import 'package:flutter/material.dart';
+
+class InformationPanel extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final String? body;
+  final Widget picture;
+  final double? progress;
+
+  const InformationPanel({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.body,
+    required this.picture,
+    this.progress,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _Header(
+          title: title,
+          subtitle: subtitle,
+          body: body,
+        ),
+        const SizedBox(height: 12),
+        Expanded(child: Center(child: picture)),
+        const SizedBox(height: 12),
+        _Footer(
+          progress: progress,
+        ),
+      ],
+    );
+  }
+}
+
+class _Header extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final String? body;
+
+  const _Header({
+    required this.title,
+    this.subtitle,
+    this.body,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final textColor = theme.colors.textOnPrimaryLevel0;
+
+    final subtitle = this.subtitle;
+    final body = this.body;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        Text(
+          title,
+          style: theme.textTheme.titleLarge?.copyWith(color: textColor),
+        ),
+        if (subtitle != null)
+          Text(
+            subtitle,
+            style: theme.textTheme.titleMedium?.copyWith(color: textColor),
+          ),
+        if (body != null)
+          Text(
+            body,
+            style: theme.textTheme.bodyMedium?.copyWith(color: textColor),
+          ),
+      ].separatedBy(const SizedBox(height: 12)).toList(),
+    );
+  }
+}
+
+class _Footer extends StatelessWidget {
+  final double? progress;
+
+  const _Footer({
+    this.progress,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final progress = this.progress;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Offstage(
+          offstage: progress == null,
+          child: VoicesLinearProgressIndicator(value: progress ?? 0),
+        ),
+        const SizedBox(height: 10),
+        VoicesLearnMoreButton(onTap: () {}),
+      ],
+    );
+  }
+}