feat: Add snaps-sandbox package and integrate into CLI (#3306)

This adds a new package, `@metamask/snaps-sandbox`, which is a tool to
interact with Snaps through a web app. It's a replacement for the Snaps
Simulator, but doesn't simulate any functionality. Instead, it calls
MetaMask through the usual JSON-RPC methods.

The sandbox can be used from the Snaps CLI by running `mm-snap sandbox`.

Author: Mrtenz

.yarn/patches/monaco-editor-npm-0.52.2-584d16bfa6.patch

@@ -0,0 +1,10 @@
+diff --git a/esm/vs/base/common/marked/marked.js b/esm/vs/base/common/marked/marked.js
+index 56333ffeb738907f144d15c6ebe44494d1b13330..d743087aa2640d6e3c629907a16cf67f3bb1a498 100644
+--- a/esm/vs/base/common/marked/marked.js
++++ b/esm/vs/base/common/marked/marked.js
+@@ -2534,5 +2534,3 @@ export var setOptions = (__marked_exports.setOptions || exports.setOptions);
+ export var use = (__marked_exports.use || exports.use);
+ export var walkTokens = (__marked_exports.walkTokens || exports.walkTokens);
+ // ESM-uncomment-end
+-
+-//# sourceMappingURL=marked.umd.js.map

README.md

@@ -17,6 +17,7 @@ This repository contains the following packages [^fn1]:
 - [`@metamask/snaps-jest`](packages/snaps-jest)
 - [`@metamask/snaps-rollup-plugin`](packages/snaps-rollup-plugin)
 - [`@metamask/snaps-rpc-methods`](packages/snaps-rpc-methods)
+- [`@metamask/snaps-sandbox`](packages/snaps-sandbox)
 - [`@metamask/snaps-sdk`](packages/snaps-sdk)
 - [`@metamask/snaps-simulation`](packages/snaps-simulation)
 - [`@metamask/snaps-utils`](packages/snaps-utils)
@@ -40,12 +41,14 @@ linkStyle default opacity:0.5
   snaps_jest(["@metamask/snaps-jest"]);
   snaps_rollup_plugin(["@metamask/snaps-rollup-plugin"]);
   snaps_rpc_methods(["@metamask/snaps-rpc-methods"]);
+  snaps_sandbox(["@metamask/snaps-sandbox"]);
   snaps_sdk(["@metamask/snaps-sdk"]);
   snaps_simulation(["@metamask/snaps-simulation"]);
   snaps_utils(["@metamask/snaps-utils"]);
   snaps_webpack_plugin(["@metamask/snaps-webpack-plugin"]);
   create_snap --> snaps_utils;
   snaps_browserify_plugin --> snaps_utils;
+  snaps_cli --> snaps_sandbox;
   snaps_cli --> snaps_sdk;
   snaps_cli --> snaps_utils;
   snaps_cli --> snaps_webpack_plugin;

eslint.config.mjs

@@ -325,6 +325,7 @@ const config = createConfig([
       'packages/snaps-controllers/src/services/iframe/**/*',
       'packages/snaps-controllers/src/services/webworker/**/*',
       'packages/snaps-execution-environments/src/**/*',
+      'packages/snaps-sandbox/src/**/*',
       'packages/test-snaps/src/**/*',
       '**/*.test.browser.ts',
     ],

package.json

@@ -15,9 +15,11 @@
   "scripts": {
     "build": "ts-bridge --project tsconfig.build.json --verbose",
     "build:ci": "ts-bridge --project tsconfig.build.json --verbose",
+    "build:ci:post": "yarn build:sandbox",
     "build:examples": "yarn workspace @metamask/example-snaps build",
     "build:execution-environments": "yarn workspace @metamask/snaps-execution-environments build:lavamoat",
-    "build:post": "yarn build:examples && yarn build:execution-environments",
+    "build:post": "yarn build:examples && yarn build:execution-environments && yarn build:sandbox",
+    "build:sandbox": "yarn workspace @metamask/snaps-sandbox build",
     "changelog:update": "yarn workspaces foreach --all --parallel --interlaced --verbose run changelog:update",
     "changelog:validate": "yarn workspaces foreach --all --parallel --interlaced --verbose run changelog:validate",
     "child-workspace-package-names-as-json": "ts-node scripts/child-workspace-package-names-as-json.ts",

packages/snaps-cli/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `sandbox` command to run sandbox tool ([#3306](https://github.com/MetaMask/snaps/pull/3306))
+  - This command allows you to run the Snaps sandbox tool, which is useful for
+    quickly testing and debugging Snaps.
+
 ## [7.0.0]
 
 ### Changed

packages/snaps-cli/README.md

@@ -21,6 +21,7 @@ Commands:
   mm-snap build     Build snap from source                          [aliases: b]
   mm-snap eval      Attempt to evaluate snap bundle in SES          [aliases: e]
   mm-snap manifest  Validate the snap.manifest.json file            [aliases: m]
+  mm-snap sandbox   Start a sandbox server to interact with the Snap
   mm-snap serve     Locally serve Snap file(s) for testing          [aliases: s]
   mm-snap watch     Build Snap on change                            [aliases: w]
 

packages/snaps-cli/package.json

@@ -64,6 +64,7 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@metamask/snaps-sandbox": "workspace:^",
     "@metamask/snaps-sdk": "workspace:^",
     "@metamask/snaps-utils": "workspace:^",
     "@metamask/snaps-webpack-plugin": "workspace:^",
@@ -79,6 +80,7 @@
     "crypto-browserify": "^3.12.0",
     "domain-browser": "^4.22.0",
     "events": "^3.3.0",
+    "express": "^5.1.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "https-browserify": "^1.0.0",
     "ora": "^5.4.1",
@@ -89,7 +91,6 @@
     "querystring-es3": "^0.2.1",
     "readable-stream": "^3.6.2",
     "semver": "^7.5.4",
-    "serve-handler": "^6.1.5",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "string_decoder": "^1.3.0",
@@ -111,9 +112,9 @@
     "@metamask/auto-changelog": "^5.0.1",
     "@swc/jest": "^0.2.26",
     "@ts-bridge/cli": "^0.6.1",
+    "@types/express": "^5.0.1",
     "@types/jest": "^27.5.1",
     "@types/node": "18.14.2",
-    "@types/serve-handler": "^6.1.0",
     "@types/yargs": "^17.0.24",
     "cross-fetch": "^3.1.5",
     "deepmerge": "^4.2.2",

packages/snaps-cli/src/builders.ts

@@ -6,6 +6,12 @@ const builders = {
     type: 'boolean',
   },
 
+  build: {
+    describe: 'Build the Snap bundle',
+    type: 'boolean',
+    default: true,
+  },
+
   config: {
     alias: 'c',
     describe: 'Path to config file',

packages/snaps-cli/src/commands/build/build.ts

@@ -10,15 +10,17 @@ import type { Steps } from '../../utils';
 import { success, executeSteps, info } from '../../utils';
 import { evaluate } from '../eval';
 
-type BuildContext = {
+export type BuildContext = {
   analyze: boolean;
+  build: boolean;
   config: ProcessedConfig;
   port?: number;
 };
 
-const steps: Steps<BuildContext> = [
+export const steps: Steps<BuildContext> = [
   {
     name: 'Checking the input file.',
+    condition: ({ build }) => build,
     task: async ({ config }) => {
       const { input } = config;
 
@@ -31,7 +33,8 @@ const steps: Steps<BuildContext> = [
   },
   {
     name: 'Building the snap bundle.',
-    task: async ({ analyze, config, spinner }) => {
+    condition: ({ build }) => build,
+    task: async ({ analyze, build: enableBuild, config, spinner }) => {
       // We don't evaluate the bundle here, because it's done in a separate
       // step.
       const compiler = await build(config, {
@@ -43,6 +46,7 @@ const steps: Steps<BuildContext> = [
       if (analyze) {
         return {
           analyze,
+          build: enableBuild,
           config,
           spinner,
           port: await getBundleAnalyzerPort(compiler),
@@ -54,7 +58,7 @@ const steps: Steps<BuildContext> = [
   },
   {
     name: 'Evaluating the snap bundle.',
-    condition: ({ config }) => config.evaluate,
+    condition: ({ build, config }) => build && config.evaluate,
     task: async ({ config, spinner }) => {
       const path = pathResolve(
         process.cwd(),
@@ -94,6 +98,7 @@ export async function buildHandler(
   analyze = false,
 ): Promise<void> {
   return await executeSteps(steps, {
+    build: true,
     config,
     analyze,
   });

packages/snaps-cli/src/commands/build/index.ts

@@ -16,4 +16,5 @@ const command = {
 };
 
 export * from './implementation';
+export { steps } from './build';
 export default command;