fix: allow pasting amounts with thousand separators into the swap amount input

[Ikari-Shinji-re]

Summary

Pasting amounts with thousand separators (e.g., 12,500) into the widget’s amount input is not supported, requiring users to manually remove the commas first.

Fixes # (issue)

Previously, the swap amount input used the number type. To allow users to paste token amounts with thousand separators, we needed to switch the input to text, and I’ve made that change.

We also need a way to parse the raw text input into a valid number. For this, I added a function called parseNumericValue, which takes the raw input string and converts it into a valid numeric value. This function:

• strips letters, spaces, commas, and symbols

• preserves digits (0–9)

• keeps only the first . as the decimal separator

We already have existing sanitizers for user input (such as removing leading or trailing zeros). These can remain unchanged; we only use parseNumericValue to convert the raw text into a valid number that the existing sanitizers can then process.

Additionally, I updated the sanitizeInputAmount function (triggered on input blur) so that if the value ends with a decimal separator and has no decimal part, the separator is removed.

How did you test this change?

Try entering both text and numbers. Only digits and a single decimal separator should be accepted in the input.

Paste different combinations of characters and numbers—the value displayed in the input should always be a valid number. For example:

• "300,222" → "300222"

• "12a3.4b5" → "123.45"

• "1.2.3.4" → "1.234"

• ".5" → ".5"

Checklist:

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• Implemented a user interface (UI) change, referencing our Figma design to ensure pixel-perfect precision.

[schrodingers-fox]

I believe the entire function can be managed using regex. I experimented with the following code and got the same result:

value.replace(/[^\d.]/g, "") // 1. Remove everything except digits and dots
  .replace(/\./g, (match, offset, string) => 
    string.indexOf('.') === offset ? '.' : ''
  ); // 2. Keep only the first dot

this approach effectively filters out any non-digit and non-period characters, while also ensuring that only the first dot is kept in the string.