feat(ramps): introduces dynamic support for rampable networks #24041

georgeweiler · 2024-04-16T00:49:45Z

Description

This PR introduces a new reducer for Ramps to store an array of "buyable" networks. A "buyable chain" is one that the native token has onramp support for. This BUYABLE_CHAINS_MAP list is currently hard-coded, and this PR fetches a dynamic network list from the Ramps API instead. The list of supported networks by the MetMask onramp team is dynamic and is based on provider support among other things.

There are several fallback protections in place. Buyable chains will default to the current hard-coded list before loading and will default to that same list if there are any errors. There is no need for loading or error states.

The ramps base API url has been added as a new environment variable, defaulted to production. example: METAMASK_RAMP_API_BASE_URL=https://on-ramp-content.metaswap.codefi.network

Here's screenshot to show the issue this PR will fix. Base network is supported as a buyable network. but because the hard-coded array of networks does not include base we do not enable the buy CTAs:

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Video Description of the changes in the PR (5 min)
https://www.loom.com/share/973960816e7e497aae51ed1cdc3cebf5

Before

After

Pre-merge author checklist

I’ve followed MetaMask 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 · 2024-04-16T00:49:56Z

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.

into ramps-buyable-networks

metamaskbot · 2024-04-16T15:12:22Z

Builds ready [7c4ba77]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (879 ± 575 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	86	159	115	25	12
		domContentLoaded	12	76	29	18	9
		load	72	3106	879	1198	575
		domInteractive	12	76	29	18	9

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 5.45 KiB (0.09%)
common: -1014 Bytes (-0.02%)

codecov · 2024-04-16T15:12:57Z

Codecov Report

Attention: Patch coverage is 98.33333% with 1 line in your changes missing coverage. Please review.

Project coverage is 69.72%. Comparing base (d403213) to head (7ee6250).

Files	Patch %	Lines
...ages/confirmations/send/gas-display/gas-display.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #24041      +/-   ##
===========================================
+ Coverage    69.69%   69.72%   +0.03%     
===========================================
  Files         1350     1353       +3     
  Lines        47865    47910      +45     
  Branches     13199    13210      +11     
===========================================
+ Hits         33355    33402      +47     
+ Misses       14510    14508       -2

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

metamaskbot · 2024-04-16T15:54:35Z

Builds ready [7fe1f84]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (352 ± 384 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	64	185	107	35	17
		domContentLoaded	9	67	26	18	9
		load	48	3032	352	799	384
		domInteractive	9	67	26	18	9

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 5.45 KiB (0.09%)
common: -1014 Bytes (-0.02%)

into ramps-buyable-networks

…tils

…metamask-extension into ramps-buyable-networks

metamaskbot · 2024-04-17T19:26:49Z

Builds ready [91521fc]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (491 ± 459 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	362	134	86	41
		domContentLoaded	10	72	31	20	9
		load	54	3055	491	955	459
		domInteractive	10	72	31	20	9

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 5.62 KiB (0.09%)
common: -1014 Bytes (-0.02%)

bkirb · 2024-04-18T13:16:19Z

LGTM for QA, I tested with Base and other networks ✅

builds.yml

test/data/mock-send-state.json

ui/components/app/add-network/add-network.test.js

ui/ducks/ramps/types.ts

ui/ducks/ramps/ramps.ts

ui/pages/routes/routes.component.test.js

ui/hooks/useTheme.test.ts

ui/helpers/ramps/rampApi/rampAPI.ts

wachunei · 2024-06-21T21:49:11Z

ui/ducks/ramps/ramps.test.ts

+      },
+    });
+    // @ts-expect-error mocked API has mockReset method
+    RampAPI.getNetworks.mockReset();


request for change: Use jest.Mocked instead of suppressing TS error

into ramps-buyable-networks

…metamask-extension into ramps-buyable-networks

into ramps-buyable-networks

gantunesr

LGTM. Reviewed mainly the code relevant for the BTC project

gantunesr · 2024-06-26T23:16:48Z

Hey @georgeweiler, is the test-e2e-chrome-mmi passing for you locally? I have ran the CI 7 times and all failed on the same suite

into ramps-buyable-networks

…toggle is on

into ramps-buyable-networks

danjm

LGTM. Approving the privacy snapshot changes

metamaskbot · 2024-06-27T14:24:25Z

Builds ready [7ee6250]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (158 ± 160 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	74	254	111	39	19
		domContentLoaded	10	180	38	37	18
		load	41	1602	158	334	160
		domInteractive	10	180	38	37	18

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 6.66 KiB (0.10%)
common: -1021 Bytes (-0.02%)

feat(ramps): introduce dynamic support for rampable networks

8bda667

georgeweiler requested review from a team as code owners April 16, 2024 00:49

georgeweiler added the team-ramp label Apr 16, 2024

georgeweiler requested a review from wachunei April 16, 2024 00:51

Merge branch 'develop' of https://github.com/MetaMask/metamask-extension

7c4ba77

into ramps-buyable-networks

georgeweiler added 2 commits April 16, 2024 09:22

Merge branch 'develop' into ramps-buyable-networks

c4f1fb9

Merge branch 'develop' into ramps-buyable-networks

7fe1f84

georgeweiler added 4 commits April 17, 2024 08:54

Merge branch 'develop' of https://github.com/MetaMask/metamask-extension

5349c10

into ramps-buyable-networks

refactor(ramps): updates file directory to organize ramps hooks and u…

8fecf66

…tils

Merge branch 'ramps-buyable-networks' of https://github.com/MetaMask/…

364713f

…metamask-extension into ramps-buyable-networks

Merge branch 'develop' into ramps-buyable-networks

91521fc