diff --git a/README.md b/README.md index 36aa96a..8e81a5b 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,9 @@ interface ZKState { const { useInitZkStore, useZKStore, useGetLatestProof } = createZKState( // replace './zkStatesWorker.ts` with the path to the previously defined web worker - new Worker(new URL("./zkStatesWorker.ts", import.meta.url)), + new Worker(new URL("./zkStatesWorker.ts", import.meta.url),{ + type:"module", + }), // zustand state definition https://github.com/pmndrs/zustand (set) => ({ @@ -48,8 +50,82 @@ const { useInitZkStore, useZKStore, useGetLatestProof } = num: state.num + 1, }; }), - }) + }), + // Define state properties that should trigger proof generation when mutated. + // You can define assertions in the Actions so that the proofs are generated based only on VALID STATE TRANSITIONS + ["num"] ); ``` - \ No newline at end of file +## Configuring your project + +ZkStates leverages SnarkyJS to enable proof generation in the browser. to enable SnarkyJS for the web, we must set the COOP and COEP headers. When using a Vite project we also need to install a plugin to enable topLevelAwait for the web worker. + +### Next.js + +Open `next.config.js` and make sure you add these two configs. + +```ts +const nextConfig = { + webpack(config) { + config.resolve.alias = { + ...config.resolve.alias, + snarkyjs: require('path').resolve('node_modules/snarkyjs') + }; + config.experiments = { ...config.experiments, topLevelAwait: true }; + return config; + }, + + async headers() { + return [ + { + source: '/(.*)', + headers: [ + { + key: 'Cross-Origin-Opener-Policy', + value: 'same-origin', + }, + { + key: 'Cross-Origin-Embedder-Policy', + value: 'require-corp', + }, + ], + }, + ]; + } +}; +``` +### Vite React.js + +add [vite-plugin-top-level-await](https://github.com/Menci/vite-plugin-top-level-await) + +```sh +# using npm +npm install vite-plugin-top-level-await + +# using yarn +yarn add vite-plugin-top-level-await +``` +After installing the Vite plugin open the `vite.config.ts` and add these two entries: + + +```ts +export default defineConfig({ + plugins: [ + topLevelAwait(), + { + name: "isolation", + configureServer(server) { + server.middlewares.use((_req, res, next) => { + res.setHeader("Cross-Origin-Opener-Policy", "same-origin"); + res.setHeader("Cross-Origin-Embedder-Policy", "require-corp"); + next(); + }); + }, + }, + ], +}); +``` + + + diff --git a/examples/tictactoe/README.md b/examples/tictactoe/README.md index 1ebe379..bdb5a4d 100644 --- a/examples/tictactoe/README.md +++ b/examples/tictactoe/README.md @@ -1,27 +1,15 @@ -# React + TypeScript + Vite +# TicTacToe Example project zkStates -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +This is an Example project that showcases the use of the zKState library. -Currently, two official plugins are available: +For every move made on the TicTacToe board a new proof is generated. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## To run the application -## Expanding the ESLint configuration +```sh +# using yarn +yarn -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +yarn dev -- Configure the top-level `parserOptions` property like this: - -```js - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, ``` - -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list