Publish on chain using wagmi
Pre-requisite
You can access the code of this walkthrough on Gitlab:
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.