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

package/dist/notabene.js

@@ -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) => {
       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);
+      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]));
     }), (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,8 +149,12 @@ 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);
@@ -122,6 +170,11 @@ function f(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,6 +183,16 @@ 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;
   }
+  /**
+   * 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, o) {
     const i = new URL(this.uxUrl);
     i.pathname = e;
@@ -140,24 +203,84 @@ class E {
     });
     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();
   }
+  /**
+   * 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, o) {
     return new u(
       this.componentUrl(e, t, s, o),
       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) => {

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.11",
   "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,15 +67,29 @@ 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');
@@ -82,32 +108,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 +166,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 +199,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();

package/src/components/__tests__/EmbeddedComponent.test.ts

@@ -1,5 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { CMType, HMType, HostMessage, Transaction } from '../../types';
+import {
+  CMType,
+  HMType,
+  HostMessage,
+  Transaction,
+  TransactionResponse,
+  Withdrawal,
+} from '../../types';
 import EmbeddedComponent from '../EmbeddedComponent';
 
 const url = 'https://example.com';
@@ -8,9 +15,15 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent;
+    let component: EmbeddedComponent<
+      Partial<Withdrawal>,
+      TransactionResponse<Withdrawal>
+    >;
     beforeEach(() => {
-      component = new EmbeddedComponent(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, { amountDecimal: 100 });
     });
 
     test('sets value', () => {
@@ -60,14 +73,20 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
       component.mount(parentId);
       expect(iframe?.src).toBe(url);
       expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
     });
 
     test('on', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -78,7 +97,10 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >(url, value);
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -96,7 +118,10 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent;
+      let component: EmbeddedComponent<
+        Partial<Withdrawal>,
+        TransactionResponse<Withdrawal>
+      >;
 
       beforeEach(() => {
         port = {
@@ -113,7 +138,10 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent(url, value);
+        component = new EmbeddedComponent<
+          Partial<Withdrawal>,
+          TransactionResponse<Withdrawal>
+        >(url, value);
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -123,12 +151,12 @@ describe('EmbeddedComponent', () => {
       test('send', () => {
         const message: HostMessage = {
           type: HMType.UPDATE,
-          value: { amountDecimal: 100 },
+          value: {
+            requestId: 'id',
+          },
         };
         component.send(message);
-
-        // Assert that the message is sent to the embedded component
-        // and handled correctly.
+        expect(port.postMessage).toHaveBeenCalledWith(message);
       });
 
       test('update', () => {