Add backup account reminder notification system (#383)

Catrya · web-flow · commit b59462715b07 · 2025-12-18T11:46:01.000-03:00
* feat: add backup account reminder notification system

  - Implement backup reminder notification that appears first in notifications list
  - Trigger reminder on first app launch and new user creation
  - Dismiss reminder only when user views seed phrase
  - Integrate with existing notification system without breaking functionality
  - Persist reminder state across app restarts using SharedPreferences
  - Add animated notification bell with shake animation when backup needed

* coderabbit suggestion

* Add mounted check and improve bell icon
diff --git a/lib/features/auth/screens/register_screen.dart b/lib/features/auth/screens/register_screen.dart
@@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:mostro_mobile/core/app_theme.dart';
 import 'package:mostro_mobile/features/auth/notifiers/auth_state.dart';
 import 'package:mostro_mobile/features/auth/providers/auth_notifier_provider.dart';
+import 'package:mostro_mobile/features/notifications/providers/backup_reminder_provider.dart';
 import 'package:mostro_mobile/shared/widgets/custom_button.dart';
 import 'package:mostro_mobile/shared/utils/nostr_utils.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
@@ -30,7 +31,11 @@ class RegisterScreen extends HookConsumerWidget {
     ref.listen<AuthState>(authNotifierProvider, (previous, state) {
       if (state is AuthKeyGenerated) {
         privateKeyController.text = NostrUtils.nsecToHex(state.privateKey);
+        // Show backup reminder when new key is generated
+        ref.read(backupReminderProvider.notifier).showBackupReminder();
       } else if (state is AuthRegistrationSuccess) {
+        // Show backup reminder on successful registration (for imported keys too)
+        ref.read(backupReminderProvider.notifier).showBackupReminder();
         // Navigate to home after successful registration
         context.go('/');
       } else if (state is AuthFailure) {
diff --git a/lib/features/key_manager/key_management_screen.dart b/lib/features/key_manager/key_management_screen.dart
@@ -9,6 +9,7 @@ import 'package:mostro_mobile/features/key_manager/key_manager_provider.dart';
 import 'package:mostro_mobile/features/key_manager/import_mnemonic_dialog.dart';
 import 'package:mostro_mobile/features/settings/settings_provider.dart';
 import 'package:mostro_mobile/features/restore/restore_manager.dart';
+import 'package:mostro_mobile/features/notifications/providers/backup_reminder_provider.dart';
 import 'package:mostro_mobile/shared/providers.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
 import 'package:mostro_mobile/shared/providers/notifications_history_repository_provider.dart';
@@ -74,6 +75,9 @@ class _KeyManagementScreenState extends ConsumerState<KeyManagementScreen> {
     final keyManager = ref.read(keyManagerProvider);
     await keyManager.generateAndStoreMasterKey();
 
+    // Show backup reminder when generating new user
+    ref.read(backupReminderProvider.notifier).showBackupReminder();
+
     await _loadKeys();
   }
 
@@ -283,6 +287,10 @@ class _KeyManagementScreenState extends ConsumerState<KeyManagementScreen> {
                           setState(() {
                             _showSecretWords = !_showSecretWords;
                           });
+                          // Dismiss backup reminder when user views seed phrase
+                          if (_showSecretWords) {
+                            ref.read(backupReminderProvider.notifier).dismissBackupReminder();
+                          }
                         },
                         icon: Icon(
                           _showSecretWords
diff --git a/lib/features/notifications/providers/backup_reminder_provider.dart b/lib/features/notifications/providers/backup_reminder_provider.dart
@@ -0,0 +1,39 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:mostro_mobile/shared/providers/storage_providers.dart';
+
+class BackupReminderNotifier extends StateNotifier<bool> {
+  static const String _backupReminderKey = 'backup_reminder_dismissed';
+  final SharedPreferencesAsync _prefs;
+
+  BackupReminderNotifier(this._prefs) : super(false) {
+    _loadBackupReminderState();
+  }
+
+  Future<void> _loadBackupReminderState() async {
+    // If the backup reminder was dismissed, state should be false
+    // If it was never dismissed (or new user), state should be true
+    final isDismissed = await _prefs.getBool(_backupReminderKey) ?? false;
+    state = !isDismissed;
+  }
+
+  /// Shows the backup reminder (called on first app launch or new user creation)
+  Future<void> showBackupReminder() async {
+    await _prefs.setBool(_backupReminderKey, false);
+    state = true;
+  }
+
+  /// Dismisses the backup reminder (called when user views seed phrase)
+  Future<void> dismissBackupReminder() async {
+    await _prefs.setBool(_backupReminderKey, true);
+    state = false;
+  }
+
+  /// Checks if the backup reminder should be shown
+  bool get shouldShowBackupReminder => state;
+}
+
+final backupReminderProvider = StateNotifierProvider<BackupReminderNotifier, bool>((ref) {
+  final prefs = ref.watch(sharedPreferencesProvider);
+  return BackupReminderNotifier(prefs);
+});
diff --git a/lib/features/notifications/screens/notifications_screen.dart b/lib/features/notifications/screens/notifications_screen.dart
@@ -3,8 +3,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:heroicons/heroicons.dart';
 import 'package:mostro_mobile/core/app_theme.dart';
 import 'package:mostro_mobile/features/notifications/providers/notifications_provider.dart';
+import 'package:mostro_mobile/features/notifications/providers/backup_reminder_provider.dart';
 import 'package:mostro_mobile/features/notifications/widgets/notification_item.dart';
 import 'package:mostro_mobile/features/notifications/widgets/notifications_actions_menu.dart';
+import 'package:mostro_mobile/features/notifications/widgets/backup_reminder_notification.dart';
 import 'package:mostro_mobile/shared/widgets/mostro_app_bar.dart';
 import 'package:mostro_mobile/shared/widgets/notification_history_bell_widget.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
@@ -15,6 +17,7 @@ class NotificationsScreen extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final notifications = ref.watch(notificationsHistoryProvider);
+    final shouldShowBackupReminder = ref.watch(backupReminderProvider);
     
     return Scaffold(
       backgroundColor: AppTheme.backgroundDark,
@@ -37,7 +40,8 @@ class NotificationsScreen extends ConsumerWidget {
       ),
       body: notifications.when(
         data: (notificationList) {
-          if (notificationList.isEmpty) {
+          // Show empty state only if no notifications AND no backup reminder
+          if (notificationList.isEmpty && !shouldShowBackupReminder) {
             return Center(
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -69,15 +73,29 @@ class NotificationsScreen extends ConsumerWidget {
             );
           }
 
+          // Calculate total items (backup reminder + regular notifications)
+          final totalItems = (shouldShowBackupReminder ? 1 : 0) + notificationList.length;
+
           return RefreshIndicator(
             onRefresh: () async {
               ref.invalidate(notificationsHistoryProvider);
             },
             child: ListView.builder(
               padding: AppTheme.mediumPadding,
-              itemCount: notificationList.length,
+              itemCount: totalItems,
               itemBuilder: (context, index) {
-                final notification = notificationList[index];
+                // Show backup reminder first if active
+                if (shouldShowBackupReminder && index == 0) {
+                  return const Padding(
+                    padding: EdgeInsets.only(bottom: 8),
+                    child: BackupReminderNotification(),
+                  );
+                }
+                
+                // Adjust index for regular notifications
+                final notificationIndex = shouldShowBackupReminder ? index - 1 : index;
+                final notification = notificationList[notificationIndex];
+                
                 return Padding(
                   padding: const EdgeInsets.only(bottom: 8),
                   child: NotificationItem(
diff --git a/lib/features/notifications/widgets/backup_reminder_notification.dart b/lib/features/notifications/widgets/backup_reminder_notification.dart
@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:heroicons/heroicons.dart';
+import 'package:mostro_mobile/core/app_theme.dart';
+import 'package:mostro_mobile/generated/l10n.dart';
+
+class BackupReminderNotification extends ConsumerWidget {
+  const BackupReminderNotification({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Card(
+      color: Theme.of(context).cardTheme.color?.withValues(alpha: 0.9),
+      child: InkWell(
+        onTap: () => _handleTap(context),
+        borderRadius: _getCardBorderRadius(context),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Warning icon with red color
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: Colors.red.withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: const HeroIcon(
+                  HeroIcons.exclamationTriangle,
+                  style: HeroIconStyle.solid,
+                  color: Colors.red,
+                  size: 20,
+                ),
+              ),
+              const SizedBox(width: 12),
+              // Notification content
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Title
+                    Text(
+                      S.of(context)!.backupAccountReminder,
+                      style: const TextStyle(
+                        color: AppTheme.textPrimary,
+                        fontSize: 16,
+                        fontWeight: FontWeight.w600,
+                        height: 1.2,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+                    // Message
+                    Text(
+                      S.of(context)!.backupAccountReminderMessage,
+                      style: const TextStyle(
+                        color: AppTheme.textSecondary,
+                        fontSize: 14,
+                        height: 1.4,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 8),
+              // Navigation arrow
+              const Icon(
+                Icons.arrow_forward_ios,
+                color: AppTheme.textSecondary,
+                size: 16,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  BorderRadius _getCardBorderRadius(BuildContext context) {
+    final shape = Theme.of(context).cardTheme.shape;
+    if (shape is RoundedRectangleBorder) {
+      return shape.borderRadius.resolve(Directionality.of(context));
+    }
+    return BorderRadius.circular(12);
+  }
+
+  void _handleTap(BuildContext context) {
+    // Navigate to Account/Key Management screen
+    context.push('/key_management');
+  }
+}
diff --git a/lib/features/walkthrough/screens/walkthrough_screen.dart b/lib/features/walkthrough/screens/walkthrough_screen.dart
@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
 import 'package:mostro_mobile/features/walkthrough/providers/first_run_provider.dart';
+import 'package:mostro_mobile/features/notifications/providers/backup_reminder_provider.dart';
 import 'package:mostro_mobile/features/walkthrough/utils/highlight_config.dart';
 
 class WalkthroughScreen extends ConsumerStatefulWidget {
@@ -166,6 +167,8 @@ class _WalkthroughScreenState extends ConsumerState<WalkthroughScreen> {
 
   Future<void> _onIntroEnd(BuildContext context) async {
     await ref.read(firstRunProvider.notifier).markFirstRunComplete();
+    // Show backup reminder for first-time users
+    ref.read(backupReminderProvider.notifier).showBackupReminder();
     if (context.mounted) {
       context.go('/');
     }
diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
@@ -1213,5 +1213,9 @@
   "imageDecryptionError": "Error decrypting image",
   "imageNotAvailable": "Image not available",
   "couldNotOpenFile": "Could not open file",
-  "errorOpeningFile": "Error opening file"
+  "errorOpeningFile": "Error opening file",
+
+  "@_comment_backup_reminder": "Backup reminder notification",
+  "backupAccountReminder": "You must back up your account",
+  "backupAccountReminderMessage": "Back up your secret words to recover your account"
 }
diff --git a/lib/l10n/intl_es.arb b/lib/l10n/intl_es.arb
@@ -1191,6 +1191,10 @@
   "imageDecryptionError": "Error al desencriptar la imagen",
   "imageNotAvailable": "Imagen no disponible",
   "couldNotOpenFile": "No se pudo abrir el archivo",
-  "errorOpeningFile": "Error al abrir archivo"
+  "errorOpeningFile": "Error al abrir archivo",
+
+  "@_comment_backup_reminder": "Recordatorio de respaldo de cuenta",
+  "backupAccountReminder": "Debes respaldar tu cuenta",
+  "backupAccountReminderMessage": "Respalda tus palabras secretas para recuperar tu cuenta"
 
 }
diff --git a/lib/l10n/intl_it.arb b/lib/l10n/intl_it.arb
@@ -1246,5 +1246,9 @@
   "imageDecryptionError": "Errore nella decrittazione dell'immagine",
   "imageNotAvailable": "Immagine non disponibile",
   "couldNotOpenFile": "Impossibile aprire il file",
-  "errorOpeningFile": "Errore nell'apertura del file"
+  "errorOpeningFile": "Errore nell'apertura del file",
+
+  "@_comment_backup_reminder": "Promemoria backup account",
+  "backupAccountReminder": "Devi fare il backup del tuo account",
+  "backupAccountReminderMessage": "Salva le tue parole segrete per recuperare il tuo account"
 }
diff --git a/lib/shared/widgets/notification_history_bell_widget.dart b/lib/shared/widgets/notification_history_bell_widget.dart
