Quickstart

Pre-requisite

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

We will be using Metamask as a wallet to interact with the frontend interface. Make sure that you have it installed and funded with LYXT.

You can access the code of this walkthrough:

LUKSO 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.

Clone the Lukso contract sdk repo.

This Contract that utilizes the ERC725Y standard for a dynamic and flexible storage.

git clone https://github.com/reclaimprotocol/reclaim-lukso-sdk
cd lukso-sdk

Setup

Install dependencies:

npm install --legacy-peer-deps

In root directory, populate your .env and make sure to add your private key:

echo 'PRIVATE_KEY=your-private-key-here' > .env

Deploy

Deploy the contracts with your account on LuksoTestnet.

npx hardhat run scripts/deploy.ts --network luksoTestnet

Save the adresses

You will see the following logs:

Reclaim deployed to: 0x...

This is the Reclaim contract used for verifying proofs before storing them, you can check on Lukso explorer.

Add Epoch

Before Adding Epoch make sure to replace the old contract address in the file /tasks/add-new-epoch.ts (line 21) with your new Reclaim contract address that you got from the last step.

import { task, types } from "hardhat/config";
import "@nomicfoundation/hardhat-toolbox";
import { Reclaim } from "../src/types";
 
task("add-new-epoch", "Start a new epoch")
  .addParam("address", "address of a witness", undefined, types.string)
  .addParam("host", "Hostof a witness", undefined, types.string)
  .setAction(async (taskArgs, { ethers, network }) => {
    const { address, host } = taskArgs;
    if (!address) {
      console.log("here");
      return;
    }
 
    const witness: Reclaim.WitnessStruct = { addr: address, host };
    const signerAddress = await ethers.provider.getSigner().getAddress();
    console.log(
      `adding witness on "${network.name}" from address "${signerAddress}"`
    );
 
    const contractAddress = "0xB68aCB36334311CEc471EE2541173EDc155FdA71"; //Replace with your Contract address
    const factory = await ethers.getContractFactory("Reclaim");
    const contract = factory.attach(contractAddress);
 
    const tx = await contract.addNewEpoch([witness], 1);
    //Rest of the code.

Finally Send a transaction to add epoch from the owner account.

npx hardhat add-new-epoch --address 0x244897572368Eadf65bfBc5aec98D8e5443a9072 --host https://reclaim-node.questbook.app --network luksoTestnet

Frontend Development

Cloning the frontend repo.

git clone https://gitlab.reclaimprotocol.org/starterpacks/reclaim-lukso-example
 
cd reclaim-lukso-example
 
npm install

Code discovery (src/App.js).

We will submit the proof on chain once we get the onSuccess. Fill in your Reclaim credentials if you want to use a different provider.

import "./App.css";
import { ReclaimProofRequest } from "@reclaimprotocol/js-sdk";
import { useState, useEffect } from "react";
import { WagmiProvider, useAccount } from "wagmi";
import { config } from "./config";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import QRCode from "react-qr-code";
import VerifyProof from "./verify-proof";
import { Account } from "./account";
import { WalletOptions } from "./wallet-options";
 
const queryClient = new QueryClient();
 
function ConnectWallet() {
  const { isConnected } = useAccount();
  if (isConnected) return <Account />;
  return <WalletOptions />;
}
 
function App() {
  const [ready, setReady] = useState(false);
  const [proof, setProof] = useState({});
  const [reclaimProofRequest, setReclaimProofRequest] = useState(null);
  const [requestUrl, setRequestUrl] = useState("");
  const [statusUrl, setStatusUrl] = useState("");
 
  useEffect(() => {
    async function initializeReclaim() {
      const APP_ID = "0x1046a98608Ff41ECb67d908Ae6A5ED7edf8c9Ba0"; // This is an example App Id Replace it with your App Id.
      const APP_SECRET =
        "0x0b870468426248b8dc3dd4575ee2b95f3a3fc9fce2656bbf1bf96a6a6cac2967"; // This is an example App Secret Replace it with your App Secret.
      const PROVIDER_ID = "6d3f6753-7ee6-49ee-a545-62f1b1822ae5"; // This is GitHub Provider Id Replace it with the provider id you want to use.
 
      const proofRequest = await ReclaimProofRequest.init(
        APP_ID,
        APP_SECRET,
        PROVIDER_ID
      );
      setReclaimProofRequest(proofRequest);
    }
 
    initializeReclaim();
  }, []);
 
  async function generateVerificationRequest() {
    if (!reclaimProofRequest) {
      console.error("Reclaim Proof Request not initialized");
      return;
    }
 
    reclaimProofRequest.addContext(
      `user's address`,
      "for acmecorp.com on 1st january"
    );
 
    const url = await reclaimProofRequest.getRequestUrl();
    setRequestUrl(url);
    const status = reclaimProofRequest.getStatusUrl();
    setStatusUrl(status);
 
    await reclaimProofRequest.startSession({
      onSuccess: (proof) => {
        console.log("Verification success", proof);
        setProof(proof);
        setReady(true);
        // Your business logic here
      },
      onFailure: (error) => {
        console.error("Verification failed", error);
        // Your business logic here to handle the error
      },
    });
  }
 
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <div className="App">
          <ConnectWallet />
          {!requestUrl && (
            <button onClick={generateVerificationRequest}>
              Create Claim QrCode
            </button>
          )}
          {requestUrl && <QRCode value={requestUrl} />}
          {ready && <VerifyProof proof={proof}></VerifyProof>}
        </div>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
 
export default App;

Code discovery (src/verify-proof.jsx).

If you deployed your own version of the contract, you will need to update the contract address.

import { useState, useEffect } from "react";
import { writeContract } from "@wagmi/core";
import { abi } from "./abi";
import { config } from "./config";
import { transformForOnchain } from "@reclaimprotocol/js-sdk";
 
export default function VerifyProof(props) {
  const [proof, setProof] = useState({});
  const [verified, setVerified] = useState(false);
  const [transactionHash, setTransactionHash] = useState("");
 
  useEffect(() => {
    const newProof = transformForOnchain(props.proof);
    setProof(newProof);
  }, []);
 
  return (
    <div>
      <button
        className="button"
        onClick={async () => {
          const hash = await writeContract(config, {
            abi: abi,
            address: "0xB68aCB36334311CEc471EE2541173EDc155FdA71", //TODO : replace with your Reclaim contract's address
            functionName: "verifyProof",
            chainId: 4201, //TODO : replace with your chain id 4201 for Testnet 42 For Mainnet
            args: [proof],
          });
          if (hash) {
            setVerified(true);
            setTransactionHash(hash);
          }
        }}
      >
        Verify Proof
      </button>
      {verified && (
        <div>
          {" "}
          <p>Proof verified</p>
          <a
            href={`https://explorer.execution.testnet.lukso.network/tx/${transactionHash}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            Click here to view transaction.
          </a>
        </div>
      )}
      <style jsx="true">{`
        .container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .button {
          border: solid 1px #ccc;
          margin: 0 0 20px;
          border-radius: 3px;
        }
      `}</style>
    </div>
  );
}

Submitting the proof.

npm run start

First, You will need to connect your metamask wallet.
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 a transaction.
You can check the transaction on the explorer by clicking on View Transaction button.

Quickstart

On this page