fix(token-input): format max value with thousand separators#450
fix(token-input): format max value with thousand separators#450gabitoesmiapodo merged 8 commits intodevelopfrom
Conversation
When clicking Max, the value bypassed NumericFormat's formatting pipeline because BigNumberInput's inputRef was not connected to NumericFormat. The display updated via direct DOM manipulation which NumericFormat never observed. Add a displayValue state to BigNumberInput driven by a render-time sync that fires when the value or decimals props change externally. This gives NumericFormat a controlled value prop so thousand separators are applied on max click as they are during typing. Also clear amountError on max click since the max value is by definition within the valid range. Closes #295
…mountField pattern
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Fixes TokenInput “Max” behavior so externally set values (e.g., max click / token change) flow through NumericFormat and get thousand separators, matching formatting applied during typing.
Changes:
- Introduces a controlled
displayValuestring inBigNumberInputfor therenderInputpath soNumericFormatformats external updates. - Clears
amountErroron “Max” click to dismiss stale validation errors. - Adds tests covering placeholder behavior for
0nand thousand-separator formatting on external value changes.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/sharedComponents/TokenInput/index.tsx | Clears prior amount error on Max click before setting amount. |
| src/components/sharedComponents/BigNumberInput.tsx | Adds displayValue state and sync logic; passes controlled value into renderInput. |
| src/components/sharedComponents/BigNumberInput.test.tsx | Adds NumericFormat integration tests for formatting and placeholder behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Guard setDisplayValue calls behind renderInput check to avoid unnecessary state updates when the native input path is active. Add test for decimals change (token switch) to cover the render-time sync path that was previously untested.
Summary
Closes #295
When clicking the Max button in
TokenInput, the value bypassedNumericFormat's formattingpipeline because
BigNumberInput'sinputRefwas not connected to theNumericFormatinstance. A
displayValuestate now provides a controlled value string soNumericFormatapplies thousand separators on external value changes (max click, token change) as it does
during typing.
Changes
displayValuestate toBigNumberInputwith render-time sync from thevalueprop;maps
0nto''to preserve the placeholderupdateValueto setprevValueRefbeforeonChangeso user-typed intermediatestrings (trailing dots, trailing zeros) are not overwritten by the sync
value: displayValuethroughrenderInputPropssoNumericFormatoperates incontrolled mode
amountErrorinhandleSetMaxto dismiss any prior validation error on max click0n, thousand-separator formatting on external valuechange, reset to placeholder, user-typed "0" preserved
Acceptance criteria
0n)Test plan
Automated tests
Modified:
src/components/sharedComponents/BigNumberInput.test.tsxManual verification
1,234.56)0.00should reappearBreaking changes
None.
Screenshots
None.
Checklist