feat(cat-voices): role summary viewer (#924)

* feat(cat-voices): registration transaction summary * chore: cleanup localizations * refactor: apply bullet list * feat: add missing wallet link * feat: add missing wallet details * feat: add role chooser panel content * feat(cat-voices): add roles chooser * chore: revert * feat: add role summary screen * fix: background color * chore: update colors
input-output-hk · Oct 3, 2024 · face4cf · face4cf
1 parent 89641a5
commit face4cf
Show file tree

Hide file tree

Showing 21 changed files with 247 additions and 36 deletions.
diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/instructions_panel.dart
@@ -17,8 +17,8 @@ class InstructionsPanel extends StatelessWidget {
         Expanded(
           child: SingleChildScrollView(
             child: RegistrationStageMessage(
-              title: l10n.accountInstructionsTitle,
-              subtitle: l10n.accountInstructionsMessage,
+              title: Text(l10n.accountInstructionsTitle),
+              subtitle: Text(l10n.accountInstructionsMessage),
             ),
           ),
         ),

diff --git a/...es/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart b/...es/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart
@@ -19,8 +19,9 @@ class SeedPhraseCheckInstructionsPanel extends StatelessWidget {
         Expanded(
           child: SingleChildScrollView(
             child: RegistrationStageMessage(
-              title: l10n.createKeychainSeedPhraseCheckInstructionsTitle,
-              subtitle: l10n.createKeychainSeedPhraseCheckInstructionsSubtitle,
+              title: Text(l10n.createKeychainSeedPhraseCheckInstructionsTitle),
+              subtitle:
+                  Text(l10n.createKeychainSeedPhraseCheckInstructionsSubtitle),
             ),
           ),
         ),

diff --git a/...t_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart b/...t_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart
@@ -24,12 +24,16 @@ class SeedPhraseCheckResultPanel extends StatelessWidget {
         Expanded(
           child: SingleChildScrollView(
             child: RegistrationStageMessage(
-              title: isCheckConfirmed
-                  ? l10n.createKeychainSeedPhraseCheckSuccessTitle
-                  : 'Seed phrase words does not match!',
-              subtitle: isCheckConfirmed
-                  ? l10n.createKeychainSeedPhraseCheckSuccessSubtitle
-                  : 'Go back ana make sure order is correct',
+              title: Text(
+                isCheckConfirmed
+                    ? l10n.createKeychainSeedPhraseCheckSuccessTitle
+                    : 'Seed phrase words does not match!',
+              ),
+              subtitle: Text(
+                isCheckConfirmed
+                    ? l10n.createKeychainSeedPhraseCheckSuccessSubtitle
+                    : 'Go back ana make sure order is correct',
+              ),
             ),
           ),
         ),

diff --git a/catalyst_voices/lib/pages/registration/create_keychain/stage/splash_panel.dart b/catalyst_voices/lib/pages/registration/create_keychain/stage/splash_panel.dart
@@ -14,8 +14,8 @@ class SplashPanel extends StatelessWidget {
       children: [
         const SizedBox(height: 24),
         RegistrationStageMessage(
-          title: context.l10n.accountCreationSplashTitle,
-          subtitle: context.l10n.accountCreationSplashMessage,
+          title: Text(context.l10n.accountCreationSplashTitle),
+          subtitle: Text(context.l10n.accountCreationSplashMessage),
         ),
         const Spacer(),
         VoicesFilledButton(

diff --git a/...ices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart b/...ices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart
@@ -19,8 +19,9 @@ class UnlockPasswordInstructionsPanel extends StatelessWidget {
         Expanded(
           child: SingleChildScrollView(
             child: RegistrationStageMessage(
-              title: l10n.createKeychainUnlockPasswordInstructionsTitle,
-              subtitle: l10n.createKeychainUnlockPasswordInstructionsSubtitle,
+              title: Text(l10n.createKeychainUnlockPasswordInstructionsTitle),
+              subtitle:
+                  Text(l10n.createKeychainUnlockPasswordInstructionsSubtitle),
             ),
           ),
         ),

diff --git a/catalyst_voices/lib/pages/registration/get_started/get_started_panel.dart b/catalyst_voices/lib/pages/registration/get_started/get_started_panel.dart
@@ -19,8 +19,8 @@ class GetStartedPanel extends StatelessWidget {
       children: [
         const SizedBox(height: 24),
         RegistrationStageMessage(
-          title: context.l10n.accountCreationGetStartedTitle,
-          subtitle: context.l10n.accountCreationGetStatedDesc,
+          title: Text(context.l10n.accountCreationGetStartedTitle),
+          subtitle: Text(context.l10n.accountCreationGetStatedDesc),
           spacing: 12,
           textColor: theme.colors.textOnPrimaryLevel1,
         ),

diff --git a/catalyst_voices/lib/pages/registration/registration_stage_message.dart b/catalyst_voices/lib/pages/registration/registration_stage_message.dart
@@ -2,8 +2,8 @@ import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:flutter/material.dart';
 
 class RegistrationStageMessage extends StatelessWidget {
-  final String title;
-  final String subtitle;
+  final Widget title;
+  final Widget subtitle;
   final double spacing;
   final Color? textColor;
 
@@ -24,14 +24,14 @@ class RegistrationStageMessage extends StatelessWidget {
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Text(
-          title,
-          style: theme.textTheme.titleMedium?.copyWith(color: textColor),
+        DefaultTextStyle(
+          style: theme.textTheme.titleMedium!.copyWith(color: textColor),
+          child: title,
         ),
         SizedBox(height: spacing),
-        Text(
-          subtitle,
-          style: theme.textTheme.bodyMedium?.copyWith(color: textColor),
+        DefaultTextStyle(
+          style: theme.textTheme.bodyMedium!.copyWith(color: textColor),
+          child: subtitle,
         ),
       ],
     );

diff --git a/catalyst_voices/lib/pages/registration/wallet_link/stage/intro_panel.dart b/catalyst_voices/lib/pages/registration/wallet_link/stage/intro_panel.dart
@@ -15,8 +15,8 @@ class IntroPanel extends StatelessWidget {
       children: [
         const SizedBox(height: 24),
         RegistrationStageMessage(
-          title: context.l10n.walletLinkIntroTitle,
-          subtitle: context.l10n.walletLinkIntroContent,
+          title: Text(context.l10n.walletLinkIntroTitle),
+          subtitle: Text(context.l10n.walletLinkIntroContent),
         ),
         const Spacer(),
         VoicesFilledButton(

diff --git a/catalyst_voices/lib/pages/registration/wallet_link/stage/roles_chooser_panel.dart b/catalyst_voices/lib/pages/registration/wallet_link/stage/roles_chooser_panel.dart
@@ -25,8 +25,8 @@ class RolesChooserPanel extends StatelessWidget {
       children: [
         const SizedBox(height: 24),
         RegistrationStageMessage(
-          title: context.l10n.walletLinkRoleChooserTitle,
-          subtitle: context.l10n.walletLinkRoleChooserContent,
+          title: Text(context.l10n.walletLinkRoleChooserTitle),
+          subtitle: Text(context.l10n.walletLinkRoleChooserContent),
           spacing: 12,
         ),
         const SizedBox(height: 12),

diff --git a/catalyst_voices/lib/pages/registration/wallet_link/stage/roles_summary_panel.dart b/catalyst_voices/lib/pages/registration/wallet_link/stage/roles_summary_panel.dart
@@ -1,12 +1,80 @@
-import 'package:catalyst_voices/pages/registration/placeholder_panel.dart';
+import 'package:catalyst_voices/pages/registration/registration_stage_message.dart';
+import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:flutter/material.dart';
 
-// TODO(dtscalac): define content
 class RolesSummaryPanel extends StatelessWidget {
-  const RolesSummaryPanel({super.key});
+  final Set<AccountRole> defaultRoles;
+  final Set<AccountRole> selectedRoles;
+
+  const RolesSummaryPanel({
+    super.key,
+    required this.defaultRoles,
+    required this.selectedRoles,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const SizedBox(height: 24),
+        RegistrationStageMessage(
+          title: Text(context.l10n.walletLinkRoleSummaryTitle),
+          subtitle: _Subtitle(selectedRoles: selectedRoles),
+          spacing: 12,
+        ),
+        const SizedBox(height: 12),
+        RolesSummaryContainer(
+          selected: selectedRoles,
+          lockedValuesAsDefault: defaultRoles,
+        ),
+        const Spacer(),
+        VoicesFilledButton(
+          leading: VoicesAssets.icons.wallet.buildIcon(),
+          onTap: () {
+            RegistrationCubit.of(context).nextStep();
+          },
+          child: Text(context.l10n.walletLinkRoleSummaryButton),
+        ),
+        const SizedBox(height: 10),
+        VoicesTextButton(
+          onTap: () {
+            RegistrationCubit.of(context).changeRoleSetup();
+          },
+          child: Text(context.l10n.walletLinkTransactionChangeRoles),
+        ),
+      ],
+    );
+  }
+}
+
+class _Subtitle extends StatelessWidget {
+  final Set<AccountRole> selectedRoles;
+
+  const _Subtitle({required this.selectedRoles});
 
   @override
   Widget build(BuildContext context) {
-    return const PlaceholderPanel();
+    return Text.rich(
+      TextSpan(
+        children: [
+          TextSpan(
+            text: context.l10n.walletLinkRoleSummaryContent1,
+          ),
+          TextSpan(
+            text: context.l10n
+                .walletLinkRoleSummaryContent2(selectedRoles.length),
+            style: const TextStyle(fontWeight: FontWeight.bold),
+          ),
+          TextSpan(
+            text: context.l10n.walletLinkRoleSummaryContent3,
+          ),
+        ],
+      ),
+    );
   }
 }
diff --git a/catalyst_voices/lib/pages/registration/wallet_link/stage/select_wallet_panel.dart b/catalyst_voices/lib/pages/registration/wallet_link/stage/select_wallet_panel.dart
@@ -37,8 +37,8 @@ class _SelectWalletPanelState extends State<SelectWalletPanel> {
       children: [
         const SizedBox(height: 24),
         RegistrationStageMessage(
-          title: context.l10n.walletLinkSelectWalletTitle,
-          subtitle: context.l10n.walletLinkSelectWalletContent,
+          title: Text(context.l10n.walletLinkSelectWalletTitle),
+          subtitle: Text(context.l10n.walletLinkSelectWalletContent),
         ),
         const SizedBox(height: 40),
         Expanded(

diff --git a/catalyst_voices/lib/pages/registration/wallet_link/wallet_link_panel.dart b/catalyst_voices/lib/pages/registration/wallet_link/wallet_link_panel.dart
@@ -34,7 +34,10 @@ class WalletLinkPanel extends StatelessWidget {
           defaultRoles: stateData.defaultRoles,
           selectedRoles: stateData.selectedRoles ?? stateData.defaultRoles,
         ),
-      WalletLinkStage.rolesSummary => const RolesSummaryPanel(),
+      WalletLinkStage.rolesSummary => RolesSummaryPanel(
+          defaultRoles: stateData.defaultRoles,
+          selectedRoles: stateData.selectedRoles ?? stateData.defaultRoles,
+        ),
       WalletLinkStage.rbacTransaction => RbacTransactionPanel(
           roles: stateData.selectedRoles ?? stateData.defaultRoles,
           walletDetails: stateData.selectedWallet!,

diff --git a/catalyst_voices/lib/widgets/cards/role_chooser_card.dart b/catalyst_voices/lib/widgets/cards/role_chooser_card.dart
@@ -181,7 +181,7 @@ class _DisplayingValueAsChips extends StatelessWidget {
               horizontal: 20,
               vertical: 4,
             ),
-            backgroundColor: Theme.of(context).colors.iconsForeground,
+            backgroundColor: Theme.of(context).colors.iconsBackgroundVariant,
           ),
       ],
     );

diff --git a/catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml b/catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml
@@ -48,6 +48,7 @@
     <color name="light_on_surface_error_016">#29CC0000</color>
     <color name="light_icons_foreground">#212A3D</color>
     <color name="light_icons_background">#FFFFFF</color>
+    <color name="light_icons_background_variant">#F2F4F8</color>
     <color name="light_icons_on_image">#FFFFFF</color>
     <color name="light_icons_disabled">#61212A3D</color>
     <color name="light_icons_primary">#123CD3</color>
@@ -114,6 +115,7 @@
     <color name="dark_on_surface_error_016">#29CC0000</color>
     <color name="dark_icons_foreground">#F2F4F8</color>
     <color name="dark_icons_background">#212A3D</color>
+    <color name="dark_icons_background_variant">#F2F4F8</color>
     <color name="dark_icons_on_image">#FFFFFF</color>
     <color name="dark_icons_disabled">#61BFC8D9</color>
     <color name="dark_icons_primary">#728EF3</color>

diff --git a/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart b/catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart
diff --git a/..._voices/packages/catalyst_voices_brands/lib/src/theme_extensions/voices_color_scheme.dart b/..._voices/packages/catalyst_voices_brands/lib/src/theme_extensions/voices_color_scheme.dart
@@ -40,6 +40,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
   final Color? onSurfaceError016;
   final Color? iconsForeground;
   final Color? iconsBackground;
+  final Color? iconsBackgroundVariant;
   final Color? iconsOnImage;
   final Color? iconsDisabled;
   final Color? iconsPrimary;
@@ -98,6 +99,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     required this.onSurfaceError016,
     required this.iconsForeground,
     required this.iconsBackground,
+    required this.iconsBackgroundVariant,
     required this.iconsOnImage,
     required this.iconsDisabled,
     required this.iconsPrimary,
@@ -158,6 +160,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     this.onSurfaceError016,
     this.iconsForeground,
     this.iconsBackground,
+    this.iconsBackgroundVariant,
     this.iconsOnImage,
     this.iconsDisabled,
     this.iconsPrimary,
@@ -218,6 +221,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
     Color? onSurfaceError016,
     Color? iconsForeground,
     Color? iconsBackground,
+    Color? iconsBackgroundVariant,
     Color? iconsOnImage,
     Color? iconsDisabled,
     Color? iconsPrimary,
@@ -283,6 +287,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
       onSurfaceError016: onSurfaceError016 ?? this.onSurfaceError016,
       iconsForeground: iconsForeground ?? this.iconsForeground,
       iconsBackground: iconsBackground ?? this.iconsBackground,
+      iconsBackgroundVariant:
+          iconsBackgroundVariant ?? this.iconsBackgroundVariant,
       iconsOnImage: iconsOnImage ?? this.iconsOnImage,
       iconsDisabled: iconsDisabled ?? this.iconsDisabled,
       iconsPrimary: iconsPrimary ?? this.iconsPrimary,
@@ -400,6 +406,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
           Color.lerp(onSurfaceError016, other.onSurfaceError016, t),
       iconsForeground: Color.lerp(iconsForeground, other.iconsForeground, t),
       iconsBackground: Color.lerp(iconsBackground, other.iconsBackground, t),
+      iconsBackgroundVariant:
+          Color.lerp(iconsBackgroundVariant, other.iconsBackgroundVariant, t),
       iconsOnImage: Color.lerp(iconsOnImage, other.iconsOnImage, t),
       iconsDisabled: Color.lerp(iconsDisabled, other.iconsDisabled, t),
       iconsPrimary: Color.lerp(iconsPrimary, other.iconsPrimary, t),

diff --git a/catalyst_voices/packages/catalyst_voices_brands/lib/src/themes/catalyst.dart b/catalyst_voices/packages/catalyst_voices_brands/lib/src/themes/catalyst.dart
@@ -57,6 +57,7 @@ const VoicesColorScheme darkVoicesColorScheme = VoicesColorScheme(
   onSurfaceError016: VoicesColors.darkOnSurfaceError016,
   iconsForeground: VoicesColors.darkIconsForeground,
   iconsBackground: VoicesColors.darkIconsBackground,
+  iconsBackgroundVariant: VoicesColors.darkIconsBackgroundVariant,
   iconsOnImage: VoicesColors.darkIconsOnImage,
   iconsDisabled: VoicesColors.darkIconsDisabled,
   iconsPrimary: VoicesColors.darkIconsPrimary,
@@ -135,6 +136,7 @@ const VoicesColorScheme lightVoicesColorScheme = VoicesColorScheme(
   onSurfaceError016: VoicesColors.lightOnSurfaceError016,
   iconsForeground: VoicesColors.lightIconsForeground,
   iconsBackground: VoicesColors.lightIconsBackground,
+  iconsBackgroundVariant: VoicesColors.lightIconsBackgroundVariant,
   iconsOnImage: VoicesColors.lightIconsOnImage,
   iconsDisabled: VoicesColors.lightIconsDisabled,
   iconsPrimary: VoicesColors.lightIconsPrimary,

diff --git a/...es/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart b/...es/packages/catalyst_voices_localization/lib/generated/catalyst_voices_localizations.dart
@@ -832,6 +832,36 @@ abstract class VoicesLocalizations {
   /// **'In Catalyst you can take on different roles, learn more below and choose your additional roles now.'**
   String get walletLinkRoleChooserContent;
 
+  /// A title on the role summary screen in registration.
+  ///
+  /// In en, this message translates to:
+  /// **'Is this your correct Catalyst role setup?'**
+  String get walletLinkRoleSummaryTitle;
+
+  /// The first part of the message on the role summary screen in registration.
+  ///
+  /// In en, this message translates to:
+  /// **'You would like to register '**
+  String get walletLinkRoleSummaryContent1;
+
+  /// The middle (bold) part of the message on the role summary screen in registration.
+  ///
+  /// In en, this message translates to:
+  /// **'{count} active {count, plural, =0{roles} =1{role} other{roles}}'**
+  String walletLinkRoleSummaryContent2(num count);
+
+  /// The last part of the message on the role summary screen in registration.
+  ///
+  /// In en, this message translates to:
+  /// **' in Catalyst.'**
+  String get walletLinkRoleSummaryContent3;
+
+  /// A button label on the role summary screen in registration for the next step.
+  ///
+  /// In en, this message translates to:
+  /// **'Confirm & Sign with wallet'**
+  String get walletLinkRoleSummaryButton;
+
   /// Message shown when redirecting to external content that describes which wallets are supported.
   ///
   /// In en, this message translates to: