From 6f286ded427a0c3bd4d556787c34a6a1a2adcf81 Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Wed, 31 Jul 2024 15:35:52 -0400
Subject: [PATCH 1/6] update to 0.31

---
 docs/docs/tutorials/noirjs_app.md | 105 +++++++++++++++++-------------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/docs/docs/tutorials/noirjs_app.md b/docs/docs/tutorials/noirjs_app.md
index cbb1938a5c6..5dbcb4e0c26 100644
--- a/docs/docs/tutorials/noirjs_app.md
+++ b/docs/docs/tutorials/noirjs_app.md
@@ -14,13 +14,13 @@ 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.27.x matches `noir_js@0.27.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.31.x matches `noir_js@0.31.x`, etc.
 
-In this guide, we will be pinned to 0.27.0.
+In this guide, we will be pinned to 0.31.0.
 
 :::
 
-Before we start, we want to make sure we have Node and Nargo installed.
+Before we start, we want to make sure we have Node, Nargo and the Barretenberg proving system (`bb`) installed.
 
 We start by opening a terminal and executing `node --version`. If we don't get an output like `v20.10.0`, that means node is not installed. Let's do that by following the handy [nvm guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script).
 
@@ -30,6 +30,9 @@ As for `Nargo`, we can follow the [Nargo guide](../getting_started/installation/
 curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
+Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+
 Easy enough. Onwards!
 
 ## Our project
@@ -42,13 +45,17 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!
 
 Run:
 
-`nargo new circuit`
+```bash
+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`
+```bash
+nargo compile
+```
 
 This compiles our circuit into `json` format and add it to a new `target` folder.
 
@@ -92,30 +99,53 @@ Before we proceed with any coding, let's get our environment tailored for Noir.
 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",
+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();
+    });
   },
-  optimizeDeps: {
-    esbuildOptions: {
-      target: "esnext",
-    },
-  },
-  plugins: [
-    copy({
-      targets: [
-        { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
+};
+
+export default defineConfig(({ command }) => {
+  if (command === 'serve') {
+    return {
+      build: {
+        target: 'esnext',
+        rollupOptions: {
+          external: ['@aztec/bb.js']
+        }
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'esnext'
+        }
+      },
+      plugins: [
+        copy({
+          targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }],
+          copySync: true,
+          hook: 'buildStart',
+        }),
+        command === 'serve' ? wasmContentTypePlugin : [],
       ],
-      copySync: true,
-      hook: "buildStart",
-    }),
-  ],
-  server: {
-    port: 3000,
-  },
+    };
+  }
+
+  return {};
 });
 ```
 
@@ -124,7 +154,7 @@ export default defineConfig({
 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 && npm install @noir-lang/backend_barretenberg@0.31.0 @noir-lang/noir_js@0.31.0
 npm install rollup-plugin-copy --save-dev
 ```
 
@@ -193,17 +223,6 @@ Our love for Noir needs undivided attention, so let's just open `main.js` and de
 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/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);
   const p = document.createElement('p');
@@ -222,8 +241,6 @@ document.getElementById('submitGuess').addEventListener('click', async () => {
 
 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 😢
 
-As for the `setup` function, it's just a sad reminder that dealing with `wasm` on the browser is not as easy as it should. Just copy, paste, and forget.
-
 :::info
 
 At this point in the tutorial, your folder structure should look like this:
@@ -254,7 +271,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, BarretenbergVerifier as Verifier } from '@noir-lang/backend_barretenberg';
+import { BarretenbergBackend } from '@noir-lang/backend_barretenberg';
 import { Noir } from '@noir-lang/noir_js';
 ```
 
@@ -310,9 +327,7 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 
 ```js
 display('logs', 'Verifying proof... ⌛');
-const verificationKey = await backend.getVerificationKey();
-const verifier = new Verifier();
-const isValid = await verifier.verifyProof(proof, verificationKey);
+const isValid = await backend.verifyProof(proof);
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```
 

From 2ee45b1c9551edd2e38fcb869b43d53e9ded2b34 Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Wed, 31 Jul 2024 15:36:57 -0400
Subject: [PATCH 2/6] update to 0.31

---
 .../version-v0.31.0/tutorials/noirjs_app.md   | 105 ++++++++++--------
 .../version-v0.32.0/tutorials/noirjs_app.md   | 105 ++++++++++--------
 2 files changed, 120 insertions(+), 90 deletions(-)

diff --git a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
index cbb1938a5c6..5dbcb4e0c26 100644
--- a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
@@ -14,13 +14,13 @@ 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.27.x matches `noir_js@0.27.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.31.x matches `noir_js@0.31.x`, etc.
 
-In this guide, we will be pinned to 0.27.0.
+In this guide, we will be pinned to 0.31.0.
 
 :::
 
-Before we start, we want to make sure we have Node and Nargo installed.
+Before we start, we want to make sure we have Node, Nargo and the Barretenberg proving system (`bb`) installed.
 
 We start by opening a terminal and executing `node --version`. If we don't get an output like `v20.10.0`, that means node is not installed. Let's do that by following the handy [nvm guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script).
 
@@ -30,6 +30,9 @@ As for `Nargo`, we can follow the [Nargo guide](../getting_started/installation/
 curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
+Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+
 Easy enough. Onwards!
 
 ## Our project
@@ -42,13 +45,17 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!
 
 Run:
 
-`nargo new circuit`
+```bash
+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`
+```bash
+nargo compile
+```
 
 This compiles our circuit into `json` format and add it to a new `target` folder.
 
@@ -92,30 +99,53 @@ Before we proceed with any coding, let's get our environment tailored for Noir.
 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",
+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();
+    });
   },
-  optimizeDeps: {
-    esbuildOptions: {
-      target: "esnext",
-    },
-  },
-  plugins: [
-    copy({
-      targets: [
-        { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
+};
+
+export default defineConfig(({ command }) => {
+  if (command === 'serve') {
+    return {
+      build: {
+        target: 'esnext',
+        rollupOptions: {
+          external: ['@aztec/bb.js']
+        }
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'esnext'
+        }
+      },
+      plugins: [
+        copy({
+          targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }],
+          copySync: true,
+          hook: 'buildStart',
+        }),
+        command === 'serve' ? wasmContentTypePlugin : [],
       ],
-      copySync: true,
-      hook: "buildStart",
-    }),
-  ],
-  server: {
-    port: 3000,
-  },
+    };
+  }
+
+  return {};
 });
 ```
 
@@ -124,7 +154,7 @@ export default defineConfig({
 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 && npm install @noir-lang/backend_barretenberg@0.31.0 @noir-lang/noir_js@0.31.0
 npm install rollup-plugin-copy --save-dev
 ```
 
@@ -193,17 +223,6 @@ Our love for Noir needs undivided attention, so let's just open `main.js` and de
 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/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);
   const p = document.createElement('p');
@@ -222,8 +241,6 @@ document.getElementById('submitGuess').addEventListener('click', async () => {
 
 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 😢
 
-As for the `setup` function, it's just a sad reminder that dealing with `wasm` on the browser is not as easy as it should. Just copy, paste, and forget.
-
 :::info
 
 At this point in the tutorial, your folder structure should look like this:
@@ -254,7 +271,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, BarretenbergVerifier as Verifier } from '@noir-lang/backend_barretenberg';
+import { BarretenbergBackend } from '@noir-lang/backend_barretenberg';
 import { Noir } from '@noir-lang/noir_js';
 ```
 
@@ -310,9 +327,7 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 
 ```js
 display('logs', 'Verifying proof... ⌛');
-const verificationKey = await backend.getVerificationKey();
-const verifier = new Verifier();
-const isValid = await verifier.verifyProof(proof, verificationKey);
+const isValid = await backend.verifyProof(proof);
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```
 
diff --git a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
index cbb1938a5c6..5dbcb4e0c26 100644
--- a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
@@ -14,13 +14,13 @@ 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.27.x matches `noir_js@0.27.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.31.x matches `noir_js@0.31.x`, etc.
 
-In this guide, we will be pinned to 0.27.0.
+In this guide, we will be pinned to 0.31.0.
 
 :::
 
-Before we start, we want to make sure we have Node and Nargo installed.
+Before we start, we want to make sure we have Node, Nargo and the Barretenberg proving system (`bb`) installed.
 
 We start by opening a terminal and executing `node --version`. If we don't get an output like `v20.10.0`, that means node is not installed. Let's do that by following the handy [nvm guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script).
 
@@ -30,6 +30,9 @@ As for `Nargo`, we can follow the [Nargo guide](../getting_started/installation/
 curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
+Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+
 Easy enough. Onwards!
 
 ## Our project
@@ -42,13 +45,17 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!
 
 Run:
 
-`nargo new circuit`
+```bash
+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`
+```bash
+nargo compile
+```
 
 This compiles our circuit into `json` format and add it to a new `target` folder.
 
@@ -92,30 +99,53 @@ Before we proceed with any coding, let's get our environment tailored for Noir.
 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",
+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();
+    });
   },
-  optimizeDeps: {
-    esbuildOptions: {
-      target: "esnext",
-    },
-  },
-  plugins: [
-    copy({
-      targets: [
-        { src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
+};
+
+export default defineConfig(({ command }) => {
+  if (command === 'serve') {
+    return {
+      build: {
+        target: 'esnext',
+        rollupOptions: {
+          external: ['@aztec/bb.js']
+        }
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'esnext'
+        }
+      },
+      plugins: [
+        copy({
+          targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }],
+          copySync: true,
+          hook: 'buildStart',
+        }),
+        command === 'serve' ? wasmContentTypePlugin : [],
       ],
-      copySync: true,
-      hook: "buildStart",
-    }),
-  ],
-  server: {
-    port: 3000,
-  },
+    };
+  }
+
+  return {};
 });
 ```
 
@@ -124,7 +154,7 @@ export default defineConfig({
 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 && npm install @noir-lang/backend_barretenberg@0.31.0 @noir-lang/noir_js@0.31.0
 npm install rollup-plugin-copy --save-dev
 ```
 
@@ -193,17 +223,6 @@ Our love for Noir needs undivided attention, so let's just open `main.js` and de
 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/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);
   const p = document.createElement('p');
@@ -222,8 +241,6 @@ document.getElementById('submitGuess').addEventListener('click', async () => {
 
 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 😢
 
-As for the `setup` function, it's just a sad reminder that dealing with `wasm` on the browser is not as easy as it should. Just copy, paste, and forget.
-
 :::info
 
 At this point in the tutorial, your folder structure should look like this:
@@ -254,7 +271,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, BarretenbergVerifier as Verifier } from '@noir-lang/backend_barretenberg';
+import { BarretenbergBackend } from '@noir-lang/backend_barretenberg';
 import { Noir } from '@noir-lang/noir_js';
 ```
 
@@ -310,9 +327,7 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 
 ```js
 display('logs', 'Verifying proof... ⌛');
-const verificationKey = await backend.getVerificationKey();
-const verifier = new Verifier();
-const isValid = await verifier.verifyProof(proof, verificationKey);
+const isValid = await backend.verifyProof(proof);
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```
 

From 356e068f382317bffbeb1591e3dd9f66bf584b30 Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Thu, 1 Aug 2024 13:56:41 -0400
Subject: [PATCH 3/6] Update docs/docs/tutorials/noirjs_app.md

Co-authored-by: Savio <72797635+Savio-Sou@users.noreply.github.com>
---
 docs/docs/tutorials/noirjs_app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/tutorials/noirjs_app.md b/docs/docs/tutorials/noirjs_app.md
index 5dbcb4e0c26..50c66675548 100644
--- a/docs/docs/tutorials/noirjs_app.md
+++ b/docs/docs/tutorials/noirjs_app.md
@@ -31,7 +31,7 @@ curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
 Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
-Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.41.0` once `bbup` is installed.
 
 Easy enough. Onwards!
 

From 261f40f9b41bef239649b2d397067f2f51fa2a5f Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Thu, 1 Aug 2024 13:59:39 -0400
Subject: [PATCH 4/6] Update
 docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md

Co-authored-by: Savio <72797635+Savio-Sou@users.noreply.github.com>
---
 docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
index 5dbcb4e0c26..50c66675548 100644
--- a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
@@ -31,7 +31,7 @@ curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
 Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
-Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.41.0` once `bbup` is installed.
 
 Easy enough. Onwards!
 

From 9e82840a5921405e051257d12ec88eef009139bb Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Thu, 1 Aug 2024 13:59:47 -0400
Subject: [PATCH 5/6] Update
 docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md

Co-authored-by: Savio <72797635+Savio-Sou@users.noreply.github.com>
---
 docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
index 5dbcb4e0c26..50c66675548 100644
--- a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
@@ -31,7 +31,7 @@ curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
 ```
 
 Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`. 
-Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.46.1` once `bbup` is installed.
+Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.41.0` once `bbup` is installed.
 
 Easy enough. Onwards!
 

From 06386381daaa60bcb7581d53dc1309930d5e0258 Mon Sep 17 00:00:00 2001
From: josh crites <jc@joshcrites.com>
Date: Thu, 1 Aug 2024 14:07:20 -0400
Subject: [PATCH 6/6] add note on caching vk

---
 docs/docs/tutorials/noirjs_app.md                         | 8 +++++++-
 .../version-v0.31.0/tutorials/noirjs_app.md               | 8 +++++++-
 .../version-v0.32.0/tutorials/noirjs_app.md               | 8 +++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/docs/tutorials/noirjs_app.md b/docs/docs/tutorials/noirjs_app.md
index 5dbcb4e0c26..dde8db96af8 100644
--- a/docs/docs/tutorials/noirjs_app.md
+++ b/docs/docs/tutorials/noirjs_app.md
@@ -271,7 +271,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';
 ```
 
@@ -328,6 +328,12 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 ```js
 display('logs', 'Verifying proof... ⌛');
 const isValid = await backend.verifyProof(proof);
+
+// or to cache and use the verification key:
+// const verificationKey = await backend.getVerificationKey();
+// const verifier = new Verifier();
+// const isValid = await verifier.verifyProof(proof, verificationKey);
+
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```
 
diff --git a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
index 5dbcb4e0c26..dde8db96af8 100644
--- a/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
@@ -271,7 +271,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';
 ```
 
@@ -328,6 +328,12 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 ```js
 display('logs', 'Verifying proof... ⌛');
 const isValid = await backend.verifyProof(proof);
+
+// or to cache and use the verification key:
+// const verificationKey = await backend.getVerificationKey();
+// const verifier = new Verifier();
+// const isValid = await verifier.verifyProof(proof, verificationKey);
+
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```
 
diff --git a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
index 5dbcb4e0c26..dde8db96af8 100644
--- a/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
+++ b/docs/versioned_docs/version-v0.32.0/tutorials/noirjs_app.md
@@ -271,7 +271,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';
 ```
 
@@ -328,6 +328,12 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th
 ```js
 display('logs', 'Verifying proof... ⌛');
 const isValid = await backend.verifyProof(proof);
+
+// or to cache and use the verification key:
+// const verificationKey = await backend.getVerificationKey();
+// const verifier = new Verifier();
+// const isValid = await verifier.verifyProof(proof, verificationKey);
+
 if (isValid) display('logs', 'Verifying proof... ✅');
 ```