@treza/react

@treza/react

React components and hooks for the Treza Platform - privacy-preserving KYC verification and compliance UI.

Features

• Pre-built Components - Ready-to-use KYC verification and compliance UI
• React Hooks - Easily integrate compliance checks into your app
• TypeScript - Full type safety and IntelliSense
• Customizable - Style components to match your design system
• Wallet Integration - Works with popular wallet providers

Installation

npm install @treza/react @treza/sdk ethers react react-dom

Quick Start

ComplianceProvider

Wrap your app with the ComplianceProvider:

import { ComplianceProvider } from '@treza/react';

function App() {
  return (
    <ComplianceProvider
      config={{
        apiUrl: 'https://api.trezalabs.com/api',
        contractAddress: '0xB1D98F688Fac29471D91234d9f8EbB37238Df6FA',
      }}
    >
      <YourApp />
    </ComplianceProvider>
  );
}

useCompliance Hook

import { useCompliance } from '@treza/react';

function VerificationStatus() {
  const { 
    isVerified, 
    isLoading, 
    verifyUser,
    claims 
  } = useCompliance();

  if (isLoading) return <div>Checking verification...</div>;

  if (!isVerified) {
    return (
      <button onClick={() => verifyUser()}>
        Verify Identity
      </button>
    );
  }

  return (
    <div>
      <p>✓ Verified</p>
      <p>Country: {claims?.nationality}</p>
    </div>
  );
}

KYCVerificationBadge

Display verification status:

import { KYCVerificationBadge } from '@treza/react';

function UserProfile({ address }) {
  return (
    <div>
      <h2>User Profile</h2>
      <KYCVerificationBadge 
        address={address}
        showDetails={true}
      />
    </div>
  );
}

ComplianceGate

Restrict access based on compliance:

import { ComplianceGate } from '@treza/react';

function ProtectedContent() {
  return (
    <ComplianceGate
      requirements={{
        mustBeAdult: true,
        allowedCountries: ['US', 'CA', 'GB'],
      }}
      fallback={<VerifyPrompt />}
    >
      <RestrictedContent />
    </ComplianceGate>
  );
}

Components

Component	Description
ComplianceProvider	Context provider for compliance state
KYCVerificationBadge	Shows verification status
ComplianceGate	Conditionally render based on compliance
VerifyButton	One-click verification flow
ClaimsDisplay	Show verified claims

Hooks

Hook	Description
useCompliance	Main compliance hook
useKYCStatus	Check KYC verification status
useClaims	Access verified claims
useComplianceCheck	Run compliance checks

Services

WalletService

Handle wallet connections and signing:

import { WalletService } from '@treza/react';

const walletService = new WalletService();

// Connect wallet
const address = await walletService.connect();

// Sign message for verification
const signature = await walletService.signMessage('Verify KYC');

// Get network info
const network = await walletService.getNetwork();

ComplianceService

Direct compliance operations:

import { ComplianceService } from '@treza/react';

const compliance = new ComplianceService({
  apiUrl: 'https://api.trezalabs.com/api',
  contractAddress: '0x...'
});

// Check requirements
const result = await compliance.checkRequirements(address, {
  mustBeAdult: true,
  allowedCountries: ['US']
});

Environment Variables

NEXT_PUBLIC_TREZA_API_URL=https://api.trezalabs.com/api
NEXT_PUBLIC_KYC_CONTRACT_ADDRESS=0xB1D98F688Fac29471D91234d9f8EbB37238Df6FA

Related Packages

• @treza/sdk - Core SDK (required peer dependency)

Links

• Website: trezalabs.com
• Documentation: docs.trezalabs.com
• GitHub: github.com/treza-labs/treza-sdk

License

MIT