feat(cat-voices): define wallet link flow (#892)

* refactor: move link_wallet_dialog

* refactor: align l10n keys

* refactor: move link-wallet to another folder

* feat: add content

* feat: define the rest of stages for wallet link

* feat: add missing panels

* refactor: rename folder

* chore: sort imports

* chore: reformat

catalyst_voices/lib/pages/registration/registration_dialog.dart

@@ -1,8 +1,8 @@
 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/get_started/get_started_panel.dart';
-import 'package:catalyst_voices/pages/registration/link_wallet/wallet_link_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';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:flutter/material.dart';

catalyst_voices/lib/pages/registration/registration_info_panel.dart

@@ -47,7 +47,7 @@ class RegistrationInfoPanel extends StatelessWidget {
         // TODO(damian-molinski): Extract to l10n in next step
         CreateKeychainStage.seedPhrase => _HeaderStrings(
             title: 'Catalyst Keychain',
-            subtitle: 'Write down your 12 Catalyst 
security words',
+            subtitle: 'Write down your 12 Catalyst security words',
             body: 'Make sure you create an offline backup '
                 'of your recovery phrase as well.',
           ),
@@ -61,15 +61,24 @@ class RegistrationInfoPanel extends StatelessWidget {
       };
     }
 
-    _HeaderStrings buildWalletStageHeader(WalletLinkStage stage) {
+    _HeaderStrings buildWalletLinkStageHeader(WalletLinkStage stage) {
       return switch (stage) {
-        WalletLinkStage.intro => _HeaderStrings(
-            title: 'Link keys to your 
Catalyst Keychain',
-            subtitle: 'Link your Cardano wallet',
+        WalletLinkStage.intro ||
+        WalletLinkStage.selectWallet ||
+        WalletLinkStage.walletDetails =>
+          _HeaderStrings(
+            title: context.l10n.walletLinkHeader,
+            subtitle: context.l10n.walletLinkWalletSubheader,
           ),
-        WalletLinkStage.selectWallet => _HeaderStrings(
-            title: 'Link keys to your 
Catalyst Keychain',
-            subtitle: 'Link your Cardano wallet',
+        WalletLinkStage.rolesChooser ||
+        WalletLinkStage.rolesSummary =>
+          _HeaderStrings(
+            title: context.l10n.walletLinkHeader,
+            subtitle: context.l10n.walletLinkRolesSubheader,
+          ),
+        WalletLinkStage.rbacTransaction => _HeaderStrings(
+            title: context.l10n.walletLinkHeader,
+            subtitle: context.l10n.walletLinkTransactionSubheader,
           ),
       };
     }
@@ -79,7 +88,7 @@ class RegistrationInfoPanel extends StatelessWidget {
       FinishAccountCreation() => _HeaderStrings(title: 'TODO'),
       Recover() => _HeaderStrings(title: 'TODO'),
       CreateKeychain(:final stage) => buildKeychainStageHeader(stage),
-      WalletLink(:final stage) => buildWalletStageHeader(stage),
+      WalletLink(:final stage) => buildWalletLinkStageHeader(stage),
     };
   }
 }

catalyst_voices/lib/pages/registration/link_wallet/intro/intro_panel.dart → catalyst_voices/lib/pages/registration/wallet_link/intro/intro_panel.dart

@@ -14,12 +14,12 @@ class IntroPanel extends StatelessWidget {
       children: [
         const SizedBox(height: 24),
         Text(
-          context.l10n.walletLink_intro_title,
+          context.l10n.walletLinkIntroTitle,
           style: Theme.of(context).textTheme.titleMedium,
         ),
         const SizedBox(height: 24),
         Text(
-          context.l10n.walletLink_intro_content,
+          context.l10n.walletLinkIntroContent,
           style: Theme.of(context).textTheme.bodyMedium,
         ),
         const Spacer(),

catalyst_voices/lib/pages/registration/wallet_link/rbac_transaction/rbac_transaction_panel.dart

@@ -0,0 +1,34 @@
+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:flutter/material.dart';
+
+// TODO(dtscalac): define content
+class RbacTransactionPanel extends StatelessWidget {
+  const RbacTransactionPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const PreviousStepEvent());
+          },
+          child: const Text('Previous'),
+        ),
+        const SizedBox(height: 12),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+          child: const Text('Next'),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/wallet_link/roles_chooser/roles_chooser_panel.dart

@@ -0,0 +1,34 @@
+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:flutter/material.dart';
+
+// TODO(dtscalac): define content
+class RolesChooserPanel extends StatelessWidget {
+  const RolesChooserPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const PreviousStepEvent());
+          },
+          child: const Text('Previous'),
+        ),
+        const SizedBox(height: 12),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+          child: const Text('Next'),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/wallet_link/roles_summary/roles_summary_panel.dart

@@ -0,0 +1,34 @@
+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:flutter/material.dart';
+
+// TODO(dtscalac): define content
+class RolesSummaryPanel extends StatelessWidget {
+  const RolesSummaryPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const PreviousStepEvent());
+          },
+          child: const Text('Previous'),
+        ),
+        const SizedBox(height: 12),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+          child: const Text('Next'),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/wallet_link/select_wallet/select_wallet_panel.dart

@@ -0,0 +1,34 @@
+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:flutter/material.dart';
+
+// TODO(dtscalac): define content
+class SelectWalletPanel extends StatelessWidget {
+  const SelectWalletPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const PreviousStepEvent());
+          },
+          child: const Text('Previous'),
+        ),
+        const SizedBox(height: 12),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+          child: const Text('Next'),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/wallet_link/wallet_details/wallet_details_panel.dart

@@ -0,0 +1,34 @@
+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:flutter/material.dart';
+
+// TODO(dtscalac): define content
+class WalletDetailsPanel extends StatelessWidget {
+  const WalletDetailsPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const PreviousStepEvent());
+          },
+          child: const Text('Previous'),
+        ),
+        const SizedBox(height: 12),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationBloc.of(context).add(const NextStepEvent());
+          },
+          child: const Text('Next'),
+        ),
+      ],
+    );
+  }
+}

catalyst_voices/lib/pages/registration/wallet_link/wallet_link_panel.dart

@@ -0,0 +1,29 @@
+import 'package:catalyst_voices/pages/registration/wallet_link/intro/intro_panel.dart';
+import 'package:catalyst_voices/pages/registration/wallet_link/rbac_transaction/rbac_transaction_panel.dart';
+import 'package:catalyst_voices/pages/registration/wallet_link/roles_chooser/roles_chooser_panel.dart';
+import 'package:catalyst_voices/pages/registration/wallet_link/roles_summary/roles_summary_panel.dart';
+import 'package:catalyst_voices/pages/registration/wallet_link/select_wallet/select_wallet_panel.dart';
+import 'package:catalyst_voices/pages/registration/wallet_link/wallet_details/wallet_details_panel.dart';
+import 'package:catalyst_voices_models/catalyst_voices_models.dart';
+import 'package:flutter/material.dart';
+
+class WalletLinkPanel extends StatelessWidget {
+  final WalletLinkStage stage;
+
+  const WalletLinkPanel({
+    super.key,
+    required this.stage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (stage) {
+      WalletLinkStage.intro => const IntroPanel(),
+      WalletLinkStage.selectWallet => const SelectWalletPanel(),
+      WalletLinkStage.walletDetails => const WalletDetailsPanel(),
+      WalletLinkStage.rolesChooser => const RolesChooserPanel(),
+      WalletLinkStage.rolesSummary => const RolesSummaryPanel(),
+      WalletLinkStage.rbacTransaction => const RbacTransactionPanel(),
+    };
+  }
+}

catalyst_voices/packages/catalyst_voices_blocs/lib/src/registration/controllers/wallet_link_controller.dart

@@ -17,7 +17,15 @@ final class RegistrationWalletLinkController
     final nextStep = switch (_stage) {
       WalletLinkStage.intro =>
         const WalletLink(stage: WalletLinkStage.selectWallet),
-      WalletLinkStage.selectWallet => null,
+      WalletLinkStage.selectWallet =>
+        const WalletLink(stage: WalletLinkStage.walletDetails),
+      WalletLinkStage.walletDetails =>
+        const WalletLink(stage: WalletLinkStage.rolesChooser),
+      WalletLinkStage.rolesChooser =>
+        const WalletLink(stage: WalletLinkStage.rolesSummary),
+      WalletLinkStage.rolesSummary =>
+        const WalletLink(stage: WalletLinkStage.rbacTransaction),
+      WalletLinkStage.rbacTransaction => null,
     };
 
     if (nextStep != null) {
@@ -33,6 +41,14 @@ final class RegistrationWalletLinkController
       WalletLinkStage.intro => null,
       WalletLinkStage.selectWallet =>
         const WalletLink(stage: WalletLinkStage.intro),
+      WalletLinkStage.walletDetails =>
+        const WalletLink(stage: WalletLinkStage.selectWallet),
+      WalletLinkStage.rolesChooser =>
+        const WalletLink(stage: WalletLinkStage.walletDetails),
+      WalletLinkStage.rolesSummary =>
+        const WalletLink(stage: WalletLinkStage.rolesChooser),
+      WalletLinkStage.rbacTransaction =>
+        const WalletLink(stage: WalletLinkStage.rolesSummary),
     };
 
     if (previousStep != null) {

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

@@ -680,25 +680,37 @@ abstract class VoicesLocalizations {
   ///
   /// In en, this message translates to:
   /// **'Link keys to your Catalyst Keychain'**
-  String get walletLink_header;
+  String get walletLinkHeader;
 
-  /// A subheader in link wallet flow in registration.
+  /// A subheader in link wallet flow in registration for wallet connection.
   ///
   /// In en, this message translates to:
   /// **'Link your Cardano wallet'**
-  String get walletLink_subheader;
+  String get walletLinkWalletSubheader;
+
+  /// A subheader in link wallet flow in registration for role chooser state.
+  ///
+  /// In en, this message translates to:
+  /// **'Select your Catalyst roles'**
+  String get walletLinkRolesSubheader;
+
+  /// A subheader in link wallet flow in registration for RBAC transaction.
+  ///
+  /// In en, this message translates to:
+  /// **'Sign your Catalyst roles to the\nCardano mainnet'**
+  String get walletLinkTransactionSubheader;
 
   /// A title in link wallet flow on intro screen.
   ///
   /// In en, this message translates to:
   /// **'Link Cardano Wallet & Catalyst Roles to you Catalyst Keychain.'**
-  String get walletLink_intro_title;
+  String get walletLinkIntroTitle;
 
   /// A message (content) in link wallet flow on intro screen.
   ///
   /// In en, this message translates to:
   /// **'You\'re almost there! This is the final and most important step in your account setup.\n\nWe\'re going to link a Cardano Wallet to your Catalyst Keychain, so you can start collecting Role Keys.\n\nRole Keys allow you to enter new spaces, discover new ways to participate, and unlock new ways to earn rewards.\n\nWe\'ll start with your Voter Key by default. You can decide to add a Proposer Key and Drep key if you want, or you can always add them later.'**
-  String get walletLink_intro_content;
+  String get walletLinkIntroContent;
 
   /// No description provided for @accountCreationCreate.
   ///