refactor: NFT Grid View

[gambinish]

Description

Refactors the NFT experience into a grid view. This changes the way that we are logically considering NFTs in that they are no longer sublisted by category, but are rather displayed in a flat grid.

They should however, still be sorted by default by the NFT collection, meaning that NFTs from the same collection should appear next to eachother in the grid. More sorts and filters will be added incrementally.

Also extends an initial privacy mode implementation onto NFT grid, to quickly show/hide NFTs.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MMASSETS-247

Manual testing steps

1. Ensure that NFTs render in a grid, and are responsive to different screen sizes.
2. Ensure that grid looks good on extension view. When viewing and sending NFT
3. Ensure that NFT detail view looks on par with existing implementation
4. Display NFT Media and IPFS gateway settings should remain unchanged, and should behave nicely with privacy mode.

Screenshots/Recordings

Before

After

nft-grid.mov

Screen.Recording.2025-01-10.at.7.37.02.AM.mov

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.

[Prithpal-Sooriya]

Mostly nits - first pass seems good!

[metamaskbot]

Builds ready [dd50a1b]

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

Page Load Metrics (1697 ± 76 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	347	2193	1617	323	155
		domContentLoaded	1507	2182	1680	159	76
		load	1517	2196	1697	157	76
		domInteractive	24	142	42	27	13
		backgroundConnect	9	71	23	17	8
		firstReactRender	16	85	40	26	12
		getState	5	50	9	9	5
		initialActions	0	1	0	0	0
		loadScripts	1080	1595	1229	130	63
		setupStore	6	52	11	10	5
		uiStartup	1673	2489	1917	172	83

Bundle size diffs [🚀 Bundle size reduced!]

• background: 43 Bytes (0.00%)
• ui: -6.91 KiB (-0.09%)
• common: -4.81 KiB (-0.06%)

[metamaskbot]

Builds ready [1f840e7]

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

Page Load Metrics (1684 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1528	2014	1690	125	60
		domContentLoaded	1511	1979	1652	121	58
		load	1524	2010	1684	126	61
		domInteractive	22	81	38	19	9
		backgroundConnect	10	65	32	20	10
		firstReactRender	17	83	42	27	13
		getState	4	51	14	12	6
		initialActions	0	1	0	0	0
		loadScripts	1111	1494	1239	99	47
		setupStore	6	61	13	15	7
		uiStartup	1718	2297	1913	135	65

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -7.11 KiB (-0.09%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [097a251]

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

Page Load Metrics (1596 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1441	1903	1600	127	61
		domContentLoaded	1434	1891	1581	125	60
		load	1438	1907	1596	127	61
		domInteractive	22	77	35	16	8
		backgroundConnect	8	33	15	8	4
		firstReactRender	15	95	44	27	13
		getState	4	46	14	15	7
		initialActions	0	1	0	0	0
		loadScripts	1025	1450	1165	111	53
		setupStore	6	58	15	18	8
		uiStartup	1692	2248	1861	160	77

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

• background: 0 Bytes (0.00%)
• ui: -6.94 KiB (-0.09%)
• common: 81 Bytes (0.00%)