fix: cp-12.13.0 handle array image edge cases

[Prithpal-Sooriya]

Description

Ensures that we handle array images correctly be defaulting to their first image

Related issues

Fixes: https://consensys.slack.com/archives/C8RSKCNCD/p1739984618053419

Manual testing steps

1. Use Flask Build > Enable Watched Accounts
2. Add watched address that owns this NFT: https://polygonscan.com/token/0x4b22c268e3f7f643686e0dfb160b40fe5328cccd?a=0x397d7171504776AD3d5f578ce772914539E28a49 (contract: 0x4b22C268E3f7f643686E0dfB160B40fE5328cccD, TokenID: 6822)
3. Select this watched address and navigate to NFT page.
4. Expect NFT to render - (expected image: ipfs://bafybeidgklvljyifilhtrxzh77brgnhcy6s2wxoxqc2l73zr2nxlwuxfcy)

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.

[gambinish]

Approving with a small comment

[metamaskbot]

Builds ready [e66903b]

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

Page Load Metrics (1782 ± 111 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	533	1977	1670	290	139
		domContentLoaded	1527	2558	1746	228	109
		load	1559	2626	1782	231	111
		domInteractive	25	89	44	19	9
		backgroundConnect	13	120	45	25	12
		firstReactRender	14	78	37	23	11
		getState	6	110	26	29	14
		initialActions	0	1	0	0	0
		loadScripts	1080	2006	1305	200	96
		setupStore	6	62	18	18	8
		uiStartup	1696	3610	2056	382	183

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 762 Bytes (0.01%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [9433a94]

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

Page Load Metrics (1716 ± 85 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	376	2073	1655	342	164
		domContentLoaded	1410	2060	1685	171	82
		load	1427	2071	1716	176	85
		domInteractive	24	87	35	13	6
		backgroundConnect	8	72	30	20	10
		firstReactRender	14	77	31	24	11
		getState	4	62	17	19	9
		initialActions	0	1	0	0	0
		loadScripts	1005	1479	1236	136	65
		setupStore	7	75	16	19	9
		uiStartup	1685	2368	1975	184	88

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 762 Bytes (0.01%)
• common: 0 Bytes (0.00%)