feat: add base screens for protect account flow

lib/app/features/auth/views/pages/protect_account/components/secure_account_option.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/components/list_item/list_item.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class SecureAccountOption extends StatelessWidget {
+  final String title;
+  final Widget icon;
+  final VoidCallback onTap;
+  final Widget? trailing;
+
+  const SecureAccountOption({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.onTap,
+    this.trailing,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListItem(
+      title: Text(title),
+      backgroundColor: context.theme.appColors.tertararyBackground,
+      leading: Button.icon(
+        backgroundColor: context.theme.appColors.secondaryBackground,
+        borderColor: context.theme.appColors.onTerararyFill,
+        borderRadius: BorderRadius.all(
+          Radius.circular(16.0.s),
+        ),
+        type: ButtonType.menuInactive,
+        size: 36.0.s,
+        onPressed: () {},
+        icon: icon,
+      ),
+      trailing: trailing ?? Assets.images.icons.iconArrowRight.icon(),
+      onTap: onTap,
+    );
+  }
+}

lib/app/features/auth/views/pages/protect_account/secure_account_error_modal.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/components/card/info_card.dart';
+import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/router/app_routes.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_app_bar.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_close_button.dart';
+import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class SecureAccountErrorModal extends StatelessWidget {
+  const SecureAccountErrorModal({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final locale = context.i18n;
+
+    return SheetContent(
+      body: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          NavigationAppBar.modal(
+            showBackButton: false,
+            title: Text(locale.protect_account_header_security),
+            actions: [
+              NavigationCloseButton(
+                onPressed: () => WalletRoute().go(context),
+              ),
+            ],
+          ),
+          SizedBox(height: 32.0.s),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 24.0.s),
+            child: Column(
+              children: [
+                InfoCard(
+                  iconAsset: Assets.images.icons.actionWalletAutherror,
+                  title: locale.two_fa_failure_authenticator_title,
+                  description: locale.two_fa_failure_authenticator_description,
+                ),
+                SizedBox(height: 32.0.s),
+                Button(
+                  mainAxisSize: MainAxisSize.max,
+                  label: Text(locale.button_back),
+                  onPressed: () => context.pop(),
+                ),
+                ScreenBottomOffset(margin: 36.0.s),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/features/auth/views/pages/protect_account/secure_account_modal.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/components/card/info_card.dart';
+import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/router/app_routes.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_app_bar.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_close_button.dart';
+import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class SecureAccountModal extends StatelessWidget {
+  const SecureAccountModal({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final locale = context.i18n;
+
+    return SheetContent(
+      body: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          NavigationAppBar.modal(
+            showBackButton: false,
+            title: Text(locale.protect_account_header_security),
+            actions: [
+              NavigationCloseButton(
+                onPressed: () => WalletRoute().go(context),
+              ),
+            ],
+          ),
+          SizedBox(height: 32.0.s),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 24.0.s),
+            child: Column(
+              children: [
+                InfoCard(
+                  iconAsset: Assets.images.identity.actionWalletIdkey,
+                  title: locale.protect_account_title_secure_account,
+                  description: locale.protect_account_description_secure_account,
+                ),
+                SizedBox(height: 32.0.s),
+                Button(
+                  mainAxisSize: MainAxisSize.max,
+                  leadingIcon: Assets.images.icons.iconWalletProtectAccount.icon(
+                    color: Colors.transparent,
+                  ),
+                  label: Text(locale.protect_account_button),
+                  onPressed: () {
+                    SecureAccountOptionsRoute().push<void>(context);
+                  },
+                ),
+                ScreenBottomOffset(margin: 36.0.s),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/features/auth/views/pages/protect_account/secure_account_options_page.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/card/info_card.dart';
+import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
+import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/features/auth/views/pages/protect_account/components/secure_account_option.dart';
+import 'package:ice/app/router/app_routes.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_app_bar.dart';
+import 'package:ice/app/router/components/navigation_app_bar/navigation_close_button.dart';
+import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class SecureAccountOptionsPage extends StatelessWidget {
+  const SecureAccountOptionsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final locale = context.i18n;
+
+    return SheetContent(
+      body: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          NavigationAppBar.modal(
+            showBackButton: false,
+            title: Text(locale.protect_account_header_security),
+            actions: [
+              NavigationCloseButton(
+                onPressed: () => WalletRoute().go(context),
+              ),
+            ],
+          ),
+          SizedBox(height: 40.0.s),
+          ScreenSideOffset.small(
+            child: Column(
+              children: [
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 24.0.s),
+                  child: InfoCard(
+                    iconAsset: Assets.images.identity.actionWalletIdkey,
+                    title: locale.protect_account_title_secure_account,
+                    description: locale.protect_account_description_secure_account_2fa,
+                  ),
+                ),
+                SizedBox(height: 32.0.s),
+                SecureAccountOption(
+                  title: locale.two_fa_option_backup,
+                  icon: Assets.images.icons.iconProtectwalletIcloud.icon(
+                    color: context.theme.appColors.primaryAccent,
+                  ),
+                  onTap: () {},
+                ),
+                SizedBox(height: 12.0.s),
+                SecureAccountOption(
+                  title: locale.two_fa_option_email,
+                  icon: Assets.images.icons.iconFieldEmail.icon(
+                    color: context.theme.appColors.primaryAccent,
+                  ),
+                  onTap: () {},
+                  trailing: Assets.images.icons.iconDappCheck.icon(
+                    color: context.theme.appColors.success,
+                  ),
+                ),
+                SizedBox(height: 12.0.s),
+                SecureAccountOption(
+                  title: locale.two_fa_option_authenticator,
+                  icon: Assets.images.icons.iconLoginAuthcode.icon(
+                    color: context.theme.appColors.primaryAccent,
+                  ),
+                  onTap: () {
+                    SecureAccountErrorRoute().push<void>(context);
+                  },
+                ),
+                SizedBox(height: 12.0.s),
+                SecureAccountOption(
+                  title: locale.two_fa_option_phone,
+                  icon: Assets.images.icons.iconFieldPhone.icon(
+                    color: context.theme.appColors.primaryAccent,
+                  ),
+                  onTap: () {},
+                ),
+                ScreenBottomOffset(margin: 36.0.s),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/features/wallet/views/pages/wallet_page/components/balance/balance.dart

@@ -56,10 +56,15 @@ class Balance extends ConsumerWidget {
               ],
             ),
           ),
-          Text(
-            isBalanceVisible ? formatToCurrency(walletBalance) : '********',
-            style: context.theme.appTextThemes.headline1
-                .copyWith(color: context.theme.appColors.primaryText),
+          // TODO: temporary added GestureDetector to show modal until we have a decision
+          // on when to show the modal page for secure account
+          GestureDetector(
+            onDoubleTap: () => SecureAccountModalRoute().push<void>(context),
+            child: Text(
+              isBalanceVisible ? formatToCurrency(walletBalance) : '********',
+              style: context.theme.appTextThemes.headline1
+                  .copyWith(color: context.theme.appColors.primaryText),
+            ),
           ),
           Padding(
             padding: EdgeInsets.only(

lib/app/router/app_routes.dart

@@ -6,6 +6,9 @@ import 'package:ice/app/features/auth/views/pages/discover_creators/discover_cre
 import 'package:ice/app/features/auth/views/pages/fill_profile/fill_profile.dart';
 import 'package:ice/app/features/auth/views/pages/get_started/get_started.dart';
 import 'package:ice/app/features/auth/views/pages/intro_page/intro_page.dart';
+import 'package:ice/app/features/auth/views/pages/protect_account/secure_account_error_modal.dart';
+import 'package:ice/app/features/auth/views/pages/protect_account/secure_account_modal.dart';
+import 'package:ice/app/features/auth/views/pages/protect_account/secure_account_options_page.dart';
 import 'package:ice/app/features/auth/views/pages/restore_creds/restore_creds.dart';
 import 'package:ice/app/features/auth/views/pages/restore_menu/restore_menu.dart';
 import 'package:ice/app/features/auth/views/pages/select_languages/select_languages.dart';
@@ -135,12 +138,20 @@ class AppShellRouteData extends StatefulShellRouteData {
     StatefulNavigationShell navigationShell,
   ) {
     return MainTabNavigation(
+      key: state.pageKey,
       shell: navigationShell,
       state: state,
     );
   }
 }
 
+@TypedShellRoute<ModalShellRouteData>(
+  routes: [
+    TypedGoRoute<SecureAccountModalRoute>(path: '/secure-account-modal'),
+    TypedGoRoute<SecureAccountOptionsRoute>(path: '/secure-account-options'),
+    TypedGoRoute<SecureAccountErrorRoute>(path: '/secure-account-error'),
+  ],
+)
 class ModalShellRouteData extends ShellRouteData {
   const ModalShellRouteData();
 
@@ -154,6 +165,7 @@ class ModalShellRouteData extends ShellRouteData {
     Widget navigator,
   ) {
     return ModalSheetPage(
+      key: state.pageKey,
       swipeDismissible: true,
       child: ModalWrapper(child: navigator),
     );
@@ -282,3 +294,27 @@ class SwitchAccountRoute extends BaseRouteData {
           type: IceRouteType.bottomSheet,
         );
 }
+
+class SecureAccountModalRoute extends BaseRouteData {
+  SecureAccountModalRoute()
+      : super(
+          child: const SecureAccountModal(),
+          type: IceRouteType.bottomSheet,
+        );
+}
+
+class SecureAccountOptionsRoute extends BaseRouteData {
+  SecureAccountOptionsRoute()
+      : super(
+          child: const SecureAccountOptionsPage(),
+          type: IceRouteType.bottomSheet,
+        );
+}
+
+class SecureAccountErrorRoute extends BaseRouteData {
+  SecureAccountErrorRoute()
+      : super(
+          child: const SecureAccountErrorModal(),
+          type: IceRouteType.bottomSheet,
+        );
+}

lib/l10n/app_en.arb

@@ -13,6 +13,7 @@
   "button_retry": "Retry",
   "button_confirm": "Confirm",
   "button_restore": "Restore",
+  "button_back": "Back",
   "common_show_more": "Show more",
   "common_show_less": "Show less",
   "common_identity_key_name": "Identity key name",
@@ -30,9 +31,15 @@
   "two_fa_email": "Email code",
   "two_fa_sms": "SMS code",
   "two_fa_auth": "Authenticator code",
+  "two_fa_option_backup": "Backup",
+  "two_fa_option_email": "Email",
+  "two_fa_option_authenticator": "Authenticator",
+  "two_fa_option_phone": "Phone",
   "two_fa_success_desc": "Your identity key has been restored. You can now access your account securely",
   "two_fa_failure_title": "2FA Verification error",
   "two_fa_failure_desc": "Please ensure all codes are correct and try again",
+  "two_fa_failure_authenticator_title": "Authenticator not available",
+  "two_fa_failure_authenticator_description": "To set up an Authenticator app, please first link an email address or phone number to your account",
   "sign_up_passkey_title": "Passkeys are a better way to sign in",
   "sign_up_passkey_advantage_1_title": "No password to remember",
   "sign_up_passkey_advantage_1_description": "With passkey, you can use things like your fingerprint or face to login",
@@ -239,5 +246,10 @@
   "post_menu_not_interested": "Not interested",
   "post_menu_follow_nickname": "Follow @{nickname}",
   "post_menu_block_nickname": "Block @{nickname}",
-  "post_menu_report_post": "Report post"
+  "post_menu_report_post": "Report post",
+  "protect_account_header_security": "Security",
+  "protect_account_title_secure_account": "Secure your account",
+  "protect_account_description_secure_account": "Securing your account ensures you never lose access to your data and funds",
+  "protect_account_button": "Protect account",
+  "protect_account_description_secure_account_2fa": "To secure your account, back it up and enable at least one 2FA option"
 }