fix: boxes use base image (AztecProtocol#6120)

Update docker image for boxes

.circleci/config.yml

@@ -431,42 +431,6 @@ jobs:
           command: build aztec-builder
           aztec_manifest_key: aztec-builder
 
-  boxes:
-    docker:
-      - image: aztecprotocol/alpine-build-image
-    resource_class: small
-    steps:
-      - *checkout
-      - *setup_env
-      - run:
-          name: "Build"
-          command: cond_spot_run_build boxes 4
-          aztec_manifest_key: boxes
-
-  boxes-vanilla:
-    docker:
-      - image: aztecprotocol/alpine-build-image
-    resource_class: small
-    steps:
-      - *checkout
-      - *setup_env
-      - run:
-          name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=vanilla
-          aztec_manifest_key: boxes
-
-  boxes-react:
-    docker:
-      - image: aztecprotocol/alpine-build-image
-    resource_class: small
-    steps:
-      - *checkout
-      - *setup_env
-      - run:
-          name: "Test"
-          command: cond_spot_run_compose boxes 4 ./docker-compose.yml BOX=react
-          aztec_manifest_key: boxes
-
   end-to-end:
     machine:
       image: default
@@ -695,20 +659,6 @@ workflows:
       - aztec-package: *defaults_yarn_project
       - aztec-builder: *defaults_yarn_project
 
-      # Boxes.
-      - boxes:
-          requires:
-            - aztec-package
-          <<: *defaults
-      - boxes-vanilla:
-          requires:
-            - boxes
-          <<: *defaults
-      - boxes-react:
-          requires:
-            - boxes
-          <<: *defaults
-
       # End to end tests.
       - e2e-join:
           requires:
@@ -728,8 +678,6 @@ workflows:
             - barretenberg-acir-tests-bb
             - barretenberg-acir-tests-bb-sol
             - barretenberg-docs
-            - boxes-vanilla
-            - boxes-react
             - noir-packages-tests
             - e2e-join
             - aztec-builder

boxes/.earthlyignore

@@ -0,0 +1,46 @@
+# Must include the .gitignore for all child projects as this is used by Earthly
+
+# Note due to how we use Eartlhy each .gitignore MUST accompany any earthfile that might actually copy these artifacts
+
+**/Earthfile
+**/Readme.md
+**/README.md
+**/Dockerfile*
+\*\*/docker-compose*.yml
+
+# root .gitignore contents
+
+dest
+node_modules
+.cache
+scripts/.earthly
+.pnp.cjs
+.pnp.loader.mjs
+build/
+.idea
+cmake-build-debug
+.terraform\*
+.bootstrapped
+.tsbuildinfo
+
+.graphite\*
+.DS_Store
+
+\*_/_.dockerignore
+
+# .gitignore contents:
+
+.yarn/\*
+!.yarn/releases
+
+node_modules
+dist
+artifacts
+boxes/_/src/contracts/target
+boxes/_/src/contracts/log
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+codegenCache.json

boxes/Earthfile

@@ -1,18 +1,139 @@
 VERSION 0.8
-# Produces a container that can be run to test a specific box. See docker-compose.yml.
+
+deps:
+    LOCALLY
+    LET packages = $(git ls-files "**/package*.json" package*.json)
+    LET tsconfigs = $(git ls-files "**/tsconfig*.json" tsconfig*.json)
+    # use the build image to build the project so that nargo has access to the same libc
+    # later on, once everything is built and we don't need nargo, copy to a debian based image
+    # that's supported by playwright
+    FROM ../build-images+build
+
+    # copy the aztec yarn workspace, needed to resolve portal dependencies
+    COPY ../yarn-project+build-dev/usr/src /usr/src
+
+    WORKDIR /usr/src/boxes
+
+    COPY --dir .yarn .yarnrc.yml yarn.lock .
+    FOR file IN $packages
+        COPY $file $file
+    END
+    RUN yarn install --immutable
+    # don't install playwright here as it's not compatible with ubuntu 24.04 yet
+    # https://github.com/microsoft/playwright/issues/30368
+    FOR file IN $tsconfigs
+        COPY $file $file
+    END
 
 build:
-    # We need yarn. Start fresh container.
-    FROM node:18.19.0
-    RUN apt update && apt install netcat-openbsd
-    COPY ../yarn-project+build/build /usr/src
+    FROM +deps
+
     COPY ../noir/+nargo/nargo /usr/src/noir/noir-repo/target/release/nargo
     COPY ../noir-projects/+build/aztec-nr /usr/src/noir-projects/aztec-nr
     COPY ../noir-projects/+build/noir-protocol-circuits/crates/types /usr/src/noir-projects/noir-protocol-circuits/crates/types
+
     WORKDIR /usr/src/boxes
-    COPY . .
+
     ENV AZTEC_NARGO=/usr/src/noir/noir-repo/target/release/nargo
     ENV AZTEC_BUILDER=/usr/src/yarn-project/builder/aztec-builder-dest
-    RUN yarn && yarn build
-    RUN npx -y [email protected] install --with-deps
+    COPY . .
+    RUN yarn build
+
+    SAVE ARTIFACT /usr/src /usr/src
+
+boxes:
+    FROM node:18.19
+    COPY --dir +build/usr/src /usr
+    WORKDIR /usr/src/boxes
+    RUN yarn install-browsers
     ENTRYPOINT ["/bin/sh", "-c"]
+
+BOX_TEST_LOCAL:
+  FUNCTION
+  ARG box
+  ARG browser
+  ARG compose_file=./docker-compose.yml
+  ARG debug="aztec:*"
+  LOCALLY
+  ENV BOX=$box
+  ENV BROWSER=$browser
+  ENV DEBUG=$debug
+  ENV CI=1
+  WITH DOCKER \
+    --load aztecprotocol/aztec:latest=../yarn-project/+aztec \
+    --load aztecprotocol/boxes:latest=+boxes
+    RUN docker compose -f $compose_file up --exit-code-from=boxes --force-recreate
+  END
+
+# run locally and take from cache, used for our mainly x86 jobs
+BOX_TEST_FROM_CACHE:
+  FUNCTION
+  ARG box
+  ARG browser
+  ARG compose_file=./docker-compose.yml
+  ARG debug="aztec:*"
+  ARG aztec_docker_tag
+  LOCALLY
+  ENV BOX=$box
+  ENV BROWSER=$browser
+  ENV DEBUG=$debug
+  ENV AZTEC_DOCKER_TAG=$aztec_docker_tag
+  ENV CI=1
+  # need a different project name for each to run in parallel
+  LET project_name=$box_$browser
+  IF docker compose > /dev/null 2>&1
+    LET CMD="docker compose"
+  ELSE
+    LET CMD="docker-compose"
+  END
+  # In CI we do not use WITH DOCKER as we have had issues with earthly copying big images
+  RUN $CMD -p $project_name -f $compose_file up --exit-code-from=boxes --force-recreate
+
+BOX_TEST_FROM_BUILD:
+  FUNCTION
+  ARG box
+  ARG browser
+  ARG compose_file=./docker-compose.yml
+  ARG debug="aztec:*"
+  FROM earthly/dind:alpine-3.19-docker-25.0.2-r0
+  ENV BOX=$box
+  ENV BROWSER=$browser
+  ENV DEBUG=$debug
+  ENV CI=1
+  COPY $compose_file $compose_file
+  # For ARM, we do use WITH DOCKER as we don't have many e2e tests, but note BOX_TEST_FROM_CACHE
+  WITH DOCKER \
+    --load aztecprotocol/aztec:latest=../yarn-project/+aztec \
+    --load aztecprotocol/boxes:latest=+boxes
+    # Run our docker compose, ending whenever sandbox ends, filtering out noisy eth_getLogs
+    RUN docker compose -f $compose_file up --exit-code-from=boxes --force-recreate
+  END
+
+BOX_TEST:
+  FUNCTION
+  ARG box
+  ARG browser
+  ARG compose_file=./docker-compose.yml
+  ARG mode=local
+  ARG debug="aztec:*"
+  LOCALLY
+  IF [ $mode = local ]
+    DO +BOX_TEST_LOCAL --box=$box --browser=$browser --compose_file=$compose_file --debug=$debug
+  ELSE IF [ $mode = cache ]
+    DO +BOX_TEST_FROM_CACHE --box=$box --browser=$browser --aztec_docker_tag=$(git rev-parse HEAD) --compose_file=$compose_file --debug=$debug
+  ELSE
+    DO +BOX_TEST_FROM_BUILD --box=$box --browser=$browser --compose_file=$compose_file --debug=$debug
+  END
+
+test:
+  ARG box=vanilla
+  ARG browser=chromium
+  ARG mode=local
+  DO +BOX_TEST --box=$box --browser=$browser --mode=$mode
+
+# for use with mode=cache
+export-boxes:
+    BUILD +boxes
+    ARG EARTHLY_GIT_HASH
+    FROM +boxes
+    SAVE IMAGE aztecprotocol/boxes:$EARTHLY_GIT_HASH

boxes/boxes/react/package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
-    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile",
+    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile --silence-warnings",
     "codegen": "${AZTEC_BUILDER:-aztec-builder} codegen src/contracts/target -o artifacts",
     "clean": "rm -rf ./dist .tsbuildinfo ./artifacts ./src/contracts/target",
     "prep": "yarn clean && yarn compile && yarn codegen",
@@ -15,7 +15,7 @@
     "serve": "webpack serve --no-open --mode development",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src",
-    "test": "yarn prep && yarn test:node && yarn test:browser",
+    "test": "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"
   },
@@ -41,10 +41,8 @@
     "@aztec/builder": "latest",
     "classnames": "^2.3.2",
     "formik": "^2.4.3",
-    "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass-loader": "^13.3.2",
     "serve": "^14.2.1",
     "yup": "^1.2.0"
   },

boxes/boxes/react/playwright.config.ts

@@ -25,11 +25,10 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
   ],
   webServer: {
     command: 'yarn serve',

boxes/boxes/vanilla/package.json

@@ -5,14 +5,14 @@
   "version": "0.1.0",
   "type": "module",
   "scripts": {
-    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile",
+    "compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile --silence-warnings",
     "codegen": "${AZTEC_BUILDER:-aztec-builder} codegen src/contracts/target -o artifacts",
     "clean": "rm -rf ./dest .tsbuildinfo ./artifacts ./src/contracts/target",
     "prep": "yarn clean && yarn compile && yarn codegen && tsc -b",
     "dev": "yarn prep && webpack serve --mode development",
     "build": "yarn prep && webpack",
     "serve": "webpack serve --no-open --mode development",
-    "test": "yarn prep && npx playwright test",
+    "test": "npx playwright test",
     "formatting": "prettier --check ./src && eslint ./src",
     "formatting:fix": "prettier -w ./src"
   },

boxes/boxes/vanilla/playwright.config.ts

@@ -25,7 +25,6 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },

boxes/docker-compose.yml

@@ -5,7 +5,7 @@ services:
     command: "'anvil --silent -p 8545 --host 0.0.0.0 --chain-id 31337'"
 
   aztec:
-    image: aztecprotocol/aztec
+    image: aztecprotocol/aztec:${AZTEC_DOCKER_TAG:-latest}
     environment:
       ETHEREUM_HOST: http://ethereum:8545
       CHAIN_ID: 31337
@@ -15,13 +15,14 @@ services:
       WS_BLOCK_CHECK_INTERVAL_MS: 50
       PXE_BLOCK_POLLING_INTERVAL_MS: 50
       ARCHIVER_VIEM_POLLING_INTERVAL_MS: 500
+    depends_on:
+      - ethereum
 
   boxes:
-    image: aztecprotocol/boxes
+    image: aztecprotocol/boxes:${AZTEC_DOCKER_TAG:-latest}
     entrypoint: >
       sh -c '
-        while ! nc -z aztec 8080; do sleep 1; done;
-        yarn workspace @aztec/$BOX test
+        yarn workspace @aztec/$BOX test --project=$BROWSER
       '
     environment:
       DEBUG: "aztec:*"
@@ -30,3 +31,8 @@ services:
       CHAIN_ID: 31337
       PXE_URL: http://aztec:8080
       BOX: ${BOX:-vanilla}
+      CI: ${CI:-}
+      BROWSER: ${BROWSER:-chromium}
+    depends_on:
+      aztec:
+        condition: service_healthy

boxes/package.json

@@ -7,6 +7,7 @@
   "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"
   },
   "workspaces": [
@@ -36,5 +37,8 @@
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",
     "tiged": "^2.12.6"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.42.0"
   }
 }