✨Works out of the box guarantee. If you face any issue at all, hit us up on Telegram and we will write the integration for you.


Publish on chain using wagmi

At this stage, we assume the you followed the steps at ReactJs.

Install packages.

npm install wagmi viem@2.x @tanstack/react-query --legacy-peer-deps

Setup your React codebase

We will submit the proof on chain once we get the success callback.

import "./App.css";
import { Reclaim } from "@reclaimprotocol/js-sdk";
import { useEffect, useState } from "react";
import { WagmiProvider } from "wagmi";
import { config } from "./config";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import VerifyProof from "./VerifyProof";
const queryClient = new QueryClient();
function App() {
  const [url, setUrl] = useState("");
  const [ready, setReady] = useState(false);
  const [proof, setProof] = useState({});
  const reclaimClient = new Reclaim.ProofRequest('YOUR_APPLICATION_ID_HERE') //TODO: replace with your applicationId
 async function generateVerificationRequest() {
    const providerId = 'PROVIDER_ID' //TODO: replace with your provider ids you had selected while creating the application
    await reclaimClient.addContext(
      (`user's address`),
      ('for acmecorp.com on 1st january')
    await reclaimClient.buildProofRequest(providerId)
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
    await reclaimClient.startSession({
      onSuccessCallback: proofs => {
        console.log('Verification success', proofs)
        // Your business logic here
      onFailureCallback: error => {
        console.error('Verification failed', error)
        // Your business logic here to handle the error
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <div className="App">
          <button onClick={() => generateVerificationRequest()}>Generate Verification Request</button>
          <button onClick={() => window.open(url, "_blank")}>Open link</button>
          {ready && <VerifyProof proof={proof}></VerifyProof>}
export default App;

Create an abi.js file.

export const abi = YOUR_ABI
 |- abi.js
 |- App.js

Copy your ABI to the created file.

Include your wagmi config.

 |- abi.js
 |- App.js
 |- config.js

Populate the config with the following.

import { http, createConfig } from "wagmi";
import { mainnet, sepolia, polygonMumbai } from "wagmi/chains";
import { injected } from "wagmi/connectors";
export const config = createConfig({
  chains: [mainnet, sepolia, polygonMumbai],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    [polygonMumbai.id]: http(),

Create a VerifyProof component.

 |- abi.js
 |- App.js
 |- config.js
 |- VerifyProof.jsx

Import wagmi, ABI, and Reclaim class to VerifyProof.

import { useState, useEffect } from "react";
import { writeContract } from "@wagmi/core";
import { abi } from "./abi";
import { config } from "./config";
import { Reclaim } from "@reclaimprotocol/js-sdk";

Add the following code to VerifyProof.

export default function VerifyProof(props) {
  const [proof, setProof] = useState({});
  const [verified, setVerified] = useState(false);
  useEffect(() => {
    const newProof = Reclaim.transformForOnchain(props.proof);
  }, []);

Render a view that prompts the user to submit proofs.

return (
      onClick={async () => {
        const hash = await writeContract(config, {
          abi: abi,
          address: "0xDEaeD0f03d7598f2D3863e69A3e00918C5d0cF64", //TODO : replace with your contract's address
          functionName: "verifyProof",
          chainId: 80001, //TODO : replace with your chain id
          args: [proof],
        if (hash) {
      Verify Proof
    {verified && <p> Proof verified </p>}
    <style jsx="true">{`
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      .button {
        border: solid 1px #ccc;
        margin: 0 0 20px;
        border-radius: 3px;