# @zerohash-sdk/fund-withdrawals-js

A framework-agnostic JavaScript SDK for embedding the Zerohash Fund Withdrawals flow into web applications. Lets users withdraw assets from their Fund account to an external destination.

## Installation

### Via NPM (recommended)

```bash
npm install @zerohash-sdk/fund-withdrawals-js
```

```javascript
import { FundWithdrawals } from '@zerohash-sdk/fund-withdrawals-js';
```

### Via CDN

```html
<script
  type="module"
  src="https://sdk-cdn.zerohash.com/fund-withdrawals-web/index.js"
></script>
```

Or import directly:

```javascript
import { FundWithdrawals } from 'https://sdk-cdn.zerohash.com/fund-withdrawals-web/index.js';
```

## Getting Started

### 1. Import

```javascript
import { FundWithdrawals } from '@zerohash-sdk/fund-withdrawals-js';
```

### 2. Initialize and render

```javascript
const fundWithdrawals = new FundWithdrawals({
  jwt: 'your-jwt-token',
  env: 'prod',
  theme: 'auto',
  isPayouts: false,
  onCompleted: ({ externalAccountId, assetSymbol, amount }) => {
    console.log(`Withdrew ${amount} ${assetSymbol} to ${externalAccountId}`);
  },
  onError: ({ errorCode, reason }) => console.error(errorCode, reason),
  onClose: () => console.log('Closed'),
  onEvent: (event) => console.log('Event:', event),
  onLoaded: () => console.log('Ready'),
});

const container = document.getElementById('fund-withdrawals-container');
await fundWithdrawals.render(container);

// Update configuration dynamically
fundWithdrawals.updateConfig({ jwt: 'new-jwt-token', theme: 'dark' });

// Clean up when done
fundWithdrawals.destroy();
```

### TypeScript

```typescript
import { FundWithdrawals, FundWithdrawalsConfig } from '@zerohash-sdk/fund-withdrawals-js';

const config: FundWithdrawalsConfig = {
  jwt: 'your-jwt-token',
  env: 'cert',
  theme: 'dark',
  isPayouts: false,
  onCompleted: ({ externalAccountId, assetSymbol, amount }) => {
    console.log(`Withdrew ${amount} ${assetSymbol} to ${externalAccountId}`);
  },
};

const fw = new FundWithdrawals(config);
await fw.render(document.getElementById('fund-withdrawals-container')!);
```

## API Reference

### Configuration

| 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                                                       |
| `isPayouts`   | `boolean`                                              | No       | `false`  | When true, renders the Payouts flow instead of the standard Fund Withdrawals flow. |
| `onCompleted` | `({ externalAccountId, assetSymbol, amount }) => void` | No       | -        | Callback when the withdrawal is successfully initiated                             |
| `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: `{ externalAccountId: string; assetSymbol: string; amount: string }`.

### Methods

#### `render(container: HTMLElement): Promise<void>`

Renders the widget into the given container.

#### `updateConfig(config: Partial<FundWithdrawalsConfig>): void`

Updates the configuration of an already rendered widget.

#### `destroy(): void`

Removes the widget from the DOM and cleans up resources.

#### `isRendered(): boolean`

Returns whether the widget is currently rendered.

#### `getConfig(): FundWithdrawalsConfig`

Returns a copy of the current configuration.

## Browser Support

- Chrome / Edge 90+
- Firefox 88+
- Safari 14+
- All modern browsers with Web Components support

## More Information & Support

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