Publish on chain using wagmi

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.

Getting Started

Follow these steps to set up the project locally.

1. Clone the Repository

Run this command:

git clone https://gitlab.reclaimprotocol.org/starterpacks/reclaim-wagmi-example.git
cd reclaim-wagmi-example

2. Install Dependencies

Run this command:

npm install

3. Code Configuration

We included filler data for Steam ID provider which you can use for testing. You can create your own application credentials in Reclaim's devtool (opens in a new tab).

In src/App.js, 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

Set your metadata.

This React app publishes Reclaim proofs to OP Mainnet, replace address and chain id as per your use case.

      <button
        className="button"
        onClick={async () => {
          const hash = await writeContract(config, {
            abi: abi,
            address: "0xe79A453bD088F4A58656b315a7C1f8Ea3473CCf1", //TODO : replace with your contract's address
            functionName: "verifyProof",
            chainId: 10, //TODO : replace with your chain id
            args: [proof],
          });
          if (hash) {
            setVerified(true);
          }
        }}
      >

5. Switch to another chain

If you are using another chain after replacing the chainId and address in src/verify-proof.jsx you need to make sure the network is added to wagmi configuration in src/config.js if your network doesn't exist just import it from "wagmi/chains" and add it to the config.

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.

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.