@notabene/javascript-sdk 2.0.0-next.10 → 2.0.0-next.12

package/dist/notabene.js

@@ -1,7 +1,7 @@
 var d = Object.defineProperty;
-var c = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var n = (r, e, t) => c(r, typeof e != "symbol" ? e + "" : e, t);
-var a = /* @__PURE__ */ ((r) => (r.COMPLETE = "complete", r.RESIZE = "resize", r.RESULT = "result", r.READY = "ready", r.INVALID = "invalid", r.MODAL = "openModal", r.ERROR = "error", r.CLOSE = "closeModal", r.CANCEL = "cancel", r))(a || {}), l = /* @__PURE__ */ ((r) => (r.UPDATE = "update", r.REQUEST_RESPONSE = "requestResponse", r))(l || {});
+var c = (o, e, t) => e in o ? d(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var n = (o, e, t) => c(o, typeof e != "symbol" ? e + "" : e, t);
+var a = /* @__PURE__ */ ((o) => (o.COMPLETE = "complete", o.RESIZE = "resize", o.RESULT = "result", o.READY = "ready", o.INVALID = "invalid", o.MODAL = "openModal", o.ERROR = "error", o.CLOSE = "closeModal", o.CANCEL = "cancel", o))(a || {}), l = /* @__PURE__ */ ((o) => (o.UPDATE = "update", o.REQUEST_RESPONSE = "requestResponse", o))(l || {});
 class m {
   constructor() {
     n(this, "listeners", /* @__PURE__ */ new Map());
@@ -22,8 +22,8 @@ class m {
     console.log("received message", e.data);
     const t = e.data;
     if (typeof t == "object" && t !== null && "type" in t) {
-      const s = t.type, o = this.listeners.get(s);
-      o && o.forEach((i) => i(t));
+      const s = t.type, r = this.listeners.get(s);
+      r && r.forEach((i) => i(t));
     }
   }
   // Method to send messages through the port
@@ -32,14 +32,17 @@ class m {
   }
 }
 class u {
-  // private popup?: HTMLElement;
+  /**
+   * Creates an instance of EmbeddedComponent.
+   * @param url - The URL of the embedded component
+   * @param value - The initial transaction value
+   */
   constructor(e, t) {
     n(this, "_url");
     n(this, "_value");
     n(this, "_errors", []);
     n(this, "iframe");
     n(this, "eventManager");
-    n(this, "ready", !1);
     n(this, "modal");
     this._url = e, this._value = t, this.eventManager = new m(), this.on(a.INVALID, (s) => {
       s.type === a.INVALID && (this._errors = s.errors, this._value = s.value);
@@ -47,57 +50,98 @@ class u {
       s.type === a.RESIZE && this.iframe && (this.iframe.style.height = `${s.height}px`);
     });
   }
+  /**
+   * Gets the URL of the embedded component
+   * @returns The URL of the embedded component
+   */
   get url() {
     return this._url;
   }
+  /**
+   * Gets the current transaction value
+   * @returns The current transaction value
+   */
   get value() {
     return this._value;
   }
   get errors() {
     return this._errors;
   }
+  /**
+   * Opens the component URL in the current window
+   */
   open() {
     document.location.href = this.url;
   }
+  /**
+   * Mounts the component to a parent element
+   * @param parentId - The ID of the parent element
+   * @throws Will throw an error if the parent element is not found
+   */
   mount(e) {
     const t = document.querySelector(e);
     if (!t) throw new Error(`parentID ${e} not found`);
     this.embed(t);
   }
+  /**
+   * Embeds the component into a parent element
+   * @param parent - The parent element to embed the component into
+   */
   embed(e) {
     var t, s;
-    this.iframe = document.createElement("iframe"), this.iframe.src = this.url, this.iframe.style.width = "100%", this.iframe.style.height = "100px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", this.iframe.setAttribute("allowtransparency", "true"), this.iframe.style.backgroundColor = "transparent", e.appendChild(this.iframe), window.addEventListener("message", (o) => {
+    this.iframe = document.createElement("iframe"), this.iframe.src = this.url, this.iframe.allow = "web-share", this.iframe.style.width = "100%", this.iframe.style.height = "100px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", e.appendChild(this.iframe), window.addEventListener("message", (r) => {
       var i, h;
-      o.source === ((i = this.iframe) == null ? void 0 : i.contentWindow) && (console.log("received message from iframe", o.data), (h = this.eventManager) == null || h.setPort(o.ports[0]), this.ready = !0);
+      r.source === ((i = this.iframe) == null ? void 0 : i.contentWindow) && (console.log("received message from iframe", r.data), (h = this.eventManager) == null || h.setPort(r.ports[0]));
     }), (s = (t = this.iframe) == null ? void 0 : t.contentWindow) == null || s.focus();
   }
+  /**
+   * Sends a message to the embedded component
+   * @param message - The message to send
+   */
   send(e) {
     this.eventManager.send(e);
   }
+  /**
+   * Adds an event listener for a specific message type
+   * @param messageType - The type of message to listen for
+   * @param callback - The callback function to execute when the message is received
+   */
   on(e, t) {
     this.eventManager.on(e, t);
   }
+  /**
+   * Removes an event listener for a specific message type
+   * @param messageType - The type of message to stop listening for
+   * @param callback - The callback function to remove
+   */
   off(e, t) {
     this.eventManager.off(e, t);
   }
+  /**
+   * Updates the transaction value and sends an update message to the component
+   * @param value - The new transaction value
+   */
   update(e) {
     this._value = e, this.send({ type: l.UPDATE, value: e });
   }
+  /**
+   * Waits for the component to complete and returns the transaction response
+   * @returns A promise that resolves with the transaction response
+   */
   completion() {
     return new Promise((e, t) => {
-      this.closeModal(), this.on(a.COMPLETE, (s) => {
+      this.on(a.COMPLETE, (s) => {
         e(s.response);
       }), this.on("error", (s) => {
         t(new Error(s.message));
       });
     });
   }
-  // popup(): void {
-  //   this.popup = document.createElement('div');
-  //   this.popup.style;
-  // }
+  /**
+   * Opens the component in a modal dialog
+   */
   openModal() {
-    this.modal && this.closeModal(), this.modal = document.createElement("dialog"), document.body.appendChild(this.modal), this.embed(this.modal), this.on(a.CANCEL, () => {
+    return this.modal && this.closeModal(), this.modal = document.createElement("dialog"), this.modal.style.border = "none", this.modal.style.backgroundColor = "transparent", this.modal.style.maxWidth = "100vw", this.modal.style.maxHeight = "100vh", this.modal.style.width = "600px", this.modal.style.height = "800px", document.body.appendChild(this.modal), this.embed(this.modal), this.on(a.CANCEL, () => {
       this.closeModal();
     }), this.on(a.CLOSE, () => {
       this.closeModal();
@@ -105,23 +149,32 @@ class u {
       this.closeModal();
     }), this.modal.showModal(), this.modal.addEventListener("click", () => {
       this.closeModal();
-    });
+    }), this.completion();
   }
+  /**
+   * Closes the modal dialog
+   *
+   */
   closeModal() {
     var e;
     this.modal && (console.log("closeModal"), (e = this.modal) == null || e.close(), this.modal.remove(), this.modal = void 0);
   }
 }
-function f(r) {
-  return Object.entries(r).map(([e, t]) => {
+function f(o) {
+  return Object.entries(o).map(([e, t]) => {
     if (!(e && t)) return;
-    const s = encodeURIComponent(e), o = encodeURIComponent(
+    const s = encodeURIComponent(e), r = encodeURIComponent(
       typeof t == "object" ? JSON.stringify(t) : t
     );
-    return `${s}=${o}`;
+    return `${s}=${r}`;
   }).filter((e) => !!e).join("&");
 }
 class E {
+  /**
+   * Creates a new instance of the Notabene SDK
+   *
+   * @param config - Configuration options for the Notabene SDK
+   */
   constructor(e) {
     n(this, "nodeUrl");
     n(this, "authToken");
@@ -130,7 +183,17 @@ class E {
     n(this, "locale");
     this.uxUrl = e.uxUrl || "https://connect.notabene.id", this.nodeUrl = e.nodeUrl, this.authToken = e.authToken, this.theme = e.theme, this.locale = e.locale;
   }
-  componentUrl(e, t, s, o) {
+  /**
+   * Generates a URL for a Notabene component
+   *
+   * @param path - The path of the component
+   * @param value - Transaction data
+   * @param configuration - Optional transaction configuration
+   * @param callbacks - Optional callback configuration
+   * @returns component URL
+   * @internal
+   */
+  componentUrl(e, t, s, r) {
     const i = new URL(this.uxUrl);
     i.pathname = e;
     const h = f({
@@ -138,30 +201,90 @@ class E {
       value: t,
       configuration: s
     });
-    return i.hash = h, this.nodeUrl && i.searchParams.set("nodeUrl", this.nodeUrl), this.theme && i.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && i.searchParams.set("locale", this.locale), o && (o.callback && i.searchParams.set("callback_url", o.callback), o.redirectUri && i.searchParams.set("redirect_uri", o.redirectUri)), i.toString();
+    return i.hash = h, this.nodeUrl && i.searchParams.set("nodeUrl", this.nodeUrl), this.theme && i.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && i.searchParams.set("locale", this.locale), r && (r.callback && i.searchParams.set("callback_url", r.callback), r.redirectUri && i.searchParams.set("redirect_uri", r.redirectUri)), i.toString();
   }
-  createComponent(e, t, s, o) {
+  /**
+   * Creates a new embedded component
+   *
+   * @param path - The path of the component
+   * @param value - Transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance
+   * @internal
+   */
+  createComponent(e, t, s, r) {
     return new u(
-      this.componentUrl(e, t, s, o),
+      this.componentUrl(e, t, s, r),
       t
     );
   }
+  /**
+   * Creates a withdrawal assist component
+   *
+   * @param value - Withdrawal transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for withdrawal assistance
+   */
   createWithdrawalAssist(e, t, s) {
     return this.createComponent("withdrawal-assist", e, t, s);
   }
+  /**
+   * Creates a deposit assist component
+   *
+   * @param value - Deposit transaction data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for deposit assistance
+   * @alpha
+   */
   createDepositAssist(e, t, s) {
-    return this.createComponent("deposit-assist", e, t, s);
+    return this.createComponent(
+      "deposit-assist",
+      e,
+      t,
+      s
+    );
   }
-  createConnect(e, t, s) {
-    return this.createComponent("connect", e, t, s);
+  /**
+   * Creates a connect component
+   *
+   * @param value - Connection request data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for connection
+   */
+  createConnectWallet(e, t, s) {
+    return this.createComponent(
+      "connect",
+      e,
+      t,
+      s
+    );
   }
+  /**
+   * Creates a deposit request component
+   *
+   * @param value - Deposit request data
+   * @param options - Optional transaction options
+   * @param callbacks - Optional callback configuration
+   * @returns A new EmbeddedComponent instance for deposit requests
+   * @alpha
+   */
   createDepositRequest(e, t, s) {
     return this.createComponent("deposit-request", e, t, s);
   }
+  /**
+   * Decodes a URL fragment into an object
+   *
+   * @param fragment - The URL fragment to decode
+   * @returns An object containing the decoded key-value pairs
+   */
   decodeFragmentToObject(e) {
     return e.slice(1).split("&").reduce(
-      (s, o) => {
-        const [i, h] = o.split("=");
+      (s, r) => {
+        const [i, h] = r.split("=");
         return s[decodeURIComponent(i)] = decodeURIComponent(h), s;
       },
       {}

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.47.7"
+      "packageVersion": "7.47.9"
     }
   ]
 }

package/package.json

@@ -9,7 +9,7 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "2.0.0-next.10",
+  "version": "2.0.0-next.12",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",
@@ -21,44 +21,48 @@
     "README.md"
   ],
   "scripts": {
+    "docs": "typedoc --options typedoc.json",
     "prepare": "husky install",
     "dev": "vite",
     "preview": "vite preview",
     "watch": "parcel watch",
     "build:dev": "yarn build && yarn dev",
     "build:clean": "rimraf dist/ ts-out",
-    "build": "vite build && tsc && api-extractor run",
+    "build": "yarn lint && vite build && tsc && api-extractor run && yarn docs ",
     "lint": "eslint .",
     "test": "vitest",
     "release": "semantic-release",
     "publish": "yarn build && npm publish --tag next"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/js": "^9.7.0",
-    "@fast-check/vitest": "^0.1.2",
-    "@microsoft/api-extractor": "^7.47.7",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@eslint/js": "^9.10.0",
+    "@fast-check/vitest": "^0.1.3",
+    "@microsoft/api-extractor": "^7.47.9",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^9.3.0",
-    "@semantic-release/npm": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
-    "eslint": "^9.9.0",
+    "@semantic-release/gitlab": "^9.5.1",
+    "@semantic-release/npm": "^9.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
+    "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "fast-check": "^3.20.0",
-    "globals": "^15.8.0",
+    "fast-check": "^3.22.0",
+    "globals": "^15.9.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.4",
+    "jsdom": "^25.0.0",
+    "lint-staged": "^12.5.0",
     "organize-imports-cli": "^0.9.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "semantic-release": "^24.1.0",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.2.0",
-    "vite": "^5.4.2",
-    "vitest": "^2.0.5"
+    "semantic-release": "^24.1.1",
+    "typedoc": "^0.26.7",
+    "typedoc-plugin-markdown": "^4.2.7",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.6.0",
+    "vite": "^5.4.6",
+    "vitest": "^2.1.1"
   },
   "lint-staged": {
     "*.ts": [

package/src/components/EmbeddedComponent.ts

@@ -1,9 +1,8 @@
 import {
   CMType,
+  ComponentRequest,
   HMType,
   HostMessage,
-  Transaction,
-  TransactionResponse,
   ValidationError,
 } from '../types';
 import {
@@ -15,25 +14,30 @@ import {
  * An embedded Notabene component
  * @public
  */
-export default class EmbeddedComponent {
+
+export default class EmbeddedComponent<V, R> {
   private _url: string;
-  private _value: Partial<Transaction>;
+  private _value: V;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
   private eventManager: MessageEventManager;
-  private ready = false;
   private modal?: HTMLDialogElement;
-  // private popup?: HTMLElement;
 
-  constructor(url: string, value: Partial<Transaction>) {
+  /**
+   * Creates an instance of EmbeddedComponent.
+   * @param url - The URL of the embedded component
+   * @param value - The initial transaction value
+   */
+
+  constructor(url: string, value: V) {
     this._url = url;
     this._value = value;
     this.eventManager = new MessageEventManager();
     this.on(CMType.INVALID, (message) => {
       if (message.type === CMType.INVALID) {
         this._errors = message.errors;
-        this._value = message.value as Transaction;
+        this._value = message.value as V;
       }
     });
     this.on(CMType.RESIZE, (message) => {
@@ -42,12 +46,20 @@ export default class EmbeddedComponent {
       }
     });
   }
+  /**
+   * Gets the URL of the embedded component
+   * @returns The URL of the embedded component
+   */
 
   public get url(): string {
     return this._url;
   }
+  /**
+   * Gets the current transaction value
+   * @returns The current transaction value
+   */
 
-  public get value(): Partial<Transaction> {
+  public get value(): V {
     return this._value;
   }
 
@@ -55,25 +67,40 @@ export default class EmbeddedComponent {
     return this._errors;
   }
 
+  /**
+   * Opens the component URL in the current window
+   */
+
   public open() {
     document.location.href = this.url;
   }
 
+  /**
+   * Mounts the component to a parent element
+   * @param parentId - The ID of the parent element
+   * @throws Will throw an error if the parent element is not found
+   */
+
   mount(parentId: string) {
     const parent = document.querySelector(parentId);
     if (!parent) throw new Error(`parentID ${parentId} not found`);
     this.embed(parent);
   }
+  /**
+   * Embeds the component into a parent element
+   * @param parent - The parent element to embed the component into
+   */
 
   embed(parent: Element) {
     this.iframe = document.createElement('iframe');
     this.iframe.src = this.url;
+    this.iframe.allow = 'web-share';
     this.iframe.style.width = '100%';
     this.iframe.style.height = '100px';
     this.iframe.style.border = 'none';
     this.iframe.style.overflow = 'hidden';
-    this.iframe.setAttribute('allowtransparency', 'true');
-    this.iframe.style.backgroundColor = 'transparent';
+    // this.iframe.setAttribute('allowtransparency', 'true');
+    // this.iframe.style.backgroundColor = 'transparent';
     parent.appendChild(this.iframe);
 
     window.addEventListener('message', (event: MessageEvent) => {
@@ -82,32 +109,55 @@ export default class EmbeddedComponent {
       }
       console.log('received message from iframe', event.data);
       this.eventManager?.setPort(event.ports[0]);
-      this.ready = true;
     });
 
     this.iframe?.contentWindow?.focus();
   }
 
+  /**
+   * Sends a message to the embedded component
+   * @param message - The message to send
+   */
   send(message: HostMessage): void {
     this.eventManager.send(message);
   }
 
+  /**
+   * Adds an event listener for a specific message type
+   * @param messageType - The type of message to listen for
+   * @param callback - The callback function to execute when the message is received
+   */
+
   on(messageType: string, callback: MessageCallback): void {
     this.eventManager.on(messageType, callback);
   }
 
+  /**
+   * Removes an event listener for a specific message type
+   * @param messageType - The type of message to stop listening for
+   * @param callback - The callback function to remove
+   */
+
   off(messageType: string, callback: MessageCallback): void {
     this.eventManager.off(messageType, callback);
   }
 
-  update(value: Partial<Transaction>) {
+  /**
+   * Updates the transaction value and sends an update message to the component
+   * @param value - The new transaction value
+   */
+  update(value: V) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value });
+    this.send({ type: HMType.UPDATE, value: value as ComponentRequest });
   }
 
-  completion(): Promise<TransactionResponse> {
+  /**
+   * Waits for the component to complete and returns the transaction response
+   * @returns A promise that resolves with the transaction response
+   */
+
+  completion(): Promise<R> {
     return new Promise((resolve, reject) => {
-      this.closeModal();
       this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
       });
@@ -117,44 +167,22 @@ export default class EmbeddedComponent {
     });
   }
 
-  // popup(): void {
-  //   this.popup = document.createElement('div');
-  //   this.popup.style;
-  // }
+  /**
+   * Opens the component in a modal dialog
+   */
 
-  openModal(): void {
+  openModal(): Promise<R> {
     if (this.modal) {
       this.closeModal();
     }
     this.modal = document.createElement('dialog');
-    // this.modal.style.maxWidth = '600px';
-    // this.modal.style.border = 'none !important';
-    // this.modal.style.background = 'transparent';
-    // this.modal.style.flexDirection = 'column';
-    // this.modal.style.alignItems = 'end';
-    // const close = document.createElement('button');
-    // close.innerText = 'X';
-    // close.style.fontSize = '1rem';
-    // close.style.padding = '0.25rem 0.5rem';
-    // close.style.display = 'block';
-    // close.style.background = 'white';
-    // close.style.color = '#aaa';
-    // close.style.border = '#aaa';
-    // close.addEventListener('click', () => this.closeModal());
-    // this.modal.appendChild(close);
-    // this.modal.css;
-    // this.modal.style.position = 'fixed';
-    // this.modal.style.bottom = '0';
-    // this.modal.style.left = '0';
-    // this.modal.style.right = '0';
-    // this.modal.style.top = '0';
-    // this.modal.style.left = '0';
-    // this.modal.style.width = '100%';
-    // this.modal.style.height = '100%';
-    // this.modal.style.backgroundColor = 'transparent';
-    // this.modal.style.display = 'flex';
-    // this.modal.style.justifyContent = 'center';
-    // this.modal.style.alignItems = 'center';
+    this.modal.style.border = 'none';
+    this.modal.style.backgroundColor = 'transparent';
+    this.modal.style.maxWidth = '100vw';
+    this.modal.style.maxHeight = '100vh';
+    this.modal.style.width = '600px';
+    this.modal.style.height = '800px';
+
     document.body.appendChild(this.modal);
     this.embed(this.modal);
     this.on(CMType.CANCEL, () => {
@@ -172,9 +200,14 @@ export default class EmbeddedComponent {
       // console.log('click');
       this.closeModal();
     });
+    return this.completion();
   }
+  /**
+   * Closes the modal dialog
+   *
+   */
 
-  private closeModal(): void {
+  closeModal(): void {
     if (this.modal) {
       console.log('closeModal');
       this.modal?.close();