feat: browser working!

Kryha · Oct 31, 2023 · 5dd5a69 · 5dd5a69
1 parent 4396c05
commit 5dd5a69
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 144 deletions.
diff --git a/README.md b/README.md
@@ -6,8 +6,9 @@ This is a sandbox educational project for testing age-restricted contracts using
 1. Run `yarn && yarn chain` in terminal 1 to start the hardhat chain locally
 2. Run `yarn deploy --reset` in terminal 2 to deploy the contracts
 3. Run `yarn start` in terminal 3 to run the UI
+
 # Prerequisites
-* requires [nargo](https://noir-lang.org/dev/getting_started/nargo_installation) (tested with v0.10.1)
+* requires [nargo](https://noir-lang.org/dev/getting_started/nargo_installation) (tested with v0.17.0)
 * requires [node] (https://nodejs.org/en) (tested with v18.8.0)
 * requires [yarn] (https://yarnpkg.com/getting-started/install) (tested with 3.2.3)
 

diff --git a/packages/nextjs/generated/deployedContracts.ts b/packages/nextjs/generated/deployedContracts.ts
@@ -5,7 +5,7 @@ const contracts = {
       name: "localhost",
       contracts: {
         BalloonToken: {
-          address: "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
+          address: "0x5FC8d32690cc91D4c39d9d3abcBD16989F875707",
           abi: [
             {
               inputs: [],
@@ -285,7 +285,7 @@ const contracts = {
           ],
         },
         BalloonVendor: {
-          address: "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9",
+          address: "0x0165878A594ca255338adfa4d48449f69242Eb8F",
           abi: [
             {
               inputs: [
@@ -563,7 +563,7 @@ const contracts = {
           ],
         },
         VerifierLessThanSignedAge: {
-          address: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
+          address: "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9",
           abi: [
             {
               inputs: [],
@@ -646,7 +646,7 @@ const contracts = {
           ],
         },
         YourContract: {
-          address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
+          address: "0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9",
           abi: [
             {
               inputs: [

diff --git a/packages/nextjs/hooks/noir/useProofGenerator.ts b/packages/nextjs/hooks/noir/useProofGenerator.ts
@@ -1,63 +1,26 @@
-import { Circuit, CircuitAbiParameters, CircuitName, CircuitParameterWitnesses, circuits } from "~~/utils/noir/circuit";
-import { NoirBrowser } from "~~/utils/noir/noirBrowser";
+import { BarretenbergBackend } from "@noir-lang/backend_barretenberg";
+import { Noir } from "@noir-lang/noir_js";
+import { Circuit, CircuitName, circuits } from "~~/utils/noir/circuit";
 
 let isGeneratingProof = false;
 
 export type HexString = `0x${string}`;
-export type ParsedArgs = Record<string, HexString[]>;
-
-function formatArgs(parameterWitnesses: CircuitParameterWitnesses, parsedArgs: ParsedArgs): HexString[] {
-  // NOTE: workaround for not being able to use named parameters in proof generation
-  const sortedKeys = Object.entries(parameterWitnesses)
-    .map(([key, paramPostitions]) => {
-      return {
-        key,
-        paramPostitions,
-      };
-    })
-    .sort((a, b) => {
-      return a.paramPostitions[0] - b.paramPostitions[0];
-    })
-    .map(({ key }) => key);
-
-  return sortedKeys.reduce((acc, key) => {
-    return acc.concat(parsedArgs[key]);
-  }, [] as HexString[]);
-}
-
-function getPublicInputsLength(parameters: CircuitAbiParameters) {
-  return parameters
-    .filter(param => param.visibility === "public")
-    .reduce((acc, param) => {
-      if (param.type.kind === "array") {
-        return acc + param.type.length;
-      } else {
-        return acc + 1;
-      }
-    }, 0);
-}
+export type ParsedArgs = Record<string, HexString[] | number>;
 
 // This function generates the proof ✅
 export const generateProof = async (circuitName: CircuitName, parsedArgs: ParsedArgs) => {
   isGeneratingProof = true;
-  const noir = new NoirBrowser();
   try {
     const circuit = circuits[circuitName] as Circuit<CircuitName>;
-    await noir.init(circuit.bytecode);
-    const formattedArgs = formatArgs(circuit.abi.param_witnesses, parsedArgs);
-    const witness: Uint8Array = await noir.generateWitness(formattedArgs);
-    const proof: Uint8Array = await noir.generateProof(witness);
-
-    const publicInputsLength = getPublicInputsLength(circuit.abi.parameters);
-    const slicedProof = proof.slice(32 * publicInputsLength);
+    const backend = new BarretenbergBackend(circuit);
+    const noir = new Noir(circuit, backend);
+    const { proof } = await noir.generateFinalProof(parsedArgs);
 
     return {
-      witness: Buffer.from(witness).toString("hex"),
-      proof: Buffer.from(slicedProof).toString("hex"),
+      proof: Buffer.from(proof).toString("hex"),
     };
   } finally {
     isGeneratingProof = false;
-    noir.destroy();
   }
 };
 

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -14,12 +14,12 @@
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
   "dependencies": {
-    "@aztec/bb.js": "^0.3.6",
     "@ethersproject/networks": "^5.7.1",
     "@ethersproject/providers": "^5.7.2",
     "@ethersproject/web": "^5.7.1",
     "@heroicons/react": "^2.0.11",
-    "@noir-lang/acvm_js": "git+https://[email protected]/noir-lang/acvm-js-wasm.git#b9d9ca9dfc5140839f23998d9466307215607c42",
+    "@noir-lang/backend_barretenberg": "^0.17.0",
+    "@noir-lang/noir_js": "^0.17.0",
     "@rainbow-me/rainbowkit": "1.0.8",
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",

diff --git a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx
@@ -50,8 +50,8 @@ export const parseForm = (form: TForm) => {
   const issuer_public_key_x = pub_key_array.slice(1, Math.round(pub_key_array.length / 2));
   const issuer_public_key_y = pub_key_array.slice(Math.round(pub_key_array.length / 2));
   return {
-    required_birth_year: [ethers.utils.hexZeroPad(ethers.utils.hexlify(form.requiredBirthYear), 32)],
-    subject_birth_year: [ethers.utils.hexZeroPad(ethers.utils.hexlify(form.birthYear), 32)],
+    required_birth_year: form.requiredBirthYear,
+    subject_birth_year: form.birthYear,
     issuer_public_key_x,
     issuer_public_key_y,
     subject_eth_address: buildNoirIntArray(form.personEthereumAddress),
@@ -118,10 +118,10 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
           The proof is generated in the browser using the following libraries:
           <ul>
             <li>
-              - <CodeText text="aztec/bb.js" />
+              - <CodeText text="noir-lang/backend_barretenberg" />
             </li>
             <li>
-              - <CodeText text="noir-lang/acvm_js" />
+              - <CodeText text="noir-lang/noir_js" />
             </li>
           </ul>
           Check out the implementation here:{" "}

diff --git a/packages/nextjs/utils/noir/noirBrowser.ts b/packages/nextjs/utils/noir/noirBrowser.ts
diff --git a/yarn.lock b/yarn.lock
@@ -36,17 +36,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@aztec/bb.js@npm:^0.3.6":
-  version: 0.3.6
-  resolution: "@aztec/bb.js@npm:0.3.6"
+"@aztec/bb.js@npm:0.8.10":
+  version: 0.8.10
+  resolution: "@aztec/bb.js@npm:0.8.10"
   dependencies:
     comlink: ^4.4.1
     commander: ^10.0.1
     debug: ^4.3.4
-    idb-keyval: ^6.2.1
+    tslib: ^2.4.0
   bin:
-    bb.js: dest/main.js
-  checksum: 49fff5414885025be8cefa1b52ac52265275f2a9121d389b8f6641088a5e4a9c44b25e754c5ff6616e1ccbb0ccfefec4a64a5862903d38fb3f3968a1e608532d
+    bb.js: dest/node/main.js
+  checksum: c77f6e27f626edca1477e4d94794d43b373dfcb527f00579e20270fc92794f9e4bc5df2c25ebbce564700c114cdf69e0b213ddb0192c24af4fc4cdf468918702
   languageName: node
   linkType: hard
 
@@ -2985,10 +2985,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noir-lang/acvm_js@git+https://[email protected]/noir-lang/acvm-js-wasm.git#b9d9ca9dfc5140839f23998d9466307215607c42":
-  version: 0.0.0-d576736
-  resolution: "@noir-lang/acvm_js@https://[email protected]/noir-lang/acvm-js-wasm.git#commit=b9d9ca9dfc5140839f23998d9466307215607c42"
-  checksum: 2c7f8ccd48d66533bfc7e0d13418f5d1130e0bdbd3484dd1bc62b45a61d15bb3571036cf17931eca36e57cac319bf130d01614ea7c2dc3bd50ca681d3b60e81b
+"@noir-lang/acvm_js@npm:0.29.0":
+  version: 0.29.0
+  resolution: "@noir-lang/acvm_js@npm:0.29.0"
+  checksum: 8ea2944c2f4bfb3f1160010711ab725f52925fbe214cb920116d14c20cddb1515c61718010dd6a4ccdaf8a56759adfe005d238a3fc9670dd7071dff7d84d4cfd
+  languageName: node
+  linkType: hard
+
+"@noir-lang/backend_barretenberg@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "@noir-lang/backend_barretenberg@npm:0.17.0"
+  dependencies:
+    "@aztec/bb.js": 0.8.10
+    "@noir-lang/types": 0.17.0
+    fflate: ^0.8.0
+  checksum: 4ad3a30a0cf502de49caced3ffdeffb6daa679362470b02bcfcbbe67daf7283661c3f8767cedd9410cb7b004268ec83832e2a9dadae97f44df66a3a3e4c272d1
+  languageName: node
+  linkType: hard
+
+"@noir-lang/noir_js@npm:^0.17.0":
+  version: 0.17.0
+  resolution: "@noir-lang/noir_js@npm:0.17.0"
+  dependencies:
+    "@noir-lang/acvm_js": 0.29.0
+    "@noir-lang/noirc_abi": 0.17.0
+    "@noir-lang/types": 0.17.0
+  checksum: 9ecaeca11b5740fb99d4198377cf8bb1116b668dd7d9dcc1f80e6a515893e5eb9b70f3db066643239c75b6008c3c2ccb719f5d4d4e51324a61ca31d26c7ecf2a
+  languageName: node
+  linkType: hard
+
+"@noir-lang/noirc_abi@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@noir-lang/noirc_abi@npm:0.17.0"
+  checksum: d7e1692f2c1c098b400918593bc20107c28fc12238b0dffbe1676cc134d4d121fa0d36c537b4e355d278014da83fe1a404432355f121de6d51326dd9486b47bc
+  languageName: node
+  linkType: hard
+
+"@noir-lang/types@npm:0.17.0":
+  version: 0.17.0
+  resolution: "@noir-lang/types@npm:0.17.0"
+  dependencies:
+    "@noir-lang/noirc_abi": 0.17.0
+  checksum: 9bc06cbfe77e447614c5751f451ec1f195803b3eea242cac8c8065b4d5c23fbf12aff6c24cfa9a009234180506daeb60d822f01b689b35121bb85b9acf591894
   languageName: node
   linkType: hard
 
@@ -3682,12 +3720,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@se-2/nextjs@workspace:packages/nextjs"
   dependencies:
-    "@aztec/bb.js": ^0.3.6
     "@ethersproject/networks": ^5.7.1
     "@ethersproject/providers": ^5.7.2
     "@ethersproject/web": ^5.7.1
     "@heroicons/react": ^2.0.11
-    "@noir-lang/acvm_js": "git+https://[email protected]/noir-lang/acvm-js-wasm.git#b9d9ca9dfc5140839f23998d9466307215607c42"
+    "@noir-lang/backend_barretenberg": ^0.17.0
+    "@noir-lang/noir_js": ^0.17.0
     "@rainbow-me/rainbowkit": 1.0.8
     "@trivago/prettier-plugin-sort-imports": ^4.1.1
     "@types/node": ^17.0.35
@@ -11182,13 +11220,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"idb-keyval@npm:^6.2.1":
-  version: 6.2.1
-  resolution: "idb-keyval@npm:6.2.1"
-  checksum: 7c0836f832096086e99258167740181132a71dd2694c8b8454a4f5ec69114ba6d70983115153306f0b6de1c8d3bad04f67eed3dff8f50c96815b9985d6d78470
-  languageName: node
-  linkType: hard
-
 "ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"