fix: Improve stability of initial state sync in Snaps UI

[FrederikBolding]

Description

Improves stability of initial state sync when using Snaps UI. Previously, sometimes, the initialState in the SnapInterfaceContext wouldn't be updated when the content of the interface changed and thus initial values would be missing.

This PR changes the implementation to use one selector in the renderer, which only changes when the content does, but passes the initialState and context to the SnapInterfaceContext itself. This way we are guaranteed for the content and state to stay in sync.

Can be tested with a Snap like:

export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'hello': {
      const id = await snap.request({
        method: 'snap_createInterface',
        params: {
          ui: (
            <Box>
              <Text>foo</Text>
              <Button>Click me</Button>
            </Box>
          ),
          context: { foo: 'bar' },
        },
      });

      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          id,
        },
      });
    }
    default:
      throw new Error('Method not found.');
  }
};

export const onUserInput: OnUserInputHandler = async ({
  id,
  event,
  context,
}) => {
  if (event.type === 'ButtonClickEvent') {
    await snap.request({
      method: 'snap_updateInterface',
      params: {
        id,
        ui: (
          <Box>
            <Heading>Settings</Heading>
            <Input name="foo" value="foo" />
            <Form name="settingsForm">
              <Field label="foo">
                <Input name="foo" value="foo" />
              </Field>
            </Form>
          </Box>
        ),
      },
    });
    return;
  }
};

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.42%. Comparing base (3820f01) to head (f797264).
Report is 2 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #25375   +/-   ##
========================================
  Coverage    65.42%   65.42%           
========================================
  Files         1380     1380           
  Lines        54688    54688           
  Branches     14339    14339           
========================================
  Hits         35776    35776           
  Misses       18912    18912           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [f797264]

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

Page Load Metrics (46 ± 5 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	60	107	73	11	5
		domContentLoaded	8	25	10	4	2
		load	39	84	46	11	5
		domInteractive	8	25	10	4	2

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -22 Bytes (-0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Missing release label release-12.0.0 on PR. Adding release label release-12.0.0 on PR and removing other release labels(release-12.1.0), as PR was cherry-picked in branch 12.0.0.