chore: Convert NFT views to TS, upgrade deprecated patterns

[gambinish]

Description

This PR updates some of the existing nft views with some updated patterns to bring it up to date with existing Assets components. Changes included:

1. Updating several relevant files to TypeScript
2. Upgrading deprecated components like Menu to updated components like Popover and SelectableListItem.
3. Updating styles to align more closely with design system (h5 titles are no deprecated)

Related issues

Fixes:

Manual testing steps

NFT experience should not regress in any way. Visually there may be some slight differences.

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]

Builds ready [e85c187]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2009 ± 95 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	466	2622	1864	468	225
		domContentLoaded	1637	2536	1982	194	93
		load	1693	2562	2009	198	95
		domInteractive	26	66	38	12	6
		backgroundConnect	8	89	28	21	10
		firstReactRender	16	43	22	7	3
		getState	113	198	140	21	10
		initialActions	0	1	0	0	0
		loadScripts	1243	1886	1514	148	71
		setupStore	7	76	12	15	7
		uiStartup	1997	2880	2349	209	100

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -3.88 KiB (-0.05%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [9f25019]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1878 ± 41 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	294	2077	1806	358	172
		domContentLoaded	1690	2064	1856	94	45
		load	1746	2076	1878	85	41
		domInteractive	23	54	32	8	4
		backgroundConnect	8	68	22	13	6
		firstReactRender	15	81	21	14	7
		getState	108	224	135	28	13
		initialActions	0	0	0	0	0
		loadScripts	1282	1665	1445	90	43
		setupStore	7	73	11	14	7
		uiStartup	1964	2581	2186	148	71

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -3.83 KiB (-0.05%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [f983745]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1697 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1459	2030	1696	162	78
		domContentLoaded	1452	1981	1672	153	73
		load	1470	1988	1697	149	71
		domInteractive	26	148	51	30	14
		backgroundConnect	9	104	20	21	10
		firstReactRender	16	92	43	27	13
		getState	5	69	23	23	11
		initialActions	0	1	0	0	0
		loadScripts	1014	1426	1227	122	58
		setupStore	7	56	15	17	8
		uiStartup	1699	2488	1961	207	100

[metamaskbot]

Builds ready [393e995]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1615 ± 39 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1472	1790	1616	80	39
		domContentLoaded	1450	1775	1599	85	41
		load	1474	1788	1615	82	39
		domInteractive	24	186	48	36	17
		backgroundConnect	7	59	23	15	7
		firstReactRender	16	94	49	30	14
		getState	5	89	22	24	12
		initialActions	0	1	0	0	0
		loadScripts	1047	1356	1199	80	39
		setupStore	6	9	7	1	0
		uiStartup	1670	2285	1900	194	93

[metamaskbot]

Builds ready [51789d6]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1758 ± 114 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	457	2321	1667	347	167
		domContentLoaded	1395	2266	1726	229	110
		load	1414	2347	1758	238	114
		domInteractive	23	130	47	30	14
		backgroundConnect	9	91	35	26	13
		firstReactRender	15	170	69	45	22
		getState	5	96	18	25	12
		initialActions	0	1	0	0	0
		loadScripts	998	1740	1288	196	94
		setupStore	6	87	27	28	14
		uiStartup	1644	3179	2153	409	196

[gambinish]

Closing in favor of this: #29445 which includes the changes from this PR.