MetaMask · chakra-guy · Feb 11, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
diff --git a/examples/multichain/.gitignore b/examples/multichain/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+local_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+llm.txt
diff --git a/examples/multichain/README.md b/examples/multichain/README.md
@@ -0,0 +1,107 @@
+# MetaMask Multichain SDK Example
+
+A React application demonstrating how to integrate and use the MetaMask Multichain SDK to interact with multiple blockchain networks.
+
+## Features
+
+- Connect to MetaMask across multiple networks
+- Switch between Ethereum and Linea networks
+- Sign messages using the connected wallet
+- Fetch blockchain data (latest block numbers)
+
+## Prerequisites
+
+- Node.js
+- pnpm
+- MetaMask extension installed in your browser
+- Local copy of the MetaMask Multichain SDK
+
+## Setup
+
+1. Clone the repository
+2. Install dependencies:
+```bash
+pnpm install
+```
+3. Create a `local_modules` directory and add the MetaMask Multichain SDK
+
+## Development
+
+```bash
+pnpm dev
+```
+
+## Implementation Details
+
+### Provider Setup
+
+```typescript
+// src/multichain/provider.tsx
+import { createContext, type ReactNode, useMemo } from 'react';
+import { MetamaskMultichain } from '@metamask/sdk-multichain';
+
+export const MultichainContext = createContext<MetamaskMultichain | null>(null);
+
+export const MultichainProvider = ({ children }: { children: ReactNode }) => {
+  const client = useMemo(() => new MetamaskMultichain(), []);
+  return (
+    <MultichainContext.Provider value={client}>
+      {children}
+    </MultichainContext.Provider>
+  );
+};
+```
+
+### Usage Example
+
+```typescript
+// Connect to MetaMask
+const connected = await client.connect({ extensionId: EXTENSION_ID });
+
+// Create a session
+const session = await client.createSession({
+  requiredScopes: {
+    "eip155:1": {
+      methods: [],
+      notifications: [],
+    },
+    "eip155:59144": {
+      methods: [],
+      notifications: [],
+    },
+  },
+});
+
+// Sign a message
+await client.invokeMethod({
+  scope: "eip155:1",
+  request: {
+    method: "personal_sign",
+    params: [message, address],
+  },
+});
+
+// Fetch block number
+await client.invokeMethod({
+  scope: network,
+  request: {
+    method: "eth_blockNumber",
+    params: [],
+  },
+});
+```
+
+## Available Networks
+
+- Ethereum (eip155:1)
+- Linea (eip155:59144)
+
+## Project Structure (relevant files)
+
+```
+src/
+  multichain/           # SDK integration
+    hooks.ts           # React hooks for SDK access
+    provider.tsx       # SDK context provider
+  constants.tsx        # Network configurations
+```
diff --git a/examples/multichain/biome.json b/examples/multichain/biome.json
@@ -0,0 +1,31 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": []
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "space",
+		"indentWidth": 2
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}
diff --git a/examples/multichain/index.html b/examples/multichain/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Metamask Multichain Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/multichain/package.json b/examples/multichain/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "multichain",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^3.8.0",
+    "@emotion/react": "^11.14.0",
+    "@metamask/providers": "^20.0.0",
+    "lucide-react": "^0.468.0",
+    "next-themes": "^0.4.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  }
+}
diff --git a/examples/multichain/public/metamask-logo.svg b/examples/multichain/public/metamask-logo.svg
diff --git a/examples/multichain/public/noise.svg b/examples/multichain/public/noise.svg
diff --git a/examples/multichain/public/vite.svg b/examples/multichain/public/vite.svg