refactor: connection Flow to use CAIP25 Permission format

[ffmcgee725]

For part of our collaboration with the Snaps team to enable Non EVM multichain API we are refactoring the connection flow UI.

The first step to enable this to modify what the connection confirmation UI components receive from the ApprovalController.
Currently they receive an object like this:

{
    "eth_accounts": {
        "caveats": [
            {
                "type": "restrictReturnedAccounts",
                "value": []
            }
        ]
    },
    "endowment:permitted-chains": {
        "caveats": [
            {
                "type": "restrictNetworkSwitching",
                "value": []
            }
        ]
    }
}

Basically the params for a wallet_requestPermission request.

We want to change this so that instead they receive (and know how to interpret) a CAIP25 formatted request like:

{
    "eip155:1": {
        "accounts": []  // there may be accounts here but often will not be
    },
    "eip155:10": {
        "accounts": []
    },
}

Description

Related issues

Fixes:

Manual testing steps

1. Send the following request

await window.ethereum.request({
 "method": "wallet_requestPermissions",
 "params": [
  {
    
    "eth_accounts": {
        "caveats": [
            {
                "type": "restrictReturnedAccounts",
                "value": []
            }
        ]
    },
    "endowment:permitted-chains": {
        "caveats": [
            {
                "type": "restrictNetworkSwitching",
                "value": []
            }
        ]
    }
  }
],
});



2. Wallet extension UI should prompt user to give permissions to accounts / chains and edit if desired or confirm to proceed.

Screenshots/Recordings

Screen.Recording.2025-01-23.at.17.18.17.mov

NOTE: Don't mind different screens in the UI, this vid is outdated and all UI screens are same as main branch

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.

[metamaskbot]

Builds ready [1ed1218]

• 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 (2023 ± 121 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	279	2415	1747	628	302
		domContentLoaded	1538	2397	1987	250	120
		load	1582	2423	2023	252	121
		domInteractive	18	96	43	19	9
		backgroundConnect	9	162	41	36	17
		firstReactRender	17	95	51	28	13
		getState	6	89	26	25	12
		initialActions	0	1	0	0	0
		loadScripts	1101	1850	1472	210	101
		setupStore	9	69	20	19	9
		uiStartup	1983	3056	2379	291	140

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

• background: 507 Bytes (0.01%)
• ui: 893 Bytes (0.01%)
• common: -433 Bytes (-0.00%)

[adonesky1]

LGTM

[metamaskbot]

Builds ready [a66eac3]

• 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 (1663 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1476	1986	1660	124	59
		domContentLoaded	1462	1926	1629	112	54
		load	1477	1986	1663	122	58
		domInteractive	24	118	46	29	14
		backgroundConnect	8	85	32	25	12
		firstReactRender	16	94	41	27	13
		getState	4	69	16	17	8
		initialActions	0	0	0	0	0
		loadScripts	1036	1470	1173	108	52
		setupStore	8	60	13	14	7
		uiStartup	1693	2140	1907	126	60

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

• background: 499 Bytes (0.01%)
• ui: 890 Bytes (0.01%)
• common: -433 Bytes (-0.00%)