Feat: Added specified error toasts, and improved button states

[Andrew718PLTS]

Description

Other changes

Added truncated amount and tooltip when the amount is more than 8 digits.

Tested

1. Put >= 22 digits into swap out amount and click the continue button (e.g., 7478773923223123234925).
2. Put >= 22 digits into swap in amount and click the continue button.
3. Select any pair with no valid median or where trading is suspended and put some amount (1) (frequently its USDC, USDT, axlUSDC).

Related issues

• Fixes [Mento-Web] Improve the UX oracle issues #156

Checklist before requesting a review

• I have performed a self-review of my own code
• I have added tests that prove my fix is effective or that my feature works
• The PR title follows the conventions
• I have run the regression tests

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mento-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 20, 2025 1:59pm

[RyRy79261]

Followed testing steps, can confirm toasts appear as expected

[nvtaveras]

Spoke to @Andrew718PLTS offline, there's a few weird ux behaviours which we'll fix:

1. After entering a swap in amount, the button becomes disabled until the quote is returned. It should become enabled again as soon as the quote is fetched (currently it takes a bit longer even though the quote is already there).
2. While testing the same thing as above, sometimes the button switches to red (error) before finally switching to the continue state
3. We show an error button whenever trading is disabled (i.e. no valid median, circuit breaker, etc) together with a toast error message. Should it just be the disabled gray continue button instead, since the error is already shown in the toast?

[Andrew718PLTS]

@nvtaveras Issues are fixed and tested on test deployment.

[chapati23]

Found another issue. There is a race condition if you enter your swapIn amount too early.

Reproduce:

1. Do a full page reload on the deployed preview app
2. Paste a number into the swapIn field as quickly as you can
3. See that the submit button turns red and says "Balance still loading"
4. This message remains even when the balance has been loaded

[Andrew718PLTS]

@chapati23 Thank you, it's a known issue that will be fixed in the scope of this ticket.

[Andrew718PLTS]

@chapati23 Fixed here in the third commit.

[chapati23]

as just discussed on our call, there's another flaky issue that I found

to reproduce you have to be fast :)

1. Copy a number that's higher than your current CELO balance into your clipboard
2. Navigate to the swap page
3. Position your cursor above the submit button
4. Do a full page reload of the swap page and paste your high number from your clipboard into the from input as fast as you can
5. Now hammer the submit button as quickly as you can
6. If you're fast enough, you are able to bypass all warnings and trigger a swap TX for an amount that's higher than what's actually in your wallet

[chapati23]

looks good, tried a bunch of scenarios on the preview deployment and couldn't reproduce any of the issues

[Andrew718PLTS]

Test run with updated tests