# @zerohash-sdk/csp-crypto-sell-js

A JavaScript SDK that enables frontend applications to seamlessly integrate with the Connect CSP Crypto Sell product.

Connect CSP Crypto Sell provides a secure, customizable flow for selling crypto assets directly within your application.

## Installation

### Via NPM (recommended)

```bash
npm install @zerohash-sdk/csp-crypto-sell-js
```

```javascript
import { CspCryptoSell } from '@zerohash-sdk/csp-crypto-sell-js';
```

### Via CDN

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

Or import directly in your JavaScript code:

```javascript
import { CspCryptoSell } from 'https://sdk-cdn.zerohash.com/csp-crypto-sell-web/index.js';
```

## Getting Started

### 1. Import the CspCryptoSell module

```javascript
import { CspCryptoSell } from '@zerohash-sdk/csp-crypto-sell-js';
```

### 2. Initialize and render the widget

```javascript
const cspCryptoSell = new CspCryptoSell({
  jwt: 'your-jwt-token',
  env: 'prod',
  theme: 'auto',
  onCompleted: ({ assetSymbol, amountSold }) => {
    console.log('Sell completed:', amountSold, assetSymbol);
  },
  onError: ({ errorCode, reason }) => {
    console.error('Error:', errorCode, 'Reason:', reason);
  },
  onClose: () => console.log('Widget closed'),
  onEvent: ({ type, data }) => console.log('Event:', type, data),
  onLoaded: () => console.log('Widget loaded and ready'),
});

await cspCryptoSell.render(document.getElementById('csp-crypto-sell-container'));

cspCryptoSell.destroy();
```

### 2.1 Using TypeScript (optional)

```typescript
import { CspCryptoSell, CspCryptoSellConfig } from '@zerohash-sdk/csp-crypto-sell-js';

const config: CspCryptoSellConfig = {
  jwt: 'your-jwt-token',
  env: 'cert',
  onCompleted: ({ assetSymbol, amountSold }) => {
    console.log(amountSold, assetSymbol);
  },
};

const cspCryptoSell = new CspCryptoSell(config);
await cspCryptoSell.render(document.getElementById('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. EU partners (JWT `payload.region='eu'`) are routed automatically to the EU CDN (`sdk-cdn.cert.zerohash.eu` / `sdk-cdn.zerohash.eu`). |
| `theme`       | `"auto" \| "light" \| "dark"`           | No       | `"auto"` | Theme mode for the interface                                                                                                                             |
| `onCompleted` | `({ assetSymbol, amountSold }) => void` | No       | -        | Callback when the sell flow completes successfully                                                                                                       |
| `onError`     | `({ errorCode, reason }) => void`       | No       | -        | Callback for error events                                                                                                                                |
| `onClose`     | `() => void`                            | No       | -        | Callback when the widget is closed                                                                                                                       |
| `onEvent`     | `({ type, data }) => void`              | No       | -        | Callback for general events                                                                                                                              |
| `onLoaded`    | `() => void`                            | No       | -        | Callback when the widget is loaded and ready                                                                                                             |

### Methods

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

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

#### `destroy(): void`

#### `isRendered(): boolean`

#### `getConfig(): CspCryptoSellConfig`

## Browser Support

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

## More Information & Support

For comprehensive documentation or support about Connect, visit our [Documentation Page](https://docs.zerohash.com/).