@zerohash-sdk/fund-withdrawals-js 0.2.0 → 0.2.3
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/dist/index.d.ts +7 -3
- package/dist/index.js +47 -31
- package/dist/index.umd.cjs +1 -1
- 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/).
|
package/dist/index.d.ts
CHANGED
|
@@ -36,7 +36,7 @@ declare interface BaseConfig<TEvent = AppEvent> extends CommonCallbacks<TEvent>
|
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Theme mode
|
|
39
|
-
* @default '
|
|
39
|
+
* @default 'light'
|
|
40
40
|
*
|
|
41
41
|
* Available themes:
|
|
42
42
|
* - `'auto'` - Automatically detect system preference (light/dark mode)
|
|
@@ -200,7 +200,11 @@ declare abstract class BaseJsSdk<Config extends BaseConfig<never> = BaseConfig>
|
|
|
200
200
|
return import.meta.env['VITE_SCRIPT_URL'] || this.scriptUrls[this.getEnvironment()];
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
|
|
203
|
+
// Route EU partners (region claim in JWT) to EU-hosted assets without
|
|
204
|
+
// changing the public `env` contract — falls back to the configured env
|
|
205
|
+
// when no EU URL is registered for that environment.
|
|
206
|
+
const effectiveEnv = resolveEnvByRegion(this.getEnvironment(), this.config.jwt);
|
|
207
|
+
return this.scriptUrls[effectiveEnv] ?? this.scriptUrls[this.getEnvironment()];
|
|
204
208
|
}
|
|
205
209
|
|
|
206
210
|
private async loadScript() {
|
|
@@ -361,7 +365,7 @@ declare type ErrorPayload = {
|
|
|
361
365
|
* const fundWithdrawals = new FundWithdrawals({
|
|
362
366
|
* jwt: 'your-jwt-token',
|
|
363
367
|
* env: 'prod',
|
|
364
|
-
* theme: '
|
|
368
|
+
* theme: 'light',
|
|
365
369
|
* isPayouts: false,
|
|
366
370
|
* onCompleted: ({ externalAccountId, assetSymbol, amount }) =>
|
|
367
371
|
* console.log('Withdrew', amount, assetSymbol, 'to', externalAccountId),
|
package/dist/index.js
CHANGED
|
@@ -1,14 +1,29 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
1
|
+
const d = "production", h = "JWT token is required and must be a string.", l = (r) => {
|
|
2
|
+
if (!r || typeof r != "string")
|
|
3
|
+
return null;
|
|
4
|
+
const e = r.split(".");
|
|
5
|
+
if (e.length < 2)
|
|
6
|
+
return null;
|
|
7
|
+
try {
|
|
8
|
+
const n = e[1].replace(/-/g, "+").replace(/_/g, "/"), t = n + "===".slice(0, (4 - n.length % 4) % 4), i = typeof atob < "u" ? atob(t) : Buffer.from(t, "base64").toString("utf-8"), a = JSON.parse(i)?.payload?.region;
|
|
9
|
+
if (typeof a != "string")
|
|
10
|
+
return null;
|
|
11
|
+
const s = a.toLowerCase();
|
|
12
|
+
return s === "us" || s === "eu" ? s : null;
|
|
13
|
+
} catch {
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
}, u = (r, e) => l(e) !== "eu" ? r : r === "cert" ? "eu-cert" : r === "prod" ? "eu-prod" : r;
|
|
17
|
+
class p {
|
|
3
18
|
config;
|
|
4
19
|
state;
|
|
5
20
|
scriptLoadingPromise;
|
|
6
21
|
constructor(e) {
|
|
7
22
|
if (!e.jwt || typeof e.jwt != "string")
|
|
8
|
-
throw new Error(
|
|
23
|
+
throw new Error(h);
|
|
9
24
|
this.config = {
|
|
10
25
|
...e,
|
|
11
|
-
env: e.env ||
|
|
26
|
+
env: e.env || d,
|
|
12
27
|
theme: e.theme
|
|
13
28
|
}, this.state = {
|
|
14
29
|
initialized: !1,
|
|
@@ -29,10 +44,10 @@ class h {
|
|
|
29
44
|
throw new Error(this.errorMessages.ALREADY_RENDERED);
|
|
30
45
|
try {
|
|
31
46
|
await this.ensureScriptLoaded();
|
|
32
|
-
const
|
|
33
|
-
e.innerHTML = "", e.appendChild(
|
|
34
|
-
} catch (
|
|
35
|
-
throw console.error("Failed to render widget:",
|
|
47
|
+
const n = this.createWebComponent();
|
|
48
|
+
e.innerHTML = "", e.appendChild(n), this.state.container = e, this.state.element = n, this.state.initialized = !0;
|
|
49
|
+
} catch (n) {
|
|
50
|
+
throw console.error("Failed to render widget:", n), n;
|
|
36
51
|
}
|
|
37
52
|
}
|
|
38
53
|
/**
|
|
@@ -43,9 +58,9 @@ class h {
|
|
|
43
58
|
updateConfig(e) {
|
|
44
59
|
if (!this.state.initialized || !this.state.element)
|
|
45
60
|
throw new Error(this.errorMessages.NOT_RENDERED);
|
|
46
|
-
const
|
|
47
|
-
Object.entries(e).forEach(([t,
|
|
48
|
-
|
|
61
|
+
const n = this.state.element;
|
|
62
|
+
Object.entries(e).forEach(([t, i]) => {
|
|
63
|
+
i && (this.config[t] = i, n[t] = i);
|
|
49
64
|
});
|
|
50
65
|
}
|
|
51
66
|
/**
|
|
@@ -69,7 +84,7 @@ class h {
|
|
|
69
84
|
return { ...this.config };
|
|
70
85
|
}
|
|
71
86
|
getEnvironment() {
|
|
72
|
-
return this.config.env ||
|
|
87
|
+
return this.config.env || d;
|
|
73
88
|
}
|
|
74
89
|
getScriptId() {
|
|
75
90
|
return `${this.webComponentTag}-script-${this.getEnvironment()}`;
|
|
@@ -81,20 +96,21 @@ class h {
|
|
|
81
96
|
return customElements.get(this.webComponentTag);
|
|
82
97
|
}
|
|
83
98
|
getScriptUrl() {
|
|
84
|
-
|
|
99
|
+
const e = u(this.getEnvironment(), this.config.jwt);
|
|
100
|
+
return this.scriptUrls[e] ?? this.scriptUrls[this.getEnvironment()];
|
|
85
101
|
}
|
|
86
102
|
async loadScript() {
|
|
87
103
|
if (!this.isScriptLoaded()) {
|
|
88
104
|
if (this.scriptLoadingPromise)
|
|
89
105
|
return this.scriptLoadingPromise;
|
|
90
|
-
this.scriptLoadingPromise = new Promise((e,
|
|
106
|
+
this.scriptLoadingPromise = new Promise((e, n) => {
|
|
91
107
|
const t = document.createElement("script");
|
|
92
108
|
t.id = this.getScriptId(), t.src = this.getScriptUrl(), t.type = "module", t.async = !0, t.onload = () => {
|
|
93
109
|
setTimeout(() => {
|
|
94
|
-
this.getWebComponent() ? e() :
|
|
110
|
+
this.getWebComponent() ? e() : n(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED));
|
|
95
111
|
}, 0);
|
|
96
112
|
}, t.onerror = () => {
|
|
97
|
-
this.scriptLoadingPromise = void 0,
|
|
113
|
+
this.scriptLoadingPromise = void 0, n(new Error(`${this.errorMessages.SCRIPT_LOAD_FAILED} (${this.getEnvironment()})`));
|
|
98
114
|
}, document.head.appendChild(t);
|
|
99
115
|
});
|
|
100
116
|
try {
|
|
@@ -107,14 +123,14 @@ class h {
|
|
|
107
123
|
}
|
|
108
124
|
async waitForWebComponent(e = 5e3) {
|
|
109
125
|
if (!this.getWebComponent())
|
|
110
|
-
return new Promise((
|
|
111
|
-
const
|
|
126
|
+
return new Promise((n, t) => {
|
|
127
|
+
const i = setTimeout(() => {
|
|
112
128
|
t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`));
|
|
113
129
|
}, e);
|
|
114
130
|
customElements.whenDefined(this.webComponentTag).then(() => {
|
|
115
|
-
clearTimeout(
|
|
116
|
-
}).catch((
|
|
117
|
-
clearTimeout(
|
|
131
|
+
clearTimeout(i), n();
|
|
132
|
+
}).catch((o) => {
|
|
133
|
+
clearTimeout(i), t(o);
|
|
118
134
|
});
|
|
119
135
|
});
|
|
120
136
|
}
|
|
@@ -131,16 +147,16 @@ class h {
|
|
|
131
147
|
}
|
|
132
148
|
createWebComponent() {
|
|
133
149
|
const e = document.createElement(this.webComponentTag);
|
|
134
|
-
return Object.entries(this.config).forEach(([
|
|
135
|
-
t && (e[
|
|
150
|
+
return Object.entries(this.config).forEach(([n, t]) => {
|
|
151
|
+
t && (e[n] = t);
|
|
136
152
|
}), e;
|
|
137
153
|
}
|
|
138
154
|
}
|
|
139
|
-
var
|
|
140
|
-
(function(
|
|
141
|
-
|
|
142
|
-
})(
|
|
143
|
-
class
|
|
155
|
+
var c;
|
|
156
|
+
(function(r) {
|
|
157
|
+
r.NETWORK_ERROR = "network_error", r.AUTH_ERROR = "auth_error", r.NOT_FOUND_ERROR = "not_found_error", r.VALIDATION_ERROR = "validation_error", r.SERVER_ERROR = "server_error", r.CLIENT_ERROR = "client_error", r.UNKNOWN_ERROR = "unknown_error";
|
|
158
|
+
})(c || (c = {}));
|
|
159
|
+
class m extends p {
|
|
144
160
|
errorMessages = {
|
|
145
161
|
ALREADY_RENDERED: "FundWithdrawals widget is already rendered. Call destroy() before rendering again.",
|
|
146
162
|
NOT_RENDERED: "FundWithdrawals widget is not rendered. Call render() first.",
|
|
@@ -174,7 +190,7 @@ class c extends h {
|
|
|
174
190
|
}
|
|
175
191
|
}
|
|
176
192
|
export {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
193
|
+
c as ErrorCode,
|
|
194
|
+
m as FundWithdrawals,
|
|
195
|
+
m as default
|
|
180
196
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i.FundWithdrawals={}))})(this,(function(i){"use strict";const o="production",l="JWT token is required and must be a string.",u=r=>{if(!r||typeof r!="string")return null;const e=r.split(".");if(e.length<2)return null;try{const n=e[1].replace(/-/g,"+").replace(/_/g,"/"),t=n+"===".slice(0,(4-n.length%4)%4),s=typeof atob<"u"?atob(t):Buffer.from(t,"base64").toString("utf-8"),h=JSON.parse(s)?.payload?.region;if(typeof h!="string")return null;const d=h.toLowerCase();return d==="us"||d==="eu"?d:null}catch{return null}},p=(r,e)=>u(e)!=="eu"?r:r==="cert"?"eu-cert":r==="prod"?"eu-prod":r;class f{config;state;scriptLoadingPromise;constructor(e){if(!e.jwt||typeof e.jwt!="string")throw new Error(l);this.config={...e,env:e.env||o,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 n=this.createWebComponent();e.innerHTML="",e.appendChild(n),this.state.container=e,this.state.element=n,this.state.initialized=!0}catch(n){throw console.error("Failed to render widget:",n),n}}updateConfig(e){if(!this.state.initialized||!this.state.element)throw new Error(this.errorMessages.NOT_RENDERED);const n=this.state.element;Object.entries(e).forEach(([t,s])=>{s&&(this.config[t]=s,n[t]=s)})}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||o}getScriptId(){return`${this.webComponentTag}-script-${this.getEnvironment()}`}isScriptLoaded(){return!!document.getElementById(this.getScriptId())}getWebComponent(){return customElements.get(this.webComponentTag)}getScriptUrl(){const e=p(this.getEnvironment(),this.config.jwt);return this.scriptUrls[e]??this.scriptUrls[this.getEnvironment()]}async loadScript(){if(!this.isScriptLoaded()){if(this.scriptLoadingPromise)return this.scriptLoadingPromise;this.scriptLoadingPromise=new Promise((e,n)=>{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():n(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED))},0)},t.onerror=()=>{this.scriptLoadingPromise=void 0,n(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((n,t)=>{const s=setTimeout(()=>{t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`))},e);customElements.whenDefined(this.webComponentTag).then(()=>{clearTimeout(s),n()}).catch(c=>{clearTimeout(s),t(c)})})}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(([n,t])=>{t&&(e[n]=t)}),e}}i.ErrorCode=void 0,(function(r){r.NETWORK_ERROR="network_error",r.AUTH_ERROR="auth_error",r.NOT_FOUND_ERROR="not_found_error",r.VALIDATION_ERROR="validation_error",r.SERVER_ERROR="server_error",r.CLIENT_ERROR="client_error",r.UNKNOWN_ERROR="unknown_error"})(i.ErrorCode||(i.ErrorCode={}));class a extends f{errorMessages={ALREADY_RENDERED:"FundWithdrawals widget is already rendered. Call destroy() before rendering again.",NOT_RENDERED:"FundWithdrawals widget is not rendered. Call render() first.",INVALID_CONTAINER:"Invalid container element provided.",SCRIPT_LOAD_FAILED:"Failed to load the Zerohash FundWithdrawals script.",WEB_COMPONENT_NOT_DEFINED:"Web component is not defined. Script may not be loaded."};scriptUrls={local:"http://localhost:5173/fund-withdrawals-web/index.js",dev:"https://connect-sdk.dev.0hash.com/fund-withdrawals-web/index.js",cert:"https://sdk.sandbox.connect.xyz/fund-withdrawals-web/index.js",prod:"https://sdk.connect.xyz/fund-withdrawals-web/index.js",sandbox:"https://sdk.sandbox.connect.xyz/fund-withdrawals-web/index.js",production:"https://sdk.connect.xyz/fund-withdrawals-web/index.js"};webComponentTag="zerohash-fund-withdrawals";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.FundWithdrawals=a,i.default=a,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|