Connect Screen Multi Select

[danjm]

Add UI for selecting multiple accounts on the first permissions connect screen.

Demo of multiple account selection: https://streamable.com/nd3wt

Demo of adding new account via modal: https://streamable.com/qvqao

Screenshots of latest designs:

There are two pieces of remaining work. First is to add the notification pictured here:

Doing so will be trivial once #8071 is merged. An issue for this is here: #8102

Second is to add the tooltip with the list of accounts when there are multiple accounts selected on the second screen. This is blocked by being about to pass components as substitutions to our translation helper (#6848, in particular see comment #6848 (comment)). An issue for this tooltip: #8101.

[metamaskbot]

Builds ready [0446c09]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (630 ± 31 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	34	105	50	21	10
		domContentLoaded	375	704	629	64	31
		load	377	706	630	64	31
		domInteractive	375	704	628	64	31

[Gudahtt]

The browser routing PR has been merged, so this is ready to be rebased and pointed at develop

[metamaskbot]

Builds ready [84fe79c]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (602 ± 33 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	33	55	39	5	3
		domContentLoaded	333	715	601	68	33
		load	334	716	602	68	33
		domInteractive	333	714	600	68	33

[metamaskbot]

Builds ready [0675530]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (640 ± 46 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	37	105	57	23	11
		domContentLoaded	342	783	638	96	46
		load	343	785	640	96	46
		domInteractive	341	783	638	96	46

[metamaskbot]

Builds ready [2c736d3]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (643 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	35	112	55	25	12
		domContentLoaded	345	777	641	125	60
		load	347	779	643	124	60
		domInteractive	345	777	641	125	60

[rekmarks]

This may be out of scope, but I just wanted to bring it up:

The eth_accounts permissions description has already been updated to View the addresses of the user's chosen accounts..

However, what about the account icon? You mention a tooltip to indicate multiple accounts being selected, but should we display something entirely different to make that clear to the user?

[metamaskbot]

Builds ready [3f0a82e]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (611 ± 32 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	33	83	44	16	8
		domContentLoaded	343	694	609	66	32
		load	345	696	611	66	32
		domInteractive	343	693	609	66	32

[danjm]

The comment from #8078 (comment) will be resolved in a future PR that will take care of all remaining updates to designs

[metamaskbot]

Builds ready [863b911]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (701 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	39	127	61	26	13
		domContentLoaded	425	856	699	120	58
		load	426	858	701	121	58
		domInteractive	424	855	698	120	58

[metamaskbot]

Builds ready [8e31e1f]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (774 ± 18 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	37	98	50	13	6
		domContentLoaded	715	859	772	38	18
		load	717	861	774	38	18
		domInteractive	714	858	772	38	18