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

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

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

Via CDN

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

Or import directly:

import { FundWithdrawals } from 'https://sdk.connect.xyz/fund-withdrawals-web/index.js';

Getting Started

1. Import

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

2. Initialize and render

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

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.