feat(cat-voices): add account role (#2110)

* chore: define different registration types

* chore: typo fix

* feat: more generic AccountRole-s in registration

* feat: different exit confirm dialog for account update

* feat: allow pass role selection when roles are different

* feat: append new role only in reg transaction

* refactor: fix imports

* feat: dynamic registration transaction roles

* chore: fix import

* chore: emitting localized errors

* chore: line max chars

* fix: create correct key per role

* refactor: ues pattern for materKey in registration

* fix: rename correctly method from cert to publicKey

* fix: pass dartCerts only in first registration transaction

* fix: imports

Author: damian-molinski

catalyst_voices/apps/voices/lib/dependency/dependencies.dart

@@ -70,6 +70,7 @@ final class Dependencies extends DependencyProvider {
           downloaderService: get<DownloaderService>(),
           userService: get<UserService>(),
           registrationService: get<RegistrationService>(),
+          keyDerivationService: get<KeyDerivationService>(),
           progressNotifier: get<RegistrationProgressNotifier>(),
           blockchainConfig: get<AppConfig>().blockchain,
         );

catalyst_voices/apps/voices/lib/pages/account/unlock_keychain_dialog.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:catalyst_voices/common/error_handler.dart';
 import 'package:catalyst_voices/pages/registration/pictures/unlock_keychain_picture.dart';
 import 'package:catalyst_voices/pages/registration/registration_dialog.dart';
+import 'package:catalyst_voices/pages/registration/registration_type.dart';
 import 'package:catalyst_voices/pages/registration/widgets/information_panel.dart';
 import 'package:catalyst_voices/pages/registration/widgets/registration_stage_message.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
@@ -17,6 +18,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 class UnlockKeychainDialog extends StatefulWidget {
   const UnlockKeychainDialog({super.key});
 
+  @override
+  State<UnlockKeychainDialog> createState() => _UnlockKeychainDialogState();
+
   static Future<void> show(BuildContext context) {
     return VoicesDialog.show(
       context: context,
@@ -25,16 +29,73 @@ class UnlockKeychainDialog extends StatefulWidget {
       barrierDismissible: false,
     );
   }
+}
+
+class _Navigation extends StatelessWidget {
+  final VoidCallback onUnlock;
+  final VoidCallback onRecover;
+
+  const _Navigation({
+    required this.onUnlock,
+    required this.onRecover,
+  });
 
   @override
-  State<UnlockKeychainDialog> createState() => _UnlockKeychainDialogState();
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        VoicesFilledButton(
+          key: const Key('UnlockConfirmPasswordButton'),
+          onTap: onUnlock,
+          child: Text(context.l10n.confirmPassword),
+        ),
+        const SizedBox(height: 10),
+        Row(
+          children: [
+            Expanded(
+              child: VoicesOutlinedButton(
+                key: const Key('UnlockRecoverButton'),
+                onTap: onRecover,
+                child: Text(context.l10n.recoverAccount),
+              ),
+            ),
+            const SizedBox(width: 10),
+            Expanded(
+              child: VoicesTextButton(
+                key: const Key('UnlockContinueAsGuestButton'),
+                onTap: () => Navigator.of(context).pop(),
+                child: Text(context.l10n.continueAsGuest),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
 }
 
 class _UnlockKeychainDialogState extends State<UnlockKeychainDialog>
     with ErrorHandlerStateMixin<SessionCubit, UnlockKeychainDialog> {
   final TextEditingController _passwordController = TextEditingController();
   LocalizedException? _error;
 
+  @override
+  Widget build(BuildContext context) {
+    return VoicesTwoPaneDialog(
+      left: InformationPanel(
+        title: context.l10n.unlockDialogHeader,
+        picture: const UnlockKeychainPicture(),
+      ),
+      right: _UnlockPasswordPanel(
+        controller: _passwordController,
+        error: _error,
+        onUnlock: _onUnlock,
+        onRecover: _onRecover,
+      ),
+    );
+  }
+
   @override
   void dispose() {
     _passwordController.dispose();
@@ -50,18 +111,13 @@ class _UnlockKeychainDialogState extends State<UnlockKeychainDialog>
     });
   }
 
-  @override
-  Widget build(BuildContext context) {
-    return VoicesTwoPaneDialog(
-      left: InformationPanel(
-        title: context.l10n.unlockDialogHeader,
-        picture: const UnlockKeychainPicture(),
-      ),
-      right: _UnlockPasswordPanel(
-        controller: _passwordController,
-        error: _error,
-        onUnlock: _onUnlock,
-        onRecover: _onRecover,
+  void _onRecover() {
+    Navigator.of(context).pop();
+
+    unawaited(
+      RegistrationDialog.show(
+        context,
+        type: const RecoverRegistration(),
       ),
     );
   }
@@ -88,56 +144,6 @@ class _UnlockKeychainDialogState extends State<UnlockKeychainDialog>
       });
     }
   }
-
-  void _onRecover() {
-    Navigator.of(context).pop();
-
-    unawaited(
-      RegistrationDialog.show(
-        context,
-        step: const RecoverMethodStep(),
-      ),
-    );
-  }
-}
-
-class _UnlockPasswordPanel extends StatelessWidget {
-  final TextEditingController controller;
-  final LocalizedException? error;
-  final VoidCallback onUnlock;
-  final VoidCallback onRecover;
-
-  const _UnlockPasswordPanel({
-    required this.controller,
-    required this.error,
-    required this.onUnlock,
-    required this.onRecover,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        const SizedBox(height: 24),
-        RegistrationStageMessage(
-          title: Text(context.l10n.unlockDialogTitle),
-          subtitle: Text(context.l10n.unlockDialogContent),
-        ),
-        const SizedBox(height: 24),
-        _UnlockPassword(
-          controller: controller,
-          error: error,
-          onUnlock: onUnlock,
-        ),
-        const Spacer(),
-        _Navigation(
-          onUnlock: onUnlock,
-          onRecover: onRecover,
-        ),
-      ],
-    );
-  }
 }
 
 class _UnlockPassword extends StatelessWidget {
@@ -167,11 +173,15 @@ class _UnlockPassword extends StatelessWidget {
   }
 }
 
-class _Navigation extends StatelessWidget {
+class _UnlockPasswordPanel extends StatelessWidget {
+  final TextEditingController controller;
+  final LocalizedException? error;
   final VoidCallback onUnlock;
   final VoidCallback onRecover;
 
-  const _Navigation({
+  const _UnlockPasswordPanel({
+    required this.controller,
+    required this.error,
     required this.onUnlock,
     required this.onRecover,
   });
@@ -181,30 +191,21 @@ class _Navigation extends StatelessWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        VoicesFilledButton(
-          key: const Key('UnlockConfirmPasswordButton'),
-          onTap: onUnlock,
-          child: Text(context.l10n.confirmPassword),
+        const SizedBox(height: 24),
+        RegistrationStageMessage(
+          title: Text(context.l10n.unlockDialogTitle),
+          subtitle: Text(context.l10n.unlockDialogContent),
         ),
-        const SizedBox(height: 10),
-        Row(
-          children: [
-            Expanded(
-              child: VoicesOutlinedButton(
-                key: const Key('UnlockRecoverButton'),
-                onTap: onRecover,
-                child: Text(context.l10n.recoverAccount),
-              ),
-            ),
-            const SizedBox(width: 10),
-            Expanded(
-              child: VoicesTextButton(
-                key: const Key('UnlockContinueAsGuestButton'),
-                onTap: () => Navigator.of(context).pop(),
-                child: Text(context.l10n.continueAsGuest),
-              ),
-            ),
-          ],
+        const SizedBox(height: 24),
+        _UnlockPassword(
+          controller: controller,
+          error: error,
+          onUnlock: onUnlock,
+        ),
+        const Spacer(),
+        _Navigation(
+          onUnlock: onUnlock,
+          onRecover: onRecover,
         ),
       ],
     );

catalyst_voices/apps/voices/lib/pages/account/widgets/account_roles_tile.dart

@@ -1,6 +1,8 @@
 import 'package:catalyst_voices/common/ext/account_role_ext.dart';
 import 'package:catalyst_voices/common/ext/build_context_ext.dart';
 import 'package:catalyst_voices/pages/account/edit_roles_dialog.dart';
+import 'package:catalyst_voices/pages/registration/registration_dialog.dart';
+import 'package:catalyst_voices/pages/registration/registration_type.dart';
 import 'package:catalyst_voices/widgets/common/affix_decorator.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
@@ -54,7 +56,15 @@ class _AccountRolesTileState extends State<_AccountRolesTile> {
       return;
     }
 
-    // TODO(damian-molinski): Registration dialog
+    final accountId = context.read<SessionCubit>().state.account?.catalystId;
+    if (accountId == null) {
+      return;
+    }
+
+    await RegistrationDialog.show(
+      context,
+      type: UpdateAccount(id: accountId),
+    );
   }
 }
 
@@ -78,20 +88,18 @@ class _EditButton extends StatelessWidget {
   }
 }
 
-class _Roles extends StatelessWidget {
-  final List<MyAccountRoleItem> items;
+class _IconColor implements WidgetStateProperty<Color> {
+  final VoicesColorScheme colors;
 
-  const _Roles({
-    required this.items,
-  });
+  const _IconColor(this.colors);
 
   @override
-  Widget build(BuildContext context) {
-    return Wrap(
-      spacing: 12,
-      runSpacing: 12,
-      children: items.map((item) => _RoleCell(item: item)).toList(),
-    );
+  Color resolve(Set<WidgetState> states) {
+    if (states.contains(WidgetState.disabled)) {
+      return colors.iconsDisabled;
+    }
+
+    return colors.iconsForeground;
   }
 }
 
@@ -150,18 +158,20 @@ class _RoleCellBorder implements WidgetStateProperty<Border> {
   }
 }
 
-class _IconColor implements WidgetStateProperty<Color> {
-  final VoicesColorScheme colors;
+class _Roles extends StatelessWidget {
+  final List<MyAccountRoleItem> items;
 
-  const _IconColor(this.colors);
+  const _Roles({
+    required this.items,
+  });
 
   @override
-  Color resolve(Set<WidgetState> states) {
-    if (states.contains(WidgetState.disabled)) {
-      return colors.iconsDisabled;
-    }
-
-    return colors.iconsForeground;
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 12,
+      runSpacing: 12,
+      children: items.map((item) => _RoleCell(item: item)).toList(),
+    );
   }
 }
 

catalyst_voices/apps/voices/lib/pages/registration/account_completed/account_completed_panel.dart

@@ -115,7 +115,7 @@ class _ReviewMyAccountButton extends StatelessWidget {
 }
 
 class _RolesFooter extends StatelessWidget {
-  final List<AccountRole> roles;
+  final Set<AccountRole> roles;
 
   const _RolesFooter(this.roles);
 
@@ -169,7 +169,7 @@ class _RolesFooter extends StatelessWidget {
 }
 
 class _RolesSelectedCard extends StatelessWidget {
-  final List<AccountRole> roles;
+  final Set<AccountRole> roles;
 
   const _RolesSelectedCard({
     required this.roles,
@@ -193,12 +193,8 @@ class _RolesSelectedCardSelector extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BlocSelector<RegistrationCubit, RegistrationState,
-        List<AccountRole>>(
-      selector: (state) {
-        return state.walletLinkStateData.selectedRoles?.toList() ??
-            state.walletLinkStateData.defaultRoles.toList();
-      },
+    return BlocSelector<RegistrationCubit, RegistrationState, Set<AccountRole>>(
+      selector: (state) => state.walletLinkStateData.selectedRoleTypes,
       builder: (context, roles) {
         return _RolesSelectedCard(roles: roles);
       },