@zerohash-sdk/crypto-sell-js 1.2.0

package/README.md

@@ -0,0 +1,252 @@
+# @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.connect.xyz/crypto-sell-web/index.js"
+></script>
+```
+
+Or import directly in your JavaScript code:
+
+```javascript
+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
+
+```javascript
+import { CryptoSell } from '@zerohash-sdk/crypto-sell-js';
+```
+
+### 1.1 Or import via CDN
+
+```javascript
+import { CryptoSell } from 'https://sdk.connect.xyz/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/).

package/dist/index.d.ts

@@ -0,0 +1,482 @@
+/**
+ * Zerohash Crypto Sell JavaScript SDK
+ *
+ * A programmatic JavaScript SDK for integrating the Crypto Sell widget
+ * into web applications without requiring HTML custom elements.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Generic app event structure
+ * @template TType - Event type string
+ * @template TData - Event data payload
+ */
+declare type AppEvent<TType extends string = string, TData = Record<string, unknown>> = {
+    /** The type of event that occurred */
+    type: TType;
+    /** Data associated with the event */
+    data: TData;
+};
+
+/**
+ * Configuration options for the SDK
+ */
+declare interface BaseConfig<TEvent = AppEvent> extends CommonCallbacks<TEvent> {
+    /**
+     * JWT token used for authentication
+     */
+    jwt: string;
+
+    /**
+     * Target environment
+     * @default 'production'
+     */
+    env?: Environment;
+
+    /**
+     * Theme mode
+     * @default 'auto'
+     *
+     * Available themes:
+     * - `'auto'` - Automatically detect system preference (light/dark mode)
+     * - `'light'` - Force light theme
+     * - `'dark'` - Force dark theme
+     */
+    theme?: Theme;
+}
+
+declare type BaseErrorMessageKeys =
+| 'ALREADY_RENDERED'
+| 'NOT_RENDERED'
+| 'INVALID_CONTAINER'
+| 'SCRIPT_LOAD_FAILED'
+| 'WEB_COMPONENT_NOT_DEFINED';
+
+declare abstract class BaseJsSdk<Config extends BaseConfig<never> = BaseConfig> {
+    private config: Config;
+    private state: SdkState;
+    private scriptLoadingPromise?: Promise<void>;
+
+    protected abstract errorMessages: Record<BaseErrorMessageKeys, string>;
+    protected abstract scriptUrls: Record<string, string>;
+    protected abstract webComponentTag: string;
+
+    constructor(config: Config) {
+        if (!config.jwt || typeof config.jwt !== 'string') {
+            throw new Error(INVALID_JWT_ERROR_MESSAGE);
+        }
+
+        this.config = {
+            ...config,
+            env: config.env || DEFAULT_ENVIRONMENT,
+            theme: config.theme,
+        };
+
+        this.state = {
+            initialized: false,
+            scriptLoaded: false,
+            container: null,
+            element: null,
+        };
+    }
+
+    /**
+     * Render the widget to a container element
+     * @param container - The container element to render the widget into
+     * @returns Promise that resolves when the widget is rendered
+     */
+    async render(container: HTMLElement): Promise<void> {
+        // Validate container
+        if (!container || !(container instanceof HTMLElement)) {
+            throw new Error(this.errorMessages.INVALID_CONTAINER);
+        }
+
+        // Check if already rendered
+        if (this.state.initialized) {
+            throw new Error(this.errorMessages.ALREADY_RENDERED);
+        }
+
+        try {
+            // Ensure script is loaded
+            await this.ensureScriptLoaded();
+
+            // Create and append the web component
+            const element = this.createWebComponent();
+
+            // Clear the container and append the element
+            container.innerHTML = '';
+            container.appendChild(element);
+
+            // Update state
+            this.state.container = container;
+            this.state.element = element;
+            this.state.initialized = true;
+        } catch (error) {
+            console.error('Failed to render widget:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Update the configuration of the widget
+     * @param config - Partial configuration to update
+     * @returns void
+     */
+    updateConfig(config: Partial<Config>): void {
+        if (!this.state.initialized || !this.state.element) {
+            throw new Error(this.errorMessages.NOT_RENDERED);
+        }
+
+        const element = this.state.element as SdkElement<Config>;
+
+        Object.entries(config).forEach(([key, value]) => {
+            if (value) {
+                this.config[key as keyof Config] = value;
+                element[key as keyof Config] = value;
+            }
+        });
+    }
+
+    /**
+     * Destroy the widget and clean up resources
+     */
+    destroy(): void {
+        if (!this.state.initialized) {
+            return; // Nothing to destroy
+        }
+
+        // Remove the element from the container
+        if (this.state.element && this.state.element.parentNode) {
+            this.state.element.parentNode.removeChild(this.state.element);
+        }
+
+        // Clear the container
+        if (this.state.container) {
+            this.state.container.innerHTML = '';
+        }
+
+        // Reset state
+        this.state.container = null;
+        this.state.element = null;
+        this.state.initialized = false;
+    }
+
+    /**
+     * Check if the widget is currently rendered
+     * @returns True if the widget is rendered, false otherwise
+     */
+    isRendered(): boolean {
+        return this.state.initialized;
+    }
+
+    /**
+     * Get the current configuration
+     * @returns The current configuration object
+     */
+    getConfig(): Readonly<Config> {
+        return { ...this.config };
+    }
+
+    private getEnvironment(): Environment {
+        return this.config.env || DEFAULT_ENVIRONMENT;
+    }
+
+    private getScriptId() {
+        return `${this.webComponentTag}-script-${this.getEnvironment()}`;
+    }
+
+    private isScriptLoaded() {
+        return !!document.getElementById(this.getScriptId());
+    }
+
+    private getWebComponent() {
+        return customElements.get(this.webComponentTag);
+    }
+
+    private getScriptUrl() {
+        // Support local development with Vite
+        if (typeof import.meta !== 'undefined' && import.meta.env?.['VITE_INTERNAL_BUILD'] === 'true') {
+            return import.meta.env['VITE_SCRIPT_URL'] || this.scriptUrls[this.getEnvironment()];
+        }
+
+        return this.scriptUrls[this.getEnvironment()];
+    }
+
+    private async loadScript() {
+        if (this.isScriptLoaded()) {
+            return;
+        }
+
+        if (this.scriptLoadingPromise) {
+            return this.scriptLoadingPromise;
+        }
+
+        this.scriptLoadingPromise = new Promise<void>((resolve, reject) => {
+            const script = document.createElement('script');
+            script.id = this.getScriptId();
+            script.src = this.getScriptUrl();
+            script.type = 'module';
+            script.async = true;
+
+            script.onload = () => {
+                setTimeout(() => {
+                    if (this.getWebComponent()) {
+                        resolve();
+                    } else {
+                        reject(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED));
+                    }
+                }, 0);
+            };
+
+            script.onerror = () => {
+                this.scriptLoadingPromise = undefined;
+                reject(new Error(`${this.errorMessages.SCRIPT_LOAD_FAILED} (${this.getEnvironment()})`));
+            };
+
+            document.head.appendChild(script);
+        });
+
+        try {
+            await this.scriptLoadingPromise;
+        } catch (error) {
+            this.scriptLoadingPromise = undefined;
+            throw error;
+        }
+
+        return this.scriptLoadingPromise;
+    }
+
+    private async waitForWebComponent(timeout = 5000) {
+        if (this.getWebComponent()) {
+            return;
+        }
+
+        return new Promise<void>((resolve, reject) => {
+            const timeoutId = setTimeout(() => {
+                reject(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`));
+            }, timeout);
+
+            customElements
+            .whenDefined(this.webComponentTag)
+            .then(() => {
+                clearTimeout(timeoutId);
+                resolve();
+            })
+            .catch((error) => {
+                clearTimeout(timeoutId);
+                reject(error);
+            });
+        });
+    }
+
+    /**
+     * Load the web component script if not already loaded
+     */
+    protected async ensureScriptLoaded(): Promise<void> {
+        if (this.state.scriptLoaded) {
+            return;
+        }
+
+        try {
+            await this.loadScript();
+            await this.waitForWebComponent();
+            this.state.scriptLoaded = true;
+        } catch (error) {
+            console.error('Failed to load Connect script:', error);
+            throw error;
+        }
+    }
+
+    private createWebComponent() {
+        const element = document.createElement(this.webComponentTag) as SdkElement<Config>;
+
+        Object.entries(this.config).forEach(([key, value]) => {
+            if (value) {
+                element[key as keyof Config] = value;
+            }
+        });
+
+        return element;
+    }
+}
+
+/**
+ * Common callback function types shared across all Connect apps
+ * @template TEvent - The event type for onEvent callback
+ */
+declare type CommonCallbacks<TEvent = AppEvent> = {
+    /** Called when an error occurs */
+    onError?: (error: ErrorPayload) => void;
+    /** Called when the component is closed */
+    onClose?: () => void;
+    /** Called when a general event occurs */
+    onEvent?: (event: TEvent) => void;
+    /** Called when the widget has loaded and is ready */
+    onLoaded?: () => void;
+};
+
+/**
+ * CryptoSell SDK class for programmatic control of the Connect Crypto Sell widget.
+ *
+ * Renders the `zerohash-crypto-sell` web component, which handles the iframe
+ * and postMessage communication internally.
+ *
+ * @example
+ * ```javascript
+ * const cryptoSell = new CryptoSell({
+ *   jwt: 'your-jwt-token',
+ *   env: 'prod',
+ *   theme: 'auto',
+ *   onCompleted: ({ amountSold, assetSymbol }) => console.log('Sold', amountSold, assetSymbol),
+ *   onClose: () => console.log('Closed'),
+ *   onError: ({ errorCode, reason }) => console.error(errorCode, reason),
+ * });
+ *
+ * // Render to a container
+ * await cryptoSell.render(document.getElementById('crypto-sell-container'));
+ *
+ * // Update configuration
+ * cryptoSell.updateConfig({ jwt: 'new-token', theme: 'dark' });
+ *
+ * // Clean up
+ * cryptoSell.destroy();
+ * ```
+ */
+declare class CryptoSell extends BaseJsSdk<CryptoSellConfig> {
+    protected errorMessages: {
+        ALREADY_RENDERED: string;
+        NOT_RENDERED: string;
+        INVALID_CONTAINER: string;
+        SCRIPT_LOAD_FAILED: string;
+        WEB_COMPONENT_NOT_DEFINED: string;
+    };
+    protected scriptUrls: {
+        local: string;
+        dev: string;
+        cert: string;
+        prod: string;
+        sandbox: string;
+        production: string;
+    };
+    protected webComponentTag: string;
+    /**
+     * Render the CryptoSell widget to a container element
+     * @param container - The container element to render the widget into
+     * @returns Promise that resolves when the widget is rendered
+     */
+    render(container: HTMLElement): Promise<void>;
+    /**
+     * Update the configuration of the CryptoSell widget
+     * @param config - Partial configuration to update
+     */
+    updateConfig(config: Partial<CryptoSellConfig>): void;
+    /**
+     * Get the current configuration
+     * @returns The current configuration object
+     */
+    getConfig(): Readonly<CryptoSellConfig>;
+    /**
+     * Check if the CryptoSell widget is currently rendered
+     * @returns True if the widget is rendered, false otherwise
+     */
+    isRendered(): boolean;
+    /**
+     * Destroy the CryptoSell widget and clean up resources
+     */
+    destroy(): void;
+}
+export { CryptoSell }
+export default CryptoSell;
+
+declare type CryptoSellCallbacks = CommonCallbacks<CryptoSellEvent> & {
+    /** Called when the sell is successfully executed */
+    onCompleted?: (data: CryptoSellCompletedData) => void;
+};
+
+declare type CryptoSellCompletedData = {
+    /** Symbol of the asset that was sold (e.g. 'BTC.BITCOIN') */
+    assetSymbol: string;
+    /** Quantity sold as a string */
+    amountSold: string;
+};
+
+export declare interface CryptoSellConfig extends BaseConfig<CryptoSellEvent>, CryptoSellCallbacks {
+}
+
+/**
+ * Crypto sell event structure
+ */
+declare type CryptoSellEvent = AppEvent<CryptoSellEventType>;
+
+/**
+ * Crypto sell event type literals
+ */
+declare type CryptoSellEventType = string;
+
+/**
+ * Environment configuration for the SDK
+ */
+export declare type Environment = 'local' | 'dev' | 'cert' | 'prod' | 'sandbox' | 'production';
+
+/**
+ * Generic error codes for all Connect applications
+ */
+export declare enum ErrorCode {
+    /** Network connectivity error */
+    NETWORK_ERROR = 'network_error',
+    /** Authentication or session expired error */
+    AUTH_ERROR = 'auth_error',
+    /** Resource not found error */
+    NOT_FOUND_ERROR = 'not_found_error',
+    /** Validation error from user input */
+    VALIDATION_ERROR = 'validation_error',
+    /** Server error (5xx) */
+    SERVER_ERROR = 'server_error',
+    /** Client error (4xx) */
+    CLIENT_ERROR = 'client_error',
+    /** Unknown or unexpected error */
+    UNKNOWN_ERROR = 'unknown_error',
+}
+
+/**
+ * Generic error payload structure for error callbacks
+ */
+declare type ErrorPayload = {
+    /** Error code indicating the type of error */
+    errorCode: ErrorCode;
+    /** Human-readable reason for the error */
+    reason: string;
+};
+
+/**
+ * Generic HTMLElement representing a web component with custom config
+ */
+declare type SdkElement<Config extends BaseConfig<never>> = HTMLElement & Config;
+
+/**
+ * Internal state of the SDK
+ */
+declare interface SdkState {
+    /** Whether the SDK is initialized */
+    initialized: boolean;
+    /** Whether the web component script is loaded */
+    scriptLoaded: boolean;
+    /** The container element where the widget is rendered */
+    container: HTMLElement | null;
+    /** The web component element */
+    element: HTMLElement | null;
+}
+
+/**
+ * Theme configuration for the SDK
+ *
+ * - `"auto"` - Automatically detect system preference (light/dark mode)
+ * - `"light"` - Force light theme
+ * - `"dark"` - Force dark theme
+ */
+declare type Theme = 'auto' | 'light' | 'dark';
+
+export declare type ZerohashCryptoSellElement = SdkElement<CryptoSellConfig>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,200 @@
+const s = "production", d = "JWT token is required and must be a string.";
+class c {
+  config;
+  state;
+  scriptLoadingPromise;
+  constructor(e) {
+    if (!e.jwt || typeof e.jwt != "string")
+      throw new Error(d);
+    this.config = {
+      ...e,
+      env: e.env || s,
+      theme: e.theme
+    }, this.state = {
+      initialized: !1,
+      scriptLoaded: !1,
+      container: null,
+      element: null
+    };
+  }
+  /**
+   * Render the widget to a container element
+   * @param container - The container element to render the widget into
+   * @returns Promise that resolves when the widget is rendered
+   */
+  async render(e) {
+    if (!e || !(e instanceof HTMLElement))
+      throw new Error(this.errorMessages.INVALID_CONTAINER);
+    if (this.state.initialized)
+      throw new Error(this.errorMessages.ALREADY_RENDERED);
+    try {
+      await this.ensureScriptLoaded();
+      const r = this.createWebComponent();
+      e.innerHTML = "", e.appendChild(r), this.state.container = e, this.state.element = r, this.state.initialized = !0;
+    } catch (r) {
+      throw console.error("Failed to render widget:", r), r;
+    }
+  }
+  /**
+   * Update the configuration of the widget
+   * @param config - Partial configuration to update
+   * @returns void
+   */
+  updateConfig(e) {
+    if (!this.state.initialized || !this.state.element)
+      throw new Error(this.errorMessages.NOT_RENDERED);
+    const r = this.state.element;
+    Object.entries(e).forEach(([t, n]) => {
+      n && (this.config[t] = n, r[t] = n);
+    });
+  }
+  /**
+   * Destroy the widget and clean up resources
+   */
+  destroy() {
+    this.state.initialized && (this.state.element && this.state.element.parentNode && this.state.element.parentNode.removeChild(this.state.element), this.state.container && (this.state.container.innerHTML = ""), this.state.container = null, this.state.element = null, this.state.initialized = !1);
+  }
+  /**
+   * Check if the widget is currently rendered
+   * @returns True if the widget is rendered, false otherwise
+   */
+  isRendered() {
+    return this.state.initialized;
+  }
+  /**
+   * Get the current configuration
+   * @returns The current configuration object
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  getEnvironment() {
+    return this.config.env || s;
+  }
+  getScriptId() {
+    return `${this.webComponentTag}-script-${this.getEnvironment()}`;
+  }
+  isScriptLoaded() {
+    return !!document.getElementById(this.getScriptId());
+  }
+  getWebComponent() {
+    return customElements.get(this.webComponentTag);
+  }
+  getScriptUrl() {
+    return this.scriptUrls[this.getEnvironment()];
+  }
+  async loadScript() {
+    if (!this.isScriptLoaded()) {
+      if (this.scriptLoadingPromise)
+        return this.scriptLoadingPromise;
+      this.scriptLoadingPromise = new Promise((e, r) => {
+        const t = document.createElement("script");
+        t.id = this.getScriptId(), t.src = this.getScriptUrl(), t.type = "module", t.async = !0, t.onload = () => {
+          setTimeout(() => {
+            this.getWebComponent() ? e() : r(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED));
+          }, 0);
+        }, t.onerror = () => {
+          this.scriptLoadingPromise = void 0, r(new Error(`${this.errorMessages.SCRIPT_LOAD_FAILED} (${this.getEnvironment()})`));
+        }, document.head.appendChild(t);
+      });
+      try {
+        await this.scriptLoadingPromise;
+      } catch (e) {
+        throw this.scriptLoadingPromise = void 0, e;
+      }
+      return this.scriptLoadingPromise;
+    }
+  }
+  async waitForWebComponent(e = 5e3) {
+    if (!this.getWebComponent())
+      return new Promise((r, t) => {
+        const n = setTimeout(() => {
+          t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`));
+        }, e);
+        customElements.whenDefined(this.webComponentTag).then(() => {
+          clearTimeout(n), r();
+        }).catch((a) => {
+          clearTimeout(n), t(a);
+        });
+      });
+  }
+  /**
+   * Load the web component script if not already loaded
+   */
+  async ensureScriptLoaded() {
+    if (!this.state.scriptLoaded)
+      try {
+        await this.loadScript(), await this.waitForWebComponent(), this.state.scriptLoaded = !0;
+      } catch (e) {
+        throw console.error("Failed to load Connect script:", e), e;
+      }
+  }
+  createWebComponent() {
+    const e = document.createElement(this.webComponentTag);
+    return Object.entries(this.config).forEach(([r, t]) => {
+      t && (e[r] = t);
+    }), e;
+  }
+}
+var o;
+(function(i) {
+  i.NETWORK_ERROR = "network_error", i.AUTH_ERROR = "auth_error", i.NOT_FOUND_ERROR = "not_found_error", i.VALIDATION_ERROR = "validation_error", i.SERVER_ERROR = "server_error", i.CLIENT_ERROR = "client_error", i.UNKNOWN_ERROR = "unknown_error";
+})(o || (o = {}));
+class l extends c {
+  errorMessages = {
+    ALREADY_RENDERED: "CryptoSell widget is already rendered. Call destroy() before rendering again.",
+    NOT_RENDERED: "CryptoSell widget is not rendered. Call render() first.",
+    INVALID_CONTAINER: "Invalid container element provided.",
+    SCRIPT_LOAD_FAILED: "Failed to load the Connect CryptoSell script.",
+    WEB_COMPONENT_NOT_DEFINED: "Web component is not defined. Script may not be loaded."
+  };
+  scriptUrls = {
+    local: "http://localhost:5173/crypto-sell-web/index.js",
+    dev: "https://connect-sdk.dev.0hash.com/crypto-sell-web/index.js",
+    cert: "https://sdk.sandbox.connect.xyz/crypto-sell-web/index.js",
+    prod: "https://sdk.connect.xyz/crypto-sell-web/index.js",
+    sandbox: "https://sdk.sandbox.connect.xyz/crypto-sell-web/index.js",
+    production: "https://sdk.connect.xyz/crypto-sell-web/index.js"
+  };
+  webComponentTag = "zerohash-crypto-sell";
+  /**
+   * Render the CryptoSell widget to a container element
+   * @param container - The container element to render the widget into
+   * @returns Promise that resolves when the widget is rendered
+   */
+  render(e) {
+    return super.render(e);
+  }
+  /**
+   * Update the configuration of the CryptoSell widget
+   * @param config - Partial configuration to update
+   */
+  updateConfig(e) {
+    return super.updateConfig(e);
+  }
+  /**
+   * Get the current configuration
+   * @returns The current configuration object
+   */
+  getConfig() {
+    return super.getConfig();
+  }
+  /**
+   * Check if the CryptoSell widget is currently rendered
+   * @returns True if the widget is rendered, false otherwise
+   */
+  isRendered() {
+    return super.isRendered();
+  }
+  /**
+   * Destroy the CryptoSell widget and clean up resources
+   */
+  destroy() {
+    return super.destroy();
+  }
+}
+export {
+  l as CryptoSell,
+  o as ErrorCode,
+  l as default
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(i,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i.CryptoSell={}))})(this,(function(i){"use strict";const s="production",a="JWT token is required and must be a string.";class c{config;state;scriptLoadingPromise;constructor(e){if(!e.jwt||typeof e.jwt!="string")throw new Error(a);this.config={...e,env:e.env||s,theme:e.theme},this.state={initialized:!1,scriptLoaded:!1,container:null,element:null}}async render(e){if(!e||!(e instanceof HTMLElement))throw new Error(this.errorMessages.INVALID_CONTAINER);if(this.state.initialized)throw new Error(this.errorMessages.ALREADY_RENDERED);try{await this.ensureScriptLoaded();const r=this.createWebComponent();e.innerHTML="",e.appendChild(r),this.state.container=e,this.state.element=r,this.state.initialized=!0}catch(r){throw console.error("Failed to render widget:",r),r}}updateConfig(e){if(!this.state.initialized||!this.state.element)throw new Error(this.errorMessages.NOT_RENDERED);const r=this.state.element;Object.entries(e).forEach(([t,o])=>{o&&(this.config[t]=o,r[t]=o)})}destroy(){this.state.initialized&&(this.state.element&&this.state.element.parentNode&&this.state.element.parentNode.removeChild(this.state.element),this.state.container&&(this.state.container.innerHTML=""),this.state.container=null,this.state.element=null,this.state.initialized=!1)}isRendered(){return this.state.initialized}getConfig(){return{...this.config}}getEnvironment(){return this.config.env||s}getScriptId(){return`${this.webComponentTag}-script-${this.getEnvironment()}`}isScriptLoaded(){return!!document.getElementById(this.getScriptId())}getWebComponent(){return customElements.get(this.webComponentTag)}getScriptUrl(){return this.scriptUrls[this.getEnvironment()]}async loadScript(){if(!this.isScriptLoaded()){if(this.scriptLoadingPromise)return this.scriptLoadingPromise;this.scriptLoadingPromise=new Promise((e,r)=>{const t=document.createElement("script");t.id=this.getScriptId(),t.src=this.getScriptUrl(),t.type="module",t.async=!0,t.onload=()=>{setTimeout(()=>{this.getWebComponent()?e():r(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED))},0)},t.onerror=()=>{this.scriptLoadingPromise=void 0,r(new Error(`${this.errorMessages.SCRIPT_LOAD_FAILED} (${this.getEnvironment()})`))},document.head.appendChild(t)});try{await this.scriptLoadingPromise}catch(e){throw this.scriptLoadingPromise=void 0,e}return this.scriptLoadingPromise}}async waitForWebComponent(e=5e3){if(!this.getWebComponent())return new Promise((r,t)=>{const o=setTimeout(()=>{t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`))},e);customElements.whenDefined(this.webComponentTag).then(()=>{clearTimeout(o),r()}).catch(l=>{clearTimeout(o),t(l)})})}async ensureScriptLoaded(){if(!this.state.scriptLoaded)try{await this.loadScript(),await this.waitForWebComponent(),this.state.scriptLoaded=!0}catch(e){throw console.error("Failed to load Connect script:",e),e}}createWebComponent(){const e=document.createElement(this.webComponentTag);return Object.entries(this.config).forEach(([r,t])=>{t&&(e[r]=t)}),e}}i.ErrorCode=void 0,(function(n){n.NETWORK_ERROR="network_error",n.AUTH_ERROR="auth_error",n.NOT_FOUND_ERROR="not_found_error",n.VALIDATION_ERROR="validation_error",n.SERVER_ERROR="server_error",n.CLIENT_ERROR="client_error",n.UNKNOWN_ERROR="unknown_error"})(i.ErrorCode||(i.ErrorCode={}));class d extends c{errorMessages={ALREADY_RENDERED:"CryptoSell widget is already rendered. Call destroy() before rendering again.",NOT_RENDERED:"CryptoSell widget is not rendered. Call render() first.",INVALID_CONTAINER:"Invalid container element provided.",SCRIPT_LOAD_FAILED:"Failed to load the Connect CryptoSell script.",WEB_COMPONENT_NOT_DEFINED:"Web component is not defined. Script may not be loaded."};scriptUrls={local:"http://localhost:5173/crypto-sell-web/index.js",dev:"https://connect-sdk.dev.0hash.com/crypto-sell-web/index.js",cert:"https://sdk.sandbox.connect.xyz/crypto-sell-web/index.js",prod:"https://sdk.connect.xyz/crypto-sell-web/index.js",sandbox:"https://sdk.sandbox.connect.xyz/crypto-sell-web/index.js",production:"https://sdk.connect.xyz/crypto-sell-web/index.js"};webComponentTag="zerohash-crypto-sell";render(e){return super.render(e)}updateConfig(e){return super.updateConfig(e)}getConfig(){return super.getConfig()}isRendered(){return super.isRendered()}destroy(){return super.destroy()}}i.CryptoSell=d,i.default=d,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@zerohash-sdk/crypto-sell-js",
+  "version": "1.2.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "crypto-sell-js"
+  }
+}