feat(cat-voices): registration dialog structure

catalyst_voices/lib/pages/account/creation/create_keychain/create_keychain_controller.dart

@@ -0,0 +1,64 @@
+import 'package:catalyst_voices/pages/account/creation/create_keychain/create_keychain_stage.dart';
+import 'package:flutter/widgets.dart';
+
+class CreateKeychainController extends ChangeNotifier {
+  CreateKeychainStage _stage;
+
+  CreateKeychainController({
+    CreateKeychainStage stage = CreateKeychainStage.splash,
+  }) : _stage = stage;
+
+  CreateKeychainStage get stage => _stage;
+
+  void goToNextStage() {
+    final currentStageIndex = CreateKeychainStage.values.indexOf(_stage);
+    final nextStage = CreateKeychainStage.values[currentStageIndex + 1];
+    goToStage(nextStage);
+  }
+
+  void goToPreviousStage() {
+    final currentStageIndex = CreateKeychainStage.values.indexOf(_stage);
+    final nextStage = CreateKeychainStage.values[currentStageIndex - 1];
+    goToStage(nextStage);
+  }
+
+  void goToStage(CreateKeychainStage stage) {
+    _stage = stage;
+    notifyListeners();
+  }
+
+  /// Looks up tree for [CreateKeychainControllerScope] and if found
+  /// returns assisted controller.
+  static CreateKeychainController? maybeOf(BuildContext context) {
+    return context
+        .dependOnInheritedWidgetOfExactType<CreateKeychainControllerScope>()
+        ?.controller;
+  }
+
+  /// Utility for [maybeOf]. Unwrapping controller with assertion.
+  static CreateKeychainController of(BuildContext context) {
+    final controller = maybeOf(context);
+
+    assert(
+      controller != null,
+      'Unable to find CreateKeychainControllerScope as parent widget',
+    );
+
+    return controller!;
+  }
+}
+
+class CreateKeychainControllerScope extends InheritedWidget {
+  final CreateKeychainController controller;
+
+  const CreateKeychainControllerScope({
+    super.key,
+    required this.controller,
+    required super.child,
+  });
+
+  @override
+  bool updateShouldNotify(covariant CreateKeychainControllerScope oldWidget) {
+    return controller != oldWidget.controller;
+  }
+}

catalyst_voices/lib/pages/account/creation/create_keychain/create_keychain_dialog.dart

@@ -0,0 +1,96 @@
+import 'package:catalyst_voices/pages/account/creation/create_keychain/create_keychain_controller.dart';
+import 'package:catalyst_voices/pages/account/creation/create_keychain/create_keychain_stage.dart';
+import 'package:catalyst_voices/pages/account/creation/create_keychain/stage/stages.dart';
+import 'package:catalyst_voices/pages/account/creation/information_panel.dart';
+import 'package:catalyst_voices/pages/account/creation/task_picture.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class CreateKeychainDialog extends StatefulWidget {
+  const CreateKeychainDialog._();
+
+  static Future<String?> show(BuildContext context) {
+    return VoicesDialog.show(
+      context: context,
+      builder: (context) => const CreateKeychainDialog._(),
+    );
+  }
+
+  @override
+  State<CreateKeychainDialog> createState() => _CreateKeychainDialogState();
+}
+
+class _CreateKeychainDialogState extends State<CreateKeychainDialog> {
+  late final CreateKeychainController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = CreateKeychainController();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CreateKeychainControllerScope(
+      controller: _controller,
+      child: ListenableBuilder(
+        listenable: _controller,
+        builder: (context, _) {
+          return VoicesDesktopPanelsDialog(
+            left: _CreationStatusPanel(controller: _controller),
+            right: _buildStage(
+              context,
+              stage: _controller.stage,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildStage(
+    BuildContext context, {
+    required CreateKeychainStage stage,
+  }) {
+    return switch (stage) {
+      CreateKeychainStage.splash => const SplashStagePanel(),
+      CreateKeychainStage.instructions ||
+      CreateKeychainStage.seedPhrase ||
+      CreateKeychainStage.checkSeedPhraseInstructions ||
+      CreateKeychainStage.checkSeedPhrase ||
+      CreateKeychainStage.checkSeedPhraseResult ||
+      CreateKeychainStage.unlockPasswordInstructions ||
+      CreateKeychainStage.unlockPasswordCreate ||
+      CreateKeychainStage.created =>
+        const Placeholder(),
+    };
+  }
+}
+
+class _CreationStatusPanel extends StatelessWidget {
+  final CreateKeychainController controller;
+
+  const _CreationStatusPanel({
+    required this.controller,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InformationPanel(
+      title: context.l10n.catalystKeychain,
+      subtitle: 'Write down your 12 Catalyst 
security words',
+      body: 'Make sure you create an offline backup '
+          'of your recovery phrase as well.',
+      picture: const TaskKeychainPicture(),
+      progress: 0.2,
+    );
+  }
+}

catalyst_voices/lib/pages/account/creation/create_keychain/create_keychain_stage.dart

@@ -0,0 +1,11 @@
+enum CreateKeychainStage {
+  splash,
+  instructions,
+  seedPhrase,
+  checkSeedPhraseInstructions,
+  checkSeedPhrase,
+  checkSeedPhraseResult,
+  unlockPasswordInstructions,
+  unlockPasswordCreate,
+  created,
+}

catalyst_voices/lib/pages/account/creation/create_keychain/stage/splash_stage_panel.dart

@@ -0,0 +1,37 @@
+import 'package:catalyst_voices/pages/account/creation/create_keychain/create_keychain_controller.dart';
+import 'package:catalyst_voices/widgets/widgets.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 SplashStagePanel extends StatelessWidget {
+  const SplashStagePanel({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: () {
+            CreateKeychainController.of(context).goToNextStage();
+          },
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/account/creation/create_keychain/stage/stages.dart

@@ -0,0 +1 @@
+export 'splash_stage_panel.dart';

catalyst_voices/lib/pages/account/creation/get_started/account_create_dialog.dart

@@ -1,5 +1,5 @@
+import 'package:catalyst_voices/pages/account/creation/information_panel.dart';
 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';
@@ -39,35 +39,12 @@ class AccountCreateDialog extends StatelessWidget {
 
   @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: () {}),
-      ],
+    return VoicesDesktopPanelsDialog(
+      left: InformationPanel(
+        title: context.l10n.getStarted,
+        picture: const TaskKeychainPicture(),
+      ),
+      right: const _RightPanel(),
     );
   }
 }

catalyst_voices/lib/pages/account/creation/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: () {}),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/spaces/spaces_shell_page.dart

@@ -1,4 +1,5 @@
 import 'package:catalyst_voices/common/ext/ext.dart';
+import 'package:catalyst_voices/pages/account/creation/create_keychain/create_keychain_dialog.dart';
 import 'package:catalyst_voices/pages/account/creation/get_started/account_create_dialog.dart';
 import 'package:catalyst_voices/pages/spaces/drawer/spaces_drawer.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
@@ -97,7 +98,9 @@ class _SpacesShellPageState extends State<SpacesShellPage> {
     }
   }
 
-  Future<void> _showCreateAccountFlow() async {}
+  Future<void> _showCreateAccountFlow() async {
+    await CreateKeychainDialog.show(context);
+  }
 
   Future<void> _showRecoverAccountFlow() async {}
 }