From 6c28640577d7b505ede854d7430bbfe5390e8b8d Mon Sep 17 00:00:00 2001 From: Ramiro Date: Wed, 6 Sep 2023 17:23:18 +0200 Subject: [PATCH 1/3] Update text content --- packages/nextjs/components/Header.tsx | 2 +- .../AgeRestrictedContractExecutor.tsx | 14 +++--- .../BirthDateSignature.tsx | 22 ++++---- .../age-restricted-example/GenerateProof.tsx | 50 +++++++++++++------ .../age-restricted-example/ZkStepsIntro.tsx | 2 +- .../pages/age-restricted-example/index.tsx | 2 +- 6 files changed, 54 insertions(+), 38 deletions(-) diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index 5381b0e..688847a 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -39,7 +39,7 @@ export const Header = () => {
  • 🎈 - Age restriction with ZK + ZK Age Restriction
  • diff --git a/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx b/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx index 5596d7c..42bba21 100644 --- a/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx +++ b/packages/nextjs/pages/age-restricted-example/AgeRestrictedContractExecutor.tsx @@ -20,18 +20,18 @@ export const AgeRestrictedContractExecutor = () => {

    Step 3: Getting the balloon🎈 NFT

    - The ballon store is using the same contract as the{" "} + The Ballon Store is using the same contract as the{" "} Speedrun Ethereum challange , with some additions. They've added a function , with the{" "} - -modifier. This implementation can be found in{" "} + -modifier. In this project, the implementation can be found in{" "} - {" "} - in our project. -
    + +

    +

    The modifier constructs the public inputs and calls the proof-verifier in ( @@ -40,8 +40,8 @@ export const AgeRestrictedContractExecutor = () => { what we are actually proving.

    - Now that Alice has received a balloon token, she can redeem that digital token at the store - to get the actual ballloon. + Now that Alice has received a balloon token, she can redeem that digital + token at the store to get the actual balloon.

    diff --git a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx index 7104782..3fa3e55 100644 --- a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx +++ b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx @@ -64,16 +64,16 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe return (
    -

    Step 1: Town Hall πŸ› generates the signature πŸ“œ

    +

    Step 1: Town Hall πŸ› signs πŸ“œ the birth date

    - 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. + Alice and the Balloon Store need to agree on who to trust in order to + certify Alice age. In this example the Town Hall acts as a trusted third party, but on a + different scheme 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.

    - 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 previously decide to use the same claim format as the Town Hall, to facilitate the zk + proof verification on a later step. You can find the construction of this claim here:{" "} {" "} @@ -82,11 +82,9 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe ).

    - 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's Ethereum address is not done in this - example. The code for producing the signature currently includes the Town Hall'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's private key, the Town Hall is actually signing the + confirmation that Alice was born in a given year AND that she has control + over certain Ethereum address.

    diff --git a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx index 8d99ec8..0d44cab 100644 --- a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx +++ b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx @@ -94,38 +94,52 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number

    Step 2: Generating the proof βœ…

    - 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 Alice to really know that she's not sharing any private information with + the Ballon Store two things should be possible: +

      +
    1. + 1. The code that generates the the proof should be open source for Alice to review +
      2. +
    2. + 2. The proof generation should happen in an environment trusted byAlice (ex: locally in + her laptop or phone) +
      3. +

    - The circuit is located in{" "} + A circuit written in Noir is used for generating the proof and for generating a + Solidity-verifier. The Ballon Store will use the proof as input to execute the verifier + contract on-chain:{" "} - . It'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.

    - The proof is generated in the browser from the file{" "} + The proof is generated in the browser using the following libraries: +

      +
    • + * +
      • +
    • + * +
      • +
    + Check the implementation here:{" "} - . In this file you can see that the proof is generated by using the imported libraries{" "} - and . The proof can also be generated - locally, by calling . The predefined circuit ABI code used to generate the - proof can be found in{" "} +

    +

    + The proof can also be generated locally (outside of a browser), by calling . +

    +

    + The predefined circuit ABI code used to generate the proof can be found in{" "} , but we could recompile it using . is the CLI-tool for Noir.

    -
    -

    - *Note that the "signed age" and "ethereum address", must be the same as the ones you used - to generate the signed message. -

    @@ -200,6 +214,10 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
    +

    + * Note that the "signed age" and "ethereum address", must be the same as the ones you used + to generate the signed message. +

    ); diff --git a/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx b/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx index d3421be..ad061c9 100644 --- a/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx +++ b/packages/nextjs/pages/age-restricted-example/ZkStepsIntro.tsx @@ -9,7 +9,7 @@ export const ZkStepsIntro = ({ setCurrentStep, yearTenYearsAgo }: ZkStepsIntroPr
    -

    Hello there

    +

    ZK Age Restriction

    Alice has heard that balloon store in town is handing out balloons🎈 to anyone who is 10 years old or younger. However, Alice does not want to share her age with anyone. Lucky for her, the balloon store has a diff --git a/packages/nextjs/pages/age-restricted-example/index.tsx b/packages/nextjs/pages/age-restricted-example/index.tsx index 434cc22..98896e4 100644 --- a/packages/nextjs/pages/age-restricted-example/index.tsx +++ b/packages/nextjs/pages/age-restricted-example/index.tsx @@ -6,7 +6,7 @@ const ExampleZk: NextPage = () => { return ( <>

    From 4c3197e0dabf9d1ca6f3d6bcf152c926928f8229 Mon Sep 17 00:00:00 2001 From: Ramiro Date: Thu, 7 Sep 2023 10:43:08 +0200 Subject: [PATCH 2/3] Content update from feedback. --- .../BirthDateSignature.tsx | 6 +++--- .../age-restricted-example/GenerateProof.tsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx index 3fa3e55..cbc5444 100644 --- a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx +++ b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx @@ -67,12 +67,12 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe

    Step 1: Town Hall πŸ› signs πŸ“œ the birth date

    Alice and the Balloon Store need to agree on who to trust in order to - certify Alice age. In this example the Town Hall acts as a trusted third party, but on a - different scheme the certifying entity could be completely different. The only requirement is that both Alice + certify Alice age. In this example the Town Hall 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.

    - The Ballon Store has previously decide to use the same claim format as the Town Hall, to facilitate the zk + The Ballon Store has implemented the same claim format as the Town Hall, this enables a more straght forward proof verification on a later step. You can find the construction of this claim here:{" "} diff --git a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx index 0d44cab..9691b7f 100644 --- a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx +++ b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx @@ -108,8 +108,8 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number

    A circuit written in Noir is used for generating the proof and for generating a - Solidity-verifier. The Ballon Store will use the proof as input to execute the verifier - contract on-chain:{" "} + proof-verifier. The Ballon Store will use the proof as input to execute the verifier contract + on-chain:{" "} @@ -118,27 +118,27 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number The proof is generated in the browser using the following libraries:

    • - * + -
    • - * + -
    - Check the implementation here:{" "} + Check out the implementation here:{" "}

    - The proof can also be generated locally (outside of a browser), by calling . + The proof can also be generated locally (outside of a browser) using , the CLI-tool + for Noir. Just execute in the terminal.

    The predefined circuit ABI code used to generate the proof can be found in{" "} - , but we could recompile it using . is the CLI-tool - for Noir. + , but we could recompile it using .

    From d07658f93f8e80206b0cb14c6ef257a844d5a996 Mon Sep 17 00:00:00 2001 From: Ramiro Date: Thu, 7 Sep 2023 11:01:09 +0200 Subject: [PATCH 3/3] Fix typos --- .../age-restricted-example/BirthDateSignature.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx index cbc5444..4414eb2 100644 --- a/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx +++ b/packages/nextjs/pages/age-restricted-example/BirthDateSignature.tsx @@ -67,13 +67,13 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe

    Step 1: Town Hall πŸ› signs πŸ“œ the birth date

    Alice and the Balloon Store need to agree on who to trust in order to - certify Alice age. In this example the Town Hall 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. + certify Alice' age. In this example the Town Hall 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.

    - The Ballon Store has implemented the same claim format as the Town Hall, this enables a more straght forward - proof verification on a later step. You can find the construction of this claim here:{" "} + 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:{" "} {" "}