@notabene/javascript-sdk 2.1.0 → 2.2.0

package/README.md

@@ -207,6 +207,30 @@ try {
 }
 ```
 
+### Popup
+
+All components support being opened in a popup window using `popup()`, which returns a promise.
+
+Many embedded wallets refuse to work in an iframe. In this case it is better to use a popup window.
+
+Unfortunately there are also some restrictions on popup windows:
+
+- [Popup window Restrictions](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#restrictions)
+
+* [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+
+```js
+const withdrawal = notabene.createWithdrawalAssist(tx, options);
+try {
+  const { valid, value, txCreate, ivms101, proof } = await withdrawal.popup();
+  if (valid) {
+    // Submit result to your backend
+  }
+} catch (e) {
+  console.error(e);
+}
+```
+
 ### Linked Component
 
 In some cases, in particular institutional or mobile apps you may prefer to link your customers to the component through an email or redirect the user to it in a mobile app.

package/dist/notabene.cjs

@@ -1 +1 @@
-"use strict";var I=Object.defineProperty;var w=(e,t,r)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var o=(e,t,r)=>w(e,typeof t!="symbol"?t+"":t,r);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var c=(e=>(e.PRIVATE="WALLET",e.VASP="VASP",e))(c||{}),m=(e=>(e.NATURAL="natural",e.LEGAL="legal",e.SELF="self",e))(m||{}),u=(e=>(e.EMPTY="empty",e.VERIFY="verify",e.PENDING="pending",e.VERIFIED="verified",e.BANNED="banned",e))(u||{}),f=(e=>(e.ALLOWED="allowed",e.PENDING="pending",e))(f||{}),E=(e=>(e.ASSET="asset",e.DESTINATION="destination",e.COUNTERPARTY="counterparty",e.AGENT="agent",e))(E||{}),h=(e=>(e.COMPLETE="complete",e.RESIZE="resize",e.RESULT="result",e.INVALID="invalid",e.ERROR="error",e.CANCEL="cancel",e))(h||{}),l=(e=>(e.UPDATE="update",e.REQUEST_RESPONSE="requestResponse",e))(l||{}),p=(e=>(e.PENDING="pending",e.FAILED="rejected",e.FLAGGED="flagged",e.VERIFIED="verified",e))(p||{}),v=(e=>(e.SelfDeclaration="self-declaration",e.SIWE="siwe",e.SIWX="siwx",e.EIP191="eip-191",e.EIP712="eip-712",e.EIP1271="eip-1271",e.BIP137="bip-137",e.BIP137_XPUB="xpub",e.ED25519="ed25519",e.MicroTransfer="microtransfer",e.Screenshot="screenshot",e.Connect="connect",e))(v||{});class b{constructor(){o(this,"listeners",new Map);o(this,"port");this.handleMessage=this.handleMessage.bind(this)}setPort(t){this.port=t,this.port.onmessage=this.handleMessage,this.port.start()}on(t,r){return this.listeners.has(t)||this.listeners.set(t,new Set),this.listeners.get(t).add(r),()=>this.off(t,r)}off(t,r){const i=this.listeners.get(t);i&&(i.delete(r),i.size===0&&this.listeners.delete(t))}handleMessage(t){const r=t.data;if(typeof r=="object"&&r!==null&&"type"in r){const i=r.type,s=this.listeners.get(i);s&&s.forEach(n=>n(r))}}send(t){this.port&&this.port.postMessage(t)}}class g{constructor(t,r,i){o(this,"_url");o(this,"_value");o(this,"_options");o(this,"_errors",[]);o(this,"iframe");o(this,"eventManager");o(this,"modal");this._url=t,this._value=r,this._options=i,this.eventManager=new b,this.on(h.INVALID,s=>{s.type===h.INVALID&&(this._errors=s.errors,this._value=s.value)}),this.on(h.RESIZE,s=>{s.type===h.RESIZE&&this.iframe&&(this.iframe.style.height=`${s.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(t){const r=document.querySelector(t);if(!r)throw new Error(`parentID ${t} not found`);this.embed(r)}embed(t,r=!1){var i,s;this.removeEmbed(),this.iframe=document.createElement("iframe"),this.iframe.src=this.url+(r?"":"&embedded=true"),this.iframe.allow="web-share; clipboard-write",this.iframe.style.width="100%",this.iframe.style.height="0px",this.iframe.style.border="none",this.iframe.style.overflow="hidden",this.iframe.scrolling="no",t.appendChild(this.iframe),window.addEventListener("message",n=>{var a,d;n.source===((a=this.iframe)==null?void 0:a.contentWindow)&&((d=this.eventManager)==null||d.setPort(n.ports[0]))}),(s=(i=this.iframe)==null?void 0:i.contentWindow)==null||s.focus()}removeEmbed(){this.iframe&&this.iframe.remove()}send(t){this.eventManager.send(t)}on(t,r){return this.eventManager.on(t,r)}off(t,r){this.eventManager.off(t,r)}update(t,r){this._value=t,r&&(this._options=r),this.send({type:l.UPDATE,value:t,options:this._options})}completion(){return new Promise((t,r)=>{let i,s;function n(){i&&i(),s&&s()}i=this.on(h.COMPLETE,a=>{t(a.response),n()}),s=this.on("error",a=>{r(new Error(a.message)),n()})})}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(h.CANCEL,()=>{this.closeModal()}),this.on(h.COMPLETE,()=>{this.closeModal()}),this.modal.showModal(),this.modal.addEventListener("click",()=>{this.closeModal()}),this.completion()}closeModal(){var t;this.modal&&((t=this.modal)==null||t.close(),this.modal.remove(),this.modal=void 0)}}function U(e){return Object.entries(e).map(([t,r])=>{if(r==null)return;const i=encodeURIComponent(t),s=encodeURIComponent(typeof r=="object"?JSON.stringify(r):String(r));return`${i}=${s}`}).filter(t=>t!==void 0).join("&")}function M(e){const t=e.slice(1);return t?t.split("&").filter(Boolean).reduce((i,s)=>{const[n,a]=s.split("=");return n&&(i[decodeURIComponent(n)]=a?decodeURIComponent(a):""),i},{}):{}}class A{constructor(t){o(this,"nodeUrl");o(this,"authToken");o(this,"uxUrl");o(this,"theme");o(this,"locale");this.uxUrl=t.uxUrl||"https://connect.notabene.id",this.nodeUrl=t.nodeUrl,this.authToken=t.authToken,this.theme=t.theme,this.locale=t.locale}componentUrl(t,r,i,s){const n=new URL(this.uxUrl);n.pathname=t;const a=U({authToken:this.authToken,value:r,configuration:i});return n.hash=a,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),s&&(s.callback&&n.searchParams.set("callback_url",s.callback),s.redirectUri&&n.searchParams.set("redirect_uri",s.redirectUri)),n.toString()}createComponent(t,r,i,s){return new g(this.componentUrl(t,r,i,s),r,i)}createWithdrawalAssist(t,r,i){return this.createComponent("withdrawal-assist",t,r,i)}createConnectWallet(t,r,i){return this.createComponent("connect",t,r,i)}createDepositRequest(t,r,i){return this.createComponent("deposit-request",t,r,i)}}exports.AgentType=c;exports.CMType=h;exports.EmbeddedComponent=g;exports.HMType=l;exports.PersonType=m;exports.ProofStatus=p;exports.ProofTypes=v;exports.Status=u;exports.VASPSearchControl=f;exports.ValidationSections=E;exports.decodeFragmentToObject=M;exports.default=A;
+"use strict";var w=Object.defineProperty;var I=(t,e,r)=>e in t?w(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var o=(t,e,r)=>I(t,typeof e!="symbol"?e+"":e,r);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var c=(t=>(t.PRIVATE="WALLET",t.VASP="VASP",t))(c||{}),m=(t=>(t.NATURAL="natural",t.LEGAL="legal",t.SELF="self",t))(m||{}),u=(t=>(t.EMPTY="empty",t.VERIFY="verify",t.PENDING="pending",t.VERIFIED="verified",t.BANNED="banned",t))(u||{}),E=(t=>(t.ALLOWED="allowed",t.PENDING="pending",t))(E||{}),f=(t=>(t.ASSET="asset",t.DESTINATION="destination",t.COUNTERPARTY="counterparty",t.AGENT="agent",t))(f||{}),a=(t=>(t.COMPLETE="complete",t.RESIZE="resize",t.RESULT="result",t.INVALID="invalid",t.ERROR="error",t.CANCEL="cancel",t))(a||{}),d=(t=>(t.UPDATE="update",t.REQUEST_RESPONSE="requestResponse",t))(d||{}),p=(t=>(t.PENDING="pending",t.FAILED="rejected",t.FLAGGED="flagged",t.VERIFIED="verified",t))(p||{}),v=(t=>(t.SelfDeclaration="self-declaration",t.SIWE="siwe",t.SIWX="siwx",t.EIP191="eip-191",t.EIP712="eip-712",t.EIP1271="eip-1271",t.BIP137="bip-137",t.BIP137_XPUB="xpub",t.ED25519="ed25519",t.MicroTransfer="microtransfer",t.Screenshot="screenshot",t.Connect="connect",t))(v||{});class C{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,r){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(r),()=>this.off(e,r)}off(e,r){const i=this.listeners.get(e);i&&(i.delete(r),i.size===0&&this.listeners.delete(e))}handleMessage(e){const r=e.data;if(typeof r=="object"&&r!==null&&"type"in r){const i=r.type,s=this.listeners.get(i);s&&s.forEach(n=>n(r))}}send(e){this.port&&this.port.postMessage(e)}}class g{constructor(e,r,i){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=r,this._options=i,this.eventManager=new C,this.on(a.INVALID,s=>{s.type===a.INVALID&&(this._errors=s.errors,this._value=s.value)}),this.on(a.RESIZE,s=>{s.type===a.RESIZE&&this.iframe&&(this.iframe.style.height=`${s.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 r=document.querySelector(e);if(!r)throw new Error(`parentID ${e} not found`);this.embed(r)}embed(e,r=!1){var i,s;this.removeEmbed(),this.iframe=document.createElement("iframe"),this.iframe.src=this.url+(r?"":"&embedded=true"),this.iframe.allow="web-share; clipboard-write; hid; bluetooth;",this.iframe.style.width="100%",this.iframe.style.height="0px",this.iframe.style.border="none",this.iframe.style.overflow="hidden",this.iframe.scrolling="no",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]))}),(s=(i=this.iframe)==null?void 0:i.contentWindow)==null||s.focus()}removeEmbed(){this.iframe&&this.iframe.remove()}send(e){this.eventManager.send(e)}on(e,r){return this.eventManager.on(e,r)}off(e,r){this.eventManager.off(e,r)}update(e,r){this._value=e,r&&(this._options=r),this.send({type:d.UPDATE,value:e,options:this._options})}completion(){return new Promise((e,r)=>{let i,s,n;function l(){i&&i(),s&&s(),n&&n()}i=this.on(a.COMPLETE,h=>{e(h.response),l()}),s=this.on(a.CANCEL,()=>{r(new Error("User cancelled")),l()}),n=this.on("error",h=>{r(new Error(h.message)),l()})})}async openModal(){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);const e=this.on(a.CANCEL,()=>{this.closeModal()}),r=this.on(a.COMPLETE,()=>{this.closeModal()});return this.modal.showModal(),this.modal.addEventListener("click",()=>{this.closeModal()}),this.completion().finally(()=>{e(),r()})}closeModal(){var e;this.modal&&((e=this.modal)==null||e.close(),this.modal.remove(),this.modal=void 0)}async popup(){const e=window.open(this.url,"_blank","popup=true,width=600,height=600");window.addEventListener("message",s=>{var n;s.source===e&&(console.log("received message from popup",s.data),(n=this.eventManager)==null||n.setPort(s.ports[0]))});const r=this.on(a.CANCEL,()=>{e==null||e.close()}),i=this.on(a.COMPLETE,()=>{e==null||e.close()});return this.completion().finally(()=>{r(),i()})}}function b(t){return Object.entries(t).map(([e,r])=>{if(r==null)return;const i=encodeURIComponent(e),s=encodeURIComponent(typeof r=="object"?JSON.stringify(r):String(r));return`${i}=${s}`}).filter(e=>e!==void 0).join("&")}function U(t){const e=t.slice(1);return e?e.split("&").filter(Boolean).reduce((i,s)=>{const[n,l]=s.split("=");return n&&(i[decodeURIComponent(n)]=l?decodeURIComponent(l):""),i},{}):{}}class L{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,r,i,s){const n=new URL(this.uxUrl);n.pathname=e;const l=b({authToken:this.authToken,value:r,configuration:i});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),s&&(s.callback&&n.searchParams.set("callback_url",s.callback),s.redirectUri&&n.searchParams.set("redirect_uri",s.redirectUri)),n.toString()}createComponent(e,r,i,s){return new g(this.componentUrl(e,r,i,s),r,i)}createWithdrawalAssist(e,r,i){return this.createComponent("withdrawal-assist",e,r,i)}createConnectWallet(e,r,i){return this.createComponent("connect",e,r,i)}createDepositRequest(e,r,i){return this.createComponent("deposit-request",e,r,i)}}exports.AgentType=c;exports.CMType=a;exports.EmbeddedComponent=g;exports.HMType=d;exports.PersonType=m;exports.ProofStatus=p;exports.ProofTypes=v;exports.Status=u;exports.VASPSearchControl=E;exports.ValidationSections=f;exports.decodeFragmentToObject=U;exports.default=L;

package/dist/notabene.d.ts

@@ -524,6 +524,13 @@ export declare class EmbeddedComponent<V, O> {
      *
      */
     closeModal(): void;
+    /**
+     * Opens the component in a popup window. This may be needed to support many self-hosted wallets
+     * @returns A promise that resolves with the transaction response
+     * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#restrictions)
+     * @see [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+     */
+    popup(): Promise<TransactionResponse<V>>;
 }
 
 /**

package/dist/notabene.js

@@ -1,8 +1,8 @@
 var c = Object.defineProperty;
-var m = (e, t, r) => t in e ? c(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var o = (e, t, r) => m(e, typeof t != "symbol" ? t + "" : t, r);
-var u = /* @__PURE__ */ ((e) => (e.PRIVATE = "WALLET", e.VASP = "VASP", e))(u || {}), E = /* @__PURE__ */ ((e) => (e.NATURAL = "natural", e.LEGAL = "legal", e.SELF = "self", e))(E || {}), f = /* @__PURE__ */ ((e) => (e.EMPTY = "empty", e.VERIFY = "verify", e.PENDING = "pending", e.VERIFIED = "verified", e.BANNED = "banned", e))(f || {}), p = /* @__PURE__ */ ((e) => (e.ALLOWED = "allowed", e.PENDING = "pending", e))(p || {}), v = /* @__PURE__ */ ((e) => (e.ASSET = "asset", e.DESTINATION = "destination", e.COUNTERPARTY = "counterparty", e.AGENT = "agent", e))(v || {}), h = /* @__PURE__ */ ((e) => (e.COMPLETE = "complete", e.RESIZE = "resize", e.RESULT = "result", e.INVALID = "invalid", e.ERROR = "error", e.CANCEL = "cancel", e))(h || {}), d = /* @__PURE__ */ ((e) => (e.UPDATE = "update", e.REQUEST_RESPONSE = "requestResponse", e))(d || {}), g = /* @__PURE__ */ ((e) => (e.PENDING = "pending", e.FAILED = "rejected", e.FLAGGED = "flagged", e.VERIFIED = "verified", e))(g || {}), I = /* @__PURE__ */ ((e) => (e.SelfDeclaration = "self-declaration", e.SIWE = "siwe", e.SIWX = "siwx", e.EIP191 = "eip-191", e.EIP712 = "eip-712", e.EIP1271 = "eip-1271", e.BIP137 = "bip-137", e.BIP137_XPUB = "xpub", e.ED25519 = "ed25519", e.MicroTransfer = "microtransfer", e.Screenshot = "screenshot", e.Connect = "connect", e))(I || {});
-class w {
+var m = (t, e, r) => e in t ? c(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var o = (t, e, r) => m(t, typeof e != "symbol" ? e + "" : e, r);
+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 || {}), p = /* @__PURE__ */ ((t) => (t.ALLOWED = "allowed", t.PENDING = "pending", t))(p || {}), v = /* @__PURE__ */ ((t) => (t.ASSET = "asset", t.DESTINATION = "destination", t.COUNTERPARTY = "counterparty", t.AGENT = "agent", t))(v || {}), h = /* @__PURE__ */ ((t) => (t.COMPLETE = "complete", t.RESIZE = "resize", t.RESULT = "result", t.INVALID = "invalid", t.ERROR = "error", t.CANCEL = "cancel", t))(h || {}), d = /* @__PURE__ */ ((t) => (t.UPDATE = "update", t.REQUEST_RESPONSE = "requestResponse", t))(d || {}), g = /* @__PURE__ */ ((t) => (t.PENDING = "pending", t.FAILED = "rejected", t.FLAGGED = "flagged", t.VERIFIED = "verified", t))(g || {}), w = /* @__PURE__ */ ((t) => (t.SelfDeclaration = "self-declaration", t.SIWE = "siwe", t.SIWX = "siwx", t.EIP191 = "eip-191", t.EIP712 = "eip-712", t.EIP1271 = "eip-1271", t.BIP137 = "bip-137", t.BIP137_XPUB = "xpub", t.ED25519 = "ed25519", t.MicroTransfer = "microtransfer", t.Screenshot = "screenshot", t.Connect = "connect", t))(w || {});
+class I {
   constructor() {
     o(this, "listeners", /* @__PURE__ */ new Map());
     o(this, "port");
@@ -16,8 +16,8 @@ class w {
    *
    * @param port - The MessagePort instance to use for communication
    */
-  setPort(t) {
-    this.port = t, this.port.onmessage = this.handleMessage, this.port.start();
+  setPort(e) {
+    this.port = e, this.port.onmessage = this.handleMessage, this.port.start();
   }
   /**
      * Registers a callback for a specific message type.
@@ -29,8 +29,8 @@ class w {
      * @param callback - The callback function to execute when matching messages are received
   
      */
-  on(t, r) {
-    return this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(r), () => this.off(t, r);
+  on(e, r) {
+    return this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(r), () => this.off(e, r);
   }
   /**
    * Removes a callback for a specific message type.
@@ -41,9 +41,9 @@ class w {
    * @param messageType - The type of message to remove listener from
    * @param callback - The callback function to remove
    */
-  off(t, r) {
-    const i = this.listeners.get(t);
-    i && (i.delete(r), i.size === 0 && this.listeners.delete(t));
+  off(e, r) {
+    const i = this.listeners.get(e);
+    i && (i.delete(r), i.size === 0 && this.listeners.delete(e));
   }
   /**
    * Internal message handler for processing received messages.
@@ -53,8 +53,8 @@ class w {
    *
    * @param event - The message event containing the component message
    */
-  handleMessage(t) {
-    const r = t.data;
+  handleMessage(e) {
+    const r = e.data;
     if (typeof r == "object" && r !== null && "type" in r) {
       const i = r.type, s = this.listeners.get(i);
       s && s.forEach((n) => n(r));
@@ -64,17 +64,17 @@ class w {
    * Sends a message through the message port
    * @param message The host message to send
    */
-  send(t) {
-    this.port && this.port.postMessage(t);
+  send(e) {
+    this.port && this.port.postMessage(e);
   }
 }
-class U {
+class C {
   /**
    * Creates an instance of EmbeddedComponent.
    * @param url - The URL of the embedded component
    * @param value - The initial transaction value
    */
-  constructor(t, r, i) {
+  constructor(e, r, i) {
     o(this, "_url");
     o(this, "_value");
     o(this, "_options");
@@ -82,7 +82,7 @@ class U {
     o(this, "iframe");
     o(this, "eventManager");
     o(this, "modal");
-    this._url = t, this._value = r, this._options = i, this.eventManager = new w(), this.on(h.INVALID, (s) => {
+    this._url = e, this._value = r, this._options = i, this.eventManager = new I(), this.on(h.INVALID, (s) => {
       s.type === h.INVALID && (this._errors = s.errors, this._value = s.value);
     }), this.on(h.RESIZE, (s) => {
       s.type === h.RESIZE && this.iframe && (this.iframe.style.height = `${s.height}px`);
@@ -119,18 +119,18 @@ class U {
    * @param parentId - The ID of the parent element
    * @throws Will throw an error if the parent element is not found
    */
-  mount(t) {
-    const r = document.querySelector(t);
-    if (!r) throw new Error(`parentID ${t} not found`);
+  mount(e) {
+    const r = document.querySelector(e);
+    if (!r) throw new Error(`parentID ${e} not found`);
     this.embed(r);
   }
   /**
    * Embeds the component into a parent element
    * @param parent - The parent element to embed the component into
    */
-  embed(t, r = !1) {
+  embed(e, r = !1) {
     var i, s;
-    this.removeEmbed(), this.iframe = document.createElement("iframe"), this.iframe.src = this.url + (r ? "" : "&embedded=true"), this.iframe.allow = "web-share; clipboard-write", this.iframe.style.width = "100%", this.iframe.style.height = "0px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", this.iframe.scrolling = "no", t.appendChild(this.iframe), window.addEventListener("message", (n) => {
+    this.removeEmbed(), this.iframe = document.createElement("iframe"), this.iframe.src = this.url + (r ? "" : "&embedded=true"), this.iframe.allow = "web-share; clipboard-write; hid; bluetooth;", this.iframe.style.width = "100%", this.iframe.style.height = "0px", this.iframe.style.border = "none", this.iframe.style.overflow = "hidden", this.iframe.scrolling = "no", e.appendChild(this.iframe), window.addEventListener("message", (n) => {
       var a, l;
       n.source === ((a = this.iframe) == null ? void 0 : a.contentWindow) && ((l = this.eventManager) == null || l.setPort(n.ports[0]));
     }), (s = (i = this.iframe) == null ? void 0 : i.contentWindow) == null || s.focus();
@@ -142,83 +142,114 @@ class U {
    * Sends a message to the embedded component
    * @param message - The message to send
    */
-  send(t) {
-    this.eventManager.send(t);
+  send(e) {
+    this.eventManager.send(e);
   }
   /**
    * Adds an event listener for a specific message type
    * @param messageType - The type of message to listen for
    * @param callback - The callback function to execute when the message is received
    */
-  on(t, r) {
-    return this.eventManager.on(t, r);
+  on(e, r) {
+    return this.eventManager.on(e, r);
   }
   /**
    * Removes an event listener for a specific message type
    * @param messageType - The type of message to stop listening for
    * @param callback - The callback function to remove
    */
-  off(t, r) {
-    this.eventManager.off(t, r);
+  off(e, r) {
+    this.eventManager.off(e, r);
   }
   /**
    * Updates the transaction value and sends an update message to the component
    * @param value - The new transaction value
    */
-  update(t, r) {
-    this._value = t, r && (this._options = r), this.send({ type: d.UPDATE, value: t, options: this._options });
+  update(e, r) {
+    this._value = e, r && (this._options = r), this.send({ type: d.UPDATE, value: e, options: this._options });
   }
   /**
    * Waits for the component to complete and returns the transaction response
    * @returns A promise that resolves with the transaction response
    */
   completion() {
-    return new Promise((t, r) => {
-      let i, s;
-      function n() {
-        i && i(), s && s();
+    return new Promise((e, r) => {
+      let i, s, n;
+      function a() {
+        i && i(), s && s(), n && n();
       }
-      i = this.on(h.COMPLETE, (a) => {
-        t(a.response), n();
-      }), s = this.on("error", (a) => {
-        r(new Error(a.message)), n();
+      i = this.on(h.COMPLETE, (l) => {
+        e(l.response), a();
+      }), s = this.on(h.CANCEL, () => {
+        r(new Error("User cancelled")), a();
+      }), n = this.on("error", (l) => {
+        r(new Error(l.message)), a();
       });
     });
   }
   /**
    * 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 = "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(h.CANCEL, () => {
+  async openModal() {
+    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);
+    const e = this.on(h.CANCEL, () => {
       this.closeModal();
-    }), this.on(h.COMPLETE, () => {
+    }), r = this.on(h.COMPLETE, () => {
       this.closeModal();
-    }), this.modal.showModal(), this.modal.addEventListener("click", () => {
+    });
+    return this.modal.showModal(), this.modal.addEventListener("click", () => {
       this.closeModal();
-    }), this.completion();
+    }), this.completion().finally(() => {
+      e(), r();
+    });
   }
   /**
    * Closes the modal dialog
    *
    */
   closeModal() {
-    var t;
-    this.modal && ((t = this.modal) == null || t.close(), this.modal.remove(), this.modal = void 0);
+    var e;
+    this.modal && ((e = this.modal) == null || e.close(), this.modal.remove(), this.modal = void 0);
+  }
+  /**
+   * Opens the component in a popup window. This may be needed to support many self-hosted wallets
+   * @returns A promise that resolves with the transaction response
+   * @see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#restrictions)
+   * @see [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+   */
+  async popup() {
+    const e = window.open(
+      this.url,
+      "_blank",
+      "popup=true,width=600,height=600"
+    );
+    window.addEventListener("message", (s) => {
+      var n;
+      s.source === e && (console.log("received message from popup", s.data), (n = this.eventManager) == null || n.setPort(s.ports[0]));
+    });
+    const r = this.on(h.CANCEL, () => {
+      e == null || e.close();
+    }), i = this.on(h.COMPLETE, () => {
+      e == null || e.close();
+    });
+    return this.completion().finally(() => {
+      r(), i();
+    });
   }
 }
-function b(e) {
-  return Object.entries(e).map(([t, r]) => {
+function U(t) {
+  return Object.entries(t).map(([e, r]) => {
     if (r == null) return;
-    const i = encodeURIComponent(t), s = encodeURIComponent(
+    const i = encodeURIComponent(e), s = encodeURIComponent(
       typeof r == "object" ? JSON.stringify(r) : String(r)
       // Use String() to handle all primitive types
     );
     return `${i}=${s}`;
-  }).filter((t) => t !== void 0).join("&");
+  }).filter((e) => e !== void 0).join("&");
 }
-function L(e) {
-  const t = e.slice(1);
-  return t ? t.split("&").filter(Boolean).reduce(
+function b(t) {
+  const e = t.slice(1);
+  return e ? e.split("&").filter(Boolean).reduce(
     (i, s) => {
       const [n, a] = s.split("=");
       return n && (i[decodeURIComponent(n)] = a ? decodeURIComponent(a) : ""), i;
@@ -232,13 +263,13 @@ class N {
    *
    * @param config - Configuration options for the Notabene SDK
    */
-  constructor(t) {
+  constructor(e) {
     o(this, "nodeUrl");
     o(this, "authToken");
     o(this, "uxUrl");
     o(this, "theme");
     o(this, "locale");
-    this.uxUrl = t.uxUrl || "https://connect.notabene.id", this.nodeUrl = t.nodeUrl, this.authToken = t.authToken, this.theme = t.theme, this.locale = t.locale;
+    this.uxUrl = e.uxUrl || "https://connect.notabene.id", this.nodeUrl = e.nodeUrl, this.authToken = e.authToken, this.theme = e.theme, this.locale = e.locale;
   }
   /**
    * Generates a URL for a Notabene component
@@ -250,10 +281,10 @@ class N {
    * @returns component URL
    * @internal
    */
-  componentUrl(t, r, i, s) {
+  componentUrl(e, r, i, s) {
     const n = new URL(this.uxUrl);
-    n.pathname = t;
-    const a = b({
+    n.pathname = e;
+    const a = U({
       authToken: this.authToken,
       value: r,
       configuration: i
@@ -270,9 +301,9 @@ class N {
    * @returns A new EmbeddedComponent instance
    * @internal
    */
-  createComponent(t, r, i, s) {
-    return new U(
-      this.componentUrl(t, r, i, s),
+  createComponent(e, r, i, s) {
+    return new C(
+      this.componentUrl(e, r, i, s),
       r,
       i
     );
@@ -285,10 +316,10 @@ class N {
    * @param callbacks - Optional callback configuration
    * @returns A new EmbeddedComponent instance for withdrawal assistance
    */
-  createWithdrawalAssist(t, r, i) {
+  createWithdrawalAssist(e, r, i) {
     return this.createComponent(
       "withdrawal-assist",
-      t,
+      e,
       r,
       i
     );
@@ -302,10 +333,10 @@ class N {
    * @returns A new EmbeddedComponent instance for connection
    * @alpha
    */
-  createConnectWallet(t, r, i) {
+  createConnectWallet(e, r, i) {
     return this.createComponent(
       "connect",
-      t,
+      e,
       r,
       i
     );
@@ -319,10 +350,10 @@ class N {
    * @returns A new EmbeddedComponent instance for deposit requests
    * @public
    */
-  createDepositRequest(t, r, i) {
+  createDepositRequest(e, r, i) {
     return this.createComponent(
       "deposit-request",
-      t,
+      e,
       r,
       i
     );
@@ -331,14 +362,14 @@ class N {
 export {
   u as AgentType,
   h as CMType,
-  U as EmbeddedComponent,
+  C as EmbeddedComponent,
   d as HMType,
   E as PersonType,
   g as ProofStatus,
-  I as ProofTypes,
+  w as ProofTypes,
   f as Status,
   p as VASPSearchControl,
   v as ValidationSections,
-  L as decodeFragmentToObject,
+  b as decodeFragmentToObject,
   N as default
 };

package/docs/README.md

@@ -211,6 +211,30 @@ try {
 }
 ```
 
+### Popup
+
+All components support being opened in a popup window using `popup()`, which returns a promise.
+
+Many embedded wallets refuse to work in an iframe. In this case it is better to use a popup window.
+
+Unfortunately there are also some restrictions on popup windows:
+
+- [Popup window Restrictions](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#restrictions)
+
+* [Cross-Origin-Opener-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy)
+
+```js
+const withdrawal = notabene.createWithdrawalAssist(tx, options);
+try {
+  const { valid, value, txCreate, ivms101, proof } = await withdrawal.popup();
+  if (valid) {
+    // Submit result to your backend
+  }
+} catch (e) {
+  console.error(e);
+}
+```
+
 ### Linked Component
 
 In some cases, in particular institutional or mobile apps you may prefer to link your customers to the component through an email or redirect the user to it in a mobile app.

package/docs/_media/TransactionOptions.md

@@ -16,7 +16,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:768](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L768)
+[types.ts:768](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L768)
 
 ***
 
@@ -26,7 +26,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:769](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L769)
+[types.ts:769](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L769)
 
 ***
 
@@ -36,7 +36,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:770](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L770)
+[types.ts:770](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L770)
 
 ***
 
@@ -46,7 +46,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:772](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L772)
+[types.ts:772](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L772)
 
 ***
 
@@ -80,7 +80,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:759](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L759)
+[types.ts:759](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L759)
 
 ***
 
@@ -90,4 +90,4 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:771](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/types.ts#L771)
+[types.ts:771](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/types.ts#L771)

package/docs/ivms/types/enumerations/PayloadVersionCode.md

@@ -18,7 +18,7 @@ Published May 2020
 
 #### Defined in
 
-[ivms/types.ts:365](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L365)
+[ivms/types.ts:365](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L365)
 
 ***
 
@@ -30,4 +30,4 @@ Published August 2023
 
 #### Defined in
 
-[ivms/types.ts:367](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L367)
+[ivms/types.ts:367](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L367)

package/docs/ivms/types/interfaces/PayloadMetadata.md

@@ -19,7 +19,7 @@ The version of IVMS 101 to which the payload complies.
 
 #### Defined in
 
-[ivms/types.ts:358](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L358)
+[ivms/types.ts:358](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L358)
 
 ***
 
@@ -31,4 +31,4 @@ The method used to map from a national system of writing to Latin script.
 
 #### Defined in
 
-[ivms/types.ts:356](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L356)
+[ivms/types.ts:356](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L356)

package/docs/ivms/types/type-aliases/Address.md

@@ -111,4 +111,4 @@ Name of a built-up area, with defined boundaries, and a local government.
 
 ## Defined in
 
-[ivms/types.ts:119](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L119)
+[ivms/types.ts:119](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L119)

package/docs/ivms/types/type-aliases/AddressTypeCode.md

@@ -13,4 +13,4 @@ Specifies the type of address
 
 ## Defined in
 
-[ivms/types.ts:44](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L44)
+[ivms/types.ts:44](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L44)

package/docs/ivms/types/type-aliases/Beneficiary.md

@@ -27,4 +27,4 @@ Array of persons associated with the beneficiary
 
 ## Defined in
 
-[ivms/types.ts:313](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L313)
+[ivms/types.ts:313](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L313)

package/docs/ivms/types/type-aliases/BeneficiaryVASP.md

@@ -21,4 +21,4 @@ The beneficiary VASP information
 
 ## Defined in
 
-[ivms/types.ts:335](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L335)
+[ivms/types.ts:335](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L335)

package/docs/ivms/types/type-aliases/DateAndPlaceOfBirth.md

@@ -27,4 +27,4 @@ Place of birth (max 70 characters)
 
 ## Defined in
 
-[ivms/types.ts:107](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L107)
+[ivms/types.ts:107](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L107)

package/docs/ivms/types/type-aliases/ISOCountryCode.md

@@ -19,4 +19,4 @@ ISO-3166 Alpha-2 country code
 
 ## Defined in
 
-[ivms/types.ts:6](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L6)
+[ivms/types.ts:6](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L6)

package/docs/ivms/types/type-aliases/ISODate.md

@@ -20,4 +20,4 @@ Format: YYYY-MM-DD
 
 ## Defined in
 
-[ivms/types.ts:14](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L14)
+[ivms/types.ts:14](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L14)

package/docs/ivms/types/type-aliases/IVMS101.md

@@ -38,4 +38,4 @@ IVMS101 definition
 
 ## Defined in
 
-[ivms/types.ts:375](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L375)
+[ivms/types.ts:375](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L375)

package/docs/ivms/types/type-aliases/IntermediaryVASP.md

@@ -27,4 +27,4 @@ The sequence number of this VASP in the transfer path
 
 ## Defined in
 
-[ivms/types.ts:289](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L289)
+[ivms/types.ts:289](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L289)

package/docs/ivms/types/type-aliases/LegalPerson.md

@@ -45,4 +45,4 @@ A distinct identifier used by governments to uniquely identify a legal person
 
 ## Defined in
 
-[ivms/types.ts:259](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/9a4530da9029429ae25456217bc5ecba197bd4fc/src/ivms/types.ts#L259)
+[ivms/types.ts:259](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/b96e93a9ac6866b8a0b255ba13ff93325934bfae/src/ivms/types.ts#L259)