Skip to content

Commit face4cf

Browse files
dtscalacdtscalac
authored
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
1 parent 89641a5 commit face4cf

21 files changed

+247
-36
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ class InstructionsPanel extends StatelessWidget {
1717
Expanded(
1818
child: SingleChildScrollView(
1919
child: RegistrationStageMessage(
20-
title: l10n.accountInstructionsTitle,
21-
subtitle: l10n.accountInstructionsMessage,
20+
title: Text(l10n.accountInstructionsTitle),
21+
subtitle: Text(l10n.accountInstructionsMessage),
2222
),
2323
),
2424
),

‎catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_instructions_panel.dart

+3-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ class SeedPhraseCheckInstructionsPanel extends StatelessWidget {
1919
Expanded(
2020
child: SingleChildScrollView(
2121
child: RegistrationStageMessage(
22-
title: l10n.createKeychainSeedPhraseCheckInstructionsTitle,
23-
subtitle: l10n.createKeychainSeedPhraseCheckInstructionsSubtitle,
22+
title: Text(l10n.createKeychainSeedPhraseCheckInstructionsTitle),
23+
subtitle:
24+
Text(l10n.createKeychainSeedPhraseCheckInstructionsSubtitle),
2425
),
2526
),
2627
),

‎catalyst_voices/lib/pages/registration/create_keychain/stage/seed_phrase_check_result_panel.dart

+10-6
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,16 @@ class SeedPhraseCheckResultPanel extends StatelessWidget {
2424
Expanded(
2525
child: SingleChildScrollView(
2626
child: RegistrationStageMessage(
27-
title: isCheckConfirmed
28-
? l10n.createKeychainSeedPhraseCheckSuccessTitle
29-
: 'Seed phrase words does not match!',
30-
subtitle: isCheckConfirmed
31-
? l10n.createKeychainSeedPhraseCheckSuccessSubtitle
32-
: 'Go back ana make sure order is correct',
27+
title: Text(
28+
isCheckConfirmed
29+
? l10n.createKeychainSeedPhraseCheckSuccessTitle
30+
: 'Seed phrase words does not match!',
31+
),
32+
subtitle: Text(
33+
isCheckConfirmed
34+
? l10n.createKeychainSeedPhraseCheckSuccessSubtitle
35+
: 'Go back ana make sure order is correct',
36+
),
3337
),
3438
),
3539
),

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ class SplashPanel extends StatelessWidget {
1414
children: [
1515
const SizedBox(height: 24),
1616
RegistrationStageMessage(
17-
title: context.l10n.accountCreationSplashTitle,
18-
subtitle: context.l10n.accountCreationSplashMessage,
17+
title: Text(context.l10n.accountCreationSplashTitle),
18+
subtitle: Text(context.l10n.accountCreationSplashMessage),
1919
),
2020
const Spacer(),
2121
VoicesFilledButton(

‎catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart

+3-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ class UnlockPasswordInstructionsPanel extends StatelessWidget {
1919
Expanded(
2020
child: SingleChildScrollView(
2121
child: RegistrationStageMessage(
22-
title: l10n.createKeychainUnlockPasswordInstructionsTitle,
23-
subtitle: l10n.createKeychainUnlockPasswordInstructionsSubtitle,
22+
title: Text(l10n.createKeychainUnlockPasswordInstructionsTitle),
23+
subtitle:
24+
Text(l10n.createKeychainUnlockPasswordInstructionsSubtitle),
2425
),
2526
),
2627
),

‎catalyst_voices/lib/pages/registration/get_started/get_started_panel.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ class GetStartedPanel extends StatelessWidget {
1919
children: [
2020
const SizedBox(height: 24),
2121
RegistrationStageMessage(
22-
title: context.l10n.accountCreationGetStartedTitle,
23-
subtitle: context.l10n.accountCreationGetStatedDesc,
22+
title: Text(context.l10n.accountCreationGetStartedTitle),
23+
subtitle: Text(context.l10n.accountCreationGetStatedDesc),
2424
spacing: 12,
2525
textColor: theme.colors.textOnPrimaryLevel1,
2626
),

‎catalyst_voices/lib/pages/registration/registration_stage_message.dart

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
22
import 'package:flutter/material.dart';
33

44
class RegistrationStageMessage extends StatelessWidget {
5-
final String title;
6-
final String subtitle;
5+
final Widget title;
6+
final Widget subtitle;
77
final double spacing;
88
final Color? textColor;
99

@@ -24,14 +24,14 @@ class RegistrationStageMessage extends StatelessWidget {
2424
mainAxisSize: MainAxisSize.min,
2525
crossAxisAlignment: CrossAxisAlignment.stretch,
2626
children: [
27-
Text(
28-
title,
29-
style: theme.textTheme.titleMedium?.copyWith(color: textColor),
27+
DefaultTextStyle(
28+
style: theme.textTheme.titleMedium!.copyWith(color: textColor),
29+
child: title,
3030
),
3131
SizedBox(height: spacing),
32-
Text(
33-
subtitle,
34-
style: theme.textTheme.bodyMedium?.copyWith(color: textColor),
32+
DefaultTextStyle(
33+
style: theme.textTheme.bodyMedium!.copyWith(color: textColor),
34+
child: subtitle,
3535
),
3636
],
3737
);

‎catalyst_voices/lib/pages/registration/wallet_link/stage/intro_panel.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ class IntroPanel extends StatelessWidget {
1515
children: [
1616
const SizedBox(height: 24),
1717
RegistrationStageMessage(
18-
title: context.l10n.walletLinkIntroTitle,
19-
subtitle: context.l10n.walletLinkIntroContent,
18+
title: Text(context.l10n.walletLinkIntroTitle),
19+
subtitle: Text(context.l10n.walletLinkIntroContent),
2020
),
2121
const Spacer(),
2222
VoicesFilledButton(

‎catalyst_voices/lib/pages/registration/wallet_link/stage/roles_chooser_panel.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ class RolesChooserPanel extends StatelessWidget {
2525
children: [
2626
const SizedBox(height: 24),
2727
RegistrationStageMessage(
28-
title: context.l10n.walletLinkRoleChooserTitle,
29-
subtitle: context.l10n.walletLinkRoleChooserContent,
28+
title: Text(context.l10n.walletLinkRoleChooserTitle),
29+
subtitle: Text(context.l10n.walletLinkRoleChooserContent),
3030
spacing: 12,
3131
),
3232
const SizedBox(height: 12),

‎catalyst_voices/lib/pages/registration/wallet_link/stage/roles_summary_panel.dart

+72-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,80 @@
1-
import 'package:catalyst_voices/pages/registration/placeholder_panel.dart';
1+
import 'package:catalyst_voices/pages/registration/registration_stage_message.dart';
2+
import 'package:catalyst_voices/widgets/widgets.dart';
3+
import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
4+
import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
5+
import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
6+
import 'package:catalyst_voices_models/catalyst_voices_models.dart';
27
import 'package:flutter/material.dart';
38

4-
// TODO(dtscalac): define content
59
class RolesSummaryPanel extends StatelessWidget {
6-
const RolesSummaryPanel({super.key});
10+
final Set<AccountRole> defaultRoles;
11+
final Set<AccountRole> selectedRoles;
12+
13+
const RolesSummaryPanel({
14+
super.key,
15+
required this.defaultRoles,
16+
required this.selectedRoles,
17+
});
18+
19+
@override
20+
Widget build(BuildContext context) {
21+
return Column(
22+
crossAxisAlignment: CrossAxisAlignment.stretch,
23+
children: [
24+
const SizedBox(height: 24),
25+
RegistrationStageMessage(
26+
title: Text(context.l10n.walletLinkRoleSummaryTitle),
27+
subtitle: _Subtitle(selectedRoles: selectedRoles),
28+
spacing: 12,
29+
),
30+
const SizedBox(height: 12),
31+
RolesSummaryContainer(
32+
selected: selectedRoles,
33+
lockedValuesAsDefault: defaultRoles,
34+
),
35+
const Spacer(),
36+
VoicesFilledButton(
37+
leading: VoicesAssets.icons.wallet.buildIcon(),
38+
onTap: () {
39+
RegistrationCubit.of(context).nextStep();
40+
},
41+
child: Text(context.l10n.walletLinkRoleSummaryButton),
42+
),
43+
const SizedBox(height: 10),
44+
VoicesTextButton(
45+
onTap: () {
46+
RegistrationCubit.of(context).changeRoleSetup();
47+
},
48+
child: Text(context.l10n.walletLinkTransactionChangeRoles),
49+
),
50+
],
51+
);
52+
}
53+
}
54+
55+
class _Subtitle extends StatelessWidget {
56+
final Set<AccountRole> selectedRoles;
57+
58+
const _Subtitle({required this.selectedRoles});
759

860
@override
961
Widget build(BuildContext context) {
10-
return const PlaceholderPanel();
62+
return Text.rich(
63+
TextSpan(
64+
children: [
65+
TextSpan(
66+
text: context.l10n.walletLinkRoleSummaryContent1,
67+
),
68+
TextSpan(
69+
text: context.l10n
70+
.walletLinkRoleSummaryContent2(selectedRoles.length),
71+
style: const TextStyle(fontWeight: FontWeight.bold),
72+
),
73+
TextSpan(
74+
text: context.l10n.walletLinkRoleSummaryContent3,
75+
),
76+
],
77+
),
78+
);
1179
}
1280
}

‎catalyst_voices/lib/pages/registration/wallet_link/stage/select_wallet_panel.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ class _SelectWalletPanelState extends State<SelectWalletPanel> {
3737
children: [
3838
const SizedBox(height: 24),
3939
RegistrationStageMessage(
40-
title: context.l10n.walletLinkSelectWalletTitle,
41-
subtitle: context.l10n.walletLinkSelectWalletContent,
40+
title: Text(context.l10n.walletLinkSelectWalletTitle),
41+
subtitle: Text(context.l10n.walletLinkSelectWalletContent),
4242
),
4343
const SizedBox(height: 40),
4444
Expanded(

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ class WalletLinkPanel extends StatelessWidget {
3434
defaultRoles: stateData.defaultRoles,
3535
selectedRoles: stateData.selectedRoles ?? stateData.defaultRoles,
3636
),
37-
WalletLinkStage.rolesSummary => const RolesSummaryPanel(),
37+
WalletLinkStage.rolesSummary => RolesSummaryPanel(
38+
defaultRoles: stateData.defaultRoles,
39+
selectedRoles: stateData.selectedRoles ?? stateData.defaultRoles,
40+
),
3841
WalletLinkStage.rbacTransaction => RbacTransactionPanel(
3942
roles: stateData.selectedRoles ?? stateData.defaultRoles,
4043
walletDetails: stateData.selectedWallet!,

‎catalyst_voices/lib/widgets/cards/role_chooser_card.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ class _DisplayingValueAsChips extends StatelessWidget {
181181
horizontal: 20,
182182
vertical: 4,
183183
),
184-
backgroundColor: Theme.of(context).colors.iconsForeground,
184+
backgroundColor: Theme.of(context).colors.iconsBackgroundVariant,
185185
),
186186
],
187187
);

‎catalyst_voices/packages/catalyst_voices_assets/assets/colors/colors.xml

+2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
<color name="light_on_surface_error_016">#29CC0000</color>
4949
<color name="light_icons_foreground">#212A3D</color>
5050
<color name="light_icons_background">#FFFFFF</color>
51+
<color name="light_icons_background_variant">#F2F4F8</color>
5152
<color name="light_icons_on_image">#FFFFFF</color>
5253
<color name="light_icons_disabled">#61212A3D</color>
5354
<color name="light_icons_primary">#123CD3</color>
@@ -114,6 +115,7 @@
114115
<color name="dark_on_surface_error_016">#29CC0000</color>
115116
<color name="dark_icons_foreground">#F2F4F8</color>
116117
<color name="dark_icons_background">#212A3D</color>
118+
<color name="dark_icons_background_variant">#F2F4F8</color>
117119
<color name="dark_icons_on_image">#FFFFFF</color>
118120
<color name="dark_icons_disabled">#61BFC8D9</color>
119121
<color name="dark_icons_primary">#728EF3</color>

‎catalyst_voices/packages/catalyst_voices_assets/lib/generated/colors.gen.dart

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎catalyst_voices/packages/catalyst_voices_brands/lib/src/theme_extensions/voices_color_scheme.dart

+8
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
4040
final Color? onSurfaceError016;
4141
final Color? iconsForeground;
4242
final Color? iconsBackground;
43+
final Color? iconsBackgroundVariant;
4344
final Color? iconsOnImage;
4445
final Color? iconsDisabled;
4546
final Color? iconsPrimary;
@@ -98,6 +99,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
9899
required this.onSurfaceError016,
99100
required this.iconsForeground,
100101
required this.iconsBackground,
102+
required this.iconsBackgroundVariant,
101103
required this.iconsOnImage,
102104
required this.iconsDisabled,
103105
required this.iconsPrimary,
@@ -158,6 +160,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
158160
this.onSurfaceError016,
159161
this.iconsForeground,
160162
this.iconsBackground,
163+
this.iconsBackgroundVariant,
161164
this.iconsOnImage,
162165
this.iconsDisabled,
163166
this.iconsPrimary,
@@ -218,6 +221,7 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
218221
Color? onSurfaceError016,
219222
Color? iconsForeground,
220223
Color? iconsBackground,
224+
Color? iconsBackgroundVariant,
221225
Color? iconsOnImage,
222226
Color? iconsDisabled,
223227
Color? iconsPrimary,
@@ -283,6 +287,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
283287
onSurfaceError016: onSurfaceError016 ?? this.onSurfaceError016,
284288
iconsForeground: iconsForeground ?? this.iconsForeground,
285289
iconsBackground: iconsBackground ?? this.iconsBackground,
290+
iconsBackgroundVariant:
291+
iconsBackgroundVariant ?? this.iconsBackgroundVariant,
286292
iconsOnImage: iconsOnImage ?? this.iconsOnImage,
287293
iconsDisabled: iconsDisabled ?? this.iconsDisabled,
288294
iconsPrimary: iconsPrimary ?? this.iconsPrimary,
@@ -400,6 +406,8 @@ class VoicesColorScheme extends ThemeExtension<VoicesColorScheme> {
400406
Color.lerp(onSurfaceError016, other.onSurfaceError016, t),
401407
iconsForeground: Color.lerp(iconsForeground, other.iconsForeground, t),
402408
iconsBackground: Color.lerp(iconsBackground, other.iconsBackground, t),
409+
iconsBackgroundVariant:
410+
Color.lerp(iconsBackgroundVariant, other.iconsBackgroundVariant, t),
403411
iconsOnImage: Color.lerp(iconsOnImage, other.iconsOnImage, t),
404412
iconsDisabled: Color.lerp(iconsDisabled, other.iconsDisabled, t),
405413
iconsPrimary: Color.lerp(iconsPrimary, other.iconsPrimary, t),

‎catalyst_voices/packages/catalyst_voices_brands/lib/src/themes/catalyst.dart

+2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const VoicesColorScheme darkVoicesColorScheme = VoicesColorScheme(
5757
onSurfaceError016: VoicesColors.darkOnSurfaceError016,
5858
iconsForeground: VoicesColors.darkIconsForeground,
5959
iconsBackground: VoicesColors.darkIconsBackground,
60+
iconsBackgroundVariant: VoicesColors.darkIconsBackgroundVariant,
6061
iconsOnImage: VoicesColors.darkIconsOnImage,
6162
iconsDisabled: VoicesColors.darkIconsDisabled,
6263
iconsPrimary: VoicesColors.darkIconsPrimary,
@@ -135,6 +136,7 @@ const VoicesColorScheme lightVoicesColorScheme = VoicesColorScheme(
135136
onSurfaceError016: VoicesColors.lightOnSurfaceError016,
136137
iconsForeground: VoicesColors.lightIconsForeground,
137138
iconsBackground: VoicesColors.lightIconsBackground,
139+
iconsBackgroundVariant: VoicesColors.lightIconsBackgroundVariant,
138140
iconsOnImage: VoicesColors.lightIconsOnImage,
139141
iconsDisabled: VoicesColors.lightIconsDisabled,
140142
iconsPrimary: VoicesColors.lightIconsPrimary,

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

+30
Original file line numberDiff line numberDiff line change
@@ -832,6 +832,36 @@ abstract class VoicesLocalizations {
832832
/// **'In Catalyst you can take on different roles, learn more below and choose your additional roles now.'**
833833
String get walletLinkRoleChooserContent;
834834

835+
/// A title on the role summary screen in registration.
836+
///
837+
/// In en, this message translates to:
838+
/// **'Is this your correct Catalyst role setup?'**
839+
String get walletLinkRoleSummaryTitle;
840+
841+
/// The first part of the message on the role summary screen in registration.
842+
///
843+
/// In en, this message translates to:
844+
/// **'You would like to register '**
845+
String get walletLinkRoleSummaryContent1;
846+
847+
/// The middle (bold) part of the message on the role summary screen in registration.
848+
///
849+
/// In en, this message translates to:
850+
/// **'{count} active {count, plural, =0{roles} =1{role} other{roles}}'**
851+
String walletLinkRoleSummaryContent2(num count);
852+
853+
/// The last part of the message on the role summary screen in registration.
854+
///
855+
/// In en, this message translates to:
856+
/// **' in Catalyst.'**
857+
String get walletLinkRoleSummaryContent3;
858+
859+
/// A button label on the role summary screen in registration for the next step.
860+
///
861+
/// In en, this message translates to:
862+
/// **'Confirm & Sign with wallet'**
863+
String get walletLinkRoleSummaryButton;
864+
835865
/// Message shown when redirecting to external content that describes which wallets are supported.
836866
///
837867
/// In en, this message translates to:

0 commit comments

Comments
 (0)