feat: implement CAIP25 MultiChain API and NextJS playground integration

package.json

@@ -10,6 +10,7 @@
     "packages/sdk-socket-server-next",
     "packages/sdk-install-modal-web",
     "packages/sdk-communication-layer",
+    "packages/sdk-multichain",
     "packages/sdk",
     "packages/sdk-react",
     "packages/sdk-react-native",
@@ -34,7 +35,7 @@
     "postinstall": "patch-package",
     "link-packages": "./scripts/link-packages.sh",
     "prepare": "husky install",
-    "dev:core": "turbo run dev --parallel --filter=@metamask/sdk-communication-layer --filter=@metamask/sdk --filter=@metamask/sdk-react",
+    "dev:core": "turbo run dev --parallel --filter=@metamask/sdk-communication-layer --filter=@metamask/sdk-multichain --filter=@metamask/sdk --filter=@metamask/sdk-react",
     "lint": "yarn workspaces foreach --no-private run lint",
     "lint:changelogs": "yarn workspaces foreach --no-private run lint:changelog",
     "lint:eslint": "yarn workspaces foreach --no-private run lint:eslint",

packages/playground-next/eslint.config.mjs

@@ -1,6 +1,10 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
+import typescript from "@typescript-eslint/eslint-plugin";
+import react from "eslint-plugin-react";
+import prettier from "eslint-plugin-prettier";
+import tsParser from "@typescript-eslint/parser";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,7 +14,47 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends(
+    "next/core-web-vitals",
+    "next/typescript",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ),
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    plugins: {
+      "@typescript-eslint": typescript,
+      react: react,
+      prettier: prettier
+    },
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2021,
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    settings: {
+      react: {
+        version: "detect"
+      }
+    },
+    rules: {
+      "prettier/prettier": ["error", {
+        "endOfLine": "auto"
+      }],
+      "@typescript-eslint/no-unused-vars": ["error", {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }],
+      "react/react-in-jsx-scope": "off",
+      "@next/next/no-img-element": "warn"
+    }
+  }
 ];
 
 export default eslintConfig;

packages/playground-next/next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  reactStrictMode: false,
+  /* other config options here */
 };
 
 export default nextConfig;

packages/playground-next/package.json

@@ -10,7 +10,12 @@
     "allow-scripts": "echo 'NA'"
   },
   "dependencies": {
+    "@metamask/api-specs": "^0.10.13",
+    "@metamask/sdk-multichain": "workspace:^",
     "@metamask/sdk-react": "workspace:^",
+    "@metamask/utils": "^11.0.1",
+    "@open-rpc/meta-schema": "^1.14.9",
+    "@open-rpc/schema-utils-js": "^2.0.5",
     "next": "15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -22,6 +27,9 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.1.4",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.4.2",
     "typescript": "^5"
   }
 }

packages/playground-next/src/components/DynamicInputs.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+
+export enum INPUT_LABEL_TYPE {
+  ADDRESS = 'Address',
+  SCOPE = 'Scope',
+}
+
+const LABEL_PLACEHOLDER = {
+  [INPUT_LABEL_TYPE.ADDRESS]: '0x483b...5f97',
+  [INPUT_LABEL_TYPE.SCOPE]: 'eip155:1',
+};
+
+type DynamicInputsProps = {
+  inputArray: string[];
+  setInputArray: React.Dispatch<React.SetStateAction<string[]>>;
+  label: INPUT_LABEL_TYPE;
+};
+
+const DynamicInputs: React.FC<DynamicInputsProps> = ({
+  inputArray,
+  setInputArray,
+  label,
+}) => {
+  const handleInputChange = useCallback(
+    (index: number, value: string) => {
+      const newInputs = [...inputArray];
+      newInputs[index] = value;
+      setInputArray(newInputs);
+    },
+    [inputArray, setInputArray],
+  );
+
+  const addInput = useCallback(() => {
+    if (inputArray.length < 5) {
+      setInputArray([...inputArray, '']);
+    }
+  }, [setInputArray, inputArray]);
+
+  return (
+    <div>
+      {inputArray.map((input, index) => (
+        <div key={index}>
+          <label>
+            {label}:
+            <input
+              id={`custom-${label}-input-${index}`}
+              type="text"
+              value={input}
+              onChange={(inputEvent) =>
+                handleInputChange(index, inputEvent.target.value)
+              }
+              placeholder={LABEL_PLACEHOLDER[label]}
+            />
+          </label>
+          {index === inputArray.length - 1 && inputArray.length < 5 && (
+            <button
+              id={`add-custom-${label.toLowerCase()}-button-${index}`}
+              onClick={addInput}
+              disabled={!input}
+            >
+              +
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DynamicInputs;

packages/playground-next/src/components/WalletList.css

@@ -0,0 +1,82 @@
+.wallet-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+
+.wallet-card {
+  background-color: #f0f0f0;
+  border-radius: 10px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 350px;
+}
+
+.wallet-card button:disabled {
+  background-color: #4299e1;
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.wallet-card button:disabled:hover {
+  background-color: #4299e1;
+}
+
+.wallet-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  margin-right: 15px;
+}
+
+.wallet-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
+
+.wallet-info button {
+  margin-top: 1rem;
+}
+
+.wallet-name {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.wallet-uuid,
+.wallet-rdns,
+.wallet-extension-id {
+  margin: 5px 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.wallet-card button {
+  align-self: stretch;
+  margin-top: 20px;
+  padding: 10px 15px;
+  background-color: #4299e1;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.wallet-card button:hover:not(:disabled) {
+  background-color: #3182ce;
+}
+
+.wallet-card button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}