Swaps with package #126
Swaps with package #126
Conversation
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (14)
src/icons/Lock.tsx (1)
6-7: Consider adding accessibility attributes for better screen reader support.The icon implementation looks correct with the new fill-based styling. However, consider adding accessibility attributes to improve screen reader support.
- <path - d='M30.5 4.5H18.5V8.5H14.5V16.5H8.5V44.5H40.5V16.5H34.5V8.5H30.5V4.5ZM30.5 8.5V16.5H18.5V8.5H30.5ZM18.5 20.5H36.5V40.5H12.5V20.5H18.5ZM26.5 26.5H22.5V34.5H26.5V26.5Z' - fill='currentColor' - /> + <path + d='M30.5 4.5H18.5V8.5H14.5V16.5H8.5V44.5H40.5V16.5H34.5V8.5H30.5V4.5ZM30.5 8.5V16.5H18.5V8.5H30.5ZM18.5 20.5H36.5V40.5H12.5V20.5H18.5ZM26.5 26.5H22.5V34.5H26.5V26.5Z' + fill='currentColor' + />And update the SVG element:
- <svg width={size} height={size} viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'> + <svg + width={size} + height={size} + viewBox='0 0 49 49' + fill='none' + xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' + role='img' + >src/providers/options.tsx (1)
77-91: Consider adding icons or documenting the empty icon choice.The new Config section options (Theme, Fiat, Display) use empty React fragments as icons, which is inconsistent with other options that have proper icons. This could impact UI consistency.
If icons are not needed for these options, consider adding a comment explaining why. Otherwise, add appropriate icons:
{ - icon: <></>, + icon: <ThemeIcon />, option: SettingsOptions.Theme, section: SettingsSections.Config, }, { - icon: <></>, + icon: <FiatIcon />, option: SettingsOptions.Fiat, section: SettingsSections.Config, }, { - icon: <></>, + icon: <DisplayIcon />, option: SettingsOptions.Display, section: SettingsSections.Config, },src/screens/Init/Success.tsx (1)
10-31: Consider making the header text conditional like the success message.The header text is hardcoded as "Create new wallet" even when restoring a wallet, which could be confusing to users.
- <Header text='Create new wallet' /> + <Header text={initInfo.restoring ? 'Restore wallet' : 'Create new wallet'} />src/components/TransactionsList.tsx (1)
64-64: Rename the Date component to avoid shadowing the global Date.The component name
Dateshadows the global Date constructor, which could cause confusion.- const Date = () => <TextSecondary>{prettyDate(tx.createdAt)}</TextSecondary> + const DateDisplay = () => <TextSecondary>{prettyDate(tx.createdAt)}</TextSecondary>And update the usage:
<div> <Kind /> - <Date /> + <DateDisplay /> </div>src/screens/Init/Restore.tsx (1)
13-13: Consider renaming the Error import to avoid shadowing.The imported
Errorcomponent shadows the globalErrorconstructor, which could lead to confusion.-import Error from '../../components/Error' +import ErrorMessage from '../../components/Error'And update the usage:
- <Error error={Boolean(error)} text={error} /> + <ErrorMessage error={Boolean(error)} text={error} />src/screens/Settings/Backup.tsx (1)
51-62: Excellent UI improvement with better visual presentation.The replacement of Textarea with a custom styled display using Shadow and Text components provides better visual hierarchy and styling control. The conditional label rendering and shadowed container enhance the user experience.
Consider extracting the inline style to a constant for better maintainability:
+const containerStyle = { padding: '10px' } + <Shadow> - <div style={{ padding: '10px' }}> + <div style={containerStyle}> <Text small wrap> {nsec} </Text> </div> </Shadow>src/screens/Apps.tsx (1)
14-34: Move inline styles to a proper styled component.The extensive inline styles in
ComingSooncomponent go against the established pattern of using styled components. Consider creating a proper styled component or using CSS classes for better maintainability.-const ComingSoon = () => { - const style = { - borderRadius: '4px', - background: 'rgba(96, 177, 138, 0.10)', - color: 'var(--green)', - fontFamily: 'Geist Mono', - fontSize: '12px', - fontStyle: 'normal', - fontWeight: 400, - lineHeight: '150%', - width: 'fit-content', - padding: '2px 8px', - textAlign: 'right' as const, - textTransform: 'uppercase' as const, - } - return ( - <IonText> - <p style={style}>Coming Soon</p> - </IonText> - ) -} +const ComingSoon = () => ( + <Text + small + color='green' + style={{ + borderRadius: '4px', + background: 'rgba(96, 177, 138, 0.10)', + fontFamily: 'Geist Mono', + width: 'fit-content', + padding: '2px 8px', + textTransform: 'uppercase', + }} + > + Coming Soon + </Text> +)src/components/Empty.tsx (1)
6-10: Make text prop optional in EmptyList for consistency.The
EmptyListcomponent requirestextprop whileEmptyCoinsandEmptyLogshave hardcoded text. Consider makingtextoptional with a default value for consistency.interface EmptyProps { - text: string + text?: string icon?: ReactNode secondaryText?: string } -export function EmptyList({ text, secondaryText }: EmptyProps) { - return <EmptyTemplate icon={<EmptyListIcon />} text={text} secondaryText={secondaryText} /> +export function EmptyList({ text = 'No items available', secondaryText }: EmptyProps) { + return <EmptyTemplate icon={<EmptyListIcon />} text={text} secondaryText={secondaryText} /> }Also applies to: 26-28
src/components/Text.tsx (1)
47-47: Consider simplifying the fontWeight logic.The ternary chain for
fontWeightcould be more readable. Consider extracting this logic:- fontWeight: thin ? '400' : bold ? '600' : undefined, + fontWeight: thin ? '400' : bold ? '600' : '500', // or whatever the default should beAlso verify that
undefinedis the intended default weight rather than a specific value like'500'.src/components/Menu.tsx (2)
21-22: Consider making border color themeable.The fixed
var(--dark10)border color might not work well with all theme variations. Consider using a more semantic color variable or making it configurable.- backgroundColor: option === SettingsOptions.Reset ? 'var(--redbg)' : bgColor, - borderBottom: '1px solid var(--dark10)', + backgroundColor: option === SettingsOptions.Reset ? 'var(--redbg)' : bgColor, + borderBottom: '1px solid var(--dark20)', // or a semantic border color variable
37-37: Potential layout shift with conditional icon rendering.The conditional
{styled ? icon : null}might cause layout shifts when switching between styled and unstyled modes. Consider using a placeholder or consistent spacing.- {styled ? icon : null} + {styled ? icon : <div style={{ width: '1rem' }} />} // placeholder for consistent spacingsrc/screens/Settings/General.tsx (2)
17-29: Consider extracting the Row component.The inline
Rowcomponent is well-implemented but could be extracted to a separate file if it's used elsewhere in the settings screens.// Could be moved to src/components/SettingsRow.tsx interface SettingsRowProps { option: SettingsOptions value: string onSelect: (option: SettingsOptions) => void } export default function SettingsRow({ option, value, onSelect }: SettingsRowProps) { return ( <FlexRow between padding='0.5rem 0' onClick={() => onSelect(option)}> <Text capitalize thin>{option}</Text> <FlexRow end> <Text small thin color='dark50'>{value}</Text> <ArrowIcon /> </FlexRow> </FlexRow> ) }
38-41: Extract HR styling to avoid repetition.The HR element styling is repeated three times. Consider extracting it to a constant or utility component.
+const hrStyle = { backgroundColor: 'var(--dark20)', width: '100%' } <Row option={SettingsOptions.Theme} value={config.theme} /> - <hr style={{ backgroundColor: 'var(--dark20)', width: '100%' }} /> + <hr style={hrStyle} /> <Row option={SettingsOptions.Fiat} value={config.fiat} /> - <hr style={{ backgroundColor: 'var(--dark20)', width: '100%' }} /> + <hr style={hrStyle} /> <Row option={SettingsOptions.Display} value={config.currencyDisplay} />src/components/Select.tsx (1)
20-20: Extract HR styling for consistency.Similar to other components, the HR styling could be extracted to maintain consistency across the codebase.
+const separatorStyle = { backgroundColor: 'var(--dark20)', width: '100%' } - {index < options.length - 1 && <hr style={{ backgroundColor: 'var(--dark20)', width: '100%' }} />} + {index < options.length - 1 && <hr style={separatorStyle} />}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/fonts/geist.woff2is excluded by!**/*.woff2public/fonts/geist_mono.woff2is excluded by!**/*.woff2
📒 Files selected for processing (56)
src/App.css(0 hunks)src/App.tsx(2 hunks)src/components/Balance.tsx(1 hunks)src/components/CheckList.tsx(2 hunks)src/components/Checkbox.tsx(1 hunks)src/components/Empty.tsx(1 hunks)src/components/FlexRow.tsx(1 hunks)src/components/InputPassword.tsx(2 hunks)src/components/Menu.tsx(2 hunks)src/components/NewPassword.tsx(2 hunks)src/components/Select.tsx(1 hunks)src/components/Shadow.tsx(3 hunks)src/components/StepBars.tsx(1 hunks)src/components/Strength.tsx(2 hunks)src/components/Success.tsx(1 hunks)src/components/Table.tsx(1 hunks)src/components/Text.tsx(5 hunks)src/components/Textarea.tsx(0 hunks)src/components/Toggle.tsx(1 hunks)src/components/TransactionsList.tsx(1 hunks)src/icons/Appearance.tsx(0 hunks)src/icons/Checked.tsx(1 hunks)src/icons/Coinflip.tsx(1 hunks)src/icons/FujiMoney.tsx(1 hunks)src/icons/Invaders.tsx(1 hunks)src/icons/Lock.tsx(1 hunks)src/icons/Wallet.tsx(1 hunks)src/index.css(2 hunks)src/ionic.css(6 hunks)src/lib/types.ts(5 hunks)src/providers/flow.tsx(2 hunks)src/providers/navigation.tsx(3 hunks)src/providers/options.tsx(2 hunks)src/screens/Apps.tsx(2 hunks)src/screens/Init/Connect.tsx(1 hunks)src/screens/Init/Init.tsx(1 hunks)src/screens/Init/Password.tsx(2 hunks)src/screens/Init/Restore.tsx(3 hunks)src/screens/Init/Success.tsx(1 hunks)src/screens/Settings/Advanced.tsx(1 hunks)src/screens/Settings/Appearance.tsx(0 hunks)src/screens/Settings/Backup.tsx(2 hunks)src/screens/Settings/Display.tsx(1 hunks)src/screens/Settings/Fiat.tsx(1 hunks)src/screens/Settings/General.tsx(1 hunks)src/screens/Settings/Index.tsx(2 hunks)src/screens/Settings/Lock.tsx(2 hunks)src/screens/Settings/Logs.tsx(2 hunks)src/screens/Settings/Menu.tsx(1 hunks)src/screens/Settings/Nostr.tsx(1 hunks)src/screens/Settings/Notifications.tsx(1 hunks)src/screens/Settings/Reset.tsx(2 hunks)src/screens/Settings/Theme.tsx(1 hunks)src/screens/Settings/Vtxos.tsx(3 hunks)src/screens/Wallet/Index.tsx(2 hunks)src/screens/Wallet/Onboard.tsx(2 hunks)
💤 Files with no reviewable changes (4)
- src/App.css
- src/icons/Appearance.tsx
- src/screens/Settings/Appearance.tsx
- src/components/Textarea.tsx
✅ Files skipped from review due to trivial changes (19)
- src/icons/Wallet.tsx
- src/icons/Invaders.tsx
- src/icons/Coinflip.tsx
- src/components/StepBars.tsx
- src/icons/FujiMoney.tsx
- src/screens/Init/Init.tsx
- src/providers/navigation.tsx
- src/screens/Settings/Notifications.tsx
- src/screens/Settings/Index.tsx
- src/App.tsx
- src/screens/Settings/Nostr.tsx
- src/components/Table.tsx
- src/screens/Wallet/Onboard.tsx
- src/components/Toggle.tsx
- src/screens/Init/Connect.tsx
- src/screens/Settings/Logs.tsx
- src/screens/Settings/Lock.tsx
- src/screens/Settings/Reset.tsx
- src/index.css
🚧 Files skipped from review as they are similar to previous changes (3)
- src/screens/Settings/Vtxos.tsx
- src/lib/types.ts
- src/providers/flow.tsx
🧰 Additional context used
🧬 Code Graph Analysis (11)
src/screens/Settings/Advanced.tsx (1)
src/providers/options.tsx (1)
options(21-92)
src/screens/Init/Restore.tsx (4)
src/components/FlexCol.tsx (1)
FlexCol(13-26)src/components/Input.tsx (1)
Input(12-38)src/components/Error.tsx (1)
Error(10-21)src/components/Text.tsx (1)
Text(23-75)
src/components/Checkbox.tsx (1)
src/components/FlexRow.tsx (1)
FlexRow(16-45)
src/screens/Wallet/Index.tsx (8)
src/providers/wallet.tsx (1)
WalletContext(43-57)src/components/FlexCol.tsx (1)
FlexCol(13-26)src/icons/Logo.tsx (1)
LogoIcon(1-12)src/components/Error.tsx (1)
Error(10-21)src/icons/Send.tsx (1)
SendIcon(1-12)src/icons/Receive.tsx (1)
ReceiveIcon(1-10)src/components/Empty.tsx (1)
EmptyList(26-28)src/components/TransactionsList.tsx (1)
TransactionsList(118-133)
src/components/Success.tsx (3)
src/components/CenterScreen.tsx (1)
CenterScreen(9-28)src/icons/Success.tsx (1)
SuccessIcon(1-184)src/components/Text.tsx (1)
Text(23-75)
src/components/TransactionsList.tsx (2)
src/components/Text.tsx (2)
Text(23-75)TextSecondary(87-93)src/lib/format.ts (1)
prettyDate(57-67)
src/screens/Settings/Display.tsx (4)
src/providers/config.tsx (1)
ConfigContext(28-36)src/components/Content.tsx (1)
Content(9-16)src/components/Padded.tsx (1)
Padded(7-14)src/components/Select.tsx (1)
Select(11-25)
src/components/Empty.tsx (3)
src/components/CenterScreen.tsx (1)
CenterScreen(9-28)src/components/FlexCol.tsx (1)
FlexCol(13-26)src/components/Text.tsx (2)
Text(23-75)TextSecondary(87-93)
src/screens/Settings/General.tsx (7)
src/providers/config.tsx (1)
ConfigContext(28-36)src/providers/options.tsx (1)
OptionsContext(114-120)src/components/FlexRow.tsx (1)
FlexRow(16-45)src/components/Text.tsx (1)
Text(23-75)src/icons/Arrow.tsx (1)
ArrowIcon(1-7)src/components/Content.tsx (1)
Content(9-16)src/components/Padded.tsx (1)
Padded(7-14)
src/screens/Apps.tsx (7)
src/components/Shadow.tsx (1)
Shadow(16-51)src/components/FlexCol.tsx (1)
FlexCol(13-26)src/components/FlexRow.tsx (1)
FlexRow(16-45)src/components/Text.tsx (1)
Text(23-75)src/icons/Invaders.tsx (1)
InvadersIcon(1-10)src/icons/Coinflip.tsx (1)
CoinflipIcon(1-8)src/icons/FujiMoney.tsx (1)
FujiMoneyIcon(1-3)
src/components/Menu.tsx (4)
src/providers/options.tsx (1)
Option(15-19)src/components/FlexRow.tsx (1)
FlexRow(16-45)src/components/Text.tsx (1)
Text(23-75)src/icons/Arrow.tsx (1)
ArrowIcon(1-7)
🪛 Biome (2.1.2)
src/screens/Init/Restore.tsx
[error] 13-13: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/components/TransactionsList.tsx
[error] 64-64: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (52)
src/icons/Lock.tsx (2)
1-2: LGTM! Clean prop handling with proper TypeScript typing.The optional
bigprop with boolean type and the ternary operator for size calculation are implemented correctly. The default behavior (20px) is preserved when the prop is not provided.
4-4: Lock.tsx viewBox is correctThe
viewBox="0 0 49 49"fully contains the path’s coordinates (x spans 8.5–40.5, y spans 4.5–44.5), so there’s no clipping. This matches the pattern used by other oversized icons for consistent scaling.src/ionic.css (6)
30-34: LGTM: Semantic color variables enhance theme consistency.The addition of semantic color variables (
--danger,--warning,--success) and the Geist font family improves design system consistency across the application.
55-74: LGTM: Comprehensive action sheet styling.The restored action sheet styling provides proper visual hierarchy with appropriate borders, radii, and nested element styling. The use of CSS nesting is clean and maintainable.
78-82: LGTM: Typography and sizing improvements.The switch to Geist Mono font and reduced minimum height (56px → 40px) creates a more compact and consistent button design. The font weight and letter spacing adjustments align well with the design system updates.
203-221: LGTM: Toast styling restoration improves UX.The restored toast styles provide consistent visual feedback with appropriate colors, spacing, and alignment. The button styling within toasts maintains visual hierarchy.
233-244: LGTM: Compact toggle design.The size reduction (21px → 15px for handle, 42px → 30px for track width) creates a more compact toggle UI while maintaining usability.
251-254: LGTM: Readonly input styling improves UX.The visual feedback for readonly inputs (muted text color and disabled focus highlight) provides clear indication of input state to users.
src/icons/Checked.tsx (1)
1-5: LGTM: Clean implementation of dynamic icon sizing.The component properly accepts an optional
smallprop and dynamically adjusts dimensions while maintaining the consistent viewBox for visual integrity. The TypeScript typing is correct and the logic is clear.src/components/Checkbox.tsx (2)
14-15: LGTM: Layout improvements align with design system updates.The reduced padding (0.8rem → 0.5rem) and explicit width setting create a more compact and consistent layout that aligns with the broader UI refinements in this PR.
19-19: LGTM: Gap removal leverages FlexRow default.Removing the explicit
gap='1rem'allows FlexRow to use its default0.5remgap (as seen in FlexRow.tsx), creating tighter spacing that's consistent with the compact design direction.src/components/CheckList.tsx (2)
3-3: LGTM: Added FlexCol import for improved layout structure.The import addition supports the layout improvements implemented in this component.
38-43: LGTM: Enhanced UX with structured layout and clear instructions.The changes improve both layout structure and user experience:
- FlexCol with consistent gap spacing replaces the fragment
- Added instructional text clearly explains the checklist purpose
- The 'smaller' text size maintains proper visual hierarchy
src/components/Strength.tsx (3)
1-1: LGTM: Added IonProgressBar import for new component.The import addition supports the new StrengthProgress component implementation.
6-8: LGTM: Color tokens align with design system.The updated color values ('danger', 'warning', 'success') align with the semantic color variables introduced in ionic.css, improving design system consistency.
63-66: LGTM: Modern progress bar implementation.The StrengthProgress component provides a clean alternative to the bar-based visualization:
- Proper value scaling (strength * 0.25) for progress range
- Dynamic color mapping using the updated color tokens
- Explicit height styling ensures consistent appearance
- Maintains the existing StrengthBars for backward compatibility
src/providers/options.tsx (1)
129-138: LGTM! Navigation logic correctly handles the new Config section.The updated goBack function properly routes Config section options back to General settings, maintaining a logical navigation hierarchy.
src/components/TransactionsList.tsx (1)
60-60: LGTM! Consistent text styling with the broader UI improvements.The addition of the
thinprop to the Kind and Sats text components aligns with the UI styling enhancements across the application, improving visual consistency.Also applies to: 65-69
src/screens/Settings/Advanced.tsx (1)
8-8: LGTM! Clean simplification that aligns with the Menu component refactoring.The direct filtering of options by section is more straightforward and works correctly with the updated Menu component that now accepts flat arrays of options.
src/screens/Settings/Display.tsx (1)
9-26: LGTM! Well-implemented currency display settings management.The component correctly uses ConfigContext and Select component to manage currency display preferences. The config update logic properly preserves existing settings while updating the display preference.
src/components/Shadow.tsx (1)
4-4: LGTM! Clean implementation of the border prop.The optional
borderprop is properly typed and implemented with appropriate conditional styling using CSS variables.Also applies to: 17-17, 37-38
src/screens/Settings/Fiat.tsx (1)
9-26: LGTM! Well-structured settings component.The component follows established patterns and properly manages configuration state with the spread operator to preserve existing settings.
src/screens/Wallet/Index.tsx (1)
20-20: LGTM! Excellent empty state implementation.The conditional rendering properly handles the empty transactions case with a helpful message, and the layout improvements with
FlexCol betweencreate better visual hierarchy. The safe optional chaining intxs?.length === 0prevents potential runtime errors.Also applies to: 27-27, 60-74
src/screens/Settings/Theme.tsx (1)
9-26: LGTM! Consistent with other settings components.The implementation follows the same clean pattern as other settings screens, properly managing theme configuration with the spread operator.
src/screens/Init/Restore.tsx (2)
47-47: LGTM! Proper restoration state tracking.Adding
restoring: trueto the init info correctly tracks the restoration flow state for downstream components.
58-66: LGTM! Improved layout and user guidance.The
betweenprop onFlexColcreates better spacing, and the informational text provides helpful guidance about private key format and security.src/components/Success.tsx (2)
5-8: LGTM! Well-structured interface definition.The
SuccessPropsinterface is clean and provides good type safety for the component's enhanced functionality.
10-23: Excellent implementation with backward compatibility.The conditional rendering pattern is implemented correctly, and the styling differentiation between headline and text provides good visual hierarchy. The component maintains backward compatibility since both props are optional.
src/screens/Settings/Backup.tsx (1)
9-16: Good import updates for UI refactoring.The import changes align well with replacing the Textarea component with more customizable Text and Shadow components.
src/components/InputPassword.tsx (2)
11-11: Good addition of placeholder prop.The optional placeholder property enhances the component's flexibility while maintaining backward compatibility.
15-15: Proper implementation of placeholder prop and styling consistency.The placeholder prop is correctly passed through to the IonInput component, and the explicit
color='dark'on IonInputPasswordToggle improves visual consistency.Also applies to: 33-33, 37-37
src/screens/Init/Password.tsx (2)
36-36: Improved user flow with direct navigation.The removal of the modal step and direct navigation to
Pages.InitSuccesscreates a cleaner, more straightforward user experience for both biometric and password registration flows.Also applies to: 45-45
50-50: Better header text for user clarity.The updated header text "Create new wallet" is more descriptive and user-friendly compared to the previous "Define password".
src/screens/Settings/Menu.tsx (3)
2-2: Good import updates for refactored component structure.The addition of
options,TextLabel, andFlexColimports aligns well with the new sectioned menu approach.Also applies to: 6-7
10-12: Clear separation of menu sections.The filtering approach to separate General and Security options provides good separation of concerns and makes the code more maintainable.
18-27: Excellent UI structure with proper sectioning.The use of FlexCol containers with appropriate gaps and TextLabel headings creates a well-organized, user-friendly menu structure. The
styledprop on Menu components ensures consistent visual presentation.src/components/FlexRow.tsx (2)
6-6: LGTM! Clean enhancement to component flexibility.The addition of optional
borderandpaddingprops enhances the component's flexibility while maintaining type safety and consistent styling patterns.Also applies to: 13-13
31-31: LGTM! Proper conditional styling implementation.The conditional border styling using CSS variables and direct padding application are implemented correctly and consistently with the component library's patterns.
Also applies to: 37-37
src/components/NewPassword.tsx (2)
54-65: LGTM! Improved layout structure.The nested
FlexColapproach provides better visual organization by grouping related password input elements (input, strength indicator, checklist) together while keeping the confirmation input separate.
5-5: StrengthProgress and calcStrength exports validatedBoth the
StrengthProgresscomponent andcalcStrengthfunction are present and correctly exported from theStrengthmodule (e.g.src/components/Strength.tsx). No further changes needed.src/components/Empty.tsx (2)
12-24: LGTM! Well-structured reusable empty state component.The
EmptyTemplateprovides a clean, centered layout for empty states with consistent spacing and optional elements. The use ofCenterScreenand nestedFlexColcomponents creates a professional empty state UI.
50-74: LGTM! Clean inline SVG icons.The inline SVG components are appropriately sized and use CSS variables for consistent theming. The icons are simple enough that inline definition is acceptable rather than separate files.
src/components/Text.tsx (4)
15-18: LGTM! Well-implemented new props.The
fullWidthandthinprops are properly typed and integrated into the component logic.
39-39: Font size increase looks intentional.The
biggerprop font size increased from 28 to 32, which appears to be part of the visual hierarchy improvements mentioned in the AI summary.
56-58: Good separation of concerns with iStyle.Creating a separate style object for the IonText wrapper is a clean approach that separates layout concerns from text styling.
89-89: Consistent usage of thin prop in TextSecondary.The update to always pass
thin={true}maintains visual consistency across secondary text elements.src/components/Menu.tsx (3)
9-12: Clean interface design with the new props structure.The simplified props interface with flat
Option[]and optionalstyledboolean is much cleaner than the previous nested structure.
33-43: Well-structured rendering logic.The mapping over options with proper key usage and clean row structure is well implemented. The use of
FlexRowand consistent styling maintains good visual hierarchy.
14-14: Update remaining imports and filenames for the renamed componentWe’ve still got lingering references to
Advancedin the codebase. Please update the following:• Rename the component file
- from:
src/screens/Settings/Advanced.tsx- to:
src/screens/Settings/Menu.tsx• In
src/screens/Settings/Index.tsx
- Line 15:
- import Advanced from './Advanced' + import Menu from './Menu'- Line 28 (JSX usage):
- {option === SettingsOptions.Advanced && <Advanced />} + {option === SettingsOptions.Advanced && <Menu />}After renaming the file and updating these imports/usages, run a final grep to confirm there are no remaining
Advancedreferences.Likely an incorrect or invalid review comment.
src/screens/Settings/General.tsx (2)
14-15: Good separation of concerns with dual context usage.Using
ConfigContextfor reading current values andOptionsContextfor handling option selection properly separates data access from navigation logic.
36-42: Clean and consistent UI layout.The vertical layout with separators creates a clean, mobile-friendly interface that's consistent with modern settings UI patterns.
src/components/Select.tsx (1)
14-22: Clean visual implementation with good UX patterns.The list-based approach with checkmarks and separators provides clear visual feedback and follows modern mobile UI patterns.
Same as #106 but using the recently published boltz-swap package.
Here to generate a test deployment on cloudflare for testing.
Summary by CodeRabbit
New Features
Improvements
Documentation
Bug Fixes
Chores