feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow by david0xd · Pull Request #30164 · MetaMask/metamask-extension

david0xd · 2025-02-06T16:22:26Z

Description

This PR updates connection flow to prepare it for multichain connection/permission/account requests.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3899

Epic: https://github.com/MetaMask/MetaMask-planning/issues/3660

Design: https://www.figma.com/design/TVuSsLlBQGypLamTsjN1hG/Connection?node-id=286-3221&p=f&t=FkFfpgICtIpA2WBY-0

Notes

AccountListItem will be updated to handle network icons in this task here: https://github.com/MetaMask/MetaMask-planning/issues/4056 (when done, it can be integrated into the connection flow, but for now it's alright to not have it, since it's not a blocker).

Manual testing steps

Go to test-dapp.
Request permissions / request to connect.
Check UI functionality and designs.
Check edge cases.
Confirm functionality of the entire flow.

Screenshots/Recordings

Before

After

Screen.Recording.2025-02-13.at.20.15.27.mov

Regular flows

IP address as a hostname and missing icon handling

Empty state edge case handling

Screen.Recording.2025-02-14.at.13.28.54.mov

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 · 2025-02-06T16:22:40Z

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 · 2025-02-13T12:09:59Z

Builds ready [83a0e29]

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

Page Load Metrics (1927 ± 87 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1616	2185	1925	179	86
		domContentLoaded	1605	2170	1904	172	82
		load	1617	2184	1927	180	87
		domInteractive	24	116	54	30	14
		backgroundConnect	10	70	24	17	8
		firstReactRender	17	81	35	24	11
		getState	5	54	18	18	8
		initialActions	0	1	0	0	0
		loadScripts	1124	1629	1389	141	68
		setupStore	8	62	25	21	10
		uiStartup	1871	2515	2207	182	88

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

background: 0 Bytes (0.00%)
ui: 1.76 KiB (0.02%)
common: 176 Bytes (0.00%)

metamaskbot · 2025-02-13T16:05:50Z

Builds ready [ce45bd4]

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

Page Load Metrics (1713 ± 72 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	267	2022	1628	343	165
		domContentLoaded	1519	2006	1692	145	70
		load	1528	2023	1713	151	72
		domInteractive	21	95	33	15	7
		backgroundConnect	9	73	26	21	10
		firstReactRender	15	71	42	24	11
		getState	4	59	13	14	7
		initialActions	0	1	0	0	0
		loadScripts	1037	1499	1227	132	63
		setupStore	7	66	23	21	10
		uiStartup	1705	2477	1962	204	98

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

background: 0 Bytes (0.00%)
ui: 2.11 KiB (0.03%)
common: 176 Bytes (0.00%)

metamaskbot · 2025-02-13T18:18:51Z

Builds ready [d2ed13f]

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

Page Load Metrics (1754 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	261	2087	1685	352	169
		domContentLoaded	1561	2001	1730	114	55
		load	1570	2009	1754	121	58
		domInteractive	23	120	41	25	12
		backgroundConnect	7	83	27	26	12
		firstReactRender	17	81	45	23	11
		getState	4	59	16	17	8
		initialActions	0	0	0	0	0
		loadScripts	1108	1505	1267	108	52
		setupStore	8	65	19	19	9
		uiStartup	1756	2298	2041	139	67

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

background: 0 Bytes (0.00%)
ui: 3.11 KiB (0.04%)
common: 177 Bytes (0.00%)

metamaskbot · 2025-02-13T20:06:54Z

Builds ready [10aad1a]

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

Page Load Metrics (1631 ± 52 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1469	1816	1631	112	54
		domContentLoaded	1449	1760	1609	107	51
		load	1459	1778	1631	107	52
		domInteractive	23	96	44	25	12
		backgroundConnect	10	58	23	15	7
		firstReactRender	15	75	33	24	11
		getState	5	47	9	9	4
		initialActions	0	1	0	0	0
		loadScripts	1053	1317	1170	87	42
		setupStore	6	65	23	22	11
		uiStartup	1669	2125	1858	131	63

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

background: 0 Bytes (0.00%)
ui: 3.11 KiB (0.04%)
common: 177 Bytes (0.00%)

eriknson · 2025-02-14T10:45:44Z

Summoning @hesterbruikman for visibility

metamaskbot · 2025-02-14T12:04:57Z

Builds ready [113dfc0]

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

Page Load Metrics (1746 ± 101 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1527	2124	1746	210	101
		domContentLoaded	1474	2107	1721	206	99
		load	1527	2116	1746	209	101
		domInteractive	21	143	39	27	13
		backgroundConnect	10	73	31	22	10
		firstReactRender	15	83	43	26	13
		getState	5	54	10	10	5
		initialActions	0	0	0	0	0
		loadScripts	1037	1554	1234	163	78
		setupStore	8	63	19	17	8
		uiStartup	1699	2417	1988	237	114

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

background: 0 Bytes (0.00%)
ui: 3.23 KiB (0.04%)
common: 343 Bytes (0.00%)

metamaskbot · 2025-02-14T13:24:37Z

Builds ready [af112ec]

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

Page Load Metrics (1555 ± 50 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1421	1777	1560	103	49
		domContentLoaded	1390	1766	1538	99	48
		load	1419	1780	1555	104	50
		domInteractive	19	86	36	18	9
		backgroundConnect	9	62	22	17	8
		firstReactRender	14	95	38	29	14
		getState	4	52	10	13	6
		initialActions	0	1	0	0	0
		loadScripts	972	1266	1094	84	40
		setupStore	7	60	13	14	7
		uiStartup	1549	2379	1805	198	95

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

metamaskbot · 2025-02-14T16:13:56Z

Builds ready [b81d586]

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

Page Load Metrics (1933 ± 142 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	260	2674	1695	645	310
		domContentLoaded	1560	2647	1906	295	142
		load	1608	2668	1933	296	142
		domInteractive	27	147	52	31	15
		backgroundConnect	9	87	33	23	11
		firstReactRender	15	89	43	26	12
		getState	5	56	18	16	8
		initialActions	0	1	0	0	0
		loadScripts	1106	1889	1371	213	102
		setupStore	9	65	17	16	8
		uiStartup	1862	2901	2246	308	148

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

eriknson

Design lgtm!

metamaskbot · 2025-02-17T14:24:00Z

Builds ready [50d30a0]

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

Page Load Metrics (1732 ± 102 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	360	2228	1649	363	174
		domContentLoaded	1462	2210	1714	209	100
		load	1474	2224	1732	213	102
		domInteractive	24	92	41	21	10
		backgroundConnect	9	88	22	19	9
		firstReactRender	14	101	41	27	13
		getState	4	56	14	15	7
		initialActions	0	1	0	0	0
		loadScripts	1025	1676	1247	185	89
		setupStore	7	86	27	25	12
		uiStartup	1712	2524	2001	240	115

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

metamaskbot · 2025-02-18T10:21:46Z

Builds ready [b4e4be9]

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

Page Load Metrics (2007 ± 117 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	247	2321	1644	677	325
		domContentLoaded	1583	2388	1970	242	116
		load	1598	2399	2007	243	117
		domInteractive	21	136	50	32	16
		backgroundConnect	10	86	43	23	11
		firstReactRender	14	171	41	37	18
		getState	5	53	16	13	6
		initialActions	0	1	0	0	0
		loadScripts	1150	1809	1457	202	97
		setupStore	6	60	18	16	8
		uiStartup	1865	3040	2319	336	162

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

metamaskbot · 2025-02-20T11:51:17Z

Builds ready [ae5ddc0]

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

Page Load Metrics (1932 ± 123 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1507	2662	1932	259	124
		domContentLoaded	1500	2566	1905	249	120
		load	1509	2651	1932	257	123
		domInteractive	25	197	58	46	22
		backgroundConnect	9	83	32	23	11
		firstReactRender	16	74	41	23	11
		getState	5	66	15	16	8
		initialActions	0	1	0	0	0
		loadScripts	1061	1995	1398	212	102
		setupStore	7	64	20	20	9
		uiStartup	1734	2936	2206	289	139

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

metamaskbot · 2025-02-24T12:36:00Z

Builds ready [8e15f45]

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

Page Load Metrics (1767 ± 83 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	219	2261	1708	382	183
		domContentLoaded	1472	2166	1743	166	80
		load	1483	2197	1767	174	83
		domInteractive	25	177	50	35	17
		backgroundConnect	11	73	26	18	9
		firstReactRender	15	77	32	23	11
		getState	5	67	23	22	11
		initialActions	0	1	0	0	0
		loadScripts	1059	1701	1302	147	71
		setupStore	8	66	20	20	10
		uiStartup	1721	2387	2022	174	83

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

background: 0 Bytes (0.00%)
ui: 3.56 KiB (0.05%)
common: 407 Bytes (0.00%)

vinnyhoward

LGTM nice work

david0xd added the team-snaps-platform-deprecated DEPRECATED: please use "team-core-platform" instead (or "team-new-networks" for Solana snap issues) label Feb 6, 2025

david0xd self-assigned this Feb 6, 2025

david0xd force-pushed the dd/permission-connect-multichain branch 4 times, most recently from e825630 to 7e061c5 Compare February 12, 2025 12:09

david0xd force-pushed the dd/permission-connect-multichain branch from cf87783 to ce45bd4 Compare February 13, 2025 15:25

david0xd force-pushed the dd/permission-connect-multichain branch 2 times, most recently from e9f7f9a to 4c77367 Compare February 14, 2025 10:39

david0xd force-pushed the dd/permission-connect-multichain branch from 80d0006 to b81d586 Compare February 14, 2025 15:34

david0xd marked this pull request as ready for review February 14, 2025 15:41

david0xd requested a review from a team as a code owner February 14, 2025 15:41

eriknson approved these changes Feb 17, 2025

View reviewed changes

david0xd force-pushed the dd/permission-connect-multichain branch from b81d586 to 50d30a0 Compare February 17, 2025 13:44

david0xd force-pushed the dd/permission-connect-multichain branch from 50d30a0 to b4e4be9 Compare February 18, 2025 09:43

david0xd force-pushed the dd/permission-connect-multichain branch from b4e4be9 to ae5ddc0 Compare February 20, 2025 11:10

david0xd added 2 commits February 24, 2025 12:57

Add UI preparation changes for multichain connection flow

2ea0593

Refactor after rebase

3701f88

david0xd added 19 commits February 24, 2025 12:57

Fix lint and tests

8cbcd3e

Fix e2e test utils

aa8b832

Fix e2e test

af0a9e8

Fix e2e test for dapp switch

4e02de5

Update unit test snapshot

462ec8c

Fix accounts displayed in modal

c33067f

Fix another e2e test

c261e25

Fix more e2e tests

4676131

Add some UI adjustments

f052f44

Add some UI adjustments and do some refactoring

589f80d

Fix unit test snapshots

c189605

Fix locale

e4cc27f

Fix edge case with IP address for URL

bbc4b04

Refactor UI part with button link

056f136

Fix e2e test selector

cc845fb

Fix e2e test tag selector

f3cb6ba

Add handling for edge case with no accounts selected

ce1cbd5

Fix lint for locales

16b10eb

Add more unit tests

8e15f45

david0xd force-pushed the dd/permission-connect-multichain branch from ae5ddc0 to 8e15f45 Compare February 24, 2025 11:57

GuillaumeRx approved these changes Feb 24, 2025

View reviewed changes

vinnyhoward approved these changes Feb 24, 2025

View reviewed changes

david0xd added this pull request to the merge queue Feb 24, 2025

Merged via the queue into main with commit 32af047 Feb 24, 2025
79 checks passed

david0xd deleted the dd/permission-connect-multichain branch February 24, 2025 20:50

github-actions bot locked and limited conversation to collaborators Feb 24, 2025

metamaskbot added the release-12.14.0 Issue or pull request that will be included in release 12.14.0 label Feb 24, 2025

Conversation

david0xd commented Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Notes

Manual testing steps

Screenshots/Recordings

Before

After

Regular flows

IP address as a hostname and missing icon handling

Empty state edge case handling

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Feb 6, 2025

Uh oh!

metamaskbot commented Feb 13, 2025

Uh oh!

metamaskbot commented Feb 13, 2025

Uh oh!

metamaskbot commented Feb 13, 2025

Uh oh!

metamaskbot commented Feb 13, 2025

Uh oh!

eriknson commented Feb 14, 2025

Uh oh!

metamaskbot commented Feb 14, 2025

Uh oh!

metamaskbot commented Feb 14, 2025

Uh oh!

metamaskbot commented Feb 14, 2025

Uh oh!

eriknson left a comment

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Feb 17, 2025

Uh oh!

metamaskbot commented Feb 18, 2025

Uh oh!

metamaskbot commented Feb 20, 2025

Uh oh!

metamaskbot commented Feb 24, 2025

Uh oh!

vinnyhoward left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

david0xd commented Feb 6, 2025 •

edited

Loading