Getting started

Getting Started with the Onboarding and Eligibility Kit¶

This guide will help you integrate the Eligibility SDK into your dApp and perform your first eligibility check in under 15 minutes.

⚙️ Prerequisites¶

Before you begin:

react (v18.x or higher)
react-dom (v18.x or higher)
viem (v2.x or higher)
wagmi (v2.x or higher)
@tanstack/react-query (v5.x or higher)
A bundler like Vite or Next.js (App Router supported)
Privado-compatible wallet (e.g. Polygon ID mobile wallet)
API Key (get from Averer Support)

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

More Information¶

🧩 Step 1: Install the SDK¶

 npm install @redbellynetwork/eligibility-sdk

🔐 Step 2: Configure AppKit + Eligibility SDK Provider¶

Wrap your app with the EligibilitySDKProvider and set up wallet integration:

// main.tsx or App.tsx

import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { defineChain } from "@reown/appkit/networks";
import { EligibilitySDKProvider } from "@redbellynetwork/eligibility-sdk";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const projectId = "your-reown-project-id";
const apiKey = "your-eligibility-api-key";

const redbellyStaging = defineChain({
  id: 153,
  name: "Redbelly Network",
  caipNetworkId: "eip155:153",
  chainNamespace: "eip155",
  nativeCurrency: {
    name: "Redbelly Token",
    symbol: "RBNT",
    decimals: 18,
  },
  rpcUrls: {
    default: { http: ["https://governors.testnet.redbelly.network/"] },
  },
});

const wagmiAdapter = new WagmiAdapter({
  projectId,
  networks: [redbellyStaging],
});

const queryClient = new QueryClient();
// 🔹 Initialize AppKit
createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks,
  metadata: {
    name: "Eligibility SDK Example",
    description: "Eligibility SDK with Redbelly Network",
    url: "https://reown.com",
    icons: ["https://avatars.githubusercontent.com/u/179229932"],
  },
  themeMode: "light",
  themeVariables: {
    "--w3m-accent": "#000000",
  },
});

export function App() {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <EligibilitySDKProvider config={{ network: "staging", apiKey }}>
          <YourRoutesOrComponent />
        </EligibilitySDKProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

✅ Step 3: Setup backend¶

Express js

In any page or component:

import {
  EligibilityWidget,
  EligibilitySdk,
} from "@redbellynetwork/eligibility-sdk";

export default function EligibilityCheckPage() {
  const onSuccessHandler: EligibilitySdk["onSuccess"] = (data) => {
    console.log(data);
  };

  // Custom query handler to call the backend and return session data
  const queryHandler: EligibilitySdk["config"]["queryHandler"] = async () => {
    const query: Array<protocol.ZeroKnowledgeProofRequest> = [
      {
        id: 1,
        circuitId: "credentialAtomicQuerySigV2",
        query: {
          allowedIssuers: ["*"],
          type: "AMLCTFCredential",
          context:
            "https://raw.githubusercontent.com/redbellynetwork/receptor-schema/refs/heads/main/schemas/json-ld/AMLCTFCredential.jsonld",
          skipClaimRevocationCheck: true,
          credentialSubject: {
            amlCheckStatus: { $eq: "passed" },
          },
        },
      },
    ];
    const res = await fetch("https://example.com/auth-request", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        flowName: "Investor Eligibility Check",
        scope: query,
      }),
    });
    const data = await res.json();
    return {
      request: data.request,
      sessionId: data.sessionId,
    };
  };

  // Custom status handler to check the session status
  const authStatusHandler: EligibilitySdk["config"]["authStatusHandler"] =
    async (sessionId) => {
      const res = await fetch(`https://example.com/status/${sessionId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = await res.json();
      return {
        status: data.status,
        proof: data?.proof,
        error: data?.error,
      };
    };

  return (
    <EligibilityWidget
      onSuccess={onSuccessHandler}
      config={{
        queryHandler: queryHandler,
        authStatusHandler: authStatusHandler,
      }}
    />
  );
}

🧪 Step 5: Get a Test Credential (VC)¶

You’ll need a test VC to simulate proof.

👉 Go to Claim Credentials Page for QR codes, credentials

eligibility sdk widget

<EligibilityWidget
  theme={{ primaryColor: "#0065FF" }}
  sdkOverride={{ home: { heading: "Prove your eligibility to continue" } }}
/>

🎉 Done!¶

You’ve now completed your first eligibility check.

Read API reference