Add PocketChange UI for Monero wallet

eslint.config.mjs

@@ -107,7 +107,7 @@ export default [
       'src/actions/TransactionExportActions.tsx',
       'src/actions/WalletActions.tsx',
       'src/actions/WalletListActions.tsx',
-      'src/actions/WalletListMenuActions.tsx',
+
       'src/app.ts',
       'src/components/buttons/ButtonsView.tsx',
       'src/components/buttons/EdgeSwitch.tsx',
@@ -202,7 +202,6 @@ export default [
       'src/components/modals/SwapVerifyTermsModal.tsx',
       'src/components/modals/TextInputModal.tsx',
       'src/components/modals/TransferModal.tsx',
-      'src/components/modals/WalletListMenuModal.tsx',
 
       'src/components/modals/WalletListSortModal.tsx',
       'src/components/modals/WcSmartContractModal.tsx',

src/actions/WalletListMenuActions.tsx

@@ -31,6 +31,7 @@ import { toggleUserPausedWallet } from './SettingsActions'
 
 export type WalletListMenuKey =
   | 'settings'
+  | 'pocketChange'
   | 'rename'
   | 'delete'
   | 'resync'
@@ -65,6 +66,11 @@ export function walletListMenuAction(
         })
       }
     }
+    case 'pocketChange': {
+      return async () => {
+        // Handled directly in WalletListMenuModal via Airship
+      }
+    }
     case 'manageTokens': {
       return async (dispatch, getState) => {
         navigation.navigate('manageTokens', {
@@ -79,7 +85,7 @@ export function walletListMenuAction(
         const { account } = state.core
         account
           .changeWalletStates({ [walletId]: { deleted: true } })
-          .catch(error => {
+          .catch((error: unknown) => {
             showError(error)
           })
       }
@@ -118,8 +124,8 @@ export function walletListMenuAction(
             try {
               const fioAddresses =
                 await engine.otherMethods.getFioAddressNames()
-              fioAddress = fioAddresses.length ? fioAddresses[0] : ''
-            } catch (e: any) {
+              fioAddress = fioAddresses.length > 0 ? fioAddresses[0] : ''
+            } catch (e: unknown) {
               fioAddress = ''
             }
           }
@@ -129,7 +135,7 @@ export function walletListMenuAction(
         let additionalMsg: string | undefined
         let tokenCurrencyCode: string | undefined
         if (tokenId == null) {
-          if (fioAddress) {
+          if (fioAddress !== '') {
             additionalMsg =
               lstrings.fragmet_wallets_delete_fio_extra_message_mobile
           } else if (Object.keys(wallet.currencyConfig.allTokens).length > 0) {
@@ -155,7 +161,7 @@ export function walletListMenuAction(
                   )} ${wallet.type} ${wallet.id}`
                 )
               })
-              .catch(error => {
+              .catch((error: unknown) => {
                 showError(error)
               })
 
@@ -176,7 +182,7 @@ export function walletListMenuAction(
                   } ${tokenId}`
                 )
               })
-              .catch(error => {
+              .catch((error: unknown) => {
                 showError(error)
               })
           }
@@ -297,8 +303,8 @@ export function walletListMenuAction(
           )
           // Add a copy button only for development
           let devButtons = {}
-          // @ts-expect-error
-          if (global.__DEV__)
+          // @ts-expect-error - __DEV__ is a RN global not in TS types
+          if (global.__DEV__ === true)
             devButtons = {
               copy: { label: lstrings.fragment_wallets_copy_seed }
             }
@@ -313,8 +319,8 @@ export function walletListMenuAction(
               buttons={{ ok: { label: lstrings.string_ok_cap }, ...devButtons }}
             />
           )).then(buttonPressed => {
-            // @ts-expect-error
-            if (global.__DEV__ && buttonPressed === 'copy') {
+            // @ts-expect-error - __DEV__ is a RN global not in TS types
+            if (global.__DEV__ === true && buttonPressed === 'copy') {
               Clipboard.setString(privateKey)
               showToast(lstrings.fragment_wallets_copied_seed)
             }

src/components/modals/PocketChangeModal.tsx

@@ -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]
+
+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 => {
+    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="−"
+                type="secondary"
+                mini
+                onPress={handleDecrease}
+                disabled={amountIndex <= 0}
+              />
+              <EdgeText style={styles.amountText}>
+                {POCKET_AMOUNTS_XMR[amountIndex]} XMR{' '}
+                {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)
+  }
+}))

src/components/modals/WalletListMenuModal.tsx

@@ -26,11 +26,12 @@ import {
 import { getWalletName } from '../../util/CurrencyWalletHelpers'
 import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
 import { CryptoIcon } from '../icons/CryptoIcon'
-import { showError } from '../services/AirshipInstance'
+import { Airship, showError } from '../services/AirshipInstance'
 import { cacheStyles, type Theme, useTheme } from '../services/ThemeContext'
 import { UnscaledText } from '../text/UnscaledText'
 import { ModalTitle } from '../themed/ModalParts'
 import { EdgeModal } from './EdgeModal'
+import { type PocketChangeConfig, PocketChangeModal } from './PocketChangeModal'
 
 interface Option {
   value: WalletListMenuKey
@@ -53,6 +54,7 @@ const icons: Record<string, string> = {
   getSeed: 'key',
   goToParent: 'upcircleo',
   manageTokens: 'plus',
+  pocketChange: 'wallet',
   rawDelete: 'warning',
   rename: 'edit',
   resync: 'sync',
@@ -75,6 +77,11 @@ export const WALLET_LIST_MENU: Array<{
     label: lstrings.settings_asset_settings,
     value: 'settings'
   },
+  {
+    pluginIds: ['monero'],
+    label: lstrings.pocketchange_menu_item,
+    value: 'pocketChange'
+  },
   {
     label: lstrings.string_rename,
     value: 'rename'
@@ -142,7 +149,7 @@ export const WALLET_LIST_MENU: Array<{
   }
 ]
 
-export function WalletListMenuModal(props: Props) {
+export function WalletListMenuModal(props: Props): React.ReactElement {
   const { bridge, tokenId, navigation, walletId } = props
 
   const [options, setOptions] = React.useState<Option[]>([])
@@ -161,13 +168,41 @@ export function WalletListMenuModal(props: Props) {
   const theme = useTheme()
   const styles = getStyles(theme)
 
-  const handleCancel = () => {
+  const handleCancel = (): void => {
     props.bridge.resolve()
   }
 
   const optionAction = useHandler(async (option: WalletListMenuKey) => {
     if (loadingOption != null) return // Prevent multiple actions
 
+    if (option === 'pocketChange' && wallet != null) {
+      setLoadingOption(option)
+      try {
+        let initialConfig: PocketChangeConfig = {
+          enabled: false,
+          amountIndex: 2
+        }
+        if (wallet.otherMethods?.getPocketChangeSetting != null) {
+          const saved = await wallet.otherMethods.getPocketChangeSetting()
+          if (saved != null) initialConfig = saved
+        }
+        const result = await Airship.show<PocketChangeConfig | undefined>(b => (
+          <PocketChangeModal bridge={b} initialConfig={initialConfig} />
+        ))
+        if (
+          result != null &&
+          wallet.otherMethods?.setPocketChangeSetting != null
+        ) {
+          await wallet.otherMethods.setPocketChangeSetting(result)
+        }
+        bridge.resolve()
+      } catch (error) {
+        setLoadingOption(null)
+        showError(error)
+      }
+      return
+    }
+
     setLoadingOption(option)
     try {
       await dispatch(