Alert user upon switching to unconnected account

[Gudahtt]

An alert is now shown when the user switches from an account that is connected to the active tab to an account that is not connected. The alert prompts the user to dismiss the alert or connect the account they're switching to.

The "loading" state is handled by disabling the buttons, and the error state is handled by displaying a generic error message and disabling the connect button.

The new reducer for this alert has been created with createSlice from the Redux Toolkit. This utility is recommended by the Redux team, and represents a new style of writing reducers that I hope we will use more in the future (or at least something similar). createSlice constructs a reducer, actions, and action creators automatically. The reducer is constructed using their createReducer helper, which uses Immer to allow directly mutating the state in the reducer but exposing these changes as immutable.

[Gudahtt]

I'll wait on #8345 before fixing the broken integration tests, as I'll have one less state file to modify after that's merged.

[metamaskbot]

Builds ready [8a90007]

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

Page Load Metrics (650 ± 37 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	34	84	44	11	5
		domContentLoaded	345	722	649	77	37
		load	346	724	650	77	37
		domInteractive	344	722	648	77	37

[metamaskbot]

Builds ready [54d525c]

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

Page Load Metrics (669 ± 46 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	34	57	41	6	3
		domContentLoaded	345	832	668	95	45
		load	347	835	669	95	46
		domInteractive	345	832	667	95	45

[metamaskbot]

Builds ready [918706e]

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

Page Load Metrics (660 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	35	54	43	6	3
		domContentLoaded	329	803	658	113	54
		load	331	805	660	112	54
		domInteractive	329	803	658	113	54

[metamaskbot]

Builds ready [896ff3b]

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

Page Load Metrics (695 ± 31 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	37	86	46	12	6
		domContentLoaded	620	858	693	65	31
		load	622	859	695	65	31
		domInteractive	620	857	693	65	31

[metamaskbot]

Builds ready [22d9a13]

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

Page Load Metrics (685 ± 56 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	37	90	48	11	5
		domContentLoaded	396	816	683	116	56
		load	397	818	685	117	56
		domInteractive	396	816	683	116	56

[Gudahtt]

Screenshots:

Here's the alert:

Here is the error state:

[metamaskbot]

Builds ready [48af2bc]

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

[metamaskbot]

Builds ready [928734a]

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

[rekmarks]

Very clean and crisp! A pleasure to review. Excited to see Immer being used, even if indirectly.

One in-line comment, and also some feedback about styling/UX:

Full Screenshot for Scale

• The buttons appear disproportionately large to me, relative to the size of the popover. Could we make them smaller?
  • Related: Where are the designs?
• In testing this, I quickly got very annoyed with this popup. Can we add a "Don't show this again" checkbox?

[Gudahtt]

Yeah, the buttons do look a bit large. I think those sizes are being dictated by our default button styles? I'll take a look. We have another card for updating the button styles across the extension to be rounded, as shown in the Figma designs, but that wasn't going to be in v8. Maybe I can tweak them to be a bit smaller though.

The designs are here.

The "Don't show this again" checkbox was going to be in a follow-up PR; there's a separate card for that on Trello I believe.

[rekmarks]

@Gudahtt word, sounds good! Just me when you've decided what to do with the button styles.

Oh one more thing: doing any e2e tests for this in a follow-up, or what's the plan for that?

[metamaskbot]

Builds ready [4495c2a]

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

Page Load Metrics (672 ± 37 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	31	47	37	4	2
		domContentLoaded	387	783	670	77	37
		load	388	786	672	77	37
		domInteractive	387	783	670	77	37

[rekmarks]

LGTM!

Buttons and checkbox can be fixed in one or more follow-up PRs.

[Gudahtt]

Two updates have been made:

• Use SELECTED_ADDRESS_CHANGED state instead of cached address

  The unconnected-account reducer no longer caches the selected address when the alert was opened. Instead a new event was added for when the selected address changes (SELECTED_ADDRESS_CHANGED). Now that we know exactly when the selected address changes, we don't need to cache the original account for comparison anymore.

• Update button styles to reduce size

  The buttons are now closer in size to the buttons in the designs. The button styles will be updated to match the designs more closely in a separate PR.

Screenshots of updated buttons:

[Gudahtt]

@rekmarks I started trying to write an e2e test for this, but it was a bit challenging because we can't actually test the real popup with Selenium. It doesn't allow interacting with browser-things outside of the page (even the keyboard shortcut is intercepted). Even if it did allow it, there's no way to focus on the popup either.

In other tests we fake the popup UI by navigating to popup.html and making the window vagely popup-sized. The activeTab state still won't be set in that case though, and I rely upon that for this alert. We'll need to find a way to fake the activeTab state - then this should be testable.

[metamaskbot]

Builds ready [f83340c]

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

Page Load Metrics (666 ± 41 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	31	50	39	5	2
		domContentLoaded	383	861	664	84	41
		load	385	863	666	85	41
		domInteractive	383	860	664	84	41

[rekmarks]

LGTM!

Nice fix for the buttons and selected address state.

[metamaskbot]

Builds ready [0818023]

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

Page Load Metrics (649 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	86	41	15	7
		domContentLoaded	318	832	647	90	43
		load	322	834	649	89	43
		domInteractive	318	832	647	90	43

[rekmarks]

Re-approve after rebase.

[whymarrh]

This looks good to me! I didn't test it out locally but it looks like @rekmarks did.