fix: update padding for the gas fee pill component #32170

vinistevam · 2025-04-22T13:44:58Z

Description

This PR aims to update the gas fee pill component padding accordingly to the figma.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/4605

Manual testing steps

Need to have more tokens.

Go to this the test dapp
Click on Send EIP 1559 Transaction

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.

github-actions · 2025-04-22T13:45:17Z

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-04-22T13:46:51Z

✨ Files requiring CODEOWNER review ✨

✅ @MetaMask/confirmations

ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
ui/pages/confirmations/components/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap
ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
ui/pages/confirmations/components/confirm/info/set-approval-for-all-info/__snapshots__/set-approval-for-all-info.test.tsx.snap
ui/pages/confirmations/components/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap
ui/pages/confirmations/components/confirm/info/shared/gas-fees-section/__snapshots__/gas-fees-section.test.tsx.snap
ui/pages/confirmations/components/confirm/info/shared/selected-gas-fee-token/selected-gas-fee-token.tsx
ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/token-transfer.test.tsx.snap

metamaskbot · 2025-04-22T14:23:50Z

Builds ready [d27b737]

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 (1218 ± 57 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1218	1094	1368	57	1254	1325
			load	1053	952	1193	56	1088	1156
			domContentLoaded	1047	947	1188	55	1080	1148
			domInteractive	18	13	66	8	16	29
			firstPaint	730	85	1200	419	1076	1133
			backgroundConnect	7	4	25	3	8	10
			firstReactRender	21	15	43	5	21	34
			getState	13	5	34	7	19	26
			initialActions	0	0	1	0	0	0
			loadScripts	810	713	946	54	846	913
			setupStore	7	4	12	2	8	11
	Webpack	Home	uiStartup	2073	1709	2533	171	2185	2323
			load	1602	1324	1961	131	1712	1796
			domContentLoaded	1596	1321	1934	130	1707	1789
			domInteractive	16	11	63	10	13	45
			firstPaint	202	70	1546	152	240	326
			backgroundConnect	23	12	68	12	24	54
			firstReactRender	201	54	398	123	323	368
			getState	12	3	192	19	13	26
			initialActions	3	1	6	1	3	5
			loadScripts	1591	1319	1910	129	1705	1786
			setupStore	23	6	290	43	19	32
Firefox	Browserify	Home	uiStartup	1367	1158	1651	109	1448	1570
			load	1213	1022	1514	107	1287	1425
			domContentLoaded	1212	1022	1514	107	1286	1425
			domInteractive	107	37	272	37	121	187
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	79	9	21	42
			firstReactRender	23	19	48	4	23	28
			getState	9	4	202	20	8	11
			initialActions	0	0	1	0	0	1
			loadScripts	1193	1009	1498	107	1265	1404
			setupStore	7	4	35	4	6	12
	Webpack	Home	uiStartup	1526	1343	1978	122	1600	1752
			load	1299	1149	1702	100	1355	1483
			domContentLoaded	1299	1149	1702	100	1355	1482
			domInteractive	82	41	142	21	98	130
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	14	106	12	23	42
			firstReactRender	35	29	63	5	38	43
			getState	14	4	276	37	9	23
			initialActions	0	0	2	1	1	1
			loadScripts	1278	1128	1685	100	1333	1459
			setupStore	9	5	63	7	8	20

Benchmark value 203 exceeds gate value 199 for chrome webpack home mean firstPaint
Sum of mean exceeds: 4ms | Sum of p95 exceeds: 0ms
Sum of all benchmark exceeds: 4ms

Bundle size diffs

background: 0 Bytes (0%)
ui: 2.24 KiB (0.03%)
common: 0 Bytes (0%)

metamaskbot · 2025-04-23T14:16:29Z

Builds ready [0950967]

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 (1216 ± 59 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1216	1098	1392	59	1251	1344
			load	1047	912	1223	57	1072	1166
			domContentLoaded	1041	906	1216	57	1068	1161
			domInteractive	17	14	61	7	17	29
			firstPaint	645	89	1203	422	1056	1128
			backgroundConnect	7	4	17	2	8	10
			firstReactRender	21	16	82	8	21	35
			getState	13	5	42	8	19	29
			initialActions	0	0	1	0	0	1
			loadScripts	802	668	979	56	832	928
			setupStore	8	5	23	3	8	12
	Webpack	Home	uiStartup	2104	1709	2654	187	2232	2392
			load	1621	1293	2044	146	1732	1837
			domContentLoaded	1614	1287	2037	145	1725	1833
			domInteractive	15	11	54	8	13	39
			firstPaint	179	64	351	61	225	290
			backgroundConnect	28	9	290	32	26	58
			firstReactRender	196	56	377	118	314	360
			getState	14	3	227	23	14	28
			initialActions	3	1	7	1	3	5
			loadScripts	1609	1285	2014	144	1723	1821
			setupStore	19	7	282	27	19	34
Firefox	Browserify	Home	uiStartup	1348	1180	1731	104	1402	1528
			load	1200	1038	1595	108	1268	1397
			domContentLoaded	1200	1038	1595	108	1268	1397
			domInteractive	103	36	238	33	117	171
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	13	93	11	20	29
			firstReactRender	22	19	55	5	22	27
			getState	7	4	26	3	8	13
			initialActions	0	0	1	0	0	1
			loadScripts	1181	1019	1536	106	1246	1381
			setupStore	8	4	169	17	6	21
	Webpack	Home	uiStartup	1583	1407	2107	141	1639	1874
			load	1349	1193	1851	132	1408	1673
			domContentLoaded	1349	1192	1850	132	1407	1673
			domInteractive	89	34	165	30	109	152
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	26	15	101	14	25	60
			firstReactRender	37	31	58	5	39	48
			getState	9	4	32	5	9	15
			initialActions	1	0	2	1	1	1
			loadScripts	1325	1180	1832	127	1385	1577
			setupStore	10	5	48	7	9	30

cc: @HowardBraham
Benchmark value 27 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 1673 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1673 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 60 exceeds gate value 49 for firefox webpack home p95 backgroundConnect
Benchmark value 30 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 1ms | Sum of p95 exceeds: 39ms
Sum of all benchmark exceeds: 40ms

Bundle size diffs

background: 0 Bytes (0%)
ui: 28 Bytes (0%)
common: 0 Bytes (0%)

metamaskbot · 2025-04-24T05:22:33Z

Builds ready [d64b46b]

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 (1204 ± 69 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1204	1086	1474	69	1236	1325
			load	1044	936	1313	65	1077	1194
			domContentLoaded	1038	931	1308	64	1067	1190
			domInteractive	16	13	49	5	16	29
			firstPaint	658	72	1315	426	1047	1124
			backgroundConnect	7	4	18	2	7	9
			firstReactRender	22	16	48	7	23	40
			getState	14	5	39	8	19	27
			initialActions	0	0	1	0	0	1
			loadScripts	804	710	1066	61	833	949
			setupStore	8	5	22	3	8	14
	Webpack	Home	uiStartup	2156	1756	2580	166	2257	2393
			load	1672	1337	2034	136	1787	1879
			domContentLoaded	1665	1329	1999	134	1780	1874
			domInteractive	15	12	46	8	13	42
			firstPaint	180	73	364	56	212	293
			backgroundConnect	33	9	381	51	29	62
			firstReactRender	222	57	399	122	338	360
			getState	12	4	46	7	15	26
			initialActions	3	1	6	1	4	5
			loadScripts	1660	1326	1975	133	1777	1873
			setupStore	18	6	177	18	20	36
Firefox	Browserify	Home	uiStartup	1360	1160	1672	102	1421	1550
			load	1211	1038	1492	108	1281	1427
			domContentLoaded	1211	1038	1492	108	1280	1426
			domInteractive	108	36	227	34	122	178
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	13	115	14	22	36
			firstReactRender	24	19	56	7	24	50
			getState	7	4	49	5	8	9
			initialActions	0	0	1	0	0	1
			loadScripts	1191	1026	1472	108	1260	1414
			setupStore	8	3	171	17	6	20
	Webpack	Home	uiStartup	1574	1360	2148	138	1660	1846
			load	1344	1161	1809	116	1405	1576
			domContentLoaded	1343	1160	1809	116	1404	1576
			domInteractive	85	38	250	28	90	135
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	15	78	8	23	42
			firstReactRender	37	30	58	5	38	49
			getState	9	4	46	6	9	22
			initialActions	1	0	2	1	1	1
			loadScripts	1324	1147	1794	116	1371	1558
			setupStore	9	6	53	7	9	12

Benchmark value 1194 exceeds gate value 1190 for chrome browserify home p95 load
Benchmark value 1191 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded
Benchmark value 950 exceeds gate value 940 for chrome browserify home p95 loadScripts
Sum of mean exceeds: 0ms | Sum of p95 exceeds: 25ms
Sum of all benchmark exceeds: 25ms

Bundle size diffs

background: 0 Bytes (0%)
ui: 28 Bytes (0%)
common: 0 Bytes (0%)

fix: update padding gas fee pill

d27b737

vinistevam added the team-confirmations Push issues to confirmations team label Apr 22, 2025

vinistevam marked this pull request as ready for review April 22, 2025 13:56

vinistevam requested a review from a team as a code owner April 22, 2025 13:56

jpuri approved these changes Apr 22, 2025

View reviewed changes

digiwand approved these changes Apr 22, 2025

View reviewed changes

vinistevam added 2 commits April 23, 2025 08:15

Merge branch 'main' into fix/update-padding-gas-fee-pill

98d9a5a

Merge branch 'main' into fix/update-padding-gas-fee-pill

0950967

vinistevam enabled auto-merge April 23, 2025 14:10

vinistevam added this pull request to the merge queue Apr 23, 2025

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

Merge branch 'main' into fix/update-padding-gas-fee-pill

d64b46b

vinistevam added this pull request to the merge queue Apr 24, 2025

Merged via the queue into main with commit 5514da9 Apr 24, 2025
169 checks passed

vinistevam deleted the fix/update-padding-gas-fee-pill branch April 24, 2025 06:00

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update padding for the gas fee pill component #32170

fix: update padding for the gas fee pill component #32170

vinistevam commented Apr 22, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Apr 22, 2025

metamaskbot commented Apr 22, 2025

metamaskbot commented Apr 22, 2025

metamaskbot commented Apr 23, 2025

metamaskbot commented Apr 24, 2025

fix: update padding for the gas fee pill component #32170

fix: update padding for the gas fee pill component #32170

Conversation

vinistevam commented Apr 22, 2025 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Apr 22, 2025

metamaskbot commented Apr 22, 2025

✨ Files requiring CODEOWNER review ✨

metamaskbot commented Apr 22, 2025

metamaskbot commented Apr 23, 2025

metamaskbot commented Apr 24, 2025

vinistevam commented Apr 22, 2025 •

edited by github-actions bot

Loading