feat(ramps): Adds a close button to the buy banner

[georgeweiler]

Description

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension 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]

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.

[metamaskbot]

Builds ready [e408ba8]

• 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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2109 ± 120 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	195	2681	1368	869	417
		domContentLoaded	1614	2630	2075	253	121
		load	1634	2684	2109	249	120
		domInteractive	24	211	65	44	21
		backgroundConnect	11	126	41	31	15
		firstReactRender	21	88	44	20	10
		getState	4	58	25	19	9
		initialActions	0	24	1	5	3
		loadScripts	1211	2042	1555	219	105
		setupStore	7	59	20	16	8
		uiStartup	1851	3044	2372	290	139

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 191 Bytes (0.00%)
• ui: 870 Bytes (0.01%)
• common: 69 Bytes (0.00%)

[metamaskbot]

Builds ready [dc00941]

• 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, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1903 ± 112 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	263	2433	1832	417	200
		domContentLoaded	1565	2423	1875	220	105
		load	1586	2433	1903	234	112
		domInteractive	26	110	46	22	11
		backgroundConnect	9	98	34	29	14
		firstReactRender	19	99	54	33	16
		getState	6	75	28	25	12
		initialActions	0	1	0	0	0
		loadScripts	1167	1988	1424	201	96
		setupStore	7	86	15	20	9
		uiStartup	1775	2725	2247	235	113

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 191 Bytes (0.00%)
• ui: 870 Bytes (0.01%)
• common: 69 Bytes (0.00%)

[metamaskbot]

Builds ready [1bbb9ed]

• 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: 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, 7
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1764 ± 55 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	230	1953	1679	351	168
		domContentLoaded	1476	1931	1729	113	54
		load	1530	1946	1764	114	55
		domInteractive	22	70	37	14	7
		backgroundConnect	9	85	35	24	12
		firstReactRender	17	120	42	30	14
		getState	6	55	22	19	9
		initialActions	0	1	0	0	0
		loadScripts	1096	1490	1296	89	43
		setupStore	6	53	18	17	8
		uiStartup	1754	2754	2093	249	120

[wachunei]

The concern I have is if we ever want to redisplay the card again in future (like for a promotion or announcemen) how would we do it. @Gudahtt have you experienced this case where the updated build overrides the user setting from a previous instance? would it be a migration?

Anyway, we would need to deliver that mechanism when that case happens. I'll approve.