fix: fix boxes (#11592)

Playwright was clicking the button before the event handlers were
attached due to new async init.
Also adapted to new non-inlined wasm

---------

Co-authored-by: thunkar <[email protected]>
Co-authored-by: ludamad <[email protected]>

.github/workflows/ci.yml

@@ -494,26 +494,25 @@ jobs:
           alert-comment-cc-users: "@ludamad @codygunton"
           max-items-in-chart: 50
 
-  # TODO(https://github.com/AztecProtocol/aztec-packages/issues/11471) reenable
-  # boxes-test:
-  #   needs: [ci-rest, configure]
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #       with: { ref: "${{ github.event.pull_request.head.sha }}" }
-  #     - uses: ./.github/ci-setup-action
+  boxes-test:
+    needs: [ci-rest, configure]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with: { ref: "${{ github.event.pull_request.head.sha }}" }
+      - uses: ./.github/ci-setup-action
 
-  #     - name: Build Boxes
-  #       uses: ./.github/ensure-builder
-  #       timeout-minutes: 40
-  #       with:
-  #         username: ${{ needs.configure.outputs.username }}
-  #         runner_type: builder-x86
-  #         run: |
-  #           export CI=1 USE_CACHE=1
-  #           if ci3/test_should_run "boxes-test-$(./boxes/bootstrap.sh hash)"; then
-  #             ./bootstrap.sh test-boxes
-  #           fi
+      - name: Build Boxes
+        uses: ./.github/ensure-builder
+        timeout-minutes: 40
+        with:
+          username: ${{ needs.configure.outputs.username }}
+          runner_type: builder-x86
+          run: |
+            export CI=1 USE_CACHE=1
+            if ci3/test_should_run "boxes-test-$(./boxes/bootstrap.sh hash)"; then
+              ./bootstrap.sh test-boxes
+            fi
 
   prover-client-test:
     needs: [ci-rest, configure]

barretenberg/acir_tests/browser-test-app/yarn.lock

@@ -7,7 +7,7 @@ __metadata:
 
 "@aztec/bb.js@file:../../ts::locator=browser-test-app%40workspace%3A.":
   version: 0.72.1
-  resolution: "@aztec/bb.js@file:../../ts#../../ts::hash=902795&locator=browser-test-app%40workspace%3A."
+  resolution: "@aztec/bb.js@file:../../ts#../../ts::hash=2e6237&locator=browser-test-app%40workspace%3A."
   dependencies:
     comlink: "npm:^4.4.1"
     commander: "npm:^12.1.0"
@@ -17,7 +17,7 @@ __metadata:
     tslib: "npm:^2.4.0"
   bin:
     bb.js: ./dest/node/main.js
-  checksum: 10c0/8cee0c2d82a1737ab2527e196b67e63a997048ebea3af3b5f21f684575c53283430e046553676cee53c424eaec335ba03b4363d3eec704e7cc8e24090eed569a
+  checksum: 10c0/174074ea937d9e4888e1aa600717ace0f0c5745d15bdd23730c136d927c2d58eec87ba83cb21fbfb72f7aa00ec128a564d7fa6d822f709e0327e01aa6475e255
   languageName: node
   linkType: hard
 

barretenberg/acir_tests/headless-test/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
-    "playwright": "^1.49.0",
+    "playwright": "^1.50.0",
     "puppeteer": "^22.4.1"
   },
   "devDependencies": {

barretenberg/acir_tests/headless-test/yarn.lock

@@ -869,7 +869,7 @@ __metadata:
   dependencies:
     chalk: "npm:^5.3.0"
     commander: "npm:^12.1.0"
-    playwright: "npm:^1.49.0"
+    playwright: "npm:^1.50.0"
     puppeteer: "npm:^22.4.1"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.4.2"
@@ -1408,27 +1408,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.49.0":
-  version: 1.49.0
-  resolution: "playwright-core@npm:1.49.0"
+"playwright-core@npm:1.50.0":
+  version: 1.50.0
+  resolution: "playwright-core@npm:1.50.0"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/22c1a72fabdcc87bd1cd4d40a032d2c5b94cf94ba7484dc182048c3fa1c8ec26180b559d8cac4ca9870e8fd6bdf5ef9d9f54e7a31fd60d67d098fcffc5e4253b
+  checksum: 10c0/b0cc7fadcb2db68a7b8d730b26c7a7d17baad454a0697c781e08074a619e57779a90be9b57c4c741ff4895390bdfd093d8393a746e8bf68ae57ac452f4c1cdb2
   languageName: node
   linkType: hard
 
-"playwright@npm:^1.49.0":
-  version: 1.49.0
-  resolution: "playwright@npm:1.49.0"
+"playwright@npm:^1.50.0":
+  version: 1.50.0
+  resolution: "playwright@npm:1.50.0"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.49.0"
+    playwright-core: "npm:1.50.0"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/e94d662747cd147d0573570fec90dadc013c1097595714036fc8934a075c5a82ab04a49111b03b1f762ea86429bdb7c94460901896901e20970b30ce817cc93f
+  checksum: 10c0/0076a536433819b7122066a07c5fcfa56d40d09cbbec0a39061bbfa832c8a1f626df5e4fe206fbeba56b3a61f0e2b26d4ad3c2b402852d6f147a266fd18e4ddf
   languageName: node
   linkType: hard
 

boxes/Dockerfile

@@ -21,5 +21,5 @@ COPY . .
 ENV AZTEC_NARGO=/usr/aztec-nargo/compile_then_postprocess.sh
 ENV AZTEC_BUILDER=/usr/src/yarn-project/builder/aztec-builder-dest
 RUN yarn
-RUN npx -y playwright@1.42 install --with-deps
+RUN npx -y playwright@1.50 install --with-deps
 ENTRYPOINT ["/bin/sh", "-c"]

boxes/boxes/react/package.json

@@ -46,7 +46,7 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.49.0",
+    "@playwright/test": "1.50.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.15",
@@ -55,7 +55,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "assert": "^2.1.0",
     "autoprefixer": "^10.4.15",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.8.1",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^9.0.0",

boxes/boxes/react/webpack.config.js

@@ -1,3 +1,4 @@
+import CopyPlugin from 'copy-webpack-plugin';
 import { createRequire } from 'module';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -11,7 +12,14 @@ export default (_, argv) => ({
     main: './src/index.tsx',
   },
   module: {
+    parser: {
+      javascript: { importMeta: false },
+    },
     rules: [
+      {
+        test: /\.gz$/,
+        type: 'asset/resource',
+      },
       {
         test: /\.tsx?$/,
         use: 'ts-loader',
@@ -23,8 +31,17 @@ export default (_, argv) => ({
     ],
   },
   plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          context: '../../../barretenberg/ts/dest/browser',
+          from: '*.gz',
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       template: './index.html',
+      scriptLoading: 'module',
     }),
     new webpack.DefinePlugin({
       'process.env': {
@@ -54,7 +71,13 @@ export default (_, argv) => ({
   },
   devServer: {
     port: 5173,
-    historyApiFallback: true,
     open: true,
+    historyApiFallback: true,
+    headers: (req, res) => {
+      if (req.originalUrl.endsWith('.gz')) {
+        res.setHeader('Content-Encoding', 'gzip');
+        res.setHeader('Content-Type', 'application/wasm');
+      }
+    },
   },
 });

boxes/boxes/vanilla/package.json

@@ -21,18 +21,18 @@
     "@aztec/aztec.js": "latest"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.50.0",
     "@types/node": "^20.11.17",
     "assert": "^2.1.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "html-webpack-plugin": "^5.6.0",
     "stream-browserify": "^3.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.0.4",
     "util": "^0.12.5",
     "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.2.0"
   },
   "packageManager": "[email protected]"
 }

boxes/boxes/vanilla/src/index.html

@@ -7,7 +7,7 @@
     <style></style>
   </head>
   <body>
-    <button id="deploy">Deploy</button>
+    <button id="deploy" hidden>Deploy</button>
     <button id="get" hidden>Get Number</button>
     <form id="set" hidden>
       <input id="number" type="number" value="0" />

boxes/boxes/vanilla/src/index.ts

@@ -3,24 +3,19 @@ import { createPXEClient, AccountManager, Fr, Wallet, deriveMasterIncomingViewin
 import { SingleKeyAccountContract } from '@aztec/accounts/single_key';
 import { VanillaContract } from '../artifacts/Vanilla';
 
-const secretKey = Fr.random();
-const pxe = createPXEClient(process.env.PXE_URL || 'http://localhost:8080');
-
-const encryptionPrivateKey = deriveMasterIncomingViewingSecretKey(secretKey);
-const account = await AccountManager.create(pxe, secretKey, new SingleKeyAccountContract(encryptionPrivateKey));
-let contract: any = null;
-let wallet: Wallet | null = null;
-
 const setWait = (state: boolean): void =>
   document.querySelectorAll('*').forEach((e: HTMLElement & HTMLButtonElement) => {
     e.style.cursor = state ? 'wait' : 'default';
     e.disabled = state;
   });
 
+let contract: any = null;
+let wallet: Wallet | null = null;
+let account: AccountManager = null;
+
 document.querySelector('#deploy').addEventListener('click', async ({ target }: any) => {
   setWait(true);
   wallet = await account.register();
-
   contract = await VanillaContract.deploy(wallet, Fr.random(), wallet.getCompleteAddress().address)
     .send({ contractAddressSalt: Fr.random() })
     .deployed();
@@ -47,3 +42,10 @@ document.querySelector('#get').addEventListener('click', async () => {
   const viewTxReceipt = await contract.methods.getNumber(wallet.getCompleteAddress().address).simulate();
   alert(`Number is: ${viewTxReceipt.value}`);
 });
+
+const secretKey = Fr.random();
+const pxe = createPXEClient(process.env.PXE_URL || 'http://localhost:8080');
+
+const encryptionPrivateKey = deriveMasterIncomingViewingSecretKey(secretKey);
+account = await AccountManager.create(pxe, secretKey, new SingleKeyAccountContract(encryptionPrivateKey));
+(document.querySelector('#deploy') as HTMLButtonElement).hidden = false;

boxes/boxes/vanilla/tests/browser.spec.ts

@@ -1,8 +1,10 @@
+import { retryUntil } from '@aztec/aztec.js';
 import { test, expect } from '@playwright/test';
 
 test('Deploying, setting, and getting a number', async ({ page }) => {
   page.on('console', msg => console.log(msg.text()));
   test.slow();
+
   await page.goto('/');
 
   const handleDialog = (expectedMessage: string) => {
@@ -20,20 +22,24 @@ test('Deploying, setting, and getting a number', async ({ page }) => {
   await page.getByRole('button', { name: 'Deploy' }).click();
   await deployDialogPromise;
   await expect(page.locator('#number')).toHaveValue('0');
+  console.log('Contract deployed');
 
   // Get number
   const getNumberDialogPromise = handleDialog('Number is:');
   await page.getByRole('button', { name: 'Get Number' }).click();
   await getNumberDialogPromise;
+  console.log('Get number');
 
   // Set number
   await page.locator('#number').fill('1');
   const setNumberDialogPromise = handleDialog('Number set!');
   await page.getByRole('button', { name: 'Set Number' }).click();
   await setNumberDialogPromise;
+  console.log('Set number');
 
   // Verifying number
   const verifyNumberDialogPromise = handleDialog('Number is: 1');
   await page.getByRole('button', { name: 'Get Number' }).click();
   await verifyNumberDialogPromise;
+  console.log('Get updated number');
 });

boxes/boxes/vanilla/webpack.config.js

@@ -1,3 +1,4 @@
+import CopyPlugin from 'copy-webpack-plugin';
 import { createRequire } from 'module';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -11,16 +12,32 @@ export default (_, argv) => ({
     main: './src/index.ts',
   },
   module: {
+    parser: {
+      javascript: { importMeta: false },
+    },
     rules: [
+      {
+        test: /\.gz$/,
+        type: 'asset/resource',
+      },
       {
         test: /\.ts?$/,
         use: 'ts-loader',
       },
     ],
   },
   plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          context: '../../../barretenberg/ts/dest/browser',
+          from: '*.gz',
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       template: './src/index.html',
+      scriptLoading: 'module',
     }),
     new webpack.DefinePlugin({
       'process.env': {
@@ -50,7 +67,13 @@ export default (_, argv) => ({
   },
   devServer: {
     port: 5173,
-    historyApiFallback: true,
     open: true,
+    historyApiFallback: true,
+    headers: (req, res) => {
+      if (req.originalUrl.endsWith('.gz')) {
+        res.setHeader('Content-Encoding', 'gzip');
+        res.setHeader('Content-Type', 'application/wasm');
+      }
+    },
   },
 });

boxes/boxes/vite/package.json

@@ -14,14 +14,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@aztec/accounts": "portal:../../../yarn-project/accounts",
-    "@aztec/aztec.js": "portal:../../../yarn-project/aztec.js",
-    "@aztec/bb-prover": "link:../../../yarn-project/bb-prover",
-    "@aztec/circuit-types": "portal:../../../yarn-project/circuit-types",
-    "@aztec/key-store": "link:../../../yarn-project/key-store",
-    "@aztec/kv-store": "portal:../../../yarn-project/kv-store",
-    "@aztec/pxe": "link:../../../yarn-project/pxe",
-    "@aztec/simulator": "link:../../../yarn-project/simulator",
+    "@aztec/accounts": "latest",
+    "@aztec/aztec.js": "latest",
+    "@aztec/bb-prover": "latest",
+    "@aztec/circuit-types": "latest",
+    "@aztec/key-store": "latest",
+    "@aztec/kv-store": "latest",
+    "@aztec/pxe": "latest",
+    "@aztec/simulator": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-toastify": "^10.0.6"
@@ -38,6 +38,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^6.0.3",
-    "vite-plugin-node-polyfills": "^0.22.0"
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-static-copy": "^2.2.0"
   }
 }