Add PocketChange UI for Monero wallet #5941
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import * as React from 'react' | ||
| import { View } from 'react-native' | ||
| import type { AirshipBridge } from 'react-native-airship' | ||
|
|
||
| import { useHandler } from '../../hooks/useHandler' | ||
| import { lstrings } from '../../locales/strings' | ||
| import { EdgeButton } from '../buttons/EdgeButton' | ||
| import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext' | ||
| import { SettingsHeaderRow } from '../settings/SettingsHeaderRow' | ||
| import { SettingsSwitchRow } from '../settings/SettingsSwitchRow' | ||
| import { EdgeText, Paragraph } from '../themed/EdgeText' | ||
| import { EdgeModal } from './EdgeModal' | ||
|
|
||
| const POCKET_AMOUNTS_XMR = [0.1, 0.2, 0.3, 0.5, 0.8, 1.3] | ||
|
There was a problem hiding this comment. Issue: Floating-point numbers used for crypto amounts: Recommendation: Store amounts as strings in the coin's smallest unit (piconero for XMR), or at minimum as integer multipliers of a fixed base unit. Convert to display strings using the same |
||
|
|
||
| export interface PocketChangeConfig { | ||
| enabled: boolean | ||
| amountIndex: number | ||
| } | ||
|
|
||
| interface Props { | ||
| bridge: AirshipBridge<PocketChangeConfig | undefined> | ||
| initialConfig: PocketChangeConfig | ||
| } | ||
|
|
||
| export const PocketChangeModal: React.FC<Props> = props => { | ||
| const { bridge, initialConfig } = props | ||
| const theme = useTheme() | ||
| const styles = getStyles(theme) | ||
| const [enabled, setEnabled] = React.useState(initialConfig.enabled) | ||
| const [amountIndex, setAmountIndex] = React.useState( | ||
| initialConfig.amountIndex | ||
| ) | ||
|
|
||
| const handleCancel = useHandler((): void => { | ||
| bridge.resolve(undefined) | ||
| }) | ||
|
|
||
| const handleSave = useHandler((): void => { | ||
| bridge.resolve({ enabled, amountIndex }) | ||
| }) | ||
|
|
||
| const handleToggle = useHandler((): void => { | ||
| setEnabled(prev => !prev) | ||
| }) | ||
|
|
||
| const handleDecrease = useHandler((): void => { | ||
|
There was a problem hiding this comment. Suggestion: No unit tests cover the stepper bounds logic ( Recommendation: Add a test file at |
||
| setAmountIndex(prev => Math.max(0, prev - 1)) | ||
| }) | ||
|
|
||
| const handleIncrease = useHandler((): void => { | ||
| setAmountIndex(prev => Math.min(POCKET_AMOUNTS_XMR.length - 1, prev + 1)) | ||
| }) | ||
|
|
||
| return ( | ||
| <EdgeModal | ||
| bridge={bridge} | ||
| onCancel={handleCancel} | ||
| title={lstrings.pocketchange_title} | ||
| > | ||
| <View style={styles.container}> | ||
| <Paragraph>{lstrings.pocketchange_description}</Paragraph> | ||
|
|
||
| <SettingsSwitchRow | ||
| label={lstrings.pocketchange_enable} | ||
| value={enabled} | ||
| onPress={handleToggle} | ||
| /> | ||
|
|
||
| {enabled ? ( | ||
| <> | ||
| <SettingsHeaderRow label={lstrings.pocketchange_amount_header} /> | ||
|
|
||
| <View style={styles.stepperRow}> | ||
| <EdgeButton | ||
| label="−" | ||
|
There was a problem hiding this comment. Suggestion: "−" and "+" button labels are hardcoded strings not sourced from locale strings. Recommendation: Add |
||
| type="secondary" | ||
| mini | ||
| onPress={handleDecrease} | ||
| disabled={amountIndex <= 0} | ||
| /> | ||
| <EdgeText style={styles.amountText}> | ||
| {POCKET_AMOUNTS_XMR[amountIndex]} XMR{' '} | ||
|
There was a problem hiding this comment. Warning: "XMR" is a hardcoded currency code in user-facing text. This modal is Monero-specific via Recommendation: Pass |
||
| {lstrings.pocketchange_per_pocket} | ||
| </EdgeText> | ||
| <EdgeButton | ||
| label="+" | ||
| type="secondary" | ||
| mini | ||
| onPress={handleIncrease} | ||
| disabled={amountIndex >= POCKET_AMOUNTS_XMR.length - 1} | ||
| /> | ||
| </View> | ||
|
|
||
| <Paragraph>{lstrings.pocketchange_explainer}</Paragraph> | ||
| </> | ||
| ) : null} | ||
|
|
||
| <View style={styles.saveButton}> | ||
| <EdgeButton label={lstrings.pocketchange_save} onPress={handleSave} /> | ||
| </View> | ||
| </View> | ||
| </EdgeModal> | ||
| ) | ||
| } | ||
|
|
||
| const getStyles = cacheStyles((theme: Theme) => ({ | ||
| container: { | ||
| paddingHorizontal: theme.rem(0.5) | ||
| }, | ||
| stepperRow: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| paddingVertical: theme.rem(0.5) | ||
| }, | ||
| amountText: { | ||
| fontSize: theme.rem(1.1), | ||
| marginHorizontal: theme.rem(1) | ||
| }, | ||
| saveButton: { | ||
| marginTop: theme.rem(1), | ||
| marginBottom: theme.rem(0.5) | ||
| } | ||
| })) | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Warning: Dead code: the
case 'pocketChange'handler returns an empty no-op.WalletListMenuModalintercepts and handlespocketChangewith an earlyreturnbefore ever callingdispatch(walletListMenuAction(...)), so this branch is never reached.Recommendation: Remove the
case 'pocketChange'block entirely (let it fall through todefault) to avoid misleading future readers. If keeping it, add a comment making it explicit that this path is intentionally unreachable.