fix: Fix send flow design defects

[OGPoyraz]

Description

This PR aims to address multiple design defects in send flow.

• Fix header to be sticky in send flow
• Fix long contact names to not scroll
• Remove the space between currency symbol and value in send flow
• Show all native asset in send flow regardless of the user balance

Changelog

CHANGELOG entry: Fix design defects and show all native assets regardless of balance in send flow

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6057
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6059
Fixes: #36195
Fixes: #36201
Fixes: #37609

Manual testing steps

See individual tasks

Screenshots/Recordings

Before

After

Sticky header

Long account / contact name

Removed space from fiat

Include all native assets regardless of the balance

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.

---

Note

Makes the send header sticky, truncates long recipient names, removes the space between currency symbol and amount, and shows native assets even with zero balance.

• Send layout/UX:
  • Add sticky header (.redesigned__send__sticky-header) and scrollable content wrapper (.redesigned__send__content-wrapper).
  • Ensure pages fill height (style: height: '100%') in amount-recipient.tsx and asset.tsx.
• Recipient list:
  • Add send-recipient__content with flex/min-width and apply ellipsis to name to prevent overflow.
• Currency display:
  • Remove space between currency symbol and amount in useCurrencyConversions and update test expectations.
• Asset selection:
  • Show native assets regardless of balance in useSendTokens.

^{Written by Cursor Bugbot for commit 3a317a0. This will update automatically on new commits. Configure here.}

[metamaskbot]

✨ Files requiring CODEOWNER review ✨

✅ @MetaMask/confirmations (9 files, +30 -10)

• 📁 ui/
  • 📁 pages/
    • 📁 confirmations/
      • 📁 components/
        • 📁 UI/
          • 📁 recipient/
            • 📄 index.scss +5 -0
            • 📄 recipient.tsx +4 -2
        • 📁 send/
          • 📁 amount-recipient/
            • 📄 amount-recipient.tsx +1 -1
          • 📁 asset/
            • 📄 asset.tsx +1 -1
            • 📄 index.scss +11 -0
      • 📁 hooks/
        • 📁 send/
          • 📄 useCurrencyConversions.test.ts +1 -1
          • 📄 useCurrencyConversions.ts +2 -2
          • 📄 useSendTokens.ts +1 -1
      • 📁 send/
        • 📄 send-inner.tsx +4 -2

[metamaskbot]

Builds ready [6e82ef9]

• 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
  • 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 (1256 ± 103 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	1256	1090	1623	103	1318	1448
			load	1079	941	1431	94	1144	1240
			domContentLoaded	1072	938	1421	93	1137	1235
			domInteractive	22	14	97	15	20	58
			firstPaint	690	75	1457	443	1092	1233
			backgroundConnect	233	220	274	9	237	248
			firstReactRender	24	18	52	5	26	33
			getState	23	8	89	13	27	46
			initialActions	0	0	1	0	0	1
			loadScripts	845	716	1189	92	916	999
			setupStore	11	6	33	4	11	19
			numNetworkReqs	13	6	77	20	6	72
	Browserify	Power User Home	uiStartup	1908	1720	2407	214	2116	2407
			load	1036	906	1387	182	1281	1387
			domContentLoaded	1027	902	1380	176	1270	1380
			domInteractive	28	16	80	19	51	80
			firstPaint	563	80	1375	426	950	1375
			backgroundConnect	234	220	275	14	241	275
			firstReactRender	27	24	33	2	28	33
			getState	179	158	240	20	183	240
			initialActions	0	0	1	0	1	1
			loadScripts	800	687	1151	169	1040	1151
			setupStore	16	9	56	13	15	56
			numNetworkReqs	121	73	264	63	167	264
	Webpack	Standard Home	uiStartup	820	691	1174	70	846	944
			load	600	549	950	61	601	732
			domContentLoaded	593	544	927	58	597	715
			domInteractive	16	11	69	10	14	38
			firstPaint	195	58	933	183	198	578
			backgroundConnect	23	11	66	12	27	53
			firstReactRender	29	18	136	13	33	37
			getState	11	6	29	3	12	15
			initialActions	0	0	1	0	0	1
			loadScripts	590	542	917	56	594	705
			setupStore	11	6	35	4	13	19
			numNetworkReqs	13	6	75	19	8	70
	Webpack	Power User Home	uiStartup	1243	1137	1670	121	1268	1670
			load	656	570	854	113	839	854
			domContentLoaded	638	559	825	104	791	825
			domInteractive	27	13	97	26	47	97
			firstPaint	397	76	860	273	579	860
			backgroundConnect	58	16	273	61	53	273
			firstReactRender	26	23	29	1	27	29
			getState	138	91	166	22	150	166
			initialActions	0	0	1	0	1	1
			loadScripts	634	557	815	100	779	815
			setupStore	10	6	38	7	11	38
			numNetworkReqs	138	70	283	63	177	283
Firefox	Browserify	Standard Home	uiStartup	1437	1281	1960	107	1494	1650
			load	1221	1100	1444	82	1288	1372
			domContentLoaded	1221	1100	1444	82	1288	1372
			domInteractive	110	34	298	43	115	201
			firstPaint	-	-	-	-	-	-
			backgroundConnect	40	26	111	15	45	69
			firstReactRender	25	21	64	5	26	31
			getState	8	3	60	7	6	17
			initialActions	0	0	1	0	0	1
			loadScripts	1196	1081	1426	80	1261	1338
			setupStore	14	7	240	23	12	27
			numNetworkReqs	12	6	62	15	7	58
	Browserify	Power User Home	uiStartup	2329	2041	2606	174	2474	2606
			load	1343	1127	1717	201	1649	1717
			domContentLoaded	1343	1127	1716	201	1649	1716
			domInteractive	215	89	588	184	497	588
			firstPaint	-	-	-	-	-	-
			backgroundConnect	106	30	232	62	164	232
			firstReactRender	42	31	67	11	52	67
			getState	105	75	138	18	121	138
			initialActions	1	0	1	1	1	1
			loadScripts	1301	1106	1646	197	1590	1646
			setupStore	33	6	127	36	69	127
			numNetworkReqs	133	72	208	57	199	208
	Webpack	Standard Home	uiStartup	1699	1493	2569	176	1726	2119
			load	1441	1272	1968	124	1483	1719
			domContentLoaded	1441	1271	1967	124	1483	1718
			domInteractive	107	37	375	49	117	204
			firstPaint	-	-	-	-	-	-
			backgroundConnect	51	28	316	34	56	102
			firstReactRender	33	24	92	13	35	74
			getState	9	4	69	11	8	39
			initialActions	0	0	1	0	0	1
			loadScripts	1410	1251	1839	115	1460	1648
			setupStore	18	8	210	24	14	45
			numNetworkReqs	13	6	70	17	7	64
	Webpack	Power User Home	uiStartup	2397	2059	2879	248	2672	2879
			load	1474	1206	1942	183	1576	1942
			domContentLoaded	1474	1206	1942	184	1576	1942
			domInteractive	153	35	541	134	263	541
			firstPaint	-	-	-	-	-	-
			backgroundConnect	78	26	161	42	120	161
			firstReactRender	43	27	66	11	47	66
			getState	103	79	192	28	106	192
			initialActions	3	0	31	7	2	31
			loadScripts	1440	1187	1857	172	1509	1857
			setupStore	38	6	173	46	75	173
			numNetworkReqs	159	58	313	87	253	313

📊 Page Load Benchmark Results

Current Commit: 6e82ef9 | Date: 11/7/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

• pageLoadTime-> current mean value: 1.04s (±40ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
• domContentLoaded-> current mean value: 726ms (±38ms) 🟢 | historical mean value: 716ms ⬆️ (historical data)
• firstContentfulPaint-> current mean value: 78ms (±12ms) 🟢 | historical mean value: 76ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.04s	40ms	1.02s	1.35s	1.07s	1.35s
domContentLoaded	726ms	38ms	705ms	1.02s	751ms	1.02s
firstPaint	78ms	12ms	60ms	184ms	88ms	184ms
firstContentfulPaint	78ms	12ms	60ms	184ms	88ms	184ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

• background: 58 Bytes (0%)
• ui: 258 Bytes (0%)
• common: 20 Bytes (0%)

[metamaskbot]

Builds ready [3a317a0]

• 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
  • 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 (1227 ± 86 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	1227	1090	1481	86	1290	1410
			load	1051	937	1309	80	1103	1202
			domContentLoaded	1045	934	1301	79	1097	1185
			domInteractive	22	14	95	14	20	62
			firstPaint	673	78	1310	415	1049	1205
			backgroundConnect	234	220	269	9	238	250
			firstReactRender	25	18	67	6	26	35
			getState	20	7	60	9	22	35
			initialActions	0	0	1	0	0	1
			loadScripts	817	713	1076	78	867	956
			setupStore	10	5	24	3	11	20
			numNetworkReqs	13	6	76	20	6	74
	Browserify	Power User Home	uiStartup	1983	1760	3107	357	2167	3107
			load	1056	911	1611	211	1253	1611
			domContentLoaded	1048	904	1606	210	1248	1606
			domInteractive	30	16	71	18	52	71
			firstPaint	682	159	1610	486	960	1610
			backgroundConnect	238	220	300	18	239	300
			firstReactRender	28	26	30	1	29	30
			getState	174	160	196	13	189	196
			initialActions	0	0	1	0	1	1
			loadScripts	820	683	1330	200	1017	1330
			setupStore	12	10	30	5	12	30
			numNetworkReqs	121	75	248	73	246	248
	Webpack	Standard Home	uiStartup	864	702	1160	81	884	1081
			load	625	560	922	70	622	853
			domContentLoaded	618	554	906	67	617	838
			domInteractive	17	12	65	10	15	41
			firstPaint	215	66	910	194	208	722
			backgroundConnect	27	12	73	14	30	62
			firstReactRender	31	18	77	10	36	48
			getState	11	6	33	4	13	18
			initialActions	0	0	1	0	0	1
			loadScripts	614	552	896	65	614	827
			setupStore	12	7	35	4	14	18
			numNetworkReqs	13	6	75	19	8	68
	Webpack	Power User Home	uiStartup	1208	1071	1660	186	1276	1660
			load	606	522	861	101	663	861
			domContentLoaded	587	513	820	92	624	820
			domInteractive	21	12	51	13	37	51
			firstPaint	337	76	866	258	604	866
			backgroundConnect	62	17	203	65	143	203
			firstReactRender	25	23	28	1	26	28
			getState	126	81	143	19	137	143
			initialActions	0	0	1	0	1	1
			loadScripts	583	511	813	90	617	813
			setupStore	11	5	27	8	19	27
			numNetworkReqs	110	68	228	47	152	228
Firefox	Browserify	Standard Home	uiStartup	1474	1287	2069	128	1513	1735
			load	1247	1116	1532	88	1289	1432
			domContentLoaded	1247	1116	1531	88	1289	1432
			domInteractive	115	36	342	52	119	231
			firstPaint	-	-	-	-	-	-
			backgroundConnect	45	26	120	19	51	87
			firstReactRender	26	22	47	5	27	43
			getState	8	4	47	6	7	19
			initialActions	0	0	2	0	0	1
			loadScripts	1220	1097	1519	85	1270	1380
			setupStore	17	7	235	29	13	32
			numNetworkReqs	12	6	66	16	7	60
	Browserify	Power User Home	uiStartup	2365	2145	2687	154	2486	2687
			load	1361	1114	1696	153	1500	1696
			domContentLoaded	1361	1113	1695	153	1500	1695
			domInteractive	197	79	598	167	236	598
			firstPaint	-	-	-	-	-	-
			backgroundConnect	101	24	281	80	166	281
			firstReactRender	44	32	82	15	47	82
			getState	113	73	160	29	153	160
			initialActions	1	0	2	1	1	2
			loadScripts	1327	1093	1642	144	1426	1642
			setupStore	22	5	80	22	42	80
			numNetworkReqs	133	71	223	60	191	223
	Webpack	Standard Home	uiStartup	1650	1444	2244	154	1675	2035
			load	1398	1256	1712	101	1431	1643
			domContentLoaded	1398	1256	1712	101	1431	1642
			domInteractive	101	31	375	49	113	160
			firstPaint	-	-	-	-	-	-
			backgroundConnect	52	27	170	24	57	100
			firstReactRender	32	22	87	13	31	74
			getState	9	4	95	11	8	16
			initialActions	0	0	6	1	0	1
			loadScripts	1366	1232	1680	95	1398	1578
			setupStore	17	8	221	24	14	59
			numNetworkReqs	13	6	67	17	7	64
	Webpack	Power User Home	uiStartup	2517	2160	3247	313	2723	3247
			load	1531	1220	1874	193	1671	1874
			domContentLoaded	1530	1220	1874	193	1670	1874
			domInteractive	176	42	673	172	316	673
			firstPaint	-	-	-	-	-	-
			backgroundConnect	67	34	176	36	86	176
			firstReactRender	41	31	56	6	45	56
			getState	135	88	214	39	177	214
			initialActions	1	0	5	2	1	5
			loadScripts	1503	1201	1832	190	1643	1832
			setupStore	29	5	131	32	41	131
			numNetworkReqs	133	68	283	76	242	283

📊 Page Load Benchmark Results

Current Commit: 3a317a0 | Date: 11/7/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

• pageLoadTime-> current mean value: 1.05s (±48ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
• domContentLoaded-> current mean value: 734ms (±45ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
• firstContentfulPaint-> current mean value: 80ms (±12ms) 🟢 | historical mean value: 76ms ⬆️ (historical data)

📈 Detailed Results

Metric	Mean	Std Dev	Min	Max	P95	P99
pageLoadTime	1.05s	48ms	1.02s	1.45s	1.09s	1.45s
domContentLoaded	734ms	45ms	703ms	1.11s	772ms	1.11s
firstPaint	80ms	12ms	64ms	184ms	92ms	184ms
firstContentfulPaint	80ms	12ms	64ms	184ms	92ms	184ms
largestContentfulPaint	0ms	0ms	0ms	0ms	0ms	0ms

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

• background: 58 Bytes (0%)
• ui: 258 Bytes (0%)
• common: 20 Bytes (0%)