feat(ramp): enable buy button in asset overview

[wachunei]

Description

This PR adds the buy button to the Token (AssetOverview) page, using the Ramp Intent parameters to optimistically open the Buy flow with the token selected. The Buy button will show if the network is supported.

Happy Path / Optimistic case description:

Given:

• The user has already started the Buy flow before and has a region selected from a previous interaction
• The asset is supported in the current region and payment method the user has selected from the previous buy flow interaction

Then:

• As a user, I want to press the Buy button from the Token page and have the token selected on the Buy flow

Other cases:

• If the user has not started the buy button, not selected a region
  • Then the user will land on the buy flow start page or region selector
• If the asset is not supported in the current region/payment method configuration
  • Then the user will land on the buy flow and the default token will be selected.

Related issues

Fixes: #12396

Manual testing steps

1. Go to Token page
2. Click on the Buy button

Screenshots/Recordings

Before

No Buy button

no_buy_button.mp4

After

Happy Path

buy_button_asset_overview.mp4

Token unavailable (default token is selected)

other_cases.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.

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: be7c818
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ecc227aa-7fef-4311-8ad0-133f14cc26a6

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 2de74a0
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ccee4fa6-3988-42ea-b61c-9f7ed2a76817

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 1cbd3bf
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/46007726-deeb-4096-9633-a3084146675e

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[Cal-L]

Code LGTM. However, it seems like we're missing some UX here since we're not notifying the user that the token is not available for buying in their region. Defaulting to the default token can also easily be interpreted as a bug in a sense that the wrong token may have been selected. Is the fallback condition a result of not having a region selected in the first place?

[wachunei]

However, it seems like we're missing some UX here since we're not notifying the user that the token is not available for buying in their region. Defaulting to the default token can also easily be interpreted as a bug in a sense that the wrong token may have been selected.

Yes I agree, we can improve this by adding a message to let the user the token is not available.

Is the fallback condition a result of not having a region selected in the first place?

No, the fallback happens when the token is not available. In the case has not selected region and payment method and they do it in this flow, the token will be selected if it was available.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud