From bdfce31f13ea61603ae04ced3c355f6be8b68e85 Mon Sep 17 00:00:00 2001 From: Ramiro Date: Thu, 7 Sep 2023 11:09:38 +0200 Subject: [PATCH] fix: content-details (#41) --- packages/nextjs/components/Header.tsx | 2 +- .../AgeRestrictedContractExecutor.tsx | 14 ++--- .../BirthDateSignature.tsx | 22 ++++---- .../age-restricted-example/GenerateProof.tsx | 54 ++++++++++++------- .../age-restricted-example/ZkStepsIntro.tsx | 2 +- .../pages/age-restricted-example/index.tsx | 2 +- 6 files changed, 56 insertions(+), 40 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..4414eb2 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 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.

    - 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:{" "} {" "} @@ -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..9691b7f 100644 --- a/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx +++ b/packages/nextjs/pages/age-restricted-example/GenerateProof.tsx @@ -94,37 +94,51 @@ 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 + proof-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 out 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) 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. -

    -
    -

    - *Note that the "signed age" and "ethereum address", must be the same as the ones you used - to generate the signed message. + , but we could recompile it using .

    @@ -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 ( <>