feat: settings UI overhaul #3550
Conversation
WalkthroughThis PR introduces UI/UX improvements and internationalization updates across the application. Changes include new icon assets, settings screen refactoring with consistent theming and ListItem layouts, new account banner and API screen components, internationalization updates for multiple languages, and navigation route additions. The refactoring emphasizes visual consistency through theme-aware styling and icon standardization. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~28 minutes
Areas requiring extra attention:
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (30)
app/screens/settings-screen/settings/phone-ln-address.tsx (1)
36-42: Double‑checksubtitleShorterusage and avoid constructing unusedlnAddressTwo small polish points:
subtitleShorter={(data?.me?.username || "").length > 22}is set but nosubtitleprop is passed. IfSettingsRowonly usessubtitleShorterin conjunction with an explicit subtitle, this may be a no‑op; consider dropping it or wiring the intended subtitle for clarity.- You always build
lnAddresseven when there is no phone. To avoid accidental"undefined@host"values leaking into logs or future refactors, you could derive it only when needed, e.g.:- const lnAddress = `${data?.me?.phone}@${hostName}` + const lnAddress = + data?.me?.phone && hostName ? `${data.me.phone}@${hostName}` : ""These are not blockers but would make the component behavior clearer.
app/screens/settings-screen/account/settings/danger-zone.tsx (1)
18-20: Confirm intended level gating and consider simplifying overlapping conditionsUsing
isAtLeastLevelZeroto short‑circuit the whole component andisAtLeastLevelOneto gateLogOutis logically sound and matches the level-based UX direction. Two small follow-ups to consider:
- Behavior check: Level‑0 users will now see the danger‑zone header but not the
LogOutrow (whileDeletestays gated oncurrentLevel !== AccountLevel.NonAuth). Please confirm this is the intended product behavior and that level‑0 users still have a clear logout path elsewhere.- Optional cleanup: Given the
!isAtLeastLevelZeroearly return, thecurrentLevel !== AccountLevel.NonAuthcheck forDeletemay be redundant ifNonAuthcan never satisfyisAtLeastLevelZero. If that relationship is guaranteed, you could simplifyDelete’s condition to justexpandedfor readability.Also applies to: 29-31
app/screens/settings-screen/settings/account-ln-address.tsx (1)
28-30: Lightning address title logic is correct; consider a tiny cleanup aroundlnAddressUsing the full
lnAddressas the row title whenhasUsernameis true, and reusing it for the copy action, matches the intended UX and keeps the copy behavior guarded byhasUsername. If you want to tighten things further, you could derivelnAddressonly inside thehasUsernamebranch to avoid constructing"undefined@host"when data is not yet loaded, e.g.:- const hasUsername = Boolean(data?.me?.username) - const lnAddress = `${data?.me?.username}@${hostName}` + const hasUsername = Boolean(data?.me?.username) + ... action={() => { if (hasUsername) { - Clipboard.setString(lnAddress) + const lnAddress = `${data?.me?.username}@${hostName}` + Clipboard.setString(lnAddress)Purely optional, but slightly clearer about when the address is actually valid.
Also applies to: 35-37, 44-45
app/screens/settings-screen/settings/preferences-language.tsx (1)
24-29: Prefer a single i18n string for"Language: <value>"instead of manual concatenation.Building the title as
${LL.common.language()}: ${languageValue}hard‑codes the colon and word order, which can be sub‑optimal for some locales and also makes the value part oftestProps(title)(less stable for tests). Consider a dedicated translation key with a placeholder, e.g.:- title={`${LL.common.language()}: ${languageValue}`} + title={LL.SettingsScreen.languageWithValue({ language: languageValue })}(or similar), so translators control the full sentence and tests can rely on a predictable key.
app/screens/settings-screen/settings/sp-notifications.tsx (1)
13-18: Avoid composing two localized strings with manual punctuation
title={${LL.common.notifications()}: ${LL.common.some()}}hard‑codes ordering and punctuation, which can be awkward for some locales. Consider a single i18n key (e.g.,LL.SettingsScreen.notificationsSummary()) or an ICU-style message that can embed the second concept while letting translators control word order and punctuation.app/screens/settings-screen/settings/preferences-currency.tsx (1)
16-21: Guard against undefineddisplayCurrencyin title
title={${LL.SettingsScreen.displayCurrency()}: ${displayCurrency}}will render"undefined"ifdisplayCurrencyis ever unset (where previously the subtitle might simply be empty). IfdisplayCurrencycan be transiently missing, consider a fallback, e.g.displayCurrency || '-'or skipping the suffix until it’s available.app/screens/settings-screen/row.tsx (1)
5-6: Right icon theming looks good; consider aligning left icon tooUsing
useThemeandcolor={colors.primary}on the right ionicon improves consistency with the rest of the themed UI. For full visual consistency, you may also want to pass a themed color into the leftIconpath (whenleftGaloyIconis not used), so both sides follow the same color scheme.Also applies to: 39-42, 55-59
app/screens/settings-screen/account/settings/email.tsx (1)
56-66: Email title and theming logic look solid; minor cleanups possibleThe new behavior (showing the verified email as the title and theming the delete icon with
colors.red) is clear and consistent with the rest of the settings UI. You could simplify a bit by:
- Returning
email?.toString()insideif (email).- Dropping the redundant
email &&in(bothEmailAndPhoneVerified || (email && !emailVerified)), since you’re already inside theemail ? ... : undefinedbranch;bothEmailAndPhoneVerified || !emailVerifiedwould be equivalent.These are purely readability tweaks; behavior is fine as‑is.
Also applies to: 69-72, 159-172
app/components/contact-modal/contact-modal.tsx (1)
53-127: Minor inconsistency in icon color prop usage.The
SupportChat(line 57) andStatusPage(line 66) icons omit thecolorprop, whileFaq,Mattermost,color={colors.black}. For consistency, consider adding the color prop to all icons or removing it from all (relying on a default).{ id: SupportChannels.SupportChat, name: LL.support.chatbot(), - icon: <Icon name={"chatbubbles-outline"} type="ionicon" size={24} />, + icon: <Icon name={"chatbubbles-outline"} type="ionicon" color={colors.black} size={24} />, action: () => { navigation.navigate("supportChat") toggleModal() }, }, { id: SupportChannels.StatusPage, name: LL.support.statusPage(), - icon: <Icon name={"alert-circle-outline"} type="ionicon" size={24} />, + icon: <Icon name={"alert-circle-outline"} type="ionicon" color={colors.black} size={24} />, action: () => {app/screens/settings-screen/account/banner-vertical.tsx (1)
88-93: Remove unused style definition.The
switchstyle is defined but not used in the component.outer: { padding: 4, display: "flex", flexDirection: "column", alignItems: "center", rowGap: 15, }, - switch: { - display: "flex", - flexDirection: "row", - alignItems: "center", - justifyContent: "space-between", - }, textContainer: {app/screens/settings-screen/default-wallet.tsx (1)
120-129: Move inline style to makeStyles for performance.The empty View spacer at line 128 uses an inline style object that will be recreated on every render. Consider moving this to the makeStyles hook.
Apply this diff:
const useStyles = makeStyles(({ colors }) => ({ walletsContainer: { marginHorizontal: 16, marginTop: 16, }, listItemContainer: { backgroundColor: colors.transparent, paddingVertical: 16, paddingHorizontal: 16, }, itemTitle: { fontSize: 16, }, + iconSpacer: { + width: 20, + height: 20, + }, containerInfo: { marginHorizontal: 20, marginTop: 34, marginBottom: 32, }, }))Then update the empty View:
- <View style={{ width: 20, height: 20 }}></View> + <View style={styles.iconSpacer} />app/screens/settings-screen/settings/account-default-wallet.tsx (1)
20-25: Currency labels are not localized.The currency names "BTC" and "Stablesats USD" are hardcoded strings that won't be translated for non-English locales. Consider using i18n keys for these currency display names if localization consistency is required across the app.
app/screens/settings-screen/api-screen.tsx (1)
83-84: Move inline style touseStyles.The inline style object
{ flexDirection: "row", alignItems: "center", gap: 5 }should be moved to theuseStyleshook for consistency with the rest of the component's styling approach.app/screens/settings-screen/account/banner.tsx (1)
13-14: Level-context based login detection looks good; consider skipping query when NonAuthSwitching to
useLevelwithcurrentLevel !== AccountLevel.NonAuthis a clear way to deriveisUserLoggedIn, and the banner behavior stays intuitive. One optional optimization:useSettingsScreenQuery({ fetchPolicy: "cache-first" })now runs even when the user is NonAuth; if the backend treats unauthenticatedmerequests as errors or if you want to avoid the extra network call, you could add askipwhencurrentLevel === AccountLevel.NonAuth.Also applies to: 32-36, 56-56
app/screens/settings-screen/notifications-screen.tsx (1)
126-141: Notification categories UI/theming refactor is solid; a couple of minor polish opportunitiesThe refactor to
NotificationCategories,CategoryIcons, and the ListItem-based rows looks clean and consistent with the themed design system; the strong typing ofCategoryIcons: Record<NotificationCategoryType, IconNamesType>is especially nice.Two small, non-blocking suggestions:
- Since you’ve introduced
NotificationCategoryType, consider narrowingtoggleCategory’s signature fromcategory: stringtocategory: NotificationCategoryTypeso the compiler will catch any future mismatch between GraphQL categories,NotificationCategories, andCategoryIcons.- The notification badge in the header is now an empty
<Text>used purely as a dot. For clarity (and slightly better semantics), you could switch this to a simple<View>with the samenotificationCountstyle and keep any accessible label/test ID on the touchable wrapper.Also applies to: 133-138, 146-149, 211-215, 237-263, 268-271, 296-303, 308-337
app/screens/settings-screen/settings-screen.tsx (1)
24-25: Settings groups re-org and notifications header update look coherentThe new
waysToGetPaidgroup (LN address, phone LN address, POS, static QR) and movingSwitchAccountSettinginto theaccountgroup make the settings structure easier to scan, and the updated “support” label for the community items reads well.The header-right notifications icon + small dot badge also align with the modernized notifications UI. If you care about accessibility, you might want to ensure the touchable has an appropriate accessible label that includes the count, since the visual badge is now an empty element with no text. Functionally, everything here looks fine.
Also applies to: 37-38, 86-99, 110-112, 121-125, 138-139, 162-167
app/i18n/raw-i18n/source/en.json (6)
2260-2260: Capitalize brand/tech term: Lightning.Align with other occurrences (“Lightning Address”, “Lightning Network”).
- "setYourLightningAddress": "Set your lightning address", + "setYourLightningAddress": "Set your Lightning address",
2398-2402: Theme label consistency with Settings.ThemeScreen uses “System setting”; SettingsScreen uses “Set by OS”. Pick one for coherence.
- "system": "System setting", + "system": "Set by OS",(Alternatively, change 2255 to “System setting”.)
Also applies to: 2255-2255
2603-2604: Inconsistent capitalization: “Security and privacy” vs “Security and Privacy”.Standardize to one style (Title Case appears elsewhere).
- "onDeviceSecurity": "Security and privacy", + "onDeviceSecurity": "Security and Privacy",
2750-2750: Title case nit: “Status page” → “Status Page”.Matches other section titles.
- "statusPage": "Status page", + "statusPage": "Status Page",
2375-2377: Clarify TOTP copy.Slash reads awkwardly; parentheses read better in UI strings.
- "secret": "Secret/backup", + "secret": "Secret (backup)",
2292-2292: Optional: make the toggle label explicit.“Enable all” → “Enable all notifications” improves clarity in accessibility contexts.
- "pushNotifications": "Enable all", + "pushNotifications": "Enable all notifications",app/i18n/i18n-types.ts (1)
7260-7262: Typo in key name:apiAcessshould beapiAccess.The key
apiAcessis missing a 'c' - it should beapiAccess. Since this is a settings UI overhaul, consider fixing this typo to improve code quality. Note that this would require updating all usages of this key across translation files and components.app/i18n/raw-i18n/translations/es.json (7)
2153-2161: Unify capitalization, term, and tone in Security settings
- Use sentence case to match common keys and screens.
- Prefer “saldo” over “balance”.
- Keep formal voice consistently (“Establezca…”).
- "title": "Seguridad y Privacidad", + "title": "Seguridad y privacidad", ... - "hideBalanceTitle": "Siempre ocultar el balance", + "hideBalanceTitle": "Siempre ocultar el saldo", - "pinDescription": "Establece un PIN numérico de 4 dígitos para desbloquear", + "pinDescription": "Establezca un PIN numérico de 4 dígitos para desbloquear"
2288-2290: Polish confirmation CTA and currency labels
- Short, action-oriented CTA; avoid “Por favor” in buttons.
- More natural labels for currencies.
- "logoutOneAccountConfirm": "Comprendo. Por favor, cierre sesión.", + "logoutOneAccountConfirm": "Entiendo. Cerrar sesión.", - "receiveCurrency": "Recibir moneda", + "receiveCurrency": "Moneda para recibir", - "displayCurrency": "Mostrar moneda" + "displayCurrency": "Moneda de visualización"
2294-2301: Clarify notifications toggle and pluralize category
- Be explicit: “todas las notificaciones”.
- Use plural: “Alertas”.
- "pushNotifications": "Habilitar todas", + "pushNotifications": "Habilitar todas las notificaciones", ... - "title": "Alerta de transacciones", + "title": "Alertas de transacciones",
2395-2395: Optional: streamline Default wallet info and brand consistencyMinor phrasing tweak; also keep “Stablesats” brand usage consistent across file.
- "info": "Usa tu cuenta de Stablesats en Blink para mantener la estabilidad de tu saldo en dólares fiduciarios. Usa tu cuenta de Bitcoin si acumulas sats y no te importa que tu saldo en dólares fiduciarios fluctúe constantemente." + "info": "Usa tu cuenta Stablesats en Blink para mantener estable tu saldo en dólares. Usa tu cuenta Bitcoin si acumulas sats y no te importa que tu saldo en dólares fluctúe."
2400-2404: Fix inconsistency: “Modo claro” vs “Modo luz”Align labels and trailing punctuation.
"setToDark": "Modo oscuro.", - "setToLight": "Modo luz" + "setToLight": "Modo claro."
2435-2436: Brand and grammar in Transaction limits
- Capitalize Stablesats consistently.
- Add article and preposition for natural Spanish.
- "stablesatTransfers": "Transferencias de stablesats", + "stablesatTransfers": "Transferencias de Stablesats", - "internalSend": "Enviar a usuario {bankName: string}", + "internalSend": "Enviar a un usuario de {bankName: string}",
2604-2604: Match “Seguridad y privacidad” across the appThis key now matches sentence case; ensure SecurityScreen.title uses the same (see suggested change at Line 2153).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
app/assets/icons-redesign/calculator.svgis excluded by!**/*.svgapp/assets/icons-redesign/document.svgis excluded by!**/*.svgapp/assets/icons-redesign/headset.svgis excluded by!**/*.svgapp/assets/icons-redesign/house-outline.svgis excluded by!**/*.svgapp/assets/icons-redesign/key.svgis excluded by!**/*.svg
📒 Files selected for processing (39)
app/components/atomic/galoy-icon/galoy-icon.tsx(2 hunks)app/components/contact-modal/contact-modal.tsx(8 hunks)app/components/totp-export/totp-copy.tsx(2 hunks)app/i18n/en/index.ts(13 hunks)app/i18n/i18n-types.ts(41 hunks)app/i18n/raw-i18n/source/en.json(13 hunks)app/i18n/raw-i18n/translations/es.json(11 hunks)app/navigation/root-navigator.tsx(4 hunks)app/navigation/stack-param-lists.ts(1 hunks)app/screens/settings-screen/account/account-screen.tsx(3 hunks)app/screens/settings-screen/account/banner-vertical.tsx(1 hunks)app/screens/settings-screen/account/banner.tsx(3 hunks)app/screens/settings-screen/account/id.tsx(1 hunks)app/screens/settings-screen/account/settings/danger-zone.tsx(2 hunks)app/screens/settings-screen/account/settings/email.tsx(3 hunks)app/screens/settings-screen/account/settings/phone.tsx(3 hunks)app/screens/settings-screen/account/settings/upgrade.tsx(1 hunks)app/screens/settings-screen/api-screen.tsx(1 hunks)app/screens/settings-screen/default-wallet.tsx(3 hunks)app/screens/settings-screen/notifications-screen.tsx(4 hunks)app/screens/settings-screen/row.tsx(3 hunks)app/screens/settings-screen/security-screen.tsx(2 hunks)app/screens/settings-screen/settings-screen.tsx(6 hunks)app/screens/settings-screen/settings/account-default-wallet.tsx(1 hunks)app/screens/settings-screen/settings/account-level.tsx(1 hunks)app/screens/settings-screen/settings/account-ln-address.tsx(2 hunks)app/screens/settings-screen/settings/account-pos.tsx(2 hunks)app/screens/settings-screen/settings/account-static-qr.tsx(2 hunks)app/screens/settings-screen/settings/advanced-api-access.tsx(1 hunks)app/screens/settings-screen/settings/advanced-export-csv.tsx(1 hunks)app/screens/settings-screen/settings/community-join.tsx(1 hunks)app/screens/settings-screen/settings/community-need-help.tsx(1 hunks)app/screens/settings-screen/settings/phone-ln-address.tsx(1 hunks)app/screens/settings-screen/settings/preferences-currency.tsx(1 hunks)app/screens/settings-screen/settings/preferences-language.tsx(1 hunks)app/screens/settings-screen/settings/preferences-theme.tsx(1 hunks)app/screens/settings-screen/settings/sp-notifications.tsx(1 hunks)app/screens/settings-screen/settings/sp-security.tsx(1 hunks)app/screens/totp-screen/totp-registration-initiate.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (17)
app/screens/settings-screen/security-screen.tsx (2)
app/components/screen/screen.tsx (1)
Screen(99-104)app/screens/settings-screen/account/multi-account/switch-account.tsx (1)
useStyles(77-88)
app/screens/settings-screen/settings/preferences-language.tsx (2)
app/i18n/mapping.ts (1)
LocaleToTranslateLanguageSelector(35-63)app/screens/settings-screen/row.tsx (1)
SettingsRow(23-103)
app/screens/settings-screen/settings/account-static-qr.tsx (1)
app/components/atomic/galoy-icon/galoy-icon.tsx (1)
GaloyIcon(152-188)
app/screens/settings-screen/settings-screen.tsx (13)
app/screens/settings-screen/settings/account-level.tsx (1)
AccountLevelSetting(10-24)app/screens/settings-screen/settings/account-tx-limits.tsx (1)
TxLimits(9-20)app/screens/settings-screen/settings/multi-account.tsx (1)
SwitchAccountSetting(9-20)app/screens/settings-screen/settings/account-ln-address.tsx (1)
AccountLNAddress(14-63)app/screens/settings-screen/settings/phone-ln-address.tsx (1)
PhoneNAddress(14-63)app/screens/settings-screen/settings/account-pos.tsx (1)
AccountPOS(12-38)app/screens/settings-screen/settings/account-static-qr.tsx (1)
AccountStaticQR(12-38)app/screens/settings-screen/account/settings/email.tsx (1)
EmailSetting(68-186)app/screens/settings-screen/account/settings/phone.tsx (1)
PhoneSetting(36-100)app/screens/settings-screen/settings/account-default-wallet.tsx (1)
DefaultWallet(11-32)app/screens/settings-screen/settings/preferences-language.tsx (1)
LanguageSetting(12-31)app/graphql/generated.ts (2)
Icon(824-876)Icon(878-878)app/screens/settings-screen/group.tsx (1)
SettingsGroup(7-37)
app/screens/settings-screen/row.tsx (1)
app/graphql/generated.ts (2)
Icon(824-876)Icon(878-878)
app/screens/settings-screen/account/banner-vertical.tsx (5)
app/i18n/i18n-react.tsx (1)
useI18nContext(14-14)app/hooks/use-app-config.ts (1)
useAppConfig(6-66)app/navigation/stack-param-lists.ts (1)
RootStackParamList(17-124)app/graphql/level-context.ts (1)
useLevel(29-29)app/graphql/generated.ts (1)
useSettingsScreenQuery(7924-7927)
app/screens/settings-screen/account/banner.tsx (2)
app/graphql/level-context.ts (1)
useLevel(29-29)app/graphql/generated.ts (3)
AccountLevel(183-188)AccountLevel(190-190)useSettingsScreenQuery(7924-7927)
app/screens/settings-screen/account/settings/email.tsx (1)
app/components/atomic/galoy-icon-button/galoy-icon-button.tsx (1)
GaloyIconButton(28-131)
app/screens/settings-screen/settings/account-pos.tsx (1)
app/components/atomic/galoy-icon/galoy-icon.tsx (1)
GaloyIcon(152-188)
app/components/totp-export/totp-copy.tsx (2)
app/i18n/i18n-react.tsx (1)
useI18nContext(14-14)app/components/atomic/galoy-icon/galoy-icon.tsx (1)
GaloyIcon(152-188)
app/screens/settings-screen/account/settings/phone.tsx (1)
app/components/atomic/galoy-icon-button/galoy-icon-button.tsx (1)
GaloyIconButton(28-131)
app/screens/settings-screen/api-screen.tsx (3)
app/components/atomic/galoy-icon/galoy-icon.tsx (2)
IconNamesType(135-135)GaloyIcon(152-188)app/i18n/i18n-react.tsx (1)
useI18nContext(14-14)app/components/screen/screen.tsx (1)
Screen(99-104)
app/screens/settings-screen/settings/advanced-api-access.tsx (2)
app/navigation/stack-param-lists.ts (1)
RootStackParamList(17-124)app/screens/settings-screen/row.tsx (1)
SettingsRow(23-103)
app/screens/settings-screen/settings/account-ln-address.tsx (2)
app/hooks/use-app-config.ts (1)
useAppConfig(6-66)app/components/atomic/galoy-icon/galoy-icon.tsx (1)
GaloyIcon(152-188)
app/navigation/root-navigator.tsx (2)
app/screens/settings-screen/security-screen.tsx (1)
SecurityScreen(29-154)app/screens/settings-screen/api-screen.tsx (1)
ApiScreen(20-107)
app/screens/totp-screen/totp-registration-initiate.tsx (1)
app/components/totp-export/totp-copy.tsx (1)
CopySecretComponent(13-50)
app/components/contact-modal/contact-modal.tsx (1)
app/graphql/generated.ts (2)
Icon(824-876)Icon(878-878)
🔇 Additional comments (36)
app/screens/settings-screen/settings/phone-ln-address.tsx (1)
28-30: Condition is based onphonebut namedhasUsernameand drives Lightning Address UX
hasUsernameis derived fromdata?.me?.phone, andlnAddressis built fromphone@hostName. The same flag controls whether the component copies a Lightning Address or opensSetLightningAddressModal, which (by naming) likely manages username-based Lightning Address setup.This creates ambiguity: if the intended behavior is "copy phone-based LN address when available, otherwise prompt to set a username-based address", the variable name is misleading; if the intent is to check for a username instead, this is a logic bug.
Clarify the intended behavior and either:
- Rename
hasUsernametohasPhoneLnAddressor similar to reflect that it checksphone, or- Switch the condition and
lnAddressto useusernameif that's the actual gate for Lightning Address readiness.app/screens/settings-screen/account/settings/danger-zone.tsx (3)
1-1: Import reorder is non-functional and fineReordering
View/TouchableOpacityin the React Native import has no behavioral impact and keeps imports clean and consistent.
8-9: NewLogOutcomponent wiring looks correctImporting
LogOutfrom./logoutand rendering it via{isAtLeastLevelOne && expanded && <LogOut />}is consistent and avoids unnecessary mounting when the panel is collapsed or the user is below level one. Just ensure./logoutindeed exports a namedLogOutcomponent and matches the expected props (currently no props passed).Also applies to: 29-29
37-41: Spacing tweaks are low-risk and localizedReducing
marginTopfrom 10→5 androwGapfrom 20→10 inverticalSpacingis a pure layout change scoped to this container; no functional concerns, only visual tightening of the section.app/screens/settings-screen/settings/account-ln-address.tsx (1)
11-12: Theming-aware copy icon integration looks solidImporting
GaloyIconand wiringuseThemeto passcolors.primaryinto thecopy-pasteicon is consistent with the existingGaloyIconpattern and should keep the right-side icon correctly theme-aware. No functional issues here from a UI/theming perspective.Also applies to: 16-18, 38-42
app/screens/settings-screen/settings/sp-security.tsx (1)
24-29: Icon swap is fineChanging the leftIcon to
"shield-outline"is a purely visual tweak and keeps behavior unchanged; no issues from a code perspective.app/components/totp-export/totp-copy.tsx (1)
2-5: New TOTP secret row implementation looks correctThe refactor to a themed row with monospace, middle-ellipsized secret text and a copy icon preserves the copy behavior and improves clarity; useTheme integration and styling are consistent with the rest of the UI.
Also applies to: 15-17, 29-48, 52-75
app/screens/settings-screen/settings/account-pos.tsx (1)
10-16: POS settings row theming and icon updates look goodUsing
leftGaloyIcon="calculator"and a themed<GaloyIcon name="link" ... color={colors.primary} />keeps the row consistent with the rest of the settings overhaul without changing behavior (POS URL and navigation remain the same).Also applies to: 27-33
app/screens/totp-screen/totp-registration-initiate.tsx (1)
111-114: TOTP registration layout change preserves behavior and improves structurePlacing
CopySecretComponentand the explanatoryTextabove a bottom-alignedGaloyPrimaryButton(viabuttonsContainerwithflex: 1andjustifyContent: "flex-end") keeps the flow intuitive while leaving the registration logic untouched; the adjustments look safe.Also applies to: 149-155
app/components/atomic/galoy-icon/galoy-icon.tsx (1)
62-66: LGTM!The new icon imports and their mapping to the
iconsobject follow the established pattern. The naming conventions are consistent with both the existing codebase (e.g., using-outlinesuffix for outline variants) and typical icon library conventions.Also applies to: 128-132
app/screens/settings-screen/settings/preferences-theme.tsx (1)
27-31: LGTM!The consolidated title format (
Theme: ${colorScheme}) is clean and consistent with the UI overhaul pattern. The icon change tobrush-outlineis appropriate for theme settings.app/screens/settings-screen/settings/advanced-export-csv.tsx (1)
66-74: LGTM!The icon placement change improves semantic clarity:
list-outlineon the left represents the CSV/list content, whiledownload-outlineon the right indicates the export action. This follows a common UX pattern for action-oriented list items.app/components/contact-modal/contact-modal.tsx (1)
150-159: LGTM!Wrapping
item.namein aTextcomponent withtype="p2"and usingcolors.primaryfor the chevron provides consistent theming and typography.app/screens/settings-screen/account/banner-vertical.tsx (1)
47-56: Verify navigation reset behavior for logged-out users.Using
navigation.reset()clears the entire navigation stack. Confirm this is the intended UX when a non-authenticated user taps the banner, as they won't be able to navigate back.app/screens/settings-screen/settings/account-static-qr.tsx (1)
27-36: VerifysubtitleShorterprop usage withoutsubtitle.The
subtitleShorter={true}prop is set on theSettingsRowcomponent, but nosubtitleprop is provided. Confirm whethersubtitleShorterhas any effect without asubtitlevalue, or if this prop should be removed.app/screens/settings-screen/security-screen.tsx (2)
11-11: LGTM: Clean migration to ListItem components.The refactoring from individual Text/Switch layouts to ListItem-based components improves UI consistency and maintainability. The pattern is well-applied across all three settings (biometrics, PIN, hide balance).
Also applies to: 118-150
156-173: LGTM: Theme-aware styling properly applied.The styling updates correctly use theme colors (grey5, grey3, transparent) and maintain visual consistency with the design system. The addition of borderRadius and proper color mapping is appropriate.
app/screens/settings-screen/account/id.tsx (1)
84-84: LGTM: Height adjustment aligns with UI updates.The wrapper height increase from 48 to 55 pixels is a straightforward dimension adjustment, likely to maintain visual consistency with other UI components in this settings overhaul.
app/screens/settings-screen/settings/account-level.tsx (1)
17-17: Verify i18n keys exist for the new title format.The title now concatenates
LL.common.yourAccount()withLL.AccountScreen.level(). Ensure both i18n keys are defined in all supported languages by searching your i18n configuration files for these key paths.app/screens/settings-screen/settings/community-need-help.tsx (1)
36-36: Verify "headset" icon exists in the GaloyIcon system.The change from
leftIcontoleftGaloyIcon="headset"aligns with the icon system refactor. Ensure the "headset" icon is available in the GaloyIcon component and properly exported.app/navigation/stack-param-lists.ts (1)
104-104: Verify ApiScreen component is registered in root navigator.The new
apiScreenroute has been added to the type definitions. Ensure the corresponding screen component is properly registered in the root navigator.app/screens/settings-screen/settings/community-join.tsx (1)
36-36: Verify "people" icon exists in the GaloyIcon system.The migration to
leftGaloyIcon="people"is consistent with the broader icon refactor. Ensure the "people" icon is available in the GaloyIcon component before merging.app/screens/settings-screen/account/settings/upgrade.tsx (1)
19-20: Verify i18n key and icon availability.The changes use
LL.AccountScreen.identityVerification()for the title andleftGaloyIcon="upgrade"for the icon. Confirm that:
- The
identityVerificationkey exists in the AccountScreen i18n translations- The
upgradeicon is defined in the galoy-icon component libraryTo verify, search for:
identityVerificationin the i18n translation files (typically inapp/i18n/**)upgradein the galoy-icon icon definitionsapp/screens/settings-screen/account/settings/phone.tsx (1)
86-92: LGTM!The
GaloyIconButtonis correctly configured with theme-aware coloring usingcolors.redand theiconOnlyprop for a cleaner delete button appearance. The props align with the component's interface as shown in the relevant code snippet.app/screens/settings-screen/account/account-screen.tsx (1)
27-33: LGTM!The component correctly integrates i18n for the settings group name and swaps to the new
AccountBannerVerticalcomponent. The layout changes are consistent with the PR's UI overhaul objectives.app/navigation/root-navigator.tsx (1)
387-393: Verify i18n key spelling:apiAcessvsapiAccess.The navigation screen uses the i18n key
LL.SettingsScreen.apiAcess(). Confirm whether this spelling is correct or if it should beapiAccess(with double 'c'). Check the corresponding i18n translation files and other references to this key throughout the codebase to ensure consistency.app/screens/settings-screen/settings/advanced-api-access.tsx (1)
5-7: Internal navigation for API access setting looks consistentUsing a typed
useNavigation<StackNavigationProp<RootStackParamList>>()and navigating to"apiScreen"viaSettingsRow.actionaligns with the root stack and other settings items; the newleftGaloyIcon="document-outline"is also consistent with the icon system. No issues from my side.Also applies to: 11-18
app/i18n/raw-i18n/source/en.json (2)
2256-2256: Typo in i18n key will break lookups: renameapiAcess→apiAccess.This is a public i18n surface; the misspelling will cause runtime misses and type-gen drift.
Apply this transitional fix (adds correct key while keeping the misspelled one temporarily):
- "apiAcess": "API integration", + "apiAccess": "API integration", + "apiAcess": "API integration", // TODO: remove after code & other locales migrateVerify usages across the codebase and other locale files to ensure consistent migration.
2160-2161: The string "PIN code" is generic and does not encode a specific digit length. Blink's authentication already uses 6-digit verification codes per documentation, making this string appropriate without modification.app/i18n/en/index.ts (2)
2050-2050: LGTM! Localization updates look good.The remaining translation updates support the UI/UX improvements described in the PR. The text is clear, grammatically correct, and follows consistent patterns. These include:
- Branding updates (e.g., "Wallet powered by Blink")
- Security & privacy settings refinements
- Account and notification labels
- Theme and display settings
- Transaction limit terminology
Also applies to: 2198-2198, 2206-2209, 2323-2323, 2329-2329, 2360-2361, 2365-2365, 2394-2396, 2446-2446, 2457-2459, 2479-2479, 2484-2488, 2522-2523, 2704-2704, 2709-2709, 2714-2714, 2734-2734, 2817-2818, 2854-2854
2326-2326: Fix typo in key name "apiAcess".The key name
apiAcessshould beapiAccess(two c's). Verify this spelling across all references in the codebase, including usage in components likeroot-navigator.tsx, to ensure consistency. If the typo exists consistently across all references, update all occurrences together to avoid runtime errors.app/i18n/i18n-types.ts (1)
6332-6334: New translation keys and branding updates look good.The new translation keys (
identityVerification,receiveCurrency,displayCurrency,yourAccount,some,support) are properly typed and consistent between the string literal types and function return types. The branding update from "Galoy" to "Blink" is correctly applied.Also applies to: 7662-7665, 7386-7393, 8455-8458, 8879-8886
app/i18n/raw-i18n/translations/es.json (4)
2364-2366: LGTM: account actions and identity verificationThese additions read well and match tone elsewhere.
2609-2609: LGTM: common labels“Tu cuenta”, “Exportar todas las transacciones”, “Algunos”, “Soporte” look correct and consistent.
Also applies to: 2634-2634, 2716-2717
2751-2751: LGTM: status page label“Página de estado” is clear and idiomatic.
2254-2261: Improve terminology and capitalization in Spanish translationUpdate three items for consistency and clarity:
- Change "QR estático imprimible" to "Código QR estático imprimible" for clarity
- Capitalize "Lightning" in "Establezca su dirección Lightning"
- The key
apiAcessmay be misspelled (likelyapiAccess), but verify across all locale files and code references before renaming to ensure i18n lookups remain intact- "staticQr": "QR estático imprimible", + "staticQr": "Código QR estático imprimible", ... - "setYourLightningAddress": "Establezca su dirección lightning", + "setYourLightningAddress": "Establezca su dirección Lightning"
4 participants
Summary by CodeRabbit
Release Notes
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.