# 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