Update settings screen and its sub-items - #118
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR revamps the Settings screen UI into grouped, icon-based rows, adds new Settings subsections (General/Contact/Tools), and extends theming/navigation to support the new design.
Changes:
- Replaced the simple Settings list with a custom card/row UI, including delete-wallet action and app version display.
- Added new Settings routes/screens (General, Contact, Tools) and supporting icons.
- Extended theme tokens and navigation header/back behavior for the updated Settings experience.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| screen/settings/Settings.tsx | New Settings UI with rows, icons, and delete-wallet flow |
| screen/settings/GeneralSettings.tsx | Adds placeholder General settings screen |
| screen/settings/ContactBook.tsx | Adds placeholder Contact settings screen |
| screen/settings/ToolsSettings.tsx | Adds placeholder Tools settings screen |
| navigation/DetailViewStackParamList.ts | Adds route types for new settings screens |
| navigation/DetailViewScreensStack.tsx | Registers new screens and customizes Settings header |
| components/navigationStyle.tsx | Adds a default custom back button when not first route |
| components/themes.ts | Adds Settings-specific theme color tokens |
| loc/en.json | Adds new Settings strings (titles/subtitles/delete wallet text) |
| components/icons/*.tsx | Adds new icons used by the Settings rows |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
2978d9c to
19cbd1d
Compare
b049a11 to
e9cc970
Compare
e9cc970 to
73d8424
Compare
73d8424 to
4d60c81
Compare
|
feels like there should be a little more gap between the two text (as per the figma design). |
4d60c81 to
d27cf1a
Compare
fixed and folded in 6fcbe05 |
d27cf1a to
6fcbe05
Compare
the top settings header font size doesn't match the figma design. |
6fcbe05 to
013bea5
Compare
|
one question, why did we extract the delete wallet logic into useDeleteWallet hook? |
its a good practice to keep views aimed at rendering only, it shouldn't have to carry logic and checks. |
|
|
||
| const Settings = () => { | ||
| const { navigate } = useExtendedNavigation(); | ||
| interface RowProps { |
There was a problem hiding this comment.
Scope note, not a change request for this PR: Row is screen-local, and so are SettingsIconWrapper and the six settings* tokens. Meanwhile every screen these rows navigate to — About.tsx, Currency.tsx, EncryptStorage.tsx, ElectrumSettings.tsx — still uses the old ListItem, so tapping any row drops the user back into the previous visual language. Worth a tracking issue so the split doesn't become permanent.
(Separately: the settings* token prefix is the right call — it matches the existing feature-scoped convention in themes.ts like incomingIconBackground / outgoingIconBorder rather than inventing a new scheme.)
013bea5 to
46a74de
Compare
…-wallet flow Replaces the plain Settings list with grouped icon-based rows (General, Currency, Contact, Security, Network, Tools, About), adds stub sub-screens for General/Contact/Tools, extracts delete-wallet logic into a useDeleteWallet hook, and wires Settings-specific theme tokens (including per-icon color tokens) so icon colors go through the theme system instead of being hardcoded.
46a74de to
c081081
Compare
… version methods The new Settings screen rendered the delete-wallet button unconditionally while useDeleteWallet silently no-ops when there's no wallet, leaving a dead button with no feedback. Settings.tsx now hides it via useStorage, matching the old DeleteWallet.tsx behavior. Also adds getVersion/getBuildNumber to the react-native-device-info jest mock, which Settings.tsx now calls at module load for the About row subtitle; the missing mock methods crashed any test importing Settings.tsx.
…elete-wallet unit test
navigationStyle.tsx's baseHeaderStyle lacked as const on
headerBackButtonDisplayMode, silently widening it to string and
forcing a load-bearing duplicate assignment in the options literal
to re-narrow the type. Add as const at the source and drop the
duplicate.
Fix inconsistent casing on contact_subtitle ("Silent payment" ->
"Silent Payment").
Add unit coverage for useDeleteWallet's three branches: biometrics
enabled but auth fails, cancel, and success -> navigation reset.
…eWallet test branches useDeleteWallet's extraction from DeleteWallet.tsx dropped the NotificationSuccess haptic that used to fire after a successful deletion; restore it. Mock DeviceInfo.getPowerState in tests/setup.js since the haptic call reads it before triggering. Add coverage for the two untested branches: biometrics enabled and succeeding, and handleWalletDeletion resolving false.
The stub screens render a bare SafeAreaScrollView, so tapping these rows led to an empty white screen. Drop the rows and their Stack.Screen registrations until each screen has real content; the stub files stay for the PR that wires each one back in.
ded1399 to
c0480bd
Compare
General, Contact, and Tools sub-screens are empty navigation stubs for now — this PR lands the navigation skeleton, content for each will come in follow-up PRs.