diff --git a/docs/docs/tutorials/noirjs_app.md b/docs/docs/tutorials/noirjs_app.md index 12beb476994..6446e0b2a76 100644 --- a/docs/docs/tutorials/noirjs_app.md +++ b/docs/docs/tutorials/noirjs_app.md @@ -14,9 +14,9 @@ You can find the complete app code for this guide [here](https://github.com/noir :::note -Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.19.x matches `noir_js@0.19.x`, etc. +Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.27.x matches `noir_js@0.27.x`, etc. -In this guide, we will be pinned to 0.19.4. +In this guide, we will be pinned to 0.27.0. ::: @@ -34,7 +34,7 @@ Easy enough. Onwards! ## Our project -ZK is a powerful technology. An app that doesn't reveal one of the inputs to *anyone* is almost unbelievable, yet Noir makes it as easy as a single line of code. +ZK is a powerful technology. An app that doesn't reveal one of the inputs to _anyone_ is almost unbelievable, yet Noir makes it as easy as a single line of code. In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! @@ -42,13 +42,13 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! Run: -```nargo new circuit``` +`nargo new circuit` And... That's about it. Your program is ready to be compiled and run. To compile, let's `cd` into the `circuit` folder to enter our project, and call: -```nargo compile``` +`nargo compile` This compiles our circuit into `json` format and add it to a new `target` folder. @@ -77,10 +77,55 @@ Vite is a powerful tool to generate static websites. While it provides all kinds To do this this, go back to the previous folder (`cd ..`) and create a new vite project by running `npm create vite` and choosing "Vanilla" and "Javascript". -You should see `vite-project` appear in your root folder. This seems like a good time to `cd` into it and install our NoirJS packages: +A wild `vite-project` directory should now appear in your root folder! Let's not waste any time and dive right in: ```bash -npm i @noir-lang/backend_barretenberg@0.19.4 @noir-lang/noir_js@0.19.4 +cd vite-project +``` + +### Setting Up Vite and Configuring the Project + +Before we proceed with any coding, let's get our environment tailored for Noir. We'll start by laying down the foundations with a `vite.config.js` file. This little piece of configuration is our secret sauce for making sure everything meshes well with the NoirJS libraries and other special setups we might need, like handling WebAssembly modules. Here’s how you get that going: + +#### Creating the vite.config.js + +In your freshly minted `vite-project` folder, create a new file named `vite.config.js` and open it in your code editor. Paste the following to set the stage: + +```javascript +import { defineConfig } from "vite"; +import copy from "rollup-plugin-copy"; + +export default defineConfig({ + esbuild: { + target: "esnext", + }, + optimizeDeps: { + esbuildOptions: { + target: "esnext", + }, + }, + plugins: [ + copy({ + targets: [ + { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" }, + ], + copySync: true, + hook: "buildStart", + }), + ], + server: { + port: 3000, + }, +}); +``` + +#### Install Dependencies + +Now that our stage is set, install the necessary NoirJS packages along with our other dependencies: + +```bash +npm install && npm install @noir-lang/backend_barretenberg@0.27.0 @noir-lang/noir_js@0.27.0 +npm install rollup-plugin-copy --save-dev ``` :::info @@ -99,7 +144,7 @@ At this point in the tutorial, your folder structure should look like this: #### Some cleanup -`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `index.html`, `main.js` and `package.json`. I feel lighter already. +`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `vite.config.js`, `index.html`, `main.js` and `package.json`. I feel lighter already. ![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg) @@ -139,7 +184,7 @@ Our app won't run like this, of course. We need some working HTML, at least. Let ``` -It *could* be a beautiful UI... Depending on which universe you live in. +It _could_ be a beautiful UI... Depending on which universe you live in. ## Some good old vanilla Javascript @@ -150,14 +195,14 @@ Start by pasting in this boilerplate code: ```js const setup = async () => { await Promise.all([ - import("@noir-lang/noirc_abi").then(module => - module.default(new URL("@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm", import.meta.url).toString()) + import('@noir-lang/noirc_abi').then((module) => + module.default(new URL('@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm', import.meta.url).toString()), + ), + import('@noir-lang/acvm_js').then((module) => + module.default(new URL('@noir-lang/acvm_js/web/acvm_js_bg.wasm', import.meta.url).toString()), ), - import("@noir-lang/acvm_js").then(module => - module.default(new URL("@noir-lang/acvm_js/web/acvm_js_bg.wasm", import.meta.url).toString()) - ) ]); -} +}; function display(container, msg) { const c = document.getElementById(container); @@ -169,11 +214,10 @@ function display(container, msg) { document.getElementById('submitGuess').addEventListener('click', async () => { try { // here's where love happens - } catch(err) { - display("logs", "Oh πŸ’” Wrong guess") + } catch (err) { + display('logs', 'Oh πŸ’” Wrong guess'); } }); - ``` The display function doesn't do much. We're simply manipulating our website to see stuff happening. For example, if the proof fails, it will simply log a broken heart 😒 @@ -189,6 +233,7 @@ At this point in the tutorial, your folder structure should look like this: └── circuit └── ...same as above └── vite-project + β”œβ”€β”€ vite.config.js β”œβ”€β”€ main.js β”œβ”€β”€ package.json └── index.html @@ -209,7 +254,7 @@ import circuit from '../circuit/target/circuit.json'; [Noir is backend-agnostic](../index.mdx#whats-new-about-noir). We write Noir, but we also need a proving backend. That's why we need to import and instantiate the two dependencies we installed above: `BarretenbergBackend` and `Noir`. Let's import them right below: ```js -import { BarretenbergBackend } from '@noir-lang/backend_barretenberg'; +import { BarretenbergBackend, BarretenbergVerifier as Verifier } from '@noir-lang/backend_barretenberg'; import { Noir } from '@noir-lang/noir_js'; ``` @@ -264,8 +309,10 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th ```js display('logs', 'Verifying proof... βŒ›'); -const verification = await noir.verifyProof(proof); -if (verification) display('logs', 'Verifying proof... βœ…'); +const verificationKey = await backend.getVerificationKey(); +const verifier = new Verifier(); +const isValid = await verifier.verifyProof(proof, verificationKey); +if (isValid) display('logs', 'Verifying proof... βœ…'); ``` You have successfully generated a client-side Noir web app! diff --git a/docs/versioned_docs/version-v0.25.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.25.0/tutorials/noirjs_app.md index 12beb476994..02044cd2ff6 100644 --- a/docs/versioned_docs/version-v0.25.0/tutorials/noirjs_app.md +++ b/docs/versioned_docs/version-v0.25.0/tutorials/noirjs_app.md @@ -14,9 +14,9 @@ You can find the complete app code for this guide [here](https://github.com/noir :::note -Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.19.x matches `noir_js@0.19.x`, etc. +Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.25.x matches `noir_js@0.25.x`, etc. -In this guide, we will be pinned to 0.19.4. +In this guide, we will be pinned to 0.25.0. ::: @@ -34,7 +34,7 @@ Easy enough. Onwards! ## Our project -ZK is a powerful technology. An app that doesn't reveal one of the inputs to *anyone* is almost unbelievable, yet Noir makes it as easy as a single line of code. +ZK is a powerful technology. An app that doesn't reveal one of the inputs to _anyone_ is almost unbelievable, yet Noir makes it as easy as a single line of code. In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! @@ -42,13 +42,13 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! Run: -```nargo new circuit``` +`nargo new circuit` And... That's about it. Your program is ready to be compiled and run. To compile, let's `cd` into the `circuit` folder to enter our project, and call: -```nargo compile``` +`nargo compile` This compiles our circuit into `json` format and add it to a new `target` folder. @@ -77,10 +77,55 @@ Vite is a powerful tool to generate static websites. While it provides all kinds To do this this, go back to the previous folder (`cd ..`) and create a new vite project by running `npm create vite` and choosing "Vanilla" and "Javascript". -You should see `vite-project` appear in your root folder. This seems like a good time to `cd` into it and install our NoirJS packages: +A wild `vite-project` directory should now appear in your root folder! Let's not waste any time and dive right in: ```bash -npm i @noir-lang/backend_barretenberg@0.19.4 @noir-lang/noir_js@0.19.4 +cd vite-project +``` + +### Setting Up Vite and Configuring the Project + +Before we proceed with any coding, let's get our environment tailored for Noir. We'll start by laying down the foundations with a `vite.config.js` file. This little piece of configuration is our secret sauce for making sure everything meshes well with the NoirJS libraries and other special setups we might need, like handling WebAssembly modules. Here’s how you get that going: + +#### Creating the vite.config.js + +In your freshly minted `vite-project` folder, create a new file named `vite.config.js` and open it in your code editor. Paste the following to set the stage: + +```javascript +import { defineConfig } from "vite"; +import copy from "rollup-plugin-copy"; + +export default defineConfig({ + esbuild: { + target: "esnext", + }, + optimizeDeps: { + esbuildOptions: { + target: "esnext", + }, + }, + plugins: [ + copy({ + targets: [ + { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" }, + ], + copySync: true, + hook: "buildStart", + }), + ], + server: { + port: 3000, + }, +}); +``` + +#### Install Dependencies + +Now that our stage is set, install the necessary NoirJS packages along with our other dependencies: + +```bash +npm install && npm install @noir-lang/backend_barretenberg@0.25.0 @noir-lang/noir_js@0.25.0 +npm install rollup-plugin-copy --save-dev ``` :::info @@ -99,7 +144,7 @@ At this point in the tutorial, your folder structure should look like this: #### Some cleanup -`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `index.html`, `main.js` and `package.json`. I feel lighter already. +`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `vite.config.js`, `index.html`, `main.js` and `package.json`. I feel lighter already. ![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg) @@ -139,7 +184,7 @@ Our app won't run like this, of course. We need some working HTML, at least. Let ``` -It *could* be a beautiful UI... Depending on which universe you live in. +It _could_ be a beautiful UI... Depending on which universe you live in. ## Some good old vanilla Javascript @@ -150,14 +195,14 @@ Start by pasting in this boilerplate code: ```js const setup = async () => { await Promise.all([ - import("@noir-lang/noirc_abi").then(module => - module.default(new URL("@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm", import.meta.url).toString()) + import('@noir-lang/noirc_abi').then((module) => + module.default(new URL('@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm', import.meta.url).toString()), + ), + import('@noir-lang/acvm_js').then((module) => + module.default(new URL('@noir-lang/acvm_js/web/acvm_js_bg.wasm', import.meta.url).toString()), ), - import("@noir-lang/acvm_js").then(module => - module.default(new URL("@noir-lang/acvm_js/web/acvm_js_bg.wasm", import.meta.url).toString()) - ) ]); -} +}; function display(container, msg) { const c = document.getElementById(container); @@ -169,11 +214,10 @@ function display(container, msg) { document.getElementById('submitGuess').addEventListener('click', async () => { try { // here's where love happens - } catch(err) { - display("logs", "Oh πŸ’” Wrong guess") + } catch (err) { + display('logs', 'Oh πŸ’” Wrong guess'); } }); - ``` The display function doesn't do much. We're simply manipulating our website to see stuff happening. For example, if the proof fails, it will simply log a broken heart 😒 @@ -189,6 +233,7 @@ At this point in the tutorial, your folder structure should look like this: └── circuit └── ...same as above └── vite-project + └── vite.config.js β”œβ”€β”€ main.js β”œβ”€β”€ package.json └── index.html diff --git a/docs/versioned_docs/version-v0.26.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.26.0/tutorials/noirjs_app.md index 12beb476994..d098827e6d9 100644 --- a/docs/versioned_docs/version-v0.26.0/tutorials/noirjs_app.md +++ b/docs/versioned_docs/version-v0.26.0/tutorials/noirjs_app.md @@ -14,9 +14,9 @@ You can find the complete app code for this guide [here](https://github.com/noir :::note -Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.19.x matches `noir_js@0.19.x`, etc. +Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.26.x matches `noir_js@0.26.x`, etc. -In this guide, we will be pinned to 0.19.4. +In this guide, we will be pinned to 0.26.0. ::: @@ -34,7 +34,7 @@ Easy enough. Onwards! ## Our project -ZK is a powerful technology. An app that doesn't reveal one of the inputs to *anyone* is almost unbelievable, yet Noir makes it as easy as a single line of code. +ZK is a powerful technology. An app that doesn't reveal one of the inputs to _anyone_ is almost unbelievable, yet Noir makes it as easy as a single line of code. In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! @@ -42,13 +42,13 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that! Run: -```nargo new circuit``` +`nargo new circuit` And... That's about it. Your program is ready to be compiled and run. To compile, let's `cd` into the `circuit` folder to enter our project, and call: -```nargo compile``` +`nargo compile` This compiles our circuit into `json` format and add it to a new `target` folder. @@ -77,10 +77,55 @@ Vite is a powerful tool to generate static websites. While it provides all kinds To do this this, go back to the previous folder (`cd ..`) and create a new vite project by running `npm create vite` and choosing "Vanilla" and "Javascript". -You should see `vite-project` appear in your root folder. This seems like a good time to `cd` into it and install our NoirJS packages: +A wild `vite-project` directory should now appear in your root folder! Let's not waste any time and dive right in: ```bash -npm i @noir-lang/backend_barretenberg@0.19.4 @noir-lang/noir_js@0.19.4 +cd vite-project +``` + +### Setting Up Vite and Configuring the Project + +Before we proceed with any coding, let's get our environment tailored for Noir. We'll start by laying down the foundations with a `vite.config.js` file. This little piece of configuration is our secret sauce for making sure everything meshes well with the NoirJS libraries and other special setups we might need, like handling WebAssembly modules. Here’s how you get that going: + +#### Creating the vite.config.js + +In your freshly minted `vite-project` folder, create a new file named `vite.config.js` and open it in your code editor. Paste the following to set the stage: + +```javascript +import { defineConfig } from "vite"; +import copy from "rollup-plugin-copy"; + +export default defineConfig({ + esbuild: { + target: "esnext", + }, + optimizeDeps: { + esbuildOptions: { + target: "esnext", + }, + }, + plugins: [ + copy({ + targets: [ + { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" }, + ], + copySync: true, + hook: "buildStart", + }), + ], + server: { + port: 3000, + }, +}); +``` + +#### Install Dependencies + +Now that our stage is set, install the necessary NoirJS packages along with our other dependencies: + +```bash +npm install && npm install @noir-lang/backend_barretenberg@0.26.0 @noir-lang/noir_js@0.26.0 +npm install rollup-plugin-copy --save-dev ``` :::info @@ -99,7 +144,7 @@ At this point in the tutorial, your folder structure should look like this: #### Some cleanup -`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `index.html`, `main.js` and `package.json`. I feel lighter already. +`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `vite.config.js`, `index.html`, `main.js` and `package.json`. I feel lighter already. ![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg) @@ -139,7 +184,7 @@ Our app won't run like this, of course. We need some working HTML, at least. Let ``` -It *could* be a beautiful UI... Depending on which universe you live in. +It _could_ be a beautiful UI... Depending on which universe you live in. ## Some good old vanilla Javascript @@ -150,14 +195,14 @@ Start by pasting in this boilerplate code: ```js const setup = async () => { await Promise.all([ - import("@noir-lang/noirc_abi").then(module => - module.default(new URL("@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm", import.meta.url).toString()) + import('@noir-lang/noirc_abi').then((module) => + module.default(new URL('@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm', import.meta.url).toString()), + ), + import('@noir-lang/acvm_js').then((module) => + module.default(new URL('@noir-lang/acvm_js/web/acvm_js_bg.wasm', import.meta.url).toString()), ), - import("@noir-lang/acvm_js").then(module => - module.default(new URL("@noir-lang/acvm_js/web/acvm_js_bg.wasm", import.meta.url).toString()) - ) ]); -} +}; function display(container, msg) { const c = document.getElementById(container); @@ -169,11 +214,10 @@ function display(container, msg) { document.getElementById('submitGuess').addEventListener('click', async () => { try { // here's where love happens - } catch(err) { - display("logs", "Oh πŸ’” Wrong guess") + } catch (err) { + display('logs', 'Oh πŸ’” Wrong guess'); } }); - ``` The display function doesn't do much. We're simply manipulating our website to see stuff happening. For example, if the proof fails, it will simply log a broken heart 😒 @@ -189,6 +233,7 @@ At this point in the tutorial, your folder structure should look like this: └── circuit └── ...same as above └── vite-project + └── vite.config.js β”œβ”€β”€ main.js β”œβ”€β”€ package.json └── index.html