Publish on chain using wagmi

Pre-requisite

You can access the code of this walkthrough on Gitlab:

Frontend example (opens in a new tab).

This starter project illustrates the process of building a React-Reclaim client with wagmi to handle blockchain interactions.

Code Discovery

Clone the starter repo.

git clone https://gitlab.reclaimprotocol.org/starterpacks/reclaim-wagmi-example
cd reclaim-wagmi-example
npm i --legacy-peer-deps
npm start

Set your metadata.

This React app publishes Reclaim proofs to Celo Alfajores testnet, replace address and chain id as per your use case. In addition, 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).

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

Publish proof.

As in Reclaim React SDK, our starter app shows a QR-code for you to scan and create proof. Upon successfull proof generation, A button with the text Verify Proof appears. Clicking this button prompts you to publish the obtained proof.

Supported Networks Overview