@quantabit/zkp-verifier-sdk

QuantaBit Zero-Knowledge Proof (ZKP) Verifier SDK provides local proof generation and verification capabilities for the QBit DID Verifiable Credentials (VCs). It supports selective disclosure protocols, gas-efficient verification checkpoints, and provides premium Glassmorphism UI components out of the box.

Features

• Local ZKP Prover: Generate cryptographic proofs locally on the user's client side without disclosing raw verifiable credential attributes (such as exact date of birth, nationality).
• Decentralized Verification Client: Submit zero-knowledge proofs directly to QuantaBit verification nodes and verify the cryptographic integrity.
• Glassmorphism UI Card: Out-of-the-box React component (ZkpVerifyCard) with modern glassmorphism styling, scanning animations, and localization.
• Failover Verification Simulation: Gracefully degrades to local state simulation when the network or node endpoints are unavailable.
• Multi-Language Support: Fully localized in English, Chinese (Simplified), Japanese, and Korean.

Installation

npm install @quantabit/zkp-verifier-sdk @quantabit/zkp-identity-proof-sdk @quantabit/sdk-config

本地证明生成由 @quantabit/zkp-identity-proof-sdk 完成（默认 mode: 'stub'，返回 isMock: true）。接入真实电路后可通过 hook / ZkpVerifyCard 的 proofOptions 切换 snarkjs，并设置 artifactBase 或注入 provingKeys。

真实证明（isMock: false / mode: 'snarkjs'）在网络提交失败时默认不再假验证；可通过 allowDegradedVerify: true 显式开启，或用 requireCryptographicProof: true 强制禁止降级。

<ZkpVerifyCard
  proofOptions={{
    mode: 'snarkjs',
    artifactBase: 'https://cdn.example.com/zkp-circuits',
    snarkjs
  }}
  requireCryptographicProof
  ...
/>

Quick Start

1. Ready-To-Use React Component

Embed the sleek, modern glassmorphic card component into your application to allow users to generate and verify ZK proofs dynamically.

import React from 'react';
import { ZkpVerifyCard } from '@quantabit/zkp-verifier-sdk';
import '@quantabit/zkp-verifier-sdk/styles.css';

function VerificationPage() {
  const mockCredential = {
    issuer: 'did:qbit:authority',
    credentialSubject: {
      id: 'did:qbit:user_did_address',
      age: 21,
      country: 'Singapore'
    }
  };

  const handleVerified = (result) => {
    console.log('Zero-Knowledge Proof verified successfully!', result);
  };

  return (
    <div style={{ padding: '40px', background: '#0b0f17', minHeight: '100vh' }}>
      <ZkpVerifyCard
        verifiableCredential={mockCredential}
        rules={['age']}
        credentialType="Official ID Passport"
        theme="dark"
        onVerified={handleVerified}
      />
    </div>
  );
}

export default VerificationPage;

2. Custom Prover Hooks

Build your own customized proof-generation interface using our React Hook (useZkpVerifier).

import { useZkpVerifier } from '@quantabit/zkp-verifier-sdk';

function CustomVerifier() {
  const {
    loading,
    verified,
    error,
    proofResult,
    generateAndVerifyProof,
    language
  } = useZkpVerifier({ language: 'en' });

  const handleVerify = async () => {
    const vc = {
      issuer: 'did:qbit:authority',
      credentialSubject: {
        id: 'did:qbit:user_did_address',
        age: 25,
        country: 'Japan'
      }
    };

    try {
      const result = await generateAndVerifyProof(
        vc,
        {
          minAge: 18,
          allowedCountries: ['CN', 'JP', 'KR', 'SG', 'DE', 'GB']
        }
      );
      console.log('Verification Success receipt:', result);
      console.log('local mock?', result.localIsMock);
    } catch (err) {
      console.error('ZKP validation failed:', err.message);
    }
  };

  return (
    <div>
      <button onClick={handleVerify} disabled={loading}>
        {loading ? 'Generating Cryptographic Proof...' : 'Verify Age >= 18'}
      </button>
      {verified && (
        <div>
          <p style={{ color: 'green' }}>Verification Passed!</p>
          <small>Chain Anchor Hash: {proofResult?.chainAnchorHash}</small>
        </div>
      )}
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
    </div>
  );
}

3. API Client Usage (Node.js or Pure JS)

If you are using ZKP verifications in non-React environments, you can invoke the API Client directly.

import { ZkpApiClient } from '@quantabit/zkp-verifier-sdk';

const client = new ZkpApiClient({
  apiUrl: 'https://api.quantabit.io',
  token: 'user-access-token'
});

async function runVerification() {
  const mockProof = {
    pi_a: ['0x123', '0x456'],
    pi_b: [['0x1', '0x2'], ['0x3', '0x4']],
    pi_c: ['0x789', '0x012']
  };
  const publicSignals = ['1']; // Proving the criteria holds true

  const receipt = await client.submitProof(mockProof, publicSignals, 'age');
  console.log('Cryptographic proof submitted, receipt:', receipt);
}

Config Integration

The ZKP Verifier SDK uses the shared configuration setup defined in @quantabit/sdk-config. You can globally register API nodes and client credentials:

import { initConfig } from '@quantabit/sdk-config';

initConfig({
  apiFullUrl: 'https://zkp-node.quantabit.io',
  token: 'global-session-token'
});

License

MIT License. Copyright (c) 2026 QuantaBit Team.