@notabene/javascript-sdk 2.0.0-next.17 → 2.0.0-next.19

package/dist/notabene.js

@@ -1,23 +1,57 @@
 var c = Object.defineProperty;
 var m = (t, e, s) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
 var o = (t, e, s) => m(t, typeof e != "symbol" ? e + "" : e, s);
-var u = /* @__PURE__ */ ((t) => (t.PRIVATE = "WALLET", t.VASP = "VASP", t))(u || {}), E = /* @__PURE__ */ ((t) => (t.NATURAL = "natural", t.LEGAL = "legal", t.SELF = "self", t))(E || {}), f = /* @__PURE__ */ ((t) => (t.EMPTY = "empty", t.VERIFY = "verify", t.PENDING = "pending", t.VERIFIED = "verified", t.BANNED = "banned", t))(f || {}), a = /* @__PURE__ */ ((t) => (t.COMPLETE = "complete", t.RESIZE = "resize", t.RESULT = "result", t.READY = "ready", t.INVALID = "invalid", t.ERROR = "error", t.CANCEL = "cancel", t))(a || {}), d = /* @__PURE__ */ ((t) => (t.UPDATE = "update", t.REQUEST_RESPONSE = "requestResponse", t))(d || {}), p = /* @__PURE__ */ ((t) => (t.PENDING = "pending", t.FAILED = "rejected", t.FLAGGED = "flagged", t.VERIFIED = "verified", t))(p || {}), g = /* @__PURE__ */ ((t) => (t.SelfDeclaration = "self-declaration", t.PersonalSignEIP191 = "eip-191", t.SIWE = "siwe", t.PersonalSignEIP712 = "eip-712", t.PersonalSignBIP137 = "bip-137", t.PersonalSignXPUB = "xpub", t.MicroTransfer = "microtransfer", t.Screenshot = "screenshot", t))(g || {});
+var u = /* @__PURE__ */ ((t) => (t.PRIVATE = "WALLET", t.VASP = "VASP", t))(u || {}), f = /* @__PURE__ */ ((t) => (t.NATURAL = "natural", t.LEGAL = "legal", t.SELF = "self", t))(f || {}), p = /* @__PURE__ */ ((t) => (t.EMPTY = "empty", t.VERIFY = "verify", t.PENDING = "pending", t.VERIFIED = "verified", t.BANNED = "banned", t))(p || {}), a = /* @__PURE__ */ ((t) => (t.COMPLETE = "complete", t.RESIZE = "resize", t.RESULT = "result", t.READY = "ready", t.INVALID = "invalid", t.ERROR = "error", t.CANCEL = "cancel", t))(a || {}), d = /* @__PURE__ */ ((t) => (t.UPDATE = "update", t.REQUEST_RESPONSE = "requestResponse", t))(d || {}), E = /* @__PURE__ */ ((t) => (t.PENDING = "pending", t.FAILED = "rejected", t.FLAGGED = "flagged", t.VERIFIED = "verified", t))(E || {}), g = /* @__PURE__ */ ((t) => (t.SelfDeclaration = "self-declaration", t.PersonalSignEIP191 = "eip-191", t.SIWE = "siwe", t.PersonalSignEIP712 = "eip-712", t.PersonalSignBIP137 = "bip-137", t.PersonalSignXPUB = "xpub", t.MicroTransfer = "microtransfer", t.Screenshot = "screenshot", t))(g || {});
 class v {
   constructor() {
     o(this, "listeners", /* @__PURE__ */ new Map());
     o(this, "port");
     this.handleMessage = this.handleMessage.bind(this);
   }
+  /**
+   * Sets up the message port for communication.
+   *
+   * Initializes the MessagePort for receiving messages by setting up the message handler
+   * and starting the port.
+   *
+   * @param port - The MessagePort instance to use for communication
+   */
   setPort(e) {
     this.port = e, this.port.onmessage = this.handleMessage, this.port.start();
   }
+  /**
+   * Registers a callback for a specific message type.
+   *
+   * When messages of the specified type are received, the callback will be executed
+   * with the message data.
+   *
+   * @param messageType - The type of message to listen for
+   * @param callback - The callback function to execute when matching messages are received
+   */
   on(e, s) {
     this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(s);
   }
+  /**
+   * Removes a callback for a specific message type.
+   *
+   * If the callback is the last one registered for the message type,
+   * the message type entry will be removed entirely.
+   *
+   * @param messageType - The type of message to remove listener from
+   * @param callback - The callback function to remove
+   */
   off(e, s) {
     const r = this.listeners.get(e);
     r && (r.delete(s), r.size === 0 && this.listeners.delete(e));
   }
+  /**
+   * Internal message handler for processing received messages.
+   *
+   * Validates incoming messages and dispatches them to registered callbacks
+   * based on the message type.
+   *
+   * @param event - The message event containing the component message
+   */
   handleMessage(e) {
     const s = e.data;
     if (typeof s == "object" && s !== null && "type" in s) {
@@ -25,7 +59,10 @@ class v {
       i && i.forEach((n) => n(s));
     }
   }
-  // Method to send messages through the port
+  /**
+   * Sends a message through the message port
+   * @param message The host message to send
+   */
   send(e) {
     this.port && this.port.postMessage(e);
   }
@@ -36,17 +73,18 @@ class w {
    * @param url - The URL of the embedded component
    * @param value - The initial transaction value
    */
-  constructor(e, s) {
+  constructor(e, s, r) {
     o(this, "_url");
     o(this, "_value");
+    o(this, "_options");
     o(this, "_errors", []);
     o(this, "iframe");
     o(this, "eventManager");
     o(this, "modal");
-    this._url = e, this._value = s, this.eventManager = new v(), this.on(a.INVALID, (r) => {
-      r.type === a.INVALID && (this._errors = r.errors, this._value = r.value);
-    }), this.on(a.RESIZE, (r) => {
-      r.type === a.RESIZE && this.iframe && (this.iframe.style.height = `${r.height}px`);
+    this._url = e, this._value = s, this._options = r, this.eventManager = new v(), this.on(a.INVALID, (i) => {
+      i.type === a.INVALID && (this._errors = i.errors, this._value = i.value);
+    }), this.on(a.RESIZE, (i) => {
+      i.type === a.RESIZE && this.iframe && (this.iframe.style.height = `${i.height}px`);
     });
   }
   /**
@@ -63,6 +101,9 @@ class w {
   get value() {
     return this._value;
   }
+  get options() {
+    return this._options;
+  }
   get errors() {
     return this._errors;
   }
@@ -88,11 +129,14 @@ class w {
    */
   embed(e, s = !1) {
     var r, i;
-    this.iframe = document.createElement("iframe"), this.iframe.src = this.url + (s ? "" : "&embedded=true"), 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", (n) => {
+    this.removeEmbed(), this.iframe = document.createElement("iframe"), this.iframe.src = this.url + (s ? "" : "&embedded=true"), 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", (n) => {
       var h, l;
       n.source === ((h = this.iframe) == null ? void 0 : h.contentWindow) && ((l = this.eventManager) == null || l.setPort(n.ports[0]));
     }), (i = (r = this.iframe) == null ? void 0 : r.contentWindow) == null || i.focus();
   }
+  removeEmbed() {
+    this.iframe && this.iframe.remove();
+  }
   /**
    * Sends a message to the embedded component
    * @param message - The message to send
@@ -120,8 +164,8 @@ class w {
    * 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: d.UPDATE, value: e });
+  update(e, s) {
+    this._value = e, s && (this._options = s), this.send({ type: d.UPDATE, value: e, options: this._options });
   }
   /**
    * Waits for the component to complete and returns the transaction response
@@ -166,7 +210,7 @@ function I(t) {
     return `${r}=${i}`;
   }).filter((e) => !!e).join("&");
 }
-class R {
+class b {
   /**
    * Creates a new instance of the Notabene SDK
    *
@@ -213,7 +257,8 @@ class R {
   createComponent(e, s, r, i) {
     return new w(
       this.componentUrl(e, s, r, i),
-      s
+      s,
+      r
     );
   }
   /**
@@ -320,9 +365,10 @@ export {
   u as AgentType,
   a as CMType,
   w as EmbeddedComponent,
-  E as PersonType,
-  p as ProofStatus,
+  d as HMType,
+  f as PersonType,
+  E as ProofStatus,
   g as ProofTypes,
-  f as Status,
-  R as default
+  p as Status,
+  b as default
 };

package/package.json

@@ -9,7 +9,7 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "2.0.0-next.17",
+  "version": "2.0.0-next.19",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",

package/src/components/EmbeddedComponent.ts

@@ -15,13 +15,14 @@ import {
  * @public
  */
 
-export default class EmbeddedComponent<V> {
+export default class EmbeddedComponent<V, O> {
   private _url: string;
   private _value: Partial<V>;
+  private _options?: O;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager<V>;
+  private eventManager: MessageEventManager<V, O>;
   private modal?: HTMLDialogElement;
 
   /**
@@ -30,10 +31,11 @@ export default class EmbeddedComponent<V> {
    * @param value - The initial transaction value
    */
 
-  constructor(url: string, value: Partial<V>) {
+  constructor(url: string, value: Partial<V>, options?: O) {
     this._url = url;
     this._value = value;
-    this.eventManager = new MessageEventManager<V>();
+    this._options = options;
+    this.eventManager = new MessageEventManager<V, O>();
     this.on(CMType.INVALID, (message) => {
       if (message.type === CMType.INVALID) {
         this._errors = message.errors;
@@ -63,6 +65,10 @@ export default class EmbeddedComponent<V> {
     return this._value;
   }
 
+  public get options(): O | undefined {
+    return this._options;
+  }
+
   public get errors(): ValidationError[] {
     return this._errors;
   }
@@ -86,13 +92,14 @@ export default class EmbeddedComponent<V> {
     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, modal: boolean = false) {
     // console.log(this.url);
+    this.removeEmbed();
     this.iframe = document.createElement('iframe');
     this.iframe.src = this.url + (!modal ? '&embedded=true' : '');
     this.iframe.allow = 'web-share';
@@ -115,11 +122,15 @@ export default class EmbeddedComponent<V> {
     this.iframe?.contentWindow?.focus();
   }
 
+  removeEmbed() {
+    if (this.iframe) this.iframe.remove();
+  }
+
   /**
    * Sends a message to the embedded component
    * @param message - The message to send
    */
-  send(message: HostMessage<V>): void {
+  send(message: HostMessage<V, O>): void {
     this.eventManager.send(message);
   }
 
@@ -147,9 +158,10 @@ export default class EmbeddedComponent<V> {
    * Updates the transaction value and sends an update message to the component
    * @param value - The new transaction value
    */
-  update(value: Partial<V>) {
+  update(value: Partial<V>, options?: O) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value: value });
+    if (options) this._options = options;
+    this.send({ type: HMType.UPDATE, value, options: this._options });
   }
 
   /**

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

@@ -1,10 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import {
+  AgentType,
   CMType,
   HMType,
-  HostMessage,
-  Transaction,
-  Withdrawal,
+  type HostMessage,
+  type Transaction,
+  type TransactionOptions,
+  type Withdrawal,
 } from '../../types';
 import EmbeddedComponent from '../EmbeddedComponent';
 
@@ -14,9 +16,9 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent<Withdrawal>;
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
     beforeEach(() => {
-      component = new EmbeddedComponent<Withdrawal>(url, {
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
         amountDecimal: 100,
       });
     });
@@ -68,14 +70,20 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent<Withdrawal>(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       component.mount(parentId);
       expect(iframe?.src).toBe(url + '&embedded=true');
       expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
     });
 
     test('on', () => {
-      const component = new EmbeddedComponent<Withdrawal>(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -86,7 +94,10 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent<Withdrawal>(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -104,7 +115,8 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent<Withdrawal>;
+      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+      let options: TransactionOptions;
 
       beforeEach(() => {
         port = {
@@ -121,7 +133,12 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent<Withdrawal>(url, value);
+        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
+        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+          url,
+          value,
+          options,
+        );
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -129,23 +146,51 @@ describe('EmbeddedComponent', () => {
       });
 
       test('send', () => {
-        const message: HostMessage<Withdrawal> = {
+        const message: HostMessage<Withdrawal, TransactionOptions> = {
           type: HMType.UPDATE,
           value: {
             requestId: 'id',
           },
+          options: { allowedAgentTypes: [AgentType.PRIVATE] },
         };
         component.send(message);
         expect(port.postMessage).toHaveBeenCalledWith(message);
       });
 
-      test('update', () => {
-        const newValue: Partial<Transaction> = { amountDecimal: 200 };
-        component.update(newValue);
+      describe('update', () => {
+        test('with out options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
 
-        expect(component.value).toBe(newValue);
-      });
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options,
+          };
+
+          component.update(newValue);
+
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(options);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
+
+        test('with options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
+          const newOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
 
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options: newOptions,
+          };
+
+          component.update(newValue, newOptions);
+
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(newOptions);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
+      });
       // TODO not sure this actually does what I want it to do
       test('completion', async () => {
         const response = { valid: true, value: 'completed' };

package/src/notabene.ts

@@ -1,18 +1,38 @@
 import EmbeddedComponent from './components/EmbeddedComponent';
 import type {
   Agent,
+  BlockchainAddress,
+  CAIP10,
+  CAIP19,
+  CAIP2,
   CallbackOptions,
+  Cancel,
+  Completed,
   ComponentMessage,
+  ComponentResponse,
   ConnectionRequest,
   Counterparty,
+  CryptoCredential,
   DeclarationProof,
   Deposit,
   DepositRequest,
   Destination,
+  DID,
+  DTI,
+  Error,
+  FieldTypes,
   HostMessage,
+  InvalidValue,
   IVMS101,
+  LegalPerson,
+  LEI,
   MicroTransferProof,
+  NationalIdentification,
+  NaturalPerson,
+  NotabeneAsset,
   OwnershipProof,
+  Ready,
+  ResizeRequest,
   ScreenshotProof,
   SignatureProof,
   Theme,
@@ -20,55 +40,89 @@ import type {
   TransactionAsset,
   TransactionOptions,
   TransactionResponse,
+  TravelAddress,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
   VASP,
+  VASPOptions,
   Wallet,
   Withdrawal,
 } from './types';
 import {
   AgentType,
   CMType,
+  HMType,
   PersonType,
   ProofStatus,
   ProofTypes,
   Status,
 } from './types';
+import { type MessageCallback } from './utils/MessageEventManager';
 import { encodeObjectToFragment } from './utils/urls';
-
 // Must be exported for React Native SDK to use
 export { default as EmbeddedComponent } from './components/EmbeddedComponent';
 export type {
+  Agent,
+  BlockchainAddress,
+  CAIP2,
+  CAIP10,
+  CAIP19,
+  CryptoCredential,
+  TravelAddress,
+  NotabeneAsset,
+  DTI,
+  VASPOptions,
+  NationalIdentification,
+  FieldTypes,
+  DID,
+  MessageCallback,
+  CallbackOptions,
+  Cancel,
+  Completed,
   ComponentMessage,
+  ComponentResponse,
   ConnectionRequest,
-  HostMessage,
-  Theme,
   Counterparty,
-  Withdrawal,
+  DeclarationProof,
   Deposit,
-  Transaction,
   DepositRequest,
-  TransactionResponse,
-  Destination as destination,
-  TransactionAsset,
-  SignatureProof,
-  ScreenshotProof,
-  MicroTransferProof,
-  DeclarationProof,
-  Notabene,
+  Destination,
+  Error,
+  HostMessage,
+  InvalidValue,
   IVMS101,
-  VASP,
-  Wallet,
-  Agent,
+  LegalPerson,
+  LEI,
+  MicroTransferProof,
+  NaturalPerson,
   OwnershipProof,
+  Ready,
+  ResizeRequest,
+  ScreenshotProof,
+  SignatureProof,
+  Theme,
+  Transaction,
+  TransactionAsset,
   TransactionOptions,
-  CallbackOptions,
+  TransactionResponse,
+  UpdateValue,
+  V1Transaction,
+  ValidationError,
+  VASP,
+  Wallet,
+  Withdrawal,
+};
+export {
+  CMType,
+  HMType,
+  ProofStatus,
+  ProofTypes,
+  PersonType,
+  Status,
+  AgentType,
 };
-export { CMType, ProofStatus, ProofTypes, PersonType, Status, AgentType };
 
-/**
- * Configuration for the Notabene SDK
- *
- * @public
- */
 /**
  * Configuration for the Notabene SDK
  *
@@ -139,10 +193,10 @@ export default class Notabene {
    * @returns component URL
    * @internal
    */
-  componentUrl<V>(
+  componentUrl<V, O>(
     path: string,
     value: V,
-    configuration?: TransactionOptions,
+    configuration?: O,
     callbacks?: CallbackOptions,
   ): string {
     const url = new URL(this.uxUrl);
@@ -181,15 +235,16 @@ export default class Notabene {
    * @returns A new EmbeddedComponent instance
    * @internal
    */
-  createComponent<V>(
+  createComponent<V, O>(
     path: string,
     value: Partial<V>,
-    options?: TransactionOptions,
+    options?: O,
     callbacks?: CallbackOptions,
   ) {
-    return new EmbeddedComponent<V>(
+    return new EmbeddedComponent<V, O>(
       this.componentUrl(path, value, options, callbacks),
       value,
+      options,
     );
   }
 
@@ -206,7 +261,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Withdrawal>(
+    return this.createComponent<Withdrawal, TransactionOptions>(
       'withdrawal-assist',
       value,
       options,
@@ -228,7 +283,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Withdrawal>(
+    return this.createComponent<Withdrawal, TransactionOptions>(
       'wallet-assist',
       value,
       options,
@@ -250,7 +305,7 @@ export default class Notabene {
     options?: any,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Deposit>(
+    return this.createComponent<Deposit, any>(
       'deposit-assist',
       value,
       options,
@@ -272,7 +327,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<ConnectionRequest>(
+    return this.createComponent<ConnectionRequest, TransactionOptions>(
       'connect',
       value,
       options,
@@ -294,7 +349,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<DepositRequest>(
+    return this.createComponent<DepositRequest, TransactionOptions>(
       'deposit-request',
       value,
       options,