SEL-483: Implement recovery backup prompts

app/src/components/Mnemonic.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useCallback, useState } from 'react';
 import { Button, Text, XStack, YStack } from 'tamagui';
 
@@ -14,6 +14,7 @@
   white,
 } from '../utils/colors';
 import { confirmTap } from '../utils/haptic';
+import { useSettingStore } from '../stores/settingStore';
 
 interface MnemonicProps {
   words?: string[];
@@ -50,11 +51,13 @@
 const Mnemonic = ({ words = REDACTED, onRevealWords }: MnemonicProps) => {
   const [revealWords, setRevealWords] = useState(false);
   const [copied, setCopied] = useState(false);
+  const { setHasViewedRecoveryPhrase } = useSettingStore();
   const copyToClipboardOrReveal = useCallback(async () => {
     confirmTap();
     if (!revealWords) {
       // TODO: container jumps when words are revealed on android
       await onRevealWords?.();
+      setHasViewedRecoveryPhrase(true);
       return setRevealWords(previous => !previous);
     }
     Clipboard.setString(words.join(' '));

app/src/hooks/useRecoveryPrompts.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { navigationRef } from '../navigation';
+import { useModal } from './useModal';
+import { useSettingStore } from '../stores/settingStore';
+
+const modalParams = {
+  titleText: 'Protect your account',
+  bodyText:
+    'Enable cloud backup or save your recovery phrase so you can recover your account.',
+  buttonText: 'Back up now',
+  onButtonPress: async () => {
+    if (navigationRef.isReady()) {
+      navigationRef.navigate('CloudBackupSettings', {
+        nextScreen: 'SaveRecoveryPhrase',
+      });
+    }
+  },
+  onModalDismiss: () => {},
+} as const;
+
+export default function useRecoveryPrompts() {
+  const { loginCount, cloudBackupEnabled, hasViewedRecoveryPhrase } =
+    useSettingStore();
+  const { showModal, visible } = useModal(modalParams);
+
+  useEffect(() => {
+    if (!navigationRef.isReady()) {
+      return;
+    }
+    if (!cloudBackupEnabled && !hasViewedRecoveryPhrase) {
+      const shouldPrompt =
+        loginCount > 0 && (loginCount <= 3 || (loginCount - 3) % 5 === 0);
+      if (shouldPrompt && !visible) {
+        showModal();
+      }
+    }
+  }, [loginCount, cloudBackupEnabled, hasViewedRecoveryPhrase, visible, showModal]);
+
+  return { visible };
+}

app/src/providers/authProvider.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import { ethers } from 'ethers';
 import React, {
   createContext,
   PropsWithChildren,
@@ -15,6 +15,7 @@
 import { AuthEvents } from '../consts/analytics';
 import { Mnemonic } from '../types/mnemonic';
 import analytics from '../utils/analytics';
+import { useSettingStore } from '../stores/settingStore';
 
 const { trackEvent } = analytics();
 
@@ -208,6 +209,7 @@
 
     setIsAuthenticatingPromise(null);
     setIsAuthenticated(true);
+    useSettingStore.getState().incrementLoginCount();
     trackEvent(AuthEvents.BIOMETRIC_LOGIN_SUCCESS);
     setAuthenticatedTimeout(previousTimeout => {
       if (previousTimeout) {

app/src/screens/home/HomeScreen.tsx

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import { useFocusEffect, usePreventRemove } from '@react-navigation/native';
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Button, styled, YStack } from 'tamagui';
@@ -10,6 +10,7 @@
 import { Caption } from '../../components/typography/Caption';
 import { useAppUpdates } from '../../hooks/useAppUpdates';
 import useConnectionModal from '../../hooks/useConnectionModal';
+import useRecoveryPrompts from '../../hooks/useRecoveryPrompts';
 import useHapticNavigation from '../../hooks/useHapticNavigation';
 import SelfCard from '../../images/card-style-1.svg';
 import ScanIcon from '../../images/icons/qr_scan.svg';
@@ -36,6 +37,7 @@
 
 const HomeScreen: React.FC = () => {
   useConnectionModal();
+  useRecoveryPrompts();
   const [isNewVersionAvailable, showAppUpdateModal, isModalDismissed] =
     useAppUpdates();
 

app/src/stores/settingStore.ts

@@ -11,6 +11,10 @@
   setBiometricsAvailable: (biometricsAvailable: boolean) => void;
   cloudBackupEnabled: boolean;
   toggleCloudBackupEnabled: () => void;
+  loginCount: number;
+  incrementLoginCount: () => void;
+  hasViewedRecoveryPhrase: boolean;
+  setHasViewedRecoveryPhrase: (viewed: boolean) => void;
   isDevMode: boolean;
   setDevModeOn: () => void;
   setDevModeOff: () => void;
@@ -43,6 +47,19 @@
       toggleCloudBackupEnabled: () =>
         set(oldState => ({
           cloudBackupEnabled: !oldState.cloudBackupEnabled,
+          loginCount: oldState.cloudBackupEnabled
+            ? oldState.loginCount
+            : 0,
+        })),
+
+      loginCount: 0,
+      incrementLoginCount: () =>
+        set(oldState => ({ loginCount: oldState.loginCount + 1 })),
+      hasViewedRecoveryPhrase: false,
+      setHasViewedRecoveryPhrase: viewed =>
+        set(oldState => ({
+          hasViewedRecoveryPhrase: viewed,
+          loginCount: viewed ? 0 : oldState.loginCount,
         })),
 
       isDevMode: false,