Publish on-chain with Reclaim contract on Near

Pre-requisite

At this stage, we assume that you are familiar with the steps at ReactJs.

We will be using HereWallet (opens in a new tab) and MyNearWallet (opens in a new tab) as a wallet to interact with the frontend interface. Make sure that you have one of them installed and funded.

Also, you will need to have the Near CLI (opens in a new tab) installed.

You can access the code of this walkthrough on Gitlab:

Contract Deployment

If you don't need to add more checks and logic to on-chain contract, You can skip those steps and use our already deployed contract on the testnet or mainnet:

Mainnet: reclaim-protocol-mainnet.near (opens in a new tab)
Testnet: reclaim-protocol.testnet (opens in a new tab)

Clone the near contract sdk repo.

This Near contract (opens in a new tab) serves as a client to our Reclaim protocol. It instantiates Reclaim's contract, handles proofs, and verifies them.

git clone https://gitlab.reclaimprotocol.org/integrations/onchain/near-sdk
cd near-sdk
cargo near build

Create new account or import an existing account.

Use near-cli to create a new account or import an existing account.

near account import-account using-web-wallet network-config testnet

Deploy.

Deploy the contract with your account and the wasm file.

  near contract deploy <ACCOUNT_ID\> use-file <PATH_TO_WASM_BUILD> with-init-call init text-args '' prepaid-gas '100.0 Tgas' attached-deposit '0 NEAR' network-config testnet sign-with-keychain send

Add Epoch

Send transaction to add epoch from the owner account.

near contract call-function as-transaction <ACCOUNT_ID\> add_epoch \
  json-args '{"minimum_witness_for_claim_creation": 1, "epoch_start": 1717429000, "epoch_end": 1817429000, "witnesses": [{"address": "244897572368eadf65bfbc5aec98d8e5443a9072", "host": "reclaim.testnet"}]}' \
  prepaid-gas '100.0 Tgas' attached-deposit '0 NEAR' sign-as <ACCOUNT_ID\> \
  network-config testnet sign-with-keychain

Frontend Development

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.

Cloning the frontend repo.

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

2. Install Dependencies

Run this command:

npm install

Code discovery (src/components/create-new-proof.js).

We will submit the proof on chain once we get the onSuccessCallback. Fill in your Reclaim credentials marked with //TODOs.

import { Reclaim } from "@reclaimprotocol/js-sdk";
import { useState } from "react";
import { useQRCode } from "next-qrcode";
 
export const CreateNewProof = ({ setNewProof, setReadyToVerify }) => {
  const [url, setUrl] = useState("");
  const { Canvas } = useQRCode();
 
  const reclaimClient = new Reclaim.ProofRequest(""); //TODO: replace with your applicationId
 
  async function generateVerificationRequest() {
    const providerId = ""; //TODO: replace with your provider ids you had selected while creating the application
 
    reclaimClient.addContext(
      `user's address`,
      "for acmecorp.com on 1st january"
    );
 
    await reclaimClient.buildProofRequest(providerId);
 
    reclaimClient.setSignature(
      await reclaimClient.generateSignature(
        "" //TODO : replace with your APP_SECRET
      )
    );
 
    const { requestUrl, statusUrl } =
      await reclaimClient.createVerificationRequest();
 
    setUrl(requestUrl);
 
    await reclaimClient.startSession({
      onSuccessCallback: (proofs) => {
        console.log("Verification success", proofs);
        setNewProof(proofs[0]);
        setReadyToVerify(true);
        // Your business logic here
      },
      onFailureCallback: (error) => {
        console.error("Verification failed", error);
        // Your business logic here to handle the error
      },
    });
  }
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "50vh",
      }}
    >
      {!url && (
        <button
          className="btn btn-secondary"
          onClick={generateVerificationRequest}
        >
          Create New Proof
        </button>
      )}
      {url && (
        <Canvas
          text={url}
          options={{
            errorCorrectionLevel: "M",
            margin: 3,
            scale: 4,
            width: 200,
            color: {
              dark: "#010599FF",
              light: "#FFBF60FF",
            },
          }}
        />
      )}
    </div>
  );
};

Code discovery (src/config.js).

If you deployed your own version of the contract, you will need to update the contractPerNetwork list with your contract's account address.

const contractPerNetwork = {
  mainnet: "reclaim-protocol-mainnet.near", // Replace it with your contract's account address
  testnet: "reclaim-protocol.testnet", // Replace it with your contract's account address
};
 
export const NetworkId = "testnet";
export const ReclaimNearContract = contractPerNetwork[NetworkId];
 
export const SMOKE_PROOF = {
  identifier:
    "0x9ec8f9f52623234433ce5ea0cc0f5aac0dfbeef553e68d2d403633bd9192e365",
  claimData: {
    provider: "http",
    parameters:
      '{"body":"","geoLocation":"in","method":"GET","paramValues":{"CLAIM_DATA":"76561199614512180"},"responseMatches":[{"type":"contains","value":"_steamid\\">Steam ID: {{CLAIM_DATA}}</div>"}],"responseRedactions":[{"jsonPath":"","regex":"_steamid\\">Steam ID: (.*)</div>","xPath":"id(\\"responsive_page_template_content\\")/div[@class=\\"page_header_ctn\\"]/div[@class=\\"page_content\\"]/div[@class=\\"youraccount_steamid\\"]"}],"url":"https://store.steampowered.com/account/"}',
    owner: "0xa1b6e6ffb85df5bdf78e6558d3224ab87f7cc4c7",
    timestampS: 1717053708,
    context:
      '{"contextAddress":"user\'s address","contextMessage":"for acmecorp.com on 1st january","extractedParameters":{"CLAIM_DATA":"76561199614512180"},"providerHash":"0x5f5312e27124dc7605f70a7d884e169049679b93f91c137b4d18a8569d825900"}',
    identifier:
      "0x9ec8f9f52623234433ce5ea0cc0f5aac0dfbeef553e68d2d403633bd9192e365",
    epoch: 1,
  },
  signatures: [
    "0xcbad077154cc5c8e494576d4336f57972f7412058c1a637e05832c6bdabd018f4da18ad973f29553921d7d030370032addac1159146b77ec6cc5dab4133ffec01c",
  ],
  witnesses: [
    {
      id: "0x244897572368eadf65bfbc5aec98d8e5443a9072",
      url: "https://reclaim-node.questbook.app",
    },
  ],
};

Submitting the proof.

npm run dev

First, You will need to connect your near account.
Then, After requesting a proof from Reclaim and performing the verification on your end, a verify proof button will appear on the screen.
Finally, Clicking on the Verify Proof button will send transaction.

screen2

near-exp

Now your proof will get approved on-chain, here is the sample transaction (opens in a new tab) from the screenshot above.

Code Overview

src/components/create-new-proof.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/pages/index.js

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.

Troubleshooting

Wallet Connection Issues: Ensure that your wallet is set to the correct network that you contract is deployed on and refresh the page if the connection fails.
Proof Submission Fails: Double-check your Reclaim credentials, contract address, and that the correct network is selected.

Overview Overview