script now dynamically fetches boxes from the specificed tag

.circleci/config.yml

@@ -552,7 +552,7 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-vanilla
+          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=vanilla
           aztec_manifest_key: boxes
 
   boxes-react:
@@ -564,7 +564,7 @@ jobs:
       - *setup_env
       - run:
           name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=box-react
+          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=react
           aztec_manifest_key: boxes
 
   end-to-end:

boxes/react/package.json → boxes/boxes/react/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "@aztec/box-react",
+  "name": "@aztec/react",
+  "description": "React App",
   "private": true,
   "version": "0.1.0",
   "type": "module",

boxes/vanilla-js/package.json → boxes/boxes/vanilla/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "@aztec/box-vanilla",
+  "name": "@aztec/vanilla",
+  "description": "Vanilla HTML/JS App",
   "private": true,
   "version": "0.1.0",
   "type": "module",

boxes/docker-compose.yml

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

boxes/package.json

@@ -9,8 +9,7 @@
     "publish": "yarn npm publish"
   },
   "workspaces": [
-    "react",
-    "vanilla-js"
+    "boxes/*"
   ],
   "bin": "VERSION=${VERSION:+} bin.js",
   "resolutions": {

boxes/scripts/steps/chooseBox.js

@@ -1,18 +1,18 @@
 import select from "@inquirer/select";
 import input from "@inquirer/input";
 import tiged from "tiged";
-import { replacePaths } from "../utils.js";
+import { getAvailableBoxes, replacePaths } from "../utils.js";
 import chalk from "chalk";
+import axios from "axios";
 const { log } = console;
 
 export async function chooseAndCloneBox(tag, version) {
+  const availableBoxes = await getAvailableBoxes(tag, version);
   const appType = await select({
-    message: "Please choose your Aztec boilerplate:",
-    choices: [
-      { value: "vanilla-js", name: "HTML/TS project" },
-      { value: "react", name: "React project" },
-      { value: "skip", name: "Skip this step" },
-    ],
+    message: `Please choose your Aztec boilerplate:`,
+    choices: availableBoxes.map((box) => {
+      return { value: box.name, name: box.description };
+    }),
   });
 
   if (appType === "skip") return;

boxes/scripts/steps/sandbox/install.js

@@ -91,11 +91,17 @@ export async function sandboxInstallOrUpdate(stable, version) {
     sandboxVersion !== version &&
     !["latest", "master"].includes(version)
   ) {
-    log(
-      chalk.bgYellow(
-        `The sandbox is version ${sandboxVersion} but the boilerplate is version ${version}. Things may not work as expected. You should manually update versions in package.json and Nargo.toml`,
-      ),
-    );
+    const answer = await confirm({
+      message: `The sandbox is version ${sandboxVersion} but your chosen version is ${version}. Do you want to install version ${version}?`,
+      default: true,
+    });
+
+    if (answer) {
+      execSync(
+        `${["latest", "master"].includes(version) ? "VERSION=master" : ""} $HOME/.aztec/bin/aztec-up`,
+        { stdio: "inherit" },
+      );
+    }
   } else if (sandboxVersion !== stable) {
     const answer = await confirm({
       message: `The Sandbox is not up to date. Do you want to update it to ${stable}?`,

boxes/scripts/utils.js

@@ -2,12 +2,54 @@ import path from "path";
 import os from "os";
 import fs from "fs";
 import { parse, stringify } from "@iarna/toml";
+import axios from "axios";
 
 const { log, warn, info } = console;
 const targetDir = path.join(os.homedir(), ".aztec/bin"); // Use os.homedir() to get $HOME
 
+export async function getAvailableBoxes(tag, version) {
+  const { GITHUB_TOKEN } = process.env;
+  const axiosOpts = {};
+  if (GITHUB_TOKEN) {
+    axiosOpts.headers = { Authorization: `token ${GITHUB_TOKEN}` };
+  }
+
+  // TODO: Remove this try catch. Boxes are currently in "boxes" but from this PR on, they will be in "boxes/boxes"
+  let data;
+  try {
+    ({ data } = await axios.get(
+      `https://api.github.com/repos/AztecProtocol/aztec-packages/contents/boxes/boxes?ref=${tag}`,
+      axiosOpts,
+    ));
+  } catch (e) {
+    if (e.response.statusText === "Not Found") {
+      ({ data } = await axios.get(
+        `https://api.github.com/repos/AztecProtocol/aztec-packages/contents/boxes?ref=${tag}`,
+        axiosOpts,
+      ));
+    }
+  }
+
+  let availableBoxes = data
+    .filter(
+      (content) => content.type === "dir" && !content.name.startsWith("."),
+    )
+    .map(async ({ path, name }) => {
+      ({ data } = await axios.get(
+        `https://raw.githubusercontent.com/AztecProtocol/aztec-packages/${["latest", "master"].includes(tag) ? "master" : tag}/${path}/package.json`,
+        axiosOpts,
+      ));
+
+      return {
+        name,
+        description: data.description || name,
+      };
+    });
+
+  return await Promise.all(availableBoxes);
+}
+
 export function prettyPrintNargoToml(config) {
-  console.log(config);
   const withoutDependencies = Object.fromEntries(
     Object.entries(config).filter(([key]) => key !== "dependencies"),
   );
@@ -59,7 +101,6 @@ export async function replacePaths(rootDir, tag, version) {
   });
 
   files.forEach((file) => {
-    console.log(file);
     const filePath = path.join(rootDir, file.name);
     if (file.isDirectory()) {
       replacePaths(filePath, tag, version); // Recursively search subdirectories