@notabene/javascript-sdk 2.0.2 → 2.0.4-NEXT.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.
@@ -453,6 +477,10 @@ const options: TransactionOptions = {
     vasps: {
       addUnknown: true, // Allow users to add a missing VASP - Defaults to false
       onlyActive: true, // Only list active VASPs - Default false
+      searchable: [
+        VASPSearchControl.ALLOWED, // JS: 'allowed'
+        VASPSearchControl.PENDING // JS: 'pending'
+      ] // Control searches for VASPs - Defaults to undefined
     },
     hide: [ValidationSections.ASSET, ValidationSections.DESTINATION], // Don't show specific sections of component
   },

package/dist/notabene.cjs

@@ -1 +1 @@
-"use strict";var g=Object.defineProperty;var I=(e,t,r)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r;var o=(e,t,r)=>I(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.ASSET="asset",e.DESTINATION="destination",e.COUNTERPARTY="counterparty",e.AGENT="agent",e))(f||{}),h=(e=>(e.COMPLETE="complete",e.RESIZE="resize",e.RESULT="result",e.READY="ready",e.INVALID="invalid",e.ERROR="error",e.CANCEL="cancel",e))(h||{}),l=(e=>(e.UPDATE="update",e.REQUEST_RESPONSE="requestResponse",e))(l||{}),E=(e=>(e.PENDING="pending",e.FAILED="rejected",e.FLAGGED="flagged",e.VERIFIED="verified",e))(E||{}),p=(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))(p||{});class w{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 v{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 w,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.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 b(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 U(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 R{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=b({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 v(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=v;exports.HMType=l;exports.PersonType=m;exports.ProofStatus=E;exports.ProofTypes=p;exports.Status=u;exports.ValidationSections=f;exports.decodeFragmentToObject=U;exports.default=R;
+"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()})})}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)}popup(){const e=window.open(this.url,"_blank","popup=true");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

@@ -193,7 +193,6 @@ export declare type Cancel = {
  * - COMPLETE: Indicates a completed operation with response data
  * - RESIZE: Request to adjust component size/dimensions
  * - RESULT: Operation result notification
- * - READY: Component is initialized and ready
  * - INVALID: Validation failed with errors
  * - ERROR: Operation encountered an error
  * - CANCEL: Operation was cancelled
@@ -203,7 +202,6 @@ export declare const enum CMType {
     COMPLETE = "complete",
     RESIZE = "resize",
     RESULT = "result",
-    READY = "ready",
     INVALID = "invalid",
     ERROR = "error",
     CANCEL = "cancel"
@@ -229,7 +227,6 @@ export declare type Completed<T> = {
  * - Completed: Operation finished successfully with response data
  * - Cancel: User cancelled the operation
  * - Error: Operation failed with error message
- * - Ready: Component initialized and ready for use
  * - ResizeRequest: Component needs to adjust its dimensions
  * - InvalidValue: Validation failed with current partial value
  *
@@ -238,12 +235,11 @@ export declare type Completed<T> = {
  * @see {@link Completed} For successful completion message format
  * @see {@link Cancel} For cancellation message format
  * @see {@link Error} For error message format
- * @see {@link Ready} For ready message format
  * @see {@link ResizeRequest} For resize message format
  * @see {@link InvalidValue} For validation failure message format
  * @public
  */
-export declare type ComponentMessage<T> = Completed<T> | Cancel | Error_2 | Ready | ResizeRequest | InvalidValue<T>;
+export declare type ComponentMessage<T> = Completed<T> | Cancel | Error_2 | ResizeRequest | InvalidValue<T>;
 
 /**
  * Base interface for requests sent to SDK components
@@ -528,16 +524,27 @@ 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>>;
 }
 
 /**
  * Represents an error component message
  * @param message - Error message
+ * @param description - Description of the error message
+ * @param identifier - Identifier code of the error message
  * @public
  */
 declare type Error_2 = {
     type: CMType.ERROR;
     message: string;
+    description?: string;
+    identifier?: string;
 };
 export { Error_2 as Error }
 
@@ -1209,14 +1216,6 @@ export declare enum ProofTypes {
     Connect = "connect"
 }
 
-/**
- * Represents a ready component message
- * @public
- */
-export declare type Ready = {
-    type: CMType.READY;
-};
-
 declare type RequestID = UUID;
 
 /**
@@ -1284,10 +1283,10 @@ export declare enum Status {
  * @public
  */
 export declare type Theme = {
-    primaryColor: string;
-    secondaryColor: string;
-    fontFamily: string;
-    logo: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    fontFamily?: string;
+    logo?: string;
 };
 
 /**
@@ -1544,8 +1543,22 @@ export declare interface VASP extends Agent {
 export declare type VASPOptions = {
     addUnknown?: boolean;
     onlyActive?: boolean;
+    searchable?: VASPSearchControl[];
 };
 
+/**
+ * VASP Visibility Control representing allow/deny behaviour for VASP visibility
+ *
+ * @remarks
+ * - ALLOWED: Include VASPs you have explicitly allowed in the Notabene Network
+ * - PENDING: Include VASPs neither allowed nor denied
+ * @public
+ */
+export declare const enum VASPSearchControl {
+    ALLOWED = "allowed",
+    PENDING = "pending"
+}
+
 /**
  * A wallet agent acting on behalf of the counterparty
  * @public

package/dist/notabene.js

@@ -1,7 +1,7 @@
 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.ASSET = "asset", e.DESTINATION = "destination", e.COUNTERPARTY = "counterparty", e.AGENT = "agent", e))(p || {}), h = /* @__PURE__ */ ((e) => (e.COMPLETE = "complete", e.RESIZE = "resize", e.RESULT = "result", e.READY = "ready", e.INVALID = "invalid", e.ERROR = "error", e.CANCEL = "cancel", e))(h || {}), d = /* @__PURE__ */ ((e) => (e.UPDATE = "update", e.REQUEST_RESPONSE = "requestResponse", e))(d || {}), v = /* @__PURE__ */ ((e) => (e.PENDING = "pending", e.FAILED = "rejected", e.FLAGGED = "flagged", e.VERIFIED = "verified", e))(v || {}), g = /* @__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))(g || {});
+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());
@@ -16,8 +16,8 @@ class I {
    *
    * @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 I {
      * @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 I {
    * @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 I {
    *
    * @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 I {
    * 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 w {
+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 w {
     o(this, "iframe");
     o(this, "eventManager");
     o(this, "modal");
-    this._url = t, this._value = r, this._options = i, this.eventManager = new I(), 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 w {
    * @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.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,46 +142,48 @@ class w {
    * 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();
       });
     });
   }
@@ -189,36 +191,61 @@ class w {
    * 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, () => {
+    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)
+   */
+  popup() {
+    const e = window.open(this.url, "_blank", "popup=true");
+    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 U(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 b(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;
@@ -226,19 +253,19 @@ function b(e) {
     {}
   ) : {};
 }
-class A {
+class N {
   /**
    * Creates a new instance of the Notabene SDK
    *
    * @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,9 +277,9 @@ class A {
    * @returns component URL
    * @internal
    */
-  componentUrl(t, r, i, s) {
+  componentUrl(e, r, i, s) {
     const n = new URL(this.uxUrl);
-    n.pathname = t;
+    n.pathname = e;
     const a = U({
       authToken: this.authToken,
       value: r,
@@ -270,9 +297,9 @@ class A {
    * @returns A new EmbeddedComponent instance
    * @internal
    */
-  createComponent(t, r, i, s) {
-    return new w(
-      this.componentUrl(t, r, i, s),
+  createComponent(e, r, i, s) {
+    return new C(
+      this.componentUrl(e, r, i, s),
       r,
       i
     );
@@ -285,10 +312,10 @@ class A {
    * @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 +329,10 @@ class A {
    * @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 +346,10 @@ class A {
    * @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,13 +358,14 @@ class A {
 export {
   u as AgentType,
   h as CMType,
-  w as EmbeddedComponent,
+  C as EmbeddedComponent,
   d as HMType,
   E as PersonType,
-  v as ProofStatus,
-  g as ProofTypes,
+  g as ProofStatus,
+  w as ProofTypes,
   f as Status,
-  p as ValidationSections,
+  p as VASPSearchControl,
+  v as ValidationSections,
   b as decodeFragmentToObject,
-  A as default
+  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.
@@ -457,6 +481,10 @@ const options: TransactionOptions = {
     vasps: {
       addUnknown: true, // Allow users to add a missing VASP - Defaults to false
       onlyActive: true, // Only list active VASPs - Default false
+      searchable: [
+        VASPSearchControl.ALLOWED, // JS: 'allowed'
+        VASPSearchControl.PENDING // JS: 'pending'
+      ] // Control searches for VASPs - Defaults to undefined
     },
     hide: [ValidationSections.ASSET, ValidationSections.DESTINATION], // Don't show specific sections of component
   },

package/docs/_media/TransactionOptions.md

@@ -16,7 +16,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:754](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L754)
+[types.ts:768](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L768)
 
 ***
 
@@ -26,7 +26,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:755](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L755)
+[types.ts:769](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L769)
 
 ***
 
@@ -36,7 +36,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:756](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L756)
+[types.ts:770](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L770)
 
 ***
 
@@ -46,7 +46,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:758](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L758)
+[types.ts:772](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L772)
 
 ***
 
@@ -80,7 +80,7 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:745](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L745)
+[types.ts:759](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L759)
 
 ***
 
@@ -90,4 +90,4 @@ Configuration options for Transaction components
 
 #### Defined in
 
-[types.ts:757](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f75feb1dd5dd91003bcc9aa8429d05c94c878b06/src/types.ts#L757)
+[types.ts:771](https://gitlab.com/notabene/open-source/javascript-sdk/-/blob/f4e73b4e984837ed8a53f91590a8d1276a1aa25a/src/types.ts#L771)