Amount Input Denomination Toggle Between XLM and USDC

[Kingsman-99]

Description

Users must mentally convert between XLM and USDC when entering payment amounts because the creation form only accepts a single denomination input with no switching mechanism. An inline denomination toggle on the amount input field should allow entry in either unit with real-time conversion.

Technical Context

src/components/invoice/AmountInput.tsx (new or refactored) renders a <input type="number"> paired with a toggle button that cycles between XLM and USDC. src/hooks/useFiatRate.ts supplies the XLM/USDC exchange rate. On toggle, the displayed value is converted and the underlying form state in src/hooks/useInvoiceForm.ts always stores the canonical amount in stroops. react-hook-form Controller wraps the component for validation integration.

Acceptance Criteria

• The amount field shows a denomination badge (XLM or USDC) that acts as a clickable toggle
• Switching denomination converts the currently entered value using the live exchange rate
• The underlying invoice amount stored and submitted is always in XLM stroops regardless of display denomination
• If the exchange rate is unavailable, USDC denomination is disabled with a tooltip explaining the reason
• The toggle is keyboard-accessible and the active denomination is announced via aria-label
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[Kayce10]

@Kayce10 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kayce10 to this issue.

[Mirabliss]

@Mirabliss has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mirabliss to this issue.

[drips-wave]

Congratulations, @Mirabliss! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Mirabliss: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Mirabliss's PR #534 was approved and merged by @Kingsman-99.

🏆 @Mirabliss: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (118 total points). Track your full progress on GrantFox.

👏 Great work, @Mirabliss! Keep contributing to Stellar-split.

[drips-wave]

This issue has been completed by @Mirabliss as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Mirabliss: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.