From e2280cd4878c7f14cc3afc3207a7a5883adbbffe Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Wed, 4 Oct 2023 16:27:27 -0400 Subject: [PATCH 1/6] add detail --- docs/noir_js/noir_js.md | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/docs/noir_js/noir_js.md b/docs/noir_js/noir_js.md index 0eb00ec..a460921 100644 --- a/docs/noir_js/noir_js.md +++ b/docs/noir_js/noir_js.md @@ -1,16 +1,7 @@ --- title: Noir JS -description: - Learn how to use noir js to use Noir in a Typescript or Javascript environment -keywords: - [ - Noir project, - javascript, - typescript, - node.js, - browser, - react - ] +description: Learn how to use noir js to use Noir in a Typescript or Javascript environment +keywords: [Noir project, javascript, typescript, node.js, browser, react] --- Noir JS are a set of typescript libraries that make it easy to use Noir on your dapp, webapp, node.js server, website, etc. @@ -18,9 +9,10 @@ Noir JS are a set of typescript libraries that make it easy to use Noir on your It is composed of two major elements: - Noir -- Backend +- Backend proving system + Your only concern should be to write Noir. Noir.js will work out-of-the box and abstract all the components, such as the ACVM and others. ## Barretenberg From 24334113fe4d4cab395ff8119bccf4611364a31c Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Wed, 4 Oct 2023 16:27:38 -0400 Subject: [PATCH 2/6] fmt backend ref --- docs/noir_js/reference/01_bb_backend.md | 159 ++++++++++-------------- 1 file changed, 63 insertions(+), 96 deletions(-) diff --git a/docs/noir_js/reference/01_bb_backend.md b/docs/noir_js/reference/01_bb_backend.md index 75d0bfa..271f8fe 100644 --- a/docs/noir_js/reference/01_bb_backend.md +++ b/docs/noir_js/reference/01_bb_backend.md @@ -11,41 +11,38 @@ keywords: browser, class, reference, - noir_js + noir_js, ] --- ## Table of Contents - [Constructor](#constructor) -- [instantiate Method](#instantiate) -- [generateFinalProof Method](#generatefinalproof) -- [generateIntermediateProof Method](#generateintermediateproof) -- [generateProof Method](#generateproof) -- [generateIntermediateProofArtifacts Method](#generateintermediateproofartifacts) -- [verifyFinalProof Method](#verifyfinalproof) -- [verifyIntermediateProof Method](#verifyintermediateproof) -- [verifyProof Method](#verifyproof) -- [destroy Method](#destroy) - -## Constructor +- [generateFinalProof](#generatefinalproof) +- [generateIntermediateProof](#generateintermediateproof) +- [generateProof](#generateproof) +- [generateIntermediateProofArtifacts](#generateintermediateproofartifacts) +- [verifyFinalProof](#verifyfinalproof) +- [verifyIntermediateProof](#verifyintermediateproof) +- [verifyProof](#verifyproof) +- [destroy](#destroy) + +## `constructor` The `constructor` is a method used to create and initialize objects created within the `BarretenbergBackend` class. In this class, you should pass at least one argument for the `circuit`. ### Syntax ```js -constructor(acirCircuit, numberOfThreads = 1) +constructor(acirCircuit, (numberOfThreads = 1)); ``` ### Parameters -- `acirCircuit` - type: Object - A circuit represented in a `json` format, containing the ABI and bytecode Tipically obtained by running [`nargo compile`](../../nargo/01_commands.md). This is the same circuit expected to be passed to [the Noir class](02_noirjs.md) -- `numberOfThreads` - Number, (optional) - The number of threads to be used by the backend. Defaults to 1. +| Parameter | Type | Description | +| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `acirCircuit` | Object | A circuit represented in a `json` format, containing the ABI and bytecode Tipically obtained by running [`nargo compile`](../../nargo/01_commands.md). This is the same circuit expected to be passed to [the Noir class](02_noirjs.md) | +| `numberOfThreads` | Number (optional) | The number of threads to be used by the backend. Defaults to 1. | ### Usage @@ -53,26 +50,6 @@ constructor(acirCircuit, numberOfThreads = 1) const backend = new BarretenbergBackend(acirCircuit); ``` -## instantiate - -This async method is called by the Noir class. It allocates resources, decompresses the bytecode, and inits the SRS. Developers can't call this method directly, as it's private. - -### Syntax - -```js -private async instantiate() -``` - -### Parameters - -This method takes no parameters. - -### Usage - -```js -await backend.instantiate(); -``` - ## generateFinalProof An async wrapper around the [generateProof](#generateproof) method that passes a `false` flag. Usually called by the Noir class. @@ -85,15 +62,15 @@ async generateFinalProof(decompressedWitness) ### Parameters -- `decompressedWitness` - type: Object - The decompressed witness for generating the final proof. +| Parameter | Type | Description | +| --------------------- | ------ | -------------------------------------------------------- | +| `decompressedWitness` | Object | The decompressed witness for generating the final proof. | ### Returns -- `proof` - type: Promise\ - An array with the byte representation of the final proof +| Return value | Type | Description | +| ------------ | -------------------- | --------------------------------------------------------- | +| `proof` | Promise | An array with the byte representation of the final proof. | ### Usage @@ -113,15 +90,15 @@ async generateIntermediateProof(witness) ### Parameters -- `witness` - type: Object - The witness for generating the intermediate proof. +| Parameter | Type | Description | +| --------- | ------ | -------------------------------------------------- | +| `witness` | Object | The witness for generating the intermediate proof. | ### Returns -- `proof` - type: Promise\ - An array with the byte representation of the intermediate proof +| Return value | Type | Description | +| ------------ | -------------------- | --------------------------------------------------------------- | +| `proof` | Promise | An array with the byte representation of the intermediate proof | ### Usage @@ -141,18 +118,16 @@ async generateProof(decompressedWitness, makeEasyToVerifyInCircuit) ### Parameters -- `decompressedWitness` - type: Object - The decompressed witness for generating the proof. -- `makeEasyToVerifyInCircuit` - type: Boolean - A flag indicating whether to generate proof components for easy verification within a circuit. +| Parameter | Type | Description | +| --------------------------- | ------- | ---------------------------------------------------------------------------------------------- | +| `decompressedWitness` | Object | The decompressed witness for generating the proof. | +| `makeEasyToVerifyInCircuit` | Boolean | A flag indicating whether to generate proof components for easy verification within a circuit. | ### Returns -- `proof` - type: Promise\ - An array with the byte representation of the proof +| Return value | Type | Description | +| ------------ | -------------------- | -------------------------------------------------- | +| `proof` | Promise | An array with the byte representation of the proof | ### Usage @@ -172,24 +147,18 @@ async generateIntermediateProofArtifacts(proof, numOfPublicInputs = 0) ### Parameters -- `proof` - type: Object - The proof object. -- `numOfPublicInputs` - type: Number (optional) - The number of public inputs in the inner proof, defaulting to 0. +| Parameter | Type | Description | +| ------------------- | ----------------- | ---------------------------------------------------------------- | +| `proof` | Object | The proof object. | +| `numOfPublicInputs` | Number (optional) | The number of public inputs in the inner proof, defaulting to 0. | ### Returns -- `proofAsFields` - type: string[] - An array of strings with the hexadecimal representation of the [Fields](../../language_concepts/data_types/00_fields.md) that make up a proof -- `vkAsFields` - type: string[] - An array of strings with the hexadecimal representation of the [Fields](../../language_concepts/data_types/00_fields.md) that make up the verification key -- `vkHash` - type: string - A pedersen hash of the verification key +| Return value | Type | Description | +| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `proofAsFields` | string[] | An array of strings with the hexadecimal representation of the [Fields](../../language_concepts/data_types/00_fields.md) that make up a proof | +| `vkAsFields` | string[] | An array of strings with the hexadecimal representation of the [Fields](../../language_concepts/data_types/00_fields.md) that make up the verification key | +| `vkHash` | string | A pedersen hash of the verification key | ### Usage @@ -209,15 +178,15 @@ async verifyFinalProof(proof) ### Parameters -- `proof` - type: Object - The proof object to verify. +| Parameter | Type | Description | +| --------- | ------ | --------------------------- | +| `proof` | Object | The proof object to verify. | ### Returns -- `verified` - type: Promise\ - A boolean for whether the proof was verified +| Return value | Type | Description | +| ------------ | ------------------ | -------------------------------------------- | +| `verified` | Promise | A boolean for whether the proof was verified | ### Usage @@ -237,15 +206,15 @@ async verifyIntermediateProof(proof) ### Parameters -- `proof` - type: Object - The intermediate proof object to verify. +| Parameter | Type | Description | +| --------- | ------ | ---------------------------------------- | +| `proof` | Object | The intermediate proof object to verify. | ### Returns -- `verified` - type: Promise\ - A boolean for whether the proof was verified +| Return value | Type | Description | +| ------------ | ------------------ | -------------------------------------------- | +| `verified` | Promise | A boolean for whether the proof was verified | ### Usage @@ -265,18 +234,16 @@ async verifyProof(proof, makeEasyToVerifyInCircuit) ### Parameters -- `proof` - type: Object - The proof object to verify. -- `makeEasyToVerifyInCircuit` - type: Boolean - A flag indicating whether the proof is intermediate or final +| Parameter | Type | Description | +| --------------------------- | ------- | ------------------------------------------------------------ | +| `proof` | Object | The proof object to verify | +| `makeEasyToVerifyInCircuit` | Boolean | A flag indicating whether the proof is intermediate or final | ### Returns -- `verified` - type: Promise\ - A boolean for whether the proof was verified +| Parameter | Type | Description | +| ---------- | ------------------ | -------------------------------------------- | +| `verified` | Promise\ | A boolean for whether the proof was verified | ### Usage From 98a5592c41c934cbe04075d65fd848437c616146 Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Wed, 4 Oct 2023 16:34:34 -0400 Subject: [PATCH 3/6] fmt --- docs/noir_js/reference/01_bb_backend.md | 18 +++--- docs/noir_js/reference/02_noirjs.md | 78 ++++++++++--------------- 2 files changed, 41 insertions(+), 55 deletions(-) diff --git a/docs/noir_js/reference/01_bb_backend.md b/docs/noir_js/reference/01_bb_backend.md index 271f8fe..446bf98 100644 --- a/docs/noir_js/reference/01_bb_backend.md +++ b/docs/noir_js/reference/01_bb_backend.md @@ -17,7 +17,7 @@ keywords: ## Table of Contents -- [Constructor](#constructor) +- [constructor](#constructor) - [generateFinalProof](#generatefinalproof) - [generateIntermediateProof](#generateintermediateproof) - [generateProof](#generateproof) @@ -50,7 +50,7 @@ constructor(acirCircuit, (numberOfThreads = 1)); const backend = new BarretenbergBackend(acirCircuit); ``` -## generateFinalProof +## `generateFinalProof` An async wrapper around the [generateProof](#generateproof) method that passes a `false` flag. Usually called by the Noir class. @@ -78,7 +78,7 @@ async generateFinalProof(decompressedWitness) const finalProof = await backend.generateFinalProof(decompressedWitness); ``` -## generateIntermediateProof +## `generateIntermediateProof` An async wrapper around the [generateProof](#generateproof) method that passes a `true` flag. It's not currently being used by the Noir class, but developers can call this method directly to use Noir's recursive features. @@ -106,7 +106,7 @@ async generateIntermediateProof(witness) const intermediateProof = await backend.generateIntermediateProof(witness); ``` -## generateProof +## `generateProof` This async method generates a proof. Takes the witness generated by ACVM, and a boolean that evaluates to `true` when the proof _is_ meant to be verified in another circuit. Not currently used by the Noir class. @@ -135,7 +135,7 @@ async generateProof(decompressedWitness, makeEasyToVerifyInCircuit) const proof = await backend.generateProof(decompressedWitness, makeEasyToVerifyInCircuit); ``` -## generateIntermediateProofArtifacts +## `generateIntermediateProofArtifacts` This async method returns the artifacts needed to verify the intermediate proof in another circuit. It's not currently being used by the Noir class, but developers can call this method directly to use Noir's recursive features. @@ -166,7 +166,7 @@ async generateIntermediateProofArtifacts(proof, numOfPublicInputs = 0) const artifacts = await backend.generateIntermediateProofArtifacts(proof, numOfPublicInputs); ``` -## verifyFinalProof +## `verifyFinalProof` An async wrapper around [verifyProof](#verifyproof) that sets the `false` flag. Usually called by the Noir class. @@ -194,7 +194,7 @@ async verifyFinalProof(proof) const isValidFinal = await backend.verifyFinalProof(proof); ``` -## verifyIntermediateProof +## `verifyIntermediateProof` An async wrapper around [verifyProof](#verifyproof) that sets the `true` flag. It's not currently being used by the Noir class, but developers can call this method directly to use Noir's recursive features. @@ -222,7 +222,7 @@ async verifyIntermediateProof(proof) const isValidIntermediate = await backend.verifyIntermediateProof(proof); ``` -## verifyProof +## `verifyProof` This async method verifies a proof. Takes the proof, and a boolean that evaluates to `true` when the proof is intermediate. @@ -251,7 +251,7 @@ async verifyProof(proof, makeEasyToVerifyInCircuit) const isValid = await backend.verifyProof(proof, makeEasyToVerifyInCircuit); ``` -## destroy +## `destroy` This method destroys the resources allocated in the [instantiate](#instantiate) method. Noir doesn't currently call this method, but it's highly recommended that developers do so in order to save resources. diff --git a/docs/noir_js/reference/02_noirjs.md b/docs/noir_js/reference/02_noirjs.md index f0f1fd3..07baf1e 100644 --- a/docs/noir_js/reference/02_noirjs.md +++ b/docs/noir_js/reference/02_noirjs.md @@ -1,54 +1,40 @@ --- title: Noir -description: - Reference to noir_js library and the Noir class -keywords: - [ - Noir project, - javascript, - typescript, - node.js, - browser, - react, - class, - reference - ] +description: Reference to noir_js library and the Noir class +keywords: [Noir project, javascript, typescript, node.js, browser, react, class, reference] --- ## Table of Contents -- [Constructor](#constructor) -- [init Method](#init) -- [generateFinalProof Method](#generatefinalproof) -- [verifyFinalProof Method](#verifyfinalproof) +- [constructor](#constructor) +- [init](#init) +- [generateFinalProof](#generatefinalproof) +- [verifyFinalProof](#verifyfinalproof) -## Constructor +## `constructor` The `constructor` is a method used to create and initialize objects created within the `Noir` class. In the `Noir` class constructor, you need to pass two parameters: `circuit` and `backend`. ### Syntax ```js -constructor(circuit,backend) +constructor(circuit, backend); ``` ### Parameters -- circuit - Type: Object - A circuit represented in a `json` format, containing the ABI and bytecode Tipically obtained by running [`nargo compile`](../../nargo/01_commands.md) - -- backend - Type: Object - A backend instance, before initialization. +| Parameter | Type | Description | +| --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `circuit` | Object | A circuit represented in a `json` format, containing the ABI and bytecode. Typically obtained by running [`nargo compile`](../../nargo/01_commands.md) | +| `backend` | Object | A backend instance, before initialization. | ### Usage ```js -const noir = new Noir(circuit, backend) +const noir = new Noir(circuit, backend); ``` -## init +## `init` This async method should be called after class instantiation. It will run processes on the ACVM, instantiate your backend, etc. @@ -65,10 +51,10 @@ This method takes no parameters ### Usage ```js -await noirInstance.init() +await noirInstance.init(); ``` -## generateFinalProof +## `generateFinalProof` This async method generates a witness and a proof given an object as input. @@ -80,25 +66,25 @@ async generateFinalproof(input) ### Parameters -- input - type: Object - An object containing the inputs to your circuit. +| Parameter | Type | Description | +| --------- | ------ | ------------------------------------------------ | +| `input` | Object | An object containing the inputs to your circuit. | ### Returns -- `proof` - type: Promise\ - An array with the byte representation of the proof +| Return value | Type | Description | +| ------------ | --------------------- | --------------------------------------------------- | +| `proof` | Promise | An array with the byte representation of the proof. | ### Usage ```js // consider the Standard Noir Example given with nargo init const input = { x: 1, y: 2 }; -noirInstance.generateProof(input) +noirInstance.generateProof(input); ``` -## verifyFinalProof +## `verifyFinalProof` This async method instantiates the verification key and verifies your proof. @@ -110,19 +96,19 @@ async verifyFinalProof(proof) ### Parameters -- proof - type: UInt8Array - The UInt8Array representation of your proof, usually obtained by calling `generateFinalProof` +| Parameter | Type | Description | +| --------- | ---------- | --------------------------------------------------------------------------------------------- | +| `proof` | Uint8Array | The Uint8Array representation of your proof, usually obtained by calling `generateFinalProof` | ### Returns -- `verified` - type: Promise\ - A boolean for whether the proof was verified +| Return value | Type | Description | +| ------------ | ------------------ | -------------------------------------------- | +| `verified` | Promise | A boolean for whether the proof was verified | ### Usage ```js -const proof = noirInstance.generateProof(input) -noirInstance.verifyFinalProof(proof) +const proof = noirInstance.generateProof(input); +noirInstance.verifyFinalProof(proof); ``` From 55b98b1532e65b8585df754a46182cd50833a06a Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Thu, 5 Oct 2023 12:20:49 -0400 Subject: [PATCH 4/6] edits, make it all 1 page --- docs/noir_js/getting_started/01_setup.md | 155 ----------- .../getting_started/01_tiny_noir_app.md | 250 ++++++++++++++++++ docs/noir_js/getting_started/02_project.md | 99 ------- 3 files changed, 250 insertions(+), 254 deletions(-) delete mode 100644 docs/noir_js/getting_started/01_setup.md create mode 100644 docs/noir_js/getting_started/01_tiny_noir_app.md delete mode 100644 docs/noir_js/getting_started/02_project.md diff --git a/docs/noir_js/getting_started/01_setup.md b/docs/noir_js/getting_started/01_setup.md deleted file mode 100644 index 65eb09a..0000000 --- a/docs/noir_js/getting_started/01_setup.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Setup -description: - Learn how to setup a new app that uses Noir to generate and verify zero-knowledge SNARK proofs in a typescript or javascript environment -keywords: [how to, guide, javascript, typescript, noir, barretenberg, zero-knowledge, proofs] ---- - -Noir JS works both on the browser and on the server, and works for both ESM and CJS module systems. In this page, we will learn how can we write a simple test and a simple webapp to verify the Standard Noir Example. - -## Before we start - -Make sure you have Node installed on your machine by opening a terminal and executing `node --version`. If you don't see a version, you should install [node](https://nodejs.org/en/download). You can also use `yarn` if you prefer that package manager. - -First of all, follow the the [Nargo guide](../../getting_started/00_nargo_installation.md) to install nargo and create a new project with `nargo new circuit`. Once there, `cd` into the `circuit` folder. You should then be able to compile your circuit into `json` format and see it inside the `target` folder: - -```bash -nargo compile -``` - -Your folder structure should look like: - -``` -| circuit -| | src -| | | main.nr -| | target -| | | circuit.json -| | Nargo.toml -``` - -## Starting a new project - -Go back to the previous folder and start a new project by running run `npm init` or `yarn create`. You can configure your project or just leave the defaults, and see a `package.json` appear in your root folder. - -## Installing dependencies - -We'll need two `npm` packages. These packages will provide us the methods we need to run and verify proofs. Let's install them: - -`npm i @noir-lang/backend_barretenberg @noir-lang/noir_js` - -To serve our page, we can use a build tool such as `vite`. Because we're gonna use some `wasm` files, we need to install a plugin as well. Run: - -`npm i --save-dev vite rollup-plugin-copy` - -Since we're on the dependency world, we may as well define a nice starting script. Vite makes it easy. Just open `package.json`, find the block "scripts" and add this just below the line with `"test" : "echo......."`: - -```json - "start": "vite --open" -``` - -If you want do build a static website, you can also add some build and preview scripts: - -```json - "build": "vite build", - "preview": "vite preview" -``` - -## Vite plugins - -Vite is great, but support from `wasm` doesn't work out-of-the-box. We're gonna write a quick plugin and use another one. Just copy and paste this into a file named `vite.config.js`. You don't need to understand it, just trust me bro. - -```js -import { defineConfig } from "vite"; -import copy from 'rollup-plugin-copy' -import fs from 'fs' -import path from "path" - -const wasmContentTypePlugin = { - name: "wasm-content-type-plugin", - configureServer(server) { - server.middlewares.use(async (req, res, next) => { - if (req.url.endsWith(".wasm")) { - res.setHeader("Content-Type", "application/wasm"); - const newPath = req.url.replace("deps", "dist"); - const targetPath = path.join(__dirname, newPath); - const wasmContent = fs.readFileSync(targetPath); - return res.end(wasmContent); - } - next(); - }); - }, -}; - -export default defineConfig(({ command }) => { - if (command === "serve") { - return { - plugins: [ - copy({ - targets: [ - { src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }, - ], - copySync: true, - hook: "buildStart" - }), - command === "serve" ? wasmContentTypePlugin : [] - ]} - } - - return {} -}); -``` - -## HTML - -Here's the simplest HTML with some terrible UI. Create a file called `index.html` and paste this: - -```html - - - - - - -

Very basic Noir app

-
-

Logs

-

Proof

-
- - -``` - -## Some good old vanilla Javascript - -Create a new file `app.js`, which is where our javascript code will live. Let's start with this code inside: - -```js -document.addEventListener('DOMContentLoaded', async () => { -}); -``` - -We can manipulate our website with a little function, so we can see our website working. Add this at the bottom and forget it exists: - -```js -function display(container, msg) { - const c = document.getElementById(container); - const p = document.createElement("p"); - p.textContent = msg; - c.appendChild(p); -} -``` - -[On the next section](./02_project.md), we're gonna Noir it! diff --git a/docs/noir_js/getting_started/01_tiny_noir_app.md b/docs/noir_js/getting_started/01_tiny_noir_app.md new file mode 100644 index 0000000..393a98f --- /dev/null +++ b/docs/noir_js/getting_started/01_tiny_noir_app.md @@ -0,0 +1,250 @@ +--- +title: Full Stack Noir App +description: Learn how to setup a new app that uses Noir to generate and verify zero-knowledge SNARK proofs in a typescript or javascript environment +keywords: [how to, guide, javascript, typescript, noir, barretenberg, zero-knowledge, proofs] +--- + +Noir JS works both on the browser and on the server, and works for both ESM and CJS module systems. In this page, we will learn how can we write a simple test and a simple web app to verify the standard Noir example. + +## Before we start + +Make sure you have Node installed on your machine by opening a terminal and executing `node --version`. If you don't see a version, you should install [node](https://nodejs.org/en/download). You can also use `yarn` if you prefer that package manager over npm (which comes with node). + +First of all, follow the the [Nargo guide](../../getting_started/00_nargo_installation.md) to install nargo and create a new project with `nargo new circuit`. Once there, `cd` into the `circuit` folder. You should then be able to compile your circuit into `json` format and see it inside the `target` folder: + +```bash +nargo compile +``` + +Your folder structure should look like: + +``` +. +└── circuit + ├── Nargo.toml + ├── src + │ └── main.nr + └── target + └── circuit.json +``` + +## Starting a new project + +Go back to the previous folder and start a new project by running run `npm init`. You can configure your project or just leave the defaults, and see a `package.json` appear in your root folder. + +## Installing dependencies + +We'll need two `npm` packages. These packages will provide us the methods we need to run and verify proofs. Let's install them: + +```bash +npm i @noir-lang/backend_barretenberg @noir-lang/noir_js +``` + +To serve our page, we can use a build tool such as `vite`. Because we're gonna use some `wasm` files, we need to install a plugin as well. Run: + +```bash +npm i --save-dev vite rollup-plugin-copy +``` + +Since we're on the dependency world, we may as well define a nice starting script. Vite makes it easy. Just open `package.json`, find the block "scripts" and add this just below the line with `"test" : "echo......."`: + +```json + "start": "vite --open" +``` + +If you want do build a static website, you can also add some build and preview scripts: + +```json + "build": "vite build", + "preview": "vite preview" +``` + +## Vite plugins + +Vite is great, but support from `wasm` doesn't work out-of-the-box. We're gonna write a quick plugin and use another one. Just copy and paste this into a file named `vite.config.js`. You don't need to understand it, just trust me bro. + +```js +import { defineConfig } from 'vite'; +import copy from 'rollup-plugin-copy'; +import fs from 'fs'; +import path from 'path'; + +const wasmContentTypePlugin = { + name: 'wasm-content-type-plugin', + configureServer(server) { + server.middlewares.use(async (req, res, next) => { + if (req.url.endsWith('.wasm')) { + res.setHeader('Content-Type', 'application/wasm'); + const newPath = req.url.replace('deps', 'dist'); + const targetPath = path.join(__dirname, newPath); + const wasmContent = fs.readFileSync(targetPath); + return res.end(wasmContent); + } + next(); + }); + }, +}; + +export default defineConfig(({ command }) => { + if (command === 'serve') { + return { + plugins: [ + copy({ + targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }], + copySync: true, + hook: 'buildStart', + }), + command === 'serve' ? wasmContentTypePlugin : [], + ], + }; + } + + return {}; +}); +``` + +## HTML + +Here's the simplest HTML with some terrible UI. Create a file called `index.html` and paste this: + +```html + + + + + + +

Very basic Noir app

+
+

Logs

+

Proof

+
+ + +``` + +## Some good old vanilla Javascript + +Create a new file `app.js`, which is where our javascript code will live. Let's start with this code inside: + +```js +document.addEventListener('DOMContentLoaded', async () => { + // here's where the magic happens +}); + +function display(container, msg) { + const c = document.getElementById(container); + const p = document.createElement('p'); + p.textContent = msg; + c.appendChild(p); +} +``` + +We can manipulate our website with this little function, so we can see our website working. + +## Adding Noir + +If you come from the previous page, your folder structure should look like this: + +```tree +├── app.js +├── circuit +│ ├── Nargo.toml +│ ├── src +│ │ └── main.nr +│ └── target +│ └── circuit.json +├── index.html +├── package.json +└── vite.config.js +``` + +You'll see other files and folders showing up (like `package-lock.json`, `yarn.lock`, `node_modules`) but you shouldn't have to care about those. + +## Importing our dependencies + +We're starting with the good stuff now. At the top of a new the typescript file, import the packages: + +```ts +import { BarretenbergBackend } from '@noir-lang/backend_barretenberg'; +import { Noir } from '@noir-lang/noir_js'; +``` + +We also need to import the `circuit` JSON file we created. If you have the suggested folder structure, you can add this line: + +```ts +import circuit from './circuit/target/circuit.json'; +``` + +## Write code + +:::note + +We're gonna be adding code inside the `document.addEventListener...etc` block: + +```js +// forget stuff here +document.addEventListener('DOMContentLoaded', async () => { + // here's where the magic happens +}); +// forget stuff here +``` + +::: + +Our dependencies exported two classes: `BarretenbergBackend` and `Noir`. Let's `init` them and add some logs, just to flex: + +```ts +const backend = new BarretenbergBackend(circuit); +const noir = new Noir(circuit, backend); + +display('logs', 'Init... ⌛'); +await noir.init(); +display('logs', 'Init... ✅'); +``` + +You're probably eager to see stuff happening, so go and run your app now! + +From your terminal, run `npm start` (or `yarn start`). If it doesn't open a browser for you, just visit `localhost:5173`. You'll see your app with the two logs: + +![Getting Started 0](./../../../static/img/noir_getting_started_0.png) + +## Proving + +Now we're ready to prove stuff! Let's feed some inputs to our circuit and calculate the proof: + +```js +const input = { x: 1, y: 2 }; +display('logs', 'Generating proof... ⌛'); +const proof = await noir.generateFinalProof(input); +display('logs', 'Generating proof... ✅'); +display('results', proof); +``` + +Save your doc and vite should refresh your page automatically. On a modern laptop, proof will generate in less than 100ms, and you'll see this: + +![Getting Started 0](./../../../static/img/noir_getting_started_1.png) + +If you're human, you shouldn't be able to understand anything on the "proof" box. That's OK. We like you, human. + +In any case, this means your proof was generated! But you shouldn't trust me just yet. Add these lines to see it being verified: + +```js +display('logs', 'Verifying proof... ⌛'); +const verification = await noir.verifyFinalProof(proof); +if (verification) display('logs', 'Verifying proof... ✅'); +``` + +By saving, your app will refresh and here's our complete Tiny Noir App! diff --git a/docs/noir_js/getting_started/02_project.md b/docs/noir_js/getting_started/02_project.md deleted file mode 100644 index ff589a5..0000000 --- a/docs/noir_js/getting_started/02_project.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Project -description: - Learn how to configure a new app that uses Noir and Barretenberg Backend to generate and verify zero-knowledge SNARK proofs in a typescript or javascript environment -keywords: [how to, guide, javascript, typescript, noir, barretenberg, zero-knowledge, proofs] ---- - -If you come from the previous page, your folder structure should look like this: - -``` -| circuit -| | src -| | | main.nr -| | target -| | | circuit.json -| | Nargo.toml -| package.json -| vite.config.js -| index.html -| app.js -``` - -You'll see other files and folders showing up (like `package-lock.json`, `yarn.lock`, `node_modules`) but you shouldn't have to care about those. - -## Importing our dependencies - -We're starting with the good stuff now. We want to import our two libraries. At the top of the typescript file, import them: - -```ts -import { BarretenbergBackend } from '@noir-lang/backend_barretenberg'; -import { Noir } from '@noir-lang/noir_js'; -``` - -We also need to import the `circuit` JSON file we created. If you have the suggested folder structure, you can add this line: - -```ts -import circuit from './circuit/target/circuit.json'; -``` - -## Write code - -:::note - -We're gonna be adding code inside the `document.addEventListener...etc` block: - -```js -// forget stuff here -document.addEventListener('DOMContentLoaded', async () => { - // here's where the magic happens -}) -// forget stuff here -``` - -::: - -Our dependencies exported two classes: `BarretenbergBackend` and `Noir`. Let's `init` them and add some logs, just to flex: - -```ts -const backend = new BarretenbergBackend(circuit); -const noir = new Noir(circuit, backend); - -display("logs", "Init... ⌛") -await noir.init(); -display("logs", "Init... ✅") -``` - -You're probably eager to see stuff happening, so go and run your app now! - -From your terminal, run `npm start` (or `yarn start`). If it doesn't open a browser for you, just visit `localhost:5173`. You'll see your app with the two logs: - -![Getting Started 0](./../../../static/img/noir_getting_started_0.png) - -## Proving - -Now we're ready to prove stuff! Let's feed some inputs to our circuit and calculate the proof: - -```js - const input = { x: 1, y: 2 }; - display("logs", "Generating proof... ⌛") - const proof = await noir.generateFinalProof(input); - display("logs", "Generating proof... ✅") - display("results", proof); -``` - -Save your doc and vite should refresh your page automatically. On a modern laptop, proof will generate in less than 100ms, and you'll see this: - -![Getting Started 0](./../../../static/img/noir_getting_started_1.png) - -If you're human, you shouldn't be able to understand anything on the "proof" box. That's OK. We like you, human. - -In any case, this means your proof was generated! But you shouldn't trust me just yet. Add these lines to see it being verified: - -```js - display("logs", "Verifying proof... ⌛") - const verification = await noir.verifyFinalProof(proof); - if (verification) display("logs", "Verifying proof... ✅") -``` - -By saving, your app will refresh and here's our complete Tiny Noir App! From 7de2e4a8da2de13002baebd3771b544454ffdb20 Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Thu, 5 Oct 2023 12:24:02 -0400 Subject: [PATCH 5/6] update node install to nvm --- docs/noir_js/getting_started/01_tiny_noir_app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/noir_js/getting_started/01_tiny_noir_app.md b/docs/noir_js/getting_started/01_tiny_noir_app.md index 393a98f..8d23bd1 100644 --- a/docs/noir_js/getting_started/01_tiny_noir_app.md +++ b/docs/noir_js/getting_started/01_tiny_noir_app.md @@ -8,7 +8,7 @@ Noir JS works both on the browser and on the server, and works for both ESM and ## Before we start -Make sure you have Node installed on your machine by opening a terminal and executing `node --version`. If you don't see a version, you should install [node](https://nodejs.org/en/download). You can also use `yarn` if you prefer that package manager over npm (which comes with node). +Make sure you have Node installed on your machine by opening a terminal and executing `node --version`. If you don't see a version, you should install [node](https://github.com/nvm-sh/nvm). You can also use `yarn` if you prefer that package manager over npm (which comes with node). First of all, follow the the [Nargo guide](../../getting_started/00_nargo_installation.md) to install nargo and create a new project with `nargo new circuit`. Once there, `cd` into the `circuit` folder. You should then be able to compile your circuit into `json` format and see it inside the `target` folder: From d267abf9d6e72d614ab80f7f71cb8ac53d27e77d Mon Sep 17 00:00:00 2001 From: Josh Crites Date: Thu, 5 Oct 2023 12:34:58 -0400 Subject: [PATCH 6/6] missing codeblock lang --- docs/noir_js/getting_started/01_tiny_noir_app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/noir_js/getting_started/01_tiny_noir_app.md b/docs/noir_js/getting_started/01_tiny_noir_app.md index 8d23bd1..629a88f 100644 --- a/docs/noir_js/getting_started/01_tiny_noir_app.md +++ b/docs/noir_js/getting_started/01_tiny_noir_app.md @@ -18,7 +18,7 @@ nargo compile Your folder structure should look like: -``` +```tree . └── circuit ├── Nargo.toml