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)
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        APP_SECRET //TODO : replace with your APP_SECRET
      )
    )
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest()
 
    setUrl(requestUrl)
 
    await reclaimClient.startSession({
      onSuccessCallback: proofs => {
        console.log('Verification success', proofs)
        // Your business logic here
        setReady(true)
        setProof(proofs[0])
      },
      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>}
        </div>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
 
export default App;

Create an abi.js file.

export const abi = YOUR_ABI

src/
 |- abi.js
 |- App.js

Copy your ABI to the created file.

Include your wagmi config.

src/
 |- 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.

src/
 |- 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);
    setProof(newProof);
  }, []);
}

Render a view that prompts the user to submit proofs.

return (
  <div>
    <button
      className="button"
      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) {
          setVerified(true);
        }
      }}
    >
      Verify Proof
    </button>
    {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;
      }
    `}</style>
  </div>
);

Supported Networks Overview