From 540624884e3e0e5d5b40357182b226a98907c225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Wed, 17 Sep 2025 16:07:32 +0200
Subject: [PATCH 01/11] fix: implement UI for multichain playground

---
 package.json                                  |    3 +-
 playground/multichain-react/.depcheckrc.json  |   13 +
 playground/multichain-react/.editorconfig     |    9 +
 playground/multichain-react/.env.example      |    5 +
 playground/multichain-react/.gitattributes    |    8 +
 playground/multichain-react/.gitignore        |   81 +
 playground/multichain-react/CHANGELOG.md      |    9 +
 playground/multichain-react/README.md         |   42 +
 playground/multichain-react/craco.config.js   |   23 +
 playground/multichain-react/index.js          |    3 +
 playground/multichain-react/package.json      |  101 +
 playground/multichain-react/postcss.config.js |    6 +
 .../multichain-react/public/alt-fox.svg       |    1 +
 playground/multichain-react/public/index.html |   13 +
 playground/multichain-react/public/robots.txt |    3 +
 playground/multichain-react/scripts/get.sh    |   24 +
 .../multichain-react/scripts/prepack.sh       |   11 +
 playground/multichain-react/src/App.test.tsx  |    9 +
 playground/multichain-react/src/App.tsx       |  126 +
 .../src/components/DynamicInputs.tsx          |   62 +
 .../src/components/FeaturedNetworks.tsx       |   41 +
 .../src/components/ScopeCard.tsx              |  395 ++++
 .../src/components/WalletList.tsx             |   69 +
 .../multichain-react/src/constants/index.ts   |    3 +
 .../multichain-react/src/constants/methods.ts |  167 ++
 .../src/constants/networks.ts                 |   20 +
 .../src/helpers/AddressHelpers.ts             |   14 +
 .../multichain-react/src/helpers/IdHelpers.ts |    9 +
 .../src/helpers/JsonHelpers.ts                |   40 +
 .../src/helpers/MethodInvocationHelpers.ts    |  152 ++
 .../src/helpers/solana-method-signatures.ts   |  127 +
 playground/multichain-react/src/index.css     |   27 +
 playground/multichain-react/src/index.tsx     |   12 +
 playground/multichain-react/src/logo.svg      |    1 +
 playground/multichain-react/src/sdk/index.ts  |    1 +
 playground/multichain-react/src/sdk/useSDK.ts |  105 +
 playground/multichain-react/src/setupTests.ts |    6 +
 .../multichain-react/tailwind.config.js       |   10 +
 .../multichain-react/tsconfig.build.json      |   24 +
 playground/multichain-react/tsconfig.json     |   18 +
 yarn.lock                                     | 2059 ++++++++++++++++-
 41 files changed, 3786 insertions(+), 66 deletions(-)
 create mode 100644 playground/multichain-react/.depcheckrc.json
 create mode 100644 playground/multichain-react/.editorconfig
 create mode 100644 playground/multichain-react/.env.example
 create mode 100644 playground/multichain-react/.gitattributes
 create mode 100644 playground/multichain-react/.gitignore
 create mode 100644 playground/multichain-react/CHANGELOG.md
 create mode 100644 playground/multichain-react/README.md
 create mode 100644 playground/multichain-react/craco.config.js
 create mode 100644 playground/multichain-react/index.js
 create mode 100644 playground/multichain-react/package.json
 create mode 100644 playground/multichain-react/postcss.config.js
 create mode 100644 playground/multichain-react/public/alt-fox.svg
 create mode 100644 playground/multichain-react/public/index.html
 create mode 100644 playground/multichain-react/public/robots.txt
 create mode 100755 playground/multichain-react/scripts/get.sh
 create mode 100755 playground/multichain-react/scripts/prepack.sh
 create mode 100644 playground/multichain-react/src/App.test.tsx
 create mode 100644 playground/multichain-react/src/App.tsx
 create mode 100644 playground/multichain-react/src/components/DynamicInputs.tsx
 create mode 100644 playground/multichain-react/src/components/FeaturedNetworks.tsx
 create mode 100644 playground/multichain-react/src/components/ScopeCard.tsx
 create mode 100644 playground/multichain-react/src/components/WalletList.tsx
 create mode 100644 playground/multichain-react/src/constants/index.ts
 create mode 100644 playground/multichain-react/src/constants/methods.ts
 create mode 100644 playground/multichain-react/src/constants/networks.ts
 create mode 100644 playground/multichain-react/src/helpers/AddressHelpers.ts
 create mode 100644 playground/multichain-react/src/helpers/IdHelpers.ts
 create mode 100644 playground/multichain-react/src/helpers/JsonHelpers.ts
 create mode 100644 playground/multichain-react/src/helpers/MethodInvocationHelpers.ts
 create mode 100644 playground/multichain-react/src/helpers/solana-method-signatures.ts
 create mode 100644 playground/multichain-react/src/index.css
 create mode 100644 playground/multichain-react/src/index.tsx
 create mode 100644 playground/multichain-react/src/logo.svg
 create mode 100644 playground/multichain-react/src/sdk/index.ts
 create mode 100644 playground/multichain-react/src/sdk/useSDK.ts
 create mode 100644 playground/multichain-react/src/setupTests.ts
 create mode 100644 playground/multichain-react/tailwind.config.js
 create mode 100644 playground/multichain-react/tsconfig.build.json
 create mode 100644 playground/multichain-react/tsconfig.json

diff --git a/package.json b/package.json
index 96230109d..8016b9992 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "packages/deve2e",
     "packages/playground-next",
     "packages/sdk-multichain",
-    "playground/multichain-node"
+    "playground/multichain-node",
+    "playground/multichain-react"
   ],
   "scripts": {
     "build": "yarn install && cd packages/sdk-socket-server-next && yarn install && cd ../.. && yarn workspaces foreach --verbose run build:pre-tsc && yarn workspaces foreach --verbose --topological --parallel --no-private run build && yarn workspaces foreach --verbose run build:post-tsc ",
diff --git a/playground/multichain-react/.depcheckrc.json b/playground/multichain-react/.depcheckrc.json
new file mode 100644
index 000000000..1b814a9e6
--- /dev/null
+++ b/playground/multichain-react/.depcheckrc.json
@@ -0,0 +1,13 @@
+{
+  "ignores": [
+    "@lavamoat/allow-scripts",
+    "@lavamoat/preinstall-always-fail",
+    "@metamask/auto-changelog",
+    "@types/*",
+    "@yarnpkg/types",
+    "prettier-plugin-packagejson",
+    "ts-node",
+    "typedoc",
+    "buffer"
+  ]
+}
diff --git a/playground/multichain-react/.editorconfig b/playground/multichain-react/.editorconfig
new file mode 100644
index 000000000..c6c8b3621
--- /dev/null
+++ b/playground/multichain-react/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/playground/multichain-react/.env.example b/playground/multichain-react/.env.example
new file mode 100644
index 000000000..83481f084
--- /dev/null
+++ b/playground/multichain-react/.env.example
@@ -0,0 +1,5 @@
+# Helius RPC API Configuration
+# Optional: Helius RPC API key for enhanced Solana RPC performance
+# If not provided, the app will fall back to public Solana RPC endpoints
+# Get your API key from: https://www.helius.dev/
+REACT_APP_HELIUS_API_KEY=your_helius_api_key_here
diff --git a/playground/multichain-react/.gitattributes b/playground/multichain-react/.gitattributes
new file mode 100644
index 000000000..524151a23
--- /dev/null
+++ b/playground/multichain-react/.gitattributes
@@ -0,0 +1,8 @@
+* text=auto
+
+yarn.lock linguist-generated=false
+
+# yarn v3
+# See: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+/.yarn/releases/** binary
+/.yarn/plugins/** binary
diff --git a/playground/multichain-react/.gitignore b/playground/multichain-react/.gitignore
new file mode 100644
index 000000000..112a181e6
--- /dev/null
+++ b/playground/multichain-react/.gitignore
@@ -0,0 +1,81 @@
+.DS_Store
+dist/
+coverage/
+docs/
+.env
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3 (w/o zero-install)
+# See: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+build/
diff --git a/playground/multichain-react/CHANGELOG.md b/playground/multichain-react/CHANGELOG.md
new file mode 100644
index 000000000..3cab0227d
--- /dev/null
+++ b/playground/multichain-react/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/metamask-sdk/
diff --git a/playground/multichain-react/README.md b/playground/multichain-react/README.md
new file mode 100644
index 000000000..4a1163f30
--- /dev/null
+++ b/playground/multichain-react/README.md
@@ -0,0 +1,42 @@
+# MetaMask Test Dapp Multichain
+
+A test dapp for the MetaMask Multichain API.
+
+## Installation
+
+`yarn`
+
+## Configuration
+
+### Environment Variables
+
+This project supports optional environment variables for enhanced functionality:
+
+#### Helius RPC API Key (Optional)
+For improved Solana RPC performance, you can configure a Helius API key:
+
+1. Copy the example environment file:
+   ```bash
+   cp .env.example .env.local
+   ```
+
+2. Get a free API key from [Helius](https://www.helius.dev/)
+
+3. Add your API key to `.env.local`:
+   ```
+   REACT_APP_HELIUS_API_KEY=your_actual_api_key_here
+   ```
+
+**Note:** If no Helius API key is provided, the app will automatically fall back to public Solana RPC endpoints.
+
+## Usage
+
+To start the development server:
+
+`yarn start`
+
+This will launch the test dapp, allowing you to interact with the MetaMask Multichain API.
+
+## Contributing
+
+#### This project uses the [MetaMask Module Template](https://github.com/MetaMask/metamask-module-template)
diff --git a/playground/multichain-react/craco.config.js b/playground/multichain-react/craco.config.js
new file mode 100644
index 000000000..c9fb4250e
--- /dev/null
+++ b/playground/multichain-react/craco.config.js
@@ -0,0 +1,23 @@
+import webpack from 'webpack';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+export default {
+	webpack: {
+		configure: (webpackConfig) => {
+			webpackConfig.resolve.fallback = {
+				...webpackConfig.resolve.fallback,
+				buffer: require.resolve('buffer'),
+				process: require.resolve('process/browser'),
+			};
+			webpackConfig.plugins.push(
+				new webpack.ProvidePlugin({
+					Buffer: ['buffer', 'Buffer'],
+					process: 'process/browser',
+				}),
+			);
+			return webpackConfig;
+		},
+	},
+};
diff --git a/playground/multichain-react/index.js b/playground/multichain-react/index.js
new file mode 100644
index 000000000..6f0c2f260
--- /dev/null
+++ b/playground/multichain-react/index.js
@@ -0,0 +1,3 @@
+throw new Error(
+  'This package is published to npm so that the static files can be hosted locally for testing. This package cannot be run directly.',
+);
diff --git a/playground/multichain-react/package.json b/playground/multichain-react/package.json
new file mode 100644
index 000000000..bbcd42432
--- /dev/null
+++ b/playground/multichain-react/package.json
@@ -0,0 +1,101 @@
+{
+	"name": "@metamask/sdk-multichain-react",
+	"publishConfig": {
+		"access": "restricted",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"version": "0.15.0",
+	"description": "A test dapp for multichain api",
+	"homepage": "https://metamask.github.io/test-dapp-multichain",
+	"bugs": {
+		"url": "https://github.com/MetaMask/test-dapp-multichain/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/MetaMask/test-dapp-multichain.git"
+	},
+	"exports": {
+		".": "./index.js",
+		"./package.json": "./package.json"
+	},
+	"main": "./index.js",
+	"files": [
+		"build/"
+	],
+	"scripts": {
+		"build": "DISABLE_ESLINT_PLUGIN=true craco build",
+		"eject": "react-scripts eject",
+		"lint": "yarn biome lint ./src",
+		"lint:ci": "yarn biome ci ./src",
+		"lint:fix": "yarn biome format --write ./src",
+		"lint:changelog": "../../scripts/validate-changelog.sh @metamask/multichain-sdk",
+		"prepack": "./scripts/prepack.sh",
+		"start": "DISABLE_ESLINT_PLUGIN=true craco start",
+		"test": "echo 'no tests'",
+		"test:ci": "echo 'no tests'"
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.0.0",
+		"@craco/craco": "^7.1.0",
+		"@lavamoat/allow-scripts": "^3.0.4",
+		"@lavamoat/preinstall-always-fail": "^2.0.0",
+		"@metamask/api-specs": "^0.14.0",
+		"@metamask/auto-changelog": "^3.4.3",
+		"@metamask/utils": "^11.0.0",
+		"@open-rpc/meta-schema": "^1.14.9",
+		"@open-rpc/schema-utils-js": "^2.0.5",
+		"@solana/web3.js": "^1.98.0",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/react": "^13.4.0",
+		"@types/chrome": "^0.0.279",
+		"@types/jest": "^28.1.6",
+		"@types/node": "^18.18",
+		"@types/react": "^19.1.8",
+		"@yarnpkg/types": "^4.0.0-rc.52",
+		"autoprefixer": "^10.4.21",
+		"buffer": "^6.0.3",
+		"depcheck": "^1.4.3",
+		"jest": "^28.1.3",
+		"postcss": "^8.5.6",
+		"prettier": "^2.7.1",
+		"prettier-plugin-packagejson": "^2.3.0",
+		"process": "^0.11.10",
+		"react-scripts": "5.0.1",
+		"tailwindcss": "^4.1.11",
+		"ts-node": "^10.7.0",
+		"typescript": "~4.8.4"
+	},
+	"packageManager": "yarn@4.1.1",
+	"engines": {
+		"node": "^18.18 || >=20"
+	},
+	"lavamoat": {
+		"allowScripts": {
+			"@lavamoat/preinstall-always-fail": false,
+			"react-scripts>@pmmmwh/react-refresh-webpack-plugin>core-js-pure": false,
+			"react-scripts>react-app-polyfill>core-js": false,
+			"@solana/web3.js>bigint-buffer": false,
+			"@solana/web3.js>rpc-websockets>bufferutil": false,
+			"@solana/web3.js>rpc-websockets>utf-8-validate": false,
+			"@metamask/multichain-sdk>@metamask/mobile-wallet-protocol-dapp-client>@metamask/mobile-wallet-protocol-core>centrifuge>protobufjs": false,
+			"@metamask/multichain-sdk>@metamask/mobile-wallet-protocol-core>centrifuge>protobufjs": false
+		}
+	},
+	"dependencies": {
+		"@metamask/multichain-sdk": "workspace:^",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	}
+}
diff --git a/playground/multichain-react/postcss.config.js b/playground/multichain-react/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/playground/multichain-react/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/playground/multichain-react/public/alt-fox.svg b/playground/multichain-react/public/alt-fox.svg
new file mode 100644
index 000000000..c2eeab825
--- /dev/null
+++ b/playground/multichain-react/public/alt-fox.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.6" ><path fill="rgb(49,91,220)" stroke="rgb(49,91,220)" stroke-width="1" opacity="0.6705882352941176" d="M 126.5 24 L 127 26.5 L 125.5 31 L 125 27.5 L 126.5 24 Z " /><path fill="rgb(49,91,220)" stroke="rgb(49,91,220)" stroke-width="1" opacity="0.6705882352941176" d="M 124.5 32 L 125 35.5 L 124 35.5 L 124.5 32 Z " /><path fill="rgb(49,91,220)" stroke="rgb(49,91,220)" stroke-width="1" opacity="0.6705882352941176" d="M 123.5 37 L 124 40.5 L 123 40.5 L 123.5 37 Z " /><path fill="rgb(49,91,220)" stroke="rgb(49,91,220)" stroke-width="1" opacity="0.6705882352941176" d="M 122.5 42 L 125 48 L 122 49.5 L 124 52.5 L 121.5 56 Q 123.8 55.3 123 57.5 L 117.5 64 L 118 62.5 L 122 57.5 Q 117.5 55 123 52.5 L 121 49.5 Q 126.5 47 122 44.5 L 122.5 42 Z " /><path fill="rgb(0,0,0)" stroke="rgb(0,0,0)" stroke-width="1" opacity="0" d="M 0 0 L 128 0 L 128 128 L 0 128 L 0 0 Z M 9 6 L 1 26 L 5 41 Q 6 46 3 48 L 6 50 L 4 53 Q 10 55 5 58 L 10 64 L 2 90 L 9 115 L 12 118 L 38 110 L 54 122 L 75 122 L 89 111 L 94 111 L 118 118 L 126 92 L 126 89 L 118 67 L 118 64 L 123 58 Q 124 55 122 56 L 124 53 L 122 50 L 125 48 L 123 45 L 127 27 L 121 6 L 110 9 L 80 21 L 48 21 L 9 6 Z " /><path fill="rgb(107,59,29)" stroke="rgb(107,59,29)" stroke-width="1" opacity="0.984313725490196" d="M 7 7 L 9.5 7 L 54 40.5 Q 54.5 45.5 50.5 46 L 38.5 56 L 31.5 57 L 10.5 64 L 5 57.5 Q 9.5 55 4 52.5 L 6 49.5 L 3 47.5 Q 5.8 45.8 5 40.5 L 1 25.5 L 7 7 Z " /><path fill="rgb(107,59,29)" stroke="rgb(107,59,29)" stroke-width="1" opacity="0.984313725490196" d="M 49.5 75 L 53 81.5 L 50.5 82 L 42 78.5 L 49.5 75 Z " /><path fill="rgb(107,59,29)" stroke="rgb(107,59,29)" stroke-width="1" opacity="0.984313725490196" d="M 78.5 75 L 86 79.5 L 75.5 83 L 75 80.5 L 78.5 75 Z " /><path fill="rgb(107,59,29)" stroke="rgb(107,59,29)" stroke-width="1" opacity="0.984313725490196" d="M 55.5 100 L 70.5 100 L 73 101 L 74 111.5 L 72.5 111 L 55.5 111 L 53 112 L 54 101.5 L 55.5 100 Z " /><path fill="rgb(246,130,27)" stroke="rgb(246,130,27)" stroke-width="1" opacity="0.5176470588235295" d="M 48.5 21 L 63 21.5 L 48.5 22 L 48.5 21 Z " /><path fill="rgb(246,130,27)" stroke="rgb(246,130,27)" stroke-width="1" opacity="0.5176470588235295" d="M 10.5 64 L 11 66.5 L 6.5 79 L 6 76.5 L 10.5 64 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 8.5 6 L 12 7.5 L 10.5 8 L 8.5 6 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 13.5 8 L 20 10.5 L 18.5 11 L 13.5 9 L 13.5 8 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 21.5 11 L 28 13.5 L 26.5 14 L 21.5 12 L 21.5 11 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 29.5 14 L 36 16.5 L 34.5 17 L 29.5 15 L 29.5 14 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 37.5 17 L 44 19.5 L 42.5 20 L 37.5 18 L 37.5 17 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 4.5 95 L 6 100.5 L 5 100.5 L 4.5 95 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 6.5 102 L 8 107.5 L 7 107.5 L 6.5 102 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 34.5 110 L 37 110.5 L 34.5 111 L 34.5 110 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 30.5 111 L 33 111.5 L 27.5 113 L 27.5 112 L 30.5 111 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 9.5 112 L 11 116.5 L 10 116.5 L 9.5 112 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 23.5 113 L 26 113.5 L 23.5 114 L 23.5 113 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 19.5 114 L 22 114.5 L 16.5 116 L 16.5 115 L 19.5 114 Z " /><path fill="rgb(225,118,36)" stroke="rgb(225,118,36)" stroke-width="1" opacity="0.5137254901960784" d="M 12.5 116 L 15 116.5 L 12.5 117 L 12.5 116 Z " /><path fill="rgb(187,201,241)" stroke="rgb(187,201,241)" stroke-width="1" opacity="0.996078431372549" d="M 64 21 L 79.5 21 L 80 22.5 L 73 40.5 L 72 65.5 L 71 66.5 L 71 94.5 L 72 94.5 L 74 83 L 88 80 L 87 88.5 L 89 87.5 L 99 68.5 L 92 57.5 L 93.5 57 L 117 64 L 125 90 L 87.5 90 L 72.5 101 L 71.5 100 L 64 100 L 64 21 Z " /><path fill="rgb(187,201,241)" stroke="rgb(187,201,241)" stroke-width="1" opacity="0.996078431372549" d="M 53.5 101 L 54 105.5 L 53 112 L 72.5 111 L 74 111.5 L 73 102 L 89 109.5 L 74.5 121 L 53.5 121 L 38 109.5 L 53.5 101 Z " /><path fill="rgb(44,86,221)" stroke="rgb(44,86,221)" stroke-width="1" opacity="0.996078431372549" d="M 119.5 7 L 121 8.5 L 126 26.5 L 122 44.5 L 124 46.5 Q 118.5 49 123 51.5 L 120 55.5 L 122 57.5 L 118 61.5 Q 118.9 64.9 113.5 63 L 90.5 56 L 73 41.5 L 119.5 7 Z " /><path fill="rgb(44,86,221)" stroke="rgb(44,86,221)" stroke-width="1" opacity="0.996078431372549" d="M 81.5 76 L 87 78.5 L 85.5 79 L 81.5 77 L 81.5 76 Z " /><path fill="rgb(244,132,32)" stroke="rgb(244,132,32)" stroke-width="1" opacity="0.996078431372549" d="M 47.5 21 L 48.5 22 L 62.5 22 L 64 21.5 L 64 99.5 Q 63.8 100.8 57.5 100 L 55.5 99 Q 53 103.5 50.5 98 L 40.5 90 L 3 90 L 11 64 L 36.5 57 L 36 58.5 L 30 68.5 L 39.5 87 L 40 79 L 51.5 82 L 55 84.5 L 56.5 92 L 57 79.5 L 56 78.5 L 56 63.5 L 55 62.5 L 55 46.5 L 54 43.5 L 55 41.5 L 49 28.5 L 47.5 21 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 11.5 8 L 13.5 11 L 11.5 8 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 15.5 11 L 16.5 13 L 15.5 11 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 19.5 14 L 20.5 16 L 19.5 14 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 23.5 17 L 24.5 19 L 23.5 17 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 27.5 20 L 28.5 22 L 27.5 20 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 31.5 23 L 32.5 25 L 31.5 23 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 35.5 26 L 36.5 28 L 35.5 26 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 38.5 28 L 40.5 31 L 38.5 28 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 42.5 31 L 43.5 33 L 42.5 31 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 46.5 34 L 47.5 36 L 46.5 34 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 50.5 37 L 51.5 39 L 50.5 37 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 49.5 46 L 47.5 49 L 49.5 46 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 43.5 51 L 40.5 55 L 43.5 51 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 31 68 L 48.5 68 L 49.5 69 L 56 69 L 54 81.5 L 52.5 83 L 52 80.5 L 49.5 75 L 42 78.5 L 42.5 80 L 31 69.5 L 31 68 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 26.5 91 L 40.5 91 L 41 94.5 L 40 95.5 L 39 109 Q 36.3 110.1 37 107.5 L 27 93.5 L 26.5 91 Z " /><path fill="rgb(201,98,39)" stroke="rgb(201,98,39)" stroke-width="1" opacity="0.9921568627450981" d="M 55.5 111 L 63 111.5 L 55.5 112 L 55.5 111 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 109.5 9 L 111 9.5 L 107.5 11 L 107.5 10 L 109.5 9 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 101.5 12 L 103 12.5 L 99.5 14 L 99.5 13 L 101.5 12 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 117.5 64 L 126 88.5 L 126 91.5 L 125 91.5 L 125 88.5 L 117 66.5 L 117.5 64 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 124.5 93 L 125 95.5 L 124 95.5 L 124.5 93 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 38.5 110 L 53 120.5 L 50.5 119 Q 42.5 115.5 38.5 110 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 88.5 110 L 93 110.5 L 88.5 111 L 74.5 122 L 54.5 122 L 54.5 121 L 74.5 121 L 88.5 110 Z " /><path fill="rgb(178,198,232)" stroke="rgb(178,198,232)" stroke-width="1" opacity="0.34901960784313724" d="M 108.5 115 L 111 115.5 L 108.5 116 L 108.5 115 Z " /><path fill="rgb(103,144,248)" stroke="rgb(103,144,248)" stroke-width="1" opacity="0.9725490196078431" d="M 117.5 7 L 119 7.5 L 73.5 41 L 74 39.5 L 80 21 L 117.5 7 Z " /><path fill="rgb(103,144,248)" stroke="rgb(103,144,248)" stroke-width="1" opacity="0.9725490196078431" d="M 73 42 L 92 56 L 99 68.5 L 87.5 89 L 87 85.5 L 88 80 L 86 79.5 L 86.5 78 L 77 75 L 74 81.5 L 71.5 95 L 71 66.5 L 72 65.5 L 72 49.5 L 73 48.5 L 73 42 Z " /><path fill="rgb(103,144,248)" stroke="rgb(103,144,248)" stroke-width="1" opacity="0.9725490196078431" d="M 87.5 90 L 124.5 90 L 125 92.5 L 118 117 L 89.5 110 L 73 101.5 L 87.5 90 Z " /><path fill="rgb(225,118,37)" stroke="rgb(225,118,37)" stroke-width="1" opacity="0.996078431372549" d="M 12.5 8 L 47 21 L 54 39.5 L 50.5 37 L 14.5 11 L 12.5 8 Z " /><path fill="rgb(225,118,37)" stroke="rgb(225,118,37)" stroke-width="1" opacity="0.996078431372549" d="M 52.5 44 Q 54.8 43.3 54 45.5 L 55 46.5 L 55 62.5 L 56 69 L 49.5 69 L 48.5 68 L 31.5 68 L 30 68.5 L 37 57.5 L 36.5 56 L 40.5 55 L 52.5 44 Z " /><path fill="rgb(225,118,37)" stroke="rgb(225,118,37)" stroke-width="1" opacity="0.996078431372549" d="M 31.5 70 L 41 78.5 L 39.5 87 L 31.5 70 Z " /><path fill="rgb(225,118,37)" stroke="rgb(225,118,37)" stroke-width="1" opacity="0.996078431372549" d="M 55.5 71 L 57 79.5 L 57 91.5 L 56 91.5 L 55 84.5 L 53 82.5 L 55.5 71 Z " /><path fill="rgb(225,118,37)" stroke="rgb(225,118,37)" stroke-width="1" opacity="0.996078431372549" d="M 3 90 L 40.5 90 L 53 100.5 Q 53.8 102.8 51.5 102 L 39 108 L 41 91 L 26 91.5 L 38 109.5 L 11.5 117 L 3 90 Z " /></svg>
\ No newline at end of file
diff --git a/playground/multichain-react/public/index.html b/playground/multichain-react/public/index.html
new file mode 100644
index 000000000..38bff9820
--- /dev/null
+++ b/playground/multichain-react/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/alt-fox.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>Multichain Test Dapp</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/playground/multichain-react/public/robots.txt b/playground/multichain-react/public/robots.txt
new file mode 100644
index 000000000..e9e57dc4d
--- /dev/null
+++ b/playground/multichain-react/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/playground/multichain-react/scripts/get.sh b/playground/multichain-react/scripts/get.sh
new file mode 100755
index 000000000..9c988bb8a
--- /dev/null
+++ b/playground/multichain-react/scripts/get.sh
@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+
+set -e
+set -u
+set -o pipefail
+
+if [[ ${RUNNER_DEBUG:-0} == 1 ]]; then
+  set -x
+fi
+
+KEY="${1}"
+OUTPUT="${2}"
+
+if [[ -z $KEY ]]; then
+  echo "Error: KEY not specified."
+  exit 1
+fi
+
+if [[ -z $OUTPUT ]]; then
+  echo "Error: OUTPUT not specified."
+  exit 1
+fi
+
+echo "$OUTPUT=$(jq --raw-output "$KEY" package.json)" >> "$GITHUB_OUTPUT"
diff --git a/playground/multichain-react/scripts/prepack.sh b/playground/multichain-react/scripts/prepack.sh
new file mode 100755
index 000000000..ad99af58d
--- /dev/null
+++ b/playground/multichain-react/scripts/prepack.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -e
+set -o pipefail
+
+if [[ -n $SKIP_PREPACK ]]; then
+  echo "Notice: skipping prepack."
+  exit 0
+fi
+
+yarn build
diff --git a/playground/multichain-react/src/App.test.tsx b/playground/multichain-react/src/App.test.tsx
new file mode 100644
index 000000000..8fdbf8048
--- /dev/null
+++ b/playground/multichain-react/src/App.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+
+import App from './App';
+
+test('renders learn react link', () => {
+	render(<App />);
+	const linkElement = screen.getByText(/MetaMask MultiChain/iu);
+	expect(linkElement).toBeInTheDocument();
+});
diff --git a/playground/multichain-react/src/App.tsx b/playground/multichain-react/src/App.tsx
new file mode 100644
index 000000000..ddb0e7952
--- /dev/null
+++ b/playground/multichain-react/src/App.tsx
@@ -0,0 +1,126 @@
+import React, { useId } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { Scope, SessionData } from '@metamask/multichain-sdk';
+import type { CaipAccountId } from '@metamask/utils';
+import { METAMASK_PROD_CHROME_ID } from './constants';
+import { useSDK } from './sdk';
+import DynamicInputs, { INPUT_LABEL_TYPE } from './components/DynamicInputs';
+import { FEATURED_NETWORKS } from './constants/networks';
+import { ScopeCard } from './components/ScopeCard';
+import { Buffer } from 'buffer';
+
+global.Buffer = Buffer;
+
+function App() {
+	const id = useId();
+	const [customScopes, setCustomScopes] = useState<string[]>(['eip155:1']);
+	const [caipAccountIds, setCaipAccountIds] = useState<CaipAccountId[]>([]);
+	const [extensionId, setExtensionId] = useState<string>(METAMASK_PROD_CHROME_ID);
+
+	const {
+		isConnected,
+		session,
+		connect: sdkConnect,
+		disconnect: sdkDisconnect,
+	} = useSDK({
+		extensionId,
+	});
+
+	useEffect(() => {
+		if (session) {
+			const scopes = Object.keys(session.sessionScopes);
+			setCustomScopes(scopes);
+
+			// Accumulate all accounts from all scopes
+			const allAccounts: CaipAccountId[] = [];
+			for (const scope of scopes) {
+				const { accounts } = session.sessionScopes[scope as keyof typeof session.sessionScopes] ?? {};
+				if (accounts) {
+					allAccounts.push(...accounts);
+				}
+			}
+			setCaipAccountIds(allAccounts);
+		}
+	}, [session]);
+
+	// Check if current scope selection differs from connected session scopes
+	const scopesHaveChanged = () => {
+		if (!session) return false;
+		const sessionScopes = Object.keys(session.sessionScopes);
+		const currentScopes = customScopes.filter((scope) => scope.length);
+
+		if (sessionScopes.length !== currentScopes.length) return true;
+
+		return !sessionScopes.every((scope) => currentScopes.includes(scope)) || !currentScopes.every((scope) => sessionScopes.includes(scope));
+	};
+
+	const connect = async () => {
+		try {
+			const selectedScopesArray = customScopes.filter((scope) => scope.length);
+			const filteredAccountIds = caipAccountIds.filter((addr) => addr.trim() !== '');
+			await sdkConnect(selectedScopesArray as Scope[], filteredAccountIds as CaipAccountId[]);
+		} catch (error) {
+			console.error('Error creating session:', error);
+		}
+	};
+
+	const disconnect = useCallback(async () => {
+		await sdkDisconnect();
+	}, [sdkDisconnect]);
+
+	const availableOptions = Object.keys(FEATURED_NETWORKS).reduce<{ name: string; value: string }[]>((all, networkName) => {
+		const networkCaipValue = FEATURED_NETWORKS[networkName as keyof typeof FEATURED_NETWORKS];
+		return [...all, { name: networkName, value: networkCaipValue }];
+	}, []);
+
+	return (
+		<div className="min-h-screen bg-gray-50 flex justify-center">
+			<div className="max-w-6xl w-full p-8">
+				<h1 className="text-slate-800 text-4xl font-bold mb-8 text-center">MetaMask MultiChain API Test Dapp</h1>
+				<section className="bg-white rounded-lg p-8 mb-6 shadow-sm">
+					<label className="flex flex-col gap-2 mb-4">
+						<span className="text-gray-700 font-medium">Extension ID:</span>
+						<input
+							type="text"
+							placeholder="Enter extension ID"
+							value={extensionId}
+							onChange={(evt) => setExtensionId(evt.target.value)}
+							disabled={true}
+							readOnly={true}
+							data-testid="extension-id-input"
+							id={id}
+							className="p-2 border border-gray-300 rounded text-base bg-gray-50"
+						/>
+					</label>
+					<div className="mb-4">
+						<DynamicInputs availableOptions={availableOptions} inputArray={customScopes} setInputArray={setCustomScopes} label={INPUT_LABEL_TYPE.SCOPE} />
+					</div>
+					{(!isConnected || scopesHaveChanged()) && (
+						<button type="button" onClick={connect} className="bg-blue-500 text-white px-5 py-2 rounded text-base mr-2 hover:bg-blue-600 transition-colors">
+							{isConnected && scopesHaveChanged() ? 'Re Establish Connection' : 'Connect'}
+						</button>
+					)}
+					{isConnected && (
+						<button type="button" onClick={disconnect} className="bg-blue-500 text-white px-5 py-2 rounded text-base hover:bg-blue-600 transition-colors">
+							Disconnect
+						</button>
+					)}
+				</section>
+				<section className="bg-white rounded-lg p-8 mb-6 shadow-sm">
+					{Object.keys(session?.sessionScopes ?? {}).length > 0 && (
+						<section className="mb-6">
+							<h2 className="text-2xl font-bold text-gray-800 mb-6">Connected Networks</h2>
+							<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+								{Object.entries(session?.sessionScopes ?? {}).map(([scope, details]) => {
+									return <ScopeCard key={scope} scope={scope as Scope} details={details as SessionData['sessionScopes'][Scope]} />;
+								})}
+							</div>
+						</section>
+					)}
+				</section>
+			</div>
+		</div>
+	);
+}
+
+export default App;
diff --git a/playground/multichain-react/src/components/DynamicInputs.tsx b/playground/multichain-react/src/components/DynamicInputs.tsx
new file mode 100644
index 000000000..f2344365f
--- /dev/null
+++ b/playground/multichain-react/src/components/DynamicInputs.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable */
+
+import type React from 'react';
+import { useCallback } from 'react';
+
+export enum INPUT_LABEL_TYPE {
+	ADDRESS = 'Address',
+	SCOPE = 'Scope',
+	CAIP_ACCOUNT_ID = 'CAIP Address',
+}
+
+type DynamicInputsProps = {
+	inputArray: string[];
+	availableOptions: { name: string; value: string }[];
+	setInputArray: React.Dispatch<React.SetStateAction<string[]>>;
+	label: INPUT_LABEL_TYPE;
+};
+
+const DynamicInputs: React.FC<DynamicInputsProps> = ({ inputArray, setInputArray, label, availableOptions }) => {
+	const handleCheckboxChange = useCallback(
+		(value: string, isChecked: boolean) => {
+			if (isChecked) {
+				// Add to array if not already present
+				setInputArray((prev) => Array.from(new Set([...prev, value])));
+			} else {
+				// Remove from array
+				setInputArray((prev) => prev.filter((item) => item !== value));
+			}
+		},
+		[setInputArray],
+	);
+
+	return (
+		<div className="space-y-3">
+			<h3 className="text-lg font-medium text-gray-800">{label}s:</h3>
+			<div className="flex flex-wrap gap-4">
+				{availableOptions.map((option) => {
+					const isChecked = inputArray.includes(option.value);
+					return (
+						<label key={`checkbox-${option.value}`} className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer">
+							<input
+								type="checkbox"
+								checked={isChecked}
+								onChange={(e) => handleCheckboxChange(option.value, e.target.checked)}
+								className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
+							/>
+							<span className="text-gray-700 select-none">{option.name}</span>
+						</label>
+					);
+				})}
+			</div>
+			{inputArray.length > 0 && (
+				<div className="text-sm text-gray-500 mt-2">
+					Selected: {inputArray.length} {label.toLowerCase()}
+					{inputArray.length !== 1 ? 's' : ''}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default DynamicInputs;
diff --git a/playground/multichain-react/src/components/FeaturedNetworks.tsx b/playground/multichain-react/src/components/FeaturedNetworks.tsx
new file mode 100644
index 000000000..41fd3650c
--- /dev/null
+++ b/playground/multichain-react/src/components/FeaturedNetworks.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable */
+import type { Scope } from '@metamask/multichain-sdk';
+// biome-ignore lint/style/useImportType: <explanation>
+import React from 'react';
+
+import { FEATURED_NETWORKS } from '../constants/networks';
+import { escapeHtmlId } from '../helpers/IdHelpers';
+
+type FeaturedNetworksProps = {
+	selectedScopes: Record<string, boolean>;
+	setSelectedScopes: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+	isExternallyConnectableConnected: boolean;
+};
+
+export const FeaturedNetworks: React.FC<FeaturedNetworksProps> = ({ selectedScopes, setSelectedScopes, isExternallyConnectableConnected }) => {
+	const featuredNetworks = Object.entries(FEATURED_NETWORKS);
+	return (
+		<div className="space-y-2">
+			{featuredNetworks.map(([networkName, chainId]) => (
+				<label key={chainId} className="flex items-center gap-2 cursor-pointer">
+					<input
+						type="checkbox"
+						name={chainId}
+						checked={selectedScopes[chainId as Scope] ?? false}
+						onChange={(evt) =>
+							setSelectedScopes((prev) => ({
+								...prev,
+								[chainId]: evt.target.checked,
+							}))
+						}
+						disabled={!isExternallyConnectableConnected}
+						data-testid={`network-checkbox-${escapeHtmlId(chainId)}`}
+						id={`network-checkbox-${escapeHtmlId(chainId)}`}
+						className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 focus:ring-2 disabled:opacity-50"
+					/>
+					<span className="text-gray-700">{networkName}</span>
+				</label>
+			))}
+		</div>
+	);
+};
diff --git a/playground/multichain-react/src/components/ScopeCard.tsx b/playground/multichain-react/src/components/ScopeCard.tsx
new file mode 100644
index 000000000..4ae13c056
--- /dev/null
+++ b/playground/multichain-react/src/components/ScopeCard.tsx
@@ -0,0 +1,395 @@
+import MetaMaskOpenRPCDocument from '@metamask/api-specs';
+import type { Scope, SessionData } from '@metamask/multichain-sdk';
+import { type CaipAccountId, type CaipChainId, type CaipAccountAddress, parseCaipAccountId, type Json } from '@metamask/utils';
+import type { OpenrpcDocument, MethodObject } from '@open-rpc/meta-schema';
+import { useState, useCallback } from 'react';
+import { METHODS_REQUIRING_PARAM_INJECTION, injectParams } from '../constants/methods';
+import { getNetworkName } from '../constants/networks';
+import { escapeHtmlId } from '../helpers/IdHelpers';
+import { openRPCExampleToJSON, truncateJSON } from '../helpers/JsonHelpers';
+import { generateSolanaMethodExamples } from '../helpers/solana-method-signatures';
+import { extractRequestForStorage, extractRequestParams, normalizeMethodParams, updateInvokeMethodResults } from '../helpers/MethodInvocationHelpers';
+import { useSDK } from '../sdk';
+
+const metamaskOpenrpcDocument: OpenrpcDocument = MetaMaskOpenRPCDocument;
+
+export function ScopeCard({ scope, details }: { scope: Scope; details: SessionData['sessionScopes'][Scope] }) {
+	const { accounts } = details;
+
+	const setInitialMethodsAndAccounts = useCallback((currentSession: any) => {
+		const initialSelectedMethods: Record<string, string> = {};
+		const initialSelectedAccounts: Record<string, CaipAccountId> = {};
+		const initialInvokeMethodRequests: Record<string, string> = {};
+
+		Object.entries(currentSession.sessionScopes).forEach(([scope, details]: [string, any]) => {
+			if (details.accounts?.[0]) {
+				initialSelectedAccounts[scope] = details.accounts[0];
+			}
+
+			const getInvokeMethodRequest = (request: unknown) => ({
+				method: 'wallet_invokeMethod',
+				params: {
+					scope,
+					request,
+				},
+			});
+
+			if (scope.startsWith('eip155:')) {
+				initialSelectedMethods[scope] = 'eth_blockNumber';
+				const example = metamaskOpenrpcDocument?.methods.find((method) => (method as MethodObject).name === 'eth_blockNumber');
+				const request = openRPCExampleToJSON(example as MethodObject);
+				const invokeMethodRequest = getInvokeMethodRequest(request);
+				initialInvokeMethodRequests[scope] = JSON.stringify(invokeMethodRequest, null, 2);
+			}
+		});
+		setInvokeMethodRequests(initialInvokeMethodRequests);
+		setSelectedMethods(initialSelectedMethods);
+		setSelectedAccounts(initialSelectedAccounts);
+	}, []);
+
+	const handleSessionChangedNotification = useCallback(
+		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+		(notification: any) => {
+			if (notification.params?.sessionScopes) {
+				setInitialMethodsAndAccounts({
+					sessionScopes: notification.params.sessionScopes,
+				});
+			}
+		},
+		[setInitialMethodsAndAccounts],
+	);
+	const { invokeMethod } = useSDK({ onSessionChanged: handleSessionChangedNotification });
+
+	const [invokeMethodResults, setInvokeMethodResults] = useState<Record<string, Record<string, { result: any; request: any }[]>>>({});
+	const [selectedAccount, setSelectedAccount] = useState<CaipAccountId | undefined>(accounts?.length ? accounts[0] : undefined);
+	const [invokeMethodRequests, setInvokeMethodRequests] = useState<Record<string, string>>({});
+	const [selectedAccounts, setSelectedAccounts] = useState<Record<string, CaipAccountId | null>>({
+		[scope]: accounts?.length ? (accounts[0] ?? null) : null,
+	});
+	const [selectedMethods, setSelectedMethods] = useState<Record<string, string>>({});
+
+	const networkName = getNetworkName(scope);
+	const accountCount = accounts?.length ?? 0;
+
+	const handleUpdateInvokeMethodSolana = async (scope: CaipChainId, address: CaipAccountAddress, method: string) => {
+		if (!scope.startsWith('solana:')) {
+			throw new Error('Invalid CAIP chain ID. It must start with "solana:"');
+		}
+
+		const solanaExample = await generateSolanaMethodExamples(method, address);
+
+		const defaultRequest = {
+			method: 'wallet_invokeMethod',
+			params: {
+				scope,
+				request: {
+					method,
+					...solanaExample,
+				},
+			},
+		};
+
+		setInvokeMethodRequests((prev) => ({
+			...prev,
+			[scope]: JSON.stringify(defaultRequest, null, 2),
+		}));
+	};
+	const handleMethodSelect = async (evt: React.ChangeEvent<HTMLSelectElement>, scope: CaipChainId) => {
+		const selectedMethod = evt.target.value;
+		setSelectedMethods((prev) => ({
+			...prev,
+			[scope]: selectedMethod,
+		}));
+
+		const selectedAddress = selectedAccounts[scope];
+		if (!selectedAddress) {
+			return;
+		}
+
+		if (scope.startsWith('solana:')) {
+			await handleUpdateInvokeMethodSolana(scope, parseCaipAccountId(selectedAddress).address, selectedMethod);
+		} else {
+			const example = metamaskOpenrpcDocument?.methods.find((method) => (method as MethodObject).name === selectedMethod);
+			if (example) {
+				let exampleParams: Json = openRPCExampleToJSON(example as MethodObject);
+
+				if (selectedMethod in METHODS_REQUIRING_PARAM_INJECTION) {
+					exampleParams = injectParams(selectedMethod, exampleParams, selectedAddress, scope);
+				}
+
+				const defaultRequest = {
+					method: 'wallet_invokeMethod',
+					params: {
+						scope,
+						request: exampleParams,
+					},
+				};
+
+				setInvokeMethodRequests((prev) => ({
+					...prev,
+					[scope]: JSON.stringify(defaultRequest, null, 2),
+				}));
+			}
+		}
+	};
+
+	const handleInvokeMethod = async (scope: Scope, method: string, requestObject?: any) => {
+		console.log(`🔧 handleInvokeMethod called: ${method} on ${scope}`);
+
+		// Handle missing request gracefully
+		const scopeRequest = invokeMethodRequests[scope];
+		if (!requestObject && !scopeRequest) {
+			throw new Error(`No request configured for method ${method} on scope ${scope}`);
+		}
+
+		const finalRequestObject = requestObject ?? JSON.parse(scopeRequest ?? '{}');
+		console.log(`📋 Request object:`, finalRequestObject);
+
+		try {
+			// Extract and normalize parameters
+			const params = extractRequestParams(finalRequestObject);
+			console.log(`📤 Calling invokeMethod with params:`, params);
+
+			const paramsArray = normalizeMethodParams(method, params);
+			console.log(`📤 Normalized params array:`, paramsArray);
+
+			const result = await invokeMethod({
+				scope,
+				request: {
+					method,
+					params: paramsArray,
+				},
+			});
+
+			console.log(`📥 Received result:`, result);
+
+			const request = extractRequestForStorage(finalRequestObject);
+			setInvokeMethodResults((prev) => {
+				const newResults = updateInvokeMethodResults(prev, scope, method, result as Json, request);
+				console.log(`💾 Updated invoke results:`, newResults);
+				return newResults;
+			});
+		} catch (error) {
+			console.error('❌ Error invoking method:', error);
+
+			const request = extractRequestForStorage(finalRequestObject);
+			setInvokeMethodResults((prev) => {
+				const newResults = updateInvokeMethodResults(prev, scope, method, error as Error, request);
+				console.log(`💾 Updated invoke results (error):`, newResults);
+				return newResults;
+			});
+		}
+	};
+	return (
+		<div
+			data-testid={`scope-card-${escapeHtmlId(scope)}`}
+			key={scope}
+			className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
+		>
+			<div className="flex items-center justify-between mb-4">
+				<h3 title={`${networkName} (${scope})`} className="text-lg font-semibold text-gray-800 truncate">
+					{networkName}
+				</h3>
+			</div>
+
+			<div className="mb-4">
+				<div className="flex items-center gap-2 mb-2">
+					<span className="text-sm font-medium text-gray-600">Accounts:</span>
+					<span className="text-sm text-gray-500 bg-blue-50 text-blue-700 px-2 py-1 rounded-full">{accountCount} available</span>
+				</div>
+
+				<select
+					value={selectedAccount}
+					onChange={async (evt) => {
+						const selectedAccountValue = evt.target.value as CaipAccountId;
+						setSelectedAccount(selectedAccountValue);
+						setSelectedAccounts((prev) => ({
+							...prev,
+							[scope]: selectedAccountValue,
+						}));
+					}}
+					data-testid={`accounts-select-${escapeHtmlId(scope)}`}
+					id={`accounts-select-${escapeHtmlId(scope)}`}
+					className="w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+				>
+					<option value="">Select an account</option>
+					{(accounts ?? []).map((account: CaipAccountId) => {
+						const { address } = parseCaipAccountId(account);
+						return (
+							<option data-testid={`${escapeHtmlId(String(account))}-option`} key={address} value={account}>
+								{address}
+							</option>
+						);
+					})}
+				</select>
+			</div>
+
+			{selectedAccount && (
+				<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
+					<p className="text-sm text-green-800 font-medium">Active Account:</p>
+					<p className="text-sm text-green-700 font-mono break-all">{parseCaipAccountId(selectedAccount).address}</p>
+				</div>
+			)}
+
+			<div className="mb-4">
+				<div className="flex items-center gap-2 mb-2">
+					<span className="text-sm font-medium text-gray-600">Available Methods:</span>
+					<span className="text-sm text-gray-500 bg-purple-50 text-purple-700 px-2 py-1 rounded-full">{details.methods?.length ?? 0} available</span>
+				</div>
+
+				<select
+					data-testid={`${escapeHtmlId(scope)}-select`}
+					value={selectedMethods[scope] ?? ''}
+					onChange={async (evt) => {
+						await handleMethodSelect(evt, scope);
+					}}
+					id={`method-select-${escapeHtmlId(scope)}`}
+					className="w-full p-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors bg-white hover:border-gray-400"
+				>
+					<option value="">Select a method to invoke</option>
+					{(details.methods ?? []).map((method: string) => (
+						<option data-testid={`${escapeHtmlId(scope)}-${method}-option`} key={method} value={method}>
+							{method}
+						</option>
+					))}
+				</select>
+			</div>
+
+			{selectedMethods[scope] && (
+				<div className="mt-4 p-3 bg-purple-50 border border-purple-200 rounded-md">
+					<p className="text-sm text-purple-800 font-medium">Selected Method:</p>
+					<p className="text-sm text-purple-700 font-mono">{selectedMethods[scope]}</p>
+				</div>
+			)}
+
+			<details className="mt-4 border border-gray-200 rounded-lg" data-testid={`invoke-method-details-${escapeHtmlId(scope)}`} id={`invoke-method-details-${escapeHtmlId(scope)}`}>
+				<summary className="px-4 py-3 bg-gray-50 cursor-pointer hover:bg-gray-100 transition-colors duration-150 rounded-t-lg flex items-center gap-2 font-medium text-gray-700">
+					<svg className="w-4 h-4 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<title>Invoke Method</title>
+						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+					</svg>
+					Invoke Method Request
+				</summary>
+				<div className="p-4 bg-white border-t border-gray-200">
+					<div className="mb-2">
+						<label htmlFor={`invoke-method-request-${escapeHtmlId(scope)}`} className="block text-sm font-medium text-gray-600 mb-1">
+							JSON Request:
+						</label>
+					</div>
+					<textarea
+						data-testid={`${escapeHtmlId(scope)}-collapsible-content-textarea`}
+						value={invokeMethodRequests[scope] ?? ''}
+						onChange={(evt) => setInvokeMethodRequests((prev) => ({ ...prev, [scope]: evt.target.value }))}
+						rows={12}
+						id={`invoke-method-request-${escapeHtmlId(scope)}`}
+						className="w-full p-3 font-mono text-sm border border-gray-300 rounded-md resize-y min-h-[200px] max-h-[400px] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50"
+						placeholder="Method request will appear here..."
+						spellCheck={false}
+					/>
+					<div className="mt-2 text-xs text-gray-500">Edit the JSON above to customize the request parameters before invoking the method.</div>
+				</div>
+			</details>
+
+			<button
+				type="button"
+				data-testid={`invoke-method-${escapeHtmlId(scope)}-btn`}
+				onClick={async () => {
+					const method = selectedMethods[scope];
+					if (method) {
+						await handleInvokeMethod(scope as Scope, method);
+					}
+				}}
+				id={`invoke-method-${escapeHtmlId(scope)}-btn`}
+				disabled={!selectedMethods[scope] || !invokeMethodRequests[scope]}
+				className={`
+            w-full mt-4 px-6 py-3 rounded-lg font-medium text-white transition-all duration-200
+            flex items-center justify-center gap-2
+            ${
+							!selectedMethods[scope] || !invokeMethodRequests[scope]
+								? 'bg-gray-300 cursor-not-allowed text-gray-500'
+								: 'bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 cursor-pointer'
+						}
+          `}
+			>
+				<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+					<title>Invoke Method</title>
+					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+				</svg>
+				Invoke Method
+			</button>
+
+			{Object.entries(invokeMethodResults[scope] ?? {}).map(([method, results]) => {
+				return results.map(({ result, request }, index) => {
+					const { text, truncated } = truncateJSON(result, 150);
+					const isError = result instanceof Error;
+					return truncated ? (
+						<details
+							// biome-ignore lint/suspicious/noArrayIndexKey: Needed
+							key={`${method}-${index}`}
+							data-testid={`method-result-details-${escapeHtmlId(scope)}-${method}-${index}`}
+							id={`method-result-details-${escapeHtmlId(scope)}-${method}-${index}`}
+							className="mt-4 border border-gray-200 rounded-lg"
+						>
+							<summary className={`px-4 py-3 cursor-pointer hover:bg-gray-50 transition-colors duration-150 rounded-t-lg ${isError ? 'bg-red-50 border-red-200' : 'bg-gray-50'}`}>
+								<div className="flex items-center gap-2">
+									<svg className="w-4 h-4 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<title>Scope card</title>
+										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+									</svg>
+									<div className="flex-1">
+										<div className="flex items-center gap-2 mb-1">
+											<span className={`font-mono text-sm font-medium ${isError ? 'text-red-700' : 'text-purple-700'}`}>{method}</span>
+											<span className={`text-xs px-2 py-1 rounded-full ${isError ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}>
+												{isError ? 'Error' : 'Success'}
+											</span>
+										</div>
+										<div className="text-xs text-gray-500 mb-1">
+											<span className="font-medium">Params:</span> {JSON.stringify(request.params)}
+										</div>
+										<div className="text-xs text-gray-600 font-mono bg-gray-100 p-2 rounded">{text}...</div>
+									</div>
+								</div>
+							</summary>
+							<div className="p-4 bg-white border-t border-gray-200">
+								<div className="mb-2">
+									<div className="block text-sm font-medium text-gray-600 mb-1">Full Response:</div>
+								</div>
+								<div className="relative">
+									<pre className="bg-gray-50 p-4 rounded-md text-sm font-mono overflow-x-auto max-h-96 overflow-y-auto border border-gray-200 text-left">
+										<code id={`invoke-method-${escapeHtmlId(scope)}-${method}-result-${index}`} className={isError ? 'text-red-600' : 'text-gray-800'}>
+											{JSON.stringify(result, null, 2)}
+										</code>
+									</pre>
+								</div>
+							</div>
+						</details>
+					) : (
+						<div
+							// biome-ignore lint/suspicious/noArrayIndexKey: Needed
+							key={`${method}-${index}`}
+							className="mt-4 border border-gray-200 rounded-lg bg-white"
+							data-testid={`method-result-item-${escapeHtmlId(scope)}-${method}-${index}`}
+							id={`method-result-item-${escapeHtmlId(scope)}-${method}-${index}`}
+						>
+							<div className={`px-4 py-3 border-b border-gray-200 ${isError ? 'bg-red-50' : 'bg-gray-50'}`}>
+								<div className="flex items-center gap-2 mb-1">
+									<span className={`font-mono text-sm font-medium ${isError ? 'text-red-700' : 'text-purple-700'}`}>{method}</span>
+									<span className={`text-xs px-2 py-1 rounded-full ${isError ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}>{isError ? 'Error' : 'Success'}</span>
+								</div>
+							</div>
+							<div className="p-4">
+								<div className="relative">
+									<pre className="bg-gray-50 p-4 rounded-md text-sm font-mono overflow-x-auto border border-gray-200 text-left">
+										<code id={`invoke-method-${escapeHtmlId(scope)}-${method}-result-${index}`} className={isError ? 'text-red-600' : 'text-gray-800'}>
+											{text}
+										</code>
+									</pre>
+								</div>
+							</div>
+						</div>
+					);
+				});
+			})}
+		</div>
+	);
+}
diff --git a/playground/multichain-react/src/components/WalletList.tsx b/playground/multichain-react/src/components/WalletList.tsx
new file mode 100644
index 000000000..20c5e78d0
--- /dev/null
+++ b/playground/multichain-react/src/components/WalletList.tsx
@@ -0,0 +1,69 @@
+import type { MouseEventHandler } from 'react';
+
+import { WINDOW_POST_MESSAGE_ID } from '../constants';
+
+export type WalletMapEntry = {
+	params: {
+		name: string;
+		uuid: string;
+		rdns: string;
+		icon: string;
+		extensionId?: string;
+	};
+};
+
+type WalletListProps = {
+	wallets: Record<string, WalletMapEntry>;
+	handleClick: (extensionId: string) => Promise<void>;
+	connectedExtensionId: string;
+};
+
+function WalletList({ wallets, handleClick, connectedExtensionId }: WalletListProps) {
+	const handleWalletClick =
+		(extensionId: string): MouseEventHandler<HTMLButtonElement> =>
+		(ev) => {
+			ev.preventDefault();
+			// eslint-disable-next-line @typescript-eslint/no-floating-promises
+			handleClick(extensionId);
+		};
+
+	if (Object.keys(wallets).length === 0) {
+		return <p className="text-gray-600 text-center py-8">No wallets detected</p>;
+	}
+
+	return (
+		<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 p-5">
+			{Object.values(wallets).map((wallet) => {
+				const isConnected = wallet.params.extensionId === connectedExtensionId;
+				return (
+					<div key={wallet.params.uuid} className="bg-gray-100 rounded-lg p-5 flex flex-col items-center shadow-sm">
+						<img src={wallet.params.icon} alt={`${wallet.params.name} icon`} className="w-12 h-12 rounded-full mb-4" />
+						<div className="flex flex-col items-center text-center w-full">
+							<h3 className="text-lg font-semibold text-gray-800 mb-2">{wallet.params.name}</h3>
+							<p className="text-sm text-gray-600 mb-1">UUID: {wallet.params.uuid}</p>
+							<p className="text-sm text-gray-600 mb-1">RDNS: {wallet.params.rdns}</p>
+							{wallet.params.extensionId && (
+								<>
+									<p className="text-sm text-gray-600 mb-4">
+										{wallet.params.extensionId === WINDOW_POST_MESSAGE_ID ? null : 'Extension ID: '}
+										{wallet.params.extensionId}
+									</p>
+									<button
+										type="button"
+										onClick={handleWalletClick(wallet.params.extensionId)}
+										disabled={isConnected}
+										className="w-full mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed disabled:opacity-70"
+									>
+										{isConnected ? 'Connected' : 'Connect'}
+									</button>
+								</>
+							)}
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+export default WalletList;
diff --git a/playground/multichain-react/src/constants/index.ts b/playground/multichain-react/src/constants/index.ts
new file mode 100644
index 000000000..62626bd2d
--- /dev/null
+++ b/playground/multichain-react/src/constants/index.ts
@@ -0,0 +1,3 @@
+/* eslint-disable */
+export const WINDOW_POST_MESSAGE_ID = 'window.postMessage';
+export const METAMASK_PROD_CHROME_ID = 'nkbihfbeogaeaoehlefnkodbefgpgknn';
diff --git a/playground/multichain-react/src/constants/methods.ts b/playground/multichain-react/src/constants/methods.ts
new file mode 100644
index 000000000..b809ba7e3
--- /dev/null
+++ b/playground/multichain-react/src/constants/methods.ts
@@ -0,0 +1,167 @@
+import MetaMaskOpenRPCDocument from '@metamask/api-specs';
+import { parseCaipAccountId, parseCaipChainId, numberToHex } from '@metamask/utils';
+import type { CaipAccountId, CaipChainId, Json } from '@metamask/utils';
+
+/**
+ * Methods that require an account parameter.
+ */
+export const METHODS_REQUIRING_PARAM_INJECTION = {
+	eth_sendTransaction: true,
+	eth_signTypedData_v4: true,
+	personal_sign: true,
+	eth_getBalance: true,
+	wallet_sendCalls: true,
+	wallet_getCapabilities: true,
+} as const;
+
+/**
+ * Injects address and chainId (where applicable) into example params for a given method.
+ * @param method - The method to inject the address into.
+ * @param exampleParams - The example params to inject the address into.
+ * @param addressToInject - The address to inject.
+ * @param scopeToInject - The scope to inject the address into.
+ * @returns The updated example params with the address injected.
+ */
+export const injectParams = (method: string, exampleParams: Json, addressToInject: CaipAccountId, scopeToInject: CaipChainId): Json => {
+	const { address: parsedAddress } = parseCaipAccountId(addressToInject);
+	const { reference: chainId } = parseCaipChainId(scopeToInject);
+
+	if (
+		!(method in METHODS_REQUIRING_PARAM_INJECTION) ||
+		typeof exampleParams !== 'object' ||
+		exampleParams === null ||
+		!('method' in exampleParams) ||
+		!('params' in exampleParams) ||
+		!Array.isArray(exampleParams.params)
+	) {
+		return exampleParams;
+	}
+
+	switch (method) {
+		case 'eth_sendTransaction':
+			if (exampleParams.params.length > 0 && typeof exampleParams.params[0] === 'object' && exampleParams.params[0] !== null) {
+				return {
+					...exampleParams,
+					params: [
+						{
+							...exampleParams.params[0],
+							from: parsedAddress,
+							to: parsedAddress,
+							value: '0x0',
+						},
+						...exampleParams.params.slice(1),
+					],
+				};
+			}
+			break;
+
+		case 'personal_sign':
+			if (exampleParams.params.length >= 2) {
+				return {
+					...exampleParams,
+					params: [exampleParams.params[0], parsedAddress, ...exampleParams.params.slice(2)] as Json[],
+				};
+			}
+			break;
+
+		case 'eth_signTypedData_v4':
+			if (exampleParams.params.length >= 2 && typeof exampleParams.params[1] === 'object' && exampleParams.params[1] !== null) {
+				const typedData = exampleParams.params[1];
+				if (typeof typedData === 'object' && typedData !== null && 'domain' in typedData && typeof typedData.domain === 'object' && typedData.domain !== null) {
+					return {
+						...exampleParams,
+						params: [
+							parsedAddress,
+							{
+								...typedData,
+								domain: {
+									...typedData.domain,
+									chainId,
+								},
+							},
+						],
+					};
+				}
+			}
+			break;
+
+		case 'eth_getBalance':
+			return {
+				...exampleParams,
+				params: [parsedAddress, 'latest'],
+			};
+
+		// EIP-5792
+		case 'wallet_sendCalls': {
+			const params = exampleParams.params[0];
+			if (typeof params === 'object') {
+				return {
+					...exampleParams,
+					params: [
+						{
+							...params,
+							chainId: numberToHex(Number(chainId)),
+							from: parsedAddress,
+						},
+					],
+				};
+			}
+			break;
+		}
+
+		case 'wallet_getCapabilities': {
+			return {
+				...exampleParams,
+				params: [parsedAddress, [numberToHex(Number(chainId))]],
+			};
+		}
+
+		default:
+			break;
+	}
+
+	return exampleParams;
+};
+
+/**
+ * Known Wallet RPC methods.
+ */
+export const KnownWalletRpcMethods: string[] = ['wallet_registerOnboarding', 'wallet_scanQRCode'];
+
+/**
+ * Wallet methods that are EIP-155 compatible but not scoped to a specific chain.
+ */
+export const WalletEip155Methods = ['wallet_addEthereumChain'];
+
+/**
+ * EIP-155 specific notifications.
+ */
+export const Eip155Notifications = ['eth_subscription'];
+
+/**
+ * Methods that are only available in the EIP-1193 wallet provider.
+ */
+const Eip1193OnlyMethods = [
+	'wallet_switchEthereumChain',
+	'wallet_getPermissions',
+	'wallet_requestPermissions',
+	'wallet_revokePermissions',
+	'eth_requestAccounts',
+	'eth_accounts',
+	'eth_coinbase',
+	'net_version',
+	'metamask_logWeb3ShimUsage',
+	'metamask_getProviderState',
+	'metamask_sendDomainMetadata',
+	'wallet_registerOnboarding',
+];
+
+/**
+ * All MetaMask methods, except for ones we have specified in the constants above.
+ */
+export const Eip155Methods = MetaMaskOpenRPCDocument.methods
+	// eslint-disable-next-line @typescript-eslint/no-shadow
+	.map(({ name }: { name: string }) => name)
+	.filter((method: string) => !WalletEip155Methods.includes(method))
+	.filter((method: string) => !KnownWalletRpcMethods.includes(method))
+	.filter((method: string) => !Eip1193OnlyMethods.includes(method));
diff --git a/playground/multichain-react/src/constants/networks.ts b/playground/multichain-react/src/constants/networks.ts
new file mode 100644
index 000000000..a2ba56ac6
--- /dev/null
+++ b/playground/multichain-react/src/constants/networks.ts
@@ -0,0 +1,20 @@
+import type { CaipChainId } from '@metamask/utils';
+
+export const FEATURED_NETWORKS = {
+	'Ethereum Mainnet': 'eip155:1',
+	'Linea Mainnet': 'eip155:59144',
+	'Arbitrum One': 'eip155:42161',
+	'Avalanche Network C-Chain': 'eip155:43114',
+	'BNB Chain': 'eip155:56',
+	'OP Mainnet': 'eip155:10',
+	'Polygon Mainnet': 'eip155:137',
+	'zkSync Era Mainnet': 'eip155:324',
+	'Base Mainnet': 'eip155:8453',
+	Localhost: 'eip155:1337',
+	'Solana Mainnet': 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+} as const;
+
+export const getNetworkName = (chainId: CaipChainId): string => {
+	const entry = Object.entries(FEATURED_NETWORKS).find(([_, id]) => id === chainId);
+	return entry ? entry[0] : chainId;
+};
diff --git a/playground/multichain-react/src/helpers/AddressHelpers.ts b/playground/multichain-react/src/helpers/AddressHelpers.ts
new file mode 100644
index 000000000..1738d5de9
--- /dev/null
+++ b/playground/multichain-react/src/helpers/AddressHelpers.ts
@@ -0,0 +1,14 @@
+/**
+ * Formats addresses as [CAIP-10](https://chainagnostic.org/CAIPs/caip-10) addresses for it's respective request scope. See [CAIP-25](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-25.md) and .
+ * @param scope - The scope to create session for.
+ * @param addresses - The addresses to format. If address is empty, we remove it from the array.
+ * @returns The formatted addresses with the scope to create session for.
+ */
+export const getCaip25FormattedAddresses = (scope: string, addresses: string[]): string[] => {
+	return addresses.reduce<string[]>((result, address) => {
+		if (address.length > 0) {
+			result.push(`${scope}:${address}`);
+		}
+		return result;
+	}, []);
+};
diff --git a/playground/multichain-react/src/helpers/IdHelpers.ts b/playground/multichain-react/src/helpers/IdHelpers.ts
new file mode 100644
index 000000000..d68299024
--- /dev/null
+++ b/playground/multichain-react/src/helpers/IdHelpers.ts
@@ -0,0 +1,9 @@
+/**
+ * Escapes special characters in strings to make them valid HTML IDs.
+ * Currently replaces colons with dashes, but can be extended for other characters.
+ * @param value - The string to be escaped.
+ * @returns The escaped string that is safe to use as an HTML ID.
+ */
+export const escapeHtmlId = (value: string): string => {
+	return value.replace(/:/gu, '-');
+};
diff --git a/playground/multichain-react/src/helpers/JsonHelpers.ts b/playground/multichain-react/src/helpers/JsonHelpers.ts
new file mode 100644
index 000000000..5ea4f306d
--- /dev/null
+++ b/playground/multichain-react/src/helpers/JsonHelpers.ts
@@ -0,0 +1,40 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: OK */
+import type { ContentDescriptorObject, ExampleObject, ExamplePairingObject, MethodObject } from '@open-rpc/meta-schema';
+
+const paramsToObj = (params: any[], methodParams: ContentDescriptorObject[]): any => {
+	return params.reduce((acc, val, i) => {
+		const paramName = methodParams[i]?.name;
+		if (paramName) {
+			acc[paramName] = val;
+		}
+		return acc;
+	}, {});
+};
+
+export const openRPCExampleToJSON = (method: MethodObject) => {
+	if (!method.examples || method.examples.length === 0) {
+		return {
+			method: method.name,
+			params: [],
+		};
+	}
+	const examplePairing = method.examples?.[0];
+	const ex = examplePairing as ExamplePairingObject;
+	const paramsFromExample = ex.params.map((example) => (example as ExampleObject).value);
+	const params = method.paramStructure === 'by-name' ? paramsToObj(paramsFromExample, method.params as ContentDescriptorObject[]) : paramsFromExample;
+	return {
+		method: method.name,
+		params,
+	};
+};
+
+export const truncateJSON = (json: any, maxLength = 100): { text: string; truncated: boolean } => {
+	const originalStringified = JSON.stringify(json);
+	if (originalStringified.length <= maxLength) {
+		return { text: originalStringified, truncated: false };
+	}
+	return {
+		text: originalStringified.slice(0, maxLength),
+		truncated: true,
+	};
+};
diff --git a/playground/multichain-react/src/helpers/MethodInvocationHelpers.ts b/playground/multichain-react/src/helpers/MethodInvocationHelpers.ts
new file mode 100644
index 000000000..b28e918df
--- /dev/null
+++ b/playground/multichain-react/src/helpers/MethodInvocationHelpers.ts
@@ -0,0 +1,152 @@
+import type { SessionData } from '@metamask/multichain-sdk';
+import type { CaipChainId, Json, CaipAccountId } from '@metamask/utils';
+import type { MethodObject } from '@open-rpc/meta-schema';
+import type { Dispatch, SetStateAction } from 'react';
+
+/**
+ * Normalizes parameters for method invocation, ensuring they are always in array format
+ * and applying special handling for specific methods.
+ *
+ * @param method - The method name being invoked.
+ * @param params - The raw parameters.
+ * @returns Normalized parameters array.
+ */
+export const normalizeMethodParams = (method: string, params: Json): Json[] => {
+	// Ensure params is always an array for the SDK
+	let paramsArray = Array.isArray(params) ? params : [params];
+
+	// Special handling for eth_signTypedData_v3/v4: second parameter must be JSON string
+	if ((method === 'eth_signTypedData_v3' || method === 'eth_signTypedData_v4') && paramsArray.length >= 2) {
+		const firstParam = paramsArray[0];
+		const secondParam = paramsArray[1];
+
+		if (firstParam !== undefined && secondParam !== undefined) {
+			paramsArray = [
+				firstParam, // address (string)
+				typeof secondParam === 'string' ? secondParam : JSON.stringify(secondParam), // typed data (JSON string)
+			];
+		}
+	}
+
+	return paramsArray;
+};
+
+/**
+ * Updates the invoke method results state in an immutable way.
+ *
+ * @param previousResults - Previous invoke method results state.
+ * @param scope - The scope being updated.
+ * @param method - The method being updated.
+ * @param result - The result or error to add.
+ * @param request - The request that was made.
+ * @returns Updated results state.
+ */
+export const updateInvokeMethodResults = (
+	previousResults: Record<string, Record<string, { result: Json | Error; request: Json }[]>>,
+	scope: CaipChainId,
+	method: string,
+	result: Json | Error,
+	request: Json,
+) => {
+	const scopeResults = previousResults[scope] ?? {};
+	const methodResults = scopeResults[method] ?? [];
+	const newResults = {
+		...previousResults,
+		[scope]: {
+			...scopeResults,
+			[method]: [...methodResults, { result, request }],
+		},
+	};
+
+	return newResults;
+};
+
+export const extractRequestParams = (finalRequestObject: { params: { request: { params: Json } } }): Json => {
+	return finalRequestObject.params.request.params;
+};
+
+export const extractRequestForStorage = (finalRequestObject: { params: { request: Json } }): Json => {
+	return finalRequestObject.params.request;
+};
+
+/**
+ * Auto-selects the first available account for a scope if none is currently selected.
+ * Updates the provided setter function with the selected account.
+ *
+ * @param caipChainId - The CAIP chain ID of the scope.
+ * @param currentSelectedAccount - The currently selected account for this scope.
+ * @param currentSession - The current session object.
+ * @param setSelectedAccounts - Function to update the selected accounts state.
+ * @returns The selected account or null if none available.
+ */
+export const autoSelectAccountForScope = (
+	caipChainId: CaipChainId,
+	currentSelectedAccount: CaipAccountId | null,
+	currentSession: SessionData,
+	setSelectedAccounts: Dispatch<SetStateAction<Record<string, CaipAccountId | null>>>,
+): CaipAccountId | null => {
+	if (currentSelectedAccount) {
+		return currentSelectedAccount;
+	}
+
+	const scopeDetails = currentSession?.sessionScopes?.[caipChainId];
+	const [firstAccount] = scopeDetails?.accounts ?? [];
+
+	if (firstAccount) {
+		console.log(`🔧 Auto-selecting first account for ${caipChainId}: ${String(firstAccount)}`);
+
+		setSelectedAccounts((prev) => ({
+			...prev,
+			[caipChainId]: firstAccount,
+		}));
+
+		return firstAccount;
+	}
+
+	console.error(`❌ No accounts available for scope ${caipChainId}`);
+	return null;
+};
+
+/**
+ * Prepares a method request object for invocation.
+ *
+ * @param method - The method name to invoke.
+ * @param caipChainId - The CAIP chain ID.
+ * @param selectedAccount - The selected account for this scope.
+ * @param metamaskOpenrpcDocument - The MetaMask OpenRPC document.
+ * @param injectParams - Function to inject parameters for specific methods.
+ * @param openRPCExampleToJSON - Function to convert OpenRPC examples to JSON.
+ * @param METHODS_REQUIRING_PARAM_INJECTION - Object containing methods that require parameter injection.
+ * @returns The prepared request object or null if method not found.
+ */
+export const prepareMethodRequest = (
+	method: string,
+	caipChainId: CaipChainId,
+	selectedAccount: CaipAccountId | null,
+	// biome-ignore lint/suspicious/noExplicitAny: Needed
+	metamaskOpenrpcDocument: any,
+	injectParams: (method: string, params: Json, account: CaipAccountId, scope: CaipChainId) => Json,
+	openRPCExampleToJSON: (methodObj: MethodObject) => Json,
+	METHODS_REQUIRING_PARAM_INJECTION: Record<string, boolean>,
+): Json | null => {
+	const example = metamaskOpenrpcDocument?.methods.find((methodObj: MethodObject) => methodObj.name === method);
+
+	if (!example) {
+		console.error(`❌ No example found for method: ${method}`);
+		return null;
+	}
+
+	let exampleParams: Json = openRPCExampleToJSON(example as MethodObject);
+
+	if (method in METHODS_REQUIRING_PARAM_INJECTION && selectedAccount) {
+		exampleParams = injectParams(method, exampleParams, selectedAccount, caipChainId);
+	}
+
+	return {
+		method: 'wallet_invokeMethod',
+		params: {
+			scope: caipChainId,
+			request: exampleParams,
+		},
+	};
+};
diff --git a/playground/multichain-react/src/helpers/solana-method-signatures.ts b/playground/multichain-react/src/helpers/solana-method-signatures.ts
new file mode 100644
index 000000000..76ac0b27c
--- /dev/null
+++ b/playground/multichain-react/src/helpers/solana-method-signatures.ts
@@ -0,0 +1,127 @@
+import { Transaction, PublicKey, SystemProgram, Connection } from '@solana/web3.js';
+import type { Commitment } from '@solana/web3.js';
+
+import { FEATURED_NETWORKS } from '../constants/networks';
+
+const SOLANA_RPC_CONFIG = {
+	endpoints: [
+		...(process.env.REACT_APP_HELIUS_API_KEY ? [`https://api.helius-rpc.com/?api-key=${process.env.REACT_APP_HELIUS_API_KEY}`] : []),
+		'https://api.devnet.solana.com',
+		'https://api.mainnet-beta.solana.com',
+	],
+	commitment: 'confirmed' as Commitment,
+	fallbackBlockhash: 'EETubP5AKHgjPAhzPAFcb8BAY1hMH639CWCFTqi3hq1k',
+};
+
+const generateBase64Transaction = async (address: string) => {
+	const publicKey = new PublicKey(address);
+	// biome-ignore lint/suspicious/noExplicitAny: Needed
+	let blockhash: any;
+	// biome-ignore lint/suspicious/noExplicitAny: Needed
+	let error: any;
+
+	for (const endpoint of SOLANA_RPC_CONFIG.endpoints) {
+		try {
+			const connection = new Connection(endpoint, SOLANA_RPC_CONFIG.commitment);
+			const response = await connection.getLatestBlockhash();
+			blockhash = response.blockhash;
+			console.log(`Successfully connected to Solana RPC endpoint`);
+			break;
+		} catch (connectionError) {
+			console.error(`Failed to connect to RPC endpoint:`, connectionError);
+			error = connectionError;
+		}
+	}
+
+	if (!blockhash) {
+		console.warn('All RPC endpoints failed, using fallback blockhash');
+		blockhash = SOLANA_RPC_CONFIG.fallbackBlockhash;
+		console.error('Original error:', error);
+	}
+
+	const transaction = new Transaction();
+	transaction.recentBlockhash = blockhash;
+	transaction.feePayer = publicKey;
+
+	transaction.add(
+		SystemProgram.transfer({
+			fromPubkey: publicKey,
+			toPubkey: publicKey,
+			lamports: 1000,
+		}),
+	);
+
+	const serializedTransaction = transaction.serialize({
+		verifySignatures: false,
+	});
+
+	// Convert Uint8Array to base64 safely to avoid call stack overflow
+	const uint8Array = new Uint8Array(serializedTransaction);
+	let binaryString = '';
+	const chunkSize = 2048; // Process in chunks to avoid call stack limits
+
+	for (let i = 0; i < uint8Array.length; i += chunkSize) {
+		const chunk = uint8Array.slice(i, i + chunkSize);
+		binaryString += String.fromCharCode.apply(null, Array.from(chunk));
+	}
+
+	const base64Transaction = btoa(binaryString);
+
+	return base64Transaction;
+};
+
+const stringToBase64 = (str: string): string => {
+	const encoder = new TextEncoder();
+	const bytes = encoder.encode(str);
+	return btoa(String.fromCharCode.apply(null, [...bytes]));
+};
+
+export const generateSolanaMethodExamples = async (method: string, address: string) => {
+	switch (method) {
+		case 'signMessage':
+			return {
+				params: {
+					account: { address },
+					message: stringToBase64('Hello, world!'),
+				},
+			};
+		case 'signTransaction':
+			return {
+				params: {
+					account: { address },
+					transaction: await generateBase64Transaction(address),
+					scope: FEATURED_NETWORKS['Solana Mainnet'],
+				},
+			};
+		case 'signAllTransactions':
+			return {
+				params: {
+					account: { address },
+					transactions: [await generateBase64Transaction(address), await generateBase64Transaction(address)],
+					scope: FEATURED_NETWORKS['Solana Mainnet'],
+				},
+			};
+		case 'signAndSendTransaction':
+			return {
+				params: {
+					account: { address },
+					transaction: await generateBase64Transaction(address),
+					scope: FEATURED_NETWORKS['Solana Mainnet'],
+				},
+			};
+		case 'signIn':
+			return {
+				params: {
+					address,
+					domain: window.location.host,
+					statement: 'Please sign in.',
+				},
+			};
+		case 'getGenesisHash':
+			return {
+				params: {},
+			};
+		default:
+			return {};
+	}
+};
diff --git a/playground/multichain-react/src/index.css b/playground/multichain-react/src/index.css
new file mode 100644
index 000000000..913cfa37c
--- /dev/null
+++ b/playground/multichain-react/src/index.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+/* Details element animation */
+details[open] summary svg {
+	transform: rotate(90deg);
+}
+
+details summary {
+	list-style: none;
+}
+
+details summary::-webkit-details-marker {
+	display: none;
+}
diff --git a/playground/multichain-react/src/index.tsx b/playground/multichain-react/src/index.tsx
new file mode 100644
index 000000000..3754ceaf1
--- /dev/null
+++ b/playground/multichain-react/src/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+);
diff --git a/playground/multichain-react/src/logo.svg b/playground/multichain-react/src/logo.svg
new file mode 100644
index 000000000..9dfc1c058
--- /dev/null
+++ b/playground/multichain-react/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/playground/multichain-react/src/sdk/index.ts b/playground/multichain-react/src/sdk/index.ts
new file mode 100644
index 000000000..ad8081375
--- /dev/null
+++ b/playground/multichain-react/src/sdk/index.ts
@@ -0,0 +1 @@
+export { useSDK } from './useSDK';
diff --git a/playground/multichain-react/src/sdk/useSDK.ts b/playground/multichain-react/src/sdk/useSDK.ts
new file mode 100644
index 000000000..5c44d6623
--- /dev/null
+++ b/playground/multichain-react/src/sdk/useSDK.ts
@@ -0,0 +1,105 @@
+/* eslint-disable */
+
+import { createMetamaskSDK, type InvokeMethodOptions, type MultichainCore, type Scope, type SessionData } from '@metamask/multichain-sdk';
+import type { CaipAccountId } from '@metamask/utils';
+import { useCallback, useEffect, useState } from 'react';
+export const METAMASK_PROD_CHROME_ID = 'nkbihfbeogaeaoehlefnkodbefgpgknn';
+
+type SDKOptions = {
+	onSessionChanged?: (session: SessionData | undefined) => void;
+	extensionId?: string;
+};
+
+export function useSDK({ extensionId }: SDKOptions) {
+	const [sdk, setSdk] = useState<MultichainCore>();
+	const [currentExtensionId, setCurrentExtensionId] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [currentSession, setCurrentSession] = useState<SessionData | undefined>(undefined);
+
+	const initializeSDK = useCallback(async (extensionId?: string) => {
+		try {
+			const newSdk = await createMetamaskSDK({
+				dapp: {
+					name: 'playground',
+					url: 'https://playground.metamask.io',
+				},
+				analytics: {
+					enabled: false,
+				},
+				ui: {
+					headless: false,
+				},
+				...(extensionId && {
+					transport: {
+						extensionId: extensionId,
+					},
+				}),
+			});
+
+			// Set up event listener immediately after SDK creation
+			const unsubscribe = newSdk.on('session_changed', (session) => {
+				setCurrentSession(session);
+			});
+
+			// Initialize the SDK if it's still pending
+			if (newSdk.state === 'pending') {
+				await newSdk.init();
+			}
+
+			setSdk(newSdk);
+			return unsubscribe;
+		} catch (error: any) {
+			setError(error.message);
+			return undefined;
+		}
+	}, []);
+
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined;
+
+		if (extensionId && currentExtensionId !== extensionId) {
+			setCurrentExtensionId(extensionId);
+			// Reinitialize SDK with new extension ID
+			initializeSDK(extensionId).then((unsub) => {
+				unsubscribe = unsub;
+			});
+		} else if (!sdk) {
+			// Initialize SDK for the first time
+			initializeSDK(extensionId).then((unsub) => {
+				unsubscribe = unsub;
+			});
+		}
+
+		return () => {
+			unsubscribe?.();
+		};
+	}, [sdk, extensionId, currentExtensionId, initializeSDK]);
+
+	const disconnect = useCallback(async () => {
+		await sdk?.disconnect();
+	}, [sdk]);
+
+	const connect = useCallback(
+		async (scopes: Scope[], caipAccountIds: CaipAccountId[]) => {
+			await sdk?.connect(scopes, caipAccountIds);
+		},
+		[sdk],
+	);
+
+	const invokeMethod = useCallback(
+		async (options: InvokeMethodOptions) => {
+			return sdk?.invokeMethod(options);
+		},
+		[sdk],
+	);
+
+	return {
+		isConnected: currentSession !== undefined,
+		session: currentSession,
+		error,
+		connect,
+		disconnect,
+		invokeMethod,
+		storage: sdk?.storage,
+	};
+}
diff --git a/playground/multichain-react/src/setupTests.ts b/playground/multichain-react/src/setupTests.ts
new file mode 100644
index 000000000..75b7e4438
--- /dev/null
+++ b/playground/multichain-react/src/setupTests.ts
@@ -0,0 +1,6 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+// eslint-disable-next-line import/no-unassigned-import
+import '@testing-library/jest-dom';
diff --git a/playground/multichain-react/tailwind.config.js b/playground/multichain-react/tailwind.config.js
new file mode 100644
index 000000000..1490793a2
--- /dev/null
+++ b/playground/multichain-react/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/playground/multichain-react/tsconfig.build.json b/playground/multichain-react/tsconfig.build.json
new file mode 100644
index 000000000..526997db4
--- /dev/null
+++ b/playground/multichain-react/tsconfig.build.json
@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "inlineSources": true,
+    "noEmit": false,
+    "outDir": "build",
+    "rootDir": "src",
+    "sourceMap": true
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": [
+    "./src/**/__fixtures__/**/*",
+    "./src/**/__mocks__/**/*",
+    "./src/**/__test__/**/*",
+    "./src/**/__tests__/**/*",
+    "./src/**/__snapshots__/**/*",
+    "./src/**/*.test.ts",
+    "./src/**/*.test-d.ts",
+    "./src/**/*.test.*.ts"
+  ]
+}
diff --git a/playground/multichain-react/tsconfig.json b/playground/multichain-react/tsconfig.json
new file mode 100644
index 000000000..b55836677
--- /dev/null
+++ b/playground/multichain-react/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "exactOptionalPropertyTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM"],
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noErrorTruncation": true,
+    "noUncheckedIndexedAccess": true,
+    "useUnknownInCatchVariables": false,
+    "strict": true,
+    "target": "es2020",
+    "jsx": "react-jsx"
+  },
+  "exclude": ["./build", "**/node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index 5397870ee..0a57b8851 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1723,6 +1723,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.28.3":
+  version: 7.28.4
+  resolution: "@babel/parser@npm:7.28.4"
+  dependencies:
+    "@babel/types": ^7.28.4
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: d95e283fe1153039b396926ef567ca1ab114afb5c732a23bbcbbd0465ac59971aeb6a63f37593ce7671a52d34ec52b23008c999d68241b42d26928c540464063
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.7"
@@ -5836,6 +5847,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.25.0":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 934b0a0460f7d06637d93fcd1a44ac49adc33518d17253b5a0b55ff4cb90a45d8fe78bf034b448911dbec7aff2a90b918697559f78d21c99ff8dbadae9565b55
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
@@ -6113,6 +6131,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/types@npm:7.28.4"
+  dependencies:
+    "@babel/helper-string-parser": ^7.27.1
+    "@babel/helper-validator-identifier": ^7.27.1
+  checksum: a369b4fb73415a2ed902a15576b49696ae9777ddee394a7a904c62e6fbb31f43906b0147ae0b8f03ac17f20c248eac093df349e33c65c94617b12e524b759694
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -9752,6 +9780,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/core@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/core@npm:28.1.3"
+  dependencies:
+    "@jest/console": ^28.1.3
+    "@jest/reporters": ^28.1.3
+    "@jest/test-result": ^28.1.3
+    "@jest/transform": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+    ansi-escapes: ^4.2.1
+    chalk: ^4.0.0
+    ci-info: ^3.2.0
+    exit: ^0.1.2
+    graceful-fs: ^4.2.9
+    jest-changed-files: ^28.1.3
+    jest-config: ^28.1.3
+    jest-haste-map: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-regex-util: ^28.0.2
+    jest-resolve: ^28.1.3
+    jest-resolve-dependencies: ^28.1.3
+    jest-runner: ^28.1.3
+    jest-runtime: ^28.1.3
+    jest-snapshot: ^28.1.3
+    jest-util: ^28.1.3
+    jest-validate: ^28.1.3
+    jest-watcher: ^28.1.3
+    micromatch: ^4.0.4
+    pretty-format: ^28.1.3
+    rimraf: ^3.0.0
+    slash: ^3.0.0
+    strip-ansi: ^6.0.0
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  checksum: cb79f34bafc4637e7130df12257f5b29075892a2be2c7f45c6d4c0420853e80b5dae11016e652530eb234f4c44c00910cdca3c2cd86275721860725073f7d9b4
+  languageName: node
+  linkType: hard
+
 "@jest/core@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/core@npm:29.6.1"
@@ -9896,6 +9966,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/environment@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/environment@npm:28.1.3"
+  dependencies:
+    "@jest/fake-timers": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+    jest-mock: ^28.1.3
+  checksum: 14c496b84aef951df33128cea68988e9de43b2e9d62be9f9c4308d4ac307fa345642813679f80d0a4cedeb900cf6f0b6bb2b92ce089528e8721f72295fdc727f
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/environment@npm:29.6.1"
@@ -9932,6 +10014,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/expect-utils@npm:28.1.3"
+  dependencies:
+    jest-get-type: ^28.0.2
+  checksum: 808ea3a68292a7e0b95490fdd55605c430b4cf209ea76b5b61bfb2a1badcb41bc046810fe4e364bd5fe04663978aa2bd73d8f8465a761dd7c655aeb44cf22987
+  languageName: node
+  linkType: hard
+
 "@jest/expect-utils@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/expect-utils@npm:29.6.1"
@@ -9959,6 +10050,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/expect@npm:28.1.3"
+  dependencies:
+    expect: ^28.1.3
+    jest-snapshot: ^28.1.3
+  checksum: 4197f6fdddc33dc45ba4e838f992fc61839c421d7aed0dfe665ef9c2f172bb1df8a8cac9cecee272b40e744a326da521d5e182709fe82a0b936055bfffa3b473
+  languageName: node
+  linkType: hard
+
 "@jest/expect@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/expect@npm:29.6.1"
@@ -10003,6 +10104,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/fake-timers@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/fake-timers@npm:28.1.3"
+  dependencies:
+    "@jest/types": ^28.1.3
+    "@sinonjs/fake-timers": ^9.1.2
+    "@types/node": "*"
+    jest-message-util: ^28.1.3
+    jest-mock: ^28.1.3
+    jest-util: ^28.1.3
+  checksum: cec14d5b14913a54dce64a62912c5456235f5d90b509ceae19c727565073114dae1aaf960ac6be96b3eb94789a3a758b96b72c8fca7e49a6ccac415fbc0321e1
+  languageName: node
+  linkType: hard
+
 "@jest/fake-timers@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/fake-timers@npm:29.6.1"
@@ -10056,6 +10171,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/globals@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/globals@npm:28.1.3"
+  dependencies:
+    "@jest/environment": ^28.1.3
+    "@jest/expect": ^28.1.3
+    "@jest/types": ^28.1.3
+  checksum: 3504bb23de629d466c6f2b6b75d2e1c1b10caccbbcfb7eaa82d22cc37711c8e364c243929581184846605c023b475ea6c42c2e3ea5994429a988d8d527af32cd
+  languageName: node
+  linkType: hard
+
 "@jest/globals@npm:^29.3.1, @jest/globals@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/globals@npm:29.6.1"
@@ -10130,6 +10256,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/reporters@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/reporters@npm:28.1.3"
+  dependencies:
+    "@bcoe/v8-coverage": ^0.2.3
+    "@jest/console": ^28.1.3
+    "@jest/test-result": ^28.1.3
+    "@jest/transform": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@jridgewell/trace-mapping": ^0.3.13
+    "@types/node": "*"
+    chalk: ^4.0.0
+    collect-v8-coverage: ^1.0.0
+    exit: ^0.1.2
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    istanbul-lib-coverage: ^3.0.0
+    istanbul-lib-instrument: ^5.1.0
+    istanbul-lib-report: ^3.0.0
+    istanbul-lib-source-maps: ^4.0.0
+    istanbul-reports: ^3.1.3
+    jest-message-util: ^28.1.3
+    jest-util: ^28.1.3
+    jest-worker: ^28.1.3
+    slash: ^3.0.0
+    string-length: ^4.0.1
+    strip-ansi: ^6.0.0
+    terminal-link: ^2.0.0
+    v8-to-istanbul: ^9.0.1
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  checksum: a7440887ce837922cbeaa64c3232eb48aae02aa9123f29fc4280ad3e1afe4b35dcba171ba1d5fd219037c396c5152d9c2d102cff1798dd5ae3bd33ac4759ae0a
+  languageName: node
+  linkType: hard
+
 "@jest/reporters@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/reporters@npm:29.6.1"
@@ -10279,6 +10443,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/source-map@npm:^28.1.2":
+  version: 28.1.2
+  resolution: "@jest/source-map@npm:28.1.2"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.13
+    callsites: ^3.0.0
+    graceful-fs: ^4.2.9
+  checksum: b82a5c2e93d35d86779c61a02ccb967d1b5cd2e9dd67d26d8add44958637cbbb99daeeb8129c7653389cb440dc2a2f5ae4d2183dc453c67669ff98938b775a3a
+  languageName: node
+  linkType: hard
+
 "@jest/source-map@npm:^29.6.0":
   version: 29.6.0
   resolution: "@jest/source-map@npm:29.6.0"
@@ -10373,6 +10548,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/test-sequencer@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/test-sequencer@npm:28.1.3"
+  dependencies:
+    "@jest/test-result": ^28.1.3
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^28.1.3
+    slash: ^3.0.0
+  checksum: 13f8905e6d1ec8286694146f7be3cf90eff801bbdea5e5c403e6881444bb390ed15494c7b9948aa94bd7e9c9a851e0d3002ed6e7371d048b478596e5b23df953
+  languageName: node
+  linkType: hard
+
 "@jest/test-sequencer@npm:^29.6.1":
   version: 29.6.1
   resolution: "@jest/test-sequencer@npm:29.6.1"
@@ -10432,6 +10619,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/transform@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/transform@npm:28.1.3"
+  dependencies:
+    "@babel/core": ^7.11.6
+    "@jest/types": ^28.1.3
+    "@jridgewell/trace-mapping": ^0.3.13
+    babel-plugin-istanbul: ^6.1.1
+    chalk: ^4.0.0
+    convert-source-map: ^1.4.0
+    fast-json-stable-stringify: ^2.0.0
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^28.1.3
+    jest-regex-util: ^28.0.2
+    jest-util: ^28.1.3
+    micromatch: ^4.0.4
+    pirates: ^4.0.4
+    slash: ^3.0.0
+    write-file-atomic: ^4.0.1
+  checksum: dadf618936e0aa84342f07f532801d5bed43cdf95d1417b929e4f8782c872cff1adc84096d5a287a796d0039a2691c06d8450cce5a713a8b52fbb9f872a1e760
+  languageName: node
+  linkType: hard
+
 "@jest/transform@npm:^29.3.1, @jest/transform@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/transform@npm:29.7.0"
@@ -10657,6 +10867,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: c2e36e67971f719a8a3a85ef5a5f580622437cc723c35d03ebd0c9c0b06418700ef006f58af742791f71f6a4fc68fcfaf1f6a74ec2f9a3332860e9373459dae7
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:0.3.9":
   version: 0.3.9
   resolution: "@jridgewell/trace-mapping@npm:0.3.9"
@@ -10677,6 +10894,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.13":
+  version: 0.3.31
+  resolution: "@jridgewell/trace-mapping@npm:0.3.31"
+  dependencies:
+    "@jridgewell/resolve-uri": ^3.1.0
+    "@jridgewell/sourcemap-codec": ^1.4.14
+  checksum: af8fda2431348ad507fbddf8e25f5d08c79ecc94594061ce402cf41bc5aba1a7b3e59bf0fd70a619b35f33983a3f488ceeba8faf56bff784f98bb5394a8b7d47
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.20":
   version: 0.3.24
   resolution: "@jridgewell/trace-mapping@npm:0.3.24"
@@ -10721,6 +10948,48 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@json-schema-spec/json-pointer@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "@json-schema-spec/json-pointer@npm:0.1.2"
+  checksum: 2a691ffc11f1a266ca4d0c9e2c99791679d580f343ef69746fad623d1abcf4953adde987890e41f906767d7729604c0182341e9012388b73a44d5b21fb296453
+  languageName: node
+  linkType: hard
+
+"@json-schema-tools/dereferencer@npm:^1.6.3":
+  version: 1.6.3
+  resolution: "@json-schema-tools/dereferencer@npm:1.6.3"
+  dependencies:
+    "@json-schema-tools/reference-resolver": ^1.2.6
+    "@json-schema-tools/traverse": ^1.10.4
+    fast-safe-stringify: ^2.1.1
+  checksum: cbb6b0fea6b0b928a943593daa8345717a2b6501015688b22a91bf9ddca027f9d157268c7340b2c7dd94d5a92dca00ec11335679bb9d236b6a43e349f9d3f4a2
+  languageName: node
+  linkType: hard
+
+"@json-schema-tools/meta-schema@npm:^1.7.5":
+  version: 1.7.5
+  resolution: "@json-schema-tools/meta-schema@npm:1.7.5"
+  checksum: c34122cb0d85901d775b3acacc4847501a145d5e944d8d5e99a55137ba4a22a9a79738014a4944e7c5b9c61af17abe16871eb8d33c29e2a5bdaa8a7c2691b598
+  languageName: node
+  linkType: hard
+
+"@json-schema-tools/reference-resolver@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "@json-schema-tools/reference-resolver@npm:1.2.6"
+  dependencies:
+    "@json-schema-spec/json-pointer": ^0.1.2
+    isomorphic-fetch: ^3.0.0
+  checksum: ba3d549365b4a5e27958bf367ed440e9584d8f396aeccb09065c5300e1bc4abf66d3a60d15d05e7e61d85a42c0c434d14d6b645769c530030191a7eb5c4840e8
+  languageName: node
+  linkType: hard
+
+"@json-schema-tools/traverse@npm:^1.10.4":
+  version: 1.11.0
+  resolution: "@json-schema-tools/traverse@npm:1.11.0"
+  checksum: 31f145c91156806153b9aea4391784c2ccbc69cf85548a2180c144d2ac087d46c2e31dda2e4a3c6262066854ca1ecc04d0627d5732ea36f63ede3e9505e400c1
+  languageName: node
+  linkType: hard
+
 "@juggle/resize-observer@npm:^3.3.1":
   version: 3.4.0
   resolution: "@juggle/resize-observer@npm:3.4.0"
@@ -10739,6 +11008,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lavamoat/aa@npm:^4.3.4":
+  version: 4.3.4
+  resolution: "@lavamoat/aa@npm:4.3.4"
+  dependencies:
+    resolve: 1.22.10
+  bin:
+    lavamoat-ls: src/cli.js
+  checksum: d9a4c6c70f0ff96c0cdb779e65a853ef4f1bc7a2074d2174573bf8434ecd9b2fa3b057c4b012187e945146913ede3c8343376443c1248920c977c1a206a5e5b5
+  languageName: node
+  linkType: hard
+
 "@lavamoat/allow-scripts@npm:^2.3.1":
   version: 2.3.1
   resolution: "@lavamoat/allow-scripts@npm:2.3.1"
@@ -10754,6 +11034,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lavamoat/allow-scripts@npm:^3.0.4":
+  version: 3.3.5
+  resolution: "@lavamoat/allow-scripts@npm:3.3.5"
+  dependencies:
+    "@lavamoat/aa": ^4.3.4
+    "@npmcli/run-script": 8.1.0
+    bin-links: 4.0.4
+    npm-normalize-package-bin: 3.0.1
+    type-fest: 4.41.0
+    yargs: 17.7.2
+  bin:
+    allow-scripts: src/cli.js
+  checksum: 3e84949d69f848c32850a08a436c870c6766511ba4b9c0179c63cbde4206e78e9a2c79eae613023c9ae9b4e5b7c2fabb50b24435144555ed7524008e9c71b15a
+  languageName: node
+  linkType: hard
+
+"@lavamoat/preinstall-always-fail@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "@lavamoat/preinstall-always-fail@npm:2.1.1"
+  checksum: 679cfd6b981326bf6f7cce63af4062b1e1e2ffaefd4db316e918ec41ac089c835aafd7f2bb5193cd25538e084d3df1375cd2ac5a52c3e7777aedeb2ee507dd29
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.4
   resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
@@ -10810,6 +11113,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/api-specs@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@metamask/api-specs@npm:0.14.0"
+  checksum: 5d0e6c612febc715fc03646256af5c6260c2835d0ca6efabe4b44ad1f175d45b8b51128861f1a839c38da9640e1bddfc686c64b6fb7fbf2871a47a240530a876
+  languageName: node
+  linkType: hard
+
 "@metamask/auto-changelog@npm:3.1.0":
   version: 3.1.0
   resolution: "@metamask/auto-changelog@npm:3.1.0"
@@ -11257,7 +11567,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@metamask/multichain-sdk@workspace:*, @metamask/multichain-sdk@workspace:packages/sdk-multichain":
+"@metamask/multichain-sdk@workspace:*, @metamask/multichain-sdk@workspace:^, @metamask/multichain-sdk@workspace:packages/sdk-multichain":
   version: 0.0.0-use.local
   resolution: "@metamask/multichain-sdk@workspace:packages/sdk-multichain"
   dependencies:
@@ -11630,6 +11940,45 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@metamask/sdk-multichain-react@workspace:playground/multichain-react":
+  version: 0.0.0-use.local
+  resolution: "@metamask/sdk-multichain-react@workspace:playground/multichain-react"
+  dependencies:
+    "@biomejs/biome": 2.0.0
+    "@craco/craco": ^7.1.0
+    "@lavamoat/allow-scripts": ^3.0.4
+    "@lavamoat/preinstall-always-fail": ^2.0.0
+    "@metamask/api-specs": ^0.14.0
+    "@metamask/auto-changelog": ^3.4.3
+    "@metamask/multichain-sdk": "workspace:^"
+    "@metamask/utils": ^11.0.0
+    "@open-rpc/meta-schema": ^1.14.9
+    "@open-rpc/schema-utils-js": ^2.0.5
+    "@solana/web3.js": ^1.98.0
+    "@testing-library/jest-dom": ^5.17.0
+    "@testing-library/react": ^13.4.0
+    "@types/chrome": ^0.0.279
+    "@types/jest": ^28.1.6
+    "@types/node": ^18.18
+    "@types/react": ^19.1.8
+    "@yarnpkg/types": ^4.0.0-rc.52
+    autoprefixer: ^10.4.21
+    buffer: ^6.0.3
+    depcheck: ^1.4.3
+    jest: ^28.1.3
+    postcss: ^8.5.6
+    prettier: ^2.7.1
+    prettier-plugin-packagejson: ^2.3.0
+    process: ^0.11.10
+    react: ^18.3.1
+    react-dom: ^18.3.1
+    react-scripts: 5.0.1
+    tailwindcss: ^4.1.11
+    ts-node: ^10.7.0
+    typescript: ~4.8.4
+  languageName: unknown
+  linkType: soft
+
 "@metamask/sdk-multichain-ui@workspace:^, @metamask/sdk-multichain-ui@workspace:packages/sdk-multichain-ui":
   version: 0.0.0-use.local
   resolution: "@metamask/sdk-multichain-ui@workspace:packages/sdk-multichain-ui"
@@ -12204,6 +12553,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/utils@npm:^11.0.0":
+  version: 11.8.0
+  resolution: "@metamask/utils@npm:11.8.0"
+  dependencies:
+    "@ethereumjs/tx": ^4.2.0
+    "@metamask/superstruct": ^3.1.0
+    "@noble/hashes": ^1.3.1
+    "@scure/base": ^1.1.3
+    "@types/debug": ^4.1.7
+    "@types/lodash": ^4.17.20
+    debug: ^4.3.4
+    lodash: ^4.17.21
+    pony-cause: ^2.1.10
+    semver: ^7.5.4
+    uuid: ^9.0.1
+  checksum: 61f0eb5f9066ea7f59637389910698d78e48fc810669d156dc1cfea879699cbc12644933ee04929dfc14bc100440a241003a1b68de9e0c41f292c4f290af1ae6
+  languageName: node
+  linkType: hard
+
 "@metamask/utils@npm:^11.4.0":
   version: 11.4.2
   resolution: "@metamask/utils@npm:11.4.2"
@@ -12823,6 +13191,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@noble/curves@npm:^1.4.2, @noble/curves@npm:^1.9.1":
+  version: 1.9.7
+  resolution: "@noble/curves@npm:1.9.7"
+  dependencies:
+    "@noble/hashes": 1.8.0
+  checksum: 65acad44ac6944ab96471109087d6cfcbcaa251faad6295961be9a5ace220634f4b7c74a96d1ee2274ad3880ea953d8e8259893ed8c906c831ef29f5c04ec9cc
+  languageName: node
+  linkType: hard
+
 "@noble/curves@npm:^1.6.0":
   version: 1.6.0
   resolution: "@noble/curves@npm:1.6.0"
@@ -12832,15 +13209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/curves@npm:^1.9.1":
-  version: 1.9.7
-  resolution: "@noble/curves@npm:1.9.7"
-  dependencies:
-    "@noble/hashes": 1.8.0
-  checksum: 65acad44ac6944ab96471109087d6cfcbcaa251faad6295961be9a5ace220634f4b7c74a96d1ee2274ad3880ea953d8e8259893ed8c906c831ef29f5c04ec9cc
-  languageName: node
-  linkType: hard
-
 "@noble/curves@npm:~1.4.0":
   version: 1.4.2
   resolution: "@noble/curves@npm:1.4.2"
@@ -12919,6 +13287,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "@npmcli/agent@npm:2.2.2"
+  dependencies:
+    agent-base: ^7.1.0
+    http-proxy-agent: ^7.0.0
+    https-proxy-agent: ^7.0.1
+    lru-cache: ^10.0.1
+    socks-proxy-agent: ^8.0.3
+  checksum: 67de7b88cc627a79743c88bab35e023e23daf13831a8aa4e15f998b92f5507b644d8ffc3788afc8e64423c612e0785a6a92b74782ce368f49a6746084b50d874
+  languageName: node
+  linkType: hard
+
 "@npmcli/fs@npm:^1.0.0":
   version: 1.1.1
   resolution: "@npmcli/fs@npm:1.1.1"
@@ -12938,6 +13319,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/git@npm:^5.0.0":
+  version: 5.0.8
+  resolution: "@npmcli/git@npm:5.0.8"
+  dependencies:
+    "@npmcli/promise-spawn": ^7.0.0
+    ini: ^4.1.3
+    lru-cache: ^10.0.1
+    npm-pick-manifest: ^9.0.0
+    proc-log: ^4.0.0
+    promise-inflight: ^1.0.1
+    promise-retry: ^2.0.1
+    semver: ^7.3.5
+    which: ^4.0.0
+  checksum: 8c1733b591e428719c60fceaca74b3355967f6ddbce851c0d163a3c2e8123aaa717361b8226f8f8e606685f14721ea97d8f99c4b5831bc9251007bb1a20663cd
+  languageName: node
+  linkType: hard
+
 "@npmcli/move-file@npm:^1.0.1":
   version: 1.1.2
   resolution: "@npmcli/move-file@npm:1.1.2"
@@ -12955,6 +13353,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/package-json@npm:^5.0.0":
+  version: 5.2.1
+  resolution: "@npmcli/package-json@npm:5.2.1"
+  dependencies:
+    "@npmcli/git": ^5.0.0
+    glob: ^10.2.2
+    hosted-git-info: ^7.0.0
+    json-parse-even-better-errors: ^3.0.0
+    normalize-package-data: ^6.0.0
+    proc-log: ^4.0.0
+    semver: ^7.5.3
+  checksum: f9f76428fb3b3350fe840f1fa49854d18ff1ecb82b426c9cf53a62a37389c357a89d64a07497f50b7fbf1c742f5a0cd349d8efdddef0bb6982497f8356c1f98a
+  languageName: node
+  linkType: hard
+
 "@npmcli/promise-spawn@npm:^6.0.0":
   version: 6.0.2
   resolution: "@npmcli/promise-spawn@npm:6.0.2"
@@ -12964,6 +13377,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@npmcli/promise-spawn@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "@npmcli/promise-spawn@npm:7.0.2"
+  dependencies:
+    which: ^4.0.0
+  checksum: 728256506ecbafb53064036e28c2815b9a9e9190ba7a48eec77b011a9f8a899515a6d96760dbde960bc1d3e5b828fd0b0b7fe3b512efaf049d299bacbd732fda
+  languageName: node
+  linkType: hard
+
+"@npmcli/run-script@npm:8.1.0":
+  version: 8.1.0
+  resolution: "@npmcli/run-script@npm:8.1.0"
+  dependencies:
+    "@npmcli/node-gyp": ^3.0.0
+    "@npmcli/package-json": ^5.0.0
+    "@npmcli/promise-spawn": ^7.0.0
+    node-gyp: ^10.0.0
+    proc-log: ^4.0.0
+    which: ^4.0.0
+  checksum: 21adfb308b9064041d6d2f7f0d53924be0e1466d558de1c9802fab9eb84850bd8e04fdd5695924f331e1a36565461500d912e187909f91c03188cc763a106986
+  languageName: node
+  linkType: hard
+
 "@npmcli/run-script@npm:^6.0.0":
   version: 6.0.2
   resolution: "@npmcli/run-script@npm:6.0.2"
@@ -13001,6 +13437,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@open-rpc/meta-schema@npm:^1.14.9":
+  version: 1.14.9
+  resolution: "@open-rpc/meta-schema@npm:1.14.9"
+  checksum: c810b7540c02ef6d81618004103652bbf6a32f584926bdbdeda99a037ca5c4eb4a45e47895ce9f7b9bdd13d359e43dee2046324d666eccd8eee693c736f96875
+  languageName: node
+  linkType: hard
+
+"@open-rpc/schema-utils-js@npm:^2.0.5":
+  version: 2.1.2
+  resolution: "@open-rpc/schema-utils-js@npm:2.1.2"
+  dependencies:
+    "@json-schema-tools/dereferencer": ^1.6.3
+    "@json-schema-tools/meta-schema": ^1.7.5
+    "@json-schema-tools/reference-resolver": ^1.2.6
+    "@open-rpc/meta-schema": ^1.14.9
+    "@open-rpc/specification-extension-spec": ^1.0.2
+    ajv: ^6.10.0
+    detect-node: ^2.0.4
+    fast-safe-stringify: ^2.0.7
+    fs-extra: ^10.1.0
+    is-url: ^1.2.4
+    isomorphic-fetch: ^3.0.0
+  checksum: db2eeb31c3cbb842ab01a19cbb2feb4ea48b43872704d982235934c92d9b01a571736ba82447a0b74c2ba22ed364f5e4b00ca7cdf2966adb276f6a82a8c77aef
+  languageName: node
+  linkType: hard
+
+"@open-rpc/specification-extension-spec@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@open-rpc/specification-extension-spec@npm:1.0.2"
+  checksum: ef209ed30ac9af4303fa0b23af5edc8b7406f8c38b7eb9e070224d80b8daca8eddcb921f0d3fd0d627d14e80ec69912d5a43385d953453d83c8e7864f6198735
+  languageName: node
+  linkType: hard
+
 "@opentelemetry/api@npm:^1.4.0":
   version: 1.9.0
   resolution: "@opentelemetry/api@npm:1.9.0"
@@ -13174,6 +13643,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@pkgr/core@npm:0.2.9"
+  checksum: bb2fb86977d63f836f8f5b09015d74e6af6488f7a411dcd2bfdca79d76b5a681a9112f41c45bdf88a9069f049718efc6f3900d7f1de66a2ec966068308ae517f
+  languageName: node
+  linkType: hard
+
 "@pkgr/utils@npm:^2.3.1":
   version: 2.4.2
   resolution: "@pkgr/utils@npm:2.4.2"
@@ -16134,6 +16610,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sinonjs/fake-timers@npm:^9.1.2":
+  version: 9.1.2
+  resolution: "@sinonjs/fake-timers@npm:9.1.2"
+  dependencies:
+    "@sinonjs/commons": ^1.7.0
+  checksum: 7d3aef54e17c1073101cb64d953157c19d62a40e261a30923fa1ee337b049c5f29cc47b1f0c477880f42b5659848ba9ab897607ac8ea4acd5c30ddcfac57fca6
+  languageName: node
+  linkType: hard
+
 "@sitespeed.io/tracium@npm:^0.3.3":
   version: 0.3.3
   resolution: "@sitespeed.io/tracium@npm:0.3.3"
@@ -16259,7 +16744,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@solana/buffer-layout@npm:^4.0.0":
+"@solana/buffer-layout@npm:^4.0.0, @solana/buffer-layout@npm:^4.0.1":
   version: 4.0.1
   resolution: "@solana/buffer-layout@npm:4.0.1"
   dependencies:
@@ -16268,6 +16753,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@solana/codecs-core@npm:2.3.0":
+  version: 2.3.0
+  resolution: "@solana/codecs-core@npm:2.3.0"
+  dependencies:
+    "@solana/errors": 2.3.0
+  peerDependencies:
+    typescript: ">=5.3.3"
+  checksum: 037f4d40ab89bf9db9139a3aedfc4a39f8b044d2093216c0e8a7306edfaf93fbc0d5c49e6011fb3caeb2b69e97601f3c339a3201109b64e005993aa203814810
+  languageName: node
+  linkType: hard
+
+"@solana/codecs-numbers@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@solana/codecs-numbers@npm:2.3.0"
+  dependencies:
+    "@solana/codecs-core": 2.3.0
+    "@solana/errors": 2.3.0
+  peerDependencies:
+    typescript: ">=5.3.3"
+  checksum: 8b8f88eeeec0eb8e7622c82d3ac580672c28d84ff243eddf40cfa1da4645d34b1c8d3dfd7364fa7f76a3cc0e05ffbb69fcb46d35880184e8eca465a9836bb5ee
+  languageName: node
+  linkType: hard
+
+"@solana/errors@npm:2.3.0":
+  version: 2.3.0
+  resolution: "@solana/errors@npm:2.3.0"
+  dependencies:
+    chalk: ^5.4.1
+    commander: ^14.0.0
+  peerDependencies:
+    typescript: ">=5.3.3"
+  bin:
+    errors: bin/cli.mjs
+  checksum: 7ddb4113de064f693bde01daffc31f880125b4e89d16ee22e1e5c82bb5505fe8445ecf32451538d201fd36ff999bce7bb53e541104cc353c8f32cec6430331b5
+  languageName: node
+  linkType: hard
+
 "@solana/web3.js@npm:^1.70.1":
   version: 1.78.0
   resolution: "@solana/web3.js@npm:1.78.0"
@@ -16291,6 +16813,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@solana/web3.js@npm:^1.98.0":
+  version: 1.98.4
+  resolution: "@solana/web3.js@npm:1.98.4"
+  dependencies:
+    "@babel/runtime": ^7.25.0
+    "@noble/curves": ^1.4.2
+    "@noble/hashes": ^1.4.0
+    "@solana/buffer-layout": ^4.0.1
+    "@solana/codecs-numbers": ^2.1.0
+    agentkeepalive: ^4.5.0
+    bn.js: ^5.2.1
+    borsh: ^0.7.0
+    bs58: ^4.0.1
+    buffer: 6.0.3
+    fast-stable-stringify: ^1.0.0
+    jayson: ^4.1.1
+    node-fetch: ^2.7.0
+    rpc-websockets: ^9.0.2
+    superstruct: ^2.0.2
+  checksum: f7169531e21af11276db6d382cc05b432c866e1ca908fa160e2270b0a85c96b8a920c385562c9ae6b0458f6857422fd4aba66599a2d3eeb530bd56a6176e2335
+  languageName: node
+  linkType: hard
+
 "@spruceid/siwe-parser@npm:1.1.3":
   version: 1.1.3
   resolution: "@spruceid/siwe-parser@npm:1.1.3"
@@ -18501,6 +19046,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.5.11":
+  version: 0.5.17
+  resolution: "@swc/helpers@npm:0.5.17"
+  dependencies:
+    tslib: ^2.8.0
+  checksum: 085e13b536323945dfc3a270debf270bda6dfc80a1c68fd2ed08f7cbdfcbdaeead402650b5b10722e54e4a24193afc8a3c6f63d3d6d719974e7470557fb415bd
+  languageName: node
+  linkType: hard
+
 "@swc/types@npm:^0.1.5":
   version: 0.1.5
   resolution: "@swc/types@npm:0.1.5"
@@ -18581,6 +19135,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^8.5.0":
+  version: 8.20.1
+  resolution: "@testing-library/dom@npm:8.20.1"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.1.3
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: 06fc8dc67849aadb726cbbad0e7546afdf8923bd39acb64c576d706249bd7d0d05f08e08a31913fb621162e3b9c2bd0dce15964437f030f9fa4476326fdd3007
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.1
   resolution: "@testing-library/dom@npm:9.3.1"
@@ -18685,6 +19255,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/react@npm:^13.4.0":
+  version: 13.4.0
+  resolution: "@testing-library/react@npm:13.4.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@testing-library/dom": ^8.5.0
+    "@types/react-dom": ^18.0.0
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 51ec548c1fdb1271089a5c63e0908f0166f2c7fcd9cacd3108ebbe0ce64cb4351812d885892020dc37608418cfb15698514856502b3cab0e5cc58d6cc1bd4a3e
+  languageName: node
+  linkType: hard
+
 "@testing-library/react@npm:^14.1.0":
   version: 14.1.0
   resolution: "@testing-library/react@npm:14.1.0"
@@ -18915,6 +19499,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/chrome@npm:^0.0.279":
+  version: 0.0.279
+  resolution: "@types/chrome@npm:0.0.279"
+  dependencies:
+    "@types/filesystem": "*"
+    "@types/har-format": "*"
+  checksum: 718f9a4603a2b1d6cb6a54c327880cf8baefb2c67bf1e34b1b34e191421014e4340fb624513eb734d295f4833077e67cfac532603214dcf7fc51220539d41cfb
+  languageName: node
+  linkType: hard
+
 "@types/color-convert@npm:*":
   version: 2.0.3
   resolution: "@types/color-convert@npm:2.0.3"
@@ -19343,6 +19937,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jest@npm:^28.1.6":
+  version: 28.1.8
+  resolution: "@types/jest@npm:28.1.8"
+  dependencies:
+    expect: ^28.0.0
+    pretty-format: ^28.0.0
+  checksum: d4cd36158a3ae1d4b42cc48a77c95de74bc56b84cf81e09af3ee0399c34f4a7da8ab9e787570f10004bd642f9e781b0033c37327fbbf4a8e4b6e37e8ee3693a7
+  languageName: node
+  linkType: hard
+
 "@types/jest@npm:^29.5.14":
   version: 29.5.14
   resolution: "@types/jest@npm:29.5.14"
@@ -19409,6 +20013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.20":
+  version: 4.17.20
+  resolution: "@types/lodash@npm:4.17.20"
+  checksum: dc7bb4653514dd91117a4c4cec2c37e2b5a163d7643445e4757d76a360fabe064422ec7a42dde7450c5e7e0e7e678d5e6eae6d2a919abcddf581d81e63e63839
+  languageName: node
+  linkType: hard
+
 "@types/mdx@npm:^2.0.0":
   version: 2.0.10
   resolution: "@types/mdx@npm:2.0.10"
@@ -19458,6 +20069,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/minimatch@npm:^3.0.3":
+  version: 3.0.5
+  resolution: "@types/minimatch@npm:3.0.5"
+  checksum: c41d136f67231c3131cf1d4ca0b06687f4a322918a3a5adddc87ce90ed9dbd175a3610adee36b106ae68c0b92c637c35e02b58c8a56c424f71d30993ea220b92
+  languageName: node
+  linkType: hard
+
 "@types/minimist@npm:^1.2.0":
   version: 1.2.2
   resolution: "@types/minimist@npm:1.2.2"
@@ -19553,6 +20171,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.18":
+  version: 18.19.126
+  resolution: "@types/node@npm:18.19.126"
+  dependencies:
+    undici-types: ~5.26.4
+  checksum: d24609aeccd977045474c44dfdedc194cb5a226d23b63c79c5203cfeddd067d77225b3c8fb8d1ffd596c2142e52ed1cc7c5095e49a1ddeeccb976ae96533f68e
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^20":
   version: 20.17.13
   resolution: "@types/node@npm:20.17.13"
@@ -19840,6 +20467,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^19.1.8":
+  version: 19.1.13
+  resolution: "@types/react@npm:19.1.13"
+  dependencies:
+    csstype: ^3.0.2
+  checksum: def174cf34e8450ea326d02e3b3a9378e51aaa71e6dd25e5f6750ddc5f3eda5099bf1b5c415cb911d91bec354b9ef25c99e55a1deedf483b93ed698da0e20ab4
+  languageName: node
+  linkType: hard
+
 "@types/readable-stream@npm:^4.0.10":
   version: 4.0.10
   resolution: "@types/readable-stream@npm:4.0.10"
@@ -20086,7 +20722,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/uuid@npm:^8.3.1":
+"@types/uuid@npm:^8.3.1, @types/uuid@npm:^8.3.4":
   version: 8.3.4
   resolution: "@types/uuid@npm:8.3.4"
   checksum: 6f11f3ff70f30210edaa8071422d405e9c1d4e53abbe50fdce365150d3c698fe7bbff65c1e71ae080cbfb8fded860dbb5e174da96fdbbdfcaa3fb3daa474d20f
@@ -20134,7 +20770,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:^8.18.1":
+"@types/ws@npm:^8.18.1, @types/ws@npm:^8.2.2":
   version: 8.18.1
   resolution: "@types/ws@npm:8.18.1"
   dependencies:
@@ -21340,6 +21976,63 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.5.21":
+  version: 3.5.21
+  resolution: "@vue/compiler-core@npm:3.5.21"
+  dependencies:
+    "@babel/parser": ^7.28.3
+    "@vue/shared": 3.5.21
+    entities: ^4.5.0
+    estree-walker: ^2.0.2
+    source-map-js: ^1.2.1
+  checksum: 82c4d426b0c144e76738dabe7571555bf62f6c01f5f99396da8bfaf70c207257e1d93878ef927bc1940f97fedf18be7965d4a1eb6d3501d79989474ceb4427ae
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-dom@npm:3.5.21":
+  version: 3.5.21
+  resolution: "@vue/compiler-dom@npm:3.5.21"
+  dependencies:
+    "@vue/compiler-core": 3.5.21
+    "@vue/shared": 3.5.21
+  checksum: 03f536459afab33dd172b4e8461abb9c4872898003f02a90d49164780eb6a7eb357c5044bb530ff2c9d0846bc2b70e0db38fbb23b3f0ffef13568a34cd05c2fc
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-sfc@npm:^3.3.4":
+  version: 3.5.21
+  resolution: "@vue/compiler-sfc@npm:3.5.21"
+  dependencies:
+    "@babel/parser": ^7.28.3
+    "@vue/compiler-core": 3.5.21
+    "@vue/compiler-dom": 3.5.21
+    "@vue/compiler-ssr": 3.5.21
+    "@vue/shared": 3.5.21
+    estree-walker: ^2.0.2
+    magic-string: ^0.30.18
+    postcss: ^8.5.6
+    source-map-js: ^1.2.1
+  checksum: ae67e820958a20af25ccfd1b49046a779c6d76e0d61aaa81e4d033e5af793fbfc41eec57cdf4e772d70b2e9be7881a6ee7d026959c50903077f75e37ca0fc91d
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-ssr@npm:3.5.21":
+  version: 3.5.21
+  resolution: "@vue/compiler-ssr@npm:3.5.21"
+  dependencies:
+    "@vue/compiler-dom": 3.5.21
+    "@vue/shared": 3.5.21
+  checksum: a6c4634fef206eee9a284097d58e70dbc13a7d1c52561f679eb85a6aabb4327019c70ba5c68eb89f60a8c3e1698f79f916d217bc396ec6bbabd603d7c389d757
+  languageName: node
+  linkType: hard
+
+"@vue/shared@npm:3.5.21":
+  version: 3.5.21
+  resolution: "@vue/shared@npm:3.5.21"
+  checksum: beada3fe4d7ea7e23e096a32180e68574bb20d28fcafa87a9dc9079ff7ab2439b0cb3d6b616df3dd16c7d42075d5fbd6ca6646cea93bdcc7b03ec8e748dd3af8
+  languageName: node
+  linkType: hard
+
 "@wagmi/chains@npm:1.6.0":
   version: 1.6.0
   resolution: "@wagmi/chains@npm:1.6.0"
@@ -22521,6 +23214,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@yarnpkg/types@npm:^4.0.0-rc.52":
+  version: 4.0.1
+  resolution: "@yarnpkg/types@npm:4.0.1"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: bee3fab9db6cc829962727940cdfd9520325c6de2ef5c5985ecd54306aabbe5a6e78df3aeaf0834dce0a32f980d4ab9066b83a5d49ca752cbb7de06f29c14e16
+  languageName: node
+  linkType: hard
+
 "@zeit/schemas@npm:2.29.0":
   version: 2.29.0
   resolution: "@zeit/schemas@npm:2.29.0"
@@ -22554,6 +23256,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"abbrev@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "abbrev@npm:2.0.0"
+  checksum: 0e994ad2aa6575f94670d8a2149afe94465de9cedaaaac364e7fb43a40c3691c980ff74899f682f4ca58fa96b4cbd7421a015d3a6defe43a442117d7821a2f36
+  languageName: node
+  linkType: hard
+
 "abitype@npm:0.8.7":
   version: 0.8.7
   resolution: "abitype@npm:0.8.7"
@@ -22796,6 +23505,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"agentkeepalive@npm:^4.5.0":
+  version: 4.6.0
+  resolution: "agentkeepalive@npm:4.6.0"
+  dependencies:
+    humanize-ms: ^1.2.1
+  checksum: b3cdd10efca04876defda3c7671163523fcbce20e8ef7a8f9f30919a242e32b846791c0f1a8a0269718a585805a2cdcd031779ff7b9927a1a8dd8586f8c2e8c5
+  languageName: node
+  linkType: hard
+
 "aggregate-error@npm:^3.0.0":
   version: 3.1.0
   resolution: "aggregate-error@npm:3.1.0"
@@ -23217,6 +23935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-differ@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "array-differ@npm:3.0.0"
+  checksum: 117edd9df5c1530bd116c6e8eea891d4bd02850fd89b1b36e532b6540e47ca620a373b81feca1c62d1395d9ae601516ba538abe5e8172d41091da2c546b05fb7
+  languageName: node
+  linkType: hard
+
 "array-flatten@npm:1.1.1":
   version: 1.1.1
   resolution: "array-flatten@npm:1.1.1"
@@ -23534,6 +24259,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arrify@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "arrify@npm:2.0.1"
+  checksum: 067c4c1afd182806a82e4c1cb8acee16ab8b5284fbca1ce29408e6e91281c36bb5b612f6ddfbd40a0f7a7e0c75bf2696eb94c027f6e328d6e9c52465c98e4209
+  languageName: node
+  linkType: hard
+
 "asap@npm:^2.0.0, asap@npm:~2.0.3, asap@npm:~2.0.6":
   version: 2.0.6
   resolution: "asap@npm:2.0.6"
@@ -23772,6 +24504,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.21":
+  version: 10.4.21
+  resolution: "autoprefixer@npm:10.4.21"
+  dependencies:
+    browserslist: ^4.24.4
+    caniuse-lite: ^1.0.30001702
+    fraction.js: ^4.3.7
+    normalize-range: ^0.1.2
+    picocolors: ^1.1.1
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 11770ce635a0520e457eaf2ff89056cd57094796a9f5d6d9375513388a5a016cd947333dcfd213b822fdd8a0b43ce68ae4958e79c6f077c41d87444c8cca0235
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:^10.4.4":
   version: 10.4.14
   resolution: "autoprefixer@npm:10.4.14"
@@ -23889,6 +24639,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-jest@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-jest@npm:28.1.3"
+  dependencies:
+    "@jest/transform": ^28.1.3
+    "@types/babel__core": ^7.1.14
+    babel-plugin-istanbul: ^6.1.1
+    babel-preset-jest: ^28.1.3
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    slash: ^3.0.0
+  peerDependencies:
+    "@babel/core": ^7.8.0
+  checksum: 57ccd2296e1839687b5df2fd138c3d00717e0369e385254b012ccd4ee70e75f5d5c8e6cfcdf92d155015b468cfebb847b38e69bb5805d8aaf730e20575127cc6
+  languageName: node
+  linkType: hard
+
 "babel-jest@npm:^29.2.1, babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -24000,6 +24767,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-jest-hoist@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-plugin-jest-hoist@npm:28.1.3"
+  dependencies:
+    "@babel/template": ^7.3.3
+    "@babel/types": ^7.3.3
+    "@types/babel__core": ^7.1.14
+    "@types/babel__traverse": ^7.0.6
+  checksum: 648d89f9d80f6450ce7e50d0c32eb91b7f26269b47c3e37aaf2e0f2f66a980978345bd6b8c9b8c3aa6a8252ad2bc2c9fb50630e9895622c9a0972af5f70ed20e
+  languageName: node
+  linkType: hard
+
 "babel-plugin-jest-hoist@npm:^29.5.0":
   version: 29.5.0
   resolution: "babel-plugin-jest-hoist@npm:29.5.0"
@@ -24348,6 +25127,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-preset-jest@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-preset-jest@npm:28.1.3"
+  dependencies:
+    babel-plugin-jest-hoist: ^28.1.3
+    babel-preset-current-node-syntax: ^1.0.0
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 8248a4a5ca4242cc06ad13b10b9183ad2664da8fb0da060c352223dcf286f0ce9c708fa17901dc44ecabec25e6d309e5e5b9830a61dd777c3925f187a345a47d
+  languageName: node
+  linkType: hard
+
 "babel-preset-jest@npm:^29.5.0":
   version: 29.5.0
   resolution: "babel-preset-jest@npm:29.5.0"
@@ -24484,6 +25275,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"baseline-browser-mapping@npm:^2.8.3":
+  version: 2.8.5
+  resolution: "baseline-browser-mapping@npm:2.8.5"
+  bin:
+    baseline-browser-mapping: dist/cli.js
+  checksum: 31e7ecc8694180f2de3f408903aa24631bed999c957826b0ae1701668fc7d67e4f63e0502ffa0d9753a1350692afbac3f9d532b6656d14ab5e3b20d79a9eba3d
+  languageName: node
+  linkType: hard
+
 "basic-ftp@npm:^5.0.2":
   version: 5.0.5
   resolution: "basic-ftp@npm:5.0.5"
@@ -24576,6 +25376,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bin-links@npm:4.0.4":
+  version: 4.0.4
+  resolution: "bin-links@npm:4.0.4"
+  dependencies:
+    cmd-shim: ^6.0.0
+    npm-normalize-package-bin: ^3.0.0
+    read-cmd-shim: ^4.0.0
+    write-file-atomic: ^5.0.0
+  checksum: 9fca1fddaa3c1c9f7efd6fd7a6d991e3d8f6aaa9de5d0b9355469c2c594d8d06c9b2e0519bb0304202c14ddbe832d27b6d419d55cea4340e2c26116f9190e5c9
+  languageName: node
+  linkType: hard
+
 "binary-extensions@npm:^2.0.0":
   version: 2.2.0
   resolution: "binary-extensions@npm:2.2.0"
@@ -25044,6 +25856,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.24.4":
+  version: 4.26.2
+  resolution: "browserslist@npm:4.26.2"
+  dependencies:
+    baseline-browser-mapping: ^2.8.3
+    caniuse-lite: ^1.0.30001741
+    electron-to-chromium: ^1.5.218
+    node-releases: ^2.0.21
+    update-browserslist-db: ^1.1.3
+  bin:
+    browserslist: cli.js
+  checksum: ebd96e8895cdfc72be074281eb377332b69ceb944ec0c063739d8eeb8e513b168ac1e27d26ce5cc260e69a340a44c6bb5e9408565449d7a16739e5844453d4c7
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -25349,6 +26176,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacache@npm:^18.0.0":
+  version: 18.0.4
+  resolution: "cacache@npm:18.0.4"
+  dependencies:
+    "@npmcli/fs": ^3.1.0
+    fs-minipass: ^3.0.0
+    glob: ^10.2.2
+    lru-cache: ^10.0.1
+    minipass: ^7.0.3
+    minipass-collect: ^2.0.1
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.4
+    p-map: ^4.0.0
+    ssri: ^10.0.0
+    tar: ^6.1.11
+    unique-filename: ^3.0.0
+  checksum: b7422c113b4ec750f33beeca0f426a0024c28e3172f332218f48f963e5b970647fa1ac05679fe5bb448832c51efea9fda4456b9a95c3a1af1105fe6c1833cde2
+  languageName: node
+  linkType: hard
+
 "call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
   version: 1.0.1
   resolution: "call-bind-apply-helpers@npm:1.0.1"
@@ -25433,6 +26280,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"callsite@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "callsite@npm:1.0.0"
+  checksum: 569686d622a288a4f0a827466c2f967b6d7a98f2ee1e6ada9dcf5a6802267a5e2a995d40f07113b5f95c7b2b2d5cbff4fdde590195f2a8bed24b829d048688f8
+  languageName: node
+  linkType: hard
+
 "callsites@npm:^2.0.0":
   version: 2.0.0
   resolution: "callsites@npm:2.0.0"
@@ -25482,7 +26336,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.2.0, camelcase@npm:^6.2.1":
+"camelcase@npm:^6.2.0, camelcase@npm:^6.2.1, camelcase@npm:^6.3.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d
@@ -25557,6 +26411,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001702, caniuse-lite@npm:^1.0.30001741":
+  version: 1.0.30001743
+  resolution: "caniuse-lite@npm:1.0.30001743"
+  checksum: 9e203fe09158b011bd4a6707f6e5f9ad040e5b4093b12e2e047636a71d6e2e3bf5209aae42f213251cc812d9091188d7f1da7bd4785bc0b879beb98f9aa04ebc
+  languageName: node
+  linkType: hard
+
 "case-sensitive-paths-webpack-plugin@npm:^2.4.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -25665,6 +26526,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chalk@npm:^5.4.1":
+  version: 5.6.2
+  resolution: "chalk@npm:5.6.2"
+  checksum: 4ee2d47a626d79ca27cb5299ecdcce840ef5755e287412536522344db0fc51ca0f6d6433202332c29e2288c6a90a2b31f3bd626bc8c14743b6b6ee28abd3b796
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -26235,6 +27103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^14.0.0":
+  version: 14.0.1
+  resolution: "commander@npm:14.0.1"
+  checksum: a072b714e73a69cc85e68f588a3c910f330e5b31861fe1f9abc9312e81bdca193676fc1fea99f739b4237ee903751fb20b4adcdd409ec4c4df0964792e9daa47
+  languageName: node
+  linkType: hard
+
 "commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -26745,7 +27620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^7, cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1":
+"cosmiconfig@npm:^7, cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1, cosmiconfig@npm:^7.1.0":
   version: 7.1.0
   resolution: "cosmiconfig@npm:7.1.0"
   dependencies:
@@ -27898,6 +28773,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"depcheck@npm:^1.4.3":
+  version: 1.4.7
+  resolution: "depcheck@npm:1.4.7"
+  dependencies:
+    "@babel/parser": ^7.23.0
+    "@babel/traverse": ^7.23.2
+    "@vue/compiler-sfc": ^3.3.4
+    callsite: ^1.0.0
+    camelcase: ^6.3.0
+    cosmiconfig: ^7.1.0
+    debug: ^4.3.4
+    deps-regex: ^0.2.0
+    findup-sync: ^5.0.0
+    ignore: ^5.2.4
+    is-core-module: ^2.12.0
+    js-yaml: ^3.14.1
+    json5: ^2.2.3
+    lodash: ^4.17.21
+    minimatch: ^7.4.6
+    multimatch: ^5.0.0
+    please-upgrade-node: ^3.2.0
+    readdirp: ^3.6.0
+    require-package-name: ^2.0.1
+    resolve: ^1.22.3
+    resolve-from: ^5.0.0
+    semver: ^7.5.4
+    yargs: ^16.2.0
+  bin:
+    depcheck: bin/depcheck.js
+  checksum: e648788554ba88bd0dc37ce398f7756f143a78487b4ee3ac01756ad7ed97034476e0709497e9f8e474117bd4258db669a53fd46fafb703f151c9a0394fc8a55a
+  languageName: node
+  linkType: hard
+
 "depd@npm:2.0.0, depd@npm:^2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
@@ -27934,6 +28842,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deps-regex@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "deps-regex@npm:0.2.0"
+  checksum: a782304d481824c21c5aaff3d7fbd2eba9b112688cbadb36537304dde61e106595d4858bd097fad1df8b96fbff3df571dc9bfd73b749cbd24fd088cce3a999d8
+  languageName: node
+  linkType: hard
+
 "dequal@npm:^2.0.2, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
@@ -27972,6 +28887,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-file@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "detect-file@npm:1.0.0"
+  checksum: 1861e4146128622e847abe0e1ed80fef01e78532665858a792267adf89032b7a9c698436137707fcc6f02956c2a6a0052d6a0cef5be3d4b76b1ff0da88e2158a
+  languageName: node
+  linkType: hard
+
 "detect-indent@npm:^6.1.0":
   version: 6.1.0
   resolution: "detect-indent@npm:6.1.0"
@@ -27979,6 +28901,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-indent@npm:^7.0.1":
+  version: 7.0.2
+  resolution: "detect-indent@npm:7.0.2"
+  checksum: ef215d1b55a14f677ce03e840973b25362b6f8cd3f566bc82831fa1abb2be6a95423729bc573dc2334b1371ad7be18d9ec67e1a9611b71a04cb6d63f0d8e54cc
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^1.0.3":
   version: 1.0.3
   resolution: "detect-libc@npm:1.0.3"
@@ -28002,6 +28931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-newline@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "detect-newline@npm:4.0.1"
+  checksum: 0409ecdfb93419591ccff24fccfe2ddddad29b66637d1ed898872125b25af05014fdeedc9306339577060f69f59fe6e9830cdd80948597f136dfbffefa60599c
+  languageName: node
+  linkType: hard
+
 "detect-node-es@npm:^1.1.0":
   version: 1.1.0
   resolution: "detect-node-es@npm:1.1.0"
@@ -28347,6 +29283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff-sequences@npm:^28.1.1":
+  version: 28.1.1
+  resolution: "diff-sequences@npm:28.1.1"
+  checksum: e2529036505567c7ca5a2dea86b6bcd1ca0e3ae63bf8ebf529b8a99cfa915bbf194b7021dc1c57361a4017a6d95578d4ceb29fabc3232a4f4cb866a2726c7690
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.4.3":
   version: 29.4.3
   resolution: "diff-sequences@npm:29.4.3"
@@ -28824,6 +29767,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.218":
+  version: 1.5.220
+  resolution: "electron-to-chromium@npm:1.5.220"
+  checksum: 9cf68f93fdc23cfd80eb2ef15c5c0ab48b0a4ba7bafe697097075b81bdea23c8e8135f7bade04aa0818d64e5bc74112dbebebf20087e46d3aae9ce1f5f5534d2
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.5.41":
   version: 1.5.60
   resolution: "electron-to-chromium@npm:1.5.60"
@@ -29074,7 +30024,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"entities@npm:^4.2.0, entities@npm:^4.4.0":
+"entities@npm:^4.2.0, entities@npm:^4.4.0, entities@npm:^4.5.0":
   version: 4.5.0
   resolution: "entities@npm:4.5.0"
   checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
@@ -31762,6 +32712,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expand-tilde@npm:^2.0.0, expand-tilde@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "expand-tilde@npm:2.0.2"
+  dependencies:
+    homedir-polyfill: ^1.0.1
+  checksum: 2efe6ed407d229981b1b6ceb552438fbc9e5c7d6a6751ad6ced3e0aa5cf12f0b299da695e90d6c2ac79191b5c53c613e508f7149e4573abfbb540698ddb7301a
+  languageName: node
+  linkType: hard
+
 "expect-type@npm:^1.2.1":
   version: 1.2.1
   resolution: "expect-type@npm:1.2.1"
@@ -31781,6 +32740,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^28.0.0, expect@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "expect@npm:28.1.3"
+  dependencies:
+    "@jest/expect-utils": ^28.1.3
+    jest-get-type: ^28.0.2
+    jest-matcher-utils: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-util: ^28.1.3
+  checksum: 101e0090de300bcafedb7dbfd19223368a2251ce5fe0105bbb6de5720100b89fb6b64290ebfb42febc048324c76d6a4979cdc4b61eb77747857daf7a5de9b03d
+  languageName: node
+  linkType: hard
+
 "expect@npm:^29.0.0, expect@npm:^29.6.1":
   version: 29.6.1
   resolution: "expect@npm:29.6.1"
@@ -32250,7 +33222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-safe-stringify@npm:^2.0.6, fast-safe-stringify@npm:^2.1.1":
+"fast-safe-stringify@npm:^2.0.6, fast-safe-stringify@npm:^2.0.7, fast-safe-stringify@npm:^2.1.1":
   version: 2.1.1
   resolution: "fast-safe-stringify@npm:2.1.1"
   checksum: a851cbddc451745662f8f00ddb622d6766f9bd97642dabfd9a405fb0d646d69fc0b9a1243cbf67f5f18a39f40f6fa821737651ff1bceeba06c9992ca2dc5bd3d
@@ -32386,6 +33358,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "fdir@npm:6.5.0"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: bd537daa9d3cd53887eed35efa0eab2dbb1ca408790e10e024120e7a36c6e9ae2b33710cb8381e35def01bc9c1d7eaba746f886338413e68ff6ebaee07b9a6e8
+  languageName: node
+  linkType: hard
+
 "fecha@npm:^4.2.0":
   version: 4.2.3
   resolution: "fecha@npm:4.2.3"
@@ -32647,6 +33631,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"findup-sync@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "findup-sync@npm:5.0.0"
+  dependencies:
+    detect-file: ^1.0.0
+    is-glob: ^4.0.3
+    micromatch: ^4.0.4
+    resolve-dir: ^1.0.1
+  checksum: 576716c77a0e8330b17ae9cba27d1fda8907c8cda7bf33a47f1999e16e089bfc6df4dd62933e0760f430736183c054348c34aa45dd882d49c8c098f55b89ee1d
+  languageName: node
+  linkType: hard
+
 "fix-dts-default-cjs-exports@npm:^1.0.0":
   version: 1.0.1
   resolution: "fix-dts-default-cjs-exports@npm:1.0.1"
@@ -32912,7 +33908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.3.6":
+"fraction.js@npm:^4.3.6, fraction.js@npm:^4.3.7":
   version: 4.3.7
   resolution: "fraction.js@npm:4.3.7"
   checksum: e1553ae3f08e3ba0e8c06e43a3ab20b319966dfb7ddb96fd9b5d0ee11a66571af7f993229c88ebbb0d4a816eb813a24ed48207b140d442a8f76f33763b8d1f3f
@@ -33460,6 +34456,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"git-hooks-list@npm:^4.0.0":
+  version: 4.1.1
+  resolution: "git-hooks-list@npm:4.1.1"
+  checksum: a56c8cc3dab505bde2c6de032164a9113968ab7f249dfe2c9f2f23be872165f88c91e097994e009d31e56dd1e81c1f714d0972133314d8d3c6bd92a847ba562f
+  languageName: node
+  linkType: hard
+
 "git-raw-commits@npm:^2.0.11":
   version: 2.0.11
   resolution: "git-raw-commits@npm:2.0.11"
@@ -33642,6 +34645,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-modules@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "global-modules@npm:1.0.0"
+  dependencies:
+    global-prefix: ^1.0.1
+    is-windows: ^1.0.1
+    resolve-dir: ^1.0.0
+  checksum: 10be68796c1e1abc1e2ba87ec4ea507f5629873b119ab0cd29c07284ef2b930f1402d10df01beccb7391dedd9cd479611dd6a24311c71be58937beaf18edf85e
+  languageName: node
+  linkType: hard
+
 "global-modules@npm:^2.0.0":
   version: 2.0.0
   resolution: "global-modules@npm:2.0.0"
@@ -33651,6 +34665,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-prefix@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "global-prefix@npm:1.0.2"
+  dependencies:
+    expand-tilde: ^2.0.2
+    homedir-polyfill: ^1.0.1
+    ini: ^1.3.4
+    is-windows: ^1.0.1
+    which: ^1.2.14
+  checksum: 061b43470fe498271bcd514e7746e8a8535032b17ab9570517014ae27d700ff0dca749f76bbde13ba384d185be4310d8ba5712cb0e74f7d54d59390db63dd9a0
+  languageName: node
+  linkType: hard
+
 "global-prefix@npm:^3.0.0":
   version: 3.0.0
   resolution: "global-prefix@npm:3.0.0"
@@ -34199,6 +35226,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"homedir-polyfill@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "homedir-polyfill@npm:1.0.3"
+  dependencies:
+    parse-passwd: ^1.0.0
+  checksum: 18dd4db87052c6a2179d1813adea0c4bfcfa4f9996f0e226fefb29eb3d548e564350fa28ec46b0bf1fbc0a1d2d6922ceceb80093115ea45ff8842a4990139250
+  languageName: node
+  linkType: hard
+
 "hoopy@npm:^0.1.4":
   version: 0.1.4
   resolution: "hoopy@npm:0.1.4"
@@ -34231,6 +35267,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hosted-git-info@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "hosted-git-info@npm:7.0.2"
+  dependencies:
+    lru-cache: ^10.0.1
+  checksum: 467cf908a56556417b18e86ae3b8dee03c2360ef1d51e61c4028fe87f6f309b6ff038589c94b5666af207da9d972d5107698906aabeb78aca134641962a5c6f8
+  languageName: node
+  linkType: hard
+
 "hpack.js@npm:^2.1.6":
   version: 2.1.6
   resolution: "hpack.js@npm:2.1.6"
@@ -34507,6 +35552,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.6":
+  version: 7.0.6
+  resolution: "https-proxy-agent@npm:7.0.6"
+  dependencies:
+    agent-base: ^7.1.2
+    debug: 4
+  checksum: b882377a120aa0544846172e5db021fa8afbf83fea2a897d397bd2ddd8095ab268c24bc462f40a15f2a8c600bf4aa05ce52927f70038d4014e68aefecfa94e8d
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:^7.0.2":
   version: 7.0.2
   resolution: "https-proxy-agent@npm:7.0.2"
@@ -34527,16 +35582,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^7.0.6":
-  version: 7.0.6
-  resolution: "https-proxy-agent@npm:7.0.6"
-  dependencies:
-    agent-base: ^7.1.2
-    debug: 4
-  checksum: b882377a120aa0544846172e5db021fa8afbf83fea2a897d397bd2ddd8095ab268c24bc462f40a15f2a8c600bf4aa05ce52927f70038d4014e68aefecfa94e8d
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^2.1.0":
   version: 2.1.0
   resolution: "human-signals@npm:2.1.0"
@@ -34858,6 +35903,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ini@npm:^4.1.3":
+  version: 4.1.3
+  resolution: "ini@npm:4.1.3"
+  checksum: 004b2be42388877c58add606149f1a0c7985c90a0ba5dbf45a4738fdc70b0798d922caecaa54617029626505898ac451ff0537a08b949836b49d3267f66542c9
+  languageName: node
+  linkType: hard
+
 "inline-style-prefixer@npm:^6.0.1":
   version: 6.0.4
   resolution: "inline-style-prefixer@npm:6.0.4"
@@ -34973,6 +36025,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ip-address@npm:^10.0.1":
+  version: 10.0.1
+  resolution: "ip-address@npm:10.0.1"
+  checksum: 525d5391cfd31a91f80f5857e98487aeaa8474e860a6725a0b6461ac8e436c7f8c869774dece391c8f8e7486306a34a4d1c094778c4c583a3f1f2cd905e5ed50
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -35205,7 +36264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.15.1":
+"is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0":
   version: 2.16.1
   resolution: "is-core-module@npm:2.16.1"
   dependencies:
@@ -35561,6 +36620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "is-plain-obj@npm:4.1.0"
+  checksum: 6dc45da70d04a81f35c9310971e78a6a3c7a63547ef782e3a07ee3674695081b6ca4e977fbb8efc48dae3375e0b34558d2bcd722aec9bddfa2d7db5b041be8ce
+  languageName: node
+  linkType: hard
+
 "is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
   version: 5.0.0
   resolution: "is-plain-object@npm:5.0.0"
@@ -35815,6 +36881,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-url@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "is-url@npm:1.2.4"
+  checksum: 100e74b3b1feab87a43ef7653736e88d997eb7bd32e71fd3ebc413e58c1cbe56269699c776aaea84244b0567f2a7d68dfaa512a062293ed2f9fdecb394148432
+  languageName: node
+  linkType: hard
+
 "is-valid-path@npm:^0.1.1":
   version: 0.1.1
   resolution: "is-valid-path@npm:0.1.1"
@@ -35876,6 +36949,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-windows@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "is-windows@npm:1.0.2"
+  checksum: 438b7e52656fe3b9b293b180defb4e448088e7023a523ec21a91a80b9ff8cdb3377ddb5b6e60f7c7de4fa8b63ab56e121b6705fe081b3cf1b828b0a380009ad7
+  languageName: node
+  linkType: hard
+
 "is-wsl@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-wsl@npm:1.1.0"
@@ -35934,6 +37014,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isexe@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "isexe@npm:3.1.1"
+  checksum: 7fe1931ee4e88eb5aa524cd3ceb8c882537bc3a81b02e438b240e47012eef49c86904d0f0e593ea7c3a9996d18d0f1f3be8d3eaa92333977b0c3a9d353d5563e
+  languageName: node
+  linkType: hard
+
 "isobject@npm:^3.0.1":
   version: 3.0.1
   resolution: "isobject@npm:3.0.1"
@@ -35948,6 +37035,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-fetch@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "isomorphic-fetch@npm:3.0.0"
+  dependencies:
+    node-fetch: ^2.6.1
+    whatwg-fetch: ^3.4.1
+  checksum: e5ab79a56ce5af6ddd21265f59312ad9a4bc5a72cebc98b54797b42cb30441d5c5f8d17c5cd84a99e18101c8af6f90c081ecb8d12fd79e332be1778d58486d75
+  languageName: node
+  linkType: hard
+
 "isomorphic-ws@npm:5.0.0, isomorphic-ws@npm:^5.0.0":
   version: 5.0.0
   resolution: "isomorphic-ws@npm:5.0.0"
@@ -36208,6 +37305,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jayson@npm:^4.1.1":
+  version: 4.2.0
+  resolution: "jayson@npm:4.2.0"
+  dependencies:
+    "@types/connect": ^3.4.33
+    "@types/node": ^12.12.54
+    "@types/ws": ^7.4.4
+    commander: ^2.20.3
+    delay: ^5.0.0
+    es6-promisify: ^5.0.0
+    eyes: ^0.1.8
+    isomorphic-ws: ^4.0.1
+    json-stringify-safe: ^5.0.1
+    stream-json: ^1.9.1
+    uuid: ^8.3.2
+    ws: ^7.5.10
+  bin:
+    jayson: bin/jayson.js
+  checksum: 674a86dd23559477f53c6ea2302209c28b48d54fbca564e22a790ec533b0519de86d95796deb828d6a52061a8ccc2670c47a28f44b7b6dfaea02f44fd1cf9ab0
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:^27.5.1":
   version: 27.5.1
   resolution: "jest-changed-files@npm:27.5.1"
@@ -36219,6 +37338,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-changed-files@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-changed-files@npm:28.1.3"
+  dependencies:
+    execa: ^5.0.0
+    p-limit: ^3.1.0
+  checksum: c78af14a68b9b19101623ae7fde15a2488f9b3dbe8cca12a05c4a223bc9bfd3bf41ee06830f20fb560c52434435d6153c9cc6cf450b1f7b03e5e7f96a953a6a6
+  languageName: node
+  linkType: hard
+
 "jest-changed-files@npm:^29.5.0":
   version: 29.5.0
   resolution: "jest-changed-files@npm:29.5.0"
@@ -36278,6 +37407,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-circus@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-circus@npm:28.1.3"
+  dependencies:
+    "@jest/environment": ^28.1.3
+    "@jest/expect": ^28.1.3
+    "@jest/test-result": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+    chalk: ^4.0.0
+    co: ^4.6.0
+    dedent: ^0.7.0
+    is-generator-fn: ^2.0.0
+    jest-each: ^28.1.3
+    jest-matcher-utils: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-runtime: ^28.1.3
+    jest-snapshot: ^28.1.3
+    jest-util: ^28.1.3
+    p-limit: ^3.1.0
+    pretty-format: ^28.1.3
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: b635e60a9c92adaefc3f24def8eba691e7c2fdcf6c9fa640cddf2eb8c8b26ee62eab73ebb88798fd7c52a74c1495a984e39b748429b610426f02e9d3d56e09b2
+  languageName: node
+  linkType: hard
+
 "jest-circus@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-circus@npm:29.6.1"
@@ -36389,6 +37545,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-cli@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-cli@npm:28.1.3"
+  dependencies:
+    "@jest/core": ^28.1.3
+    "@jest/test-result": ^28.1.3
+    "@jest/types": ^28.1.3
+    chalk: ^4.0.0
+    exit: ^0.1.2
+    graceful-fs: ^4.2.9
+    import-local: ^3.0.2
+    jest-config: ^28.1.3
+    jest-util: ^28.1.3
+    jest-validate: ^28.1.3
+    prompts: ^2.0.1
+    yargs: ^17.3.1
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: fb424576bf38346318daddee3fcc597cd78cb8dda1759d09c529d8ba1a748f2765c17b00671072a838826e59465a810ff8a232bc6ba2395c131bf3504425a363
+  languageName: node
+  linkType: hard
+
 "jest-cli@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-cli@npm:29.6.1"
@@ -36506,6 +37689,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-config@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-config@npm:28.1.3"
+  dependencies:
+    "@babel/core": ^7.11.6
+    "@jest/test-sequencer": ^28.1.3
+    "@jest/types": ^28.1.3
+    babel-jest: ^28.1.3
+    chalk: ^4.0.0
+    ci-info: ^3.2.0
+    deepmerge: ^4.2.2
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    jest-circus: ^28.1.3
+    jest-environment-node: ^28.1.3
+    jest-get-type: ^28.0.2
+    jest-regex-util: ^28.0.2
+    jest-resolve: ^28.1.3
+    jest-runner: ^28.1.3
+    jest-util: ^28.1.3
+    jest-validate: ^28.1.3
+    micromatch: ^4.0.4
+    parse-json: ^5.2.0
+    pretty-format: ^28.1.3
+    slash: ^3.0.0
+    strip-json-comments: ^3.1.1
+  peerDependencies:
+    "@types/node": "*"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    ts-node:
+      optional: true
+  checksum: ddabffd3a3a8cb6c2f58f06cdf3535157dbf8c70bcde3e5c3de7bee6a8d617840ffc8cffb0083e38c6814f2a08c225ca19f58898efaf4f351af94679f22ce6bc
+  languageName: node
+  linkType: hard
+
 "jest-config@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-config@npm:29.6.1"
@@ -36644,6 +37865,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-diff@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-diff@npm:28.1.3"
+  dependencies:
+    chalk: ^4.0.0
+    diff-sequences: ^28.1.1
+    jest-get-type: ^28.0.2
+    pretty-format: ^28.1.3
+  checksum: fa8583e0ccbe775714ce850b009be1b0f6b17a4b6759f33ff47adef27942ebc610dbbcc8a5f7cfb7f12b3b3b05afc9fb41d5f766674616025032ff1e4f9866e0
+  languageName: node
+  linkType: hard
+
 "jest-diff@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-diff@npm:29.6.1"
@@ -36689,6 +37922,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-docblock@npm:^28.1.1":
+  version: 28.1.1
+  resolution: "jest-docblock@npm:28.1.1"
+  dependencies:
+    detect-newline: ^3.0.0
+  checksum: 22fca68d988ecb2933bc65f448facdca85fc71b4bd0a188ea09a5ae1b0cc3a049a2a6ec7e7eaa2542c1d5cb5e5145e420a3df4fa280f5070f486c44da1d36151
+  languageName: node
+  linkType: hard
+
 "jest-docblock@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-docblock@npm:29.4.3"
@@ -36729,6 +37971,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-each@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-each@npm:28.1.3"
+  dependencies:
+    "@jest/types": ^28.1.3
+    chalk: ^4.0.0
+    jest-get-type: ^28.0.2
+    jest-util: ^28.1.3
+    pretty-format: ^28.1.3
+  checksum: 5c5b8ccb1484e58b027bea682cfa020a45e5bf5379cc7c23bdec972576c1dc3c3bf03df2b78416cefc1a58859dd33b7cf5fff54c370bc3c0f14a3e509eb87282
+  languageName: node
+  linkType: hard
+
 "jest-each@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-each@npm:29.6.1"
@@ -36839,6 +38094,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-environment-node@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-environment-node@npm:28.1.3"
+  dependencies:
+    "@jest/environment": ^28.1.3
+    "@jest/fake-timers": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+    jest-mock: ^28.1.3
+    jest-util: ^28.1.3
+  checksum: 1048fe306a6a8b0880a4c66278ebb57479f29c12cff89aab3aa79ab77a8859cf17ab8aa9919fd21c329a7db90e35581b43664e694ad453d5b04e00f3c6420469
+  languageName: node
+  linkType: hard
+
 "jest-environment-node@npm:^29.2.1, jest-environment-node@npm:^29.6.3, jest-environment-node@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-environment-node@npm:29.7.0"
@@ -36895,6 +38164,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-get-type@npm:^28.0.2":
+  version: 28.0.2
+  resolution: "jest-get-type@npm:28.0.2"
+  checksum: 5281d7c89bc8156605f6d15784f45074f4548501195c26e9b188742768f72d40948252d13230ea905b5349038865a1a8eeff0e614cc530ff289dfc41fe843abd
+  languageName: node
+  linkType: hard
+
 "jest-get-type@npm:^29.4.3":
   version: 29.4.3
   resolution: "jest-get-type@npm:29.4.3"
@@ -36933,6 +38209,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-haste-map@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-haste-map@npm:28.1.3"
+  dependencies:
+    "@jest/types": ^28.1.3
+    "@types/graceful-fs": ^4.1.3
+    "@types/node": "*"
+    anymatch: ^3.0.3
+    fb-watchman: ^2.0.0
+    fsevents: ^2.3.2
+    graceful-fs: ^4.2.9
+    jest-regex-util: ^28.0.2
+    jest-util: ^28.1.3
+    jest-worker: ^28.1.3
+    micromatch: ^4.0.4
+    walker: ^1.0.8
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: d05fdc108645fc2b39fcd4001952cc7a8cb550e93494e98c1e9ab1fc542686f6ac67177c132e564cf94fe8f81503f3f8db8b825b9b713dc8c5748aec63ba4688
+  languageName: node
+  linkType: hard
+
 "jest-haste-map@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-haste-map@npm:29.6.1"
@@ -37037,6 +38336,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-leak-detector@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-leak-detector@npm:28.1.3"
+  dependencies:
+    jest-get-type: ^28.0.2
+    pretty-format: ^28.1.3
+  checksum: 2e976a4880cf9af11f53a19f6a3820e0f90b635a900737a5427fc42e337d5628ba446dcd7c020ecea3806cf92bc0bbf6982ed62a9cd84e5a13d8751aa30fbbb7
+  languageName: node
+  linkType: hard
+
 "jest-leak-detector@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-leak-detector@npm:29.6.1"
@@ -37079,6 +38388,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-matcher-utils@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-matcher-utils@npm:28.1.3"
+  dependencies:
+    chalk: ^4.0.0
+    jest-diff: ^28.1.3
+    jest-get-type: ^28.0.2
+    pretty-format: ^28.1.3
+  checksum: 6b34f0cf66f6781e92e3bec97bf27796bd2ba31121e5c5997218d9adba6deea38a30df5203937d6785b68023ed95cbad73663cc9aad6fb0cb59aeb5813a58daf
+  languageName: node
+  linkType: hard
+
 "jest-matcher-utils@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-matcher-utils@npm:29.6.1"
@@ -37210,6 +38531,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-mock@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-mock@npm:28.1.3"
+  dependencies:
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+  checksum: a573bf8e5f12f4c29c661266c31b5c6b69a28d3195b83049983bce025b2b1a0152351567e89e63b102ef817034c2a3aa97eda4e776f3bae2aee54c5765573aa7
+  languageName: node
+  linkType: hard
+
 "jest-mock@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-mock@npm:29.6.1"
@@ -37262,7 +38593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-regex-util@npm:^28.0.0":
+"jest-regex-util@npm:^28.0.0, jest-regex-util@npm:^28.0.2":
   version: 28.0.2
   resolution: "jest-regex-util@npm:28.0.2"
   checksum: 0ea8c5c82ec88bc85e273c0ec82e0c0f35f7a1e2d055070e50f0cc2a2177f848eec55f73e37ae0d045c3db5014c42b2f90ac62c1ab3fdb354d2abd66a9e08add
@@ -37294,6 +38625,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-resolve-dependencies@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-resolve-dependencies@npm:28.1.3"
+  dependencies:
+    jest-regex-util: ^28.0.2
+    jest-snapshot: ^28.1.3
+  checksum: 4eea9ec33aefc1c71dc5956391efbcc7be76bda986b366ab3931d99c5f7ed01c9ebd7520e405ea2c76e1bb2c7ce504be6eca2b9831df16564d1e625500f3bfe7
+  languageName: node
+  linkType: hard
+
 "jest-resolve-dependencies@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-resolve-dependencies@npm:29.6.1"
@@ -37342,6 +38683,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-resolve@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-resolve@npm:28.1.3"
+  dependencies:
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^28.1.3
+    jest-pnp-resolver: ^1.2.2
+    jest-util: ^28.1.3
+    jest-validate: ^28.1.3
+    resolve: ^1.20.0
+    resolve.exports: ^1.1.0
+    slash: ^3.0.0
+  checksum: df61a490c93f4f4cf52135e43d6a4fcacb07b0b7d4acc6319e9289529c1d14f2d8e1638e095dbf96f156834802755e38db68caca69dba21a3261ee711d4426b6
+  languageName: node
+  linkType: hard
+
 "jest-resolve@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-resolve@npm:29.6.1"
@@ -37422,6 +38780,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-runner@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-runner@npm:28.1.3"
+  dependencies:
+    "@jest/console": ^28.1.3
+    "@jest/environment": ^28.1.3
+    "@jest/test-result": ^28.1.3
+    "@jest/transform": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/node": "*"
+    chalk: ^4.0.0
+    emittery: ^0.10.2
+    graceful-fs: ^4.2.9
+    jest-docblock: ^28.1.1
+    jest-environment-node: ^28.1.3
+    jest-haste-map: ^28.1.3
+    jest-leak-detector: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-resolve: ^28.1.3
+    jest-runtime: ^28.1.3
+    jest-util: ^28.1.3
+    jest-watcher: ^28.1.3
+    jest-worker: ^28.1.3
+    p-limit: ^3.1.0
+    source-map-support: 0.5.13
+  checksum: 32405cd970fa6b11e039192dae699fd1bcc6f61f67d50605af81d193f24dd4373b25f5fcc1c571a028ec1b02174e8a4b6d0d608772063fb06f08a5105693533b
+  languageName: node
+  linkType: hard
+
 "jest-runner@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-runner@npm:29.6.1"
@@ -37539,6 +38926,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-runtime@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-runtime@npm:28.1.3"
+  dependencies:
+    "@jest/environment": ^28.1.3
+    "@jest/fake-timers": ^28.1.3
+    "@jest/globals": ^28.1.3
+    "@jest/source-map": ^28.1.2
+    "@jest/test-result": ^28.1.3
+    "@jest/transform": ^28.1.3
+    "@jest/types": ^28.1.3
+    chalk: ^4.0.0
+    cjs-module-lexer: ^1.0.0
+    collect-v8-coverage: ^1.0.0
+    execa: ^5.0.0
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-mock: ^28.1.3
+    jest-regex-util: ^28.0.2
+    jest-resolve: ^28.1.3
+    jest-snapshot: ^28.1.3
+    jest-util: ^28.1.3
+    slash: ^3.0.0
+    strip-bom: ^4.0.0
+  checksum: b17c40af858e74dafa4f515ef3711c1e9ef3d4ad7d74534ee0745422534bc04fd166d4eceb62a3aa7dc951505d6f6d2a81d16e90bebb032be409ec0500974a36
+  languageName: node
+  linkType: hard
+
 "jest-runtime@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-runtime@npm:29.6.1"
@@ -37669,6 +39086,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-snapshot@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-snapshot@npm:28.1.3"
+  dependencies:
+    "@babel/core": ^7.11.6
+    "@babel/generator": ^7.7.2
+    "@babel/plugin-syntax-typescript": ^7.7.2
+    "@babel/traverse": ^7.7.2
+    "@babel/types": ^7.3.3
+    "@jest/expect-utils": ^28.1.3
+    "@jest/transform": ^28.1.3
+    "@jest/types": ^28.1.3
+    "@types/babel__traverse": ^7.0.6
+    "@types/prettier": ^2.1.5
+    babel-preset-current-node-syntax: ^1.0.0
+    chalk: ^4.0.0
+    expect: ^28.1.3
+    graceful-fs: ^4.2.9
+    jest-diff: ^28.1.3
+    jest-get-type: ^28.0.2
+    jest-haste-map: ^28.1.3
+    jest-matcher-utils: ^28.1.3
+    jest-message-util: ^28.1.3
+    jest-util: ^28.1.3
+    natural-compare: ^1.4.0
+    pretty-format: ^28.1.3
+    semver: ^7.3.5
+  checksum: 2a46a5493f1fb50b0a236a21f25045e7f46a244f9f3ae37ef4fbcd40249d0d68bb20c950ce77439e4e2cac985b05c3061c90b34739bf6069913a1199c8c716e1
+  languageName: node
+  linkType: hard
+
 "jest-snapshot@npm:^29.6.1":
   version: 29.6.1
   resolution: "jest-snapshot@npm:29.6.1"
@@ -37838,6 +39286,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-validate@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-validate@npm:28.1.3"
+  dependencies:
+    "@jest/types": ^28.1.3
+    camelcase: ^6.2.0
+    chalk: ^4.0.0
+    jest-get-type: ^28.0.2
+    leven: ^3.1.0
+    pretty-format: ^28.1.3
+  checksum: 95e0513b3803c3372a145cda86edbdb33d9dfeaa18818176f2d581e821548ceac9a179f065b6d4671a941de211354efd67f1fff8789a4fb89962565c85f646db
+  languageName: node
+  linkType: hard
+
 "jest-validate@npm:^29.2.1, jest-validate@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-validate@npm:29.7.0"
@@ -37912,7 +39374,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-watcher@npm:^28.0.0":
+"jest-watcher@npm:^28.0.0, jest-watcher@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-watcher@npm:28.1.3"
   dependencies:
@@ -37998,7 +39460,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^28.0.2":
+"jest-worker@npm:^28.0.2, jest-worker@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-worker@npm:28.1.3"
   dependencies:
@@ -38063,6 +39525,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest@npm:28.1.3"
+  dependencies:
+    "@jest/core": ^28.1.3
+    "@jest/types": ^28.1.3
+    import-local: ^3.0.2
+    jest-cli: ^28.1.3
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: b9dcb542eb7c16261c281cdc2bf37155dbb3f1205bae0b567f05051db362c85ddd4b765f126591efb88f6d298eb10336d0aa6c7d5373b4d53f918137a9a70182
+  languageName: node
+  linkType: hard
+
 "jest@npm:^29.2.1, jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest@npm:29.7.0"
@@ -38237,7 +39718,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^3.13.1":
+"js-yaml@npm:^3.13.1, js-yaml@npm:^3.14.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
   dependencies:
@@ -39549,6 +41030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^10.4.3":
+  version: 10.4.3
+  resolution: "lru-cache@npm:10.4.3"
+  checksum: 6476138d2125387a6d20f100608c2583d415a4f64a0fecf30c9e2dda976614f09cad4baa0842447bd37dd459a7bd27f57d9d8f8ce558805abd487c583f3d774a
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.0.2":
   version: 10.1.0
   resolution: "lru-cache@npm:10.1.0"
@@ -39556,13 +41044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.2.0, lru-cache@npm:^10.4.3":
-  version: 10.4.3
-  resolution: "lru-cache@npm:10.4.3"
-  checksum: 6476138d2125387a6d20f100608c2583d415a4f64a0fecf30c9e2dda976614f09cad4baa0842447bd37dd459a7bd27f57d9d8f8ce558805abd487c583f3d774a
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"
@@ -39658,6 +41139,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.18":
+  version: 0.30.19
+  resolution: "magic-string@npm:0.30.19"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.5.5
+  checksum: f360b87febeceddb35238e55963b70ef68381688c1aada6d842833a7be440a08cb0a8776e23b5e4e34785edc6b42b92dc08c829f43ecdb58547122f3fd79fdc7
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.3":
   version: 0.30.5
   resolution: "magic-string@npm:0.30.5"
@@ -39736,6 +41226,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"make-fetch-happen@npm:^13.0.0":
+  version: 13.0.1
+  resolution: "make-fetch-happen@npm:13.0.1"
+  dependencies:
+    "@npmcli/agent": ^2.0.0
+    cacache: ^18.0.0
+    http-cache-semantics: ^4.1.1
+    is-lambda: ^1.0.1
+    minipass: ^7.0.2
+    minipass-fetch: ^3.0.0
+    minipass-flush: ^1.0.5
+    minipass-pipeline: ^1.2.4
+    negotiator: ^0.6.3
+    proc-log: ^4.2.0
+    promise-retry: ^2.0.1
+    ssri: ^10.0.0
+  checksum: 5c9fad695579b79488fa100da05777213dd9365222f85e4757630f8dd2a21a79ddd3206c78cfd6f9b37346819681782b67900ac847a57cf04190f52dda5343fd
+  languageName: node
+  linkType: hard
+
 "make-plural@npm:*":
   version: 7.3.0
   resolution: "make-plural@npm:7.3.0"
@@ -41400,6 +42910,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^7.4.6":
+  version: 7.4.6
+  resolution: "minimatch@npm:7.4.6"
+  dependencies:
+    brace-expansion: ^2.0.1
+  checksum: 1a6c8d22618df9d2a88aabeef1de5622eb7b558e9f8010be791cb6b0fa6e102d39b11c28d75b855a1e377b12edc7db8ff12a99c20353441caa6a05e78deb5da9
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^8.0.2":
   version: 8.0.4
   resolution: "minimatch@npm:8.0.4"
@@ -41463,6 +42982,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minipass-collect@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "minipass-collect@npm:2.0.1"
+  dependencies:
+    minipass: ^7.0.3
+  checksum: b251bceea62090f67a6cced7a446a36f4cd61ee2d5cea9aee7fff79ba8030e416327a1c5aa2908dc22629d06214b46d88fdab8c51ac76bacbf5703851b5ad342
+  languageName: node
+  linkType: hard
+
 "minipass-fetch@npm:^3.0.0":
   version: 3.0.3
   resolution: "minipass-fetch@npm:3.0.3"
@@ -41544,7 +43072,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^7.1.2":
+"minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.1.2":
   version: 7.1.2
   resolution: "minipass@npm:7.1.2"
   checksum: 2bfd325b95c555f2b4d2814d49325691c7bee937d753814861b0b49d5edcda55cbbf22b6b6a60bb91eddac8668771f03c5ff647dcd9d0f798e9548b9cdc46ee3
@@ -41706,6 +43234,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"multimatch@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "multimatch@npm:5.0.0"
+  dependencies:
+    "@types/minimatch": ^3.0.3
+    array-differ: ^3.0.0
+    array-union: ^2.1.0
+    arrify: ^2.0.1
+    minimatch: ^3.0.4
+  checksum: 82c8030a53af965cab48da22f1b0f894ef99e16ee680dabdfbd38d2dfacc3c8208c475203d747afd9e26db44118ed0221d5a0d65268c864f06d6efc7ac6df812
+  languageName: node
+  linkType: hard
+
 "mv@npm:~2":
   version: 2.1.1
   resolution: "mv@npm:2.1.1"
@@ -41746,21 +43287,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.4, nanoid@npm:^3.3.6":
-  version: 3.3.6
-  resolution: "nanoid@npm:3.3.6"
+"nanoid@npm:^3.3.11, nanoid@npm:^3.3.8":
+  version: 3.3.11
+  resolution: "nanoid@npm:3.3.11"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
+  checksum: 3be20d8866a57a6b6d218e82549711c8352ed969f9ab3c45379da28f405363ad4c9aeb0b39e9abc101a529ca65a72ff9502b00bf74a912c4b64a9d62dfd26c29
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.8":
-  version: 3.3.11
-  resolution: "nanoid@npm:3.3.11"
+"nanoid@npm:^3.3.4, nanoid@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "nanoid@npm:3.3.6"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 3be20d8866a57a6b6d218e82549711c8352ed969f9ab3c45379da28f405363ad4c9aeb0b39e9abc101a529ca65a72ff9502b00bf74a912c4b64a9d62dfd26c29
+  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
   languageName: node
   linkType: hard
 
@@ -42213,6 +43754,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-gyp@npm:^10.0.0":
+  version: 10.3.1
+  resolution: "node-gyp@npm:10.3.1"
+  dependencies:
+    env-paths: ^2.2.0
+    exponential-backoff: ^3.1.1
+    glob: ^10.3.10
+    graceful-fs: ^4.2.6
+    make-fetch-happen: ^13.0.0
+    nopt: ^7.0.0
+    proc-log: ^4.1.0
+    semver: ^7.3.5
+    tar: ^6.2.1
+    which: ^4.0.0
+  bin:
+    node-gyp: bin/node-gyp.js
+  checksum: 91b0690ab504fe051ad66863226dc5ecac72b8471f85e8428e4d5ca3217d3a2adfffae48cd555e8d009a4164689fff558b88d2bc9bfd246452a3336ab308cf99
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:^9.0.0, node-gyp@npm:latest":
   version: 9.4.0
   resolution: "node-gyp@npm:9.4.0"
@@ -42293,6 +43854,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.21":
+  version: 2.0.21
+  resolution: "node-releases@npm:2.0.21"
+  checksum: 191f8245e18272971650eb45151c5891313bca27507a8f634085bd8c98a9cb9492686ef6182176866ceebff049646ef6cd5fb5ca46d5b5ca00ce2c69185d84c4
+  languageName: node
+  linkType: hard
+
 "node-stream-zip@npm:^1.9.1":
   version: 1.15.0
   resolution: "node-stream-zip@npm:1.15.0"
@@ -42351,6 +43919,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nopt@npm:^7.0.0":
+  version: 7.2.1
+  resolution: "nopt@npm:7.2.1"
+  dependencies:
+    abbrev: ^2.0.0
+  bin:
+    nopt: bin/nopt.js
+  checksum: 6fa729cc77ce4162cfad8abbc9ba31d4a0ff6850c3af61d59b505653bef4781ec059f8890ecfe93ee8aa0c511093369cca88bfc998101616a2904e715bbbb7c9
+  languageName: node
+  linkType: hard
+
 "nopt@npm:~1.0.10":
   version: 1.0.10
   resolution: "nopt@npm:1.0.10"
@@ -42386,6 +43965,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-package-data@npm:^6.0.0":
+  version: 6.0.2
+  resolution: "normalize-package-data@npm:6.0.2"
+  dependencies:
+    hosted-git-info: ^7.0.0
+    semver: ^7.3.5
+    validate-npm-package-license: ^3.0.4
+  checksum: ea35f8de68e03fc845f545c8197857c0cd256207fdb809ca63c2b39fe76ae77765ee939eb21811fb6c3b533296abf49ebe3cd617064f98a775adaccb24ff2e03
+  languageName: node
+  linkType: hard
+
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -42414,13 +44004,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-normalize-package-bin@npm:^3.0.0":
+"npm-install-checks@npm:^6.0.0":
+  version: 6.3.0
+  resolution: "npm-install-checks@npm:6.3.0"
+  dependencies:
+    semver: ^7.1.1
+  checksum: 6c20dadb878a0d2f1f777405217b6b63af1299d0b43e556af9363ee6eefaa98a17dfb7b612a473a473e96faf7e789c58b221e0d8ffdc1d34903c4f71618df3b4
+  languageName: node
+  linkType: hard
+
+"npm-normalize-package-bin@npm:3.0.1, npm-normalize-package-bin@npm:^3.0.0":
   version: 3.0.1
   resolution: "npm-normalize-package-bin@npm:3.0.1"
   checksum: de416d720ab22137a36292ff8a333af499ea0933ef2320a8c6f56a73b0f0448227fec4db5c890d702e26d21d04f271415eab6580b5546456861cc0c19498a4bf
   languageName: node
   linkType: hard
 
+"npm-package-arg@npm:^11.0.0":
+  version: 11.0.3
+  resolution: "npm-package-arg@npm:11.0.3"
+  dependencies:
+    hosted-git-info: ^7.0.0
+    proc-log: ^4.0.0
+    semver: ^7.3.5
+    validate-npm-package-name: ^5.0.0
+  checksum: cc6f22c39201aa14dcceeddb81bfbf7fa0484f94bcd2b3ad038e18afec5167c843cdde90c897f6034dc368faa0100c1eeee6e3f436a89e0af32ba932af4a8c28
+  languageName: node
+  linkType: hard
+
 "npm-package-arg@npm:^7.0.0":
   version: 7.0.0
   resolution: "npm-package-arg@npm:7.0.0"
@@ -42433,6 +44044,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-pick-manifest@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "npm-pick-manifest@npm:9.1.0"
+  dependencies:
+    npm-install-checks: ^6.0.0
+    npm-normalize-package-bin: ^3.0.0
+    npm-package-arg: ^11.0.0
+    semver: ^7.3.5
+  checksum: cbaad1e1420869efa851e8ba5d725263f679779e15bfca3713ec3ee1e897efab254e75c5445f442ffc96453cdfb15d362d25b0c0fcb03b156fe1653f9220cc40
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^2.0.0":
   version: 2.0.2
   resolution: "npm-run-path@npm:2.0.2"
@@ -43355,6 +44978,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-passwd@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "parse-passwd@npm:1.0.0"
+  checksum: 4e55e0231d58f828a41d0f1da2bf2ff7bcef8f4cb6146e69d16ce499190de58b06199e6bd9b17fbf0d4d8aef9052099cdf8c4f13a6294b1a522e8e958073066e
+  languageName: node
+  linkType: hard
+
 "parse-png@npm:^2.1.0":
   version: 2.1.0
   resolution: "parse-png@npm:2.1.0"
@@ -43724,6 +45354,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "picomatch@npm:4.0.3"
+  checksum: 6817fb74eb745a71445debe1029768de55fd59a42b75606f478ee1d0dc1aa6e78b711d041a7c9d5550e042642029b7f373dc1a43b224c4b7f12d23436735dba0
+  languageName: node
+  linkType: hard
+
 "pidtree@npm:^0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
@@ -43907,6 +45544,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"please-upgrade-node@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "please-upgrade-node@npm:3.2.0"
+  dependencies:
+    semver-compare: ^1.0.0
+  checksum: d87c41581a2a022fbe25965a97006238cd9b8cbbf49b39f78d262548149a9d30bd2bdf35fec3d810e0001e630cd46ef13c7e19c389dea8de7e64db271a2381bb
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.5":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"
@@ -44913,6 +46559,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.5.6":
+  version: 8.5.6
+  resolution: "postcss@npm:8.5.6"
+  dependencies:
+    nanoid: ^3.3.11
+    picocolors: ^1.1.1
+    source-map-js: ^1.2.1
+  checksum: 20f3b5d673ffeec2b28d65436756d31ee33f65b0a8bedb3d32f556fbd5973be38c3a7fb5b959a5236c60a5db7b91b0a6b14ffaac0d717dce1b903b964ee1c1bb
+  languageName: node
+  linkType: hard
+
 "preact@npm:^10.12.0, preact@npm:^10.13.1, preact@npm:^10.5.9":
   version: 10.16.0
   resolution: "preact@npm:10.16.0"
@@ -44943,7 +46600,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.3.0, prettier@npm:^2.3.2, prettier@npm:^2.4.1, prettier@npm:^2.8.0, prettier@npm:^2.8.8":
+"prettier-plugin-packagejson@npm:^2.3.0":
+  version: 2.5.19
+  resolution: "prettier-plugin-packagejson@npm:2.5.19"
+  dependencies:
+    sort-package-json: 3.4.0
+    synckit: 0.11.11
+  peerDependencies:
+    prettier: ">= 1.16.0"
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  checksum: a3caba8b62f92b53a8414cf1061a87bb5931e790c77022c64f3fa12122cf78b392912525deb9671bcdb196106a3078d4dcc6ae076fe2e14e26931b9d9b0195f1
+  languageName: node
+  linkType: hard
+
+"prettier@npm:^2.3.0, prettier@npm:^2.3.2, prettier@npm:^2.4.1, prettier@npm:^2.7.1, prettier@npm:^2.8.0, prettier@npm:^2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -45019,7 +46691,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^28.1.3":
+"pretty-format@npm:^28.0.0, pretty-format@npm:^28.1.3":
   version: 28.1.3
   resolution: "pretty-format@npm:28.1.3"
   dependencies:
@@ -45071,6 +46743,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proc-log@npm:^4.0.0, proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "proc-log@npm:4.2.0"
+  checksum: 98f6cd012d54b5334144c5255ecb941ee171744f45fca8b43b58ae5a0c1af07352475f481cadd9848e7f0250376ee584f6aa0951a856ff8f021bdfbff4eb33fc
+  languageName: node
+  linkType: hard
+
 "process-es6@npm:^0.11.2, process-es6@npm:^0.11.6":
   version: 0.11.6
   resolution: "process-es6@npm:0.11.6"
@@ -46845,14 +48524,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readdirp@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "readdirp@npm:4.0.2"
-  checksum: 309376e717f94fb7eb61bec21e2603243a9e2420cd2e9bf94ddf026aefea0d7377ed1a62f016d33265682e44908049a55c3cfc2307450a1421654ea008489b39
-  languageName: node
-  linkType: hard
-
-"readdirp@npm:~3.6.0":
+"readdirp@npm:^3.6.0, readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
   dependencies:
@@ -46861,6 +48533,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "readdirp@npm:4.0.2"
+  checksum: 309376e717f94fb7eb61bec21e2603243a9e2420cd2e9bf94ddf026aefea0d7377ed1a62f016d33265682e44908049a55c3cfc2307450a1421654ea008489b39
+  languageName: node
+  linkType: hard
+
 "readline@npm:^1.3.0":
   version: 1.3.0
   resolution: "readline@npm:1.3.0"
@@ -47267,6 +48946,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-package-name@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "require-package-name@npm:2.0.1"
+  checksum: 00f4e9e467ebe2bbced2b4198a165de11c83b5ee9f4c20b05a8782659b92bcb544dbd50be9a3eed746d05ecd875453e258c079eb3a79604b50a27cf8ab0798b5
+  languageName: node
+  linkType: hard
+
 "requireg@npm:^0.2.2":
   version: 0.2.2
   resolution: "requireg@npm:0.2.2"
@@ -47308,6 +48994,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-dir@npm:^1.0.0, resolve-dir@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "resolve-dir@npm:1.0.1"
+  dependencies:
+    expand-tilde: ^2.0.0
+    global-modules: ^1.0.0
+  checksum: ef736b8ed60d6645c3b573da17d329bfb50ec4e1d6c5ffd6df49e3497acef9226f9810ea6823b8ece1560e01dcb13f77a9f6180d4f242d00cc9a8f4de909c65c
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:5.0.0, resolve-from@npm:^5.0.0":
   version: 5.0.0
   resolution: "resolve-from@npm:5.0.0"
@@ -47393,6 +49089,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:1.22.10, resolve@npm:^1.22.3":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
+  dependencies:
+    is-core-module: ^2.16.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: ab7a32ff4046fcd7c6fdd525b24a7527847d03c3650c733b909b01b757f92eb23510afa9cc3e9bf3f26a3e073b48c88c706dfd4c1d2fb4a16a96b73b6328ddcf
+  languageName: node
+  linkType: hard
+
 "resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2":
   version: 1.22.3
   resolution: "resolve@npm:1.22.3"
@@ -47454,6 +49163,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@patch:resolve@1.22.10#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.3#~builtin<compat/resolve>":
+  version: 1.22.10
+  resolution: "resolve@patch:resolve@npm%3A1.22.10#~builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
+  dependencies:
+    is-core-module: ^2.16.0
+    path-parse: ^1.0.7
+    supports-preserve-symlinks-flag: ^1.0.0
+  bin:
+    resolve: bin/resolve
+  checksum: 8aac1e4e4628bd00bf4b94b23de137dd3fe44097a8d528fd66db74484be929936e20c696e1a3edf4488f37e14180b73df6f600992baea3e089e8674291f16c9d
+  languageName: node
+  linkType: hard
+
 "resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>":
   version: 1.22.3
   resolution: "resolve@patch:resolve@npm%3A1.22.3#~builtin<compat/resolve>::version=1.22.3&hash=c3c19d"
@@ -48250,6 +49972,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rpc-websockets@npm:^9.0.2":
+  version: 9.1.3
+  resolution: "rpc-websockets@npm:9.1.3"
+  dependencies:
+    "@swc/helpers": ^0.5.11
+    "@types/uuid": ^8.3.4
+    "@types/ws": ^8.2.2
+    buffer: ^6.0.3
+    bufferutil: ^4.0.1
+    eventemitter3: ^5.0.1
+    utf-8-validate: ^5.0.2
+    uuid: ^8.3.2
+    ws: ^8.5.0
+  dependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: a83711c9a052c2ba11ce67d87ebff6e272e4a2b1f800531b199818b7631f6cf3d59fc6fc0873d42586c93d6cd599887b11c99a0daa4efa03366ec34ea7836057
+  languageName: node
+  linkType: hard
+
 "rrweb-cssom@npm:^0.8.0":
   version: 0.8.0
   resolution: "rrweb-cssom@npm:0.8.0"
@@ -48649,6 +50393,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver-compare@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "semver-compare@npm:1.0.0"
+  checksum: dd1d7e2909744cf2cf71864ac718efc990297f9de2913b68e41a214319e70174b1d1793ac16e31183b128c2b9812541300cb324db8168e6cf6b570703b171c68
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -48709,6 +50460,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.1.1":
+  version: 7.7.2
+  resolution: "semver@npm:7.7.2"
+  bin:
+    semver: bin/semver.js
+  checksum: dd94ba8f1cbc903d8eeb4dd8bf19f46b3deb14262b6717d0de3c804b594058ae785ef2e4b46c5c3b58733c99c83339068203002f9e37cfe44f7e2cc5e3d2f621
+  languageName: node
+  linkType: hard
+
 "semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.0, semver@npm:^7.5.1, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4":
   version: 7.5.4
   resolution: "semver@npm:7.5.4"
@@ -49559,6 +51319,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socks-proxy-agent@npm:^8.0.3":
+  version: 8.0.5
+  resolution: "socks-proxy-agent@npm:8.0.5"
+  dependencies:
+    agent-base: ^7.1.2
+    debug: ^4.3.4
+    socks: ^2.8.3
+  checksum: b4fbcdb7ad2d6eec445926e255a1fb95c975db0020543fbac8dfa6c47aecc6b3b619b7fb9c60a3f82c9b2969912a5e7e174a056ae4d98cb5322f3524d6036e1d
+  languageName: node
+  linkType: hard
+
 "socks@npm:^2.6.2":
   version: 2.7.1
   resolution: "socks@npm:2.7.1"
@@ -49579,6 +51350,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socks@npm:^2.8.3":
+  version: 2.8.7
+  resolution: "socks@npm:2.8.7"
+  dependencies:
+    ip-address: ^10.0.1
+    smart-buffer: ^4.2.0
+  checksum: 4bbe2c88cf0eeaf49f94b7f11564a99b2571bde6fd1e714ff95b38f89e1f97858c19e0ab0e6d39eb7f6a984fa67366825895383ed563fe59962a1d57a1d55318
+  languageName: node
+  linkType: hard
+
 "sonic-boom@npm:^2.2.1":
   version: 2.8.0
   resolution: "sonic-boom@npm:2.8.0"
@@ -49588,6 +51369,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sort-object-keys@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "sort-object-keys@npm:1.1.3"
+  checksum: abea944d6722a1710a1aa6e4f9509da085d93d5fc0db23947cb411eedc7731f80022ce8fa68ed83a53dd2ac7441fcf72a3f38c09b3d9bbc4ff80546aa2e151ad
+  languageName: node
+  linkType: hard
+
+"sort-package-json@npm:3.4.0":
+  version: 3.4.0
+  resolution: "sort-package-json@npm:3.4.0"
+  dependencies:
+    detect-indent: ^7.0.1
+    detect-newline: ^4.0.1
+    git-hooks-list: ^4.0.0
+    is-plain-obj: ^4.1.0
+    semver: ^7.7.1
+    sort-object-keys: ^1.1.3
+    tinyglobby: ^0.2.12
+  bin:
+    sort-package-json: cli.js
+  checksum: 47ee11a14c6882954b537b59e7a66994adfc8ce370ca957d89d52c0379067900ee9f322625f496f00e2e5c01554c90633839f562a6bcb4f1bc1f262cf69a2072
+  languageName: node
+  linkType: hard
+
 "source-list-map@npm:^2.0.0, source-list-map@npm:^2.0.1":
   version: 2.0.1
   resolution: "source-list-map@npm:2.0.1"
@@ -49997,6 +51802,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-chain@npm:^2.2.5":
+  version: 2.2.5
+  resolution: "stream-chain@npm:2.2.5"
+  checksum: c83cbf504bd11e2bcbe761a92801295b3decac7ffa4092ceffca2eb1b5d0763bcc511fa22cd8044e8a18c21ca66794fd10c8d9cd1292a3e6c0d83a4194c6b8ed
+  languageName: node
+  linkType: hard
+
 "stream-http@npm:^2.3.1":
   version: 2.8.3
   resolution: "stream-http@npm:2.8.3"
@@ -50022,6 +51834,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-json@npm:^1.9.1":
+  version: 1.9.1
+  resolution: "stream-json@npm:1.9.1"
+  dependencies:
+    stream-chain: ^2.2.5
+  checksum: 2ebf0648f9ed82ee79727a9a47805231a70d5032e0c21cee3e05cd3c449d3ce49c72b371555447eeef55904bae22ac64be8ae6086fc6cce0b83b3aa617736b64
+  languageName: node
+  linkType: hard
+
 "stream-shift@npm:^1.0.0":
   version: 1.0.1
   resolution: "stream-shift@npm:1.0.1"
@@ -50699,6 +52520,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"superstruct@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "superstruct@npm:2.0.2"
+  checksum: a5f75b72cb8b14b86f4f7f750dae8c5ab0e4e1d92414b55e7625bae07bbcafad81c92486e7e32ccacd6ae1f553caff2b92a50ff42ad5093fd35b9cb7f4e5ec86
+  languageName: node
+  linkType: hard
+
 "supertest@npm:^6.3.3":
   version: 6.3.3
   resolution: "supertest@npm:6.3.3"
@@ -50878,6 +52706,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:0.11.11":
+  version: 0.11.11
+  resolution: "synckit@npm:0.11.11"
+  dependencies:
+    "@pkgr/core": ^0.2.9
+  checksum: bc896d4320525501495654766e6b0aa394e522476ea0547af603bdd9fd7e9b65dcd6e3a237bc7eb3ab7e196376712f228bf1bf6ed1e1809f4b32dc9baf7ad413
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.11.0":
   version: 0.11.4
   resolution: "synckit@npm:0.11.4"
@@ -50977,6 +52814,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^4.1.11":
+  version: 4.1.13
+  resolution: "tailwindcss@npm:4.1.13"
+  checksum: 25e2883c69190c6474a6c44caed8f82511a4025a2285e34bca4b79671a73acd79e74844a4908313098218de81a5aba62df727bb6ee26f69eeca3386b4941de4b
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -51089,6 +52933,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "tar@npm:6.2.1"
+  dependencies:
+    chownr: ^2.0.0
+    fs-minipass: ^2.0.0
+    minipass: ^5.0.0
+    minizlib: ^2.1.1
+    mkdirp: ^1.0.3
+    yallist: ^4.0.0
+  checksum: f1322768c9741a25356c11373bce918483f40fa9a25c69c59410c8a1247632487edef5fe76c5f12ac51a6356d2f1829e96d2bc34098668a2fc34d76050ac2b6c
+  languageName: node
+  linkType: hard
+
 "tdigest@npm:^0.1.1":
   version: 0.1.2
   resolution: "tdigest@npm:0.1.2"
@@ -51475,6 +53333,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyglobby@npm:^0.2.12":
+  version: 0.2.15
+  resolution: "tinyglobby@npm:0.2.15"
+  dependencies:
+    fdir: ^6.5.0
+    picomatch: ^4.0.3
+  checksum: 0e33b8babff966c6ab86e9b825a350a6a98a63700fa0bb7ae6cf36a7770a508892383adc272f7f9d17aaf46a9d622b455e775b9949a3f951eaaf5dfb26331d44
+  languageName: node
+  linkType: hard
+
 "tinyglobby@npm:^0.2.7":
   version: 0.2.10
   resolution: "tinyglobby@npm:0.2.10"
@@ -52114,6 +53982,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:4.41.0":
+  version: 4.41.0
+  resolution: "type-fest@npm:4.41.0"
+  checksum: 7055c0e3eb188425d07403f1d5dc175ca4c4f093556f26871fe22041bc93d137d54bef5851afa320638ca1379106c594f5aa153caa654ac1a7f22c71588a4e80
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.12.0":
   version: 0.12.0
   resolution: "type-fest@npm:0.12.0"
@@ -52404,7 +54279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:4.8.4":
+"typescript@npm:4.8.4, typescript@npm:~4.8.4":
   version: 4.8.4
   resolution: "typescript@npm:4.8.4"
   bin:
@@ -52494,7 +54369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@4.8.4#~builtin<compat/typescript>":
+"typescript@patch:typescript@4.8.4#~builtin<compat/typescript>, typescript@patch:typescript@~4.8.4#~builtin<compat/typescript>":
   version: 4.8.4
   resolution: "typescript@patch:typescript@npm%3A4.8.4#~builtin<compat/typescript>::version=4.8.4&hash=1a91c8"
   bin:
@@ -53127,6 +55002,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "update-browserslist-db@npm:1.1.3"
+  dependencies:
+    escalade: ^3.2.0
+    picocolors: ^1.1.1
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 7b6d8d08c34af25ee435bccac542bedcb9e57c710f3c42421615631a80aa6dd28b0a81c9d2afbef53799d482fb41453f714b8a7a0a8003e3b4ec8fb1abb819af
+  languageName: node
+  linkType: hard
+
 "update-check@npm:1.5.4":
   version: 1.5.4
   resolution: "update-check@npm:1.5.4"
@@ -53467,7 +55356,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"validate-npm-package-license@npm:^3.0.1":
+"validate-npm-package-license@npm:^3.0.1, validate-npm-package-license@npm:^3.0.4":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
   dependencies:
@@ -53486,6 +55375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"validate-npm-package-name@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "validate-npm-package-name@npm:5.0.1"
+  checksum: 0d583a1af23aeffea7748742cf22b6802458736fb8b60323ba5949763824d46f796474b0e1b9206beb716f9d75269e19dbd7795d6b038b29d561be95dd827381
+  languageName: node
+  linkType: hard
+
 "valtio@npm:1.11.2":
   version: 1.11.2
   resolution: "valtio@npm:1.11.2"
@@ -54551,6 +56447,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-fetch@npm:^3.4.1":
+  version: 3.6.20
+  resolution: "whatwg-fetch@npm:3.6.20"
+  checksum: c58851ea2c4efe5c2235f13450f426824cf0253c1d45da28f45900290ae602a20aff2ab43346f16ec58917d5562e159cd691efa368354b2e82918c2146a519c5
+  languageName: node
+  linkType: hard
+
 "whatwg-fetch@npm:^3.6.2":
   version: 3.6.16
   resolution: "whatwg-fetch@npm:3.6.16"
@@ -54793,7 +56696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^1.2.9, which@npm:^1.3.1":
+"which@npm:^1.2.14, which@npm:^1.2.9, which@npm:^1.3.1":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
   dependencies:
@@ -54826,6 +56729,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "which@npm:4.0.0"
+  dependencies:
+    isexe: ^3.1.1
+  bin:
+    node-which: bin/which.js
+  checksum: f17e84c042592c21e23c8195108cff18c64050b9efb8459589116999ea9da6dd1509e6a1bac3aeebefd137be00fabbb61b5c2bc0aa0f8526f32b58ee2f545651
+  languageName: node
+  linkType: hard
+
 "why-is-node-running@npm:^2.3.0":
   version: 2.3.0
   resolution: "why-is-node-running@npm:2.3.0"
@@ -55199,7 +57113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^4.0.2":
+"write-file-atomic@npm:^4.0.1, write-file-atomic@npm:^4.0.2":
   version: 4.0.2
   resolution: "write-file-atomic@npm:4.0.2"
   dependencies:
@@ -55303,6 +57217,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^7.5.10":
+  version: 7.5.10
+  resolution: "ws@npm:7.5.10"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: f9bb062abf54cc8f02d94ca86dcd349c3945d63851f5d07a3a61c2fcb755b15a88e943a63cf580cbdb5b74436d67ef6b67f745b8f7c0814e411379138e1863cb
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.11.0, ws@npm:^8.13.0, ws@npm:^8.5.0, ws@npm:^8.8.1":
   version: 8.13.0
   resolution: "ws@npm:8.13.0"

From 639301e4ece44691c3d7a0e98b3d697ba19e6f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Wed, 17 Sep 2025 16:09:26 +0200
Subject: [PATCH 02/11] fix: add lock

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 0a57b8851..9c7b5638d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25276,11 +25276,11 @@ __metadata:
   linkType: hard
 
 "baseline-browser-mapping@npm:^2.8.3":
-  version: 2.8.5
-  resolution: "baseline-browser-mapping@npm:2.8.5"
+  version: 2.8.4
+  resolution: "baseline-browser-mapping@npm:2.8.4"
   bin:
     baseline-browser-mapping: dist/cli.js
-  checksum: 31e7ecc8694180f2de3f408903aa24631bed999c957826b0ae1701668fc7d67e4f63e0502ffa0d9753a1350692afbac3f9d532b6656d14ab5e3b20d79a9eba3d
+  checksum: c9580e27141fdaff3ad219a14906774c80a040f45527213d867ce8a2db02a60cf1db545041bfb69a9482c3101c5a0cd3cef1155cde3f1ba8e98bf817667756c5
   languageName: node
   linkType: hard
 

From 89e4c08a46bd7966797f9c1a7f66c0356138f7f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Thu, 18 Sep 2025 10:19:06 +0200
Subject: [PATCH 03/11] fix: improve useSDK

---
 playground/multichain-react/src/sdk/useSDK.ts | 216 ++++++++++--------
 1 file changed, 120 insertions(+), 96 deletions(-)

diff --git a/playground/multichain-react/src/sdk/useSDK.ts b/playground/multichain-react/src/sdk/useSDK.ts
index 5c44d6623..f73d4857f 100644
--- a/playground/multichain-react/src/sdk/useSDK.ts
+++ b/playground/multichain-react/src/sdk/useSDK.ts
@@ -1,105 +1,129 @@
 /* eslint-disable */
 
-import { createMetamaskSDK, type InvokeMethodOptions, type MultichainCore, type Scope, type SessionData } from '@metamask/multichain-sdk';
+import {
+  createMetamaskSDK,
+  type InvokeMethodOptions,
+  type MultichainCore,
+  type Scope,
+  type SessionData,
+} from '@metamask/multichain-sdk';
 import type { CaipAccountId } from '@metamask/utils';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 export const METAMASK_PROD_CHROME_ID = 'nkbihfbeogaeaoehlefnkodbefgpgknn';
 
 type SDKOptions = {
-	onSessionChanged?: (session: SessionData | undefined) => void;
-	extensionId?: string;
+  onSessionChanged?: (session: SessionData | undefined) => void;
+  extensionId?: string;
 };
 
-export function useSDK({ extensionId }: SDKOptions) {
-	const [sdk, setSdk] = useState<MultichainCore>();
-	const [currentExtensionId, setCurrentExtensionId] = useState<string | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [currentSession, setCurrentSession] = useState<SessionData | undefined>(undefined);
-
-	const initializeSDK = useCallback(async (extensionId?: string) => {
-		try {
-			const newSdk = await createMetamaskSDK({
-				dapp: {
-					name: 'playground',
-					url: 'https://playground.metamask.io',
-				},
-				analytics: {
-					enabled: false,
-				},
-				ui: {
-					headless: false,
-				},
-				...(extensionId && {
-					transport: {
-						extensionId: extensionId,
-					},
-				}),
-			});
-
-			// Set up event listener immediately after SDK creation
-			const unsubscribe = newSdk.on('session_changed', (session) => {
-				setCurrentSession(session);
-			});
-
-			// Initialize the SDK if it's still pending
-			if (newSdk.state === 'pending') {
-				await newSdk.init();
-			}
-
-			setSdk(newSdk);
-			return unsubscribe;
-		} catch (error: any) {
-			setError(error.message);
-			return undefined;
-		}
-	}, []);
-
-	useEffect(() => {
-		let unsubscribe: (() => void) | undefined;
-
-		if (extensionId && currentExtensionId !== extensionId) {
-			setCurrentExtensionId(extensionId);
-			// Reinitialize SDK with new extension ID
-			initializeSDK(extensionId).then((unsub) => {
-				unsubscribe = unsub;
-			});
-		} else if (!sdk) {
-			// Initialize SDK for the first time
-			initializeSDK(extensionId).then((unsub) => {
-				unsubscribe = unsub;
-			});
-		}
-
-		return () => {
-			unsubscribe?.();
-		};
-	}, [sdk, extensionId, currentExtensionId, initializeSDK]);
-
-	const disconnect = useCallback(async () => {
-		await sdk?.disconnect();
-	}, [sdk]);
-
-	const connect = useCallback(
-		async (scopes: Scope[], caipAccountIds: CaipAccountId[]) => {
-			await sdk?.connect(scopes, caipAccountIds);
-		},
-		[sdk],
-	);
-
-	const invokeMethod = useCallback(
-		async (options: InvokeMethodOptions) => {
-			return sdk?.invokeMethod(options);
-		},
-		[sdk],
-	);
-
-	return {
-		isConnected: currentSession !== undefined,
-		session: currentSession,
-		error,
-		connect,
-		disconnect,
-		invokeMethod,
-		storage: sdk?.storage,
-	};
+export function useSDK({ extensionId, onSessionChanged }: SDKOptions) {
+  const [sdk, setSdk] = useState<MultichainCore | null>(null);
+  const [session, setSession] = useState<SessionData | undefined>(undefined);
+  const [error, setError] = useState<string | null>(null);
+
+  // Use a ref to hold the onSessionChanged callback.
+  // This allows the callback to be updated without re-triggering the main effect.
+  const onSessionChangedRef = useRef(onSessionChanged);
+  useEffect(() => {
+    onSessionChangedRef.current = onSessionChanged;
+  }, [onSessionChanged]);
+
+  useEffect(() => {
+    let isCancelled = false;
+    let sdkInstance: MultichainCore | null = null;
+    let unsubscribe: (() => void) | undefined;
+
+    const initialize = async () => {
+      // Reset state on re-initialization
+      setSdk(null);
+      setSession(undefined);
+      setError(null);
+
+      try {
+        sdkInstance = await createMetamaskSDK({
+          dapp: {
+            name: 'playground',
+            url: 'https://playground.metamask.io',
+          },
+          analytics: {
+            enabled: false,
+          },
+          ...(extensionId && {
+            transport: {
+              extensionId: extensionId,
+            },
+          }),
+        });
+
+        if (isCancelled) {
+          await sdkInstance.disconnect();
+          return;
+        }
+
+        unsubscribe = sdkInstance.on('session_changed', (newSession) => {
+          setSession(newSession);
+          onSessionChangedRef.current?.(newSession);
+        });
+
+        const currentSession = await sdkInstance.getCurrentSession();
+        if (currentSession && !isCancelled) {
+          setSession(currentSession);
+          onSessionChangedRef.current?.(currentSession);
+        }
+
+        setSdk(sdkInstance);
+      } catch (e: any) {
+        if (!isCancelled) {
+          setError(e.message);
+        }
+      }
+    };
+
+    initialize();
+
+    return () => {
+      isCancelled = true;
+      unsubscribe?.();
+      if (sdkInstance) {
+        sdkInstance.disconnect();
+      }
+    };
+  }, [extensionId]);
+
+  const disconnect = useCallback(async () => {
+    if (!sdk) {
+      throw new Error('SDK not initialized');
+    }
+    await sdk.disconnect();
+  }, [sdk]);
+
+  const connect = useCallback(
+    async (scopes: Scope[], caipAccountIds: CaipAccountId[]) => {
+      if (!sdk) {
+        throw new Error('SDK not initialized');
+      }
+      return sdk.connect(scopes, caipAccountIds);
+    },
+    [sdk],
+  );
+
+  const invokeMethod = useCallback(
+    async (options: InvokeMethodOptions) => {
+      if (!sdk) {
+        throw new Error('SDK not initialized');
+      }
+      return sdk.invokeMethod(options);
+    },
+    [sdk],
+  );
+
+  return {
+    isConnected: session !== undefined,
+    session,
+    error,
+    connect,
+    disconnect,
+    invokeMethod,
+  };
 }

From b51e59945b0a998273879f6fb3b0d197440cab6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Thu, 18 Sep 2025 15:17:53 +0200
Subject: [PATCH 04/11] fix: install modal web show initial QRCode

---
 packages/sdk-multichain/src/ui/modals/web/install.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/sdk-multichain/src/ui/modals/web/install.ts b/packages/sdk-multichain/src/ui/modals/web/install.ts
index dcdb42fc5..ee195b923 100644
--- a/packages/sdk-multichain/src/ui/modals/web/install.ts
+++ b/packages/sdk-multichain/src/ui/modals/web/install.ts
@@ -11,7 +11,7 @@ export class InstallModal extends AbstractInstallModal {
 		modal.sdkVersion = options.sdkVersion;
 		modal.addEventListener('close', ({ detail: { shouldTerminate } }) => options.onClose(shouldTerminate));
 		modal.addEventListener('startDesktopOnboarding', options.startDesktopOnboarding);
-
+		modal.sessionRequest = options.sessionRequest;
 		options.parentElement?.appendChild(modal);
 
 		this.instance = modal;
@@ -36,9 +36,10 @@ export class InstallModal extends AbstractInstallModal {
 			}
 
 			const now = Date.now();
-			if (now >= this.sessionRequest.expiresAt) {
+			if (this.instance && now >= this.sessionRequest.expiresAt) {
 				// Generate new session request
 				const newSessionRequest = await this.options.createSessionRequest();
+				this.instance.sessionRequest = newSessionRequest;
 				this.sessionRequest = newSessionRequest;
 			}
 		}, 1000); // Check every second

From d2835f0182645d27e4218a1f7d127cbf62b80fb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Thu, 18 Sep 2025 15:47:37 +0200
Subject: [PATCH 05/11] fix: clean install modal after closing

---
 packages/sdk-multichain/src/ui/modals/web/install.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sdk-multichain/src/ui/modals/web/install.ts b/packages/sdk-multichain/src/ui/modals/web/install.ts
index ee195b923..a5a197c55 100644
--- a/packages/sdk-multichain/src/ui/modals/web/install.ts
+++ b/packages/sdk-multichain/src/ui/modals/web/install.ts
@@ -23,6 +23,7 @@ export class InstallModal extends AbstractInstallModal {
 		this.stopExpirationCheck();
 		if (modal && options.parentElement?.contains(modal)) {
 			options.parentElement.removeChild(modal);
+			this.instance = undefined;
 		}
 	}
 

From f5aa755b714ad6245a05b2086e9820ba469c8820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Thu, 18 Sep 2025 15:48:37 +0200
Subject: [PATCH 06/11] fix: unload and re-launching modals

---
 packages/sdk-multichain/src/multichain/index.ts | 5 +++--
 packages/sdk-multichain/src/ui/index.ts         | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/sdk-multichain/src/multichain/index.ts b/packages/sdk-multichain/src/multichain/index.ts
index 041fe2f16..262845f6a 100644
--- a/packages/sdk-multichain/src/multichain/index.ts
+++ b/packages/sdk-multichain/src/multichain/index.ts
@@ -305,9 +305,10 @@ export class MultichainSDK extends MultichainCore {
 	private async setupMWP() {
 		const { adapter: kvstore } = this.options.storage;
 		const dappClient = await this.createDappClient();
+		this.__dappClient = dappClient;
+
 		const apiTransport = new MWPTransport(dappClient, kvstore);
-		this.__dappClient ??= dappClient;
-		this.__transport ??= apiTransport;
+		this.__transport = apiTransport;
 
 		this.dappClient.once('connected', () => {
 			const apiClient = getMultichainClient({ transport: this.transport });
diff --git a/packages/sdk-multichain/src/ui/index.ts b/packages/sdk-multichain/src/ui/index.ts
index 97c7357f8..a6b48b405 100644
--- a/packages/sdk-multichain/src/ui/index.ts
+++ b/packages/sdk-multichain/src/ui/index.ts
@@ -108,7 +108,7 @@ export class ModalFactory<T extends FactoryModals = FactoryModals> {
 			sessionRequest,
 			sdkVersion: getVersion(),
 			onClose: () => {
-				this.unload(true);
+				this.unload(false);
 			},
 			startDesktopOnboarding: () => {
 				new MetaMaskOnboarding().startOnboarding();

From ae0292ad85a696b5c37cdd21700cb3cbbba6c6bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Fri, 19 Sep 2025 10:51:46 +0200
Subject: [PATCH 07/11] fix: linter fixes

---
 biome.json                                    |  68 +++---
 playground/multichain-react/src/App.tsx       |   5 +-
 .../src/components/FeaturedNetworks.tsx       |   2 +-
 .../src/components/ScopeCard.tsx              |   2 +-
 playground/multichain-react/src/sdk/useSDK.ts | 228 +++++++++---------
 5 files changed, 150 insertions(+), 155 deletions(-)

diff --git a/biome.json b/biome.json
index 808650c57..6319ad3e4 100644
--- a/biome.json
+++ b/biome.json
@@ -1,36 +1,36 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
-  "vcs": {
-    "enabled": false,
-    "clientKind": "git",
-    "useIgnoreFile": false
-  },
-  "files": {
-    "includes": ["packages/sdk-multichain/src/**", "!**/node_modules/**", "!**/dist/**"],
-    "ignoreUnknown": false
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "tab",
-    "lineWidth": 180
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "quoteStyle": "single"
-    }
-  },
-  "assist": {
-    "enabled": true,
-    "actions": {
-      "source": {
-        "organizeImports": "on"
-      }
-    }
-  }
+	"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"includes": ["packages/sdk-multichain/src/**", "playground/multichain-node/src/**", "playground/multichain-react/src/**", "!**/node_modules/**", "!**/dist/**"],
+		"ignoreUnknown": false
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"lineWidth": 180
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
 }
diff --git a/playground/multichain-react/src/App.tsx b/playground/multichain-react/src/App.tsx
index ddb0e7952..ffa55cb9f 100644
--- a/playground/multichain-react/src/App.tsx
+++ b/playground/multichain-react/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import { useId } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import type { Scope, SessionData } from '@metamask/multichain-sdk';
 import type { CaipAccountId } from '@metamask/utils';
@@ -70,7 +70,8 @@ function App() {
 
 	const availableOptions = Object.keys(FEATURED_NETWORKS).reduce<{ name: string; value: string }[]>((all, networkName) => {
 		const networkCaipValue = FEATURED_NETWORKS[networkName as keyof typeof FEATURED_NETWORKS];
-		return [...all, { name: networkName, value: networkCaipValue }];
+		all.push({ name: networkName, value: networkCaipValue });
+		return all;
 	}, []);
 
 	return (
diff --git a/playground/multichain-react/src/components/FeaturedNetworks.tsx b/playground/multichain-react/src/components/FeaturedNetworks.tsx
index 41fd3650c..102286ac7 100644
--- a/playground/multichain-react/src/components/FeaturedNetworks.tsx
+++ b/playground/multichain-react/src/components/FeaturedNetworks.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import type { Scope } from '@metamask/multichain-sdk';
-// biome-ignore lint/style/useImportType: <explanation>
+// biome-ignore lint/style/useImportType: ok
 import React from 'react';
 
 import { FEATURED_NETWORKS } from '../constants/networks';
diff --git a/playground/multichain-react/src/components/ScopeCard.tsx b/playground/multichain-react/src/components/ScopeCard.tsx
index 4ae13c056..a419b7abd 100644
--- a/playground/multichain-react/src/components/ScopeCard.tsx
+++ b/playground/multichain-react/src/components/ScopeCard.tsx
@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: ok */
 import MetaMaskOpenRPCDocument from '@metamask/api-specs';
 import type { Scope, SessionData } from '@metamask/multichain-sdk';
 import { type CaipAccountId, type CaipChainId, type CaipAccountAddress, parseCaipAccountId, type Json } from '@metamask/utils';
@@ -48,7 +49,6 @@ export function ScopeCard({ scope, details }: { scope: Scope; details: SessionDa
 	}, []);
 
 	const handleSessionChangedNotification = useCallback(
-		// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 		(notification: any) => {
 			if (notification.params?.sessionScopes) {
 				setInitialMethodsAndAccounts({
diff --git a/playground/multichain-react/src/sdk/useSDK.ts b/playground/multichain-react/src/sdk/useSDK.ts
index f73d4857f..99196ef8a 100644
--- a/playground/multichain-react/src/sdk/useSDK.ts
+++ b/playground/multichain-react/src/sdk/useSDK.ts
@@ -1,129 +1,123 @@
 /* eslint-disable */
 
-import {
-  createMetamaskSDK,
-  type InvokeMethodOptions,
-  type MultichainCore,
-  type Scope,
-  type SessionData,
-} from '@metamask/multichain-sdk';
+import { createMetamaskSDK, type InvokeMethodOptions, type MultichainCore, type Scope, type SessionData } from '@metamask/multichain-sdk';
 import type { CaipAccountId } from '@metamask/utils';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const METAMASK_PROD_CHROME_ID = 'nkbihfbeogaeaoehlefnkodbefgpgknn';
 
 type SDKOptions = {
-  onSessionChanged?: (session: SessionData | undefined) => void;
-  extensionId?: string;
+	onSessionChanged?: (session: SessionData | undefined) => void;
+	extensionId?: string;
 };
 
 export function useSDK({ extensionId, onSessionChanged }: SDKOptions) {
-  const [sdk, setSdk] = useState<MultichainCore | null>(null);
-  const [session, setSession] = useState<SessionData | undefined>(undefined);
-  const [error, setError] = useState<string | null>(null);
-
-  // Use a ref to hold the onSessionChanged callback.
-  // This allows the callback to be updated without re-triggering the main effect.
-  const onSessionChangedRef = useRef(onSessionChanged);
-  useEffect(() => {
-    onSessionChangedRef.current = onSessionChanged;
-  }, [onSessionChanged]);
-
-  useEffect(() => {
-    let isCancelled = false;
-    let sdkInstance: MultichainCore | null = null;
-    let unsubscribe: (() => void) | undefined;
-
-    const initialize = async () => {
-      // Reset state on re-initialization
-      setSdk(null);
-      setSession(undefined);
-      setError(null);
-
-      try {
-        sdkInstance = await createMetamaskSDK({
-          dapp: {
-            name: 'playground',
-            url: 'https://playground.metamask.io',
-          },
-          analytics: {
-            enabled: false,
-          },
-          ...(extensionId && {
-            transport: {
-              extensionId: extensionId,
-            },
-          }),
-        });
-
-        if (isCancelled) {
-          await sdkInstance.disconnect();
-          return;
-        }
-
-        unsubscribe = sdkInstance.on('session_changed', (newSession) => {
-          setSession(newSession);
-          onSessionChangedRef.current?.(newSession);
-        });
-
-        const currentSession = await sdkInstance.getCurrentSession();
-        if (currentSession && !isCancelled) {
-          setSession(currentSession);
-          onSessionChangedRef.current?.(currentSession);
-        }
-
-        setSdk(sdkInstance);
-      } catch (e: any) {
-        if (!isCancelled) {
-          setError(e.message);
-        }
-      }
-    };
-
-    initialize();
-
-    return () => {
-      isCancelled = true;
-      unsubscribe?.();
-      if (sdkInstance) {
-        sdkInstance.disconnect();
-      }
-    };
-  }, [extensionId]);
-
-  const disconnect = useCallback(async () => {
-    if (!sdk) {
-      throw new Error('SDK not initialized');
-    }
-    await sdk.disconnect();
-  }, [sdk]);
-
-  const connect = useCallback(
-    async (scopes: Scope[], caipAccountIds: CaipAccountId[]) => {
-      if (!sdk) {
-        throw new Error('SDK not initialized');
-      }
-      return sdk.connect(scopes, caipAccountIds);
-    },
-    [sdk],
-  );
-
-  const invokeMethod = useCallback(
-    async (options: InvokeMethodOptions) => {
-      if (!sdk) {
-        throw new Error('SDK not initialized');
-      }
-      return sdk.invokeMethod(options);
-    },
-    [sdk],
-  );
-
-  return {
-    isConnected: session !== undefined,
-    session,
-    error,
-    connect,
-    disconnect,
-    invokeMethod,
-  };
+	const [sdk, setSdk] = useState<MultichainCore | null>(null);
+	const [session, setSession] = useState<SessionData | undefined>(undefined);
+	const [error, setError] = useState<string | null>(null);
+
+	// Use a ref to hold the onSessionChanged callback.
+	// This allows the callback to be updated without re-triggering the main effect.
+	const onSessionChangedRef = useRef(onSessionChanged);
+	useEffect(() => {
+		onSessionChangedRef.current = onSessionChanged;
+	}, [onSessionChanged]);
+
+	useEffect(() => {
+		let isCancelled = false;
+		let sdkInstance: MultichainCore | null = null;
+		let unsubscribe: (() => void) | undefined;
+
+		const initialize = async () => {
+			// Reset state on re-initialization
+			setSdk(null);
+			setSession(undefined);
+			setError(null);
+
+			try {
+				sdkInstance = await createMetamaskSDK({
+					dapp: {
+						name: 'playground',
+						url: 'https://playground.metamask.io',
+					},
+					analytics: {
+						enabled: false,
+					},
+					...(extensionId && {
+						transport: {
+							extensionId: extensionId,
+						},
+					}),
+				});
+
+				if (isCancelled) {
+					await sdkInstance.disconnect();
+					return;
+				}
+
+				unsubscribe = sdkInstance.on('session_changed', (newSession) => {
+					setSession(newSession);
+					onSessionChangedRef.current?.(newSession);
+				});
+
+				const currentSession = await sdkInstance.getCurrentSession();
+				if (currentSession && !isCancelled) {
+					setSession(currentSession);
+					onSessionChangedRef.current?.(currentSession);
+				}
+
+				setSdk(sdkInstance);
+			} catch (e) {
+				if (!isCancelled) {
+					setError(e.message);
+				}
+			}
+		};
+
+		initialize();
+
+		return () => {
+			isCancelled = true;
+			unsubscribe?.();
+			if (sdkInstance) {
+				sdkInstance.disconnect();
+			}
+		};
+	}, [extensionId]);
+
+	const disconnect = useCallback(async () => {
+		if (!sdk) {
+			throw new Error('SDK not initialized');
+		}
+		await sdk.disconnect();
+	}, [sdk]);
+
+	const connect = useCallback(
+		async (scopes: Scope[], caipAccountIds: CaipAccountId[]) => {
+			if (!sdk) {
+				throw new Error('SDK not initialized');
+			}
+			return sdk.connect(scopes, caipAccountIds);
+		},
+		[sdk],
+	);
+
+	const invokeMethod = useCallback(
+		async (options: InvokeMethodOptions) => {
+			if (!sdk) {
+				throw new Error('SDK not initialized');
+			}
+			return sdk.invokeMethod(options);
+		},
+		[sdk],
+	);
+
+	return {
+		isConnected: session !== undefined,
+		session,
+		error,
+		connect,
+		disconnect,
+		invokeMethod,
+	};
 }

From 1b881b2334c832d9dc685023aeb9cb8648b994ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Fri, 19 Sep 2025 11:16:35 +0200
Subject: [PATCH 08/11] fix: type module

---
 playground/multichain-react/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/multichain-react/package.json b/playground/multichain-react/package.json
index bbcd42432..9101ec4fe 100644
--- a/playground/multichain-react/package.json
+++ b/playground/multichain-react/package.json
@@ -10,6 +10,7 @@
 	"bugs": {
 		"url": "https://github.com/MetaMask/test-dapp-multichain/issues"
 	},
+  "type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/MetaMask/test-dapp-multichain.git"

From d32f8aa0b8dfc542ebb28a141d5c6dcb1e75b1aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Fri, 19 Sep 2025 11:43:24 +0200
Subject: [PATCH 09/11] fix: rollback to cjs config in multichain-react

---
 playground/multichain-react/craco.config.js | 7 +++----
 playground/multichain-react/package.json    | 1 -
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/playground/multichain-react/craco.config.js b/playground/multichain-react/craco.config.js
index c9fb4250e..b04df0aca 100644
--- a/playground/multichain-react/craco.config.js
+++ b/playground/multichain-react/craco.config.js
@@ -1,9 +1,8 @@
-import webpack from 'webpack';
-import { createRequire } from 'module';
-
+const webpack = require('webpack');
+const { createRequire } = require('module');
 const require = createRequire(import.meta.url);
 
-export default {
+module.exports = {
 	webpack: {
 		configure: (webpackConfig) => {
 			webpackConfig.resolve.fallback = {
diff --git a/playground/multichain-react/package.json b/playground/multichain-react/package.json
index 9101ec4fe..bbcd42432 100644
--- a/playground/multichain-react/package.json
+++ b/playground/multichain-react/package.json
@@ -10,7 +10,6 @@
 	"bugs": {
 		"url": "https://github.com/MetaMask/test-dapp-multichain/issues"
 	},
-  "type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/MetaMask/test-dapp-multichain.git"

From 471fab64e7436aa5b77bce508ddfbf056ec4d934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Fri, 19 Sep 2025 13:32:58 +0200
Subject: [PATCH 10/11] fix: build fix

---
 playground/multichain-react/craco.config.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/playground/multichain-react/craco.config.js b/playground/multichain-react/craco.config.js
index b04df0aca..348b14e20 100644
--- a/playground/multichain-react/craco.config.js
+++ b/playground/multichain-react/craco.config.js
@@ -1,6 +1,4 @@
 const webpack = require('webpack');
-const { createRequire } = require('module');
-const require = createRequire(import.meta.url);
 
 module.exports = {
 	webpack: {

From 2cc064f8f5128b6e6dc3e84fc10d04c325a6dc07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javier=20Ribo=CC=81?= <javi.ribo@consensys.net>
Date: Fri, 19 Sep 2025 13:35:24 +0200
Subject: [PATCH 11/11] fix: convert craco to cjs

---
 playground/multichain-react/craco.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/multichain-react/craco.config.js b/playground/multichain-react/craco.config.js
index 348b14e20..cf0e7cd10 100644
--- a/playground/multichain-react/craco.config.js
+++ b/playground/multichain-react/craco.config.js
@@ -6,12 +6,12 @@ module.exports = {
 			webpackConfig.resolve.fallback = {
 				...webpackConfig.resolve.fallback,
 				buffer: require.resolve('buffer'),
-				process: require.resolve('process/browser'),
+				process: require.resolve('process/browser.js'),
 			};
 			webpackConfig.plugins.push(
 				new webpack.ProvidePlugin({
 					Buffer: ['buffer', 'Buffer'],
-					process: 'process/browser',
+					process: 'process/browser.js',
 				}),
 			);
 			return webpackConfig;