Readme updates (#17)

* Update readme with config for Vite and Next js

* Update Readme for example project

* Update Readme to library update

* Resolve indentation in readme

* Update Readme PR Fix

README.md

@@ -35,7 +35,9 @@ interface ZKState {
 const { useInitZkStore, useZKStore, useGetLatestProof } =
   createZKState<ZKState>(
     // 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"]
   );
 ```
 
-<!-- TODO: properly document functions -->
+## 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();
+        });
+      },
+    },
+  ],
+});
+```
+
+
+<!-- TODO: properly document functions -->

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