# @zerohash-sdk/csp-fiat-withdrawals-react

A React SDK for embedding the Zerohash CSP Fiat Withdrawals flow into web applications. Lets users withdraw fiat (USD) from their account to a linked bank account via ACH.

## Requirements

- React 18.0.0 or higher
- React DOM 18.0.0 or higher

## Installation

```bash
npm install @zerohash-sdk/csp-fiat-withdrawals-react
```

## Getting Started

### 1. Import the CspFiatWithdrawals component

```tsx
import { CspFiatWithdrawals } from '@zerohash-sdk/csp-fiat-withdrawals-react';
```

### 2. Add it to your app

```tsx
function App() {
  const jwt = 'your-jwt-token'; // Obtain this from your backend

  return (
    <CspFiatWithdrawals
      jwt={jwt}
      env="prod" // or "cert" for testing
      theme="auto"
    />
  );
}
```

### 3. Configure event callbacks (optional)

```tsx
<CspFiatWithdrawals
  jwt={jwt}
  env="prod"
  theme="auto"
  onCompleted={({ amountWithdrawn, assetSymbol }) => {
    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
  }}
  onError={({ errorCode, reason }) => {
    console.error(errorCode, reason);
  }}
  onClose={() => console.log('Widget closed')}
  onEvent={(event) => console.log('Event:', event)}
  onLoaded={() => console.log('Widget ready')}
/>
```

## API Reference

### CspFiatWithdrawals Component Props

| Prop          | Type                                         | Required | Default  | Description                                  |
| ------------- | -------------------------------------------- | -------- | -------- | -------------------------------------------- |
| `jwt`         | `string`                                     | Yes      | -        | JWT token for authentication with Connect    |
| `env`         | `"prod" \| "cert" \| "dev" \| "local"`       | No       | `"prod"` | Target environment                           |
| `theme`       | `"auto" \| "light" \| "dark"`                | No       | `"auto"` | Theme mode for the interface                 |
| `onCompleted` | `({ amountWithdrawn, assetSymbol }) => void` | No       | -        | Callback when the withdrawal flow completes  |
| `onError`     | `({ errorCode, reason }) => void`            | No       | -        | Callback for error events                    |
| `onClose`     | `() => void`                                 | No       | -        | Callback when the widget is closed           |
| `onEvent`     | `(event) => void`                            | No       | -        | Callback for general events                  |
| `onLoaded`    | `() => void`                                 | No       | -        | Callback when the widget is loaded and ready |

`onCompleted` payload shape: `{ amountWithdrawn: string; assetSymbol: string }` (asset is always `'USD'`).

## More Information & Support

For comprehensive documentation, visit the [Zerohash Documentation Page](https://docs.zerohash.com/).