@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)

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

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.

<script
  type="module"
  src="https://sdk.connect.xyz/crypto-sell-web/index.js"
></script>

Or import directly in your JavaScript code:

import { CryptoSell } from 'https://sdk.connect.xyz/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

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

1.1 Or import via CDN

import { CryptoSell } from 'https://sdk.connect.xyz/crypto-sell-web/index.js';

2. Initialize and render the widget

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

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

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.

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

updateConfig(config: Partial<CryptoSellConfig>): void

Updates the configuration of an already rendered widget.

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

destroy(): void

Removes the widget from the DOM and cleans up resources.

cryptoSell.destroy();

isRendered(): boolean

Returns whether the widget is currently rendered.

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

getConfig(): CryptoSellConfig

Returns a copy of the current configuration.

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

Callback Functions

onCompleted

Called when the sell flow completes successfully.

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.

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.

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

onEvent

Called for general events from the Crypto Sell widget.

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.

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.