feat: gaztec (#11229)

Initial version of an "everything app" that can be used to test and
benchmark Aztec.

- PXE in the browser with client proofs
- Connect to local sandbox or any network (scoped data)
- Lazy loading of most assets (think contract artifacts) and WASM (bb
still loads at start due to top-level await, but in parallel as it is
separated from the main index,js)
- Bundled by vite, 1MB compressed
- Drop any contract artifact, interpret its ABI, simulate and send
- Acts as a barebones wallet, managing auth scopes and separating
accounts
- Stores artifacts, accounts and all that's required to pick up where
you left off without having to redeploy everything (indexeddb)
- Supports basic aliasing of addresses
- Allows loading an artifact, provide the address and go (instead of
having to deploy it)
- Add senders/contact management
- Authwits


Missing: 
- Benchmarking window where simulation/proving stats are displayed


This initial PR just puts it out there so other people can use it. Next
up is hooking it up to CI and adding hard limits to bundle sizes, so we
can control if something gets into the client packages that shouldn't be
there. Both this app (that includes PXE, bb-prover, etc) and `aztec.js`
will force CI to fail if a size threshold is surpassed (CC @spalladino
@charlielye)

barretenberg/ts/src/barretenberg/index.ts

@@ -69,7 +69,7 @@ export class Barretenberg extends BarretenbergApi {
   async initSRSClientIVC(): Promise<void> {
     // crsPath can be undefined
     const crs = await Crs.new(2 ** 20 + 1, this.options.crsPath);
-    const grumpkinCrs = await GrumpkinCrs.new(2 ** 15 + 1, this.options.crsPath);
+    const grumpkinCrs = await GrumpkinCrs.new(2 ** 16 + 1, this.options.crsPath);
 
     // Load CRS into wasm global CRS state.
     // TODO: Make RawBuffer be default behavior, and have a specific Vector type for when wanting length prefixed.

boxes/boxes/vite/package.json

@@ -38,7 +38,6 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^6.0.3",
-    "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-top-level-await": "^1.4.4"
+    "vite-plugin-node-polyfills": "^0.22.0"
   }
 }

boxes/boxes/vite/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig, searchForWorkspaceRoot } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { PolyfillOptions, nodePolyfills } from "vite-plugin-node-polyfills";
-import topLevelAwait from "vite-plugin-top-level-await";
 
 // Unfortunate, but needed due to https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/81
 // Suspected to be because of the yarn workspace setup, but not sure
@@ -24,10 +23,14 @@ const nodePolyfillsFix = (options?: PolyfillOptions | undefined): Plugin => {
 // https://vite.dev/config/
 export default defineConfig({
   server: {
+    // Headers needed for bb WASM to work in multithreaded mode
     headers: {
       "Cross-Origin-Opener-Policy": "same-origin",
       "Cross-Origin-Embedder-Policy": "require-corp",
     },
+    // Allow vite to serve files from these directories, since they are symlinked
+    // These are the protocol circuit artifacts
+    // and noir WASMs.
     fs: {
       allow: [
         searchForWorkspaceRoot(process.cwd()),
@@ -40,9 +43,12 @@ export default defineConfig({
   plugins: [
     react(),
     nodePolyfillsFix({ include: ["buffer", "process", "path"] }),
-    topLevelAwait(),
   ],
   build: {
+    // Needed to support bb.js top level await until
+    // https://github.com/Menci/vite-plugin-top-level-await/pull/63 is merged
+    // and we can use the plugin again (or we get rid of TLA)
+    target: "esnext",
     rollupOptions: {
       output: {
         manualChunks(id: string) {

boxes/yarn.lock

@@ -1740,18 +1740,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-virtual@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@rollup/plugin-virtual@npm:3.0.2"
-  peerDependencies:
-    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-  peerDependenciesMeta:
-    rollup:
-      optional: true
-  checksum: 10c0/7115edb7989096d1ce334939fcf6e1ba365586b487bf61b2dd4f915386197f350db70904030342c0720fe58f5a52828975c645c4d415c1d432d9b1b6760a22ef
-  languageName: node
-  linkType: hard
-
 "@rollup/pluginutils@npm:^5.0.1":
   version: 5.1.3
   resolution: "@rollup/pluginutils@npm:5.1.3"
@@ -2115,7 +2103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core@npm:^1.7.0, @swc/core@npm:^1.7.26":
+"@swc/core@npm:^1.7.26":
   version: 1.9.3
   resolution: "@swc/core@npm:1.9.3"
   dependencies:
@@ -11967,15 +11955,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "uuid@npm:10.0.0"
-  bin:
-    uuid: dist/bin/uuid
-  checksum: 10c0/eab18c27fe4ab9fb9709a5d5f40119b45f2ec8314f8d4cf12ce27e4c6f4ffa4a6321dc7db6c515068fa373c075b49691ba969f0010bf37f44c37ca40cd6bf7fe
-  languageName: node
-  linkType: hard
-
 "uuid@npm:^8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
@@ -12037,19 +12016,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-top-level-await@npm:^1.4.4":
-  version: 1.4.4
-  resolution: "vite-plugin-top-level-await@npm:1.4.4"
-  dependencies:
-    "@rollup/plugin-virtual": "npm:^3.0.2"
-    "@swc/core": "npm:^1.7.0"
-    uuid: "npm:^10.0.0"
-  peerDependencies:
-    vite: ">=2.8"
-  checksum: 10c0/013e7b2e28632d93d04c4061187198e699064fc208a1657c100354b32da30921fa835879fc17779d5e0b074855237408da2fadd720fa0f4571137427a1efd5e3
-  languageName: node
-  linkType: hard
-
 "vite@npm:^5.0.0":
   version: 5.4.11
   resolution: "vite@npm:5.4.11"
@@ -12172,7 +12138,6 @@ __metadata:
     typescript-eslint: "npm:^8.11.0"
     vite: "npm:^6.0.3"
     vite-plugin-node-polyfills: "npm:^0.22.0"
-    vite-plugin-top-level-await: "npm:^1.4.4"
   languageName: unknown
   linkType: soft
 

gaztec/.env

@@ -0,0 +1,2 @@
+VITE_AZTEC_NODE_URL=http://localhost:8080
+VITE_LOG_LEVEL=debug

gaztec/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.yarn/*
+!.yarn/releases
+vite.config.ts.*
+*.module.css.d.ts

gaztec/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

gaztec/README.md

@@ -0,0 +1,34 @@
+# GAztec
+
+Initial version of an "everything app" that can be used to test and benchmark Aztec.
+
+  * PXE in the browser with client proofs
+  * Connect to local sandbox or any network (scoped data)
+  * Lazy loading of most assets (think contract artifacts) and WASM (bb still loads at start due to top-level await, but in parallel as it is separated from the main index,js)
+  * Bundled by vite, 1MB compressed
+  * Drop any contract artifact, interpret its ABI, simulate and send
+  * Acts as a barebones wallet, managing auth scopes and separating accounts
+  * Stores artifacts, accounts and all that's required to pick up where you left off without having to redeploy everything (indexeddb)
+  * Supports basic aliasing of addresses
+  * Allows loading an artifact, provide the address and go (instead of having to deploy it)
+  * Add senders/contact management
+  * Authwits
+
+Missing:
+
+  * Benchmarking window where simulation/proving stats are displayed
+
+## To run
+
+Dev:
+
+```
+yarn dev
+```
+
+Production:
+
+```
+yarn build
+yarn preview
+``````

gaztec/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

gaztec/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GAztec</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

gaztec/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf ./dist .tsbuildinfo",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@aztec/accounts": "link:../yarn-project/accounts",
+    "@aztec/aztec.js": "link:../yarn-project/aztec.js",
+    "@aztec/bb-prover": "link:../yarn-project/bb-prover",
+    "@aztec/circuits.js": "link:../yarn-project/circuits.js",
+    "@aztec/foundation": "link:../yarn-project/foundation",
+    "@aztec/key-store": "link:../yarn-project/key-store",
+    "@aztec/kv-store": "link:../yarn-project/kv-store",
+    "@aztec/pxe": "link:../yarn-project/pxe",
+    "@aztec/simulator": "link:../yarn-project/simulator",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.1.1",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "@mui/styles": "^6.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^6.0.7",
+    "vite-plugin-node-polyfills": "^0.22.0"
+  }
+}

gaztec/src/App.tsx

@@ -0,0 +1,15 @@
+import { Home } from "./components/home/home";
+import { Global } from "@emotion/react";
+import { ThemeProvider } from "@mui/material/styles";
+import { globalStyle, theme } from "./common.styles";
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Global styles={globalStyle}></Global>
+      <Home />
+    </ThemeProvider>
+  );
+}
+
+export default App;

gaztec/src/common.styles.tsx

@@ -0,0 +1,37 @@
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+import { css } from "@emotion/react";
+
+import { ThemeOptions, createTheme } from "@mui/material/styles";
+
+const themeOptions: ThemeOptions & { cssVariables: boolean } = {
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#646cff",
+    },
+    secondary: {
+      main: "#f50057",
+    },
+  },
+  cssVariables: true,
+};
+
+export const theme = createTheme(themeOptions);
+
+export const globalStyle = css({
+  body: {
+    margin: 0,
+    display: "flex",
+    minWidth: "100vw",
+    minHeight: "100vh",
+    background: "linear-gradient(#f6fbfc, #d8d4e7)"
+  },
+
+  "#root": {
+    width: "100%",
+  }
+});

gaztec/src/components/common/copyToClipboardButton.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { IconButton, Snackbar } from "@mui/material";
+import ContentPasteIcon from "@mui/icons-material/ContentPaste";
+
+export function CopyToClipboardButton({
+  data,
+  disabled,
+}: {
+  data: string;
+  disabled: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+    navigator.clipboard.writeText(data);
+  };
+
+  return (
+    <>
+      <IconButton disabled={disabled} onClick={handleClick} color="primary">
+        <ContentPasteIcon />
+      </IconButton>
+      <Snackbar
+        message="Copied to clipboard"
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        autoHideDuration={2000}
+        onClose={() => setOpen(false)}
+        open={open}
+      />
+    </>
+  );
+}