Add PocketChange UI for Monero wallet

src/components/modals/PocketChangeModal.tsx

@@ -0,0 +1,103 @@
+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 { type Theme, useTheme } from '../services/ThemeContext'
+import { SettingsHeaderRow } from '../settings/SettingsHeaderRow'
+import { SettingsSliderRow } from '../settings/SettingsSliderRow'
+import { SettingsSwitchRow } from '../settings/SettingsSwitchRow'
+import { EdgeText } from '../themed/EdgeText'
+import { ModalMessage } from '../themed/ModalParts'
+import { ThemedModal } from '../themed/ThemedModal'
+
+const POCKET_AMOUNTS_XMR = [0.1, 0.2, 0.3, 0.5, 0.8, 1.3]
+
+export interface PocketChangeConfig {
+  enabled: boolean
+  amountIndex: number // Index into POCKET_AMOUNTS_XMR
+}
+
+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)
+  })
+
+  return (
+    <ThemedModal
+      bridge={bridge}
+      onCancel={handleCancel}
+      title={lstrings.pocketchange_title}
+      paddingRem={[1, 0]}
+    >
+      <View style={styles.container}>
+        <ModalMessage>{lstrings.pocketchange_description}</ModalMessage>
+
+        <SettingsSwitchRow
+          label={lstrings.pocketchange_enable}
+          value={enabled}
+          onPress={setEnabled}
+        />
+
+        {enabled && (
+          <>
+            <SettingsHeaderRow label={lstrings.pocketchange_amount_header} />
+
+            <SettingsSliderRow
+              label={lstrings.pocketchange_amount_label}
+              value={amountIndex}
+              minimumValue={0}
+              maximumValue={POCKET_AMOUNTS_XMR.length - 1}
+              step={1}
+              onValueChange={setAmountIndex}
+              disabled={!enabled}
+            />
+
+            <View style={styles.amountDisplay}>
+              <EdgeText style={styles.amountText}>
+                {POCKET_AMOUNTS_XMR[amountIndex]} XMR{' '}
+                {lstrings.pocketchange_per_pocket}
+              </EdgeText>
+            </View>
+
+            <ModalMessage>{lstrings.pocketchange_explainer}</ModalMessage>
+          </>
+        )}
+      </View>
+    </ThemedModal>
+  )
+}
+
+const getStyles = (theme: Theme): ReturnType<typeof makeStyles> => {
+  return makeStyles({
+    container: {
+      flex: 1,
+      paddingHorizontal: theme.rem(1)
+    },
+    amountDisplay: {
+      paddingVertical: theme.rem(0.5),
+      alignItems: 'center' as const
+    },
+    amountText: {
+      fontSize: theme.rem(1.25),
+      color: theme.primaryText,
+      fontWeight: '500' as const
+    }
+  })
+}
+
+const makeStyles = (styles: any): any => styles