Quickstart
Publish On-Chain with Reclaim Contract on Mina
Pre-requisite
At this stage, we assume that you are familiar with the steps at ReactJs.
Before diving into this walkthrough, ensure you're familiar with the basic concepts of zkApps on the Mina Protocol and have a compatible wallet installed. We'll guide you through setting up your environment, deploying the smart contract, and running the frontend application.
Setting Up Your Wallet
-
Install Auro Wallet: Download and install the Auro Wallet extension for your browser.
-
Switch to Mina Devnet:
- Open the Auro Wallet extension.
- Click on the network selector (usually at the top of the extension window).
- Select "Devnet" from the list of networks.
-
Fund Your Wallet:
- Visit the Mina Faucet to obtain testnet MINA tokens.
- Enter your public key from Auro Wallet.
- Select "Devnet" as the network.
- Click "Submit" to request funds.
Accessing the Code
Clone the repositories for both the smart contract and the frontend:
- Reclaim Contract Repository: GitLab Link
- Frontend Example: GitLab Link
Contract Deployment
If you don't need to modify the smart contract, you can skip these steps and use our already deployed contract on the Mina Devnet . However, to understand the full process or deploy your own version, follow the instructions below.
Overview of the Verification Process
The smart contract performs the following steps during proof verification:
- Signature Validation: Checks that the proof contains valid signatures.
- Hash Comparison: Hashes the provided ClaimInfo and compares it to the identifierField in the claim to ensure integrity.
- Witness Verification: Validates the signed witnesses against a Merkle root stored on-chain.
- Duplicate Prevention: Ensures no duplicate signatures exist among the witnesses.
Clone the zkApp Contract Repository
Start by cloning the smart contract repository and navigating to the project directory.
Install Dependencies
Configure the Deployment
Run the zkApp CLI configuration command to set up your deployment settings.
Configuration Prompts:
- Deploy Alias Name:
devnet
- Target Network Kind:
Testnet
- Mina GraphQL API URL:
https://api.minascan.io/node/devnet/v1/graphql
- Transaction Fee:
0.1
When prompted for the fee payer account:
- Select:
Create a new fee payer key pair
- Alias for Fee Payer Account:
deploy-account
Note: The private key will be stored in plain text on your computer. Do not use an account that holds significant funds.
Fund Your Fee Payer Account
After configuration, fund your fee payer account:
- Copy your fee payer public key from the CLI output.
- Visit the Mina Faucet.
- Enter your fee payer public key.
- Select "Devnet" as the network.
- Click "Submit" to request funds.
Wait a few minutes for the transaction to be included in a block.
Compile the Smart Contract
Compile your smart contract using the following command:
Deploy the zkApp
Deploy your smart contract to the Mina Devnet:
When prompted, select the deploy alias you created earlier (devnet
).
Confirm Deployment Details:
Review the details provided by the CLI and type yes
to confirm.
Verify Deployment
After deployment, you'll receive a transaction hash. Visit the Mina block explorer to verify your smart contract:
- Devnet Explorer: Minascan Devnet Explorer
Frontend Development
Cloning the frontend repo.
Install Dependencies
Install the necessary npm packages:
Configure the Frontend Application
Open app/page.tsx
in your code editor and update the following variables:
-
Contract Address:
Replace the placeholder zkApp contract address with your own if you deployed your contract.
-
Reclaim Protocol Credentials:
Replace the example
APP_ID
,APP_SECRET
, andPROVIDER_ID
with your actual credentials.
Code Overview (app/page.tsx
)
This file contains the main frontend logic, including initializing the Reclaim proof request, handling user interactions, and connecting to the zkApp worker.
Key Sections:
-
Setup and Initialization:
-
Generating the Verification Request:
-
Sending the Transaction:
Code Overview (app/zkappWorker.ts
)
This file handles the interaction with the zkApp smart contract in a web worker environment.
Key Sections:
-
Configuring the Network:
-
Loading the contract and initlizing the Zkapp Instanc:
-
Getting number of Proofs has already been verified on in the ZKapp:
-
Reconstructing the Proof and the transaction:
Running the Frontend Application
Start the development server:
Interacting with the Application
- Connect Your Wallet:
- Open the application in your browser (
http://localhost:3000
). - Auro Wallet will prompt you to connect. Approve the connection.
- Open the application in your browser (
- Generate Claim QR Code:
- Click on "Create Claim QR Code".
- A QR code will appear on the screen.
- Scan QR Code with Your Phone:
- Use your phone to scan the QR code.
- Complete the verification process as prompted.
- Verify Proof on Mina Network:
- After successful verification, a "Verify Proof" button will appear.
- Click on "Verify Proof".
- Approve the transaction in Auro Wallet when prompted.
- View Transaction:
- Once the transaction is processed, a link to view it on the Mina block explorer will appear.
- Click on "View transaction" to see the details.