Updating to 0.23.0

.github/workflows/vite_hardhat.yaml

@@ -45,13 +45,5 @@ jobs:
         run: yarn --immutable
         shell: bash
 
-      - name: 'Create env file'
-        run: |
-          touch .env
-          echo SEPOLIA_ALCHEMY_KEY="${{ secrets.SEPOLIA_ALCHEMY_KEY }}" >> .env
-          echo SEPOLIA_DEPLOYER_PRIVATE_KEY="${{ secrets.SEPOLIA_DEPLOYER_PRIVATE_KEY }}" >> .env
-          echo MUMBAI_ALCHEMY_KEY"=${{ secrets.MUMBAI_ALCHEMY_KEY }}" >> .env
-          echo MUMBAI_DEPLOYER_PRIVATE_KEY="${{ secrets.MUMBAI_DEPLOYER_PRIVATE_KEY }}" >> .env
-
       - name: Run test
         run: yarn test

.github/workflows/vite_hardhat_nightly.yaml

@@ -83,18 +83,8 @@ jobs:
           @noir-lang/noir_wasm@${{ matrix.version }} \
           @noir-lang/types@${{ matrix.version }}
 
-      - name: 'Create env file'
-        run: |
-          touch .env
-          echo SEPOLIA_ALCHEMY_KEY="${{ secrets.SEPOLIA_ALCHEMY_KEY }}" >> .env
-          echo SEPOLIA_DEPLOYER_PRIVATE_KEY="${{ secrets.SEPOLIA_DEPLOYER_PRIVATE_KEY }}" >> .env
-          echo MUMBAI_ALCHEMY_KEY"=${{ secrets.MUMBAI_ALCHEMY_KEY }}" >> .env
-          echo MUMBAI_DEPLOYER_PRIVATE_KEY="${{ secrets.MUMBAI_DEPLOYER_PRIVATE_KEY }}" >> .env
-
       - name: Generate verifier contract
-        run: |
-          nargo codegen-verifier
-        working-directory: vite-hardhat/circuits
+        run: yarn prep
 
       - name: Run test
         run: yarn test

vite-hardhat/README.md

@@ -14,9 +14,7 @@ Want to get started in a pinch? Start your project in a free Github Codespace!
 In the meantime, follow these simple steps to work on your own machine:
 
 1. Install [yarn](https://yarnpkg.com/) (tested on yarn v1.22.19)
-
 2. Install [Node.js >20.10 (latest LTS)](https://nodejs.org/en) (tested on v18.17.0)
-
 3. Install [noirup](https://noir-lang.org/docs/getting_started/installation/#installing-noirup) with
 
    ```bash
@@ -35,24 +33,15 @@ In the meantime, follow these simple steps to work on your own machine:
    yarn
    ```
 
-## Generate verifier contract
-
-### Contract
+6. Generate the verifier contract
 
-The deployment assumes a verifier contract has been generated by nargo. In order to do this, run:
-
-```bash
-cd circuits
-nargo codegen-verifier
-```
-
-A file named `plonk_vk.sol` should appear in the `circuits/contracts/with_foundry` folder.
+   ```bash
+   yarn prep
+   ```
 
 ### Test locally
 
-1. Copy `vite-hardhat/.env.example` to a new file `vite-hardhat/.env`.
-
-2. Start a local development EVM at <http://localhost:8545> with
+1. Start a local development EVM at <http://localhost:8545> with
 
    ```bash
    npx hardhat node
@@ -64,7 +53,7 @@ A file named `plonk_vk.sol` should appear in the `circuits/contracts/with_foundr
    anvil
    ```
 
-3. Run the [example test file](./test/index.test.ts) with
+2. Run the [example test file](./test/index.test.ts) with
 
    ```bash
    yarn test
@@ -74,9 +63,7 @@ The test demonstrates basic usage of Noir in a TypeScript Node.js environment.
 
 ### Deploy locally
 
-1. Copy `vite-hardhat/.env.example` to a new file `vite-hardhat/.env`.
-
-2. Start a local development EVM at <http://localhost:8545> with
+1. Start a local development EVM at <http://localhost:8545> with
 
    ```bash
    npx hardhat node
@@ -88,32 +75,36 @@ The test demonstrates basic usage of Noir in a TypeScript Node.js environment.
    anvil
    ```
 
-3. Build the project and deploy contracts to the local development chain with
+2. Build the project and deploy contracts to the local development chain with
 
    ```bash
-   NETWORK=localhost yarn build
+   yarn build
    ```
 
-   > **Note:** If the deployment fails, try removing `yarn.lock` and reinstalling dependencies with
-   > `yarn`.
-
-4. Once your contracts are deployed and the build is finished, you can preview the built website with
+3. Once your contracts are deployed and the build is finished, you can preview the built website with
 
    ```bash
    yarn preview
    ```
 
-### Deploy on networks
+### On-chain verification
+
+The app will verify your proof locally. If you have a wallet, it will prompt you to connect to the relevant network and use it for on-chain verification.
 
-You can choose any other network in `hardhat.config.ts` and deploy there using this `NETWORK`
-environment variable.
+### Deploy on testnets
 
-For example, `NETWORK=mumbai yarn build` or `NETWORK=sepolia yarn build`.
+For convenience, we added two configurations for deployment on various testnets. You can find them in `hardhat.config.cts`.
 
-Make sure you:
+To deploy on these testnets, rename `.env.example` to `.env` and add your own [alchemy](https://www.alchemy.com/) keys for these networks.
+
+Then, prepend your commands with your desired network in a `NETWORK` environment variable. For example, to deploy on sepolia:
+
+```bash
+NETWORK=sepolia yarn build`
+```
 
-- Update the deployer private keys in `vite-hardhat/.env`
-- Have funds in the deployer account
-- Add keys for alchemy (to act as a node) in `vite-hardhat/.env`
+Feel free to add more networks, just make sure you:
 
-Feel free to contribute with other networks in `hardhat.config.ts`
+- Add deployer private keys and alchemy API keys in `.env`
+- Have funds in these accounts
+- Add a configuration in `hardhat.config.cts`

vite-hardhat/circuits/contract/noirstarter/plonk_vk.sol → vite-hardhat/circuit/contract/noirstarter/plonk_vk.sol

@@ -1,11 +1,11 @@
-// Verification Key Hash: 597e6b063b9e095b7e5654d1d912bb8fdc6d4037ea4fd056181037e162bc9d6f
+// Verification Key Hash: 3c811ff6c5e5458bef50b83d37b0058dde9b8c9b1ac1b9e0164c84fd1d52cf0b
 // SPDX-License-Identifier: Apache-2.0
 // Copyright 2022 Aztec
 pragma solidity >=0.8.4;
 
 library UltraVerificationKey {
     function verificationKeyHash() internal pure returns(bytes32) {
-        return 0x597e6b063b9e095b7e5654d1d912bb8fdc6d4037ea4fd056181037e162bc9d6f;
+        return 0x3c811ff6c5e5458bef50b83d37b0058dde9b8c9b1ac1b9e0164c84fd1d52cf0b;
     }
 
     function loadVerificationKey(uint256 _vk, uint256 _omegaInverseLoc) internal pure {
@@ -14,8 +14,8 @@ library UltraVerificationKey {
             mstore(add(_vk, 0x20), 0x0000000000000000000000000000000000000000000000000000000000000001) // vk.num_inputs
             mstore(add(_vk, 0x40), 0x21082ca216cbbf4e1c6e4f4594dd508c996dfbe1174efb98b11509c6e306460b) // vk.work_root
             mstore(add(_vk, 0x60), 0x2d5e098bb31e86271ccb415b196942d755b0a9c3f21dd9882fa3d63ab1000001) // vk.domain_inverse
-            mstore(add(_vk, 0x80), 0x1d6e17e39e1540af01cde309984ac12f35847c3da14eac5d4bc7390c128e31be) // vk.Q1.x
-            mstore(add(_vk, 0xa0), 0x1a8db1179d9ff8d6dd7b727d6874067e21380d9f932a256ab9fa8e94ce5498d6) // vk.Q1.y
+            mstore(add(_vk, 0x80), 0x1a8732b002f568683304140deecc1ca5ce2553c9988950ea13c198f1afe44e13) // vk.Q1.x
+            mstore(add(_vk, 0xa0), 0x2c44ea8c14491b4acc57cc74ead43131d09e58937ae057f69f29b4af8ecc3441) // vk.Q1.y
             mstore(add(_vk, 0xc0), 0x1eebbe1207643a8bd1669b999e82265d340a5ecb1a33c0b7055734ef91200c97) // vk.Q2.x
             mstore(add(_vk, 0xe0), 0x2f08a6a07ed616c588bcf4e3555c006b27d5d1ffba12754d0718481e1a9a419a) // vk.Q2.y
             mstore(add(_vk, 0x100), 0x2a7e71e447b5645910a429e7f48f1a5deba7f7d446b95a5edd242b55f67993d3) // vk.Q3.x
@@ -34,14 +34,14 @@ library UltraVerificationKey {
             mstore(add(_vk, 0x2a0), 0x1e5b26790a26eb340217dd9ad28dbf90a049f42a3852acd45e6f521f24b4900e) // vk.Q_ELLIPTIC.y
             mstore(add(_vk, 0x2c0), 0x155a0f51fec78c33ffceb7364d69d7ac27e570ae50bc180509764eb3fef94815) // vk.Q_AUX.x
             mstore(add(_vk, 0x2e0), 0x1c1c4720bed44a591d97cbc72b6e44b644999713a8d3c66e9054aa5726324c76) // vk.Q_AUX.y
-            mstore(add(_vk, 0x300), 0x0f7261cf55a71f4d0d7b961dda9ddb058cc5ad51753faec2a5908155d472e429) // vk.SIGMA1.x
-            mstore(add(_vk, 0x320), 0x1b7b1a10c1e638ce11d8c84b831aca4a36df78f0d50144437ef26f8bbfe69ac1) // vk.SIGMA1.y
+            mstore(add(_vk, 0x300), 0x210fa88bc935d90241f733cc4f011893a7d349075a0de838001178895da2aa39) // vk.SIGMA1.x
+            mstore(add(_vk, 0x320), 0x1d270bb763cb26b2438b0760dfc7fb68fc98f87155867a2cf5c4b4ba06f637a6) // vk.SIGMA1.y
             mstore(add(_vk, 0x340), 0x163a9c8b67447afccc64e9ccba9d9e826ba5b1d1ddd8d6bb960f01cd1321a169) // vk.SIGMA2.x
             mstore(add(_vk, 0x360), 0x19256311d43dbc795f746c63b209667653a773088aba5c6b1337f435188d72c4) // vk.SIGMA2.y
-            mstore(add(_vk, 0x380), 0x1fa51a0d75363b3af4e259e0dbb2c5df58a7bad9afe3651be67bc6c298092e11) // vk.SIGMA3.x
-            mstore(add(_vk, 0x3a0), 0x21915198840ad9c3666122b2837aeac8b5836b29551d41dbc04bdb1fcf1a1868) // vk.SIGMA3.y
-            mstore(add(_vk, 0x3c0), 0x0cee6b75dcf02a07c50939e8ca3cf35df0e69d7efdbc7898b3762f0a0ed976ad) // vk.SIGMA4.x
-            mstore(add(_vk, 0x3e0), 0x27e49262bd388ce2d0f193988f3b8f66a493be1ea69d2b335152719acd54d735) // vk.SIGMA4.y
+            mstore(add(_vk, 0x380), 0x28cb3b91580744f4f4b3d78ac8311bf59c0106d185d0d7899d5f26503a95ff2f) // vk.SIGMA3.x
+            mstore(add(_vk, 0x3a0), 0x0f9db04f699108828d71e012463b5a7db853b8c161344a813d77791e95794b0d) // vk.SIGMA3.y
+            mstore(add(_vk, 0x3c0), 0x1637b200a85a4b2b47edcdf32e00388aea6432e5b9318b0c41638e0f01f57644) // vk.SIGMA4.x
+            mstore(add(_vk, 0x3e0), 0x05b8c63c3283af50dea5bc8f06fa17b3846260c41cf73c00ca8606afeb6c63f7) // vk.SIGMA4.y
             mstore(add(_vk, 0x400), 0x02c397073c8abce6d4140c9b961209dd783bff1a1cfc999bb29859cfb16c46fc) // vk.TABLE1.x
             mstore(add(_vk, 0x420), 0x2b7bba2d1efffce0d033f596b4d030750599be670db593af86e1923fe8a1bb18) // vk.TABLE1.y
             mstore(add(_vk, 0x440), 0x2c71c58b66498f903b3bbbda3d05ce8ffb571a4b3cf83533f3f71b99a04f6e6b) // vk.TABLE2.x
@@ -52,10 +52,10 @@ library UltraVerificationKey {
             mstore(add(_vk, 0x4e0), 0x13dd7515ccac4095302d204f06f0bff2595d77bdf72e4acdb0b0b43969860d98) // vk.TABLE4.y
             mstore(add(_vk, 0x500), 0x16ff3501369121d410b445929239ba057fe211dad1b706e49a3b55920fac20ec) // vk.TABLE_TYPE.x
             mstore(add(_vk, 0x520), 0x1e190987ebd9cf480f608b82134a00eb8007673c1ed10b834a695adf0068522a) // vk.TABLE_TYPE.y
-            mstore(add(_vk, 0x540), 0x1e44194e60f0ab4ee0f77adc50f4220944f94301aa6da3016a226de04de52f4c) // vk.ID1.x
-            mstore(add(_vk, 0x560), 0x2a017d0d9f40d0aeb5c8152ffddec56c2c7bea37dfbd20be6bed19efd743397a) // vk.ID1.y
-            mstore(add(_vk, 0x580), 0x27579be0883627093cf8bdec0b72e77f43efe5631bf48c872c317bed3b8bf12b) // vk.ID2.x
-            mstore(add(_vk, 0x5a0), 0x0ddb2d01ec88ed69144177a4af3850cef6108b89e89b35679431d113f3be7dff) // vk.ID2.y
+            mstore(add(_vk, 0x540), 0x143131b30c289c43efe8c03ccfa57d38ea6d89d23ae31ce5714bc5daa86a768e) // vk.ID1.x
+            mstore(add(_vk, 0x560), 0x0dc02c788ed33da5b66872ebf9585c8d7abc1201cd6aabd351107e383f93cd19) // vk.ID1.y
+            mstore(add(_vk, 0x580), 0x093cf3ec6e1328ec2e9963bae3f0769bd8eb45e32cb91e2435d33daf3b336ea9) // vk.ID2.x
+            mstore(add(_vk, 0x5a0), 0x29432aa4a2a667ca8a6781517f689f573e78164764701f7190e07eeb282d7752) // vk.ID2.y
             mstore(add(_vk, 0x5c0), 0x0a7fe830f1cb7a5d49d71877dd226a0083e7ab1f26781948b36d131759f7c8c9) // vk.ID3.x
             mstore(add(_vk, 0x5e0), 0x2db7a5185064e6501ef61e989895a01834ecd1ce1e8e80812bdd95f960a45e57) // vk.ID3.y
             mstore(add(_vk, 0x600), 0x2eea648c8732596b1314fe2a4d2f05363f0c994e91cecad25835338edee2294f) // vk.ID4.x
@@ -70,6 +70,7 @@ library UltraVerificationKey {
         }
     }
 }
+
 /**
  * @title Ultra Plonk proof verification contract
  * @dev Top level Plonk proof verification contract, which allows Plonk proof to be verified

vite-hardhat/components/index.tsx

@@ -1,139 +1,36 @@
-import {
-  useState,
-  useEffect,
-  SetStateAction,
-  ReactEventHandler,
-  FormEvent,
-  ChangeEvent,
-} from 'react';
-
-import { toast } from 'react-toastify';
+import { useState } from 'react';
 import React from 'react';
 
-import { Noir } from '@noir-lang/noir_js';
-import { BarretenbergBackend, flattenPublicInputs } from '@noir-lang/backend_barretenberg';
-import { CompiledCircuit, ProofData } from '@noir-lang/types';
-import { compile, PathToFileSourceMap } from '@noir-lang/noir_wasm';
-
-import { useAccount, useConnect, useContractWrite } from 'wagmi';
-import { contractCallConfig } from '../utils/wagmi.jsx';
-import { bytesToHex } from 'viem';
-
-async function getCircuit(name: string) {
-  const res = await fetch(new URL('../circuits/src/main.nr', import.meta.url));
-  const noirSource = await res.text();
-
-  const sourceMap = new PathToFileSourceMap();
-  sourceMap.add_source_code('main.nr', noirSource);
-  const compiled = compile('main.nr', undefined, undefined, sourceMap);
-  return compiled;
-}
+import { useOnChainVerification } from '../hooks/useOnChainVerification.jsx';
+import { useProofGeneration } from '../hooks/useProofGeneration.jsx';
+import { useOffChainVerification } from '../hooks/useOffChainVerification.jsx';
 
 function Component() {
-  const [input, setInput] = useState({ x: 0, y: 0 });
-  const [proof, setProof] = useState<ProofData>();
-  const [noir, setNoir] = useState<Noir | null>(null);
-  const [backend, setBackend] = useState<BarretenbergBackend | null>(null);
+  const [input, setInput] = useState<{ x: string; y: string } | undefined>();
+  const { noir, proofData } = useProofGeneration(input);
+  useOffChainVerification(noir, proofData);
+  useOnChainVerification(proofData);
 
-  const { isConnected } = useAccount();
-  const { connect, connectors } = useConnect();
-
-  const { write, data, error, isLoading, isError } = useContractWrite({
-    ...contractCallConfig,
-    functionName: 'verify',
-  });
-
-  // Handles input state
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const submit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (e.target) setInput({ ...input, [e.target.name]: e.target.value });
-  };
-
-  // Calculates proof
-  const calculateProof = async () => {
-    const calc = new Promise(async (resolve, reject) => {
-      const { proof, publicInputs } = await noir!.generateFinalProof(input);
-      console.log('Proof created: ', proof);
-      setProof({ proof, publicInputs });
-      resolve(proof);
-    });
-    toast.promise(calc, {
-      pending: 'Calculating proof...',
-      success: 'Proof calculated!',
-      error: 'Error calculating proof',
-    });
-  };
+    const elements = e.currentTarget.elements;
+    if (!elements) return;
 
-  const verifyProof = async () => {
-    const verifyOffChain = new Promise(async (resolve, reject) => {
-      if (proof) {
-        const verification = await noir!.verifyFinalProof({
-          proof: proof.proof,
-          publicInputs: proof.publicInputs,
-        });
-        console.log('Proof verified: ', verification);
-        resolve(verification);
-      }
-    });
+    const x = elements.namedItem('x') as HTMLInputElement;
+    const y = elements.namedItem('y') as HTMLInputElement;
 
-    toast.promise(verifyOffChain, {
-      pending: 'Verifying proof off-chain...',
-      success: 'Proof verified off-chain!',
-      error: 'Error verifying proof',
-    });
-
-    connectors.map(c => c.ready && connect({ connector: c }));
-
-    if (proof) {
-      write?.({
-        args: [bytesToHex(proof.proof), flattenPublicInputs(proof.publicInputs)],
-      });
-    }
+    setInput({ x: x.value, y: y.value });
   };
 
-  useEffect(() => {
-    if (proof) {
-      verifyProof();
-      return () => {
-        backend!.destroy();
-      };
-    }
-  }, [proof]);
-
-  useEffect(() => {
-    if (data) toast.success('Proof verified on-chain!');
-  }, [data]);
-
-  const initNoir = async () => {
-    const circuit = await getCircuit('main');
-
-    // @ts-ignore
-    const backend = new BarretenbergBackend(circuit.program, { threads: 8 });
-    setBackend(backend);
-
-    // @ts-ignore
-    const noir = new Noir(circuit.program, backend);
-    await toast.promise(noir.init(), {
-      pending: 'Initializing Noir...',
-      success: 'Noir initialized!',
-      error: 'Error initializing Noir',
-    });
-    setNoir(noir);
-  };
-
-  useEffect(() => {
-    initNoir();
-  }, []);
-
   return (
-    <div className="container">
+    <form className="container" onSubmit={submit}>
       <h1>Example starter</h1>
-      <h2>This circuit checks that x and y are different</h2>
+      <h2>This circuit checks that x and y are different (yey!)</h2>
       <p>Try it!</p>
-      <input name="x" type={'number'} onChange={handleChange} value={input.x} />
-      <input name="y" type={'number'} onChange={handleChange} value={input.y} />
-      <button onClick={calculateProof}>Calculate proof</button>
-    </div>
+      <input name="x" type="text" />
+      <input name="y" type="text" />
+      <button type="submit">Calculate proof</button>
+    </form>
   );
 }