# @zerohash-sdk/crypto-sell-js

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

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

## Installation

### Via NPM (recommended)

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

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

### Via CDN

You can import the script in your HTML file and use the `CryptoSell` class provided by it.

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

Or import directly in your JavaScript code:

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

## Getting Started

Follow these simple steps to integrate Connect Crypto Sell into your frontend application:

### 1. Import the CryptoSell module

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

### 1.1 Or import via CDN

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

### 2. Initialize and render the widget

```javascript
// Create a CryptoSell instance with configuration
const cryptoSell = new CryptoSell({
  jwt: 'your-jwt-token', // Obtain this from your backend
  env: 'prod', // or 'cert' for testing
  theme: 'auto', // 'auto' (default), 'light', or 'dark'
  onCompleted: ({ amountSold, assetSymbol }) => {
    console.log('Sell completed:', amountSold, assetSymbol);
  },
  onError: ({ errorCode, reason }) => {
    console.error('Crypto sell error:', errorCode, 'Reason:', reason);
  },
  onClose: () => {
    console.log('Crypto sell widget closed');
  },
  onEvent: ({ type, data }) => {
    console.log('Event received:', type, data);
  },
  onLoaded: () => {
    console.log('Crypto sell widget loaded and ready');
  },
});

// Render the widget to a container element
const container = document.getElementById('crypto-sell-container');
await cryptoSell.render(container);

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

// Check if rendered
if (cryptoSell.isRendered()) {
  console.log('Widget is active');
}

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

### 2.1 Using TypeScript (optional)

```typescript
import { CryptoSell, CryptoSellConfig } from '@zerohash-sdk/crypto-sell-js';

const config: CryptoSellConfig = {
  jwt: 'your-jwt-token',
  env: 'cert',
  theme: 'dark',
  onCompleted: ({ amountSold, assetSymbol }) => {
    console.log(`Sold ${amountSold} ${assetSymbol}`);
  },
  onError: ({ errorCode, reason }) => {
    console.error(errorCode, reason);
  },
};

const cryptoSell = new CryptoSell(config);
await cryptoSell.render(document.getElementById('crypto-sell-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                       |
| `onCompleted` | `({ amountSold, assetSymbol }) => 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       |

### Constructor

```javascript
new CryptoSell(config: CryptoSellConfig)
```

Creates a new CryptoSell instance with the provided configuration.

### Methods

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

Renders the Crypto Sell widget to the specified container element.

```javascript
await cryptoSell.render(document.getElementById('crypto-sell-container'));
```

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

Updates the configuration of an already rendered widget.

```javascript
cryptoSell.updateConfig({
  jwt: 'new-token',
  theme: 'dark',
});
```

#### `destroy(): void`

Removes the widget from the DOM and cleans up resources.

```javascript
cryptoSell.destroy();
```

#### `isRendered(): boolean`

Returns whether the widget is currently rendered.

```javascript
if (cryptoSell.isRendered()) {
  // Widget is active
}
```

#### `getConfig(): CryptoSellConfig`

Returns a copy of the current configuration.

```javascript
const config = cryptoSell.getConfig();
console.log('Current JWT:', config.jwt);
```

## Callback Functions

### onCompleted

Called when the sell flow completes successfully.

```javascript
onCompleted: ({ amountSold, assetSymbol }) => {
  // amountSold: Quantity sold as a string
  // assetSymbol: Symbol of the asset sold (e.g. 'BTC.BITCOIN')
};
```

### onError

Called when an error occurs in the Crypto Sell widget.

```javascript
onError: ({ errorCode, reason }) => {
  // errorCode: Error code ('network_error', 'auth_error', 'server_error', etc.)
  // reason: Human-readable error description
};
```

### onClose

Called when the Crypto Sell widget is closed by the user.

```javascript
onClose: () => {
  // Handle close event
};
```

### onEvent

Called for general events from the Crypto Sell widget.

```javascript
onEvent: ({ type, data }) => {
  // type: Event type string
  // data: Event-specific data object
};
```

### onLoaded

Called when the Crypto Sell widget has fully loaded and is ready for user interaction.

```javascript
onLoaded: () => {
  // Widget is fully loaded and ready
};
```

## 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/).