refactor: extract shared components from seed and recovery views

[kaloudis]

Summary

• Extracted shared code from Seed.tsx, CashuSeed.tsx, and SeedRecovery.tsx into 8 reusable components
• Extracted SwapsRescueKey and SwapsRecovery into standalone views (previously inlined in Seed.tsx and SeedRecovery.tsx)
• Eliminates ~1600 lines of duplicated code across seed display, seed input, and recovery flows
• Future UI changes to seed/recovery views now only need a single edit
• Fixed silent failure bug: wallet creation error now shows user-facing message instead of silently stopping the loading indicator

New shared components

File	Purpose
components/seedStyles.ts	Shared StyleSheet + buttonContainerStyle()
components/MnemonicWord.tsx	Tap-to-reveal mnemonic word component
components/SeedWordGrid.tsx	Two-column read-only grid layout for seed words
components/SeedWordInput.tsx	Interactive seed word input with BIP39 autocomplete (12 or 24 words)
components/Modals/DangerousCopySeedModal.tsx	Skull-themed copy-to-clipboard modal
components/SeedWarningDisclaimer.tsx	Warning disclaimer with "I Understand" button
components/DangerousCopySeedButton.tsx	Skull button that triggers copy modal

New views

File	Purpose
views/Swaps/SwapsRecovery.tsx	12-word seed recovery for swaps/rescue key (extracted from SeedRecovery.tsx)
views/Swaps/SwapsRescueKey.tsx	Rescue key display, download, and deletion (extracted from Seed.tsx)

View reduction

File	Before	After	Reduction
views/Settings/Seed.tsx	590 lines	124 lines	-79%
views/Cashu/CashuSeed.tsx	391 lines	112 lines	-71%
views/Settings/SeedRecovery.tsx	1022 lines	282 lines	-72%

Test plan

• Settings → Seed: warning disclaimer → tap "I Understand" → seed grid displays → skull copy modal works → "Backup Complete" button works
• Cashu → CashuSeed: same flow with cashu-specific text and "Go to Wallet" button
• Settings → Node Config → Restore: 24-word grid + SCB field + submit button restores wallet
• Swaps tab → Restore Swaps: 12-word grid + host dropdown + file upload + submit
• Swaps intro → Restore rescue key: 12-word grid + file upload + submit
• Swaps → Rescue Key: display, download JSON, skull copy modal, delete confirmation all functional

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[gemini-code-assist]

Summary of Changes

Hello @kaloudis, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the seed phrase display and warning mechanisms within the application. By extracting common UI patterns into dedicated, reusable components, it addresses code duplication and enhances the overall modularity and maintainability of the codebase. This change streamlines future development and ensures a consistent user experience across different seed-related views.

Highlights

• Code Duplication Reduction: Eliminated approximately 70% of duplicated code across Seed.tsx and CashuSeed.tsx by extracting shared UI elements.
• New Shared Components: Introduced five new reusable components: MnemonicWord, SeedWordGrid, DangerousCopySeedModal, SeedWarningDisclaimer, and seedStyles.
• Simplified UI Maintenance: Future UI changes to seed views now require only a single edit, improving maintainability and consistency.
• View Reduction: The Seed.tsx file size was reduced by 46% (from 591 to 321 lines), and CashuSeed.tsx was reduced by 68% (from 392 to 126 lines).

Changelog

• components/MnemonicWord.tsx
  • Introduced a new component to display individual mnemonic words, allowing users to reveal/hide them.
  • Encapsulated word display logic and styling.
• components/Modals/DangerousCopySeedModal.tsx
  • Created a reusable modal for displaying dangerous seed phrase copy warnings.
  • Includes a copy button and a cancel button, with configurable warning text.
• components/SeedWarningDisclaimer.tsx
  • Implemented a shared warning disclaimer component for seed views.
  • Features a prominent warning message and an 'I Understand' action, with configurable text keys.
• components/SeedWordGrid.tsx
  • Developed a grid layout component for displaying seed phrases in two columns.
  • Utilizes the MnemonicWord component for each word.
• components/seedStyles.ts
  • Centralized common styles for seed views into a single stylesheet.
  • Includes styles for text, buttons, modals, and column layouts.
• views/Cashu/CashuSeed.tsx
  • Removed duplicated MnemonicWord component definition.
  • Replaced inline modal logic with DangerousCopySeedModal component.
  • Replaced inline warning disclaimer with SeedWarningDisclaimer component.
  • Integrated SeedWordGrid for displaying the seed phrase.
  • Removed local styles definition, relying on seedStyles and component-specific styling.
• views/Settings/Seed.tsx
  • Removed duplicated MnemonicWord component definition.
  • Replaced inline modal logic with DangerousCopySeedModal component, supporting conditional text keys.
  • Replaced inline warning disclaimer with SeedWarningDisclaimer component, supporting conditional text keys.
  • Integrated SeedWordGrid for displaying the seed phrase.
  • Removed local styles definition, relying on seedStyles and component-specific styling.

Activity

• The pull request was opened by kaloudis.
• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively refactors shared components from Seed.tsx and CashuSeed.tsx into reusable modules, significantly reducing code duplication and improving maintainability. The new components, MnemonicWord, SeedWordGrid, DangerousCopySeedModal, SeedWarningDisclaimer, and seedStyles, are well-encapsulated and contribute to a cleaner codebase. This is a great step towards a more modular and scalable architecture. I've identified a few areas where hardcoded values could be improved for better theming and localization consistency, and a magic number in styling that could be made more robust.