✨Works out of the box guarantee. If you face any issue at all, hit us up on Telegram and we will write the integration for you.

NEAR
Quickstart

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 (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

Cloning the frontend repo.

git clone https://gitlab.reclaimprotocol.org/starterpacks/reclaim-near-example
 
cd reclaim-near-frontend-example
 
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: 'todo()',
  testnet: 'reclaim-protocol-testnet-hadi-sa.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.