chore(boxes): refactor npx to improve readability, added upgrade opti…

…on and manual versioning (#4855)

.circleci/config.yml

@@ -561,7 +561,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:
@@ -573,7 +573,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/bin.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+const program = new Command();
+import { chooseAndCloneBox } from "./scripts/steps/chooseBox.js";
+import { sandboxRun } from "./scripts/steps/sandbox/run.js";
+import { sandboxInstallOrUpdate } from "./scripts/steps/sandbox/install.js";
+import { axios } from "./scripts/utils.js";
+
+const getLatestStable = async () => {
+  const { data } = await axios.get(
+    `https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
+  );
+  return data[0].tag_name.split("-v")[1];
+};
+
+// versioning is confusing here because "latest" and "master" point to the same thing at times
+// so let's clarify a bit:
+//
+// if the user has set a version (ex. "master" or "0.23.0"), use that
+// otherwise use the stable release (ex. 0.24.0)
+const latestStable = await getLatestStable();
+const versionToInstall = process.env.VERSION || latestStable;
+
+// if the user has set a semver version (matches the regex), fetch that tag (i.e. aztec-packages-v0.23.0)
+// otherwise use the version as the tag
+const tagToUse = versionToInstall.match(/^\d+\.\d+\.\d+$/)
+  ? `aztec-packages-v${versionToInstall}`
+  : versionToInstall;
+
+program.action(async () => {
+  // STEP 1: Choose the boilerplate
+  await chooseAndCloneBox(tagToUse, versionToInstall);
+
+  // STEP 2: Install the Sandbox
+  await sandboxInstallOrUpdate(latestStable, versionToInstall);
+
+  // STEP 3: Running the Sandbox
+  await sandboxRun(versionToInstall);
+});
+
+program.parse();

boxes/react/.gitignore → boxes/boxes/react/.gitignore

@@ -4,9 +4,10 @@
 node_modules
 dist
 artifacts
-src/contracts/target
-src/contracts/log
+boxes/src/contracts/target
+boxes/src/contracts/log
 /test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+codegenCache.json

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",
@@ -14,7 +15,7 @@
     "serve": "webpack serve --no-open --mode development",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
-    "test": "yarn test:node && yarn test:browser",
+    "test": "yarn prep && yarn test:node && yarn test:browser",
     "test:node": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
     "test:browser": "npx playwright test"
   },

boxes/vanilla-js/playwright.config.ts → boxes/boxes/react/playwright.config.ts

@@ -2,6 +2,7 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests',
+  testMatch: '**.spec.ts',
   fullyParallel: true,
   retries: 3,
   workers: process.env.CI ? 1 : 3,
@@ -13,7 +14,7 @@ export default defineConfig({
     video: 'on-first-retry',
   },
   expect: {
-    timeout: 30000,
+    timeout: 90000,
   },
   projects: [
     {
@@ -25,10 +26,10 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
   ],
   webServer: {
     command: 'yarn serve',

boxes/boxes/react/src/contracts/Nargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "boxreact"
+authors = [""]
+compiler_version = ">=0.18.0"
+type = "contract"
+
+[dependencies]
+aztec = { path = "../../../../../noir-projects/aztec-nr/aztec" }
+value_note = { path = "../../../../../noir-projects/aztec-nr/value-note" }

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",
@@ -11,7 +12,7 @@
     "dev": "yarn prep && webpack serve --mode development",
     "build": "yarn prep && webpack",
     "serve": "webpack serve --no-open --mode development",
-    "test": "npx playwright test",
+    "test": "yarn prep && npx playwright test",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src"
   },

boxes/boxes/vanilla/src/contracts/Nargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "vanilla"
+authors = [""]
+compiler_version = ">=0.18.0"
+type = "contract"
+
+[dependencies]
+aztec = { path = "../../../../../noir-projects/aztec-nr/aztec" }
+value_note = { path = "../../../../../noir-projects/aztec-nr/value-note" }

boxes/docker-compose.yml

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