feat: base account details

[hmalik88]

Description

Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:

1. What is the reason for the change?
2. What is the improvement/solution?

Related issues

Fixes:

Manual testing steps

1. 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.

[github-actions]

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]

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (5 files, +231 -0)

• 📁 ui/
  • 📁 components/
    • 📁 multichain-accounts/
      • 📁 account-details-row/
        • 📄 account-details-row.tsx +35 -0
        • 📄 index.ts +1 -0
      • 📁 base-account-details/
        • 📄 base-account-details.tsx +134 -0
      • 📁 edit-account-name-modal/
        • 📄 edit-account-name-modal.tsx +60 -0
        • 📄 index.ts +1 -0

[metamaskbot]

Builds ready [04332d3]

• 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1230 ± 67 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1230	1103	1371	67	1280	1345
			load	1064	942	1220	68	1110	1175
			domContentLoaded	1057	937	1214	68	1104	1169
			domInteractive	16	13	33	4	16	30
			firstPaint	763	130	1221	422	1094	1172
			backgroundConnect	9	4	33	6	8	26
			firstReactRender	20	16	42	3	20	25
			getState	14	6	31	7	19	28
			initialActions	0	0	1	0	0	1
			loadScripts	816	700	971	68	863	929
			setupStore	7	5	15	2	8	10
	Webpack	Home	uiStartup	2226	1809	2702	210	2360	2588
			load	1728	1404	2101	160	1843	1987
			domContentLoaded	1720	1400	2087	156	1836	1972
			domInteractive	16	12	72	10	13	43
			firstPaint	171	66	329	61	203	298
			backgroundConnect	26	10	163	17	30	50
			firstReactRender	174	44	378	117	307	357
			getState	16	5	349	34	16	30
			initialActions	6	1	241	24	4	6
			loadScripts	1716	1398	2075	155	1832	1961
			setupStore	37	7	317	71	23	277
Firefox	Browserify	Home	uiStartup	1334	1153	1757	117	1400	1570
			load	1185	1022	1595	116	1252	1432
			domContentLoaded	1185	1022	1595	116	1251	1432
			domInteractive	103	32	274	36	117	168
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	13	72	8	20	40
			firstReactRender	24	20	58	6	24	28
			getState	7	4	38	3	8	10
			initialActions	0	0	2	0	0	1
			loadScripts	1167	1009	1580	116	1238	1411
			setupStore	7	4	79	9	6	13
	Webpack	Home	uiStartup	1533	1346	1985	124	1613	1749
			load	1328	1165	1615	112	1421	1532
			domContentLoaded	1328	1164	1615	112	1420	1532
			domInteractive	79	49	138	18	87	123
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	21	15	76	8	21	30
			firstReactRender	40	28	51	4	43	47
			getState	10	4	173	17	9	20
			initialActions	0	0	1	0	1	1
			loadScripts	1309	1149	1597	112	1405	1510
			setupStore	10	5	259	25	8	15

Benchmark value 27 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 2226 exceeds gate value 2192 for chrome webpack home mean uiStartup
Benchmark value 1728 exceeds gate value 1711 for chrome webpack home mean load
Benchmark value 1720 exceeds gate value 1704 for chrome webpack home mean domContentLoaded
Benchmark value 1716 exceeds gate value 1699 for chrome webpack home mean loadScripts
Benchmark value 38 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2588 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 277 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Sum of mean exceeds: 93ms | Sum of p95 exceeds: 355ms
Sum of all benchmark exceeds: 448ms

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

• background: 4.12 KiB (0.08%)
• ui: 6.58 KiB (0.09%)
• common: 46.58 KiB (0.57%)

[metamaskbot]

Builds ready [4d9f80d]

• builds: chrome, firefox
• builds (beta): 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 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1225 ± 61 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1225	1112	1413	61	1263	1341
			load	1057	944	1249	60	1092	1168
			domContentLoaded	1050	936	1240	60	1088	1161
			domInteractive	16	13	36	4	16	27
			firstPaint	738	165	1249	411	1081	1150
			backgroundConnect	8	4	36	5	8	22
			firstReactRender	20	16	44	5	20	29
			getState	14	6	48	8	20	30
			initialActions	0	0	1	0	0	1
			loadScripts	809	707	997	60	849	921
			setupStore	8	5	17	2	8	11
	Webpack	Home	uiStartup	2076	1701	2544	204	2237	2429
			load	1611	1331	1969	148	1716	1847
			domContentLoaded	1605	1327	1960	147	1710	1836
			domInteractive	15	11	60	9	13	42
			firstPaint	184	65	1713	170	207	291
			backgroundConnect	22	9	53	7	25	35
			firstReactRender	130	43	370	99	141	341
			getState	14	4	305	30	13	24
			initialActions	3	1	8	1	3	5
			loadScripts	1601	1326	1949	145	1707	1826
			setupStore	42	7	310	82	19	301
Firefox	Browserify	Home	uiStartup	1348	1174	1845	124	1393	1608
			load	1194	992	1533	108	1254	1437
			domContentLoaded	1194	992	1532	108	1253	1436
			domInteractive	94	41	172	22	105	128
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	13	302	29	21	26
			firstReactRender	25	20	59	9	24	53
			getState	9	4	168	17	8	15
			initialActions	0	0	1	0	0	1
			loadScripts	1174	978	1511	107	1234	1415
			setupStore	6	4	38	5	6	10
	Webpack	Home	uiStartup	1658	1432	2192	178	1768	2045
			load	1414	1220	1890	156	1480	1739
			domContentLoaded	1414	1219	1890	156	1479	1738
			domInteractive	79	37	175	20	86	125
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	28	17	262	25	27	50
			firstReactRender	46	33	58	4	49	53
			getState	18	5	243	33	14	34
			initialActions	1	0	2	1	1	1
			loadScripts	1389	1202	1872	151	1459	1717
			setupStore	14	6	237	31	10	29

Benchmark value 22 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 43 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 301 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 1659 exceeds gate value 1615 for firefox webpack home mean uiStartup
Benchmark value 1415 exceeds gate value 1380 for firefox webpack home mean load
Benchmark value 1414 exceeds gate value 1380 for firefox webpack home mean domContentLoaded
Benchmark value 29 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 46 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 19 exceeds gate value 15 for firefox webpack home mean getState
Benchmark value 1390 exceeds gate value 1360 for firefox webpack home mean loadScripts
Benchmark value 14 exceeds gate value 13 for firefox webpack home mean setupStore
Benchmark value 2045 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1739 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1738 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 50 exceeds gate value 49 for firefox webpack home p95 backgroundConnect
Benchmark value 53 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 34 exceeds gate value 32 for firefox webpack home p95 getState
Benchmark value 1717 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Benchmark value 29 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 170ms | Sum of p95 exceeds: 601ms
Sum of all benchmark exceeds: 771ms

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

• background: 0 Bytes (0%)
• ui: 0 Bytes (0%)
• common: 139 Bytes (0%)

[metamaskbot]

Builds ready [e33a8b4]

• builds: chrome, firefox
• builds (beta): 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 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
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1185 ± 72 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1185	1072	1419	72	1237	1333
			load	1028	914	1241	68	1078	1163
			domContentLoaded	1021	909	1233	68	1073	1156
			domInteractive	16	13	96	9	15	29
			firstPaint	709	157	1174	399	1038	1138
			backgroundConnect	8	4	36	5	8	21
			firstReactRender	20	16	41	5	20	33
			getState	14	6	44	8	20	26
			initialActions	0	0	2	0	0	1
			loadScripts	784	681	973	67	835	926
			setupStore	8	4	24	3	8	14
	Webpack	Home	uiStartup	2103	1663	2545	221	2248	2483
			load	1620	1225	1955	168	1737	1871
			domContentLoaded	1613	1217	1946	167	1730	1855
			domInteractive	15	11	60	10	13	42
			firstPaint	167	65	302	56	204	279
			backgroundConnect	29	10	420	52	25	40
			firstReactRender	141	43	354	106	258	337
			getState	16	4	304	34	14	28
			initialActions	3	1	5	1	3	5
			loadScripts	1610	1213	1936	165	1726	1844
			setupStore	45	7	310	83	20	300
Firefox	Browserify	Home	uiStartup	1333	1160	1873	115	1372	1559
			load	1185	1011	1739	118	1239	1424
			domContentLoaded	1185	1011	1738	118	1238	1424
			domInteractive	97	38	178	26	110	149
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	22	12	105	13	21	52
			firstReactRender	23	20	57	6	23	28
			getState	7	4	35	3	8	10
			initialActions	0	0	2	0	0	1
			loadScripts	1166	993	1720	117	1222	1404
			setupStore	7	4	72	7	6	11
	Webpack	Home	uiStartup	1555	1360	2127	166	1653	1959
			load	1347	1179	1874	147	1423	1715
			domContentLoaded	1347	1179	1873	147	1423	1715
			domInteractive	80	41	279	32	85	119
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	24	15	214	20	24	41
			firstReactRender	41	27	54	4	43	49
			getState	11	5	225	22	9	24
			initialActions	0	0	2	1	1	1
			loadScripts	1326	1164	1852	144	1405	1696
			setupStore	8	4	55	5	8	10

Benchmark value 22 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 45 exceeds gate value 32 for chrome webpack home mean setupStore
Benchmark value 2484 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 300 exceeds gate value 65 for chrome webpack home p95 setupStore
Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 1959 exceeds gate value 1935 for firefox webpack home p95 uiStartup
Benchmark value 1715 exceeds gate value 1660 for firefox webpack home p95 load
Benchmark value 1715 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded
Benchmark value 1696 exceeds gate value 1630 for firefox webpack home p95 loadScripts
Sum of mean exceeds: 16ms | Sum of p95 exceeds: 469ms
Sum of all benchmark exceeds: 485ms

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

• background: 0 Bytes (0%)
• ui: 0 Bytes (0%)
• common: 264 Bytes (0%)