feat: moving the unbox option to npx command (#4718)

This PR moves the `unbox` feature to the `npx` command.

This allows users to run `npx create-aztec` and choose a box to
bootstrap. It will then:
- Get the latest sandbox release
- Update `Nargo.toml` paths to match that version tag
- Update `package.json` to use that version

.circleci/config.yml

@@ -488,7 +488,7 @@ jobs:
           name: "Build"
           command: cond_spot_run_build boxes 4
 
-  boxes-blank:
+  boxes-vanilla:
     docker:
       - image: aztecprotocol/alpine-build-image
     resource_class: small
@@ -497,9 +497,9 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-blank
+          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-vanilla
 
-  boxes-blank-react:
+  boxes-react:
     docker:
       - image: aztecprotocol/alpine-build-image
     resource_class: small
@@ -508,7 +508,7 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-blank-react
+          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-react
 
   end-to-end:
     machine:
@@ -1309,11 +1309,11 @@ workflows:
           requires:
             - aztec-package
           <<: *defaults
-      - boxes-blank:
+      - boxes-vanilla:
           requires:
             - boxes
           <<: *defaults
-      - boxes-blank-react:
+      - boxes-react:
           requires:
             - boxes
           <<: *defaults
@@ -1406,8 +1406,8 @@ workflows:
             - e2e-avm-simulator
             - e2e-fees
             - pxe
-            - boxes-blank
-            - boxes-blank-react
+            - boxes-vanilla
+            - boxes-react
             - cli-docs-sandbox
             - e2e-docs-examples
             - guides-writing-an-account-contract

boxes/README.md

@@ -1,5 +1,28 @@
-# Aztec Starter Kits
+# Aztec Boxes
 
-A collection of projects that act as starter kits for Aztec.
-These depend on accounts, aztec.js and aztec.nr, and point to the monorepos local development versions.
-These projects depend on the sandbox. They're built and tested after the sandbox by docker compose files.
+Aztec Boxes are the one-stop-shop for developing on Aztec. They often include a combination of:
+
+- Fully tested contracts
+- 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.
+
+## Getting started
+
+If you have [node](https://nodejs.org/en/download) installed, you can open a terminal in any folder and run:
+
+`npx create-aztec-app`
+
+The script will install the sandbox, run it, and clone the boilerplate you chose. If at any time you encounter problems, refer to the guides at [docs.aztec.network](https://docs.aztec.network) for more information.
+
+## Templates
+
+Currently there are two boxes:
+
+- React - A React boilerplate with a minimal UI.
+- Vanilla JS and HTML - Some say if you get something working in vanilla JS and HTML, you can make it work on any framework. If you can't find the box you need, this could be a good starting point.
+
+## Support
+
+Need any support? Reach out on [discord](https://discord.gg/DgWG2DBMyB), [discourse](https://discourse.aztec.network/) or [twitter](https://twitter.com/aztecnetwork).

boxes/docker-compose.yml

@@ -25,4 +25,4 @@ services:
       ETHEREUM_HOST: http://ethereum:8545
       CHAIN_ID: 31337
       PXE_URL: http://aztec:8080
-      BOX: ${BOX:-box-blank}
+      BOX: ${BOX:-box-vanilla}

boxes/npx.js

@@ -10,11 +10,26 @@ import pty from "node-pty";
 import path from "path";
 import os from "os";
 import fs from "fs";
+import { parse, stringify } from "@iarna/toml";
 import chalk from "chalk";
+import axios from "axios";
 
 const { log, warn, info } = console;
 const targetDir = path.join(os.homedir(), ".aztec/bin"); // Use os.homedir() to get $HOME
 
+const { GITHUB_TOKEN } = process.env;
+
+const axiosOpts = {};
+if (GITHUB_TOKEN) {
+  axiosOpts.headers = { Authorization: `token ${GITHUB_TOKEN}` };
+}
+
+const { data } = await axios.get(
+  `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
+  axiosOpts,
+);
+const version = data[0].tag_name.split("-v")[1];
+
 function updatePathEnvVar() {
   // Detect the user's shell profile file based on common shells and environment variables
   const homeDir = os.homedir();
@@ -43,12 +58,70 @@ function updatePathEnvVar() {
   info(`Added ${targetDir} to PATH in ${shellProfile}.`);
 }
 
+export function prettyPrintNargoToml(config) {
+  const withoutDependencies = Object.fromEntries(
+    Object.entries(config).filter(([key]) => key !== "dependencies"),
+  );
+
+  const partialToml = stringify(withoutDependencies);
+  const dependenciesToml = Object.entries(config.dependencies).map(
+    ([name, dep]) => {
+      const depToml = stringify.value(dep);
+      return `${name} = ${depToml}`;
+    },
+  );
+
+  return (
+    partialToml + "\n[dependencies]\n" + dependenciesToml.join("\n") + "\n"
+  );
+}
+
+async function replacePaths(rootDir) {
+  const files = fs.readdirSync(path.resolve(".", rootDir), {
+    withFileTypes: true,
+  });
+
+  files.forEach((file) => {
+    const filePath = path.join(rootDir, file.name);
+    if (file.isDirectory()) {
+      replacePaths(filePath); // Recursively search subdirectories
+    } else if (file.name === "Nargo.toml") {
+      let content = parse(fs.readFileSync(filePath, "utf8"));
+
+      try {
+        Object.keys(content.dependencies).forEach((dep) => {
+          const directory = content.dependencies[dep].path.replace(/^(..\/)+/);
+          content.dependencies[dep] = {
+            git: "https://github.com/AztecProtocol/aztec-packages/",
+            tag: `aztec-packages-v${version}`,
+            directory,
+          };
+        });
+      } catch (e) {
+        console.log("No Noir dependencies to update");
+      }
+
+      fs.writeFileSync(filePath, prettyPrintNargoToml(content), "utf8");
+    } else if (file.name === "package.json") {
+      try {
+        let content = JSON.parse(fs.readFileSync(filePath, "utf8"));
+        Object.keys(content.dependencies)
+          .filter((deps) => deps.match("@aztec"))
+          .map((dep) => (content.dependencies[dep] = `^${version}`));
+        fs.writeFileSync(filePath, JSON.stringify(content), "utf8");
+      } catch (e) {
+        console.log("No package.json to update");
+      }
+    }
+  });
+}
+
 program.action(async () => {
   const appType = await select({
-    message: "Please choose your boilerplate:",
+    message: "Please choose your Aztec boilerplate:",
     choices: [
-      { value: "blank", name: "Barebones HTML/TS project" },
-      { value: "blank-react", name: "Barebones React project" },
+      { value: "vanilla", name: "HTML/TS project" },
+      { value: "react", name: "React project" },
     ],
   });
 
@@ -61,14 +134,20 @@ program.action(async () => {
       default: "my-aztec-app",
     });
 
-    const emitter = tiged(`AztecProtocol/aztec-packages/boxes/${appType}`);
-
     chalk.blue("Cloning the boilerplate code...");
+    const emitter = tiged(
+      `AztecProtocol/aztec-packages/boxes/${appType}#aztec-packages-v${version}`,
+      {
+        disableCache: true,
+      },
+    );
+
     emitter.on("info", (info) => {
       log(info.message);
     });
 
     await emitter.clone(`./${appName}`).then(() => {
+      replacePaths(`./${appName}`);
       log(chalk.bgGreen("Your code is ready!"));
     });
   } catch (error) {

boxes/package.json

@@ -1,15 +1,15 @@
 {
   "name": "create-aztec-app",
   "packageManager": "yarn@4.1.0",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",
     "build": "yarn workspaces foreach -A -v run build"
   },
   "workspaces": [
-    "blank-react",
-    "blank"
+    "react",
+    "vanilla-js"
   ],
   "bin": "npx.js",
   "resolutions": {
@@ -23,10 +23,12 @@
     "@aztec/protocol-contracts": "portal:../yarn-project/protocol-contracts",
     "@aztec/types": "portal:../yarn-project/types"
   },
-  "devDependencies": {
+  "dependencies": {
+    "@iarna/toml": "^2.2.5",
     "@inquirer/confirm": "^3.0.0",
     "@inquirer/input": "^2.0.0",
     "@inquirer/select": "^2.0.0",
+    "axios": "^1.6.7",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
     "node-pty": "^1.0.0",