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

package/README.md

@@ -320,6 +320,25 @@ const options: TransactionOptions = {
 const withdrawal = notabene.createWithdrawalAssist(tx, options);
 ```
 
+The options can additionally be updated dynamically with the `update()` function.
+
+```js
+withdrawal.update({
+  asset: 'ETH',
+  destination: '0x8d12a197cb00d4747a1fe03395095ce2a5cc6819',
+  amountDecimal: 1.12,
+}, {
+  proofs: {
+    microTransfer: {
+      destination: '0x...',
+      amountSubunits: '12344',
+      timeout: 86440,
+    }
+  }
+});
+```
+
+
 ### Common use cases
 
 #### Only allow first party transactions

package/dist/notabene.cjs

@@ -1 +1 @@
-"use strict";var g=Object.defineProperty;var v=(t,e,s)=>e in t?g(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var o=(t,e,s)=>v(t,typeof e!="symbol"?e+"":e,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var d=(t=>(t.PRIVATE="WALLET",t.VASP="VASP",t))(d||{}),c=(t=>(t.NATURAL="natural",t.LEGAL="legal",t.SELF="self",t))(c||{}),m=(t=>(t.EMPTY="empty",t.VERIFY="verify",t.PENDING="pending",t.VERIFIED="verified",t.BANNED="banned",t))(m||{}),a=(t=>(t.COMPLETE="complete",t.RESIZE="resize",t.RESULT="result",t.READY="ready",t.INVALID="invalid",t.ERROR="error",t.CANCEL="cancel",t))(a||{}),u=(t=>(t.UPDATE="update",t.REQUEST_RESPONSE="requestResponse",t))(u||{}),p=(t=>(t.PENDING="pending",t.FAILED="rejected",t.FLAGGED="flagged",t.VERIFIED="verified",t))(p||{}),f=(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))(f||{});class w{constructor(){o(this,"listeners",new Map);o(this,"port");this.handleMessage=this.handleMessage.bind(this)}setPort(e){this.port=e,this.port.onmessage=this.handleMessage,this.port.start()}on(e,s){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(s)}off(e,s){const r=this.listeners.get(e);r&&(r.delete(s),r.size===0&&this.listeners.delete(e))}handleMessage(e){const s=e.data;if(typeof s=="object"&&s!==null&&"type"in s){const r=s.type,i=this.listeners.get(r);i&&i.forEach(n=>n(s))}}send(e){this.port&&this.port.postMessage(e)}}class E{constructor(e,s){o(this,"_url");o(this,"_value");o(this,"_errors",[]);o(this,"iframe");o(this,"eventManager");o(this,"modal");this._url=e,this._value=s,this.eventManager=new w,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`)})}get url(){return this._url}get value(){return this._value}get errors(){return this._errors}open(){document.location.href=this.url}mount(e){const s=document.querySelector(e);if(!s)throw new Error(`parentID ${e} not found`);this.embed(s)}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]))}),(i=(r=this.iframe)==null?void 0:r.contentWindow)==null||i.focus()}send(e){this.eventManager.send(e)}on(e,s){this.eventManager.on(e,s)}off(e,s){this.eventManager.off(e,s)}update(e){this._value=e,this.send({type:u.UPDATE,value:e})}completion(){return new Promise((e,s)=>{this.on(a.COMPLETE,r=>{e(r.response)}),this.on("error",r=>{s(new Error(r.message))})})}openModal(){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()}),this.modal.showModal(),this.modal.addEventListener("click",()=>{this.closeModal()}),this.completion()}closeModal(){var e;this.modal&&((e=this.modal)==null||e.close(),this.modal.remove(),this.modal=void 0)}}function I(t){return Object.entries(t).map(([e,s])=>{if(!(e&&s))return;const r=encodeURIComponent(e),i=encodeURIComponent(typeof s=="object"?JSON.stringify(s):s);return`${r}=${i}`}).filter(e=>!!e).join("&")}class U{constructor(e){o(this,"nodeUrl");o(this,"authToken");o(this,"uxUrl");o(this,"theme");o(this,"locale");this.uxUrl=e.uxUrl||"https://connect.notabene.id",this.nodeUrl=e.nodeUrl,this.authToken=e.authToken,this.theme=e.theme,this.locale=e.locale}componentUrl(e,s,r,i){const n=new URL(this.uxUrl);n.pathname=e;const l=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()}createComponent(e,s,r,i){return new E(this.componentUrl(e,s,r,i),s)}createWithdrawalAssist(e,s,r){return this.createComponent("withdrawal-assist",e,s,r)}createWalletAssist(e,s,r){return this.createComponent("wallet-assist",e,s,r)}createDepositAssist(e,s,r){return this.createComponent("deposit-assist",e,s,r)}createConnectWallet(e,s,r){return this.createComponent("connect",e,s,r)}createDepositRequest(e,s,r){return this.createComponent("deposit-request",e,s,r)}decodeFragmentToObject(e){return e.slice(1).split("&").reduce((r,i)=>{const[n,l]=i.split("=");return r[decodeURIComponent(n)]=decodeURIComponent(l),r},{})}}exports.AgentType=d;exports.CMType=a;exports.EmbeddedComponent=E;exports.PersonType=c;exports.ProofStatus=p;exports.ProofTypes=f;exports.Status=m;exports.default=U;
+"use strict";var g=Object.defineProperty;var v=(t,e,s)=>e in t?g(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var o=(t,e,s)=>v(t,typeof e!="symbol"?e+"":e,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var d=(t=>(t.PRIVATE="WALLET",t.VASP="VASP",t))(d||{}),c=(t=>(t.NATURAL="natural",t.LEGAL="legal",t.SELF="self",t))(c||{}),m=(t=>(t.EMPTY="empty",t.VERIFY="verify",t.PENDING="pending",t.VERIFIED="verified",t.BANNED="banned",t))(m||{}),a=(t=>(t.COMPLETE="complete",t.RESIZE="resize",t.RESULT="result",t.READY="ready",t.INVALID="invalid",t.ERROR="error",t.CANCEL="cancel",t))(a||{}),u=(t=>(t.UPDATE="update",t.REQUEST_RESPONSE="requestResponse",t))(u||{}),p=(t=>(t.PENDING="pending",t.FAILED="rejected",t.FLAGGED="flagged",t.VERIFIED="verified",t))(p||{}),f=(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))(f||{});class b{constructor(){o(this,"listeners",new Map);o(this,"port");this.handleMessage=this.handleMessage.bind(this)}setPort(e){this.port=e,this.port.onmessage=this.handleMessage,this.port.start()}on(e,s){this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(s)}off(e,s){const r=this.listeners.get(e);r&&(r.delete(s),r.size===0&&this.listeners.delete(e))}handleMessage(e){const s=e.data;if(typeof s=="object"&&s!==null&&"type"in s){const r=s.type,i=this.listeners.get(r);i&&i.forEach(n=>n(s))}}send(e){this.port&&this.port.postMessage(e)}}class E{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._options=r,this.eventManager=new b,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`)})}get url(){return this._url}get value(){return this._value}get options(){return this._options}get errors(){return this._errors}open(){document.location.href=this.url}mount(e){const s=document.querySelector(e);if(!s)throw new Error(`parentID ${e} not found`);this.embed(s)}embed(e,s=!1){var r,i;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()}send(e){this.eventManager.send(e)}on(e,s){this.eventManager.on(e,s)}off(e,s){this.eventManager.off(e,s)}update(e,s){this._value=e,s&&(this._options=s),this.send({type:u.UPDATE,value:e,options:this._options})}completion(){return new Promise((e,s)=>{this.on(a.COMPLETE,r=>{e(r.response)}),this.on("error",r=>{s(new Error(r.message))})})}openModal(){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()}),this.modal.showModal(),this.modal.addEventListener("click",()=>{this.closeModal()}),this.completion()}closeModal(){var e;this.modal&&((e=this.modal)==null||e.close(),this.modal.remove(),this.modal=void 0)}}function w(t){return Object.entries(t).map(([e,s])=>{if(!(e&&s))return;const r=encodeURIComponent(e),i=encodeURIComponent(typeof s=="object"?JSON.stringify(s):s);return`${r}=${i}`}).filter(e=>!!e).join("&")}class I{constructor(e){o(this,"nodeUrl");o(this,"authToken");o(this,"uxUrl");o(this,"theme");o(this,"locale");this.uxUrl=e.uxUrl||"https://connect.notabene.id",this.nodeUrl=e.nodeUrl,this.authToken=e.authToken,this.theme=e.theme,this.locale=e.locale}componentUrl(e,s,r,i){const n=new URL(this.uxUrl);n.pathname=e;const h=w({authToken:this.authToken,value:s,configuration:r});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()}createComponent(e,s,r,i){return new E(this.componentUrl(e,s,r,i),s,r)}createWithdrawalAssist(e,s,r){return this.createComponent("withdrawal-assist",e,s,r)}createWalletAssist(e,s,r){return this.createComponent("wallet-assist",e,s,r)}createDepositAssist(e,s,r){return this.createComponent("deposit-assist",e,s,r)}createConnectWallet(e,s,r){return this.createComponent("connect",e,s,r)}createDepositRequest(e,s,r){return this.createComponent("deposit-request",e,s,r)}decodeFragmentToObject(e){return e.slice(1).split("&").reduce((r,i)=>{const[n,h]=i.split("=");return r[decodeURIComponent(n)]=decodeURIComponent(h),r},{})}}exports.AgentType=d;exports.CMType=a;exports.EmbeddedComponent=E;exports.PersonType=c;exports.ProofStatus=p;exports.ProofTypes=f;exports.Status=m;exports.default=I;

package/dist/notabene.d.ts

@@ -293,9 +293,10 @@ declare type DTI = string;
  * An embedded Notabene component
  * @public
  */
-export declare class EmbeddedComponent<V> {
+export declare class EmbeddedComponent<V, O> {
     private _url;
     private _value;
+    private _options?;
     private _errors;
     private iframe?;
     private eventManager;
@@ -305,7 +306,7 @@ export declare class EmbeddedComponent<V> {
      * @param url - The URL of the embedded component
      * @param value - The initial transaction value
      */
-    constructor(url: string, value: Partial<V>);
+    constructor(url: string, value: Partial<V>, options?: O);
     /**
      * Gets the URL of the embedded component
      * @returns The URL of the embedded component
@@ -316,6 +317,7 @@ export declare class EmbeddedComponent<V> {
      * @returns The current transaction value
      */
     get value(): Partial<V>;
+    get options(): O | undefined;
     get errors(): ValidationError[];
     /**
      * Opens the component URL in the current window
@@ -332,11 +334,12 @@ export declare class EmbeddedComponent<V> {
      * @param parent - The parent element to embed the component into
      */
     embed(parent: Element, modal?: boolean): void;
+    removeEmbed(): void;
     /**
      * Sends a message to the embedded component
      * @param message - The message to send
      */
-    send(message: HostMessage<V>): void;
+    send(message: HostMessage<V, O>): void;
     /**
      * Adds an event listener for a specific message type
      * @param messageType - The type of message to listen for
@@ -353,7 +356,7 @@ export declare 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>): void;
+    update(value: Partial<V>, options?: O): void;
     /**
      * Waits for the component to complete and returns the transaction response
      * @returns A promise that resolves with the transaction response
@@ -407,7 +410,7 @@ declare const enum HMType {
  * Host Messages
  * @public
  */
-export declare type HostMessage<T> = UpdateValue<T>;
+export declare type HostMessage<T, O> = UpdateValue<T, O>;
 
 /**
  * Intermediary VASP
@@ -703,7 +706,7 @@ declare class Notabene {
      * @returns component URL
      * @internal
      */
-    componentUrl<V>(path: string, value: V, configuration?: TransactionOptions, callbacks?: CallbackOptions): string;
+    componentUrl<V, O>(path: string, value: V, configuration?: O, callbacks?: CallbackOptions): string;
     /**
      * Creates a new embedded component
      *
@@ -714,7 +717,7 @@ declare class Notabene {
      * @returns A new EmbeddedComponent instance
      * @internal
      */
-    createComponent<V>(path: string, value: Partial<V>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<V>;
+    createComponent<V, O>(path: string, value: Partial<V>, options?: O, callbacks?: CallbackOptions): EmbeddedComponent<V, O>;
     /**
      * Creates a withdrawal assist component
      *
@@ -723,7 +726,7 @@ declare class Notabene {
      * @param callbacks - Optional callback configuration
      * @returns A new EmbeddedComponent instance for withdrawal assistance
      */
-    createWithdrawalAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal>;
+    createWithdrawalAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal, TransactionOptions>;
     /**
      * Creates a wallet assist component
      *
@@ -733,7 +736,7 @@ declare class Notabene {
      * @returns A new EmbeddedComponent instance for withdrawal assistance
      * @alpha
      */
-    createWalletAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal>;
+    createWalletAssist(value: Partial<Withdrawal>, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<Withdrawal, TransactionOptions>;
     /**
      * Creates a deposit assist component
      *
@@ -743,7 +746,7 @@ declare class Notabene {
      * @returns A new EmbeddedComponent instance for deposit assistance
      * @alpha
      */
-    createDepositAssist(value: Partial<Deposit>, options?: any, callbacks?: CallbackOptions): EmbeddedComponent<Deposit>;
+    createDepositAssist(value: Partial<Deposit>, options?: any, callbacks?: CallbackOptions): EmbeddedComponent<Deposit, any>;
     /**
      * Creates a connect component
      *
@@ -753,7 +756,7 @@ declare class Notabene {
      * @returns A new EmbeddedComponent instance for connection
      * @alpha
      */
-    createConnectWallet(value: ConnectionRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<ConnectionRequest>;
+    createConnectWallet(value: ConnectionRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<ConnectionRequest, TransactionOptions>;
     /**
      * Creates a deposit request component
      *
@@ -763,7 +766,7 @@ declare class Notabene {
      * @returns A new EmbeddedComponent instance for deposit requests
      * @public
      */
-    createDepositRequest(value: DepositRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<DepositRequest>;
+    createDepositRequest(value: DepositRequest, options?: TransactionOptions, callbacks?: CallbackOptions): EmbeddedComponent<DepositRequest, TransactionOptions>;
     /**
      * Decodes a URL fragment into an object
      *
@@ -1069,11 +1072,14 @@ declare type TravelAddress = `ta${string}`;
 
 /**
  * Represents an update value host message. This is sent from Host to component.
+ * @typeParam T - The overall Value type being sent
+ * @typeParam O - The Option type being sent
  * @public
  */
-declare type UpdateValue<T> = {
+declare type UpdateValue<T, O> = {
     type: HMType.UPDATE;
     value: Partial<T>;
+    options?: O;
 };
 
 /**

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.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());
@@ -36,17 +36,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 +64,9 @@ class w {
   get value() {
     return this._value;
   }
+  get options() {
+    return this._options;
+  }
   get errors() {
     return this._errors;
   }
@@ -88,11 +92,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 +127,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 +173,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 +220,8 @@ class R {
   createComponent(e, s, r, i) {
     return new w(
       this.componentUrl(e, s, r, i),
-      s
+      s,
+      r
     );
   }
   /**
@@ -320,9 +328,9 @@ export {
   u as AgentType,
   a as CMType,
   w as EmbeddedComponent,
-  E as PersonType,
-  p as ProofStatus,
+  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.18",
   "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

@@ -139,10 +139,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 +181,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 +207,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Withdrawal>(
+    return this.createComponent<Withdrawal, TransactionOptions>(
       'withdrawal-assist',
       value,
       options,
@@ -228,7 +229,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Withdrawal>(
+    return this.createComponent<Withdrawal, TransactionOptions>(
       'wallet-assist',
       value,
       options,
@@ -250,7 +251,7 @@ export default class Notabene {
     options?: any,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<Deposit>(
+    return this.createComponent<Deposit, any>(
       'deposit-assist',
       value,
       options,
@@ -272,7 +273,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<ConnectionRequest>(
+    return this.createComponent<ConnectionRequest, TransactionOptions>(
       'connect',
       value,
       options,
@@ -294,7 +295,7 @@ export default class Notabene {
     options?: TransactionOptions,
     callbacks?: CallbackOptions,
   ) {
-    return this.createComponent<DepositRequest>(
+    return this.createComponent<DepositRequest, TransactionOptions>(
       'deposit-request',
       value,
       options,

package/src/types.ts

@@ -545,18 +545,21 @@ export const enum HMType {
 
 /**
  * Represents an update value host message. This is sent from Host to component.
+ * @typeParam T - The overall Value type being sent
+ * @typeParam O - The Option type being sent
  * @public
  */
-export type UpdateValue<T> = {
+export type UpdateValue<T, O> = {
   type: HMType.UPDATE;
   value: Partial<T>;
+  options?: O;
 };
 
 /**
  * Host Messages
  * @public
  */
-export type HostMessage<T> = UpdateValue<T>;
+export type HostMessage<T, O> = UpdateValue<T, O>;
 
 /**
  * Options for callback and redirect URIs

package/src/utils/MessageEventManager.ts

@@ -2,7 +2,7 @@ import { ComponentMessage, HostMessage } from '../types';
 
 export type MessageCallback<T> = (message: ComponentMessage<T>) => void;
 
-export class MessageEventManager<T> {
+export class MessageEventManager<T, O> {
   private listeners: Map<string, Set<MessageCallback<T>>> = new Map();
   private port?: MessagePort;
 
@@ -46,7 +46,7 @@ export class MessageEventManager<T> {
   }
 
   // Method to send messages through the port
-  send(message: HostMessage<T>): void {
+  send(message: HostMessage<T, O>): void {
     if (this.port) {
       this.port.postMessage(message);
     }

package/src/utils/__tests__/MessageEventManager.test.ts

@@ -1,9 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { HMType, UpdateValue, Withdrawal } from '../../types';
+import {
+  HMType,
+  type TransactionOptions,
+  type UpdateValue,
+  type Withdrawal,
+} from '../../types';
 import { MessageEventManager } from '../MessageEventManager';
 
 describe('MessageEventManager', () => {
-  let messageEventManager: MessageEventManager<Withdrawal>;
+  let messageEventManager: MessageEventManager<Withdrawal, TransactionOptions>;
   let mockPort: MessagePort;
 
   beforeEach(() => {
@@ -13,7 +18,10 @@ describe('MessageEventManager', () => {
       start: vi.fn(),
     } as unknown as MessagePort;
 
-    messageEventManager = new MessageEventManager();
+    messageEventManager = new MessageEventManager<
+      Withdrawal,
+      TransactionOptions
+    >();
   });
 
   describe('setPort', () => {
@@ -73,7 +81,7 @@ describe('MessageEventManager', () => {
     });
 
     it('should send messages through the port', () => {
-      const message: UpdateValue<Withdrawal> = {
+      const message: UpdateValue<Withdrawal, TransactionOptions> = {
         type: HMType.UPDATE,
         value: { requestId: 'id' },
       };