Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: pinning NoirJS guide versions to 0.17.0 and adding note on noir-examples #3266

Merged
merged 4 commits into from
Oct 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions docs/docs/noir_js/getting_started/01_tiny_noir_app.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,17 @@ NoirJS works both on the browser and on the server, and works for both ESM and C

## Before we start

:::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.18.x matches `noir_js@0.18.x`, etc.

In this guide, we will be pinned to 0.17.0.

:::

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:
First of all, follow the the [Nargo guide](../../getting_started/00_nargo_installation.md) to install nargo version 0.17.0 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
Expand All @@ -34,10 +42,10 @@ Go back to the previous folder and start a new project by running run `npm init`

## 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:
We'll need two `npm` packages. These packages will provide us the methods we need to run and verify proofs:

```bash
npm i @noir-lang/backend_barretenberg @noir-lang/noir_js
npm i @noir-lang/backend_barretenberg@^0.17.0 @noir-lang/noir_js@^0.17.0
```

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:
Expand Down Expand Up @@ -175,7 +183,7 @@ You'll see other files and folders showing up (like `package-lock.json`, `yarn.l

## Importing our dependencies

We're starting with the good stuff now. At the top of a new the typescript file, import the packages:
We're starting with the good stuff now. At the top of the new javascript file, import the packages:

```ts
import { BarretenbergBackend } from '@noir-lang/backend_barretenberg';
Expand Down Expand Up @@ -209,18 +217,8 @@ Our dependencies exported two classes: `BarretenbergBackend` and `Noir`. Let's `
```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:
Expand All @@ -230,10 +228,12 @@ const input = { x: 1, y: 2 };
display('logs', 'Generating proof... ⌛');
const proof = await noir.generateFinalProof(input);
display('logs', 'Generating proof... ✅');
display('results', proof);
display('results', proof.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:
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`. 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)

Expand All @@ -252,3 +252,5 @@ By saving, your app will refresh and here's our complete Tiny Noir App!
## Further Reading

You can see how noirjs is used in a full stack Next.js hardhat application in the [noir-starter repo here](https://github.com/noir-lang/noir-starter/tree/main/next-hardhat). The example shows how to calculate a proof in the browser and verify it with a deployed Solidity verifier contract from noirjs.

You should also check out the more advanced examples in the [noir-examples repo](https://github.com/noir-lang/noir-examples), where you'll find reference usage for some cool apps.
Binary file removed docs/static/img/noir_getting_started_0.png
Binary file not shown.
Loading