Skip to content

feat: support thousand separator in user input #2132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
0xjorgen wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: support thousand separator in user input #2132

0xjorgen wants to merge 6 commits into from

Conversation

@0xjorgen
Copy link
Contributor

@0xjorgen 0xjorgen commented Dec 18, 2025 •
edited
Loading

Integrates react-number-format to display user input with thousand separators (e.g., 1,234,567.89) in the bridge input fields.

Changes

  • New AmountInput component: Shared component that encapsulates NumericFormat with focus state management, preventing value conflicts between user typing and quote updates
  • Simplified OriginTokenInput and DestinationTokenDisplay: Removed duplicated formatting logic, now delegate to AmountInput
  • Enhanced ToggleUnitButton: Moved converted amount calculation into the component for better encapsulation
  • Removed useTokenInput hook: Logic moved directly into AmountInput component
  • Added Storybook: InputForm.stories.tsx with interaction test for thousand separator formatting

Technical Details

  • Uses onValueChange with sourceInfo.source === "event" to only handle user interactions
  • Focus state (isFocused) prevents quote updates from overwriting user input while typing
  • shouldUpdate flag determines whether to show calculated quote results or user input
Screenshot 2025-12-18 at 12 59 35 UTC@2x

@vercel
Copy link

vercel bot commented Dec 18, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
app-frontend-v3 Ready Ready Preview, Comment Dec 18, 2025 1:19pm
sepolia-frontend-v3 Ready Ready Preview, Comment Dec 18, 2025 1:19pm

@linear
Copy link

linear bot commented Dec 18, 2025

FE-211 Format input field to match output field format

@vercel
Copy link

vercel bot commented Dec 18, 2025

Deployment failed with the following error:

Hobby accounts are limited to daily cron jobs. This cron expression (* * * * *) would run more than once per day. Upgrade to the Pro plan to unlock all Cron Jobs features on Vercel.

Learn More: https://vercel.link/3Fpeeb1

@0xjorgen 0xjorgen changed the title jorgen/fe 211 format input field to match output field format 2 feat: support thousand separator in user input Dec 18, 2025
Merge branch 'master' into jorgen/fe-211-format-input-field-to-match-…
fd4a6ab 
…output-field-format-2

# Conflicts:
#	src/hooks/useTokenInput.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrice32 mrice32 Awaiting requested review from mrice32 mrice32 is a code owner

@nicholaspai nicholaspai Awaiting requested review from nicholaspai nicholaspai is a code owner

@dohaki dohaki Awaiting requested review from dohaki dohaki is a code owner

@gsteenkamp89 gsteenkamp89 Awaiting requested review from gsteenkamp89 gsteenkamp89 is a code owner

@amateima amateima Awaiting requested review from amateima amateima is a code owner

@ashwinrava ashwinrava Awaiting requested review from ashwinrava ashwinrava is a code owner

@melisaguevara melisaguevara Awaiting requested review from melisaguevara melisaguevara is a code owner

@NikolasHaimerl NikolasHaimerl Awaiting requested review from NikolasHaimerl NikolasHaimerl is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@0xjorgen