chore: improve boxes (#11656)

Ensure compilation outside of the monorepo, improve webapp and bundling

---------

Co-authored-by: thunkar <gregjquiros@gmail.com>

Author: Thunkar

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/.env

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

boxes/boxes/vite/.gitignore

@@ -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/package.json

@@ -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/playwright.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/config.ts

@@ -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/src/main.tsx

@@ -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/browser.spec.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/boxes/vite/tests/node.test.ts

@@ -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/docker-compose.yml

@@ -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"

boxes/yarn.lock

@@ -1,5 +1,6 @@
 {
-  "name": "vite",
+  "name": "gaztec",
+  "packageManager": "yarn@4.5.2",
   "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"
   }
 }

gaztec/package.json

@@ -6,6 +6,7 @@ import {
   AccountWalletWithSecretKey,
   AztecAddress,
   Contract,
+  Logger,
 } from "@aztec/aztec.js";
 import { PXEService } from "@aztec/pxe/service";
 import { PXEServiceConfig, getPXEServiceConfig } from "@aztec/pxe/config";
@@ -27,6 +28,68 @@ process.env = Object.keys(import.meta.env).reduce((acc, key) => {
 
 debug.enable("*");
 
+const logLevel = [
+  "silent",
+  "fatal",
+  "error",
+  "warn",
+  "info",
+  "verbose",
+  "debug",
+  "trace",
+] as const;
+
+type Log = {
+  type: (typeof logLevel)[number];
+  timestamp: number;
+  prefix: string;
+  message: string;
+  data: any;
+};
+
+export class WebLogger {
+  private static instance: WebLogger;
+  private logs: Log[] = [];
+
+  private constructor(private setLogs: (logs: Log[]) => void) {}
+
+  static create(setLogs: (logs: Log[]) => void) {
+    WebLogger.instance = new WebLogger(setLogs);
+  }
+
+  static getInstance() {
+    return WebLogger.instance;
+  }
+
+  createLogger(prefix: string): Logger {
+    return new Proxy(createLogger(prefix), {
+      get: (target, prop, receiver) => {
+        if (logLevel.includes(prop as (typeof logLevel)[number])) {
+          return function () {
+            const args = [prop, prefix, ...arguments] as Parameters<
+              WebLogger["handleLog"]
+            >;
+            WebLogger.getInstance().handleLog(...args);
+            target[prop].apply(this, arguments);
+          };
+        } else {
+          return target[prop];
+        }
+      },
+    });
+  }
+
+  private handleLog(
+    type: (typeof logLevel)[number],
+    prefix: string,
+    message: string,
+    data: any
+  ) {
+    this.logs.unshift({ type, prefix, message, data, timestamp: Date.now() });
+    this.setLogs([...this.logs]);
+  }
+}
+
 export const AztecContext = createContext<{
   pxe: PXE | null;
   nodeURL: string;
@@ -37,6 +100,12 @@ export const AztecContext = createContext<{
   currentContractAddress: AztecAddress;
   currentContract: Contract;
   currentTx: ContractFunctionInteractionTx;
+  logs: Log[];
+  logsOpen: boolean;
+  drawerOpen: boolean;
+  setDrawerOpen: (drawerOpen: boolean) => void;
+  setLogsOpen: (logsOpen: boolean) => void;
+  setLogs: (logs: Log[]) => void;
   setWalletDB: (walletDB: WalletDB) => void;
   setPXEInitialized: (isPXEInitialized: boolean) => void;
   setWallet: (wallet: AccountWalletWithSecretKey) => void;
@@ -56,6 +125,12 @@ export const AztecContext = createContext<{
   currentContract: null,
   currentContractAddress: null,
   currentTx: null,
+  logs: [],
+  logsOpen: false,
+  drawerOpen: false,
+  setDrawerOpen: (drawerOpen: boolean) => {},
+  setLogsOpen: (logsOpen: boolean) => {},
+  setLogs: (logs: Log[]) => {},
   setWalletDB: (walletDB: WalletDB) => {},
   setPXEInitialized: (isPXEInitialized: boolean) => {},
   setWallet: (wallet: AccountWalletWithSecretKey) => {},
@@ -73,15 +148,21 @@ export class AztecEnv {
     return aztecNode;
   }
 
-  static async initPXE(aztecNode: AztecNode): Promise<PXE> {
+  static async initPXE(
+    aztecNode: AztecNode,
+    setLogs: (logs: Log[]) => void
+  ): Promise<PXE> {
+    WebLogger.create(setLogs);
+
     const config = getPXEServiceConfig();
     config.dataDirectory = "pxe";
     config.proverEnabled = true;
 
     const simulationProvider = new WASMSimulator();
     const proofCreator = new BBWASMLazyPrivateKernelProver(
       simulationProvider,
-      16
+      16,
+      WebLogger.getInstance().createLogger("bb:wasm:lazy")
     );
     const l1Contracts = await aztecNode.getL1ContractAddresses();
     const configWithContracts = {
@@ -92,7 +173,7 @@ export class AztecEnv {
     const store = await createStore(
       "pxe_data",
       configWithContracts,
-      createLogger("pxe:data:indexeddb")
+      WebLogger.getInstance().createLogger("pxe:data:indexeddb")
     );
 
     const keyStore = new KeyStore(store);
@@ -107,7 +188,8 @@ export class AztecEnv {
       tips,
       proofCreator,
       simulationProvider,
-      config
+      config,
+      WebLogger.getInstance().createLogger("pxe:service")
     );
     await pxe.init();
     return pxe;

gaztec/src/aztecEnv.ts

@@ -51,8 +51,9 @@ export function DeployContractDialog({
   const [initializer, setInitializer] = useState<FunctionArtifact>(null);
   const [parameters, setParameters] = useState([]);
   const [deploying, setDeploying] = useState(false);
-  const [aliasedAddresses, setAliasedAddresses] = useState([]);
-  const { walletDB, wallet } = useContext(AztecContext);
+  const [_aliasedAddresses, setAliasedAddresses] = useState([]);
+  const { walletDB, wallet, setLogsOpen, setDrawerOpen } =
+    useContext(AztecContext);
 
   useEffect(() => {
     const defaultInitializer = getDefaultInitializer(contractArtifact);
@@ -78,6 +79,7 @@ export function DeployContractDialog({
 
   const deploy = async () => {
     setDeploying(true);
+    setLogsOpen(true);
 
     const nodeInfo = await wallet.getNodeInfo();
     const expectedAztecNrVersion = `${GITHUB_TAG_PREFIX}-v${nodeInfo.nodeVersion}`;

gaztec/src/components/contract/components/deployContractDialog.tsx

@@ -42,7 +42,7 @@ import { CreateAuthwitDialog } from "./components/createAuthwitDialog";
 const container = css({
   display: "flex",
   height: "100vh",
-  width: "75vw",
+  width: "100%",
   overflow: "hidden",
   justifyContent: "center",
   alignItems: "center",
@@ -53,9 +53,9 @@ const dropZoneContainer = css({
   flexDirection: "column",
   width: "100%",
   height: "80%",
-  border: "5px dashed black",
+  border: "3px dashed black",
   borderRadius: "15px",
-  margin: "5rem",
+  margin: "0rem 2rem 2rem 2rem",
 });
 
 const contractFnContainer = css({
@@ -66,11 +66,40 @@ const contractFnContainer = css({
   height: "100%",
 });
 
+const headerContainer = css({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  flexWrap: "wrap",
+  margin: "0 0.5rem",
+  padding: "0.1rem",
+  overflow: "hidden",
+  justifyContent: "stretch",
+  marginBottom: "0.5rem",
+});
+
 const header = css({
   display: "flex",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "space-between",
+});
+
+const search = css({
+  display: "flex",
+  overflow: "hidden",
+  "@media (width <= 800px)": {
+    width: "100%",
+  },
+  "@media (width > 800px)": {
+    maxWidth: "500px",
+  },
+});
+
+const contractActions = css({
+  display: "flex",
+  flexDirection: "row",
   alignItems: "center",
-  margin: "0 1rem",
-  padding: "1rem",
 });
 
 const simulationContainer = css({
@@ -81,6 +110,7 @@ const simulationContainer = css({
 
 const checkBoxLabel = css({
   height: "1.5rem",
+  marginLeft: "-10px",
 });
 
 const loadingArtifactContainer = css({
@@ -323,125 +353,135 @@ export function ContractComponent() {
         )
       ) : (
         <div css={contractFnContainer}>
-          <div css={header}>
-            <Typography variant="h2" css={{ marginRight: "4rem" }}>
-              {contractArtifact.name}
-            </Typography>
-
-            <FormGroup>
-              <Input
-                type="text"
-                placeholder="Search function"
-                value={filters.searchTerm}
-                onChange={(e) =>
-                  setFilters({ ...filters, searchTerm: e.target.value })
-                }
-                endAdornment={
-                  <InputAdornment position="end">
-                    <FindInPageIcon />
-                  </InputAdornment>
-                }
-              />
-              <div
-                css={{
-                  display: "flex",
-                  flexDirection: "row",
-                  marginTop: "0.5rem",
-                }}
-              >
-                <FormControlLabel
-                  css={checkBoxLabel}
-                  control={
-                    <Checkbox
-                      checked={filters.private}
-                      onChange={(e) =>
-                        setFilters({ ...filters, private: e.target.checked })
-                      }
-                    />
-                  }
-                  label="Private"
-                />
-                <FormControlLabel
-                  css={checkBoxLabel}
-                  control={
-                    <Checkbox
-                      checked={filters.public}
-                      onChange={(e) =>
-                        setFilters({ ...filters, public: e.target.checked })
-                      }
-                    />
+          <div css={headerContainer}>
+            <div css={header}>
+              <Typography variant="h3" css={{ marginRight: "0.5rem" }}>
+                {contractArtifact.name}
+              </Typography>
+              {!currentContract && wallet && (
+                <div css={contractActions}>
+                  <Button
+                    variant="contained"
+                    size="small"
+                    css={{ marginRight: "0.5rem" }}
+                    onClick={() => setOpenDeployContractDialog(true)}
+                  >
+                    Deploy
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="contained"
+                    onClick={() => setOpenRegisterContractDialog(true)}
+                  >
+                    Register
+                  </Button>
+                  <DeployContractDialog
+                    contractArtifact={contractArtifact}
+                    open={openDeployContractDialog}
+                    onClose={handleContractCreation}
+                  />
+                  <RegisterContractDialog
+                    contractArtifact={contractArtifact}
+                    open={openRegisterContractDialog}
+                    onClose={handleContractCreation}
+                  />
+                </div>
+              )}
+              {currentContract && (
+                <div css={contractActions}>
+                  <Typography color="text.secondary">
+                    {formatFrAsString(currentContract.address.toString())}
+                  </Typography>
+                  <CopyToClipboardButton
+                    disabled={false}
+                    data={currentContract.address.toString()}
+                  />
+                  <IconButton
+                    onClick={(e) => {
+                      setCurrentContractAddress(null);
+                      setCurrentContract(null);
+                      setContractArtifact(null);
+                    }}
+                  >
+                    <ClearIcon />
+                  </IconButton>
+                </div>
+              )}
+            </div>
+            <div css={search}>
+              <FormGroup sx={{ width: "100%" }}>
+                <Input
+                  type="text"
+                  fullWidth
+                  placeholder="Search function"
+                  value={filters.searchTerm}
+                  onChange={(e) =>
+                    setFilters({ ...filters, searchTerm: e.target.value })
                   }
-                  label="Public"
-                />
-                <FormControlLabel
-                  css={checkBoxLabel}
-                  control={
-                    <Checkbox
-                      checked={filters.unconstrained}
-                      onChange={(e) =>
-                        setFilters({
-                          ...filters,
-                          unconstrained: e.target.checked,
-                        })
-                      }
-                    />
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <FindInPageIcon />
+                    </InputAdornment>
                   }
-                  label="Unconstrained"
-                />
-              </div>
-            </FormGroup>
-            <div css={{ flexGrow: 1 }}></div>
-            {!currentContract && wallet && (
-              <>
-                <Button
-                  variant="contained"
-                  css={{ marginRight: "1rem" }}
-                  onClick={() => setOpenDeployContractDialog(true)}
-                >
-                  Deploy
-                </Button>
-                <Button
-                  variant="contained"
-                  onClick={() => setOpenRegisterContractDialog(true)}
-                >
-                  Register
-                </Button>
-                <DeployContractDialog
-                  contractArtifact={contractArtifact}
-                  open={openDeployContractDialog}
-                  onClose={handleContractCreation}
-                />
-                <RegisterContractDialog
-                  contractArtifact={contractArtifact}
-                  open={openRegisterContractDialog}
-                  onClose={handleContractCreation}
                 />
-              </>
-            )}
-            {currentContract && (
-              <>
-                <Typography color="text.secondary">
-                  {formatFrAsString(currentContract.address.toString())}
-                </Typography>
-                <CopyToClipboardButton
-                  disabled={false}
-                  data={currentContract.address.toString()}
-                />
-                <IconButton
-                  onClick={(e) => {
-                    setCurrentContractAddress(null);
-                    setCurrentContract(null);
-                    setContractArtifact(null);
+                <div
+                  css={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginTop: "0.5rem",
+                    width: "100%",
                   }}
                 >
-                  <ClearIcon />
-                </IconButton>
-              </>
-            )}
+                  <FormControlLabel
+                    css={checkBoxLabel}
+                    control={
+                      <Checkbox
+                        sx={{ paddingRight: 0 }}
+                        checked={filters.private}
+                        onChange={(e) =>
+                          setFilters({ ...filters, private: e.target.checked })
+                        }
+                      />
+                    }
+                    label="Private"
+                  />
+                  <FormControlLabel
+                    css={checkBoxLabel}
+                    control={
+                      <Checkbox
+                        sx={{ padding: 0 }}
+                        checked={filters.public}
+                        onChange={(e) =>
+                          setFilters({ ...filters, public: e.target.checked })
+                        }
+                      />
+                    }
+                    label="Public"
+                  />
+                  <FormControlLabel
+                    css={checkBoxLabel}
+                    control={
+                      <Checkbox
+                        sx={{ padding: 0 }}
+                        checked={filters.unconstrained}
+                        onChange={(e) =>
+                          setFilters({
+                            ...filters,
+                            unconstrained: e.target.checked,
+                          })
+                        }
+                      />
+                    }
+                    label="Unconstrained"
+                  />
+                </div>
+              </FormGroup>
+            </div>
           </div>
           {contractArtifact.functions
             .filter(
               (fn) =>
+                !fn.isInternal &&
                 !FORBIDDEN_FUNCTIONS.includes(fn.name) &&
                 ((filters.private && fn.functionType === "private") ||
                   (filters.public && fn.functionType === "public") ||
@@ -456,7 +496,8 @@ export function ContractComponent() {
                 variant="outlined"
                 sx={{
                   backgroundColor: "primary.light",
-                  margin: "1rem",
+                  margin: "0.5rem",
+                  overflow: "hidden",
                 }}
               >
                 <CardContent sx={{ textAlign: "left" }}>
@@ -520,6 +561,7 @@ export function ContractComponent() {
                     disabled={!wallet || !currentContract || isWorking}
                     color="secondary"
                     variant="contained"
+                    size="small"
                     onClick={() => simulate(fn.name)}
                     endIcon={<PsychologyIcon />}
                   >
@@ -532,6 +574,7 @@ export function ContractComponent() {
                       isWorking ||
                       fn.functionType === "unconstrained"
                     }
+                    size="small"
                     color="secondary"
                     variant="contained"
                     onClick={() => send(fn.name)}
@@ -546,6 +589,7 @@ export function ContractComponent() {
                       isWorking ||
                       fn.functionType === "unconstrained"
                     }
+                    size="small"
                     color="secondary"
                     variant="contained"
                     onClick={() =>
@@ -557,7 +601,7 @@ export function ContractComponent() {
                     }
                     endIcon={<VpnKeyIcon />}
                   >
-                    Create authwit
+                    Authwit
                   </Button>
                 </CardActions>
               </Card>

gaztec/src/components/contract/contract.tsx

@@ -1,8 +1,10 @@
 .dropzone {
-    color: black;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+  color: black;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  text-align: center;
+}

gaztec/src/components/contract/dropzone.css

@@ -3,13 +3,40 @@ import { ContractComponent } from "../contract/contract";
 import { SidebarComponent } from "../sidebar/sidebar";
 import { useState } from "react";
 import { AztecContext } from "../../aztecEnv";
+import NoSleep from "nosleep.js";
+import { LogPanel } from "../logPanel/logPanel";
+import logoURL from "../../assets/Aztec_logo.png";
+import { Box, Drawer } from "@mui/material";
 
 const layout = css({
   display: "flex",
   flexDirection: "row",
   height: "100%",
 });
 
+const logo = css({
+  width: "100%",
+  padding: "0.5rem",
+});
+
+const collapsedDrawer = css({
+  height: "100%",
+  width: "4rem",
+  backgroundColor: "var(--mui-palette-primary-light)",
+  overflow: "hidden",
+});
+
+const noSleep = new NoSleep();
+
+function enableNoSleep() {
+  noSleep.enable();
+  document.removeEventListener("touchstart", enableNoSleep, false);
+}
+
+// Enable wake lock.
+// (must be wrapped in a user input event handler e.g. a mouse or touch handler)
+document.addEventListener("touchstart", enableNoSleep, false);
+
 export default function Home() {
   const [pxe, setPXE] = useState(null);
   const [wallet, setWallet] = useState(null);
@@ -21,6 +48,9 @@ export default function Home() {
   const [currentContract, setCurrentContract] = useState(null);
   const [currentTx, setCurrentTx] = useState(null);
   const [currentContractAddress, setCurrentContractAddress] = useState(null);
+  const [logs, setLogs] = useState([]);
+  const [logsOpen, setLogsOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   const AztecContextInitialValue = {
     pxe,
@@ -33,6 +63,12 @@ export default function Home() {
     currentTx,
     node,
     currentContractAddress,
+    logs,
+    logsOpen,
+    drawerOpen,
+    setDrawerOpen,
+    setLogsOpen,
+    setLogs,
     setAztecNode,
     setCurrentTx,
     setWalletDB,
@@ -48,7 +84,23 @@ export default function Home() {
   return (
     <div css={layout}>
       <AztecContext.Provider value={AztecContextInitialValue}>
-        <SidebarComponent />
+        <div css={collapsedDrawer} onClick={() => setDrawerOpen(!drawerOpen)}>
+          <img css={logo} src={logoURL} />
+        </div>
+        <Drawer
+          sx={{
+            "& .MuiDrawer-paper": {
+              height: "100%",
+              width: "340px",
+            },
+          }}
+          onClose={() => setDrawerOpen(false)}
+          variant="temporary"
+          open={drawerOpen}
+        >
+          <SidebarComponent />
+        </Drawer>
+        <LogPanel />
         <ContractComponent />
       </AztecContext.Provider>
     </div>

gaztec/src/components/home/home.tsx

@@ -0,0 +1,168 @@
+import { css, Global } from "@emotion/react";
+import { AztecContext } from "../../aztecEnv";
+import { useContext, useState } from "react";
+import {
+  CircularProgress,
+  CssBaseline,
+  Fab,
+  styled,
+  SwipeableDrawer,
+  Typography,
+} from "@mui/material";
+import ArticleIcon from "@mui/icons-material/Article";
+
+const Root = styled("div")(({ theme }) => ({
+  height: "100%",
+  ...theme.applyStyles("dark", {
+    backgroundColor: theme.palette.background.default,
+  }),
+}));
+
+const StyledBox = styled("div")(({ theme }) => ({
+  backgroundColor: "#fff",
+  ...theme.applyStyles("dark", {
+    backgroundColor: "var(--mui-palette-primary)",
+  }),
+}));
+
+const Puller = styled("div")(({ theme }) => ({
+  width: 30,
+  height: 6,
+  backgroundColor: "var(--mui-palette-primary-light)",
+  borderRadius: 3,
+  position: "absolute",
+  top: 8,
+  left: "calc(50% - 20px)",
+  ...theme.applyStyles("dark", {
+    backgroundColor: "var(--mui-palette-primary-dark)",
+  }),
+}));
+
+const logContainer = css({
+  display: "flex",
+  flexDirection: "row",
+  backgroundColor: "var(--mui-palette-primary-light)",
+  margin: "0.1rem",
+  padding: "0.1rem 0.25rem",
+  borderRadius: "0.5rem",
+});
+
+const logPrefix = css({
+  width: "8rem",
+  minWidth: "8rem",
+  overflow: "hidden",
+});
+
+const logContent = css({
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  flexGrow: 1,
+  overflow: "hidden",
+  ":hover": css({
+    whiteSpace: "unset",
+    textOverflow: "unset",
+    wordWrap: "break-word",
+  }),
+});
+
+const logTimestamp = css({});
+
+const safeStringify = (obj: any) =>
+  JSON.stringify(obj, (_, v) => (typeof v === "bigint" ? v.toString() : v));
+
+const drawerBleeding = 56;
+
+export function LogPanel() {
+  const { logs, logsOpen, setLogsOpen } = useContext(AztecContext);
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setLogsOpen(newOpen);
+  };
+  return (
+    <>
+      <Root>
+        <CssBaseline />
+        <Global
+          styles={{
+            ".MuiDrawer-root > .MuiPaper-root": {
+              height: `calc(50% - ${drawerBleeding}px)`,
+              overflow: "visible",
+            },
+          }}
+        />
+        <SwipeableDrawer
+          anchor="bottom"
+          open={logsOpen}
+          onClose={toggleDrawer(false)}
+          onOpen={toggleDrawer(true)}
+          swipeAreaWidth={drawerBleeding}
+          disableSwipeToOpen={false}
+          ModalProps={{
+            keepMounted: true,
+          }}
+        >
+          <StyledBox
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              position: "absolute",
+              top: -drawerBleeding,
+              borderTopLeftRadius: 8,
+              borderTopRightRadius: 8,
+              visibility: "visible",
+              right: 0,
+              left: 0,
+              alignItems: "center",
+            }}
+          >
+            <Puller />
+            <Typography sx={{ p: 2, color: "text.secondary" }}>
+              {logs.length}&nbsp;logs
+            </Typography>
+          </StyledBox>
+          <StyledBox sx={{ px: 0.5, height: "100%", overflow: "auto" }}>
+            {logs.map((log, index) => (
+              <div key={`${log.timestamp}-${log.message}`} css={logContainer}>
+                <div css={logPrefix}>
+                  <Typography variant="subtitle2">
+                    {log.prefix}:&nbsp;
+                  </Typography>
+                </div>
+                <div css={logContent}>
+                  <Typography variant="body2" sx={{ fontSize: "0.85rem" }}>
+                    {log.message}&nbsp;
+                    <span css={{ fontStyle: "italic", fontSize: "0.75rem" }}>
+                      {safeStringify(log.data)}
+                    </span>
+                  </Typography>
+                </div>
+                <div css={logTimestamp}>
+                  <Typography sx={{ marginLeft: "1rem" }} variant="body2">
+                    +
+                    {log.timestamp -
+                      (logs[index + 1]?.timestamp ?? log.timestamp)}
+                    ms
+                  </Typography>
+                </div>
+              </div>
+            ))}
+          </StyledBox>
+        </SwipeableDrawer>
+      </Root>
+      <Fab
+        sx={{
+          position: "absolute",
+          bottom: "5rem",
+          right: "1rem",
+          "@media (width <= 800px)": {
+            visibility: "hidden",
+          },
+        }}
+        color="secondary"
+        onClick={toggleDrawer(true)}
+      >
+        <ArticleIcon />
+      </Fab>
+    </>
+  );
+}

gaztec/src/components/logPanel/logPanel.tsx

@@ -0,0 +1,100 @@
+import { css } from "@emotion/react";
+import { useContext, useEffect, useState } from "react";
+import { AztecContext } from "../../../aztecEnv";
+import { Typography } from "@mui/material";
+import {
+  convertFromUTF8BufferAsString,
+  formatFrAsString,
+} from "../../../utils/conversion";
+import { ContractFunctionInteractionTx } from "../../../utils/txs";
+import { TxHash } from "@aztec/aztec.js";
+
+const txPanel = css({
+  width: "100%",
+  backgroundColor: "var(--mui-palette-primary-main)",
+  maxHeight: "30vh",
+  overflowY: "auto",
+  borderRadius: "0.5rem",
+});
+
+const txData = css({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: "0.5rem",
+  backgroundColor: "var(--mui-palette-primary-light)",
+  borderRadius: "0.5rem",
+  margin: "0.5rem",
+});
+
+export function TxsPanel() {
+  const [transactions, setTransactions] = useState([]);
+
+  const { currentTx, currentContractAddress, walletDB } =
+    useContext(AztecContext);
+
+  useEffect(() => {
+    const refreshTransactions = async () => {
+      const txsPerContract = await walletDB.retrieveTxsPerContract(
+        currentContractAddress
+      );
+      const txHashes = txsPerContract.map((txHash) =>
+        TxHash.fromString(convertFromUTF8BufferAsString(txHash))
+      );
+      const txs: ContractFunctionInteractionTx[] = await Promise.all(
+        txHashes.map(async (txHash) => {
+          const txData = await walletDB.retrieveTxData(txHash);
+          return {
+            contractAddress: currentContractAddress,
+            txHash: txData.txHash,
+            status: convertFromUTF8BufferAsString(txData.status),
+            fnName: convertFromUTF8BufferAsString(txData.fnName),
+            date: parseInt(convertFromUTF8BufferAsString(txData.date)),
+          } as ContractFunctionInteractionTx;
+        })
+      );
+      txs.sort((a, b) => (b.date >= a.date ? -1 : 1));
+      if (
+        currentTx &&
+        currentTx.contractAddress === currentContractAddress &&
+        (!currentTx.txHash ||
+          !txs.find((tx) => tx.txHash.equals(currentTx.txHash)))
+      ) {
+        txs.unshift(currentTx);
+      }
+      setTransactions(txs);
+    };
+    if (currentContractAddress && walletDB) {
+      refreshTransactions();
+    } else {
+      setTransactions([]);
+    }
+  }, [currentContractAddress, currentTx]);
+
+  return (
+    <div css={txPanel}>
+      {transactions.map((tx) => (
+        <div css={txData} key={tx.txHash ?? ""}>
+          <div css={{ display: "flex" }}>
+            <Typography variant="body2">
+              {tx.txHash ? formatFrAsString(tx.txHash.toString()) : "()"}
+              &nbsp;-&nbsp;
+            </Typography>
+            <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
+              {tx.receipt
+                ? tx.receipt.status.toUpperCase()
+                : tx.status.toUpperCase()}
+              &nbsp;
+              {tx.receipt && tx.receipt.status === "error"
+                ? tx.receipt.error
+                : tx.error}
+            </Typography>
+          </div>
+          <Typography variant="body2">
+            {tx.fnName}@{formatFrAsString(tx.contractAddress.toString())}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}

gaztec/src/components/sidebar/components/txsPanel.tsx

@@ -3,38 +3,30 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
-import { AztecEnv, AztecContext } from "../../aztecEnv";
+import { AztecEnv, AztecContext, WebLogger } from "../../aztecEnv";
 import { createStore } from "@aztec/kv-store/indexeddb";
-import {
-  AccountWalletWithSecretKey,
-  Fr,
-  TxHash,
-  createLogger,
-  AztecAddress,
-} from "@aztec/aztec.js";
+import { AccountWalletWithSecretKey, Fr, AztecAddress } from "@aztec/aztec.js";
 import { WalletDB } from "../../utils/storage";
 import { useContext, useEffect, useState } from "react";
 import { CreateAccountDialog } from "./components/createAccountDialog";
 import { getSchnorrAccount } from "@aztec/accounts/schnorr";
 import AddIcon from "@mui/icons-material/Add";
-import logoURL from "../../assets/Aztec_logo.png";
 import { Button, Divider, Typography } from "@mui/material";
 import {
   formatFrAsString,
   parseAliasedBuffersAsString,
 } from "../../utils/conversion";
-import { convertFromUTF8BufferAsString } from "../../utils/conversion";
-import { ContractFunctionInteractionTx } from "../../utils/txs";
 import ContactsIcon from "@mui/icons-material/Contacts";
 import { CopyToClipboardButton } from "../common/copyToClipboardButton";
 import { AddSendersDialog } from "./components/addSenderDialog";
 import { deriveSigningKey } from "@aztec/circuits.js/keys";
+import { TxsPanel } from "./components/txsPanel";
 
 const container = css({
   display: "flex",
   flexDirection: "column",
   height: "100%",
-  width: "25vw",
+  width: "100%",
   backgroundColor: "var(--mui-palette-primary-light)",
   overflow: "hidden",
   padding: "0 0.5rem",
@@ -57,30 +49,6 @@ const header = css({
   marginBottom: "1rem",
 });
 
-const logo = css({
-  height: "90%",
-  margin: "0.5rem 1rem 0rem 0rem",
-});
-
-const txPanel = css({
-  marginBottom: "0.5rem",
-  width: "100%",
-  backgroundColor: "var(--mui-palette-primary-main)",
-  maxHeight: "30vh",
-  overflowY: "auto",
-  borderRadius: "0.5rem",
-});
-
-const txData = css({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  padding: "0.5rem",
-  backgroundColor: "var(--mui-palette-primary-light)",
-  borderRadius: "0.5rem",
-  margin: "0.5rem",
-});
-
 const NETWORKS = [
   {
     nodeURL: "http://localhost:8080",
@@ -99,17 +67,17 @@ export function SidebarComponent() {
     setWallet,
     setCurrentContractAddress,
     setAztecNode,
-    currentTx,
+    setLogs,
     currentContractAddress,
     wallet,
     walletDB,
     nodeURL,
     isPXEInitialized,
     pxe,
   } = useContext(AztecContext);
+  const [changingNetworks, setChangingNetworks] = useState(false);
   const [accounts, setAccounts] = useState([]);
   const [contracts, setContracts] = useState([]);
-  const [transactions, setTransactions] = useState([]);
   const [openCreateAccountDialog, setOpenCreateAccountDialog] = useState(false);
   const [openAddSendersDialog, setOpenAddSendersDialog] = useState(false);
 
@@ -134,15 +102,17 @@ export function SidebarComponent() {
   };
 
   const handleNetworkChange = async (event: SelectChangeEvent) => {
+    setChangingNetworks(true);
     setPXEInitialized(false);
     const nodeURL = event.target.value;
     setNodeURL(nodeURL);
     const node = await AztecEnv.connectToNode(nodeURL);
     setAztecNode(node);
-    const pxe = await AztecEnv.initPXE(node);
+    const pxe = await AztecEnv.initPXE(node, setLogs);
     const rollupAddress = (await pxe.getNodeInfo()).l1ContractAddresses
       .rollupAddress;
-    const walletLogger = createLogger("wallet:data:indexeddb");
+    const walletLogger =
+      WebLogger.getInstance().createLogger("wallet:data:idb");
     const walletDBStore = await createStore(
       `wallet-${rollupAddress}`,
       { dataDirectory: "wallet", dataStoreMapSizeKB: 2e10 },
@@ -153,6 +123,7 @@ export function SidebarComponent() {
     setPXE(pxe);
     setWalletDB(walletDB);
     setPXEInitialized(true);
+    setChangingNetworks(false);
   };
 
   useEffect(() => {
@@ -175,44 +146,6 @@ export function SidebarComponent() {
     }
   }, [wallet, walletDB, pxe]);
 
-  useEffect(() => {
-    const refreshTransactions = async () => {
-      const txsPerContract = await walletDB.retrieveTxsPerContract(
-        currentContractAddress
-      );
-      const txHashes = txsPerContract.map((txHash) =>
-        TxHash.fromString(convertFromUTF8BufferAsString(txHash))
-      );
-      const txs: ContractFunctionInteractionTx[] = await Promise.all(
-        txHashes.map(async (txHash) => {
-          const txData = await walletDB.retrieveTxData(txHash);
-          return {
-            contractAddress: currentContractAddress,
-            txHash: txData.txHash,
-            status: convertFromUTF8BufferAsString(txData.status),
-            fnName: convertFromUTF8BufferAsString(txData.fnName),
-            date: parseInt(convertFromUTF8BufferAsString(txData.date)),
-          } as ContractFunctionInteractionTx;
-        })
-      );
-      txs.sort((a, b) => (b.date >= a.date ? -1 : 1));
-      if (
-        currentTx &&
-        currentTx.contractAddress === currentContractAddress &&
-        (!currentTx.txHash ||
-          !txs.find((tx) => tx.txHash.equals(currentTx.txHash)))
-      ) {
-        txs.unshift(currentTx);
-      }
-      setTransactions(txs);
-    };
-    if (currentContractAddress && walletDB) {
-      refreshTransactions();
-    } else {
-      setTransactions([]);
-    }
-  }, [currentContractAddress, currentTx]);
-
   const handleAccountChange = async (event: SelectChangeEvent) => {
     if (event.target.value == "") {
       return;
@@ -273,7 +206,6 @@ export function SidebarComponent() {
   return (
     <div css={container}>
       <div css={header}>
-        <img css={logo} src={logoURL} />
         <Typography
           variant="h1"
           sx={{ fontSize: "65px", padding: 0, marginTop: "0.5rem" }}
@@ -288,6 +220,7 @@ export function SidebarComponent() {
           fullWidth
           value={nodeURL}
           label="Network"
+          disabled={changingNetworks}
           onChange={handleNetworkChange}
         >
           {NETWORKS.map((network) => (
@@ -373,30 +306,7 @@ export function SidebarComponent() {
       <div css={{ flex: "1 0 auto", margin: "auto" }} />
       <Typography variant="overline">Transactions</Typography>
       <Divider />
-      <div css={txPanel}>
-        {transactions.map((tx) => (
-          <div css={txData} key={tx.txHash ?? ""}>
-            <div css={{ display: "flex" }}>
-              <Typography variant="body2">
-                {tx.txHash ? formatFrAsString(tx.txHash.toString()) : "()"}
-                &nbsp;-&nbsp;
-              </Typography>
-              <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
-                {tx.receipt
-                  ? tx.receipt.status.toUpperCase()
-                  : tx.status.toUpperCase()}
-                &nbsp;
-                {tx.receipt && tx.receipt.status === "error"
-                  ? tx.receipt.error
-                  : tx.error}
-              </Typography>
-            </div>
-            <Typography variant="body2">
-              {tx.fnName}@{formatFrAsString(tx.contractAddress.toString())}
-            </Typography>
-          </div>
-        ))}
-      </div>
+      <TxsPanel />
       <CreateAccountDialog
         open={openCreateAccountDialog}
         onClose={handleAccountCreation}

gaztec/src/components/sidebar/sidebar.tsx

@@ -52,7 +52,8 @@ export default {
     new CopyPlugin({
       patterns: [
         {
-          context: '../../barretenberg/ts/dest/browser',
+          // createRequire resolves the cjs version, so we need to go up one level
+          context: resolve(require.resolve('@aztec/bb.js'), '../../browser'),
           from: '*.gz',
         },
       ],

gaztec/yarn.lock

@@ -38,6 +38,7 @@ function build {
         fi
     esac
 
+    denoise 'cd aztec.js && yarn build:web'
     denoise 'cd end-to-end && yarn build:web'
 
     # Upload common patterns for artifacts: dest, fixtures, build, artifacts, generated

yarn-project/aztec.js/webpack.config.js

@@ -46,9 +46,7 @@ function generateImportFunction() {
     })
     .map(artifactName => {
       return `case '${artifactName}': {
-        const { default: compiledCircuit } = await import(\`../artifacts/${artifactName}.json\`, {
-          assert: { type: 'json' },
-        });
+        const { default: compiledCircuit } = await import(\"../artifacts/${artifactName}.json\");
         return compiledCircuit as NoirCompiledCircuit;
       }`;
     });

yarn-project/bootstrap.sh

@@ -12,7 +12,7 @@
     "format": "yarn prettier --cache -w .",
     "test": "RAYON_NUM_THREADS=4 FORCE_COLOR=true yarn workspaces foreach -A --exclude @aztec/aztec3-packages --exclude @aztec/prover-client -p -v run test --config=../jest.root.config.js",
     "build": "FORCE_COLOR=true yarn workspaces foreach -A --parallel --topological-dev --verbose --exclude @aztec/aztec3-packages --exclude @aztec/docs run build",
-    "build:fast": "cd foundation && yarn build && cd ../l1-artifacts && yarn build && cd ../circuits.js && yarn build && cd ../aztec.js && yarn build && cd .. && yarn generate && tsc -b",
+    "build:fast": "cd foundation && yarn build && cd ../l1-artifacts && yarn build && cd ../circuits.js && yarn build && cd .. && yarn generate && tsc -b",
     "build:dev": "./watch.sh",
     "generate": "FORCE_COLOR=true yarn workspaces foreach -A --parallel --topological-dev --verbose run generate",
     "clean": "yarn workspaces foreach -A -p -v run clean"

yarn-project/noir-protocol-circuits-types/src/scripts/generate_client_artifacts_helper.ts

@@ -100,10 +100,13 @@ export class PXEService implements PXE {
     private proofCreator: PrivateKernelProver,
     private simulationProvider: SimulationProvider,
     config: PXEServiceConfig,
-    logSuffix?: string,
+    loggerOrSuffix?: string | Logger,
   ) {
-    this.log = createLogger(logSuffix ? `pxe:service:${logSuffix}` : `pxe:service`);
-    this.synchronizer = new Synchronizer(node, db, tipsStore, config, logSuffix);
+    this.log =
+      !loggerOrSuffix || typeof loggerOrSuffix === 'string'
+        ? createLogger(loggerOrSuffix ? `pxe:service:${loggerOrSuffix}` : `pxe:service`)
+        : loggerOrSuffix;
+    this.synchronizer = new Synchronizer(node, db, tipsStore, config, loggerOrSuffix);
     this.contractDataOracle = new ContractDataOracle(db);
     this.simulator = getAcirSimulator(db, node, keyStore, this.simulationProvider, this.contractDataOracle);
     this.packageVersion = getPackageInfo().version;

yarn-project/package.json

@@ -27,9 +27,12 @@ export class Synchronizer implements L2BlockStreamEventHandler {
     private db: PxeDatabase,
     private l2TipsStore: L2TipsStore,
     config: Partial<Pick<PXEConfig, 'l2StartingBlock'>> = {},
-    logSuffix?: string,
+    loggerOrSuffix?: string | Logger,
   ) {
-    this.log = createLogger(logSuffix ? `pxe:synchronizer:${logSuffix}` : 'pxe:synchronizer');
+    this.log =
+      !loggerOrSuffix || typeof loggerOrSuffix === 'string'
+        ? createLogger(loggerOrSuffix ? `pxe:synchronizer:${loggerOrSuffix}` : `pxe:synchronizer`)
+        : loggerOrSuffix;
     this.blockStream = this.createBlockStream(config);
   }