This repo contains the frontend implementation related to the ZK-SBT protocol outlined in the original ZK-SBT repo.
- Run
yarn install
andyarn dev
to locally deploy the frontend - Visit
http://localhost:3000/
and move to Goerli testnet inside your wallet - Click
Mint a test SBT
to mint an Age SBT to your wallet. The claim attesting user's age and the signature of the claim are passed to the user off-chain. The SBT only contains an hash of the signature. - Input the
claim
and thesignature
to generate the proof. When generating the proof it gets displayed in 4 blocks.A
,B
andC
are a set of elliptic curve points that represent the actual proof, whilepublic
represents the public input used inside the Snark. - Once the proof is generated click
Collect Airdrop
. This will generate a call to thePrivate Over18 Airdrop Contract
passing the proof generated in the previous step as calldata.
The goal here is to showcase how easy is to integrate ZK based verification inside your dapp. Let's consider a Dapp that only allows user over 18 to participate to the airdrop. The integration must happen on the smart contract level and on the frontend level
The first integration happens on a smart contract level:
// @notice verifies the validity of the proof, and make further verifications on the public input of the circuit, if verified add the address to the list of eligible addresses
function collectAirdrop(uint[2] memory a,
uint[2][2] memory b,
uint[2] memory c,
uint[72] memory input,
uint256 _tokenID
) public
{
// Further check on the public inputs are required, this is a simplified version
require(
verifier.verifyProof(a, b, c, input),
"Proof verification failed"
);
isElegibleForAirdrop[msg.sender] = true;
}
}
The core of the verification lies in verifier.verifyProof(a, b, c, input)
.
The verifier contract is an external contract deployed by the ZK SBT protocol creator. To verify the proof inside your Dapp all you need is to make an external call to that contract.
Deployed Private Over18 Airdrop contract
If another Dapp wants to set entry conditions based on a creditScore claim the process looks the same. They just need to integrate an external call to the verifier.sol
contract deployed by the protocol originator inside their own smart contract that manages the lending conditions.
- Install SnarkJS in your client-side application
- Add a proof generator hook on the frontend. For this you only need the circuit-specific zkey file
circuit_final.zkey
that contains the proving and verification keys and circuit compiled in .wasm formatcircuit.wasm
. The proof generator will then take the input from the user such asClaim
andSignature
to generate the proof.Claim
is the only private input for our circuit and it should never be shared with the verfier. That's why the proof generation happens entirely on the brower level. - Add a collect drop hook on the frontend to let user make a call to the
collectAirdrop
function over Over18Airdrop smart contract. The proof generated in the previous step will be part of the calldata.
The source code from the front-end application is massively borrowed from a16z.
The .babelrc
config file has been added to solve a BigInt compatibility problem generated inside the browser.