Aztec.js browser compatibility

.circleci/config.yml

@@ -863,6 +863,17 @@ jobs:
           name: "Test"
           command: cond_spot_run_tests end-to-end uniswap_trade_on_l1_from_l2.test.ts docker-compose-e2e-sandbox.yml
 
+  e2e-browser-sandbox:
+    docker:
+      - image: aztecprotocol/alpine-build-image
+    resource_class: small
+    steps:
+      - *checkout
+      - *setup_env
+      - run:
+          name: "Test"
+          command: cond_spot_run_tests end-to-end e2e_aztec_js_browser.test.ts docker-compose-e2e-sandbox.yml
+
   e2e-join:
     docker:
       - image: cimg/base:current
@@ -1139,6 +1150,7 @@ workflows:
       - integration-archiver-l1-to-l2: *e2e_test
       - e2e-p2p: *e2e_test
       - e2e-uniswap-sandbox: *e2e_test
+      - e2e-browser-sandbox: *e2e_test
 
       - e2e-end:
           requires:
@@ -1162,6 +1174,7 @@ workflows:
             - integration-archiver-l1-to-l2
             - e2e-p2p
             - e2e-uniswap-sandbox
+            - e2e-browser-sandbox
           <<: *defaults
 
       - deploy-dockerhub:

yarn-project/archiver/package.json

@@ -46,7 +46,7 @@
     "lodash.omit": "^4.5.0",
     "tsc-watch": "^6.0.0",
     "tslib": "^2.5.0",
-    "viem": "^1.2.5",
+    "viem": "1.4.2",
     "ws": "^8.13.0"
   },
   "devDependencies": {

yarn-project/aztec-rpc/src/aztec_rpc_http/aztec_rpc_http_server.ts

@@ -1,6 +1,6 @@
 import { AztecAddress } from '@aztec/foundation/aztec-address';
 import { Fr, Point } from '@aztec/foundation/fields';
-import { JsonRpcServer } from '@aztec/foundation/json-rpc';
+import { JsonRpcServer } from '@aztec/foundation/json-rpc/server';
 import {
   ContractData,
   ContractDeploymentTx,

yarn-project/aztec-sandbox/src/examples/zk_token_contract.ts

@@ -1,5 +1,4 @@
-import { Contract, Wallet, createAccounts, createAztecRpcClient } from '@aztec/aztec.js';
-import { AztecAddress, Fr, PrivateKey } from '@aztec/circuits.js';
+import { AztecAddress, Contract, Fr, PrivateKey, Wallet, createAccounts, createAztecRpcClient } from '@aztec/aztec.js';
 import { createDebugLogger } from '@aztec/foundation/log';
 import { SchnorrSingleKeyAccountContractAbi } from '@aztec/noir-contracts/artifacts';
 import { ZkTokenContract } from '@aztec/noir-contracts/types';
@@ -27,7 +26,6 @@ async function deployZKContract(owner: AztecAddress) {
   const receipt = await tx.getReceipt();
   const contract = await ZkTokenContract.create(receipt.contractAddress!, wallet);
   await tx.isMined();
-  await tx.getReceipt();
   logger('L2 contract deployed');
   return contract;
 }

yarn-project/aztec.js/package.json

@@ -2,7 +2,10 @@
   "name": "@aztec/aztec.js",
   "version": "0.1.0",
   "type": "module",
-  "exports": "./dest/index.js",
+  "exports": {
+    "node": "./dest/index.js",
+    "default": "./dest/main.js"
+  },
   "typedocOptions": {
     "entryPoints": [
       "./src/index.ts"
@@ -13,15 +16,17 @@
   "scripts": {
     "prepare": "node ../yarn-project-base/scripts/update_build_manifest.mjs package.json",
     "prepare:check": "node ../yarn-project-base/scripts/update_build_manifest.mjs package.json --check",
-    "build": "yarn clean && tsc -b",
+    "build": "yarn clean && tsc -b && webpack",
+    "build:web": "webpack",
     "build:dev": "tsc -b --watch",
     "clean": "rm -rf ./dest .tsbuildinfo",
     "formatting": "run -T prettier --check ./src && run -T eslint ./src",
     "formatting:fix": "run -T prettier -w ./src",
     "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules $(yarn bin jest) --passWithNoTests"
   },
   "inherits": [
-    "../package.common.json"
+    "../package.common.json",
+    "./package.local.json"
   ],
   "jest": {
     "preset": "ts-jest/presets/default-esm",
@@ -44,11 +49,21 @@
     "@types/jest": "^29.5.0",
     "@types/lodash.partition": "^4.6.0",
     "@types/node": "^18.7.23",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
     "jest": "^29.5.0",
     "jest-mock-extended": "^3.0.3",
+    "process": "^0.11.10",
+    "resolve-typescript-plugin": "^2.0.1",
+    "stream-browserify": "^3.0.0",
     "ts-jest": "^29.1.0",
+    "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.4"
+    "tty-browserify": "^0.0.1",
+    "typescript": "^5.0.4",
+    "util": "^0.12.5",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "files": [
     "dest",

yarn-project/aztec.js/package.local.json

@@ -0,0 +1,5 @@
+{
+  "scripts": {
+    "build": "yarn clean && tsc -b && webpack"
+  }
+}

yarn-project/aztec.js/src/aztec_rpc_client/aztec_rpc_client.ts

@@ -1,5 +1,5 @@
 import { AztecAddress, EthAddress, Fr, Point, PrivateKey } from '@aztec/circuits.js';
-import { createJsonRpcClient, defaultFetch } from '@aztec/foundation/json-rpc';
+import { createJsonRpcClient, defaultFetch } from '@aztec/foundation/json-rpc/client';
 import {
   AztecRPC,
   ContractData,
@@ -11,6 +11,8 @@ import {
   TxReceipt,
 } from '@aztec/types';
 
+export { mustSucceedFetch } from '@aztec/foundation/json-rpc/client';
+
 export const createAztecRpcClient = (url: string, fetch = defaultFetch): AztecRPC =>
   createJsonRpcClient<AztecRPC>(
     url,

yarn-project/aztec.js/src/contract_deployer/contract_deployer.test.ts

@@ -2,7 +2,6 @@ import { AztecAddress, EthAddress, Fr, Point } from '@aztec/circuits.js';
 import { ContractAbi, FunctionType } from '@aztec/foundation/abi';
 import { AztecRPC, PublicKey, Tx, TxHash, TxReceipt } from '@aztec/types';
 
-import { randomBytes } from 'crypto';
 import { MockProxy, mock } from 'jest-mock-extended';
 
 import { ContractDeployer } from './contract_deployer.js';
@@ -25,7 +24,7 @@ describe.skip('Contract Deployer', () => {
   };
 
   const publicKey: PublicKey = Point.random();
-  const portalContract = new EthAddress(randomBytes(EthAddress.SIZE_IN_BYTES));
+  const portalContract = EthAddress.random();
   const contractAddressSalt = Fr.random();
   const account = AztecAddress.random();
   const args = [12, 345n];

yarn-project/aztec.js/src/index.ts

@@ -9,4 +9,22 @@ export * from './contract_deployer/deploy_method.js';
 // export * from '@aztec/aztec-rpc';
 
 export { AztecAddress, EthAddress, Point, Fr } from '@aztec/circuits.js';
-export { AztecRPC } from '@aztec/types';
+export {
+  AztecRPC,
+  ContractData,
+  ContractDeploymentTx,
+  ContractPublicData,
+  DeployedContract,
+  ExecutionRequest,
+  L2BlockL2Logs,
+  NodeInfo,
+  PackedArguments,
+  PublicKey,
+  PrivateKey,
+  Tx,
+  TxExecutionRequest,
+  TxHash,
+  TxReceipt,
+  TxStatus,
+  emptyExecutionRequest,
+} from '@aztec/types';

yarn-project/aztec.js/tsconfig.dest.json

@@ -0,0 +1,17 @@
+{
+  "extends": ".",
+  "references": [
+    {
+      "path": "../circuits.js/tsconfig.dest.json"
+    },
+    {
+      "path": "../foundation/tsconfig.dest.json"
+    },
+    {
+      "path": "../types/tsconfig.dest.json"
+    }
+  ],
+  "exclude": [
+    "src/**/*.test.ts"
+  ]
+}

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

@@ -0,0 +1,74 @@
+// import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { createRequire } from 'module';
+import { dirname, resolve } from 'path';
+import path from 'path';
+import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';
+import { fileURLToPath } from 'url';
+import webpack from 'webpack';
+
+const require = createRequire(import.meta.url);
+
+export default {
+  target: 'web',
+  mode: 'production',
+  devtool: false,
+  entry: {
+    main: './src/index.ts',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.dest.json',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  output: {
+    path: resolve(dirname(fileURLToPath(import.meta.url)), './dest'),
+    filename: 'main.js',
+    library: {
+      type: 'module',
+    },
+    chunkFormat: 'module',
+  },
+  experiments: {
+    outputModule: true,
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+    }),
+    new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
+  ],
+  resolve: {
+    plugins: [new ResolveTypeScriptPlugin()],
+    alias: {
+      // All node specific code, wherever it's located, should be imported as below.
+      // Provides a clean and simple way to always strip out the node code for the web build.
+      './node/index.js': false,
+    },
+    fallback: {
+      crypto: false,
+      os: false,
+      fs: false,
+      path: false,
+      url: false,
+      worker_threads: false,
+      events: require.resolve('events/'),
+      buffer: require.resolve('buffer/'),
+      util: require.resolve('util/'),
+      stream: require.resolve('stream-browserify'),
+      string_decoder: require.resolve('string_decoder/'),
+      tty: require.resolve('tty-browserify'),
+    },
+  },
+};