@zerohash-sdk/fund-withdrawals-js 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,135 @@
|
|
|
1
1
|
# @zerohash-sdk/fund-withdrawals-js
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### Via NPM (recommended)
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @zerohash-sdk/fund-withdrawals-js
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
import { FundWithdrawals } from '@zerohash-sdk/fund-withdrawals-js';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### Via CDN
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<script
|
|
21
|
+
type="module"
|
|
22
|
+
src="https://sdk.connect.xyz/fund-withdrawals-web/index.js"
|
|
23
|
+
></script>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Or import directly:
|
|
27
|
+
|
|
28
|
+
```javascript
|
|
29
|
+
import { FundWithdrawals } from 'https://sdk.connect.xyz/fund-withdrawals-web/index.js';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Getting Started
|
|
33
|
+
|
|
34
|
+
### 1. Import
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
import { FundWithdrawals } from '@zerohash-sdk/fund-withdrawals-js';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2. Initialize and render
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
const fundWithdrawals = new FundWithdrawals({
|
|
44
|
+
jwt: 'your-jwt-token',
|
|
45
|
+
env: 'prod',
|
|
46
|
+
theme: 'auto',
|
|
47
|
+
isPayouts: false,
|
|
48
|
+
onCompleted: ({ externalAccountId, assetSymbol, amount }) => {
|
|
49
|
+
console.log(`Withdrew ${amount} ${assetSymbol} to ${externalAccountId}`);
|
|
50
|
+
},
|
|
51
|
+
onError: ({ errorCode, reason }) => console.error(errorCode, reason),
|
|
52
|
+
onClose: () => console.log('Closed'),
|
|
53
|
+
onEvent: (event) => console.log('Event:', event),
|
|
54
|
+
onLoaded: () => console.log('Ready'),
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const container = document.getElementById('fund-withdrawals-container');
|
|
58
|
+
await fundWithdrawals.render(container);
|
|
59
|
+
|
|
60
|
+
// Update configuration dynamically
|
|
61
|
+
fundWithdrawals.updateConfig({ jwt: 'new-jwt-token', theme: 'dark' });
|
|
62
|
+
|
|
63
|
+
// Clean up when done
|
|
64
|
+
fundWithdrawals.destroy();
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### TypeScript
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
import { FundWithdrawals, FundWithdrawalsConfig } from '@zerohash-sdk/fund-withdrawals-js';
|
|
71
|
+
|
|
72
|
+
const config: FundWithdrawalsConfig = {
|
|
73
|
+
jwt: 'your-jwt-token',
|
|
74
|
+
env: 'cert',
|
|
75
|
+
theme: 'dark',
|
|
76
|
+
isPayouts: false,
|
|
77
|
+
onCompleted: ({ externalAccountId, assetSymbol, amount }) => {
|
|
78
|
+
console.log(`Withdrew ${amount} ${assetSymbol} to ${externalAccountId}`);
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
const fw = new FundWithdrawals(config);
|
|
83
|
+
await fw.render(document.getElementById('fund-withdrawals-container')!);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## API Reference
|
|
87
|
+
|
|
88
|
+
### Configuration
|
|
89
|
+
|
|
90
|
+
| Prop | Type | Required | Default | Description |
|
|
91
|
+
| ------------- | ------------------------------------------------------ | -------- | -------- | ---------------------------------------------------------------------------------- |
|
|
92
|
+
| `jwt` | `string` | Yes | - | JWT token for authentication with Connect |
|
|
93
|
+
| `env` | `"prod" \| "cert" \| "dev" \| "local"` | No | `"prod"` | Target environment |
|
|
94
|
+
| `theme` | `"auto" \| "light" \| "dark"` | No | `"auto"` | Theme mode for the interface |
|
|
95
|
+
| `isPayouts` | `boolean` | No | `false` | When true, renders the Payouts flow instead of the standard Fund Withdrawals flow. |
|
|
96
|
+
| `onCompleted` | `({ externalAccountId, assetSymbol, amount }) => void` | No | - | Callback when the withdrawal is successfully initiated |
|
|
97
|
+
| `onError` | `({ errorCode, reason }) => void` | No | - | Callback for error events |
|
|
98
|
+
| `onClose` | `() => void` | No | - | Callback when the widget is closed |
|
|
99
|
+
| `onEvent` | `(event) => void` | No | - | Callback for general events |
|
|
100
|
+
| `onLoaded` | `() => void` | No | - | Callback when the widget is loaded and ready |
|
|
101
|
+
|
|
102
|
+
`onCompleted` payload shape: `{ externalAccountId: string; assetSymbol: string; amount: string }`.
|
|
103
|
+
|
|
104
|
+
### Methods
|
|
105
|
+
|
|
106
|
+
#### `render(container: HTMLElement): Promise<void>`
|
|
107
|
+
|
|
108
|
+
Renders the widget into the given container.
|
|
109
|
+
|
|
110
|
+
#### `updateConfig(config: Partial<FundWithdrawalsConfig>): void`
|
|
111
|
+
|
|
112
|
+
Updates the configuration of an already rendered widget.
|
|
113
|
+
|
|
114
|
+
#### `destroy(): void`
|
|
115
|
+
|
|
116
|
+
Removes the widget from the DOM and cleans up resources.
|
|
117
|
+
|
|
118
|
+
#### `isRendered(): boolean`
|
|
119
|
+
|
|
120
|
+
Returns whether the widget is currently rendered.
|
|
121
|
+
|
|
122
|
+
#### `getConfig(): FundWithdrawalsConfig`
|
|
123
|
+
|
|
124
|
+
Returns a copy of the current configuration.
|
|
125
|
+
|
|
126
|
+
## Browser Support
|
|
127
|
+
|
|
128
|
+
- Chrome / Edge 90+
|
|
129
|
+
- Firefox 88+
|
|
130
|
+
- Safari 14+
|
|
131
|
+
- All modern browsers with Web Components support
|
|
132
|
+
|
|
133
|
+
## More Information & Support
|
|
134
|
+
|
|
135
|
+
For comprehensive documentation, visit the [Zerohash Documentation Page](https://docs.zerohash.com/).
|