Merge branch 'main' into feat/feedback-improvements

packages/nextjs/components/Header.tsx

@@ -39,7 +39,7 @@ export const Header = () => {
       <li>
         <NavLink href="/age-restricted-example">
           <span className="h-4 w-4">🎈</span>
-          Age restriction with ZK
+          ZK Age Restriction
         </NavLink>
       </li>
       <li>

packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx

@@ -41,18 +41,18 @@ export const AgeRestrictedContractExecutor = () => {
       <div>
         <h1 className="text-3xl font-bold">Step 3: Getting the balloon 🎈</h1>
         <p>
-          The ballon store is using the same <CodeText text="TokenVendor.sol" /> contract as the{" "}
+          The <strong>Ballon Store</strong> is using the same <CodeText text="TokenVendor.sol" /> contract as the{" "}
           <a className="link" href="https://speedrunethereum.com/challenge/token-vendor">
             Speedrun Ethereum challange
           </a>
           , with some additions. They&apos;ve added a function <CodeText text="getFreeToken" />, with the{" "}
           <CodeText text="onlyKids" />
-          -modifier. This implementation can be found in{" "}
+          -modifier. In this project, the implementation can be found in{" "}
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/hardhat/contracts/BalloonVendor.sol">
             <CodeText text="packages/hardhat/contracts/BalloonVendor.sol" />
-          </a>{" "}
-          in our project.
-          <br />
+          </a>
+        </p>
+        <p>
           The modifier constructs the public inputs and calls the proof-verifier in (
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/hardhat/contracts/verifiers/LessThanSignedAge.sol">
             <CodeText text="packages/hardhat/contracts/verifiers/LessThanSignedAge.sol" />
@@ -61,8 +61,8 @@ export const AgeRestrictedContractExecutor = () => {
           what we are actually proving.
         </p>
         <p>
-          Now that Alice has received a balloon <strong>token</strong>, she can redeem that digital token at the store
-          to get the actual ballloon.
+          Now that <strong>Alice</strong> has received a balloon <strong>token</strong>, she can redeem that digital
+          token at the store to get the actual balloon.
         </p>
       </div>
       <div>

packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx

@@ -64,16 +64,16 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
   return (
     <div className="grid grid-cols-2 gap-6 max-w-7xl">
       <div>
-        <h1 className="text-3xl font-bold">Step 1: Town Hall 🏛 generates the signature 📜</h1>
+        <h1 className="text-3xl font-bold">Step 1: Town Hall 🏛 signs 📜 the birth date</h1>
         <p>
-          Alice recognizes that, in order for her to not have to share her age with the balloon store, she at least has
-          to share her age with a trusted third party. In this case, the balloon store has selected the Town Hall to be
-          the trusted third party 🏛. Alice accepts the fact that she has to share her age with the Town Hall.
+          <strong>Alice</strong> and the <strong>Balloon Store</strong> need to agree on who to trust in order to
+          certify Alice&apos; age. In this example the <strong>Town Hall</strong> acts as a trusted third party, but in
+          a different set-up the certifying entity could be completely different. The only requirement is that both
+          Alice & the Ballon Store trust the signature (certification) provided by this third party.
         </p>
         <p>
-          When the balloon store implemented their zero knowledge proof solution they made sure that they are using the
-          same format as the Town Hall for constructing the claim that is being signed. In this project the claim
-          construction for the Town Hall can be found in{" "}
+          The Ballon Store has implemented the same claim format as the Town Hall, this enables the proof verification
+          on a later step. You can find the construction of this claim here:{" "}
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx">
             <CodeText text="packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx" />
           </a>{" "}
@@ -82,11 +82,9 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
           ).
         </p>
         <p>
-          What the Town Hall actually signs is that they confirm that Alice is born in a certain year AND that she has
-          control over a certain Ethereum address. The check of Alice&apos;s Ethereum address is not done in this
-          example. The code for producing the signature currently includes the Town Hall&apos;s hardcoded private key.
-          This can be improved in many ways, but at a minimum it should be the Towna Hall eployee that provides it to
-          the UI.
+          Using it&apos;s <strong>private key</strong>, the <strong>Town Hall</strong> is actually signing the
+          confirmation that <strong>Alice</strong> was born in a given year <strong>AND</strong> that she has control
+          over certain Ethereum <strong>address</strong>.
         </p>
       </div>
       <div>

packages/nextjs/pages/age-restricted-example/GenerateProof.tsx

@@ -94,37 +94,51 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
       <div>
         <h1 className="text-3xl font-bold">Step 2: Generating the proof ✅</h1>
         <p>
-          One of the reasons that Alice knows that she is not sharing her birth year with anyone is that the proof
-          generation is open source, and she herself can double check the code. Furthermore she can even generate the
-          proof herself locally. This is actually what we are doing in this implementation.
+          In order for <strong>Alice</strong> to really know that she&apos;s not sharing any private information with
+          the <strong>Ballon Store</strong> two things should be possible:
+          <ol>
+            <li>
+              1. The code that generates the the proof should be <strong>open source</strong> for Alice to review
+            </li>
+            <li>
+              2. The proof generation should happen in an environment trusted by<strong>Alice</strong> (ex: locally in
+              her laptop or phone)
+            </li>
+          </ol>
         </p>
         <p>
-          The circuit is located in{" "}
+          A circuit written in <strong>Noir</strong> is used for generating the proof and for generating a
+          proof-verifier. The <strong>Ballon Store</strong> will use the proof as input to execute the verifier contract
+          on-chain:{" "}
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/noir/circuits/LessThanSignedAge/src/main.nr">
             <CodeText text="packages/noir/circuits/LessThanSignedAge/src/main.nr" />
           </a>
-          . It&apos;s written using Noir. It is the Noir-circuit that is used both for generating the proof and for
-          generating a Solidity-verifier that can help the balloon store verify the proof on-chain.
         </p>
         <p>
-          The proof is generated in the browser from the file{" "}
+          The proof is generated in the browser using the following libraries:
+          <ul>
+            <li>
+              - <CodeText text="aztec/bb.js" />
+            </li>
+            <li>
+              - <CodeText text="noir-lang/acvm_js" />
+            </li>
+          </ul>
+          Check out the implementation here:{" "}
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/nextjs/utils/noir/noirBrowser.ts">
             <CodeText text="packages/nextjs/utils/noir/noirBrowser.ts" />
           </a>
-          . In this file you can see that the proof is generated by using the imported libraries{" "}
-          <CodeText text="aztec/bb.js" /> and <CodeText text="noir-lang/acvm_js" />. The proof can also be generated
-          locally, by calling <CodeText text="nargo prove" />. The predefined circuit ABI code used to generate the
-          proof can be found in{" "}
+        </p>
+        <p>
+          The proof can also be generated locally (outside of a browser) using <CodeText text="nargo" />, the CLI-tool
+          for Noir. Just execute <CodeText text="nargo prove" /> in the terminal.
+        </p>
+        <p>
+          The predefined circuit ABI code used to generate the proof can be found in{" "}
           <a href="https://github.com/Kryha/scaffold-eth-2-noir/blob/main/packages/nextjs/generated/circuits.json">
             <CodeText text="packages/nextjs/generated/circuits.json" />
           </a>
-          , but we could recompile it using <CodeText text="nargo compile" />. <CodeText text="nargo" /> is the CLI-tool
-          for Noir.
-        </p>
-        <br />
-        <p>
-          *Note that the &quot;signed age&quot; and &quot;ethereum address&quot;, must be the same as the ones you used
-          to generate the signed message.
+          , but we could recompile it using <CodeText text="nargo compile" />.
         </p>
       </div>
       <div>
@@ -200,6 +214,10 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
             </div>
           </div>
         </div>
+        <p>
+          * Note that the &quot;signed age&quot; and &quot;ethereum address&quot;, must be the same as the ones you used
+          to generate the signed message.
+        </p>
       </div>
     </div>
   );

packages/nextjs/pages/age-restricted-example/index.tsx

@@ -6,7 +6,7 @@ const ExampleZk: NextPage = () => {
   return (
     <>
       <MetaHeader
-        title="Example UI ZK | Scaffold-ETH 2"
+        title="ZK Age Restriction| Scaffold-ETH 2 Noir"
         description="Example UI ZK, showing how to use ZK circuits in your UI."
       ></MetaHeader>
       <div className="min-h-screen flex items-center flex-col pt-6 lg:pt-20">