Halo2 Wasm Demo

Demo

This repo demonstrates how to compile halo2 circuits into Wasm and incorporate them to a react app. It is based on the halo2 Wasm guide which in turn is based on Zordle.

Circuits

There are two simple circuits:

1. Circuit 1 - uses square_chip.rs to square the user input number
2. Circuit 2 - uses cube_chip.rs to cube the user input number

Instructions

Build

halo2 uses Rayon for parallel computations. In order to use Rayon in Wasm, the binding wasm-bindgen-rayon is required. wasm-bindgen-rayon requires setting the build-std flag in .cargo/config, which in turn require setting the build architecture target in the same file. You need to fill in the appropriate target of your computer before using this crate.

cargo build

Run

cargo run

Besides running the circuit, you can also generate the parameter file params.bin to be used in /react_app.

Test

cargo test -- --nocapture

---

React App

Instructions

Install

yarn

Build circuit wasm files into \pkg and copy to react_app\public\pkg

# from project root /halo2-wasm-demo/
wasm-pack build --target web --out-dir pkg

# remove existing wasm files
rm -rf react_app/public/pkg

# copy new pkg into /react_app/public/pkg
mkdir react_app/public/pkg
cp -a circuits/pkg/. react_app/public/pkg

Link Package (For Development)

# Remove halo2-wasm-demo from package.json so changes will be picked up right
# away during development
yarn remove halo2-wasm-demo

cd public/pkg
yarn link

cd ../..  # i.e. in /halo2-wasm-demo/react_app
yarn link halo2-wasm-demo

Add Local Package (For Release w/o publishing package to NPM)

yarn add ./public/pkg

How to run

Before running the webapp, you must generate the parameter file params.bin first in /circuits with cargo run. The generated params.bin will be automatically copied to /react_app to be used.

yarn dev  # This will reflect changes made in rust and start react app

Miscellaneous

Thread Pool Size

There is currently a bug in Chromium which will cause the prove and verify computations to be extremely slow with Apple M1 computers. Instead of using the maximum number of threads (default), a lower number is works much better (I find 4 to be the best on my M1 Pro).

This can be changed in the webapp under "Thread Pool Size".

SharedArrayBuffer

Wasm workers uses a brower feature called SharedArrayBuffer that is disabled by default for sercuity reasons. While this is enabled by default during development in yarn start, it needs to be explicitly enabled in the production HTTP server by allowing COOP (Cross Origin Opener Policy) and COEP (Cross Origin Embedder Policy). For Netlify, this is done in netlify.toml.

Apple Safari

As stated in the halo2 Book, Safari is not currently supported.