feat(snaps):Add disabled state for Snap UI interactive components

[david0xd]

Description

This PR integrates new Snaps UI feature for disabling interactive UI components.

Related issues

Fixes: #29669

Related Pull Requests

MetaMask/snaps#3030

Manual testing steps

1. Make new Snap with custom UI using interactive UI components specified in the task linked under "related issues".
2. Add flag disabled={true} to these components.
3. Check that components with disabled flag are not clickable and their styling is different (opacity 0.5).

Screenshots/Recordings

Before

disabled state was not available before, nothing to show here.

After

Screen.Recording.2025-01-24.at.16.53.37.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.

[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 [6c745ce]

• 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, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1858 ± 84 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	251	2249	1649	550	264
		domContentLoaded	1517	2226	1807	154	74
		load	1531	2255	1858	174	84
		domInteractive	27	85	41	15	7
		backgroundConnect	13	292	56	58	28
		firstReactRender	16	110	42	29	14
		getState	5	104	25	26	12
		initialActions	0	1	0	0	0
		loadScripts	1098	1705	1334	140	67
		setupStore	8	80	22	22	11
		uiStartup	1756	2767	2146	254	122

Bundle size diffs

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

[metamaskbot]

Builds ready [662cbbf]

• 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, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1684 ± 90 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	227	2351	1614	367	176
		domContentLoaded	1473	2260	1648	174	84
		load	1491	2356	1684	187	90
		domInteractive	25	77	42	19	9
		backgroundConnect	7	97	41	29	14
		firstReactRender	16	82	39	23	11
		getState	3	54	15	13	6
		initialActions	0	1	0	0	0
		loadScripts	993	1707	1200	153	73
		setupStore	7	59	14	14	7
		uiStartup	1664	2685	1932	224	107

Bundle size diffs

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

[metamaskbot]

Builds ready [0c64a8a]

• 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 (1661 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1494	2076	1668	153	74
		domContentLoaded	1483	2050	1642	139	67
		load	1496	2076	1661	142	68
		domInteractive	24	88	37	19	9
		backgroundConnect	9	61	27	18	8
		firstReactRender	15	102	40	29	14
		getState	5	49	11	12	6
		initialActions	0	1	0	0	0
		loadScripts	1030	1532	1178	111	53
		setupStore	6	80	22	24	12
		uiStartup	1709	2470	1930	219	105

[metamaskbot]

Builds ready [3059e34]

• 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 (2615 ± 275 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	388	3677	2095	958	460
		domContentLoaded	1598	3633	2571	577	277
		load	1655	3679	2615	573	275
		domInteractive	25	157	68	33	16
		backgroundConnect	14	234	54	47	23
		firstReactRender	17	166	61	34	16
		getState	7	108	30	26	13
		initialActions	0	12	1	3	1
		loadScripts	1175	2839	1963	464	223
		setupStore	9	76	26	16	8
		uiStartup	1908	4346	3032	642	308