feat: Adds Remote Mode hardware wallet gating #32012

kevinbluer · 2025-04-15T19:36:42Z

Description

Adds enforcement that only hardware-based accounts can setup remote mode.
Note that the check is also triggered if the user changes the active account during the setup process
Also includes a number of (still work-in-progress) design parity tweaks
- Using appropriate Page, Header, Footer, etc components
- Various copy updates
- Other minor design / stylistic updates

Related issues

Manual testing steps

Create the build (yarn webpack)
Go to remote/setup-swaps and remote/setup-daily-allowance and switch between a hardware and non-hardware wallet based accounts. This can be done during both the overview screen and at any time during the setup flow(s)
Designs for reference when reviewing the design parity related updates, although note these are still work-in-process

Note to override the vaultRemoteMode feature flag (which will implicitly default to disabled), the configuration steps are available here. Example.manifest-overrides.json:

{
  "_flags": {
    "remoteFeatureFlags": {
      "vaultRemoteMode": true
    }
  }
}

Screenshots/Recordings

Before

NA

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.

metamaskbot · 2025-04-15T20:39:08Z

Builds ready [59a88c1]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI 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, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

UI Startup Metrics (1213 ± 65 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1213	1114	1540	65	1242	1331
			load	1046	958	1306	58	1075	1161
			domContentLoaded	1041	954	1299	57	1065	1152
			domInteractive	17	13	61	7	16	29
			firstPaint	780	74	1206	394	1056	1149
			backgroundConnect	6	4	25	2	7	9
			firstReactRender	20	14	39	4	21	29
			getState	14	5	41	8	20	30
			initialActions	0	0	1	0	0	0
			loadScripts	802	725	985	54	827	923
			setupStore	8	5	20	3	8	14
	Webpack	Home	uiStartup	2201	1780	2691	162	2329	2415
			load	1703	1277	2160	157	1792	1956
			domContentLoaded	1696	1270	2154	157	1788	1952
			domInteractive	16	11	58	11	13	47
			firstPaint	178	60	390	60	209	294
			backgroundConnect	32	9	282	37	31	65
			firstReactRender	214	56	483	129	344	379
			getState	12	4	37	7	15	29
			initialActions	3	1	6	1	4	5
			loadScripts	1691	1268	2152	155	1786	1928
			setupStore	25	6	306	46	23	37
Firefox	Browserify	Home	uiStartup	1346	1163	1799	123	1420	1611
			load	1202	1030	1677	123	1275	1440
			domContentLoaded	1201	1029	1677	123	1274	1439
			domInteractive	108	41	353	45	117	191
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	13	212	32	19	32
			firstReactRender	23	19	62	6	23	36
			getState	7	4	36	4	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	1179	1019	1662	123	1242	1422
			setupStore	6	4	29	3	6	8
	Webpack	Home	uiStartup	1475	1324	1813	106	1540	1707
			load	1261	1145	1572	94	1302	1440
			domContentLoaded	1261	1145	1571	94	1302	1440
			domInteractive	75	34	140	21	79	124
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	14	57	7	22	41
			firstReactRender	34	29	50	4	36	43
			getState	9	4	47	6	9	28
			initialActions	1	0	1	0	1	1
			loadScripts	1242	1130	1553	94	1280	1423
			setupStore	8	6	28	4	8	20

Bundle size diffs

background: 0 Bytes (0%)
ui: 3.85 KiB (0.06%)
common: 0 Bytes (0%)

metamaskbot · 2025-04-15T21:31:58Z

Builds ready [21c9997]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI 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, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

UI Startup Metrics (1224 ± 74 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1224	1102	1477	74	1267	1366
			load	1059	955	1287	68	1108	1198
			domContentLoaded	1052	951	1263	67	1100	1187
			domInteractive	17	13	49	5	16	28
			firstPaint	774	139	1222	406	1091	1184
			backgroundConnect	7	4	24	3	8	12
			firstReactRender	20	15	45	5	20	26
			getState	13	5	37	8	19	31
			initialActions	0	0	1	0	0	1
			loadScripts	816	720	1002	64	854	938
			setupStore	7	5	17	2	7	11
	Webpack	Home	uiStartup	2097	1667	2559	182	2230	2386
			load	1612	1290	1963	139	1717	1825
			domContentLoaded	1605	1286	1925	137	1714	1819
			domInteractive	15	11	54	10	13	46
			firstPaint	176	66	343	55	204	301
			backgroundConnect	24	10	95	14	26	56
			firstReactRender	218	55	404	119	337	373
			getState	11	4	28	5	13	21
			initialActions	3	1	8	1	3	6
			loadScripts	1600	1285	1902	136	1712	1818
			setupStore	17	7	42	6	20	28
Firefox	Browserify	Home	uiStartup	1393	1251	1707	98	1454	1578
			load	1234	1059	1545	100	1295	1426
			domContentLoaded	1234	1059	1545	101	1295	1426
			domInteractive	99	39	178	26	116	144
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	13	125	15	22	60
			firstReactRender	24	20	57	4	25	31
			getState	8	4	30	5	8	24
			initialActions	0	0	1	0	0	1
			loadScripts	1213	1043	1527	102	1273	1410
			setupStore	7	4	37	6	6	24
	Webpack	Home	uiStartup	1504	1354	1894	112	1565	1758
			load	1285	1161	1602	97	1341	1510
			domContentLoaded	1285	1160	1602	97	1341	1509
			domInteractive	86	54	283	37	93	164
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	14	107	14	24	59
			firstReactRender	35	28	55	5	37	47
			getState	9	4	32	6	9	29
			initialActions	1	0	2	1	1	1
			loadScripts	1264	1142	1583	96	1314	1459
			setupStore	11	5	300	29	8	22

Bundle size diffs

background: 0 Bytes (0%)
ui: 4.28 KiB (0.06%)
common: 0 Bytes (0%)

metamaskbot · 2025-04-15T22:26:33Z

❌ API Spec Test Failed. View the report here.

metamaskbot · 2025-04-16T18:37:01Z

Builds ready [2574113]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI 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, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

UI Startup Metrics (1227 ± 63 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1227	1124	1408	63	1266	1359
			load	1058	966	1199	55	1091	1165
			domContentLoaded	1052	961	1190	54	1084	1160
			domInteractive	17	13	36	5	17	29
			firstPaint	748	151	1184	398	1067	1112
			backgroundConnect	7	4	25	3	7	12
			firstReactRender	21	15	48	7	20	44
			getState	13	5	67	10	16	30
			initialActions	0	0	1	0	0	1
			loadScripts	811	726	949	53	837	919
			setupStore	8	5	21	3	8	13
	Webpack	Home	uiStartup	2120	1720	2481	173	2249	2348
			load	1626	1340	1928	124	1720	1825
			domContentLoaded	1619	1337	1918	124	1712	1819
			domInteractive	15	11	53	9	13	47
			firstPaint	189	69	550	72	233	310
			backgroundConnect	27	9	250	26	28	60
			firstReactRender	211	55	372	112	326	357
			getState	11	4	25	5	14	21
			initialActions	3	1	7	1	3	5
			loadScripts	1614	1336	1895	123	1710	1817
			setupStore	20	6	202	24	20	32
Firefox	Browserify	Home	uiStartup	1520	1226	2092	159	1554	1874
			load	1349	1094	1926	153	1395	1685
			domContentLoaded	1349	1094	1926	153	1395	1685
			domInteractive	117	37	292	35	130	179
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	29	14	161	25	27	94
			firstReactRender	24	20	39	4	26	33
			getState	10	5	49	9	9	37
			initialActions	0	0	2	0	0	1
			loadScripts	1323	1080	1896	143	1374	1620
			setupStore	6	4	12	2	7	11
	Webpack	Home	uiStartup	1487	1335	1922	112	1552	1710
			load	1278	1156	1668	99	1302	1467
			domContentLoaded	1278	1156	1668	99	1302	1467
			domInteractive	85	58	312	35	91	123
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	14	55	7	22	36
			firstReactRender	34	28	47	4	37	44
			getState	8	4	31	5	8	14
			initialActions	0	0	2	1	1	1
			loadScripts	1259	1137	1645	98	1286	1449
			setupStore	8	5	42	5	8	22

matallui

Just a couple of suggestions/questions, but happy if we address those in a follow-up PR, given our tight timeline.

...ages/remote-mode/setup/setup-daily-allowance/remote-mode-setup-daily-allowance.component.tsx

ui/pages/remote-mode/setup/setup-swaps/remote-mode-setup-swaps.component.tsx

ui/pages/remote-mode/setup/setup-swaps/index.scss

caieu

LGTM

caieu

LGTM

metamaskbot · 2025-04-17T14:52:57Z

Builds ready [945c883]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all CircleCI 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, 14
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

UI Startup Metrics (1222 ± 64 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1222	1096	1436	64	1252	1350
			load	1060	962	1227	58	1085	1178
			domContentLoaded	1055	959	1221	57	1078	1173
			domInteractive	17	13	63	6	16	28
			firstPaint	674	148	1202	423	1066	1165
			backgroundConnect	6	4	10	1	7	8
			firstReactRender	21	15	48	6	22	41
			getState	12	5	42	8	15	29
			initialActions	0	0	1	0	0	1
			loadScripts	815	722	968	54	838	926
			setupStore	8	4	16	2	9	12
	Webpack	Home	uiStartup	2107	1693	2547	180	2220	2331
			load	1620	1313	1937	136	1735	1823
			domContentLoaded	1613	1309	1911	134	1726	1816
			domInteractive	15	11	56	10	13	41
			firstPaint	196	60	1545	149	215	333
			backgroundConnect	27	9	170	22	28	68
			firstReactRender	214	54	368	117	338	361
			getState	15	4	253	29	13	25
			initialActions	3	1	11	1	3	5
			loadScripts	1608	1308	1888	133	1721	1814
			setupStore	16	6	40	6	19	31
Firefox	Browserify	Home	uiStartup	1383	1208	1720	113	1458	1635
			load	1230	1039	1539	113	1295	1490
			domContentLoaded	1229	1038	1538	113	1295	1489
			domInteractive	108	38	258	36	132	165
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	14	148	17	24	50
			firstReactRender	23	19	96	8	24	30
			getState	8	4	34	5	8	22
			initialActions	0	0	1	0	0	1
			loadScripts	1208	1028	1509	109	1273	1430
			setupStore	6	4	39	4	6	9
	Webpack	Home	uiStartup	1576	1380	2009	151	1649	1918
			load	1343	1186	1738	132	1430	1608
			domContentLoaded	1342	1186	1737	132	1430	1607
			domInteractive	95	45	310	43	111	156
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	25	16	90	9	26	44
			firstReactRender	38	30	65	6	40	50
			getState	11	5	54	8	10	31
			initialActions	0	0	2	1	1	1
			loadScripts	1321	1165	1713	133	1402	1588
			setupStore	9	6	32	5	9	21

metamaskbot added the team-vault-deprecated MetaMask Vault Team is now Prediction Markets label Apr 15, 2025

kevinbluer marked this pull request as ready for review April 15, 2025 20:09

kevinbluer force-pushed the feat/remote-mode-hw-wallet-gating branch 2 times, most recently from 5edf9fd to 2574113 Compare April 16, 2025 18:00

kevinbluer added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Apr 16, 2025

matallui previously approved these changes Apr 16, 2025

View reviewed changes

caieu previously approved these changes Apr 16, 2025

View reviewed changes

kevinbluer added this pull request to the merge queue Apr 16, 2025

github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Apr 16, 2025

kevinbluer dismissed stale reviews from caieu and matallui via 517c57e April 17, 2025 14:05

kevinbluer requested review from a team as code owners April 17, 2025 14:05

kevinbluer added 9 commits April 17, 2025 09:10

feat: implements (wip) remote mode account picker (daily allowance)

a2b041b

feat: implements (wip) remote mode account picker

252aa94

chore: updates tests, minor lint fixes

a0c4134

chore: updates copy and layout to increase parity with designs

dc19956

feat: gates for remote mode if user isn't using support hardware wallet

9b8fe2b

chore: fixes linting issues

83aee6f

chore: splits out the remote mode account check to dedicated function

d4c5f57

chore: fixes linting issue (import order)

66cdcd2

chore: resolves lingering linting issue

945c883

kevinbluer force-pushed the feat/remote-mode-hw-wallet-gating branch from 517c57e to 945c883 Compare April 17, 2025 14:15

caieu approved these changes Apr 17, 2025

View reviewed changes

matallui approved these changes Apr 17, 2025

View reviewed changes

kevinbluer added this pull request to the merge queue Apr 17, 2025

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 17, 2025

kevinbluer added this pull request to the merge queue Apr 17, 2025

Merged via the queue into main with commit 1997e26 Apr 17, 2025
167 checks passed

kevinbluer deleted the feat/remote-mode-hw-wallet-gating branch April 17, 2025 16:37

github-actions bot locked and limited conversation to collaborators Apr 17, 2025

metamaskbot added the release-12.18.0 Issue or pull request that will be included in release 12.18.0 label Apr 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Adds Remote Mode hardware wallet gating #32012

feat: Adds Remote Mode hardware wallet gating #32012

Uh oh!

kevinbluer commented Apr 15, 2025 •

edited

Loading

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 16, 2025

Uh oh!

matallui left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caieu left a comment

Uh oh!

caieu left a comment

Uh oh!

metamaskbot commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: Adds Remote Mode hardware wallet gating #32012

feat: Adds Remote Mode hardware wallet gating #32012

Uh oh!

Conversation

kevinbluer commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 15, 2025

Uh oh!

metamaskbot commented Apr 16, 2025

Uh oh!

matallui left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caieu left a comment

Choose a reason for hiding this comment

Uh oh!

caieu left a comment

Choose a reason for hiding this comment

Uh oh!

metamaskbot commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

kevinbluer commented Apr 15, 2025 •

edited

Loading