chore: improve boxes (#11656)

Ensure compilation outside of the monorepo, improve webapp and bundling

---------

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

boxes/bootstrap.sh

@@ -35,7 +35,7 @@ function test {
 
 function test_cmds {
   for browser in chromium webkit; do
-    for box in vanilla react; do
+    for box in vanilla react vite; do
       echo "boxes/scripts/run_test.sh $box $browser"
     done
   done

boxes/boxes/react/webpack.config.js

@@ -2,6 +2,8 @@ import CopyPlugin from 'copy-webpack-plugin';
 import { createRequire } from 'module';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { resolve } from 'path';
+
 const require = createRequire(import.meta.url);
 
 export default (_, argv) => ({
@@ -31,7 +33,7 @@ export default (_, argv) => ({
     new CopyPlugin({
       patterns: [
         {
-          context: '../../../barretenberg/ts/dest/browser',
+          context: resolve(require.resolve('@aztec/aztec.js'), '../'),
           from: '*.gz',
         },
       ],

boxes/boxes/vite/.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 
 artifacts/*
 codegenCache.json
+test-results/

boxes/boxes/vite/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vite",
+  "name": "@aztec/vite",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -8,9 +8,11 @@
     "codegen": "${AZTEC_BUILDER:-aztec} codegen src/contracts/target -o artifacts",
     "clean": "rm -rf ./dist .tsbuildinfo ./artifacts ./src/contracts/target",
     "prep": "yarn clean && yarn compile && yarn codegen",
-    "dev": "vite",
     "build": "yarn prep && tsc -b && vite build",
-    "lint": "eslint .",
+    "serve": "vite",
+    "test": "npx playwright test",
+    "formatting": "prettier --check ./src && eslint ./src",
+    "formatting:fix": "prettier -w ./src",
     "preview": "vite preview"
   },
   "dependencies": {

boxes/boxes/vite/playwright.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  testMatch: "**.spec.ts",
+  fullyParallel: true,
+  retries: 3,
+  workers: process.env.CI ? 1 : 3,
+  reporter: "list",
+  use: {
+    baseURL: "http://127.0.0.1:5173",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "on-first-retry",
+  },
+  expect: {
+    timeout: 90000,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+  webServer: {
+    command: "yarn serve --host",
+    port: 5173,
+  },
+});

boxes/boxes/vite/src/config.ts

@@ -16,28 +16,21 @@ import { createStore } from "@aztec/kv-store/indexeddb";
 import { BBWASMLazyPrivateKernelProver } from "@aztec/bb-prover/wasm/lazy";
 import { WASMSimulator } from "@aztec/simulator/client";
 
-process.env = Object.keys(import.meta.env).reduce((acc, key) => {
-  acc[key.replace("VITE_", "")] = import.meta.env[key];
-  return acc;
-}, {});
-
 const SECRET_KEY = Fr.random();
 
 export class PrivateEnv {
   pxe;
   accountContract;
   accountManager: AccountManager;
 
-  constructor(
-    private secretKey: Fr,
-    private nodeURL: string,
-  ) {}
+  constructor(private secretKey: Fr) {}
 
   async init() {
+    const nodeURL = process.env.AZTEC_NODE_URL ?? "http://localhost:8080";
+
     const config = getPXEServiceConfig();
     config.dataDirectory = "pxe";
-    config.proverEnabled = true;
-    const aztecNode = await createAztecNodeClient(this.nodeURL);
+    const aztecNode = await createAztecNodeClient(nodeURL);
     const simulationProvider = new WASMSimulator();
     const proofCreator = new BBWASMLazyPrivateKernelProver(
       simulationProvider,
@@ -52,7 +45,7 @@ export class PrivateEnv {
     const store = await createStore(
       "pxe_data",
       configWithContracts,
-      createLogger("pxe:data:indexeddb"),
+      createLogger("pxe:data:idb"),
     );
 
     const keyStore = new KeyStore(store);
@@ -87,10 +80,7 @@ export class PrivateEnv {
   }
 }
 
-export const deployerEnv = new PrivateEnv(
-  SECRET_KEY,
-  process.env.AZTEC_NODE_URL,
-);
+export const deployerEnv = new PrivateEnv(SECRET_KEY);
 
 const IGNORE_FUNCTIONS = [
   "constructor",

boxes/boxes/vite/src/main.tsx

@@ -3,6 +3,11 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
+process.env = Object.keys(import.meta.env).reduce((acc, key) => {
+  acc[key.replace("VITE_", "")] = import.meta.env[key];
+  return acc;
+}, {});
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

boxes/boxes/vite/tests/browser.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  test.slow();
+  await page.goto('/');
+
+  // Deploy contract
+  await page.getByRole('button', { name: 'Deploy dummy contract' }).click();
+  await expect(page.getByText('Deploying contract...')).toBeVisible();
+  await expect(page.getByText('Address:')).toBeVisible();
+
+  // Read number
+  await page.getByRole('button', { name: 'Read' }).click();
+  await expect(page.getByText('Number is:')).toBeVisible();
+
+  // Set number
+  await page.locator('#numberToSet').fill('1');
+  await page.getByRole('button', { name: 'Write' }).click();
+  await expect(page.getByText('Setting number...')).toBeVisible();
+  await expect(page.getByText('Number set to: 1')).toBeVisible();
+
+  // Read number
+  await page.getByRole('button', { name: 'Read' }).click();
+  await expect(page.getByText('Number is: 1')).toBeVisible();
+});

boxes/boxes/vite/tests/node.test.ts

@@ -0,0 +1,45 @@
+import { AccountWallet, CompleteAddress, Contract, Fr, createLogger } from '@aztec/aztec.js';
+import { BoxReactContract } from '../artifacts/BoxReact.js';
+import { deployerEnv } from '../src/config.js';
+
+const logger = createLogger('aztec:http-pxe-client');
+
+describe('BoxReact Contract Tests', () => {
+  let wallet: AccountWallet;
+  let contract: Contract;
+  const numberToSet = Fr.random();
+  let accountCompleteAddress: CompleteAddress;
+
+  beforeAll(async () => {
+    wallet = await deployerEnv.getWallet();
+    accountCompleteAddress = wallet.getCompleteAddress();
+    const salt = Fr.random();
+
+    contract = await BoxReactContract.deploy(
+      wallet,
+      Fr.random(),
+      accountCompleteAddress.address
+    )
+      .send({ contractAddressSalt: salt })
+      .deployed();
+
+    logger.info(`L2 contract deployed at ${contract.address}`);
+  }, 60000);
+
+  test('Can set a number', async () => {
+    logger.info(`${await wallet.getRegisteredAccounts()}`);
+
+    await contract.methods
+      .setNumber(
+        numberToSet,
+        accountCompleteAddress.address
+      )
+      .send()
+      .wait();
+  }, 40000);
+
+  test('Can read a number', async () => {
+    const viewTxReceipt = await contract.methods.getNumber(accountCompleteAddress.address).simulate();
+    expect(numberToSet.toBigInt()).toEqual(viewTxReceipt.value);
+  }, 40000);
+});

boxes/docker-compose.yml

@@ -49,6 +49,7 @@ services:
       ETHEREUM_HOST: http://ethereum:8545
       L1_CHAIN_ID: 31337
       PXE_URL: http://aztec:8080
+      VITE_AZTEC_NODE_URL: http://aztec:8080
       BOX: ${BOX:-vanilla}
       CI: ${CI:-}
       BROWSER: ${BROWSER:-chromium}

boxes/yarn.lock

@@ -134,6 +134,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@aztec/vite@workspace:boxes/vite":
+  version: 0.0.0-use.local
+  resolution: "@aztec/vite@workspace:boxes/vite"
+  dependencies:
+    "@aztec/accounts": "npm:latest"
+    "@aztec/aztec.js": "npm:latest"
+    "@aztec/bb-prover": "npm:latest"
+    "@aztec/circuit-types": "npm:latest"
+    "@aztec/key-store": "npm:latest"
+    "@aztec/kv-store": "npm:latest"
+    "@aztec/pxe": "npm:latest"
+    "@aztec/simulator": "npm:latest"
+    "@eslint/js": "npm:^9.13.0"
+    "@types/react": "npm:^18.3.12"
+    "@types/react-dom": "npm:^18.3.1"
+    "@vitejs/plugin-react-swc": "npm:^3.7.2"
+    eslint: "npm:^9.13.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
+    eslint-plugin-react-refresh: "npm:^0.4.16"
+    globals: "npm:^15.11.0"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
+    react-toastify: "npm:^10.0.6"
+    typescript: "npm:~5.6.2"
+    typescript-eslint: "npm:^8.11.0"
+    vite: "npm:^6.0.3"
+    vite-plugin-node-polyfills: "npm:^0.23.0"
+    vite-plugin-static-copy: "npm:^2.2.0"
+  languageName: unknown
+  linkType: soft
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.25.9":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
@@ -12292,37 +12323,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@workspace:boxes/vite":
-  version: 0.0.0-use.local
-  resolution: "vite@workspace:boxes/vite"
-  dependencies:
-    "@aztec/accounts": "npm:latest"
-    "@aztec/aztec.js": "npm:latest"
-    "@aztec/bb-prover": "npm:latest"
-    "@aztec/circuit-types": "npm:latest"
-    "@aztec/key-store": "npm:latest"
-    "@aztec/kv-store": "npm:latest"
-    "@aztec/pxe": "npm:latest"
-    "@aztec/simulator": "npm:latest"
-    "@eslint/js": "npm:^9.13.0"
-    "@types/react": "npm:^18.3.12"
-    "@types/react-dom": "npm:^18.3.1"
-    "@vitejs/plugin-react-swc": "npm:^3.7.2"
-    eslint: "npm:^9.13.0"
-    eslint-plugin-react-hooks: "npm:^5.1.0"
-    eslint-plugin-react-refresh: "npm:^0.4.16"
-    globals: "npm:^15.11.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-    react-toastify: "npm:^10.0.6"
-    typescript: "npm:~5.6.2"
-    typescript-eslint: "npm:^8.11.0"
-    vite: "npm:^6.0.3"
-    vite-plugin-node-polyfills: "npm:^0.23.0"
-    vite-plugin-static-copy: "npm:^2.2.0"
-  languageName: unknown
-  linkType: soft
-
 "vitest@npm:^2.0.5":
   version: 2.0.5
   resolution: "vitest@npm:2.0.5"

gaztec/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "vite",
+  "name": "gaztec",
+  "packageManager": "[email protected]",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -26,6 +27,7 @@
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
     "@mui/styles": "^6.3.1",
+    "nosleep.js": "^0.12.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5"
@@ -42,8 +44,8 @@
     "globals": "^15.14.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^6.0.7",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite": "^6.0.11",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-static-copy": "^2.2.0"
   }
 }