@zerohash-sdk/fund-js 1.4.0 → 1.4.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 +68 -58
- package/dist/index.d.ts +11 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,158 +1,166 @@
|
|
|
1
|
-
# @zerohash-sdk/
|
|
1
|
+
# @zerohash-sdk/fund-js
|
|
2
2
|
|
|
3
|
-
A JavaScript SDK that enables frontend applications to seamlessly integrate with the Connect
|
|
3
|
+
A JavaScript SDK that enables frontend applications to seamlessly integrate with the Connect Fund product.
|
|
4
4
|
|
|
5
|
-
Connect
|
|
5
|
+
Connect Fund provides a secure, customizable flow for funding accounts via crypto deposits directly within your application.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
### Via NPM (recommended)
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
|
-
npm install @zerohash-sdk/
|
|
12
|
+
npm install @zerohash-sdk/fund-js
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```javascript
|
|
16
|
-
import {
|
|
16
|
+
import { Fund } from '@zerohash-sdk/fund-js';
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
### Via CDN
|
|
20
20
|
|
|
21
|
-
You can import the script in your HTML file and use the `
|
|
21
|
+
You can import the script in your HTML file and use the `Fund` class provided by it.
|
|
22
22
|
|
|
23
23
|
```html
|
|
24
24
|
<script
|
|
25
25
|
type="module"
|
|
26
|
-
src="https://sdk.connect.xyz/
|
|
26
|
+
src="https://sdk.connect.xyz/fund-web/index.js"
|
|
27
27
|
></script>
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Or import directly in your JavaScript code:
|
|
31
31
|
|
|
32
32
|
```javascript
|
|
33
|
-
import {
|
|
33
|
+
import { Fund } from 'https://sdk.connect.xyz/fund-web/index.js';
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
## Getting Started
|
|
37
37
|
|
|
38
|
-
Follow these simple steps to integrate Connect
|
|
38
|
+
Follow these simple steps to integrate Connect Fund into your frontend application:
|
|
39
39
|
|
|
40
|
-
### 1. Import the
|
|
40
|
+
### 1. Import the Fund module
|
|
41
41
|
|
|
42
42
|
```javascript
|
|
43
|
-
import {
|
|
43
|
+
import { Fund } from '@zerohash-sdk/fund-js';
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
### 1.1 Or import via CDN
|
|
47
47
|
|
|
48
48
|
```javascript
|
|
49
|
-
import {
|
|
49
|
+
import { Fund } from 'https://sdk.connect.xyz/fund-web/index.js';
|
|
50
50
|
```
|
|
51
51
|
|
|
52
52
|
### 2. Initialize and render the widget
|
|
53
53
|
|
|
54
54
|
```javascript
|
|
55
|
-
// Create a
|
|
56
|
-
const
|
|
55
|
+
// Create a Fund instance with configuration
|
|
56
|
+
const fund = new Fund({
|
|
57
57
|
jwt: 'your-jwt-token', // Obtain this from your backend
|
|
58
58
|
env: 'prod', // or 'cert' for testing
|
|
59
59
|
theme: 'auto', // 'auto' (default), 'light', or 'dark'
|
|
60
|
-
onCompleted: ({
|
|
61
|
-
console.log('
|
|
60
|
+
onCompleted: ({ assetSymbol, amount, network, depositAddress }) => {
|
|
61
|
+
console.log('Fund completed:', amount, assetSymbol, network, depositAddress);
|
|
62
62
|
},
|
|
63
63
|
onError: ({ errorCode, reason }) => {
|
|
64
|
-
console.error('
|
|
64
|
+
console.error('Fund error:', errorCode, 'Reason:', reason);
|
|
65
65
|
},
|
|
66
66
|
onClose: () => {
|
|
67
|
-
console.log('
|
|
67
|
+
console.log('Fund widget closed');
|
|
68
68
|
},
|
|
69
69
|
onEvent: ({ type, data }) => {
|
|
70
70
|
console.log('Event received:', type, data);
|
|
71
71
|
},
|
|
72
72
|
onLoaded: () => {
|
|
73
|
-
console.log('
|
|
73
|
+
console.log('Fund widget loaded and ready');
|
|
74
74
|
},
|
|
75
75
|
});
|
|
76
76
|
|
|
77
77
|
// Render the widget to a container element
|
|
78
|
-
const container = document.getElementById('
|
|
79
|
-
await
|
|
78
|
+
const container = document.getElementById('fund-container');
|
|
79
|
+
await fund.render(container);
|
|
80
80
|
|
|
81
81
|
// Update configuration dynamically
|
|
82
|
-
|
|
82
|
+
fund.updateConfig({
|
|
83
83
|
jwt: 'new-jwt-token',
|
|
84
84
|
theme: 'dark',
|
|
85
85
|
});
|
|
86
86
|
|
|
87
87
|
// Check if rendered
|
|
88
|
-
if (
|
|
88
|
+
if (fund.isRendered()) {
|
|
89
89
|
console.log('Widget is active');
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
// Clean up when done
|
|
93
|
-
|
|
93
|
+
fund.destroy();
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
### 2.1 Using TypeScript (optional)
|
|
97
97
|
|
|
98
98
|
```typescript
|
|
99
|
-
import {
|
|
99
|
+
import { Fund, FundConfig } from '@zerohash-sdk/fund-js';
|
|
100
100
|
|
|
101
|
-
const config:
|
|
101
|
+
const config: FundConfig = {
|
|
102
102
|
jwt: 'your-jwt-token',
|
|
103
103
|
env: 'cert',
|
|
104
104
|
theme: 'dark',
|
|
105
|
-
onCompleted: ({
|
|
106
|
-
console.log(`
|
|
105
|
+
onCompleted: ({ assetSymbol, amount }) => {
|
|
106
|
+
console.log(`Funded ${amount} ${assetSymbol}`);
|
|
107
107
|
},
|
|
108
108
|
onError: ({ errorCode, reason }) => {
|
|
109
109
|
console.error(errorCode, reason);
|
|
110
110
|
},
|
|
111
111
|
};
|
|
112
112
|
|
|
113
|
-
const
|
|
114
|
-
await
|
|
113
|
+
const fund = new Fund(config);
|
|
114
|
+
await fund.render(document.getElementById('fund-container')!);
|
|
115
115
|
```
|
|
116
116
|
|
|
117
117
|
## API Reference
|
|
118
118
|
|
|
119
119
|
### Configuration
|
|
120
120
|
|
|
121
|
-
| Prop | Type
|
|
122
|
-
| ------------- |
|
|
123
|
-
| `jwt` | `string`
|
|
124
|
-
| `env` | `"prod" \| "cert" \| "dev" \| "local"`
|
|
125
|
-
| `theme` | `"auto" \| "light" \| "dark"`
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
121
|
+
| Prop | Type | Required | Default | Description |
|
|
122
|
+
| ------------- | ------------------------------------------------------------ | -------- | -------- | -------------------------------------------------- |
|
|
123
|
+
| `jwt` | `string` | Yes | - | JWT token for authentication with Connect |
|
|
124
|
+
| `env` | `"prod" \| "cert" \| "dev" \| "local"` | No | `"prod"` | Target environment |
|
|
125
|
+
| `theme` | `"auto" \| "light" \| "dark"` | No | `"auto"` | Theme mode for the interface |
|
|
126
|
+
| `isPay` | `boolean` | No | `false` | Run the SDK in Pay mode (see notes below) |
|
|
127
|
+
| `onCompleted` | `({ assetSymbol, amount, network, depositAddress }) => void` | No | - | Callback when the fund flow completes successfully |
|
|
128
|
+
| `onError` | `({ errorCode, reason }) => void` | No | - | Callback for error events |
|
|
129
|
+
| `onClose` | `() => void` | No | - | Callback when the widget is closed |
|
|
130
|
+
| `onEvent` | `({ type, data }) => void` | No | - | Callback for general events |
|
|
131
|
+
| `onLoaded` | `() => void` | No | - | Callback when the widget is loaded and ready |
|
|
132
|
+
|
|
133
|
+
### Pay mode (`isPay`)
|
|
134
|
+
|
|
135
|
+
When `isPay` is `true`, the Fund SDK runs in Pay mode:
|
|
136
|
+
|
|
137
|
+
- Uses the `pay-sdk` app id and the `app:internal:pay` scope when calling trade-api.
|
|
138
|
+
- Signs the `account_funding_pay` terms agreement.
|
|
131
139
|
|
|
132
140
|
### Constructor
|
|
133
141
|
|
|
134
142
|
```javascript
|
|
135
|
-
new
|
|
143
|
+
new Fund(config: FundConfig)
|
|
136
144
|
```
|
|
137
145
|
|
|
138
|
-
Creates a new
|
|
146
|
+
Creates a new Fund instance with the provided configuration.
|
|
139
147
|
|
|
140
148
|
### Methods
|
|
141
149
|
|
|
142
150
|
#### `render(container: HTMLElement): Promise<void>`
|
|
143
151
|
|
|
144
|
-
Renders the
|
|
152
|
+
Renders the Fund widget to the specified container element.
|
|
145
153
|
|
|
146
154
|
```javascript
|
|
147
|
-
await
|
|
155
|
+
await fund.render(document.getElementById('fund-container'));
|
|
148
156
|
```
|
|
149
157
|
|
|
150
|
-
#### `updateConfig(config: Partial<
|
|
158
|
+
#### `updateConfig(config: Partial<FundConfig>): void`
|
|
151
159
|
|
|
152
160
|
Updates the configuration of an already rendered widget.
|
|
153
161
|
|
|
154
162
|
```javascript
|
|
155
|
-
|
|
163
|
+
fund.updateConfig({
|
|
156
164
|
jwt: 'new-token',
|
|
157
165
|
theme: 'dark',
|
|
158
166
|
});
|
|
@@ -163,7 +171,7 @@ cryptoSell.updateConfig({
|
|
|
163
171
|
Removes the widget from the DOM and cleans up resources.
|
|
164
172
|
|
|
165
173
|
```javascript
|
|
166
|
-
|
|
174
|
+
fund.destroy();
|
|
167
175
|
```
|
|
168
176
|
|
|
169
177
|
#### `isRendered(): boolean`
|
|
@@ -171,17 +179,17 @@ cryptoSell.destroy();
|
|
|
171
179
|
Returns whether the widget is currently rendered.
|
|
172
180
|
|
|
173
181
|
```javascript
|
|
174
|
-
if (
|
|
182
|
+
if (fund.isRendered()) {
|
|
175
183
|
// Widget is active
|
|
176
184
|
}
|
|
177
185
|
```
|
|
178
186
|
|
|
179
|
-
#### `getConfig():
|
|
187
|
+
#### `getConfig(): FundConfig`
|
|
180
188
|
|
|
181
189
|
Returns a copy of the current configuration.
|
|
182
190
|
|
|
183
191
|
```javascript
|
|
184
|
-
const config =
|
|
192
|
+
const config = fund.getConfig();
|
|
185
193
|
console.log('Current JWT:', config.jwt);
|
|
186
194
|
```
|
|
187
195
|
|
|
@@ -189,18 +197,20 @@ console.log('Current JWT:', config.jwt);
|
|
|
189
197
|
|
|
190
198
|
### onCompleted
|
|
191
199
|
|
|
192
|
-
Called when the
|
|
200
|
+
Called when the fund flow completes successfully.
|
|
193
201
|
|
|
194
202
|
```javascript
|
|
195
|
-
onCompleted: ({
|
|
196
|
-
//
|
|
197
|
-
//
|
|
203
|
+
onCompleted: ({ assetSymbol, amount, network, depositAddress }) => {
|
|
204
|
+
// assetSymbol: Asset symbol (e.g. 'BTC.BITCOIN')
|
|
205
|
+
// amount: Amount to be deposited as a string
|
|
206
|
+
// network: Network used for the deposit
|
|
207
|
+
// depositAddress: Deposit address for the asset
|
|
198
208
|
};
|
|
199
209
|
```
|
|
200
210
|
|
|
201
211
|
### onError
|
|
202
212
|
|
|
203
|
-
Called when an error occurs in the
|
|
213
|
+
Called when an error occurs in the Fund widget.
|
|
204
214
|
|
|
205
215
|
```javascript
|
|
206
216
|
onError: ({ errorCode, reason }) => {
|
|
@@ -211,7 +221,7 @@ onError: ({ errorCode, reason }) => {
|
|
|
211
221
|
|
|
212
222
|
### onClose
|
|
213
223
|
|
|
214
|
-
Called when the
|
|
224
|
+
Called when the Fund widget is closed by the user.
|
|
215
225
|
|
|
216
226
|
```javascript
|
|
217
227
|
onClose: () => {
|
|
@@ -221,7 +231,7 @@ onClose: () => {
|
|
|
221
231
|
|
|
222
232
|
### onEvent
|
|
223
233
|
|
|
224
|
-
Called for general events from the
|
|
234
|
+
Called for general events from the Fund widget.
|
|
225
235
|
|
|
226
236
|
```javascript
|
|
227
237
|
onEvent: ({ type, data }) => {
|
|
@@ -232,7 +242,7 @@ onEvent: ({ type, data }) => {
|
|
|
232
242
|
|
|
233
243
|
### onLoaded
|
|
234
244
|
|
|
235
|
-
Called when the
|
|
245
|
+
Called when the Fund widget has fully loaded and is ready for user interaction.
|
|
236
246
|
|
|
237
247
|
```javascript
|
|
238
248
|
onLoaded: () => {
|
package/dist/index.d.ts
CHANGED
|
@@ -441,6 +441,17 @@ declare type FundCompletedData = {
|
|
|
441
441
|
};
|
|
442
442
|
|
|
443
443
|
export declare interface FundConfig extends BaseConfig<FundEvent>, FundCallbacks {
|
|
444
|
+
/**
|
|
445
|
+
* Runs the SDK in Pay mode.
|
|
446
|
+
*
|
|
447
|
+
* - Uses the `pay-sdk` app id and `app:internal:pay` scope when talking to trade-api.
|
|
448
|
+
* - Signs the `account_funding_pay` terms agreement.
|
|
449
|
+
* - Polls deposit status by `transactionId` (single-deposit endpoint) instead of
|
|
450
|
+
* by `deposit_address` (list endpoint).
|
|
451
|
+
*
|
|
452
|
+
* @default false
|
|
453
|
+
*/
|
|
454
|
+
isPay?: boolean;
|
|
444
455
|
}
|
|
445
456
|
|
|
446
457
|
/**
|