chore(docs): update box readme, remove duplicated features, added box install to the docs

.devcontainer/scripts/onCreateCommand.sh

@@ -17,10 +17,10 @@ corepack enable
 
 if [ "$TYPE" != "sandbox_only" ]; then
     source ~/.bashrc
-    yes | npx create-aztec-app -t $TYPE -n $NAME -s
+    yes | npx aztec-app -t $TYPE -n $NAME -s
     mv $NAME/* $NAME/.* .
     rm -rf $NAME
-    
+
     yarn
 
     npx -y playwright install --with-deps

boxes/Earthfile

@@ -50,6 +50,14 @@ boxes:
     RUN yarn install-browsers
     ENTRYPOINT ["/bin/sh", "-c"]
 
+npx:
+    FROM ../build-images/+base-slim-node
+    COPY --dir +build/usr/src /usr
+    WORKDIR /usr/src/boxes
+
+    RUN yarn
+    RUN yarn test:ci
+
 BOX_TEST_LOCAL:
   FUNCTION
   ARG box

boxes/README.md

@@ -1,8 +1,10 @@
 # Aztec-App
 
 Aztec-App is a set of tools to ease development on Aztec. It consists of two main components:
+
 1. `npx` script
 2. boxes (starter kits)
+
 ## npx script
 
 NPX is a tool bundled with `npm` and other package managers. It allows you to run a binary from a cache without installing it globally.
@@ -13,9 +15,9 @@ To ease the development process, Aztec has developed this binary. To run it, ins
 npx aztec-app
 ```
 
-This will prompt you with some options to clone `Aztec Boxes` and install the sandbox. As the `npx` script evolves, other commands will be added or removed. You can run it with the `-h` flag to know what other commands and flags you can pass to it.
+This will prompt you with some options to clone `Aztec Boxes`. As the `npx` script evolves, other commands will be added or removed. You can run it with the `-h` flag to know what other commands and flags you can pass to it.
 
-> [!NOTE]  
+> [!NOTE]
 > As a tool that doesn't (yet) have automated testing, it versioning and release process is decoupled from `aztec`, and its deployment is entirely manual by running `yarn npm publish --access public`.
 
 ## Aztec Boxes
@@ -26,7 +28,7 @@ Aztec Boxes are the one-stop-shop for developing on Aztec. They often include a
 - Frontend boilerplates
 - General tests
 
-Boxes include the sandbox installation script and its start command. By choosing the appropriate box, you can get started working on Aztec in a minimal amount of time.
+By choosing the appropriate box, you can get started working on Aztec in a minimal amount of time.
 
 ## Contributing
 
@@ -37,9 +39,6 @@ Most of the logic is in the `bin.js` file, where `commander` commands stuff. The
 - Prompts the user for options and commands
 - Inits some global variables such as a logger, a getter for the github repositories, the latest stable versions and tags, etc
 - Prompts the user to choose the project and clone it. It then rewrites the `Nargo.toml` and `package.json` files to point to the repos instead of the local dependencies.
-- Queries the local docker daemon for any existing sandbox images, prompting the user to install or update it if needed
-- Asks the user if they want to run the sandbox right away
-
 
 ## Templates
 

boxes/bin.js

@@ -2,18 +2,16 @@
 import { Command } from "commander";
 const program = new Command();
 import { chooseProject } from "./scripts/steps/chooseBox.js";
-import { sandboxInstallOrUpdate } from "./scripts/steps/sandbox/install.js";
 import axios from "axios";
 import pino from "pino";
 import pretty from "pino-pretty";
 import ora from "ora";
 import { AZTEC_REPO } from "./scripts/config.js";
-import { sandboxRunStep } from "./scripts/steps/sandbox/run.js";
 import { init } from "./scripts/init.js";
 
 const getLatestStable = async () => {
   const { data } = await axios.get(
-    `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
+    `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`
   );
   return data[0].tag_name.split("-v")[1];
 };
@@ -45,7 +43,7 @@ program
         },
         level: debug ? "debug" : "info",
       },
-      prettyStream,
+      prettyStream
     );
 
     global.debug = (msg) => logger.debug(msg);
@@ -100,17 +98,13 @@ program
 program
   .command("new", { isDefault: true })
   .description("An Aztec project with a built-in development network")
-  .option(
-    "-s, --skip-sandbox",
-    "skip sandbox installation and run after cloning",
-  )
   .option(
     "-t, --project-type <projectType>",
-    "the type of the project to clone ('app' or 'contract')",
+    "the type of the project to clone ('app' or 'contract')"
   )
   .option(
     "-n, --project-name <projectName>",
-    "the name of the project to clone",
+    "the name of the project to clone"
   )
   .action(async (options) => {
     // this is some bad code, but it's def fun
@@ -121,16 +115,10 @@ program
       throw Error("You must define both the project type and the project name");
     }
 
-    const { projectType, projectName, skipSandbox } = options;
+    const { projectType, projectName } = options;
 
     // // STEP 1: Choose the boilerplate
     await chooseProject({ projectType, projectName });
-
-    if (skipSandbox) return;
-    // // STEP 2: Install the Sandbox
-    await sandboxInstallOrUpdate({ skipQuestion: skipSandbox });
-    // STEP 3: Running the Sandbox
-    await sandboxRunStep({ skipQuestion: skipSandbox });
   });
 
 program.parse();

boxes/bin.test.js

@@ -0,0 +1,91 @@
+import { parse } from "@iarna/toml";
+import axios from "axios";
+import { execSync } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { describe, test, expect, beforeAll } from "vitest";
+
+const getLatestStable = async () => {
+  try {
+    const { data } = await axios.get(
+      `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
+    );
+    return data[0].tag_name.split("-v")[1];
+  } catch (error) {
+    console.error("Error fetching latest stable version:", error);
+    return;
+  }
+};
+
+const version = await getLatestStable();
+const tag = version.match(/^\d+\.\d+\.\d+$/)
+  ? `aztec-packages-v${version}`
+  : version;
+
+describe("Token contract", () => {
+  beforeAll(() => {
+    try {
+      execSync("npx . new -d -t contract -n token_contract", {
+        stdio: "inherit",
+      });
+    } catch (error) {
+      console.error("Error executing command:", error);
+    }
+  });
+
+  test("Paths were updated correctly", async () => {
+    const replaces = [];
+    const findAndReplace = async (dir, prefix) => {
+      const files = await fs.readdir(dir, {
+        withFileTypes: true,
+      });
+      files.forEach(async (file) => {
+        const filePath = path.join(dir, file.name);
+        if (file.isDirectory()) {
+          findAndReplace(filePath, prefix); // Recursively search subdirectories
+        } else if (file.name === "Nargo.toml") {
+          replaces.push(
+            new Promise(async (resolve, reject) => {
+              let content = parse(await fs.readFile(filePath, "utf8"));
+              if (!content.dependencies) return;
+              resolve(
+                Object.keys(content.dependencies)
+                  .filter((dep) => dep.match("@aztec"))
+                  .every(
+                    (dep) =>
+                      content.dependencies[dep] ===
+                      JSON.stringify({
+                        git: `https://github.com/${AZTEC_REPO}/`,
+                        tag,
+                        directory: `${prefix}${directory}`,
+                      }),
+                  ),
+              );
+            }),
+          );
+        } else if (file.name === "package.json") {
+          replaces.push(
+            new Promise(async (resolve, reject) => {
+              let content = JSON.parse(await fs.readFile(filePath, "utf8"));
+              if (!content.dependencies) return;
+              resolve(
+                Object.keys(content.dependencies)
+                  .filter((deps) => deps.match("@aztec"))
+                  // "master" actually means "latest" for the npm release
+                  .every(
+                    (dep) =>
+                      content.dependencies[dep] ===
+                      `${version === "master" ? "latest" : `^${version}`}`,
+                  ),
+              );
+            }),
+          );
+        }
+      });
+    };
+
+    await findAndReplace(path.resolve("./token_contract"), "");
+    const res = await Promise.all(replaces);
+    expect(res).toEqual([true, true]);
+  });
+});

boxes/boxes/react/README.md

@@ -22,13 +22,7 @@ The above method just uses the `npx` command, AKA "unboxing the box". This is a
 Just open a terminal and write:
 
 ```bash
-npx create-aztec-app
-```
-
-It should ask you some questions about your project, install and run the Sandbox (local developer network). You can also start, stop, update, and do other things on the sandbox through this script. Just run:
-
-```bash
-npx create-aztec-app sandbox --help
+npx aztec-app
 ```
 
 ## More information

boxes/boxes/react/package.json

@@ -47,13 +47,14 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.42.0",
+    "@playwright/test": "1.46.1",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
+    "assert": "^2.1.0",
     "autoprefixer": "^10.4.15",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",

boxes/boxes/react/webpack.config.js

@@ -37,6 +37,7 @@ export default (_, argv) => ({
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
     fallback: {
+      assert: require.resolve('assert/'),
       crypto: false,
       os: false,
       fs: false,

boxes/boxes/vanilla/README.md

@@ -2,7 +2,6 @@
 
 This box is a one-stop-shop for Aztec that will deploy a minimal barebones HTML+JS page. You can use it as a boilerplate to start developing your own Aztec app in seconds!
 
-
 ## Getting Started
 
 The easiest way to start is with a Github Codespaces, which has a generous free tier. Just click on this button:
@@ -23,13 +22,7 @@ The above method just uses the `npx` command, AKA "unboxing the box". This is a
 Just open a terminal and write:
 
 ```bash
-npx create-aztec-app
-```
-
-It should ask you some questions about your project, install and run the Sandbox (local developer network). You can also start, stop, update, and do other things on the sandbox through this script. Just run:
-
-```bash
-npx create-aztec-app sandbox --help
+npx aztec-app
 ```
 
 ## More information

boxes/boxes/vanilla/package.json

@@ -22,8 +22,9 @@
     "@aztec/builder": "latest"
   },
   "devDependencies": {
-    "@playwright/test": "1.42.0",
+    "@playwright/test": "1.46.1",
     "@types/node": "^20.11.17",
+    "assert": "^2.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "html-webpack-plugin": "^5.6.0",
     "stream-browserify": "^3.0.0",

boxes/boxes/vanilla/webpack.config.js

@@ -33,6 +33,7 @@ export default (_, argv) => ({
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
     fallback: {
+      assert: require.resolve('assert/'),
       crypto: false,
       os: false,
       fs: false,

boxes/package.json

@@ -1,13 +1,15 @@
 {
   "name": "aztec-app",
   "packageManager": "yarn@4.0.2",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",
     "build": "yarn workspaces foreach -A -v run build",
     "install-browsers": "playwright install --with-deps",
-    "publish": "yarn npm publish"
+    "publish": "yarn npm publish",
+    "test": "vitest bin.test.js",
+    "test:ci": "vitest run bin.test.js"
   },
   "workspaces": [
     "boxes/*"
@@ -35,9 +37,10 @@
     "ora": "^8.0.1",
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",
-    "tiged": "^2.12.6"
+    "tiged": "^2.12.6",
+    "vitest": "^2.0.5"
   },
   "devDependencies": {
-    "@playwright/test": "1.42.0"
+    "@playwright/test": "1.46.1"
   }
 }