feat: swaps on send flow when amount is insufficient

[tommasini]

Description
PROPOSAL:
During the send flow on the amount screen:

• Possibility of swaps when ERC-20 is selected and the amount is insufficient.
• Possibility of Buy when the main Token amount is insufficient.

UX to improve
After navigating to the swaps

• Reason why we do not navigate back to the send flow on the end, it's because the transaction object on redux it's being replaced by the swaps transaction

Future development proposal
The transaction object should have a type (swaps, send_flow, dapp) or split the transaction objects, this way we can have more than one transaction in redux state, which could open opportunities to improve the UX, such as this example.

Screenshots/Recordings
Recording on buy: https://recordit.co/NBdij78xev
Recording on swap: https://recordit.co/4kUMifjSk6

E2E test
https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/55932a50-d34a-4599-9825-cca5aa681230

Issue

fixes #???

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

Attention: 19 lines in your changes are missing coverage. Please review.

Comparison is base (0601deb) 39.63% compared to head (a7f57fd) 39.61%.

Files	Patch %	Lines
app/components/UI/Swaps/index.js	0.00%	12 Missing ⚠️
app/components/Views/SendFlow/Amount/index.js	36.36%	7 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6980      +/-   ##
==========================================
- Coverage   39.63%   39.61%   -0.03%     
==========================================
  Files        1233     1233              
  Lines       29810    29830      +20     
  Branches     2840     2840              
==========================================
  Hits        11816    11816              
- Misses      17302    17321      +19     
- Partials      692      693       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bschorchit]

Love this! Could the "Swap" tokens follow the same design pattern as the "Buy more" and be a link within the warning instead of new button?

[bschorchit]

This might be outside of scope, but it would be nice to add metrics on this so we can measure its impact and effectiveness. It could be triggering a Link Clicked event with properties:

• location = insufficient_funds_warning
• text = buy_more or swap_tokens

[tommasini]

@bschorchit addressed, Here it goes the recording: https://recordit.co/4kUMifjSk6

[NicolasMassart]

Looks good to me.

[tommasini]

Regression Pipeline running that have 2 swaps test flows https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/8b0d7b14-8b16-4df9-a816-c50d08de6bf1

Important to notice that the swaps e2e are 4 test files, 2 of them are on the smoke e2e and 2 of them are on the regression pipeline

[tommasini]

Last recording: https://recordit.co/O7a8J82Xg2

[NicolasMassart]

Looks good to me.

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
26.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[cortisiko]

this looks good to me. Scenarios I also considered:

• attempting to send funds on a network that does not support buying. Ensuring the alert which takes you to the buy flow is not displayed
• attempting to send funds on a network that does not support swapping. Ensuring the alert which takes you to the swap flow is not displayed