@notabene/javascript-sdk 2.0.0-next.16 → 2.0.0-next.18

package/dist/notabene.js

@@ -1,7 +1,7 @@
 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 || {}), 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());
@@ -30,23 +30,24 @@ class v {
     this.port && this.port.postMessage(e);
   }
 }
-class I {
+class w {
   /**
    * Creates an instance of EmbeddedComponent.
    * @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 +64,9 @@ class I {
   get value() {
     return this._value;
   }
+  get options() {
+    return this._options;
+  }
   get errors() {
     return this._errors;
   }
@@ -88,11 +92,14 @@ class I {
    */
   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) => {
-      var l, h;
-      n.source === ((l = this.iframe) == null ? void 0 : l.contentWindow) && ((h = this.eventManager) == null || h.setPort(n.ports[0]));
+    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 +127,8 @@ class I {
    * 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
@@ -140,9 +147,7 @@ class I {
    * Opens the component in a modal dialog
    */
   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, () => {
-      this.closeModal();
-    }), this.on(a.CLOSE, () => {
+    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.COMPLETE, () => {
       this.closeModal();
@@ -159,7 +164,7 @@ class I {
     this.modal && ((e = this.modal) == null || e.close(), this.modal.remove(), this.modal = void 0);
   }
 }
-function U(t) {
+function I(t) {
   return Object.entries(t).map(([e, s]) => {
     if (!(e && s)) return;
     const r = encodeURIComponent(e), i = encodeURIComponent(
@@ -168,7 +173,7 @@ function U(t) {
     return `${r}=${i}`;
   }).filter((e) => !!e).join("&");
 }
-class L {
+class b {
   /**
    * Creates a new instance of the Notabene SDK
    *
@@ -195,12 +200,12 @@ class L {
   componentUrl(e, s, r, i) {
     const n = new URL(this.uxUrl);
     n.pathname = e;
-    const l = U({
+    const h = I({
       authToken: this.authToken,
       value: s,
       configuration: r
     });
-    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();
   }
   /**
    * Creates a new embedded component
@@ -213,9 +218,10 @@ class L {
    * @internal
    */
   createComponent(e, s, r, i) {
-    return new I(
+    return new w(
       this.componentUrl(e, s, r, i),
-      s
+      s,
+      r
     );
   }
   /**
@@ -227,7 +233,12 @@ class L {
    * @returns A new EmbeddedComponent instance for withdrawal assistance
    */
   createWithdrawalAssist(e, s, r) {
-    return this.createComponent("withdrawal-assist", e, s, r);
+    return this.createComponent(
+      "withdrawal-assist",
+      e,
+      s,
+      r
+    );
   }
   /**
    * Creates a wallet assist component
@@ -239,7 +250,12 @@ class L {
    * @alpha
    */
   createWalletAssist(e, s, r) {
-    return this.createComponent("wallet-assist", e, s, r);
+    return this.createComponent(
+      "wallet-assist",
+      e,
+      s,
+      r
+    );
   }
   /**
    * Creates a deposit assist component
@@ -285,7 +301,12 @@ class L {
    * @public
    */
   createDepositRequest(e, s, r) {
-    return this.createComponent("deposit-request", e, s, r);
+    return this.createComponent(
+      "deposit-request",
+      e,
+      s,
+      r
+    );
   }
   /**
    * Decodes a URL fragment into an object
@@ -296,8 +317,8 @@ class L {
   decodeFragmentToObject(e) {
     return e.slice(1).split("&").reduce(
       (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;
       },
       {}
     );
@@ -306,9 +327,10 @@ class L {
 export {
   u as AgentType,
   a as CMType,
-  E as PersonType,
-  p as ProofStatus,
+  w as EmbeddedComponent,
+  f as PersonType,
+  E as ProofStatus,
   g as ProofTypes,
-  f as Status,
-  L as default
+  p as Status,
+  b as default
 };

package/dist/tsdoc-metadata.json

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

package/package.json

@@ -9,7 +9,7 @@
   },
   "author": "Notabene <developers@notabene.id>",
   "license": "MIT",
-  "version": "2.0.0-next.16",
+  "version": "2.0.0-next.18",
   "source": "src/notabene.ts",
   "main": "dist/notabene.js",
   "types": "dist/notabene.d.ts",
@@ -30,6 +30,7 @@
     "build:clean": "rimraf dist/ ts-out",
     "build": "yarn lint && vite build && tsc && api-extractor run && yarn docs ",
     "lint": "eslint .",
+    "format": "prettier --write .",
     "test": "vitest",
     "release": "semantic-release",
     "publish": "yarn build && npm publish --tag next"
@@ -37,32 +38,32 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@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"
   },
   "lint-staged": {
     "*.ts": [

package/src/components/EmbeddedComponent.ts

@@ -1,8 +1,8 @@
 import {
   CMType,
-  ComponentRequest,
   HMType,
   HostMessage,
+  TransactionResponse,
   ValidationError,
 } from '../types';
 import {
@@ -15,13 +15,14 @@ import {
  * @public
  */
 
-export default class EmbeddedComponent<V, R> {
+export default class EmbeddedComponent<V, O> {
   private _url: string;
-  private _value: V;
+  private _value: Partial<V>;
+  private _options?: O;
   private _errors: ValidationError[] = [];
 
   private iframe?: HTMLIFrameElement;
-  private eventManager: MessageEventManager;
+  private eventManager: MessageEventManager<V, O>;
   private modal?: HTMLDialogElement;
 
   /**
@@ -30,10 +31,11 @@ export default class EmbeddedComponent<V, R> {
    * @param value - The initial transaction value
    */
 
-  constructor(url: string, value: V) {
+  constructor(url: string, value: Partial<V>, options?: O) {
     this._url = url;
     this._value = value;
-    this.eventManager = new MessageEventManager();
+    this._options = options;
+    this.eventManager = new MessageEventManager<V, O>();
     this.on(CMType.INVALID, (message) => {
       if (message.type === CMType.INVALID) {
         this._errors = message.errors;
@@ -59,10 +61,14 @@ export default class EmbeddedComponent<V, R> {
    * @returns The current transaction value
    */
 
-  public get value(): V {
+  public get value(): Partial<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, R> {
     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, R> {
     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): void {
+  send(message: HostMessage<V, O>): void {
     this.eventManager.send(message);
   }
 
@@ -129,7 +140,7 @@ export default class EmbeddedComponent<V, R> {
    * @param callback - The callback function to execute when the message is received
    */
 
-  on(messageType: string, callback: MessageCallback): void {
+  on(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.on(messageType, callback);
   }
 
@@ -139,7 +150,7 @@ export default class EmbeddedComponent<V, R> {
    * @param callback - The callback function to remove
    */
 
-  off(messageType: string, callback: MessageCallback): void {
+  off(messageType: string, callback: MessageCallback<V>): void {
     this.eventManager.off(messageType, callback);
   }
 
@@ -147,9 +158,10 @@ export default class EmbeddedComponent<V, R> {
    * Updates the transaction value and sends an update message to the component
    * @param value - The new transaction value
    */
-  update(value: V) {
+  update(value: Partial<V>, options?: O) {
     this._value = value;
-    this.send({ type: HMType.UPDATE, value: value as ComponentRequest });
+    if (options) this._options = options;
+    this.send({ type: HMType.UPDATE, value, options: this._options });
   }
 
   /**
@@ -157,7 +169,7 @@ export default class EmbeddedComponent<V, R> {
    * @returns A promise that resolves with the transaction response
    */
 
-  completion(): Promise<R> {
+  completion(): Promise<TransactionResponse<V>> {
     return new Promise((resolve, reject) => {
       this.on(CMType.COMPLETE, (message) => {
         resolve((message as any).response);
@@ -172,26 +184,24 @@ export default class EmbeddedComponent<V, R> {
    * Opens the component in a modal dialog
    */
 
-  openModal(): Promise<R> {
+  openModal(): Promise<TransactionResponse<V>> {
     if (this.modal) {
       this.closeModal();
     }
     this.modal = document.createElement('dialog');
     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';
 
     document.body.appendChild(this.modal);
     this.embed(this.modal, true);
     this.on(CMType.CANCEL, () => {
       this.closeModal();
     });
-    this.on(CMType.CLOSE, () => {
-      this.closeModal();
-    });
+
     this.on(CMType.COMPLETE, () => {
       this.closeModal();
     });

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

@@ -1,11 +1,12 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import {
+  AgentType,
   CMType,
   HMType,
-  HostMessage,
-  Transaction,
-  TransactionResponse,
-  Withdrawal,
+  type HostMessage,
+  type Transaction,
+  type TransactionOptions,
+  type Withdrawal,
 } from '../../types';
 import EmbeddedComponent from '../EmbeddedComponent';
 
@@ -15,15 +16,11 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent<
-      Partial<Withdrawal>,
-      TransactionResponse<Withdrawal>
-    >;
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
     beforeEach(() => {
-      component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
+        amountDecimal: 100,
+      });
     });
 
     test('sets value', () => {
@@ -73,20 +70,20 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<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<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -97,10 +94,10 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -118,10 +115,8 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent<
-        Partial<Withdrawal>,
-        TransactionResponse<Withdrawal>
-      >;
+      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+      let options: TransactionOptions;
 
       beforeEach(() => {
         port = {
@@ -138,10 +133,12 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent<
-          Partial<Withdrawal>,
-          TransactionResponse<Withdrawal>
-        >(url, value);
+        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
+        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+          url,
+          value,
+          options,
+        );
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -149,23 +146,51 @@ describe('EmbeddedComponent', () => {
       });
 
       test('send', () => {
-        const message: HostMessage = {
+        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' };
@@ -175,7 +200,7 @@ describe('EmbeddedComponent', () => {
         // @ts-expect-error - we've already verified that port exists
         port.onmessage({
           data: { type: CMType.COMPLETE, response },
-        } as MessageEvent);
+        });
 
         promise.then((result) => {
           expect(result).toBe(response);