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
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 //TODO
s.
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.
Now your proof will get approved on-chain, here is the sample transaction (opens in a new tab) from the screenshot above.