Quickstart

Pre-requisite

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

We will be using HereWallet and MyNearWallet 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 installed.

You can access the code of this walkthrough on Gitlab:

Near contract.
Frontend.

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
Testnet: reclaim-protocol.testnet

Clone the near contract sdk repo.

This Near contract 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 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.

Quickstart

On this page