feat(ramp): improve amount editing formatting

[wachunei]

Description

This PR improves the changes introduced in #9039, which formatted the amount input on-the-fly as the user typed it for better readability (123456.78 to 123,456.78). However the formatting was introducing an unexpected state when the user typed the decimal separator (See Before video).

This PR brings back the full formatting when the user has finishing editing the amount. While editing, the amount will be grouped in 3 chars separated by space to improve readability of the input.

Related issues

Fixes:

Manual testing steps

1. Go to Buy flow
2. Reach the Build Quote page
3. Input a large amount to buy

Screenshots/Recordings

Before

When decimal separator is typed, the amount remains unchanged.
When deleting the decimal separator, the amount remains unchanged.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-10-03.at.14.10.18.mp4

After

The amount represents every state of the amount change, even partial ones lile 1234. or 1234.0

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-10-03.at.14.08.39.mp4

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
74.3% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud