Quickstart

Clone the client contract repo.

git clone https://github.com/reclaimprotocol/gear-sdk-onchain-integration.git
cd gear-sdk-onchain-integration
cargo b --workspace

Add your wallet information.

As stated in the README, add your wallet credentials to your js/.env as specified in js/.env.example.

MNEMONIC= // Your mnemonic

Deploy contract.

Follow steps at Gear Wiki to set up a wallet, generate artifiacts, and deploy through IDEA. Upon deployment, add your contract address to your js/.env.

ADDRESS= // Your contract address

Verify a proof.

Give the js/index.js file a quick read, make sure that you have the correct RPCs and contract addresses.

There are three functions of interest here:

• initiate: Pings the contract to bootstrap an initial state.

• addEpoch: Adds witnesses for epochs.

• verifyProof: Verifies a proof.

Run the script with npm run start. You may comment and un-comment depending on your purpose, but note that functions should be called in the order stated above.

Features

• Proof Submission: Generate proof requests and submit them on-chain.
• Proof Verification: Verify submitted proofs directly through the smart contract.
• Wallet Connection: Built-in wallet connection.

1. Clone the Repository

Run this command:

git clone https://github.com/reclaimprotocol/reclaim-gear-example.git
cd reclaim-gear-example

2. Install Dependencies

Run this command:

npm install

3. Code Configuration

In src/App.tsx, fill in the necessary Reclaim credentials and replace TODO comments with your application-specific data:

const APP_ID = "YOUR_APP_ID"; // Replace with your application ID
const providerId = "YOUR_PROVIDER_ID"; // Replace with your provider ID
const APP_SECRET = "YOUR_APP_SECRET"; // Replace with your app secret

In src/config/constants.js you can find the necessary configuration to connect the wallet and interact with the smart contract. You can change depending on what network you're using:

export const GEAR_NODE = "replace-this-with-gear-node-on-the-wanted-network";

4. Update Contract Address

If you deployed a custom contract, update the contract address and the metadata in src/config/constants.js :

export const CONTRACT = "replace-with-your-contract-address";
export const METADATA = "replace-with-your-metadata";

Usage

After configuration, you can run the project locally to test the proof verification process.

Start the Application

Run this command:

npm run start

1. Connect Wallet: Ensure your wallet is connected and set to the correct network.
2. Request Proof: Click the "Create Claim QR Code" button to generate a QR code for proof submission.
3. Verify Proof: Once the proof is received, a "Verify Proof" button appears. Click it to submit a transaction for on-chain verification.
4. View Transaction: After verification, a link to view the transaction on the explorer will be available.

Code Overview

src/App.js

• Proof Request: Configures and initiates proof requests through Reclaim’s SDK.
• QR Code Generation: Displays a QR code for users to scan and submit proofs.
• Proof Submission: Handles on-chain submission upon proof verification.

src/verify-proof.jsx

• Proof Transformation: Transforms the received proof to be compatible with the smart contract.
• Verification Process: Sends a transaction to verify the proof on-chain and provides a link to the transaction on the explorer.

Troubleshooting

• Wallet Connection Issues: Ensure that your wallet is set to the correct network that you contract is deployed on and refresh the page if the connection fails.
• Proof Submission Fails: Double-check your Reclaim credentials, contract address, and that the correct network is selected.