# Treza React

[![npm version](https://camo.githubusercontent.com/531352dd05ca833df62a2c6b5d205c139f79b5be1c3cfff1a782ddb557726e0b/68747470733a2f2f62616467652e667572792e696f2f6a732f2534307472657a6125324672656163742e737667)](https://www.npmjs.com/package/@treza/react) [![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](https://opensource.org/licenses/MIT) [![TypeScript](https://camo.githubusercontent.com/c0b4207c916f2461fb4904dadc7c90547506a3bcf3c41fd3d23438e65a29c1fb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f547970655363726970742d52656164792d626c7565)](https://www.typescriptlang.org/)

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**](https://www.npmjs.com/package/@treza/sdk) - Core SDK (required peer dependency)

### Links

* **Website**: [trezalabs.com](https://trezalabs.com/)
* **Documentation**: [docs.trezalabs.com](https://docs.trezalabs.com/)
* **GitHub**: [github.com/treza-labs/treza-sdk](https://github.com/treza-labs/treza-sdk)

### License

MIT


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trezalabs.com/developers/treza-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.