feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow #30164

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%)

david0xd added the team-snaps-platform Snaps Platform team 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 added 4 commits February 20, 2025 12:10

Add UI preparation changes for multichain connection flow

9d38e79

Refactor after rebase

285f541

Fix lint and tests

225c881

Fix e2e test utils

815b845

david0xd added 17 commits February 20, 2025 12:10

Fix e2e test

57cc8ac

Fix e2e test for dapp switch

48725b6

Update unit test snapshot

c0c5bc9

Fix accounts displayed in modal

962ecb6

Fix another e2e test

01b34f0

Fix more e2e tests

ce135d3

Add some UI adjustments

6e8a1be

Add some UI adjustments and do some refactoring

572b2f0

Fix unit test snapshots

519a0e0

Fix locale

30149d1

Fix edge case with IP address for URL

7ab199b

Refactor UI part with button link

d827f19

Fix e2e test selector

ba1e6f3

Fix e2e test tag selector

fff7ef9

Add handling for edge case with no accounts selected

d80434b

Fix lint for locales

1146470

Add more unit tests

ae5ddc0

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow #30164

feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow #30164

david0xd commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

eriknson commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

eriknson left a comment

metamaskbot commented Feb 17, 2025

metamaskbot commented Feb 18, 2025

metamaskbot commented Feb 20, 2025

feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow #30164

Are you sure you want to change the base?

feat(multichain-connect-ui): Add UI preparation changes for multichain connection flow #30164

Conversation

david0xd commented Feb 6, 2025 • edited Loading

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

github-actions bot commented Feb 6, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

eriknson commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

eriknson left a comment

Choose a reason for hiding this comment

metamaskbot commented Feb 17, 2025

metamaskbot commented Feb 18, 2025

metamaskbot commented Feb 20, 2025

david0xd commented Feb 6, 2025 •

edited

Loading