feat: add boxes to CI

.circleci/config.yml

@@ -465,6 +465,39 @@ jobs:
           name: "Create ECR manifest"
           command: create_ecr_manifest aztec-sandbox-base aztec-sandbox x86_64,arm64
 
+  boxes-blank-react:
+    machine:
+      image: ubuntu-2204:2023.07.2
+    resource_class: large
+    steps:
+      - *checkout
+      - *setup_env
+      - run:
+          name: "Test via adhoc script"
+          command: ./yarn-project/boxes/blank-react/run_tests
+
+  boxes-blank:
+    machine:
+      image: ubuntu-2204:2023.07.2
+    resource_class: large
+    steps:
+      - *checkout
+      - *setup_env
+      - run:
+          name: "Test via adhoc script"
+          command: ./yarn-project/boxes/blank/run_tests
+
+  boxes-private-token:
+    machine:
+      image: ubuntu-2204:2023.07.2
+    resource_class: large
+    steps:
+      - *checkout
+      - *setup_env
+      - run:
+          name: "Test via adhoc script"
+          command: ./yarn-project/boxes/private-token/run_tests
+
   canary:
     machine:
       image: ubuntu-2204:2023.07.2
@@ -1131,6 +1164,21 @@ workflows:
             - aztec-sandbox-arm64
           <<: *defaults
 
+      - boxes-blank-react:
+          requires:
+            - aztec-sandbox-x86_64
+          <<: *defaults
+
+      - boxes-blank:
+          requires:
+            - aztec-sandbox-x86_64
+          <<: *defaults
+
+      - boxes-private-token:
+          requires:
+            - aztec-sandbox-x86_64
+          <<: *defaults
+
       - e2e-join:
           requires:
             - end-to-end

build_manifest.yml

@@ -130,6 +130,24 @@ aztec-sandbox:
   dependencies:
     - aztec-sandbox-base
 
+boxes-blank-react:
+  buildDir: yarn-project
+  projectDir: yarn-project/boxes/blank-react
+  dependencies:
+    - aztec-sandbox
+
+boxes-blank:
+  buildDir: yarn-project
+  projectDir: yarn-project/boxes/blank
+  dependencies:
+    - aztec-sandbox
+
+boxes-private-token:
+  buildDir: yarn-project
+  projectDir: yarn-project/boxes/private-token
+  dependencies:
+    - aztec-sandbox
+
 canary-build:
   buildDir: yarn-project
   projectDir: yarn-project/canary

yarn-project/boxes/blank-react/README.md

@@ -12,7 +12,7 @@ yarn install:sandbox
 
 This sandbox requires [Docker](https://www.docker.com/) to be installed _and running_ locally. In the event the image needs updating, you can run `yarn install:sandbox` (see [sandbox docs](https://aztec-docs-dev.netlify.app/dev_docs/getting_started/sandbox) for more information.)
 
-In addition to the usual javascript dependencies, this project requires `nargo` (package manager) and `noir` (Aztec ZK smart contract language) in addition to `@aztec/aztec-cli`. The former are installed within `yarn install:noir`
+In addition to the usual javascript dependencies, this project requires `nargo` (package manager) and `noir` (Aztec ZK smart contract language) in addition to `@aztec/aztec-cli`. The former two are installed by `yarn install:noir`.
 
 ## Getting started
 
@@ -44,7 +44,8 @@ This folder should have the following directory structure:
               |— blank.ts
        |— tests
               | A simple end2end test deploying and testing the Blank contract deploys on a local sandbox
-              | The test requires the sandbox and anvil to be running (yarn start:sandbox).
+              | The test requires the sandbox and anvil to be running (`yarn start:sandbox`).
+              | You can run the tests with `yarn test:integration`
               |- blank.contract.test.ts
 ```
 

yarn-project/boxes/blank-react/docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3'
+services:
+  ethereum:
+    image: ghcr.io/foundry-rs/foundry:v1.0.0
+    command: '"anvil --silent -p 8545 --host 0.0.0.0 --chain-id 31337"'
+    ports:
+      - '${SANDBOX_ANVIL_PORT:-8545}:8545'
+
+  aztec:
+    image: 'aztecprotocol/aztec-sandbox:${SANDBOX_VERSION:-latest}'
+    ports:
+      - '${SANDBOX_RPC_PORT:-8080}:8080'
+    environment:
+      DEBUG: # Loaded from the user shell if explicitly set
+      HOST_WORKDIR: '${PWD}' # Loaded from the user shell to show log files absolute path in host
+      ETHEREUM_HOST: http://ethereum:8545
+      CHAIN_ID: 31337
+      ARCHIVER_POLLING_INTERVAL_MS: 50
+      P2P_BLOCK_CHECK_INTERVAL_MS: 50
+      SEQ_TX_POLLING_INTERVAL_MS: 50
+      WS_BLOCK_CHECK_INTERVAL_MS: 50
+      RPC_SERVER_BLOCK_POLLING_INTERVAL_MS: 50
+      ARCHIVER_VIEM_POLLING_INTERVAL_MS: 500
+    volumes:
+      - ./log:/usr/src/yarn-project/aztec-sandbox/log:rw
+
+  boxes-blank-react:
+    image: aztecprotocol/yarn-project:latest
+    entrypoint: sh
+    command: -c "cd boxes/blank-react && yarn test:integration"
+    environment:
+      ETHEREUM_HOST: http://ethereum:8545
+      CHAIN_ID: 31337
+      SANDBOX_URL: http://aztec:8080

yarn-project/boxes/blank-react/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "main": "./dest/index.js",
   "scripts": {
-    "build": "yarn clean && webpack",
+    "build": "yarn clean && tsc -b && webpack",
     "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
     "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
     "clean": "rm -rf ./dest .tsbuildinfo",
@@ -15,8 +15,7 @@
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
     "compile": "aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts",
-    "test": "true #FIX THIS #NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
-    "test:integration": "concurrently -k -s first -c reset,dim -n test,anvil \"yarn test\" \"anvil\""
+    "test:integration": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand"
   },
   "jest": {
     "preset": "ts-jest/presets/default-esm",

yarn-project/boxes/blank-react/run_tests

@@ -0,0 +1,21 @@
+#!/bin/bash
+# This script is used to run an e2e test in CI (see .circleci/config.yml).
+# It pulls images and runs docker-compose, which has the test as the entrypoint.
+[ -n "${BUILD_SYSTEM_DEBUG:-}" ] && set -x # conditionally trace
+set -eu
+
+# Run in script path.
+cd `dirname $0`
+
+export COMPOSE_FILE=${1:-docker-compose.yml}
+
+ecr_login
+
+for REPO in aztec-sandbox yarn-project; do
+echo "pulling docker image for $REPO $(calculate_image_uri $REPO)"
+  retry docker pull $(calculate_image_uri $REPO)
+  retry docker tag $(calculate_image_uri $REPO) aztecprotocol/$REPO:latest
+done
+
+docker-compose rm -f
+docker-compose -f $COMPOSE_FILE up --exit-code-from boxes-blank-react

yarn-project/boxes/blank/README.md

@@ -12,7 +12,7 @@ yarn install:sandbox
 
 This sandbox requires [Docker](https://www.docker.com/) to be installed _and running_ locally. In the event the image needs updating, you can run `yarn install:sandbox` (see [sandbox docs](https://aztec-docs-dev.netlify.app/dev_docs/getting_started/sandbox) for more information.)
 
-In addition to the usual javascript dependencies, this project requires `nargo` (package manager) and `noir` (a Domain Specific Language for SNARK proving systems) in addition to `@aztec/aztec-cli`.  The former are installed within `yarn install:noir` 
+In addition to the usual javascript dependencies, this project requires `nargo` (package manager) and `noir` (a Domain Specific Language for SNARK proving systems) in addition to `@aztec/aztec-cli`. The former are installed within `yarn install:noir`.
 
 ## Getting started
 

yarn-project/boxes/blank/docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3'
+services:
+  ethereum:
+    image: ghcr.io/foundry-rs/foundry:v1.0.0
+    command: '"anvil --silent -p 8545 --host 0.0.0.0 --chain-id 31337"'
+    ports:
+      - '${SANDBOX_ANVIL_PORT:-8545}:8545'
+
+  aztec:
+    image: 'aztecprotocol/aztec-sandbox:${SANDBOX_VERSION:-latest}'
+    ports:
+      - '${SANDBOX_RPC_PORT:-8080}:8080'
+    environment:
+      DEBUG: # Loaded from the user shell if explicitly set
+      HOST_WORKDIR: '${PWD}' # Loaded from the user shell to show log files absolute path in host
+      ETHEREUM_HOST: http://ethereum:8545
+      CHAIN_ID: 31337
+      ARCHIVER_POLLING_INTERVAL_MS: 50
+      P2P_BLOCK_CHECK_INTERVAL_MS: 50
+      SEQ_TX_POLLING_INTERVAL_MS: 50
+      WS_BLOCK_CHECK_INTERVAL_MS: 50
+      RPC_SERVER_BLOCK_POLLING_INTERVAL_MS: 50
+      ARCHIVER_VIEM_POLLING_INTERVAL_MS: 500
+    volumes:
+      - ./log:/usr/src/yarn-project/aztec-sandbox/log:rw
+
+  boxes-blank:
+    image: aztecprotocol/yarn-project:latest
+    entrypoint: sh
+    command: -c "cd boxes/blank && yarn test:integration"
+    environment:
+      ETHEREUM_HOST: http://ethereum:8545
+      CHAIN_ID: 31337
+      SANDBOX_URL: http://aztec:8080

yarn-project/boxes/blank/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "main": "./dest/index.js",
   "scripts": {
-    "build": "yarn clean && webpack",
+    "build": "yarn clean && tsc -b && webpack",
     "install:noir": "curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash noirup -v aztec",
     "install:sandbox": "docker pull aztecprotocol/aztec-sandbox:latest",
     "clean": "rm -rf ./dest .tsbuildinfo",
@@ -15,18 +15,17 @@
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
     "compile": "aztec-cli compile src/contracts --outdir ../artifacts --typescript ../artifacts",
-    "test": "true #NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand",
-    "test:integration": "concurrently -k -s first -c reset,dim -n test,anvil \"yarn test\" \"anvil\""
+    "test:integration": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --runInBand"
   },
   "jest": {
     "preset": "ts-jest/presets/default-esm",
-    "globals": {
-      "ts-jest": {
-        "useESM": true
-      }
-    },
     "transform": {
-      "^.+\\.(ts|tsx)$": "ts-jest"
+      "^.+\\.(ts|tsx)$": [
+        "ts-jest",
+        {
+          "useESM": true
+        }
+      ]
     },
     "moduleNameMapper": {
       "^(\\.{1,2}/.*)\\.js$": "$1"

yarn-project/boxes/blank/run_tests

@@ -0,0 +1,21 @@
+#!/bin/bash
+# This script is used to run an e2e type test in CI (see .circleci/config.yml).
+# It pulls images and runs docker-compose, which has the test as the entrypoint.
+[ -n "${BUILD_SYSTEM_DEBUG:-}" ] && set -x # conditionally trace
+set -eu
+
+# Run in script path.
+cd `dirname $0`
+
+export COMPOSE_FILE=${1:-docker-compose.yml}
+
+ecr_login
+
+for REPO in aztec-sandbox yarn-project; do
+echo "pulling docker image for $REPO $(calculate_image_uri $REPO)"
+  retry docker pull $(calculate_image_uri $REPO)
+  retry docker tag $(calculate_image_uri $REPO) aztecprotocol/$REPO:latest
+done
+
+docker-compose rm -f
+docker-compose -f $COMPOSE_FILE up --exit-code-from boxes-blank

yarn-project/boxes/blank/src/index.ts

@@ -6,10 +6,12 @@ import {
   Contract,
   DeployMethod,
   Fr,
+  TxReceipt,
   createAztecRpcClient,
   getSandboxAccountsWallets,
 } from '@aztec/aztec.js';
 import { ContractAbi, FunctionAbi, encodeArguments } from '@aztec/foundation/abi';
+import { FieldsOf } from '@aztec/foundation/types';
 import { BlankContractAbi } from './artifacts/blank.js';
 export const contractAbi: ContractAbi = BlankContractAbi;
 
@@ -23,8 +25,20 @@ export const DEFAULT_PUBLIC_ADDRESS: string = '0x25048e8c1b7dea68053d597ac2d9206
 
 let contractAddress: string = '';
 
-// interaction with the buttons
-document.getElementById('deploy')?.addEventListener('click', async () => {
+// interaction with the buttons, but conditional check so node env can also import from this file
+if (typeof document !== 'undefined') {
+  document.getElementById('deploy')?.addEventListener('click', async () => {
+    contractAddress = await handleDeployClick();
+    console.log('Deploy Succeeded, contract deployed at', contractAddress);
+  });
+
+  document.getElementById('interact')?.addEventListener('click', async () => {
+    const interactionResult = await handleInteractClick(contractAddress);
+    console.log('Interaction transaction succeeded', interactionResult);
+  });
+}
+
+export async function handleDeployClick(): Promise<string> {
   console.log('Deploying Contract');
   const [wallet, ..._rest] = await getSandboxAccountsWallets(rpcClient);
 
@@ -35,28 +49,27 @@ document.getElementById('deploy')?.addEventListener('click', async () => {
     Fr.random(),
     rpcClient,
   );
-  contractAddress = contractAztecAddress.toString();
-  console.log('Deploy Succeeded, contract deployed at', contractAddress);
-});
 
-document.getElementById('interact')?.addEventListener('click', async () => {
+  return contractAztecAddress.toString();
+}
+
+export async function handleInteractClick(contractAddress: string) {
   const [wallet, ..._rest] = await getSandboxAccountsWallets(rpcClient);
   const callArgs = { address: wallet.getCompleteAddress().address };
   const getPkAbi = getFunctionAbi(BlankContractAbi, 'getPublicKey');
   const typedArgs = convertArgs(getPkAbi, callArgs);
   console.log('Interacting with Contract');
 
-  const call = await callContractFunction(
+  return await callContractFunction(
     AztecAddress.fromString(contractAddress),
     contractAbi,
     'getPublicKey',
     typedArgs,
     rpcClient,
     wallet.getCompleteAddress(),
   );
+}
 
-  console.log('transaction outcome:', call);
-});
 
 export const getFunctionAbi = (contractAbi: any, functionName: string) => {
   const functionAbi = contractAbi.functions.find((f: FunctionAbi) => f.name === functionName);
@@ -71,7 +84,7 @@ export async function callContractFunction(
   typedArgs: any[], // for the exposed functions, this is an array of field elements Fr[]
   rpc: AztecRPC,
   wallet: CompleteAddress,
-) {
+): Promise<FieldsOf<TxReceipt>> {
   // selectedWallet is how we specify the "sender" of the transaction
   const selectedWallet = await getWallet(wallet, rpc);