@zerohash-sdk/csp-fiat-withdrawals-js 0.1.0 → 0.1.3

package/README.md

@@ -1,7 +1,134 @@
 # @zerohash-sdk/csp-fiat-withdrawals-js
 
-This library was generated with [Nx](https://nx.dev).
+A framework-agnostic JavaScript SDK for embedding the Zerohash CSP Fiat Withdrawals flow into web applications. Lets users withdraw fiat (USD) from their account to a linked bank account via ACH.
 
-## Running unit tests
+## Installation
 
-Run `nx test @zerohash-sdk/csp-fiat-withdrawals-js` to execute the unit tests via [Vitest](https://vitest.dev/).
+### Via NPM (recommended)
+
+```bash
+npm install @zerohash-sdk/csp-fiat-withdrawals-js
+```
+
+```javascript
+import { CspFiatWithdrawals } from '@zerohash-sdk/csp-fiat-withdrawals-js';
+```
+
+### Via CDN
+
+```html
+<script
+  type="module"
+  src="https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js"
+></script>
+```
+
+Or import directly:
+
+```javascript
+import { CspFiatWithdrawals } from 'https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js';
+```
+
+## Getting Started
+
+### 1. Import
+
+```javascript
+import { CspFiatWithdrawals } from '@zerohash-sdk/csp-fiat-withdrawals-js';
+```
+
+### 2. Initialize and render
+
+```javascript
+const cspFiatWithdrawals = new CspFiatWithdrawals({
+  jwt: 'your-jwt-token',
+  env: 'prod',
+  theme: 'auto',
+  onCompleted: ({ amountWithdrawn, assetSymbol }) => {
+    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
+  },
+  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('csp-fiat-withdrawals-container');
+await cspFiatWithdrawals.render(container);
+
+// Update configuration dynamically
+cspFiatWithdrawals.updateConfig({ jwt: 'new-jwt-token', theme: 'dark' });
+
+// Clean up when done
+cspFiatWithdrawals.destroy();
+```
+
+### TypeScript
+
+```typescript
+import { CspFiatWithdrawals, CspFiatWithdrawalsConfig } from '@zerohash-sdk/csp-fiat-withdrawals-js';
+
+const config: CspFiatWithdrawalsConfig = {
+  jwt: 'your-jwt-token',
+  env: 'cert',
+  theme: 'dark',
+  onCompleted: ({ amountWithdrawn, assetSymbol }) => {
+    console.log(`Withdrew ${amountWithdrawn} ${assetSymbol}`);
+  },
+};
+
+const csp = new CspFiatWithdrawals(config);
+await csp.render(document.getElementById('csp-fiat-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                 |
+| `onCompleted` | `({ amountWithdrawn, assetSymbol }) => void` | No       | -        | Callback when the withdrawal flow completes  |
+| `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: `{ amountWithdrawn: string; assetSymbol: string }` (asset is always `'USD'`).
+
+### Methods
+
+#### `render(container: HTMLElement): Promise<void>`
+
+Renders the widget into the given container.
+
+#### `updateConfig(config: Partial<CspFiatWithdrawalsConfig>): 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(): CspFiatWithdrawalsConfig`
+
+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](https://docs.zerohash.com/).

package/dist/index.d.ts

@@ -36,7 +36,7 @@ declare interface BaseConfig<TEvent = AppEvent> extends CommonCallbacks<TEvent>
 
     /**
      * Theme mode
-     * @default 'auto'
+     * @default 'light'
      *
      * Available themes:
      * - `'auto'` - Automatically detect system preference (light/dark mode)
@@ -200,7 +200,11 @@ declare abstract class BaseJsSdk<Config extends BaseConfig<never> = BaseConfig>
             return import.meta.env['VITE_SCRIPT_URL'] || this.scriptUrls[this.getEnvironment()];
         }
 
-        return this.scriptUrls[this.getEnvironment()];
+        // Route EU partners (region claim in JWT) to EU-hosted assets without
+        // changing the public `env` contract — falls back to the configured env
+        // when no EU URL is registered for that environment.
+        const effectiveEnv = resolveEnvByRegion(this.getEnvironment(), this.config.jwt);
+        return this.scriptUrls[effectiveEnv] ?? this.scriptUrls[this.getEnvironment()];
     }
 
     private async loadScript() {
@@ -327,7 +331,7 @@ declare type CommonCallbacks<TEvent = AppEvent> = {
  * const cspFiatWithdrawals = new CspFiatWithdrawals({
  *   jwt: 'your-jwt-token',
  *   env: 'prod',
- *   theme: 'auto',
+ *   theme: 'light',
  *   onCompleted: ({ amountWithdrawn, assetSymbol }) =>
  *     console.log('Withdrew', amountWithdrawn, assetSymbol),
  *   onClose: () => console.log('Closed'),

package/dist/index.js

@@ -1,14 +1,29 @@
-const n = "production", d = "JWT token is required and must be a string.";
-class h {
+const d = "production", h = "JWT token is required and must be a string.", l = (r) => {
+  if (!r || typeof r != "string")
+    return null;
+  const e = r.split(".");
+  if (e.length < 2)
+    return null;
+  try {
+    const i = e[1].replace(/-/g, "+").replace(/_/g, "/"), t = i + "===".slice(0, (4 - i.length % 4) % 4), n = typeof atob < "u" ? atob(t) : Buffer.from(t, "base64").toString("utf-8"), a = JSON.parse(n)?.payload?.region;
+    if (typeof a != "string")
+      return null;
+    const s = a.toLowerCase();
+    return s === "us" || s === "eu" ? s : null;
+  } catch {
+    return null;
+  }
+}, p = (r, e) => l(e) !== "eu" ? r : r === "cert" ? "eu-cert" : r === "prod" ? "eu-prod" : r;
+class u {
   config;
   state;
   scriptLoadingPromise;
   constructor(e) {
     if (!e.jwt || typeof e.jwt != "string")
-      throw new Error(d);
+      throw new Error(h);
     this.config = {
       ...e,
-      env: e.env || n,
+      env: e.env || d,
       theme: e.theme
     }, this.state = {
       initialized: !1,
@@ -44,8 +59,8 @@ class h {
     if (!this.state.initialized || !this.state.element)
       throw new Error(this.errorMessages.NOT_RENDERED);
     const i = this.state.element;
-    Object.entries(e).forEach(([t, s]) => {
-      s && (this.config[t] = s, i[t] = s);
+    Object.entries(e).forEach(([t, n]) => {
+      n && (this.config[t] = n, i[t] = n);
     });
   }
   /**
@@ -69,7 +84,7 @@ class h {
     return { ...this.config };
   }
   getEnvironment() {
-    return this.config.env || n;
+    return this.config.env || d;
   }
   getScriptId() {
     return `${this.webComponentTag}-script-${this.getEnvironment()}`;
@@ -81,7 +96,8 @@ class h {
     return customElements.get(this.webComponentTag);
   }
   getScriptUrl() {
-    return this.scriptUrls[this.getEnvironment()];
+    const e = p(this.getEnvironment(), this.config.jwt);
+    return this.scriptUrls[e] ?? this.scriptUrls[this.getEnvironment()];
   }
   async loadScript() {
     if (!this.isScriptLoaded()) {
@@ -108,13 +124,13 @@ class h {
   async waitForWebComponent(e = 5e3) {
     if (!this.getWebComponent())
       return new Promise((i, t) => {
-        const s = setTimeout(() => {
+        const n = setTimeout(() => {
           t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`));
         }, e);
         customElements.whenDefined(this.webComponentTag).then(() => {
-          clearTimeout(s), i();
-        }).catch((a) => {
-          clearTimeout(s), t(a);
+          clearTimeout(n), i();
+        }).catch((o) => {
+          clearTimeout(n), t(o);
         });
       });
   }
@@ -136,11 +152,11 @@ class h {
     }), e;
   }
 }
-var o;
+var c;
 (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";
-})(o || (o = {}));
-class c extends h {
+})(c || (c = {}));
+class m extends u {
   errorMessages = {
     ALREADY_RENDERED: "CspFiatWithdrawals widget is already rendered. Call destroy() before rendering again.",
     NOT_RENDERED: "CspFiatWithdrawals widget is not rendered. Call render() first.",
@@ -194,7 +210,7 @@ class c extends h {
   }
 }
 export {
-  c as CspFiatWithdrawals,
-  o as ErrorCode,
-  c as default
+  m as CspFiatWithdrawals,
+  c as ErrorCode,
+  m as default
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.CspFiatWithdrawals={}))})(this,(function(r){"use strict";const n="production",d="JWT token is required and must be a string.";class h{config;state;scriptLoadingPromise;constructor(e){if(!e.jwt||typeof e.jwt!="string")throw new Error(d);this.config={...e,env:e.env||n,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 i=this.createWebComponent();e.innerHTML="",e.appendChild(i),this.state.container=e,this.state.element=i,this.state.initialized=!0}catch(i){throw console.error("Failed to render widget:",i),i}}updateConfig(e){if(!this.state.initialized||!this.state.element)throw new Error(this.errorMessages.NOT_RENDERED);const i=this.state.element;Object.entries(e).forEach(([t,o])=>{o&&(this.config[t]=o,i[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||n}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,i)=>{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():i(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED))},0)},t.onerror=()=>{this.scriptLoadingPromise=void 0,i(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((i,t)=>{const o=setTimeout(()=>{t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`))},e);customElements.whenDefined(this.webComponentTag).then(()=>{clearTimeout(o),i()}).catch(c=>{clearTimeout(o),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(([i,t])=>{t&&(e[i]=t)}),e}}r.ErrorCode=void 0,(function(s){s.NETWORK_ERROR="network_error",s.AUTH_ERROR="auth_error",s.NOT_FOUND_ERROR="not_found_error",s.VALIDATION_ERROR="validation_error",s.SERVER_ERROR="server_error",s.CLIENT_ERROR="client_error",s.UNKNOWN_ERROR="unknown_error"})(r.ErrorCode||(r.ErrorCode={}));class a extends h{errorMessages={ALREADY_RENDERED:"CspFiatWithdrawals widget is already rendered. Call destroy() before rendering again.",NOT_RENDERED:"CspFiatWithdrawals widget is not rendered. Call render() first.",INVALID_CONTAINER:"Invalid container element provided.",SCRIPT_LOAD_FAILED:"Failed to load the Zerohash CspFiatWithdrawals script.",WEB_COMPONENT_NOT_DEFINED:"Web component is not defined. Script may not be loaded."};scriptUrls={local:"http://localhost:5173/csp-fiat-withdrawals-web/index.js",dev:"https://connect-sdk.dev.0hash.com/csp-fiat-withdrawals-web/index.js",cert:"https://sdk.sandbox.connect.xyz/csp-fiat-withdrawals-web/index.js",prod:"https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js",sandbox:"https://sdk.sandbox.connect.xyz/csp-fiat-withdrawals-web/index.js",production:"https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js"};webComponentTag="zerohash-csp-fiat-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()}}r.CspFiatWithdrawals=a,r.default=a,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(n,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(n=typeof globalThis<"u"?globalThis:n||self,o(n.CspFiatWithdrawals={}))})(this,(function(n){"use strict";const o="production",l="JWT token is required and must be a string.",p=r=>{if(!r||typeof r!="string")return null;const e=r.split(".");if(e.length<2)return null;try{const i=e[1].replace(/-/g,"+").replace(/_/g,"/"),t=i+"===".slice(0,(4-i.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 a=h.toLowerCase();return a==="us"||a==="eu"?a:null}catch{return null}},u=(r,e)=>p(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 i=this.createWebComponent();e.innerHTML="",e.appendChild(i),this.state.container=e,this.state.element=i,this.state.initialized=!0}catch(i){throw console.error("Failed to render widget:",i),i}}updateConfig(e){if(!this.state.initialized||!this.state.element)throw new Error(this.errorMessages.NOT_RENDERED);const i=this.state.element;Object.entries(e).forEach(([t,s])=>{s&&(this.config[t]=s,i[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=u(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,i)=>{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():i(new Error(this.errorMessages.WEB_COMPONENT_NOT_DEFINED))},0)},t.onerror=()=>{this.scriptLoadingPromise=void 0,i(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((i,t)=>{const s=setTimeout(()=>{t(new Error(`Timeout waiting for ${this.webComponentTag} to be defined`))},e);customElements.whenDefined(this.webComponentTag).then(()=>{clearTimeout(s),i()}).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(([i,t])=>{t&&(e[i]=t)}),e}}n.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"})(n.ErrorCode||(n.ErrorCode={}));class d extends f{errorMessages={ALREADY_RENDERED:"CspFiatWithdrawals widget is already rendered. Call destroy() before rendering again.",NOT_RENDERED:"CspFiatWithdrawals widget is not rendered. Call render() first.",INVALID_CONTAINER:"Invalid container element provided.",SCRIPT_LOAD_FAILED:"Failed to load the Zerohash CspFiatWithdrawals script.",WEB_COMPONENT_NOT_DEFINED:"Web component is not defined. Script may not be loaded."};scriptUrls={local:"http://localhost:5173/csp-fiat-withdrawals-web/index.js",dev:"https://connect-sdk.dev.0hash.com/csp-fiat-withdrawals-web/index.js",cert:"https://sdk.sandbox.connect.xyz/csp-fiat-withdrawals-web/index.js",prod:"https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js",sandbox:"https://sdk.sandbox.connect.xyz/csp-fiat-withdrawals-web/index.js",production:"https://sdk.connect.xyz/csp-fiat-withdrawals-web/index.js"};webComponentTag="zerohash-csp-fiat-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()}}n.CspFiatWithdrawals=d,n.default=d,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohash-sdk/csp-fiat-withdrawals-js",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",