UI/UX: Add a USDC amount input pattern with formatting, max, and quick-amount presets

[Baskarayelu]

Description

The bond amount field in src/pages/Bond.tsx is a bare <input type="number" placeholder="0"> with no currency affordance, thousands formatting, balance/max control, or quick presets — poor UX for entering a financial commitment. We need a reusable USDC amount input: a USDC suffix/adornment, a Max button bound to available balance, quick-amount chips (e.g. 100/500/1000), and clear formatting of large numbers.

Requirements and context

• UI/UX scope only — input pattern and styling; balance can be mocked.
• Reference src/pages/Bond.tsx and src/components/forms/FormField.tsx.
• Define adornment, Max button, preset chips, and large-number formatting display.
• Specify focus/error states using existing tokens.

Suggested execution

• Branch: uiux/usdc-amount-input.
• Add src/components/AmountInput.tsx spec used in Bond.tsx.
• Deliver: input redline with adornment/presets and state styling.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build and npm run lint pass.
• a11y checks: presets are labeled buttons, input keeps a programmatic label, errors announced.

Example commit message

feat(uiux): add USDC amount input pattern with presets and max

Guidelines

• Clear documentation of presets and formatting rules.
• Design consistency with FormField.
• Timeframe: 96 hours