Add PocketChange UI for Monero wallet

[claudinethelobster]

Overview

Adds UI components and localization for PocketChange feature. This PR provides the user-facing interface for configuring PocketChange settings. Requires: edge-currency-monero PR #101 for core functionality.

Changes

New Components

src/components/modals/PocketChangeModal.tsx:

• Settings modal with toggle to enable/disable PocketChange
• Slider to select pocket amount (0.1, 0.2, 0.3, 0.5, 0.8, 1.3 XMR)
• Integrates with Airship modal system
• TypeScript types: PocketChangeConfig interface

src/locales/strings/enUS.json:

• Added 11 localization strings:
  • Modal title, description, labels
  • Send confirmation breakdown text
  • Menu item labels

Integration Requirements (Not Yet Implemented)

This PR provides the UI scaffolding. The following integration work is still needed:

1. Add Settings Menu Trigger

Option A: Wallet List Menu (Recommended)

Edit: src/components/modals/WalletListMenuModal.tsx

Add menu item for Monero wallets:

{
  pluginIds: ['monero'],
  label: lstrings.pocketchange_menu_item,
  value: 'pocketChangeSettings'
}

Add action in src/actions/WalletListMenuActions.ts:

case 'pocketChangeSettings':
  const wallet = await account.waitForCurrencyWallet(walletId)
  
  // Load current setting
  const currentSetting = wallet.walletLocalData.pocketChangeSetting ?? {
    enabled: false,
    amountPiconero: '100000000000'
  }
  
  // Convert piconero to index
  const POCKET_AMOUNTS_XMR = [0.1, 0.2, 0.3, 0.5, 0.8, 1.3]
  const amountXMR = Number(currentSetting.amountPiconero) / 1e12
  const amountIndex = POCKET_AMOUNTS_XMR.findIndex(a => Math.abs(a - amountXMR) < 0.01)
  
  // Show modal
  const result = await Airship.show<PocketChangeConfig | undefined>(bridge => (
    <PocketChangeModal
      bridge={bridge}
      initialConfig={{
        enabled: currentSetting.enabled,
        amountIndex: amountIndex >= 0 ? amountIndex : 0
      }}
    />
  ))
  
  // Save result
  if (result != null) {
    const newAmountPiconero = String(POCKET_AMOUNTS_XMR[result.amountIndex] * 1e12)
    await wallet.changeWalletLocalData({
      pocketChangeSetting: {
        enabled: result.enabled,
        amountPiconero: newAmountPiconero
      }
    })
  }
  break

2. Integrate into Send Flow

Edit: src/components/scenes/SendScene.tsx or SendScene2.tsx

Before creating the spend:

// Get user's intended targets
const baseTargets = [{
  publicAddress: recipientAddress,
  nativeAmount: sendAmount
}]

// Apply PocketChange if enabled (Monero only)
let finalTargets = baseTargets
if (wallet.currencyInfo.pluginId === 'monero' && wallet.otherMethods?.getPocketChangeTargetsForSpend) {
  try {
    finalTargets = await wallet.otherMethods.getPocketChangeTargetsForSpend(baseTargets)
  } catch (error) {
    console.warn('PocketChange not available:', error)
  }
}

// Separate for display
const paymentTargets = finalTargets.filter(t => !t.otherParams?.isPocketChange)
const pocketTargets = finalTargets.filter(t => t.otherParams?.isPocketChange)

// Create spend with all targets
const edgeTransaction = await wallet.makeSpend({
  spendTargets: finalTargets,
  ...otherSpendInfo
})

3. Update Send Confirmation UI

Edit: src/components/scenes/SendConfirmationScene.tsx

Show pocket breakdown:

{pocketTargets.length > 0 && (
  <View>
    <Text>{lstrings.pocketchange_send_breakdown_title}</Text>
    <Text>{sprintf(lstrings.pocketchange_send_pocket_count, pocketTargets.length)}</Text>
    <Text>
      {sprintf(
        lstrings.pocketchange_send_total,
        formatCurrencyAmount(sumAmounts(pocketTargets))
      )}
    </Text>
  </View>
)}

Testing

After integration is complete:

1. Enable PocketChange:

   • Open Monero wallet
   • Access PocketChange settings (via wallet menu)
   • Toggle ON, select 0.1 XMR
   • Save

2. Send Transaction:

   • Create a send (any amount)
   • Verify confirmation shows pocket breakdown (e.g., "6 pockets, 0.6 XMR total")
   • Confirm transaction

3. Verify Immediate Spend:

   • Immediately send again (before 20 min)
   • Should succeed using unlocked pocket funds

Related

• Core PR: Add PocketChange feature for Monero wallet edge-currency-monero#101
• Asana task: (will be added)

Files Modified

• src/components/modals/PocketChangeModal.tsx - NEW (103 lines)
• src/locales/strings/enUS.json - 11 new strings

Files Requiring Integration (TODO)

• src/components/modals/WalletListMenuModal.tsx OR src/components/scenes/CurrencySettingsScene.tsx
• src/actions/WalletListMenuActions.ts
• src/components/scenes/SendScene.tsx (or SendScene2.tsx)
• src/components/scenes/SendConfirmationScene.tsx

Notes

This PR is intentionally minimal (UI components only) to keep the review scope manageable. Integration work can be done as a follow-up or included before merge depending on preference.

[claudinethelobster]

Asana task: https://app.asana.com/1/9976422036640/project/1211929850133171/task/1213259130316641