@notabene/javascript-sdk - npm Package Compare versions

Comparing version 2.0.0-next.16 to 2.0.0-next.17

dist/notabene.d.ts

@@ -144,3 +144,3 @@ /**
  * Represents a cancel component message
- * @public
+ * @internal
  */
@@ -161,5 +161,3 @@ declare type Cancel = {
     INVALID = "invalid",
-    MODAL = "openModal",
     ERROR = "error",
-    CLOSE = "closeModal",
     CANCEL = "cancel"
@@ -170,7 +168,9 @@ }
  * Represents a completed component message
+ * @typeParam T - The overall Value type being returned
+ * @param response - The Response object which wraps T
  * @public
  */
-declare type Completed = {
+declare type Completed<T> = {
     type: CMType.COMPLETE;
-    response: ComponentResponse;
+    response: TransactionResponse<T>;
 };
@@ -182,3 +182,3 @@
  */
-export declare type ComponentMessage = Completed | Cancel | Error_2 | Ready | ResizeRequest | InvalidValue;
+export declare type ComponentMessage<T> = Completed<T> | Cancel | Error_2 | Ready | ResizeRequest | InvalidValue<T>;
 
@@ -210,13 +210,2 @@ /**
 /**
- * An object representing a connection response
- * @public
- */
-export declare interface ConnectionResponse extends ComponentResponse {
-    value: ConnectionRequest;
-    ivms: IVMS101;
-    proof?: OwnershipProof;
-    txCreate?: V1Transaction;
-}
-
-/**
  * The counterparty of a transaction.
@@ -312,3 +301,3 @@ * @public
  */
-export declare class EmbeddedComponent<V, R> {
+export declare class EmbeddedComponent<V> {
     private _url;
@@ -325,3 +314,3 @@ private _value;
      */
-    constructor(url: string, value: V);
+    constructor(url: string, value: Partial<V>);
     /**
@@ -336,3 +325,3 @@ * Gets the URL of the embedded component
      */
-    get value(): V;
+    get value(): Partial<V>;
     get errors(): ValidationError[];
@@ -358,3 +347,3 @@ /**
      */
-    send(message: HostMessage): void;
+    send(message: HostMessage<V>): void;
     /**
@@ -365,3 +354,3 @@ * Adds an event listener for a specific message type
      */
-    on(messageType: string, callback: MessageCallback): void;
+    on(messageType: string, callback: MessageCallback<V>): void;
     /**
@@ -372,3 +361,3 @@ * Removes an event listener for a specific message type
      */
-    off(messageType: string, callback: MessageCallback): void;
+    off(messageType: string, callback: MessageCallback<V>): void;
     /**
@@ -378,3 +367,3 @@ * Updates the transaction value and sends an update message to the component
      */
-    update(value: V): void;
+    update(value: Partial<V>): void;
     /**
@@ -384,7 +373,7 @@ * Waits for the component to complete and returns the transaction response
      */
-    completion(): Promise<R>;
+    completion(): Promise<TransactionResponse<V>>;
     /**
      * Opens the component in a modal dialog
      */
-    openModal(): Promise<R>;
+    openModal(): Promise<TransactionResponse<V>>;
     /**
@@ -399,2 +388,3 @@ * Closes the modal dialog
  * Represents an error component message
+ * @param message - Error message
  * @public
@@ -434,3 +424,3 @@ */
  */
-export declare type HostMessage = UpdateValue;
+export declare type HostMessage<T> = UpdateValue<T>;
 
@@ -451,7 +441,10 @@ /**
  * Represents an invalid value component message
- * @public
+ * @typeParam T - The overall Value type being returned
+ * @param value - The current Partial value
+ * @param errors - Array of validation errors
+ * @internal
  */
-declare type InvalidValue = {
+declare type InvalidValue<T> = {
     type: CMType.INVALID;
-    value: any;
+    value: Partial<T>;
     errors: ValidationError[];
@@ -592,3 +585,3 @@ };
 
-declare type MessageCallback = (message: ComponentMessage) => void;
+declare type MessageCallback<T> = (message: ComponentMessage<T>) => void;
 
@@ -741,3 +734,3 @@ /**
      */
-    createComponent<V, R>(path: string, value: V, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<V, R>;
+    createComponent<V>(path: string, value: Partial<V>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<V>;
     /**
@@ -751,3 +744,3 @@ * Creates a withdrawal assist component
      */
-    createWithdrawalAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Partial<Withdrawal>, TransactionResponse<Withdrawal>>;
+    createWithdrawalAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal>;
     /**
@@ -762,3 +755,3 @@ * Creates a wallet assist component
      */
-    createWalletAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Partial<Withdrawal>, TransactionResponse<Withdrawal>>;
+    createWalletAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal>;
     /**
@@ -773,3 +766,3 @@ * Creates a deposit assist component
      */
-    createDepositAssist(value: Partial<Deposit>, options?: any, callbacks?: CallbackOptions): EmbeddedComponent<Partial<Deposit>, TransactionResponse<Deposit>>;
+    createDepositAssist(value: Partial<Deposit>, options?: any, callbacks?: CallbackOptions): EmbeddedComponent<Deposit>;
     /**
@@ -784,3 +777,3 @@ * Creates a connect component
      */
-    createConnectWallet(value: ConnectionRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<ConnectionRequest, ConnectionResponse>;
+    createConnectWallet(value: ConnectionRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<ConnectionRequest>;
     /**
@@ -795,3 +788,3 @@ * Creates a deposit request component
      */
-    createDepositRequest(value: DepositRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<DepositRequest, TransactionResponse<DepositRequest>>;
+    createDepositRequest(value: DepositRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<DepositRequest>;
     /**
@@ -949,2 +942,3 @@ * Decodes a URL fragment into an object
     PersonalSignEIP191 = "eip-191",
+    SIWE = "siwe",
     PersonalSignEIP712 = "eip-712",
@@ -968,4 +962,4 @@ PersonalSignBIP137 = "bip-137",
 /**
- * Represents a resize request component message
- * @public
+ * Represents a resize request component message. This is handled by the library.
+ * @internal
  */
@@ -991,3 +985,3 @@ declare type ResizeRequest = {
 export declare interface SignatureProof extends OwnershipProof {
-    type: ProofTypes.PersonalSignEIP191 | ProofTypes.PersonalSignEIP712 | ProofTypes.PersonalSignBIP137 | ProofTypes.PersonalSignXPUB;
+    type: ProofTypes.PersonalSignEIP191 | ProofTypes.PersonalSignEIP712 | ProofTypes.PersonalSignBIP137 | ProofTypes.SIWE | ProofTypes.PersonalSignXPUB;
     proof: string;
@@ -1103,8 +1097,8 @@ attestation: string;
 /**
- * Represents an update value host message
+ * Represents an update value host message. This is sent from Host to component.
  * @public
  */
-declare type UpdateValue = {
+declare type UpdateValue<T> = {
     type: HMType.UPDATE;
-    value: ComponentRequest;
+    value: Partial<T>;
 };
@@ -1111,0 +1105,0 @@

dist/notabene.js

 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.MODAL = "openModal", t.ERROR = "error", t.CLOSE = "closeModal", 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.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 || {}), 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 || {});
 class v {
@@ -33,3 +33,3 @@ constructor() {
 }
-class I {
+class w {
   /**
@@ -93,4 +93,4 @@ * Creates an instance of EmbeddedComponent.
     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 l, h;
-      n.source === ((l = this.iframe) == null ? void 0 : l.contentWindow) && ((h = this.eventManager) == null || h.setPort(n.ports[0]));
+      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();
@@ -145,6 +145,4 @@ }
   openModal() {
-    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, !0), this.on(a.CANCEL, () => {
+    return this.modal && this.closeModal(), this.modal = document.createElement("dialog"), this.modal.style.border = "none", this.modal.style.backgroundColor = "white", this.modal.style.maxWidth = "100vw", this.modal.style.maxHeight = "100vh", this.modal.style.width = "600px", this.modal.style.height = "600px", document.body.appendChild(this.modal), this.embed(this.modal, !0), this.on(a.CANCEL, () => {
       this.closeModal();
-    }), this.on(a.CLOSE, () => {
-      this.closeModal();
     }), this.on(a.COMPLETE, () => {
@@ -165,3 +163,3 @@ this.closeModal();
 }
-function U(t) {
+function I(t) {
   return Object.entries(t).map(([e, s]) => {
@@ -175,3 +173,3 @@ if (!(e && s)) return;
 }
-class L {
+class R {
   /**
@@ -203,3 +201,3 @@ * Creates a new instance of the Notabene SDK
     n.pathname = e;
-    const l = U({
+    const h = I({
       authToken: this.authToken,
@@ -209,3 +207,3 @@ value: s,
     });
-    return n.hash = l, this.nodeUrl && n.searchParams.set("nodeUrl", this.nodeUrl), this.theme && n.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && n.searchParams.set("locale", this.locale), i && (i.callback && n.searchParams.set("callback_url", i.callback), i.redirectUri && n.searchParams.set("redirect_uri", i.redirectUri)), n.toString();
+    return n.hash = h, this.nodeUrl && n.searchParams.set("nodeUrl", this.nodeUrl), this.theme && n.searchParams.set("theme", JSON.stringify(this.theme)), this.locale && n.searchParams.set("locale", this.locale), i && (i.callback && n.searchParams.set("callback_url", i.callback), i.redirectUri && n.searchParams.set("redirect_uri", i.redirectUri)), n.toString();
   }
@@ -223,3 +221,3 @@ /**
   createComponent(e, s, r, i) {
-    return new I(
+    return new w(
       this.componentUrl(e, s, r, i),
@@ -238,3 +236,8 @@ s
   createWithdrawalAssist(e, s, r) {
-    return this.createComponent("withdrawal-assist", e, s, r);
+    return this.createComponent(
+      "withdrawal-assist",
+      e,
+      s,
+      r
+    );
   }
@@ -251,3 +254,8 @@ /**
   createWalletAssist(e, s, r) {
-    return this.createComponent("wallet-assist", e, s, r);
+    return this.createComponent(
+      "wallet-assist",
+      e,
+      s,
+      r
+    );
   }
@@ -298,3 +306,8 @@ /**
   createDepositRequest(e, s, r) {
-    return this.createComponent("deposit-request", e, s, r);
+    return this.createComponent(
+      "deposit-request",
+      e,
+      s,
+      r
+    );
   }
@@ -310,4 +323,4 @@ /**
       (r, i) => {
-        const [n, l] = i.split("=");
-        return r[decodeURIComponent(n)] = decodeURIComponent(l), r;
+        const [n, h] = i.split("=");
+        return r[decodeURIComponent(n)] = decodeURIComponent(h), r;
       },
@@ -321,2 +334,3 @@ {}
   a as CMType,
+  w as EmbeddedComponent,
   E as PersonType,
@@ -326,3 +340,3 @@ p as ProofStatus,
   f as Status,
-  L as default
+  R as default
 };

dist/tsdoc-metadata.json

@@ -8,5 +8,5 @@ // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.47.9"
+      "packageVersion": "7.47.11"
     }
   ]
 }

package.json

@@ -12,3 +12,3 @@ {
   "license": "MIT",
-  "version": "2.0.0-next.16",
+  "version": "2.0.0-next.17",
   "source": "src/notabene.ts",
@@ -34,2 +34,3 @@ "main": "dist/notabene.js",
     "lint": "eslint .",
+    "format": "prettier --write .",
     "test": "vitest",
@@ -42,28 +43,28 @@ "release": "semantic-release",
     "@commitlint/config-conventional": "^19.5.0",
-    "@eslint/js": "^9.10.0",
+    "@eslint/js": "^9.13.0",
     "@fast-check/vitest": "^0.1.3",
-    "@microsoft/api-extractor": "^7.47.9",
+    "@microsoft/api-extractor": "^7.47.11",
     "@semantic-release/git": "^10.0.1",
-    "@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",
+    "@semantic-release/gitlab": "^13.2.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "fast-check": "^3.22.0",
-    "globals": "^15.9.0",
-    "husky": "^7.0.4",
-    "jsdom": "^25.0.0",
-    "lint-staged": "^12.5.0",
-    "organize-imports-cli": "^0.9.0",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.2.10",
+    "organize-imports-cli": "^0.10.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "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"
+    "semantic-release": "^24.1.3",
+    "typedoc": "^0.26.10",
+    "typedoc-plugin-markdown": "^4.2.9",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3"
   },
@@ -70,0 +71,0 @@ "lint-staged": {

README.md

@@ -86,3 +86,3 @@ <div align="center">
   authToken: '{CUSTOMER_TOKEN}',
-  locale: 'de' // default locale = `en`
+  locale: 'de', // default locale = `en`
 });
@@ -111,3 +111,3 @@ ```
 const withdrawal = notabene.createWithdrawalAssist(tx, options);
-withdrawal.mount("nb-withdrawal");
+withdrawal.mount('nb-withdrawal');
 ```
@@ -119,8 +119,9 @@
 try {
- const { valid, value, txCreate, ivms101, proof } = await withdrawal.completion()
- if (valid) {
-  // Submit result to your backend
- }
+  const { valid, value, txCreate, ivms101, proof } =
+    await withdrawal.completion();
+  if (valid) {
+    // Submit result to your backend
+  }
 } catch (e) {
- console.error(e)
+  console.error(e);
 }
@@ -137,3 +138,3 @@ ```
   destination: '0x8d12a197cb00d4747a1fe03395095ce2a5cc6819',
-  amountDecimal: 1.12
+  amountDecimal: 1.12,
 });
@@ -225,3 +226,2 @@ ```
 
-
 ### Modal
@@ -232,3 +232,3 @@
 ```js
-const connect = notabene.createConnectWallet({asset:'ETH'}, options);
+const connect = notabene.createConnectWallet({ asset: 'ETH' }, options);
 const { valid, value, txCreate, ivms101, proof } = await connect.openModal();
@@ -278,6 +278,6 @@ ```
 import Notabene, {
-		AgentType,
-		PersonType,
-		ProofTypes,
-	} from '@notabene/javascript-sdk';
+  AgentType,
+  PersonType,
+  ProofTypes,
+} from '@notabene/javascript-sdk';
 
@@ -323,4 +323,4 @@ const options: TransactionOptions = {
       addUnknown: true, // Allow users to add a missing VASP - Defaults to false
-      onlyActive: true // Only list active VASPs - Default false
-    }
+      onlyActive: true, // Only list active VASPs - Default false
+    },
   },
@@ -363,3 +363,2 @@ };
 
-
 #### Supporting Micro Transactions (aka Satoshi tests)
@@ -380,4 +379,4 @@
     fallbacks: [ProofTypes.Screenshot, ProofTypes.SelfDeclaration], // js ['screenshot','self_declaration']
-  }
-}
+  },
+};
 ```
@@ -409,5 +408,6 @@
     fallbacks: [ProofTypes.Screenshot, ProofTypes.SelfDeclaration], // js ['screenshot','self_declaration']
-  }
-}
+  },
+};
 ```
+
 The two options are:
@@ -432,2 +432,3 @@
 Eg:
+
 ```ts
@@ -442,2 +443,3 @@ {
 ```
+
 The above will always ask the user for the following for natural persons:
@@ -449,3 +451,2 @@
 
-
 #### Full Example
@@ -464,3 +465,3 @@
       dateOfBirth: {
-        transmit: true
+        transmit: true,
       },
@@ -487,3 +488,3 @@ placeOfBirth: false,
 | Field name               | Natural | Legal | IVMS101 | Transmitted | description                                   |
-|--------------------------|---------|-------|---------|-------------|-----------------------------------------------|
+| ------------------------ | ------- | ----- | ------- | ----------- | --------------------------------------------- |
 | `name`                   | ✅      | ✅    | ✅      | ✅          | Full name                                     |
@@ -490,0 +491,0 @@ | `email`                  | 🟩      | 🟩    | --      | --          | Email (for your internal purposes)            |

src/components/__tests__/EmbeddedComponent.test.ts

@@ -7,3 +7,2 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
   Transaction,
-  TransactionResponse,
   Withdrawal,
@@ -19,11 +18,7 @@ } from '../../types';
   describe('creation', () => {
-    let component: EmbeddedComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >;
+    let component: EmbeddedComponent<Withdrawal>;
     beforeEach(() => {
-      component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<Withdrawal>(url, {
+        amountDecimal: 100,
+      });
     });
@@ -78,6 +73,3 @@
     test('mount', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       component.mount(parentId);
@@ -89,6 +81,3 @@ expect(iframe?.src).toBe(url + '&embedded=true');
     test('on', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       const messageType = 'customEvent';
@@ -104,6 +93,3 @@ const callback = vi.fn();
     test('off', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal>(url, value);
       const messageType = 'customEvent';
@@ -126,6 +112,3 @@ const callback = vi.fn();
       let handshake: MessageEvent;
-      let component: EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >;
+      let component: EmbeddedComponent<Withdrawal>;
 
@@ -147,6 +130,3 @@ beforeEach(() => {
           });
-        component = new EmbeddedComponent<
-          Partial<Withdrawal>,
-          TransactionResponse<Withdrawal>
-        >(url, value);
+        component = new EmbeddedComponent<Withdrawal>(url, value);
         component.mount(parentId);
@@ -159,3 +139,3 @@
       test('send', () => {
-        const message: HostMessage = {
+        const message: HostMessage<Withdrawal> = {
           type: HMType.UPDATE,
@@ -186,3 +166,3 @@ value: {
           data: { type: CMType.COMPLETE, response },
-        } as MessageEvent);
+        });
 
@@ -189,0 +169,0 @@ promise.then((result) => {

src/components/EmbeddedComponent.ts

 import {
   CMType,
-  ComponentRequest,
   HMType,
   HostMessage,
+  TransactionResponse,
   ValidationError,
@@ -18,9 +18,9 @@ } from '../types';
 
-export default class EmbeddedComponent<V, R> {
+export default class EmbeddedComponent<V> {
   private _url: string;
-  private _value: V;
+  private _value: Partial<V>;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager;
+  private eventManager: MessageEventManager<V>;
   private modal?: HTMLDialogElement;
@@ -34,6 +34,6 @@
 
-  constructor(url: string, value: V) {
+  constructor(url: string, value: Partial<V>) {
     this._url = url;
     this._value = value;
-    this.eventManager = new MessageEventManager();
+    this.eventManager = new MessageEventManager<V>();
     this.on(CMType.INVALID, (message) => {
@@ -64,3 +64,3 @@ if (message.type === CMType.INVALID) {
 
-  public get value(): V {
+  public get value(): Partial<V> {
     return this._value;
@@ -125,3 +125,3 @@ }
    */
-  send(message: HostMessage): void {
+  send(message: HostMessage<V>): void {
     this.eventManager.send(message);
@@ -136,3 +136,3 @@ }
 
-  on(messageType: string, callback: MessageCallback): void {
+  on(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.on(messageType, callback);
@@ -147,3 +147,3 @@ }
 
-  off(messageType: string, callback: MessageCallback): void {
+  off(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.off(messageType, callback);
@@ -156,5 +156,5 @@ }
    */
-  update(value: V) {
+  update(value: Partial<V>) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value: value as ComponentRequest });
+    this.send({ type: HMType.UPDATE, value: value });
   }
@@ -167,3 +167,3 @@
 
-  completion(): Promise<R> {
+  completion(): Promise<TransactionResponse<V>> {
     return new Promise((resolve, reject) => {
@@ -183,3 +183,3 @@ this.on(CMType.COMPLETE, (message) => {
 
-  openModal(): Promise<R> {
+  openModal(): Promise<TransactionResponse<V>> {
     if (this.modal) {
@@ -190,7 +190,7 @@ this.closeModal();
     this.modal.style.border = 'none';
-    this.modal.style.backgroundColor = 'transparent';
+    this.modal.style.backgroundColor = 'white';
     this.modal.style.maxWidth = '100vw';
     this.modal.style.maxHeight = '100vh';
     this.modal.style.width = '600px';
-    this.modal.style.height = '800px';
+    this.modal.style.height = '600px';
 
@@ -202,5 +202,3 @@ document.body.appendChild(this.modal);
     });
-    this.on(CMType.CLOSE, () => {
-      this.closeModal();
-    });
+
     this.on(CMType.COMPLETE, () => {
@@ -207,0 +205,0 @@ this.closeModal();

src/notabene.ts

@@ -7,3 +7,2 @@ import EmbeddedComponent from './components/EmbeddedComponent';
   ConnectionRequest,
-  ConnectionResponse,
   Counterparty,
@@ -39,7 +38,7 @@ DeclarationProof,
 
+// Must be exported for React Native SDK to use
+export { default as EmbeddedComponent } from './components/EmbeddedComponent';
 export type {
   ComponentMessage,
-  EmbeddedComponent,
   ConnectionRequest,
-  ConnectionResponse,
   HostMessage,
@@ -187,9 +186,9 @@ Theme,
    */
-  createComponent<V, R>(
+  createComponent<V>(
     path: string,
-    value: V,
+    value: Partial<V>,
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return new EmbeddedComponent<V, R>(
+    return new EmbeddedComponent<V>(
       this.componentUrl(path, value, options, callbacks),
@@ -213,6 +212,8 @@ value,
   ) {
-    return this.createComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >('withdrawal-assist', value, options, callbacks);
+    return this.createComponent<Withdrawal>(
+      'withdrawal-assist',
+      value,
+      options,
+      callbacks,
+    );
   }
@@ -234,6 +235,8 @@
   ) {
-    return this.createComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >('wallet-assist', value, options, callbacks);
+    return this.createComponent<Withdrawal>(
+      'wallet-assist',
+      value,
+      options,
+      callbacks,
+    );
   }
@@ -255,3 +258,3 @@
   ) {
-    return this.createComponent<Partial<Deposit>, TransactionResponse<Deposit>>(
+    return this.createComponent<Deposit>(
       'deposit-assist',
@@ -278,3 +281,3 @@ value,
   ) {
-    return this.createComponent<ConnectionRequest, ConnectionResponse>(
+    return this.createComponent<ConnectionRequest>(
       'connect',
@@ -301,6 +304,8 @@ value,
   ) {
-    return this.createComponent<
-      DepositRequest,
-      TransactionResponse<DepositRequest>
-    >('deposit-request', value, options, callbacks);
+    return this.createComponent<DepositRequest>(
+      'deposit-request',
+      value,
+      options,
+      callbacks,
+    );
   }
@@ -307,0 +312,0 @@

src/types.ts

@@ -359,13 +359,2 @@ import {
 /**
- * An object representing a connection response
- * @public
- */
-export interface ConnectionResponse extends ComponentResponse {
-  value: ConnectionRequest;
-  ivms: IVMS101;
-  proof?: OwnershipProof;
-  txCreate?: V1Transaction;
-}
-
-/**
  * The verification status of a transaction
@@ -473,5 +462,3 @@ * @public
   INVALID = 'invalid',
-  MODAL = 'openModal',
   ERROR = 'error',
-  CLOSE = 'closeModal',
   CANCEL = 'cancel',
@@ -482,7 +469,9 @@ }
  * Represents a completed component message
+ * @typeParam T - The overall Value type being returned
+ * @param response - The Response object which wraps T
  * @public
  */
-export type Completed = {
+export type Completed<T> = {
   type: CMType.COMPLETE;
-  response: ComponentResponse;
+  response: TransactionResponse<T>;
 };
@@ -499,4 +488,4 @@
 /**
- * Represents a resize request component message
- * @public
+ * Represents a resize request component message. This is handled by the library.
+ * @internal
  */
@@ -510,2 +499,3 @@ export type ResizeRequest = {
  * Represents an error component message
+ * @param message - Error message
  * @public
@@ -520,3 +510,3 @@ */
  * Represents a cancel component message
- * @public
+ * @internal
  */
@@ -529,7 +519,10 @@ export type Cancel = {
  * Represents an invalid value component message
- * @public
+ * @typeParam T - The overall Value type being returned
+ * @param value - The current Partial value
+ * @param errors - Array of validation errors
+ * @internal
  */
-export type InvalidValue = {
+export type InvalidValue<T> = {
   type: CMType.INVALID;
-  value: any;
+  value: Partial<T>;
   errors: ValidationError[];
@@ -542,4 +535,4 @@ };
  */
-export type ComponentMessage =
-  | Completed
+export type ComponentMessage<T> =
+  | Completed<T>
   | Cancel
@@ -549,3 +542,3 @@ | Error
   | ResizeRequest
-  | InvalidValue;
+  | InvalidValue<T>;
 
@@ -563,8 +556,8 @@ /**
 /**
- * Represents an update value host message
+ * Represents an update value host message. This is sent from Host to component.
  * @public
  */
-export type UpdateValue = {
+export type UpdateValue<T> = {
   type: HMType.UPDATE;
-  value: ComponentRequest;
+  value: Partial<T>;
 };
@@ -576,3 +569,3 @@
  */
-export type HostMessage = UpdateValue;
+export type HostMessage<T> = UpdateValue<T>;
 
@@ -606,2 +599,3 @@ /**
   PersonalSignEIP191 = 'eip-191',
+  SIWE = 'siwe',
   PersonalSignEIP712 = 'eip-712',
@@ -634,2 +628,3 @@ PersonalSignBIP137 = 'bip-137',
     | ProofTypes.PersonalSignBIP137
+    | ProofTypes.SIWE
     | ProofTypes.PersonalSignXPUB;
@@ -636,0 +631,0 @@ proof: string;

src/utils/__tests__/MessageEventManager.test.ts

 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { HMType, UpdateValue } from '../../types';
+import { HMType, UpdateValue, Withdrawal } from '../../types';
 import { MessageEventManager } from '../MessageEventManager';
 
 describe('MessageEventManager', () => {
-  let messageEventManager: MessageEventManager;
+  let messageEventManager: MessageEventManager<Withdrawal>;
   let mockPort: MessagePort;
@@ -76,3 +76,3 @@
     it('should send messages through the port', () => {
-      const message: UpdateValue = {
+      const message: UpdateValue<Withdrawal> = {
         type: HMType.UPDATE,
@@ -79,0 +79,0 @@ value: { requestId: 'id' },

src/utils/MessageEventManager.ts

 import { ComponentMessage, HostMessage } from '../types';
 
-export type MessageCallback = (message: ComponentMessage) => void;
+export type MessageCallback<T> = (message: ComponentMessage<T>) => void;
 
-export class MessageEventManager {
-  private listeners: Map<string, Set<MessageCallback>> = new Map();
+export class MessageEventManager<T> {
+  private listeners: Map<string, Set<MessageCallback<T>>> = new Map();
   private port?: MessagePort;
@@ -19,3 +19,3 @@
 
-  on(messageType: string, callback: MessageCallback): void {
+  on(messageType: string, callback: MessageCallback<T>): void {
     if (!this.listeners.has(messageType)) {
@@ -27,3 +27,3 @@ this.listeners.set(messageType, new Set());
 
-  off(messageType: string, callback: MessageCallback): void {
+  off(messageType: string, callback: MessageCallback<T>): void {
     const callbacks = this.listeners.get(messageType);
@@ -38,3 +38,3 @@ if (callbacks) {
 
-  private handleMessage(event: MessageEvent): void {
+  private handleMessage(event: MessageEvent<ComponentMessage<T>>): void {
     // console.log('received message', event.data);
@@ -52,3 +52,3 @@ const message = event.data;
   // Method to send messages through the port
-  send(message: HostMessage): void {
+  send(message: HostMessage<T>): void {
     if (this.port) {
@@ -55,0 +55,0 @@ this.port.postMessage(message);

No alert changes

Improved metrics

Number of lines in readme file

493

increased by0.2%

Worsened metrics

Total package byte prevSize

233197

decreased by-0.1%

Lines of code

3374

decreased by-0.41%

No dependency changes