feat: initial multichain (react) playground

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"
+			}
+		}
+	}
 }

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 ",

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 });

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();

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;
@@ -23,6 +23,7 @@ export class InstallModal extends AbstractInstallModal {
 		this.stopExpirationCheck();
 		if (modal && options.parentElement?.contains(modal)) {
 			options.parentElement.removeChild(modal);
+			this.instance = undefined;
 		}
 	}
 
@@ -36,9 +37,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

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"
+  ]
+}

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

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

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

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/

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/

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)

playground/multichain-react/craco.config.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack');
+
+module.exports = {
+	webpack: {
+		configure: (webpackConfig) => {
+			webpackConfig.resolve.fallback = {
+				...webpackConfig.resolve.fallback,
+				buffer: require.resolve('buffer'),
+				process: require.resolve('process/browser.js'),
+			};
+			webpackConfig.plugins.push(
+				new webpack.ProvidePlugin({
+					Buffer: ['buffer', 'Buffer'],
+					process: 'process/browser.js',
+				}),
+			);
+			return webpackConfig;
+		},
+	},
+};

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.',
+);