373 - backup options screen

[lealobanov]

🔗 Related Issues

Closes #373

Linked automatically from the branch name. If incorrect, edit:

📝 Description

📸 Screenshots/Videos

[github-actions]

PR Summary

Added a new BackupOptionsScreen component for the onboarding flow that allows users to select additional backup methods. The screen presents three backup options: device backup, cloud backup, and recovery phrase viewing. It includes theme-aware icon colors, custom back handlers that show a skip warning dialog when users attempt to exit without setting up a backup, and launches native screens for each backup type using the NativeScreenName enum. Device and cloud backup options display "Recommended" badges, while the skip warning dialog features an error-styled confirmation button.

Changes

File	Summary
packages/screens/src/onboarding/BackupOptionsScreen.query.tsx	New file implementing BackupOptionsScreen component with three backup options (device, cloud, recovery phrase). Features include theme-aware icon colors via useTheme, hardware back button interception, global back handler registration, skip warning dialog with error-styled confirmation, and native screen launching via bridge.launchNativeScreen() for each backup type.
packages/screens/src/onboarding/index.ts	Added export for the new BackupOptionsScreen component from the onboarding module.

---

autogenerated by presubmit.ai

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[github-actions]

🚨 Pull request needs attention.

Review Summary

Commits Considered (1)

• bad0c68: feat: add BackupOptionsScreen for additional backup setup

Add BackupOptionsScreen with the following features:

• Three backup options: device backup, cloud backup, and recovery phrase
• Theme-aware icon colors for light/dark mode
• Custom back handler to show skip warning dialog
• Hardware back button interception for warning dialog
• Native screen launches for each backup type using NativeScreenName enum
• Recommended badges for device and cloud backup options
• Skip warning with error-styled confirmation button
• Uses theme tokens for consistent styling

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

Closes #373

Files Processed (2)

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx (1 hunk)
• packages/screens/src/onboarding/index.ts (1 hunk)

Actionable Comments (1)

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [124-126]

  possible bug: "Icon names appear to be swapped between backup options."

Skipped Comments (3)

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [32-32]

  maintainability: "Avoid using global state for inter-component communication."

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [57-67]

  possible issue: "Potential race condition with setTimeout for dialog dismissal."

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [79-83]

  maintainability: "Duplicated bridge availability check across handlers."

[github-actions]

✅ LGTM!

Review Summary

Commits Considered (1)

• 30f5302: fix: use theme system for icon colors instead of hardcoded values

Replace hardcoded color scheme check and hex colors with theme.color.val
for proper theme-aware icon colors. Removes useColorScheme dependency.

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

Closes #373

Files Processed (1)

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx (1 hunk)

Actionable Comments (0)

Skipped Comments (2)

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [39-39]

  maintainability: "Avoid using global state for component communication."

• packages/screens/src/onboarding/BackupOptionsScreen.query.tsx [64-74]

  possible issue: "Avoid relying on arbitrary timeout for sequencing operations."

[lmcmz]

I believe this screen is not needed, we will reuse native backup screen for hardware (secure enclave) type profile

[lealobanov]

Hi @lmcmz , I have created a new PR for this screen here as the notification preferences branch has been deleted: #963

This branch implements this screen from Figma: https://www.figma.com/design/ELsn1EA0ptswW1f21PZqWp/%F0%9F%9F%A2-Flow-Wallet?node-id=11495-3499&m=dev

Currently it shows the 3 back up options for secure profiles; when the user selects any of the 3 options, it redirects to the native flow for each option. Zena has already tested this flow, but if you want to remove this screen then I can update the navigation to go straight to the native backup options screen. Either way, I think we will need this screen for the next milestone when backup options are implemented for full profiles.

Let me know what you think.