SEL-483: Implement recovery backup prompts

[transphorm]

Summary

• track biometric login count and recovery phrase view in settingStore
• increment login counter after successful biometric login
• record when the mnemonic is revealed
• display backup prompts on Home screen via new useRecoveryPrompts hook

Testing

• yarn test

---

https://chatgpt.com/codex/tasks/task_b_6861bbdb234c832d82dfed9d20d32d32

Summary by CodeRabbit

• New Features

  • Introduced prompts encouraging users to enable cloud backup or save their recovery phrase, shown after specific login counts.
  • Added tracking for login count and whether the recovery phrase has been viewed.

• Improvements

  • Enhanced account protection reminders based on user activity.
  • Improved reliability of proof history synchronization with throttling and error handling.

• Bug Fixes

  • Ensured login count resets appropriately when cloud backup is enabled or the recovery phrase is viewed.

• Tests

  • Added tests for recovery prompt logic and settings state management.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This update introduces login count and recovery phrase tracking to the settings store, along with a new useRecoveryPrompts hook that conditionally displays a modal prompting users to secure their account. The login count is incremented on biometric login and reset upon viewing the recovery phrase or enabling cloud backup. Comprehensive tests are added for these behaviors.

Changes

File(s)	Change Summary
app/src/components/Mnemonic.tsx	Calls setHasViewedRecoveryPhrase(true) when mnemonic words are revealed for the first time, tracking user recovery phrase viewing.
app/src/hooks/useRecoveryPrompts.ts	Adds a new hook to show a modal prompting users to enable cloud backup or save their recovery phrase, based on login count and user state.
app/src/providers/authProvider.tsx	Increments the login count in the settings store after successful biometric login.
app/src/screens/home/HomeScreen.tsx	Integrates the useRecoveryPrompts hook to trigger recovery prompts on the home screen.
app/src/stores/settingStore.ts	Extends store with loginCount, hasViewedRecoveryPhrase, and associated mutators; modifies cloud backup toggling to reset login count only when enabling.
app/src/stores/proofHistoryStore.ts	Adds throttling and error handling to syncProofHistoryStatus, limiting syncs to once every 30 seconds and handling proof status updates more robustly.
app/tests/src/hooks/useRecoveryPrompts.test.ts	New test suite verifying the useRecoveryPrompts hook’s modal display logic and interactions under various user states and login counts.
app/tests/src/stores/settingStore.test.ts	New test suite validating correct state transitions for login count, cloud backup, and recovery phrase viewing logic in the settings store.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant HomeScreen
    participant useRecoveryPrompts
    participant useSettingStore
    participant Modal

    User->>HomeScreen: App loads HomeScreen
    HomeScreen->>useRecoveryPrompts: Invoke hook
    useRecoveryPrompts->>useSettingStore: Get loginCount, cloudBackupEnabled, hasViewedRecoveryPhrase
    useRecoveryPrompts->>useSettingStore: Check if prompt should show
    alt Should prompt user
        useRecoveryPrompts->>Modal: Show recovery prompt modal
        User->>Modal: Interact with modal (button press)
        Modal->>useRecoveryPrompts: Handle button press
        useRecoveryPrompts->>Navigation: Navigate to backup/recovery screens
    end

Loading

sequenceDiagram
    participant User
    participant MnemonicComponent
    participant useSettingStore

    User->>MnemonicComponent: Click "Reveal Recovery Phrase"
    MnemonicComponent->>useSettingStore: setHasViewedRecoveryPhrase(true)
    useSettingStore-->>MnemonicComponent: Update state

Loading

Poem

🗝️
When logins rise and phrases are seen,
A prompt appears upon your screen.
With counters set and states in store,
Security reminders at your door.
Tests abound to keep things tight—
Safe accounts, and code done right!
🔒✨

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a7e8e90 and 8a3cdac.

📒 Files selected for processing (8)

• app/src/components/Mnemonic.tsx (2 hunks)
• app/src/hooks/useRecoveryPrompts.ts (1 hunks)
• app/src/providers/authProvider.tsx (2 hunks)
• app/src/screens/home/HomeScreen.tsx (2 hunks)
• app/src/stores/proofHistoryStore.ts (2 hunks)
• app/src/stores/settingStore.ts (2 hunks)
• app/tests/src/hooks/useRecoveryPrompts.test.ts (1 hunks)
• app/tests/src/stores/settingStore.test.ts (1 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (3)

app/src/stores/settingStore.ts (1)

50-53: Fix formatting and verify the reset logic.

The conditional logic correctly resets loginCount when enabling cloud backup (transitioning from disabled to enabled state), which prevents continued prompting after the user takes protective action.

Apply this diff to fix the formatting issue flagged by the linter:

-          loginCount: oldState.cloudBackupEnabled
-            ? oldState.loginCount
-            : 0,
+          loginCount: oldState.cloudBackupEnabled ? oldState.loginCount : 0,

app/src/components/Mnemonic.tsx (1)

17-17: Correct tracking of recovery phrase viewing with import sorting fix needed.

The implementation properly tracks when users view their recovery phrase by calling setHasViewedRecoveryPhrase(true) when revealing words for the first time. This integrates well with the prompt logic to stop showing reminders after the user takes action.

Fix the import sorting issue flagged by the pipeline:

-import { confirmTap } from '../utils/haptic';
-import { useSettingStore } from '../stores/settingStore';
+import { useSettingStore } from '../stores/settingStore';
+import { confirmTap } from '../utils/haptic';

Also applies to: 54-54, 60-60

app/src/hooks/useRecoveryPrompts.ts (1)

37-37: Fix dependency array formatting for consistency.

The linter suggests reformatting the dependency array for better readability.

Apply this formatting fix:

-  }, [loginCount, cloudBackupEnabled, hasViewedRecoveryPhrase, visible, showModal]);
+  }, [
+    loginCount,
+    cloudBackupEnabled,
+    hasViewedRecoveryPhrase,
+    visible,
+    showModal,
+  ]);

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5c54bc5 and 4b4b5cd.

📒 Files selected for processing (5)

• app/src/components/Mnemonic.tsx (2 hunks)
• app/src/hooks/useRecoveryPrompts.ts (1 hunks)
• app/src/providers/authProvider.tsx (2 hunks)
• app/src/screens/home/HomeScreen.tsx (2 hunks)
• app/src/stores/settingStore.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

`app/src/**/*.{ts,tsx,js,jsx}`: Review React Native TypeScript code for: - Compo...

app/src/**/*.{ts,tsx,js,jsx}: Review React Native TypeScript code for:

• Component architecture and reusability
• State management patterns
• Performance optimizations
• TypeScript type safety
• React hooks usage and dependencies
• Navigation patterns

⚙️ Source: CodeRabbit Configuration File

List of files the instruction was applied to:

• app/src/screens/home/HomeScreen.tsx
• app/src/providers/authProvider.tsx
• app/src/components/Mnemonic.tsx
• app/src/hooks/useRecoveryPrompts.ts
• app/src/stores/settingStore.ts

🧬 Code Graph Analysis (3)

app/src/providers/authProvider.tsx (1)

app/src/stores/settingStore.ts (1)

• useSettingStore (33-87)

app/src/components/Mnemonic.tsx (2)

app/src/stores/settingStore.ts (1)

• useSettingStore (33-87)

app/src/utils/haptic.ts (1)

• confirmTap (43-43)

app/src/hooks/useRecoveryPrompts.ts (3)

app/src/navigation/index.tsx (1)

• navigationRef (59-59)

app/src/stores/settingStore.ts (1)

• useSettingStore (33-87)

app/src/hooks/useModal.ts (1)

• useModal (13-52)

🪛 GitHub Actions: General Self CI

app/src/components/Mnemonic.tsx

[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)

app/src/hooks/useRecoveryPrompts.ts

[error] 1-1: missing header (header/header)

🪛 GitHub Check: lint

app/src/hooks/useRecoveryPrompts.ts

[warning] 37-37:
Replace loginCount,·cloudBackupEnabled,·hasViewedRecoveryPhrase,·visible,·showModal with ⏎····loginCount,⏎····cloudBackupEnabled,⏎····hasViewedRecoveryPhrase,⏎····visible,⏎····showModal,⏎··

---

[warning] 1-1:
Run autofix to sort these imports!

---

[failure] 1-1:
missing header

app/src/stores/settingStore.ts

[warning] 50-50:
Replace ⏎············?·oldState.loginCount⏎··········· with ·?·oldState.loginCount

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: build
• GitHub Check: test

🔇 Additional comments (6)

app/src/stores/settingStore.ts (2)

14-17: Well-structured interface additions for recovery prompt tracking.

The new properties properly extend the interface with clear naming and appropriate types. The combination of state tracking and mutator functions follows the established pattern in the store.

---

55-63: Approve the login tracking implementation with smart reset behavior.

The implementation correctly tracks login attempts and recovery phrase viewing. The logic to reset loginCount when the recovery phrase is viewed ensures users won't continue seeing prompts after taking protective action.

app/src/screens/home/HomeScreen.tsx (1)

13-13: Clean integration of recovery prompts hook.

The hook is properly imported and invoked at the component level, following the established pattern with useConnectionModal. This ensures the recovery prompt logic is active when the home screen renders.

Also applies to: 40-40

app/src/providers/authProvider.tsx (1)

18-18: Proper implementation of login count tracking.

The login count is correctly incremented after successful biometric authentication using useSettingStore.getState().incrementLoginCount(). The placement after setIsAuthenticated and before analytics tracking ensures accurate counting without interfering with the authentication flow.

Also applies to: 212-212

app/src/hooks/useRecoveryPrompts.ts (2)

6-19: Well-designed modal parameters with proper navigation flow.

The modal configuration provides clear messaging and directs users to cloud backup settings with a fallback to recovery phrase saving. The navigation safety check with navigationRef.isReady() prevents crashes during navigation transitions.

---

30-36: Smart prompt timing logic with user experience consideration.

The logic loginCount > 0 && (loginCount <= 3 || (loginCount - 3) % 5 === 0) creates a reasonable prompt cadence: after 1st, 2nd, 3rd login, then every 5th login thereafter (8th, 13th, etc.). This balances user protection with avoiding excessive prompting.

[coderabbitai]

Actionable comments posted: 7

🧹 Nitpick comments (4)

app/src/screens/settings/PassportDataInfoScreen.tsx (1)

84-87: Consider analytics event frequency in useFocusEffect

The PASSPORT_INFO_OPENED event will fire every time the screen gains focus, including when returning from other screens. If you want to track unique screen visits rather than focus events, consider moving this to a useEffect with an empty dependency array.

- useFocusEffect(() => {
-   trackEvent(DocumentEvents.PASSPORT_INFO_OPENED);
-   loadData();
- });
+ useEffect(() => {
+   trackEvent(DocumentEvents.PASSPORT_INFO_OPENED);
+ }, []);
+ 
+ useFocusEffect(() => {
+   loadData();
+ });

app/src/screens/settings/ManageDocumentsScreen.tsx (1)

63-63: Consider error handling for analytics in async operations

The analytics events are tracked before the UI reload operations complete. While this is generally acceptable since the core operations (setSelectedDocument, deleteDocument) are awaited, consider whether you want to track these events only after successful completion of all related operations.

If you want to ensure the events are only tracked after complete success:

const handleDocumentSelection = async (documentId: string) => {
  await setSelectedDocument(documentId);
  // Reload to update UI without loading state for quick operations
  const catalog = await loadDocumentCatalog();
  const docs = await getAllDocuments();
  setDocumentCatalog(catalog);
  setAllDocuments(docs);
+ trackEvent(DocumentEvents.DOCUMENT_SELECTED);
- trackEvent(DocumentEvents.DOCUMENT_SELECTED);
};

Also applies to: 69-69

app/tests/src/stores/settingStore.test.ts (1)

4-11: Test setup looks good, but consider expanding state coverage.

The beforeEach setup properly initializes the core state variables. However, consider also resetting other persisted state properties that might affect the tests to ensure complete isolation.

Consider this enhancement for more comprehensive test isolation:

  beforeEach(() => {
    useSettingStore.setState({
      loginCount: 0,
      cloudBackupEnabled: false,
      hasViewedRecoveryPhrase: false,
+     biometricsAvailable: false,
+     hasPrivacyNoteBeenDismissed: false,
+     isDevMode: false,
    });
  });

app/tests/src/hooks/useRecoveryPrompts.test.ts (1)

8-17: Mock setup is appropriate but could be more comprehensive.

The mocking strategy correctly isolates the hook's dependencies. However, consider adding verification for the mock parameters passed to useModal.

const showModal = jest.fn();
-(useModal as jest.Mock).mockReturnValue({ showModal, visible: false });
+const mockUseModal = useModal as jest.Mock;
+mockUseModal.mockReturnValue({ showModal, visible: false });

This makes the mock more explicit and allows for easier parameter verification in tests.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4b4b5cd and 7a8d8e2.

📒 Files selected for processing (12)

• app/src/components/Mnemonic.tsx (2 hunks)
• app/src/consts/analytics.ts (1 hunks)
• app/src/hooks/useRecoveryPrompts.ts (1 hunks)
• app/src/providers/authProvider.tsx (2 hunks)
• app/src/screens/home/HomeScreen.tsx (2 hunks)
• app/src/screens/home/ProofHistoryScreen.tsx (3 hunks)
• app/src/screens/settings/ManageDocumentsScreen.tsx (4 hunks)
• app/src/screens/settings/PassportDataInfoScreen.tsx (2 hunks)
• app/src/stores/proofHistoryStore.ts (2 hunks)
• app/src/stores/settingStore.ts (2 hunks)
• app/tests/src/hooks/useRecoveryPrompts.test.ts (1 hunks)
• app/tests/src/stores/settingStore.test.ts (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• app/src/consts/analytics.ts

🚧 Files skipped from review as they are similar to previous changes (5)

• app/src/providers/authProvider.tsx
• app/src/screens/home/HomeScreen.tsx
• app/src/components/Mnemonic.tsx
• app/src/hooks/useRecoveryPrompts.ts
• app/src/stores/settingStore.ts

🧰 Additional context used

📓 Path-based instructions (2)

`app/src/**/*.{ts,tsx,js,jsx}`: Review React Native TypeScript code for: - Compo...

app/src/**/*.{ts,tsx,js,jsx}: Review React Native TypeScript code for:

• Component architecture and reusability
• State management patterns
• Performance optimizations
• TypeScript type safety
• React hooks usage and dependencies
• Navigation patterns

⚙️ Source: CodeRabbit Configuration File

List of files the instruction was applied to:

• app/src/stores/proofHistoryStore.ts
• app/src/screens/settings/PassportDataInfoScreen.tsx
• app/src/screens/settings/ManageDocumentsScreen.tsx
• app/src/screens/home/ProofHistoryScreen.tsx

`**/*.{test,spec}.{ts,js,tsx,jsx}`: Review test files for: - Test coverage compl...

**/*.{test,spec}.{ts,js,tsx,jsx}: Review test files for:

• Test coverage completeness
• Test case quality and edge cases
• Mock usage appropriateness
• Test readability and maintainability

⚙️ Source: CodeRabbit Configuration File

List of files the instruction was applied to:

• app/tests/src/stores/settingStore.test.ts
• app/tests/src/hooks/useRecoveryPrompts.test.ts

🧬 Code Graph Analysis (4)

app/tests/src/stores/settingStore.test.ts (1)

app/src/stores/settingStore.ts (1)

• useSettingStore (33-85)

app/src/screens/settings/PassportDataInfoScreen.tsx (1)

app/src/consts/analytics.ts (1)

• DocumentEvents (109-119)

app/tests/src/hooks/useRecoveryPrompts.test.ts (3)

app/src/hooks/useModal.ts (1)

• useModal (13-52)

app/src/stores/settingStore.ts (1)

• useSettingStore (33-85)

app/src/hooks/useRecoveryPrompts.ts (1)

• useRecoveryPrompts (8-40)

app/src/screens/home/ProofHistoryScreen.tsx (1)

app/src/utils/colors.ts (1)

• red500 (20-20)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: build

🔇 Additional comments (14)

app/src/screens/settings/PassportDataInfoScreen.tsx (2)

10-12: LGTM: Clean analytics integration

The analytics imports and initialization are properly structured and follow the established patterns in the codebase.

Also applies to: 16-16

---

81-81: LGTM: Metadata loading analytics well-positioned

The analytics event is correctly placed after successful metadata loading, providing accurate tracking of when passport metadata is actually retrieved.

app/src/screens/settings/ManageDocumentsScreen.tsx (4)

13-15: LGTM: Consistent analytics setup

The analytics imports and initialization follow the same clean pattern as the other file, maintaining consistency across the codebase.

Also applies to: 20-20

---

47-52: Excellent analytics implementation with contextual data

Great job including the document count as metadata and conditionally tracking when no documents are found. This provides valuable insights into user document states.

---

255-257: LGTM: Proper screen tracking implementation

Using useEffect with an empty dependency array correctly tracks unique screen opens rather than focus events, which is typically the desired behavior for screen analytics.

---

261-261: LGTM: User action tracking well-positioned

The analytics tracking for scan and mock document selection is properly placed before navigation, ensuring the events are captured regardless of navigation success.

Also applies to: 267-267

app/src/stores/proofHistoryStore.ts (1)

56-56: LGTM! Well-defined timeout constant.

The 10-minute timeout is reasonable for proof generation processes and follows good naming conventions.

app/src/screens/home/ProofHistoryScreen.tsx (2)

4-4: LGTM! Proper imports for failure indicator.

All necessary imports are correctly added to support the new failure status visualization.

Also applies to: 18-18, 25-25

---

275-293: Excellent failure indicator implementation.

The failure status UI follows the established design patterns perfectly:

• Consistent styling with other status indicators
• Proper conditional rendering
• Appropriate use of design system colors
• Clear visual feedback for users

The red color choice and "FAIL" text with X icon provide clear, intuitive feedback about proof failures.

app/tests/src/hooks/useRecoveryPrompts.test.ts (5)

1-7: LGTM: Clean imports and proper license header.

The imports are well-organized and the SPDX license header is properly included.

---

19-27: Good test initialization with proper state reset.

The beforeEach setup correctly resets both mock calls and store state, ensuring test isolation.

---

35-39: Test case correctly validates the prompt logic boundary.

This test properly verifies that the modal is not shown when loginCount is 4, which is outside the prompt threshold (loginCount <= 3).

---

41-45: Good test for periodic prompt logic.

This correctly tests the periodic prompt behavior where loginCount = 8 triggers the modal ((8-3) % 5 === 0).

---

47-51: Proper test for backup-enabled bypass condition.

This test correctly verifies that the modal is not shown when cloud backup is already enabled, regardless of login count.

[transphorm]

@coderabbitai summary

[coderabbitai]

✅ Actions performed

Summary regeneration triggered.

[transphorm]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.