feat: handle shield change payment method #38165

tuna1207 · 2025-11-24T09:02:51Z

Description

In transaction shield settings screen when user press on payment method, show payment modal for user to choose changing payment method if available
Handle change payment method for crypto -> crypto and crypto -> card

Figma: https://www.figma.com/design/HTAO1SrmixV4ppv7qIvLoa/Metamask-Transaction-Shield?node-id=13566-64615&t=aa5GS94Ns0xYXECP-0

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

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-11-24T09:03:36Z

✨ Files requiring CODEOWNER review ✨

🔐 @MetaMask/web3auth (3 files, +461 -152)

📁 ui/
- 📁 hooks/
  - 📁 subscription/
    - 📄 useSubscription.ts +95 -51
- 📁 pages/
  - 📁 settings/
    - 📁 transaction-shield-tab/
      - 📄 payment-method-row.tsx +302 -0
      - 📄 transaction-shield.tsx +64 -101

metamaskbot · 2025-11-24T09:35:19Z

Builds ready [39b482c]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
- content-script: 0
- offscreen: 0

UI Startup Metrics (1245 ± 117 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1245	1024	1583	117	1293	1474
			load	1051	876	1427	105	1101	1253
			domContentLoaded	1046	872	1420	105	1096	1248
			domInteractive	28	15	125	25	22	101
			firstPaint	518	80	1438	416	1021	1214
			backgroundConnect	214	194	255	11	218	239
			firstReactRender	29	19	52	8	34	46
			getState	36	16	79	13	44	63
			initialActions	1	0	5	1	1	2
			loadScripts	838	665	1209	103	885	1019
			setupStore	12	7	35	4	13	20
			numNetworkReqs	12	5	78	21	5	73
	Browserify	Power User Home	uiStartup	1886	1539	3369	314	2032	2643
			load	1002	875	2013	195	991	1510
			domContentLoaded	987	869	2001	194	969	1502
			domInteractive	42	15	324	56	30	197
			firstPaint	525	95	2009	398	911	1445
			backgroundConnect	223	200	348	19	229	250
			firstReactRender	85	54	131	12	91	103
			getState	181	127	385	51	192	316
			initialActions	1	0	3	1	1	2
			loadScripts	784	667	1789	192	769	1291
			setupStore	20	10	55	11	24	48
			numNetworkReqs	143	66	305	55	181	274
	Webpack	Standard Home	uiStartup	784	658	1071	83	811	976
			load	612	538	830	73	630	788
			domContentLoaded	608	535	823	72	625	783
			domInteractive	26	14	119	25	21	105
			firstPaint	244	67	792	175	286	598
			backgroundConnect	9	5	36	4	11	18
			firstReactRender	27	19	71	8	31	38
			getState	25	12	59	11	34	43
			initialActions	1	0	4	1	1	2
			loadScripts	605	533	815	71	623	776
			setupStore	10	6	21	4	12	17
			numNetworkReqs	12	5	77	20	5	73
	Webpack	Power User Home	uiStartup	1531	1260	2853	263	1709	2133
			load	706	610	1583	154	693	1123
			domContentLoaded	695	604	1567	153	675	1112
			domInteractive	43	18	249	53	33	208
			firstPaint	278	100	1163	195	275	654
			backgroundConnect	15	8	46	7	20	31
			firstReactRender	89	57	110	11	96	106
			getState	164	126	353	38	169	243
			initialActions	1	0	4	1	1	3
			loadScripts	692	602	1556	151	672	1101
			setupStore	22	9	70	15	30	59
			numNetworkReqs	146	67	302	54	181	292
Firefox	Browserify	Standard Home	uiStartup	1256	1087	1710	114	1303	1493
			load	1055	928	1217	77	1107	1205
			domContentLoaded	1054	928	1216	77	1107	1205
			domInteractive	63	31	175	33	87	128
			firstPaint	-	-	-	-	-	-
			backgroundConnect	37	22	135	20	37	89
			firstReactRender	22	18	51	7	22	44
			getState	10	5	72	10	9	19
			initialActions	1	0	2	0	1	2
			loadScripts	1032	912	1194	74	1077	1174
			setupStore	10	5	81	8	9	23
			numNetworkReqs	11	5	69	15	6	60
	Browserify	Power User Home	uiStartup	2673	1866	3690	302	2884	3146
			load	1176	986	1670	171	1229	1552
			domContentLoaded	1174	985	1670	171	1229	1552
			domInteractive	127	34	464	103	144	417
			firstPaint	-	-	-	-	-	-
			backgroundConnect	212	25	1097	234	236	806
			firstReactRender	92	52	146	19	101	130
			getState	163	79	873	136	170	398
			initialActions	2	1	7	2	2	7
			loadScripts	1130	954	1622	160	1152	1508
			setupStore	163	7	789	228	148	761
			numNetworkReqs	90	59	207	38	92	188
	Webpack	Standard Home	uiStartup	1425	1272	1844	110	1464	1698
			load	1209	1063	1451	82	1237	1404
			domContentLoaded	1208	1063	1450	82	1237	1404
			domInteractive	62	30	207	32	82	114
			firstPaint	-	-	-	-	-	-
			backgroundConnect	42	19	215	25	44	94
			firstReactRender	27	20	52	5	30	36
			getState	12	6	135	14	12	22
			initialActions	1	0	3	0	1	2
			loadScripts	1183	1046	1434	74	1213	1347
			setupStore	12	6	75	10	11	34
			numNetworkReqs	12	5	65	17	6	63
	Webpack	Power User Home	uiStartup	2872	2113	3810	357	3071	3662
			load	1392	1119	1826	189	1542	1779
			domContentLoaded	1391	1118	1826	189	1542	1779
			domInteractive	121	30	554	119	133	459
			firstPaint	-	-	-	-	-	-
			backgroundConnect	166	22	854	192	210	667
			firstReactRender	87	44	148	19	99	125
			getState	264	87	904	255	222	830
			initialActions	3	0	35	5	3	7
			loadScripts	1359	1100	1780	185	1513	1685
			setupStore	110	5	762	183	94	742
			numNetworkReqs	91	53	217	45	81	207

📊 Page Load Benchmark Results

Current Commit: 39b482c | Date: 11/24/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.04s (±127ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
domContentLoaded-> current mean value: 729ms (±153ms) 🟢 | historical mean value: 731ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 87ms (±137ms) 🟢 | historical mean value: 79ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	127ms	1.01s	2.28s	1.05s	2.28s
domContentLoaded	729ms	153ms	697ms	2.24s	740ms	2.24s
firstPaint	87ms	137ms	56ms	1.45s	84ms	1.45s
firstContentfulPaint	87ms	137ms	56ms	1.45s	84ms	1.45s
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

background: 53 Bytes (0%)
ui: 4.94 KiB (0.07%)
common: 126 Bytes (0%)

metamaskbot · 2025-11-25T02:29:46Z

Builds ready [6a2ab08]

builds: chrome, firefox
builds (beta): chrome, firefox
builds (flask): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
user-actions-benchmark: User Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
- content-script: 0
- offscreen: 0

UI Startup Metrics (1186 ± 99 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Standard Home	uiStartup	1186	1047	1746	99	1219	1365
			load	1000	819	1475	86	1034	1143
			domContentLoaded	993	817	1421	83	1027	1134
			domInteractive	25	13	135	24	19	89
			firstPaint	608	95	1179	397	1013	1148
			backgroundConnect	198	180	280	14	203	225
			firstReactRender	27	19	49	8	32	43
			getState	32	12	100	13	36	60
			initialActions	1	0	7	1	1	2
			loadScripts	803	635	1196	80	838	941
			setupStore	11	6	27	4	12	20
			numNetworkReqs	12	5	78	21	5	76
	Browserify	Power User Home	uiStartup	2038	1557	2940	264	2206	2504
			load	975	872	1578	142	961	1376
			domContentLoaded	961	864	1569	140	947	1356
			domInteractive	33	16	145	27	31	117
			firstPaint	576	105	1407	384	916	1287
			backgroundConnect	216	202	248	10	220	241
			firstReactRender	83	47	145	19	91	131
			getState	167	131	233	22	183	203
			initialActions	1	0	5	1	1	2
			loadScripts	760	669	1336	138	743	1164
			setupStore	20	9	48	9	24	41
			numNetworkReqs	158	64	410	75	188	364
	Webpack	Standard Home	uiStartup	850	715	1137	90	893	1038
			load	663	565	960	88	730	836
			domContentLoaded	658	559	941	88	723	828
			domInteractive	27	16	116	23	22	100
			firstPaint	230	82	852	166	220	689
			backgroundConnect	10	6	32	6	14	26
			firstReactRender	28	20	164	15	33	38
			getState	26	13	71	11	33	45
			initialActions	1	0	3	1	1	1
			loadScripts	653	557	843	82	721	814
			setupStore	11	6	45	5	12	22
			numNetworkReqs	12	5	77	21	5	73
	Webpack	Power User Home	uiStartup	1632	1238	2130	227	1798	2032
			load	658	580	980	98	656	974
			domContentLoaded	649	574	973	99	641	969
			domInteractive	35	17	207	35	31	127
			firstPaint	241	89	714	139	252	615
			backgroundConnect	14	7	56	7	17	30
			firstReactRender	83	45	110	15	93	103
			getState	148	72	214	17	156	183
			initialActions	1	0	4	1	1	2
			loadScripts	646	572	964	97	639	960
			setupStore	21	8	70	13	24	50
			numNetworkReqs	159	69	419	76	195	395
Firefox	Browserify	Standard Home	uiStartup	1235	1069	1651	112	1296	1460
			load	1034	912	1255	77	1088	1175
			domContentLoaded	1034	912	1254	77	1088	1175
			domInteractive	60	29	184	32	82	132
			firstPaint	-	-	-	-	-	-
			backgroundConnect	37	19	149	22	37	94
			firstReactRender	21	17	47	5	21	34
			getState	10	6	80	11	9	21
			initialActions	1	0	2	1	1	2
			loadScripts	1013	897	1228	73	1066	1151
			setupStore	11	5	42	7	9	27
			numNetworkReqs	11	5	65	16	6	64
	Browserify	Power User Home	uiStartup	2487	2016	3114	257	2686	2921
			load	1133	941	1604	151	1125	1523
			domContentLoaded	1132	934	1603	151	1124	1523
			domInteractive	122	30	586	113	110	422
			firstPaint	-	-	-	-	-	-
			backgroundConnect	108	28	525	71	120	215
			firstReactRender	86	48	143	22	100	132
			getState	273	34	833	223	408	783
			initialActions	3	1	34	4	2	7
			loadScripts	1093	923	1578	143	1085	1457
			setupStore	151	7	855	201	173	680
			numNetworkReqs	100	63	313	61	80	242
	Webpack	Standard Home	uiStartup	1419	1266	1977	117	1460	1672
			load	1206	1051	1448	92	1266	1390
			domContentLoaded	1206	1050	1447	93	1266	1390
			domInteractive	58	27	232	40	80	132
			firstPaint	-	-	-	-	-	-
			backgroundConnect	38	20	116	17	41	84
			firstReactRender	27	19	117	12	30	38
			getState	11	6	70	10	10	34
			initialActions	1	0	3	1	1	2
			loadScripts	1183	1023	1405	87	1243	1362
			setupStore	11	6	64	9	11	33
			numNetworkReqs	11	5	67	16	6	62
	Webpack	Power User Home	uiStartup	2697	2124	3674	304	2845	3237
			load	1342	1109	1952	170	1353	1744
			domContentLoaded	1341	1109	1952	170	1353	1743
			domInteractive	110	30	526	99	103	363
			firstPaint	-	-	-	-	-	-
			backgroundConnect	95	32	319	43	115	176
			firstReactRender	85	42	149	17	97	112
			getState	268	73	829	215	375	719
			initialActions	3	0	8	2	3	7
			loadScripts	1311	1091	1926	169	1317	1707
			setupStore	119	6	756	162	118	565
			numNetworkReqs	97	53	306	56	79	238

📊 Page Load Benchmark Results

Current Commit: 6a2ab08 | Date: 11/25/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

pageLoadTime-> current mean value: 1.03s (±44ms) 🟡 | historical mean value: 1.03s ⬇️ (historical data)
domContentLoaded-> current mean value: 716ms (±41ms) 🟢 | historical mean value: 718ms ⬇️ (historical data)
firstContentfulPaint-> current mean value: 77ms (±15ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.03s	44ms	1.01s	1.34s	1.05s	1.34s
domContentLoaded	716ms	41ms	697ms	1.00s	728ms	1.00s
firstPaint	77ms	15ms	60ms	212ms	96ms	212ms
firstContentfulPaint	77ms	15ms	60ms	212ms	96ms	212ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

background: 53 Bytes (0%)
ui: 4.65 KiB (0.07%)
common: 20 Bytes (0%)

WIP

39b482c

metamaskbot added the team-onboarding Onboarding team label Nov 24, 2025

Merge branch 'main' into feat/shield-change-payment-crypto-crypto

6a2ab08

github-actions bot added the size-L label Nov 25, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: handle shield change payment method #38165

feat: handle shield change payment method #38165

tuna1207 commented Nov 24, 2025 •

edited

Loading

Uh oh!

metamaskbot commented Nov 24, 2025

Uh oh!

metamaskbot commented Nov 24, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Nov 25, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: handle shield change payment method #38165

Are you sure you want to change the base?

feat: handle shield change payment method #38165

Conversation

tuna1207 commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

metamaskbot commented Nov 24, 2025

✨ Files requiring CODEOWNER review ✨

Uh oh!

metamaskbot commented Nov 24, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

metamaskbot commented Nov 25, 2025

📄 Localhost MetaMask Test Dapp

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tuna1207 commented Nov 24, 2025 •

edited

Loading