543 feat: backup/recovery UI #558

lealobanov · 2025-10-14T21:09:42Z

🔗 Related Issues

Closes #543

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

📝 Description

📸 Screenshots/Videos

Closes #543

github-actions · 2025-10-14T21:09:52Z

PR Summary

Implemented a comprehensive backup and recovery UI flow that allows users to import profiles through multiple methods including device backup, cloud providers, and seed phrases. The implementation includes 8 new screens with proper navigation flow, TanStack Query integration for future API calls, and internationalization support. The flow starts from the GetStartedScreen and provides options for device sync via QR code, cloud backup from Google Drive/iCloud/Dropbox, seed phrase input, and other import methods.

Changes

File	Summary
`packages/screens/src/backup/BackupOptionsScreen.query.tsx`	Moved from onboarding directory to backup directory. Enhanced with `logger` import and replaced `console.log` calls with proper logging methods for tracking backup selections.
`packages/screens/src/backup/CloudBackupScreen.query.tsx`	New screen allowing users to select cloud providers (Google Drive, iCloud, Dropbox) for backup restoration. Includes TanStack Query mutations for provider selection and navigation to profile confirmation.
`packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx`	Complex screen displaying available profiles with their accounts, allowing users to select which profile to import. Features scrollable profile cards with account details, balance information, and EVM account indicators.
`packages/screens/src/backup/DeviceBackupScanScreen.query.tsx`	Screen for syncing wallet from another device via QR code. Generates sync QR codes and polls for sync status using TanStack Query with automatic navigation on successful sync.
`packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx`	Screen for entering 12-word recovery phrases with optional address field. Features expandable advanced section, form validation, and TanStack Query mutation for seed phrase validation and import.
`packages/screens/src/backup/ImportProfileScreen.query.tsx`	Entry point screen for profile import offering four methods: device backup, cloud backup, recovery phrase, and other methods. Uses `InfoCard` components for consistent UI and analytics tracking.
`packages/screens/src/backup/OtherImportMethodsScreen.query.tsx`	Screen providing additional import options including seed phrase, keystore, private key, and Google Drive. Features detailed descriptions for each method with proper navigation and analytics tracking.
`packages/screens/src/backup/VerifyPasswordScreen.query.tsx`	Screen for password verification before profile import completion. Includes secure password input with visibility toggle and TanStack Query mutation for password verification.
`packages/screens/src/backup/index.ts`	Barrel export file for all backup-related screens, providing clean imports for the backup flow components.
`packages/screens/src/index.ts`	Added export statement for backup screens to make them available from the main screens package entry point.
`packages/screens/src/locales/en.json`	Added extensive internationalization keys for all backup screens including titles, descriptions, placeholders, and error messages. Covers import methods, cloud providers, form labels, and user instructions.
`packages/screens/src/onboarding/GetStartedScreen.query.tsx`	Modified the 'I already have an account' button to navigate to the new `ImportProfile` screen instead of a placeholder `SignIn` screen.
`packages/screens/src/onboarding/index.ts`	Removed `BackupOptionsScreen` export since it was moved to the backup directory and is now exported from there.
`packages/ui/src/components/backup/InfoCard.tsx`	New component for displaying import/restore options with consistent styling. Features icon support, title/description text, chevron indicators, and press animations matching Figma designs.
`packages/ui/src/components/backup/index.ts`	Barrel export file for backup-related UI components, currently exporting the `InfoCard` component.
`packages/ui/src/index.ts`	Added export statement for backup components to make them available from the main UI package entry point.

autogenerated by presubmit.ai

github-actions

🚨 Pull request needs attention.

Review Summary

Commits Considered (2)

74189a4: feat: backup flow ui

Closes #543

7efe46a: feat: backup flow ui

Closes #543

Files Processed (13)

packages/screens/src/backup/BackupOptionsScreen.query.tsx (from packages/screens/src/onboarding/BackupOptionsScreen.query.tsx) (0 hunks)
packages/screens/src/backup/CloudBackupScreen.query.tsx (1 hunk)
packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx (1 hunk)
packages/screens/src/backup/ImportProfileScreen.query.tsx (1 hunk)
packages/screens/src/backup/OtherImportMethodsScreen.query.tsx (1 hunk)
packages/screens/src/backup/index.ts (1 hunk)
packages/screens/src/index.ts (1 hunk)
packages/screens/src/locales/en.json (1 hunk)
packages/screens/src/onboarding/GetStartedScreen.query.tsx (1 hunk)
packages/screens/src/onboarding/index.ts (1 hunk)
packages/ui/src/components/backup/InfoCard.tsx (1 hunk)
packages/ui/src/components/backup/index.ts (1 hunk)
packages/ui/src/index.ts (1 hunk)

Actionable Comments (3)

packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx [22-22]

security: "Seed phrase stored in plain text in component state."
packages/screens/src/backup/ImportProfileScreen.query.tsx [42-44]

possible bug: "Navigation target mismatch with actual screen name."
packages/screens/src/backup/OtherImportMethodsScreen.query.tsx [32-34]

possible bug: "Navigation target mismatch with actual screen name."

Skipped Comments (4)

packages/screens/src/backup/CloudBackupScreen.query.tsx [155-155]

possible bug: "Inconsistent disabled state across cloud provider options."
packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx [74-82]

maintainability: "Hardcoded styling instead of using design system tokens."
packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx [98-106]

maintainability: "Hardcoded styling instead of using design system tokens."
packages/screens/src/locales/en.json [305-305]

possible issue: "Misleading title for other import methods screen."

github-actions · 2025-10-14T21:10:33Z

packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx

+ */
+export function EnterSeedPhraseScreen(): React.ReactElement {
+  const { t } = useTranslation();
+  const [seedPhrase, setSeedPhrase] = useState('');


The seed phrase is stored in plain text in component state. For security, consider using a secure input method or clearing the state immediately after use to prevent exposure in memory dumps or debugging tools.

github-actions · 2025-10-14T21:10:33Z

packages/screens/src/backup/ImportProfileScreen.query.tsx

+    // Navigate to recovery phrase input
+    navigation.navigate('EnterRecoveryPhrase');
+  };


The navigation target 'EnterRecoveryPhrase' doesn't match the actual screen name 'EnterSeedPhraseScreen' that was implemented. This will cause a navigation error.

github-actions · 2025-10-14T21:10:33Z

packages/screens/src/backup/OtherImportMethodsScreen.query.tsx

+    // Navigate to seed phrase input
+    navigation.navigate('EnterSeedPhrase');
+  };


The navigation target 'EnterSeedPhrase' doesn't match the actual screen name 'EnterSeedPhraseScreen' that was implemented. This will cause a navigation error.

Closes #543

github-actions

✅ LGTM!

Review Summary

Commits Considered (1)

a8db508: feat: backup flow ui

Closes #543

Files Processed (8)

packages/screens/src/backup/CloudBackupScreen.query.tsx (1 hunk)
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx (1 hunk)
packages/screens/src/backup/VerifyPasswordScreen.query.tsx (1 hunk)
packages/screens/src/backup/index.ts (1 hunk)
packages/screens/src/locales/en.json (1 hunk)
packages/ui/src/components/backup/InfoCard.tsx (1 hunk)
packages/ui/src/components/backup/index.ts (1 hunk)
packages/ui/src/index.ts (1 hunk)

Actionable Comments (0)

Skipped Comments (8)

packages/screens/src/backup/CloudBackupScreen.query.tsx [153-153]

possible bug: "Inconsistent disabled state across cloud provider options."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [48-48]

possible bug: "Invalid hexadecimal character in mock Flow address."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [56-56]

possible bug: "Invalid hexadecimal character in mock Flow address."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [65-65]

possible bug: "Invalid hexadecimal character in mock Flow address."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [101-101]

possible bug: "Invalid hexadecimal character in mock Flow address."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [319-319]

possible issue: "Redundant conditional expression always returns same value."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [320-320]

possible issue: "Redundant conditional expression always returns same value."
packages/screens/src/backup/VerifyPasswordScreen.query.tsx [20-20]

security: "Password stored in plain text without validation."

Closes #543

github-actions

🚨 Pull request needs attention.

Review Summary

Commits Considered (1)

38c7a91: feat: backup flow ui

Closes #543

Files Processed (7)

packages/screens/src/backup/BackupOptionsScreen.query.tsx (from packages/screens/src/onboarding/BackupOptionsScreen.query.tsx) (3 hunks)
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx (1 hunk)
packages/screens/src/backup/DeviceBackupScanScreen.query.tsx (1 hunk)
packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx (1 hunk)
packages/screens/src/backup/ImportProfileScreen.query.tsx (1 hunk)
packages/screens/src/backup/index.ts (1 hunk)
packages/screens/src/locales/en.json (1 hunk)

Actionable Comments (2)

packages/screens/src/backup/ImportProfileScreen.query.tsx [43-43]

possible bug: "Navigation target mismatch will cause runtime error."
packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx [23-23]

security: "Seed phrase stored in plain text creates security vulnerability."

Skipped Comments (5)

packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [56-56]

possible bug: "Invalid hexadecimal character in mock address data."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [101-101]

possible bug: "Invalid hexadecimal character in mock address data."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [319-319]

maintainability: "Redundant conditional expression with identical values."
packages/screens/src/backup/ConfirmImportProfileScreen.query.tsx [320-320]

maintainability: "Redundant conditional expression with identical values."
packages/screens/src/backup/DeviceBackupScanScreen.query.tsx [77-81]

security: "Sensitive QR code data exposed in UI for debugging."

github-actions · 2025-10-14T21:46:06Z

packages/screens/src/backup/ImportProfileScreen.query.tsx

+  const handleRecoveryPhrase = () => {
+    trackingMutation.mutate('recovery-phrase');
+    // Navigate to recovery phrase input
+    navigation.navigate('EnterRecoveryPhrase');


The navigation target 'EnterRecoveryPhrase' doesn't match the actual screen name 'EnterSeedPhraseScreen' that was implemented. This will cause a navigation error at runtime.

github-actions · 2025-10-14T21:46:06Z

packages/screens/src/backup/EnterSeedPhraseScreen.query.tsx

+ */
+export function EnterSeedPhraseScreen(): React.ReactElement {
+  const { t } = useTranslation();
+  const [seedPhrase, setSeedPhrase] = useState('');


The seed phrase is stored in plain text in component state, which poses a security risk. Consider using secure input methods, clearing the state immediately after use, or implementing proper memory protection to prevent exposure through memory dumps or debugging tools.

lealobanov added 2 commits October 14, 2025 22:06

feat: backup flow ui

7efe46a

Closes #543

feat: backup flow ui

74189a4

Closes #543

lealobanov temporarily deployed to development October 14, 2025 21:09 — with GitHub Actions Inactive

github-actions bot reviewed Oct 14, 2025

View reviewed changes

feat: backup flow ui

a8db508

Closes #543

lealobanov temporarily deployed to development October 14, 2025 21:37 — with GitHub Actions Inactive

github-actions bot reviewed Oct 14, 2025

View reviewed changes

feat: backup flow ui

38c7a91

Closes #543

lealobanov temporarily deployed to development October 14, 2025 21:45 — with GitHub Actions Inactive

github-actions bot reviewed Oct 14, 2025

View reviewed changes

lealobanov force-pushed the 373-fte-ui branch from e2afcd7 to 1c0abb4 Compare November 26, 2025 04:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

543 feat: backup/recovery UI #558

543 feat: backup/recovery UI #558

Uh oh!

lealobanov commented Oct 14, 2025 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Oct 14, 2025 •

edited

Loading

Uh oh!

github-actions bot left a comment

Uh oh!

github-actions bot Oct 14, 2025

Uh oh!

github-actions bot Oct 14, 2025

Uh oh!

github-actions bot Oct 14, 2025

Uh oh!

github-actions bot left a comment

Uh oh!

github-actions bot left a comment

Uh oh!

github-actions bot Oct 14, 2025

Uh oh!

github-actions bot Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

543 feat: backup/recovery UI #558

Are you sure you want to change the base?

543 feat: backup/recovery UI #558

Uh oh!

Conversation

lealobanov commented Oct 14, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Related Issues

📝 Description

📸 Screenshots/Videos

Uh oh!

github-actions bot commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Changes

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Review Summary

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Review Summary

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Review Summary

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lealobanov commented Oct 14, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Oct 14, 2025 •

edited

Loading