@cowprotocol/widget-lib 2.0.2 → 2.1.0

package/cowSwapWidget.d.ts

@@ -12,7 +12,7 @@ export interface CowSwapWidgetHandler {
 /**
  * Generates and injects a CoW Swap Widget into the provided container.
  * @param container - The HTML element to inject the widget into.
- * @param params - Parameters for configuring the widget.
+ * @param props - Parameters for configuring the widget.
  * @returns A callback function to update the widget with new settings.
  */
 export declare function createCowSwapWidget(container: HTMLElement, props: CowSwapWidgetProps): CowSwapWidgetHandler;

package/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("@cowprotocol/iframe-transport"),W=require("@cowprotocol/events");var c=(e=>(e.ACTIVATE="ACTIVATE",e.UPDATE_HEIGHT="UPDATE_HEIGHT",e.SET_FULL_HEIGHT="SET_FULL_HEIGHT",e.EMIT_COW_EVENT="EMIT_COW_EVENT",e.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",e.INTERCEPT_WINDOW_OPEN="INTERCEPT_WINDOW_OPEN",e))(c||{}),E=(e=>(e.UPDATE_PARAMS="UPDATE_PARAMS",e.UPDATE_APP_DATA="UPDATE_APP_DATA",e.PROVIDER_RPC_RESPONSE="PROVIDER_RPC_RESPONSE",e.PROVIDER_ON_EVENT="PROVIDER_ON_EVENT",e))(E||{}),T=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e.YIELD="yield",e))(T||{});const O=["primary","background","paper","text","danger","warning","alert","info","success"],r=new I.IframeTransport("cowSwapWidget");class R{constructor(t,i=[]){this.contentWindow=t,this.updateListeners(i),this.widgetListener=r.listenToMessageFromWindow(this.contentWindow,c.EMIT_COW_EVENT,n=>this.eventEmitter.emit(n.event,n.payload))}eventEmitter=new W.SimpleCowEventEmitter;listeners=[];widgetListener;stopListeningIframe(){r.stopListeningWindowListener(this.contentWindow,this.widgetListener)}updateListeners(t){for(const i of this.listeners)this.eventEmitter.off(i);this.listeners=t||[];for(const i of this.listeners)this.eventEmitter.on(i)}}class D{constructor(t,i){this.appWindow=t,this.iframeWidow=i,this.forwardSdkMessage=n=>{b(n.data)&&(typeof window<"u"&&n.origin===window.location.origin||(y(n.data)?this.appWindow.parent.postMessage(n.data,"*"):M(n.data)&&this.iframeWidow.postMessage(n.data,"*")))},this.startListening()}forwardSdkMessage;startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}}function b(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function y(e){return"method"in e&&typeof e.method=="string"&&"params"in e&&"env"in e&&typeof e.env=="object"&&e.env!==null&&"sdkVersion"in e.env}function M(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}function A(e){return!!(e&&typeof e=="object")}const g="_";function N(e){const t=typeof e.baseUrl=="string"?e.baseUrl:"https://swap.cow.fi",i=v(e);return t+"/#"+i+"?"+C(e)}function v(e){const{chainId:t=1,sell:i,buy:n,tradeType:o=T.SWAP}=e,s=[i?.asset||g,n?.asset||g].map(encodeURIComponent).join("/");return`/${t}/widget/${o}/${s}`}function C(e){const t=new URLSearchParams;return V(H(U(t,e),e),e)}function U(e,t){const{sell:i,buy:n}=t;return i?.amount&&e.append("sellAmount",i.amount),n?.amount&&e.append("buyAmount",n.amount),e}function H(e,t){const i=t.theme;return i?(A(i)?(e.append("palette",encodeURIComponent(JSON.stringify(i))),e.append("theme",i.baseTheme)):(e.append("palette","null"),e.append("theme",i)),e):(e.append("palette","null"),e)}function V(e,t){return t.targetChainId&&e.append("targetChainId",t.targetChainId.toString()),e}const S="640px",F="450px",k=20,j={updateParams:()=>{},updateListeners:()=>{},updateProvider:()=>{},destroy:()=>{}};function G(e,t){const{params:i,provider:n,listeners:o}=t;let s=n,l=i;if(typeof window>"u")return j;const a=x(i);e.innerHTML="",e.appendChild(a);const{contentWindow:u}=a;if(!u)throw console.error("Iframe does not contain a window",a),new Error("Iframe does not contain a window!");const w=[];w.push(Q(u,i.appCode)),w.push(...B(a,i.height,i.maxHeight)),w.push($());const P=new R(window,o);let h=m(u,null,s);a.addEventListener("load",()=>_(u,l,s));const L=new D(window,u);return{updateParams:d=>{l=d,_(u,l,s)},updateListeners:d=>P.updateListeners(d),updateProvider:d=>{s=d,h=m(u,h,d)},destroy:()=>{h.disconnect(),P.stopListeningIframe(),w.forEach(d=>window.removeEventListener("message",d)),L.stopListening(),e.removeChild(a)}}}function m(e,t,i){t&&t.disconnect();const n=t||new I.IframeRpcProviderBridge(e);return i&&n.onConnect(i),n}function x(e){const{width:t=F,height:i=S}=e,n=document.createElement("iframe");return n.src=N(e),n.width=t,n.height=i,n.style.border="0",n.allow="clipboard-read; clipboard-write",n}function _(e,t,i){const n=!!i,o=v(t),s=C(t).toString(),{theme:l,...a}=t;r.postMessageToWindow(e,E.UPDATE_PARAMS,{urlParams:{pathname:o,search:s},appParams:a,hasProvider:n})}function Q(e,t){return r.listenToMessageFromWindow(window,c.ACTIVATE,()=>{r.postMessageToWindow(e,E.UPDATE_APP_DATA,{metaData:t?{appCode:t}:void 0})})}function $(){return r.listenToMessageFromWindow(window,c.INTERCEPT_WINDOW_OPEN,({href:e,rel:t,target:i})=>{const n=e.toString();if(!n.startsWith("http")&&n.match(/^[a-zA-Z0-9]+:\/\//)){window.open(n,i,t);return}})}function B(e,t=S,i){return[r.listenToMessageFromWindow(window,c.UPDATE_HEIGHT,n=>{const o=n.height?n.height+k:void 0;e.style.height=o?`${i?Math.min(o,i):o}px`:t}),r.listenToMessageFromWindow(window,c.SET_FULL_HEIGHT,({isUpToSmall:n})=>{e.style.height=n?t:`${i||document.body.offsetHeight}px`})]}const Y=Object.values(T);function z(e,t,i){if(p(e)){const n=e[i];return f(n)?n[t]:n}if(f(e)){const n=e[t];return p(n)?n[i]:n}return e}function p(e){return typeof e!="object"?!1:Object.keys(e).every(t=>Y.includes(t))}const J=/^\d+$/;function f(e){return typeof e!="object"?!1:Object.keys(e).every(t=>J.test(t))}function K(e){return p(e)?Object.values(e).flatMap(t=>f(t)?Object.values(t):[t]):f(e)?Object.values(e).flatMap(t=>p(t)?Object.values(t):[t]):[e]}exports.TradeType=T;exports.WIDGET_PALETTE_COLORS=O;exports.WidgetMethodsEmit=c;exports.WidgetMethodsListen=E;exports.createCowSwapWidget=G;exports.isCowSwapWidgetPalette=A;exports.isPerNetworkConfig=f;exports.isPerTradeTypeConfig=p;exports.resolveFlexibleConfig=z;exports.resolveFlexibleConfigValues=K;exports.widgetIframeTransport=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("@cowprotocol/iframe-transport"),W=require("@cowprotocol/events");var E=(e=>(e.ACTIVATE="ACTIVATE",e.UPDATE_HEIGHT="UPDATE_HEIGHT",e.SET_FULL_HEIGHT="SET_FULL_HEIGHT",e.EMIT_COW_EVENT="EMIT_COW_EVENT",e.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",e.INTERCEPT_WINDOW_OPEN="INTERCEPT_WINDOW_OPEN",e.PROCESS_HOOK="PROCESS_HOOK",e))(E||{}),w=(e=>(e.UPDATE_PARAMS="UPDATE_PARAMS",e.UPDATE_APP_DATA="UPDATE_APP_DATA",e.PROVIDER_RPC_RESPONSE="PROVIDER_RPC_RESPONSE",e.PROVIDER_ON_EVENT="PROVIDER_ON_EVENT",e.HOOK_RESULT="HOOK_RESULT",e))(w||{}),c=(e=>(e.ON_BEFORE_APPROVAL="ON_BEFORE_APPROVAL",e.ON_BEFORE_TRADE="ON_BEFORE_TRADE",e.ON_BEFORE_WRAP_UNWRAP="ON_BEFORE_WRAP_UNWRAP",e.ON_BEFORE_ORDER_CANCEL="ON_BEFORE_ORDER_CANCEL",e.ON_BEFORE_ORDERS_CANCEL="ON_BEFORE_ORDERS_CANCEL",e))(c||{}),T=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e.YIELD="yield",e))(T||{});const D=["primary","background","paper","text","danger","warning","alert","info","success"],i=new m.IframeTransport("cowSwapWidget");class H{constructor(t,r=[]){this.contentWindow=t,this.updateListeners(r),this.widgetListener=i.listenToMessageFromWindow(this.contentWindow,E.EMIT_COW_EVENT,n=>this.eventEmitter.emit(n.event,n.payload))}eventEmitter=new W.SimpleCowEventEmitter;listeners=[];widgetListener;stopListeningIframe(){i.stopListeningWindowListener(this.contentWindow,this.widgetListener)}updateListeners(t){for(const r of this.listeners)this.eventEmitter.off(r);this.listeners=t||[];for(const r of this.listeners)this.eventEmitter.on(r)}}class y{constructor(t,r){this.appWindow=t,this.iframeWidow=r,this.forwardSdkMessage=n=>{F(n.data)&&(typeof window<"u"&&n.origin===window.location.origin||(U(n.data)?this.appWindow.parent.postMessage(n.data,"*"):b(n.data)&&this.iframeWidow.postMessage(n.data,"*")))},this.startListening()}forwardSdkMessage;startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}}function F(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function U(e){return"method"in e&&typeof e.method=="string"&&"params"in e&&"env"in e&&typeof e.env=="object"&&e.env!==null&&"sdkVersion"in e.env}function b(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}function S(e){return!!(e&&typeof e=="object")}const h="_";function B(e){const t=typeof e.baseUrl=="string"?e.baseUrl:"https://swap.cow.fi",r=L(e);return t+"/#"+r+"?"+I(e)}function L(e){const{chainId:t=1,sell:r,buy:n,tradeType:s=T.SWAP}=e,a=[r?.asset||h,n?.asset||h].map(encodeURIComponent).join("/");return`/${t}/widget/${s}/${a}`}function I(e){const t=new URLSearchParams;return j(k(V(M(t,e),e),e),e)}function M(e,t){const{sell:r,buy:n}=t;return r?.amount&&e.append("sellAmount",r.amount),n?.amount&&e.append("buyAmount",n.amount),e}function V(e,t){const r=t.theme;return r?(S(r)?(e.append("palette",encodeURIComponent(JSON.stringify(r))),e.append("theme",r.baseTheme)):(e.append("palette","null"),e.append("theme",r)),e):(e.append("palette","null"),e)}function k(e,t){return t.targetChainId&&e.append("targetChainId",t.targetChainId.toString()),e}function j(e,t){return t.locale&&e.append("lng",t.locale),e}const N="640px",G="450px",x=20,K={updateParams:()=>{},updateListeners:()=>{},updateProvider:()=>{},destroy:()=>{}};function Q(e,t){const{params:r,provider:n,listeners:s}=t;let a=n,l=r;if(typeof window>"u")return K;const u=$(r);e.innerHTML="",e.appendChild(u);const{contentWindow:o}=u;if(!o)throw console.error("Iframe does not contain a window",u),new Error("Iframe does not contain a window!");const p=[];p.push(Y(o,r.appCode)),p.push(...J(u,r.height,r.maxHeight)),p.push(z());let O=null;function P(){o&&(O&&window.removeEventListener("message",O),O=q(o,l.hooks),p.push(O))}P();const A=new H(window,s);let R=C(o,null,a);u.addEventListener("load",()=>{g(o,l,a)});const v=new y(window,o);return{updateParams:d=>{l=d,g(o,l,a),P()},updateListeners:d=>A.updateListeners(d),updateProvider:d=>{a=d,R=C(o,R,d)},destroy:()=>{R.disconnect(),A.stopListeningIframe(),p.forEach(d=>window.removeEventListener("message",d)),v.stopListening(),e.removeChild(u)}}}function C(e,t,r){t&&t.disconnect();const n=t||new m.IframeRpcProviderBridge(e);return r&&n.onConnect(r),n}function $(e){const{width:t=G,height:r=N}=e,n=document.createElement("iframe");return n.src=B(e),n.width=t,n.height=r,n.style.border="0",n.allow="clipboard-read; clipboard-write",n}function g(e,t,r){const n=!!r,s=L(t),a=I(t).toString(),{theme:l,hooks:u,...o}=t;i.postMessageToWindow(e,w.UPDATE_PARAMS,{urlParams:{pathname:s,search:a},appParams:o,hasProvider:n})}function Y(e,t){return i.listenToMessageFromWindow(window,E.ACTIVATE,()=>{i.postMessageToWindow(e,w.UPDATE_APP_DATA,{metaData:t?{appCode:t}:void 0})})}function z(){return i.listenToMessageFromWindow(window,E.INTERCEPT_WINDOW_OPEN,({href:e,rel:t,target:r})=>{const n=e.toString();if(!n.startsWith("http")&&n.match(/^[a-zA-Z0-9]+:\/\//)){window.open(n,r,t);return}})}function J(e,t=N,r){return[i.listenToMessageFromWindow(window,E.UPDATE_HEIGHT,n=>{const s=n.height?n.height+x:void 0;e.style.height=s?`${r?Math.min(s,r):s}px`:t}),i.listenToMessageFromWindow(window,E.SET_FULL_HEIGHT,({isUpToSmall:n})=>{e.style.height=n?t:`${r||document.body.offsetHeight}px`})]}const X={[c.ON_BEFORE_APPROVAL]:(e,t)=>t?.onBeforeApproval?t.onBeforeApproval(e):!0,[c.ON_BEFORE_TRADE]:(e,t)=>t?.onBeforeTrade?t.onBeforeTrade(e):!0,[c.ON_BEFORE_WRAP_UNWRAP]:(e,t)=>t?.onBeforeWrapOrUnwrap?t.onBeforeWrapOrUnwrap(e):!0,[c.ON_BEFORE_ORDER_CANCEL]:(e,t)=>t?.onBeforeOrderCancel?t.onBeforeOrderCancel(e):!0,[c.ON_BEFORE_ORDERS_CANCEL]:(e,t)=>t?.onBeforeOrdersCancel?t.onBeforeOrdersCancel(e):!0};function Z(e,t){return X[e.event](e.payload,t)}function q(e,t){return i.listenToMessageFromWindow(window,E.PROCESS_HOOK,async r=>{let n=!1;try{n=await Z(r,t)}catch{}i.postMessageToWindow(e,w.HOOK_RESULT,{id:r.id,result:n})})}const ee=Object.values(T);function te(e,t,r){if(f(e)){const n=e[r];return _(n)?n[t]:n}if(_(e)){const n=e[t];return f(n)?n[r]:n}return e}function f(e){return typeof e!="object"?!1:Object.keys(e).every(t=>ee.includes(t))}const ne=/^\d+$/;function _(e){return typeof e!="object"?!1:Object.keys(e).every(t=>ne.test(t))}function re(e){return f(e)?Object.values(e).flatMap(t=>_(t)?Object.values(t):[t]):_(e)?Object.values(e).flatMap(t=>f(t)?Object.values(t):[t]):[e]}exports.TradeType=T;exports.WIDGET_PALETTE_COLORS=D;exports.WidgetHookEvents=c;exports.WidgetMethodsEmit=E;exports.WidgetMethodsListen=w;exports.createCowSwapWidget=Q;exports.isCowSwapWidgetPalette=S;exports.isPerNetworkConfig=_;exports.isPerTradeTypeConfig=f;exports.resolveFlexibleConfig=te;exports.resolveFlexibleConfigValues=re;exports.widgetIframeTransport=i;

package/index.js

@@ -1,29 +1,29 @@
-import { IframeTransport as C, IframeRpcProviderBridge as L } from "@cowprotocol/iframe-transport";
-import { SimpleCowEventEmitter as R } from "@cowprotocol/events";
-var u = /* @__PURE__ */ ((e) => (e.ACTIVATE = "ACTIVATE", e.UPDATE_HEIGHT = "UPDATE_HEIGHT", e.SET_FULL_HEIGHT = "SET_FULL_HEIGHT", e.EMIT_COW_EVENT = "EMIT_COW_EVENT", e.PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST", e.INTERCEPT_WINDOW_OPEN = "INTERCEPT_WINDOW_OPEN", e))(u || {}), T = /* @__PURE__ */ ((e) => (e.UPDATE_PARAMS = "UPDATE_PARAMS", e.UPDATE_APP_DATA = "UPDATE_APP_DATA", e.PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE", e.PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT", e))(T || {}), h = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(h || {});
-const K = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], d = new C("cowSwapWidget");
-class D {
-  constructor(t, i = []) {
-    this.contentWindow = t, this.updateListeners(i), this.widgetListener = d.listenToMessageFromWindow(this.contentWindow, u.EMIT_COW_EVENT, (n) => this.eventEmitter.emit(n.event, n.payload));
+import { IframeTransport as N, IframeRpcProviderBridge as v } from "@cowprotocol/iframe-transport";
+import { SimpleCowEventEmitter as D } from "@cowprotocol/events";
+var u = /* @__PURE__ */ ((e) => (e.ACTIVATE = "ACTIVATE", e.UPDATE_HEIGHT = "UPDATE_HEIGHT", e.SET_FULL_HEIGHT = "SET_FULL_HEIGHT", e.EMIT_COW_EVENT = "EMIT_COW_EVENT", e.PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST", e.INTERCEPT_WINDOW_OPEN = "INTERCEPT_WINDOW_OPEN", e.PROCESS_HOOK = "PROCESS_HOOK", e))(u || {}), w = /* @__PURE__ */ ((e) => (e.UPDATE_PARAMS = "UPDATE_PARAMS", e.UPDATE_APP_DATA = "UPDATE_APP_DATA", e.PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE", e.PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT", e.HOOK_RESULT = "HOOK_RESULT", e))(w || {}), c = /* @__PURE__ */ ((e) => (e.ON_BEFORE_APPROVAL = "ON_BEFORE_APPROVAL", e.ON_BEFORE_TRADE = "ON_BEFORE_TRADE", e.ON_BEFORE_WRAP_UNWRAP = "ON_BEFORE_WRAP_UNWRAP", e.ON_BEFORE_ORDER_CANCEL = "ON_BEFORE_ORDER_CANCEL", e.ON_BEFORE_ORDERS_CANCEL = "ON_BEFORE_ORDERS_CANCEL", e))(c || {}), R = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(R || {});
+const re = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], i = new N("cowSwapWidget");
+class W {
+  constructor(t, r = []) {
+    this.contentWindow = t, this.updateListeners(r), this.widgetListener = i.listenToMessageFromWindow(this.contentWindow, u.EMIT_COW_EVENT, (n) => this.eventEmitter.emit(n.event, n.payload));
   }
-  eventEmitter = new R();
+  eventEmitter = new D();
   listeners = [];
   widgetListener;
   stopListeningIframe() {
-    d.stopListeningWindowListener(this.contentWindow, this.widgetListener);
+    i.stopListeningWindowListener(this.contentWindow, this.widgetListener);
   }
   updateListeners(t) {
-    for (const i of this.listeners)
-      this.eventEmitter.off(i);
+    for (const r of this.listeners)
+      this.eventEmitter.off(r);
     this.listeners = t || [];
-    for (const i of this.listeners)
-      this.eventEmitter.on(i);
+    for (const r of this.listeners)
+      this.eventEmitter.on(r);
   }
 }
-class O {
-  constructor(t, i) {
-    this.appWindow = t, this.iframeWidow = i, this.forwardSdkMessage = (n) => {
-      W(n.data) && (typeof window < "u" && n.origin === window.location.origin || (b(n.data) ? this.appWindow.parent.postMessage(n.data, "*") : y(n.data) && this.iframeWidow.postMessage(n.data, "*")));
+class H {
+  constructor(t, r) {
+    this.appWindow = t, this.iframeWidow = r, this.forwardSdkMessage = (n) => {
+      U(n.data) && (typeof window < "u" && n.origin === window.location.origin || (B(n.data) ? this.appWindow.parent.postMessage(n.data, "*") : F(n.data) && this.iframeWidow.postMessage(n.data, "*")));
     }, this.startListening();
   }
   forwardSdkMessage;
@@ -34,51 +34,54 @@ class O {
     this.appWindow.removeEventListener("message", this.forwardSdkMessage);
   }
 }
-function W(e) {
+function U(e) {
   return typeof e == "object" && e !== null && "id" in e && typeof e.id == "string";
 }
-function b(e) {
+function B(e) {
   return "method" in e && typeof e.method == "string" && "params" in e && "env" in e && typeof e.env == "object" && e.env !== null && "sdkVersion" in e.env;
 }
-function y(e) {
+function F(e) {
   return "success" in e && typeof e.success == "boolean" && "version" in e && typeof e.version == "string";
 }
-function U(e) {
+function y(e) {
   return !!(e && typeof e == "object");
 }
-const m = "_";
-function H(e) {
-  const t = typeof e.baseUrl == "string" ? e.baseUrl : "https://swap.cow.fi", i = A(e);
-  return t + "/#" + i + "?" + g(e);
+const h = "_";
+function b(e) {
+  const t = typeof e.baseUrl == "string" ? e.baseUrl : "https://swap.cow.fi", r = L(e);
+  return t + "/#" + r + "?" + S(e);
 }
-function A(e) {
+function L(e) {
   const {
     chainId: t = 1,
-    sell: i,
+    sell: r,
     buy: n,
-    tradeType: o = h.SWAP
-  } = e, r = [i?.asset || m, n?.asset || m].map(encodeURIComponent).join("/");
-  return `/${t}/widget/${o}/${r}`;
+    tradeType: s = R.SWAP
+  } = e, a = [r?.asset || h, n?.asset || h].map(encodeURIComponent).join("/");
+  return `/${t}/widget/${s}/${a}`;
 }
-function g(e) {
+function S(e) {
   const t = new URLSearchParams();
-  return V(M(N(t, e), e), e);
+  return j(k(V(M(t, e), e), e), e);
 }
-function N(e, t) {
+function M(e, t) {
   const {
-    sell: i,
+    sell: r,
     buy: n
   } = t;
-  return i?.amount && e.append("sellAmount", i.amount), n?.amount && e.append("buyAmount", n.amount), e;
-}
-function M(e, t) {
-  const i = t.theme;
-  return i ? (U(i) ? (e.append("palette", encodeURIComponent(JSON.stringify(i))), e.append("theme", i.baseTheme)) : (e.append("palette", "null"), e.append("theme", i)), e) : (e.append("palette", "null"), e);
+  return r?.amount && e.append("sellAmount", r.amount), n?.amount && e.append("buyAmount", n.amount), e;
 }
 function V(e, t) {
+  const r = t.theme;
+  return r ? (y(r) ? (e.append("palette", encodeURIComponent(JSON.stringify(r))), e.append("theme", r.baseTheme)) : (e.append("palette", "null"), e.append("theme", r)), e) : (e.append("palette", "null"), e);
+}
+function k(e, t) {
   return t.targetChainId && e.append("targetChainId", t.targetChainId.toString()), e;
 }
-const v = "640px", F = "450px", k = 20, j = {
+function j(e, t) {
+  return t.locale && e.append("lng", t.locale), e;
+}
+const I = "640px", G = "450px", x = 20, K = {
   updateParams: () => {
   },
   updateListeners: () => {
@@ -88,130 +91,162 @@ const v = "640px", F = "450px", k = 20, j = {
   destroy: () => {
   }
 };
-function X(e, t) {
+function oe(e, t) {
   const {
-    params: i,
+    params: r,
     provider: n,
-    listeners: o
+    listeners: s
   } = t;
-  let r = n, p = i;
-  if (typeof window > "u") return j;
-  const s = G(i);
-  e.innerHTML = "", e.appendChild(s);
+  let a = n, p = r;
+  if (typeof window > "u") return K;
+  const E = Q(r);
+  e.innerHTML = "", e.appendChild(E);
   const {
-    contentWindow: c
-  } = s;
-  if (!c)
-    throw console.error("Iframe does not contain a window", s), new Error("Iframe does not contain a window!");
+    contentWindow: o
+  } = E;
+  if (!o)
+    throw console.error("Iframe does not contain a window", E), new Error("Iframe does not contain a window!");
   const f = [];
-  f.push(x(c, i.appCode)), f.push(...$(s, i.height, i.maxHeight)), f.push(Q());
-  const P = new D(window, o);
-  let w = _(c, null, r);
-  s.addEventListener("load", () => I(c, p, r));
-  const S = new O(window, c);
+  f.push($(o, r.appCode)), f.push(...z(E, r.height, r.maxHeight)), f.push(Y());
+  let l = null;
+  function P() {
+    o && (l && window.removeEventListener("message", l), l = Z(o, p.hooks), f.push(l));
+  }
+  P();
+  const A = new W(window, s);
+  let T = m(o, null, a);
+  E.addEventListener("load", () => {
+    C(o, p, a);
+  });
+  const g = new H(window, o);
   return {
-    updateParams: (a) => {
-      p = a, I(c, p, r);
+    updateParams: (d) => {
+      p = d, C(o, p, a), P();
     },
-    updateListeners: (a) => P.updateListeners(a),
-    updateProvider: (a) => {
-      r = a, w = _(c, w, a);
+    updateListeners: (d) => A.updateListeners(d),
+    updateProvider: (d) => {
+      a = d, T = m(o, T, d);
     },
     destroy: () => {
-      w.disconnect(), P.stopListeningIframe(), f.forEach((a) => window.removeEventListener("message", a)), S.stopListening(), e.removeChild(s);
+      T.disconnect(), A.stopListeningIframe(), f.forEach((d) => window.removeEventListener("message", d)), g.stopListening(), e.removeChild(E);
     }
   };
 }
-function _(e, t, i) {
+function m(e, t, r) {
   t && t.disconnect();
-  const n = t || new L(e);
-  return i && n.onConnect(i), n;
+  const n = t || new v(e);
+  return r && n.onConnect(r), n;
 }
-function G(e) {
+function Q(e) {
   const {
-    width: t = F,
-    height: i = v
+    width: t = G,
+    height: r = I
   } = e, n = document.createElement("iframe");
-  return n.src = H(e), n.width = t, n.height = i, n.style.border = "0", n.allow = "clipboard-read; clipboard-write", n;
+  return n.src = b(e), n.width = t, n.height = r, n.style.border = "0", n.allow = "clipboard-read; clipboard-write", n;
 }
-function I(e, t, i) {
-  const n = !!i, o = A(t), r = g(t).toString(), {
+function C(e, t, r) {
+  const n = !!r, s = L(t), a = S(t).toString(), {
     theme: p,
-    ...s
+    hooks: E,
+    ...o
   } = t;
-  d.postMessageToWindow(e, T.UPDATE_PARAMS, {
+  i.postMessageToWindow(e, w.UPDATE_PARAMS, {
     urlParams: {
-      pathname: o,
-      search: r
+      pathname: s,
+      search: a
     },
-    appParams: s,
+    appParams: o,
     hasProvider: n
   });
 }
-function x(e, t) {
-  return d.listenToMessageFromWindow(window, u.ACTIVATE, () => {
-    d.postMessageToWindow(e, T.UPDATE_APP_DATA, {
+function $(e, t) {
+  return i.listenToMessageFromWindow(window, u.ACTIVATE, () => {
+    i.postMessageToWindow(e, w.UPDATE_APP_DATA, {
       metaData: t ? {
         appCode: t
       } : void 0
     });
   });
 }
-function Q() {
-  return d.listenToMessageFromWindow(window, u.INTERCEPT_WINDOW_OPEN, ({
+function Y() {
+  return i.listenToMessageFromWindow(window, u.INTERCEPT_WINDOW_OPEN, ({
     href: e,
     rel: t,
-    target: i
+    target: r
   }) => {
     const n = e.toString();
     if (!n.startsWith("http") && n.match(/^[a-zA-Z0-9]+:\/\//)) {
-      window.open(n, i, t);
+      window.open(n, r, t);
       return;
     }
   });
 }
-function $(e, t = v, i) {
-  return [d.listenToMessageFromWindow(window, u.UPDATE_HEIGHT, (n) => {
-    const o = n.height ? n.height + k : void 0;
-    e.style.height = o ? `${i ? Math.min(o, i) : o}px` : t;
-  }), d.listenToMessageFromWindow(window, u.SET_FULL_HEIGHT, ({
+function z(e, t = I, r) {
+  return [i.listenToMessageFromWindow(window, u.UPDATE_HEIGHT, (n) => {
+    const s = n.height ? n.height + x : void 0;
+    e.style.height = s ? `${r ? Math.min(s, r) : s}px` : t;
+  }), i.listenToMessageFromWindow(window, u.SET_FULL_HEIGHT, ({
     isUpToSmall: n
   }) => {
-    e.style.height = n ? t : `${i || document.body.offsetHeight}px`;
+    e.style.height = n ? t : `${r || document.body.offsetHeight}px`;
   })];
 }
-const B = Object.values(h);
-function Z(e, t, i) {
-  if (l(e)) {
-    const n = e[i];
-    return E(n) ? n[t] : n;
+const J = {
+  [c.ON_BEFORE_APPROVAL]: (e, t) => t?.onBeforeApproval ? t.onBeforeApproval(e) : !0,
+  [c.ON_BEFORE_TRADE]: (e, t) => t?.onBeforeTrade ? t.onBeforeTrade(e) : !0,
+  [c.ON_BEFORE_WRAP_UNWRAP]: (e, t) => t?.onBeforeWrapOrUnwrap ? t.onBeforeWrapOrUnwrap(e) : !0,
+  [c.ON_BEFORE_ORDER_CANCEL]: (e, t) => t?.onBeforeOrderCancel ? t.onBeforeOrderCancel(e) : !0,
+  [c.ON_BEFORE_ORDERS_CANCEL]: (e, t) => t?.onBeforeOrdersCancel ? t.onBeforeOrdersCancel(e) : !0
+};
+function X(e, t) {
+  return J[e.event](e.payload, t);
+}
+function Z(e, t) {
+  return i.listenToMessageFromWindow(window, u.PROCESS_HOOK, async (r) => {
+    let n = !1;
+    try {
+      n = await X(r, t);
+    } catch {
+    }
+    i.postMessageToWindow(e, w.HOOK_RESULT, {
+      id: r.id,
+      result: n
+    });
+  });
+}
+const q = Object.values(R);
+function ie(e, t, r) {
+  if (_(e)) {
+    const n = e[r];
+    return O(n) ? n[t] : n;
   }
-  if (E(e)) {
+  if (O(e)) {
     const n = e[t];
-    return l(n) ? n[i] : n;
+    return _(n) ? n[r] : n;
   }
   return e;
 }
-function l(e) {
-  return typeof e != "object" ? !1 : Object.keys(e).every((t) => B.includes(t));
+function _(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => q.includes(t));
 }
-const Y = /^\d+$/;
-function E(e) {
-  return typeof e != "object" ? !1 : Object.keys(e).every((t) => Y.test(t));
+const ee = /^\d+$/;
+function O(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => ee.test(t));
 }
-function q(e) {
-  return l(e) ? Object.values(e).flatMap((t) => E(t) ? Object.values(t) : [t]) : E(e) ? Object.values(e).flatMap((t) => l(t) ? Object.values(t) : [t]) : [e];
+function se(e) {
+  return _(e) ? Object.values(e).flatMap((t) => O(t) ? Object.values(t) : [t]) : O(e) ? Object.values(e).flatMap((t) => _(t) ? Object.values(t) : [t]) : [e];
 }
 export {
-  h as TradeType,
-  K as WIDGET_PALETTE_COLORS,
+  R as TradeType,
+  re as WIDGET_PALETTE_COLORS,
+  c as WidgetHookEvents,
   u as WidgetMethodsEmit,
-  T as WidgetMethodsListen,
-  X as createCowSwapWidget,
-  U as isCowSwapWidgetPalette,
-  E as isPerNetworkConfig,
-  l as isPerTradeTypeConfig,
-  Z as resolveFlexibleConfig,
-  q as resolveFlexibleConfigValues,
-  d as widgetIframeTransport
+  w as WidgetMethodsListen,
+  oe as createCowSwapWidget,
+  y as isCowSwapWidgetPalette,
+  O as isPerNetworkConfig,
+  _ as isPerTradeTypeConfig,
+  ie as resolveFlexibleConfig,
+  se as resolveFlexibleConfigValues,
+  i as widgetIframeTransport
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@cowprotocol/cow-sdk": "8.0.3",
-    "@cowprotocol/events": "^4.0.2",
+    "@cowprotocol/events": "^4.1.0",
     "@cowprotocol/iframe-transport": "^2.0.10"
   },
   "exports": {

package/types.d.ts

@@ -1,6 +1,7 @@
-import { SupportedChainId } from '@cowprotocol/cow-sdk';
-import { CowWidgetEventListeners, CowWidgetEventPayloadMap, CowWidgetEvents } from '@cowprotocol/events';
+import { EnrichedOrder, SupportedChainId } from '@cowprotocol/cow-sdk';
+import { CowWidgetEventListeners, CowWidgetEventPayloadMap, CowWidgetEvents, OnTradeParamsPayload } from '@cowprotocol/events';
 export type { SupportedChainId } from '@cowprotocol/cow-sdk';
+export type { OnTradeParamsPayload } from '@cowprotocol/events';
 export type PerTradeTypeConfig<T> = Partial<Record<TradeType, T>>;
 export type PerNetworkConfig<T> = Partial<Record<SupportedChainId, T>>;
 export type FlexibleConfig<T> = T | PerNetworkConfig<T> | PerTradeTypeConfig<T> | PerTradeTypeConfig<PerNetworkConfig<T>> | PerNetworkConfig<PerTradeTypeConfig<T>>;
@@ -10,13 +11,30 @@ export declare enum WidgetMethodsEmit {
     SET_FULL_HEIGHT = "SET_FULL_HEIGHT",
     EMIT_COW_EVENT = "EMIT_COW_EVENT",
     PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST",
-    INTERCEPT_WINDOW_OPEN = "INTERCEPT_WINDOW_OPEN"
+    INTERCEPT_WINDOW_OPEN = "INTERCEPT_WINDOW_OPEN",
+    PROCESS_HOOK = "PROCESS_HOOK"
 }
 export declare enum WidgetMethodsListen {
     UPDATE_PARAMS = "UPDATE_PARAMS",
     UPDATE_APP_DATA = "UPDATE_APP_DATA",
     PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE",
-    PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT"
+    PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT",
+    HOOK_RESULT = "HOOK_RESULT"
+}
+export declare enum WidgetHookEvents {
+    ON_BEFORE_APPROVAL = "ON_BEFORE_APPROVAL",
+    ON_BEFORE_TRADE = "ON_BEFORE_TRADE",
+    ON_BEFORE_WRAP_UNWRAP = "ON_BEFORE_WRAP_UNWRAP",
+    ON_BEFORE_ORDER_CANCEL = "ON_BEFORE_ORDER_CANCEL",
+    ON_BEFORE_ORDERS_CANCEL = "ON_BEFORE_ORDERS_CANCEL"
+}
+export type WidgetHookResult = Promise<boolean> | boolean;
+export interface OnApprovalPayload {
+    chainId: SupportedChainId;
+    sellToken: TokenInfo;
+    sellAmount: string;
+    walletAddress: string;
+    spenderAddress: string;
 }
 export interface CowSwapWidgetProps {
     params: CowSwapWidgetParams;
@@ -100,6 +118,11 @@ export type CowSwapWidgetPaletteParams = {
 };
 export type CowSwapWidgetPalette = {
     baseTheme: CowSwapTheme;
+    /**
+     * Overrides the main widget card shadow.
+     * Accepts any valid CSS box-shadow value, for example `none` or `0 12px 24px rgba(0, 0, 0, 0.12)`.
+     */
+    boxShadow?: string;
 } & CowSwapWidgetPaletteParams;
 export interface CowSwapWidgetSounds {
     /**
@@ -165,9 +188,36 @@ export interface CowSwapWidgetParams {
      */
     targetChainId?: number;
     /**
-     * The token lists urls to use in the widget
+     * The token lists (as urls) enabled for the widget.
+     * These lists are available to both sell and buy selectors.
      */
     tokenLists?: string[];
+    /**
+     * The token lists (as urls) to use in the sell selector.
+     * Note: these lists also contribute to the widget's globally enabled list set.
+     * If omitted, the sell selector falls back to the globally enabled lists.
+     */
+    sellTokenLists?: string[];
+    /**
+     * The token lists (as urls) to use in the buy selector.
+     * Note: these lists also contribute to the widget's globally enabled list set.
+     * If omitted, the buy selector falls back to the globally enabled lists.
+     */
+    buyTokenLists?: string[];
+    /**
+     * Forces the widget locale.
+     * Serialized as the `lng` query param used by the frontend locale resolver.
+     * Accepts supported locales like `en-US` and fuzzy values like `en`.
+     */
+    locale?: string;
+    /**
+     * Control the "Recent tokens" section displaying in the token selector
+     */
+    hideRecentTokens?: boolean;
+    /**
+     * Control the "Favorite tokens" section displaying in the token selector
+     */
+    hideFavoriteTokens?: boolean;
     /**
      * Swap, Limit or Advanced (Twap).
      */
@@ -209,6 +259,11 @@ export interface CowSwapWidgetParams {
      * Defaults to false.
      */
     disableCrossChainSwap?: boolean;
+    /**
+     * Disables adding custom tokens and custom token lists.
+     * Defaults to false.
+     */
+    disableTokenImport?: boolean;
     /**
      * Disables showing the confirmation modal you get after posting an order.
      * Defaults to false.
@@ -278,6 +333,20 @@ export interface CowSwapWidgetParams {
      * Customizable slippage settings for the widget.
      */
     slippage?: FlexibleSlippageConfig;
+    /**
+     * Conditions to control the ability to trade
+     */
+    disableTrade?: {
+        whenPriceImpactIsUnknown?: boolean;
+        whenPriceImpactIsHigherThan?: number;
+    };
+    hooks?: Partial<{
+        onBeforeApproval(payload: OnApprovalPayload): WidgetHookResult;
+        onBeforeWrapOrUnwrap(payload: OnTradeParamsPayload): WidgetHookResult;
+        onBeforeTrade(payload: OnTradeParamsPayload): WidgetHookResult;
+        onBeforeOrderCancel(payload: EnrichedOrder): WidgetHookResult;
+        onBeforeOrdersCancel(payload: EnrichedOrder[]): WidgetHookResult;
+    }>;
 }
 export interface WidgetMethodsEmitPayloadMap {
     [WidgetMethodsEmit.ACTIVATE]: void;
@@ -286,17 +355,19 @@ export interface WidgetMethodsEmitPayloadMap {
     [WidgetMethodsEmit.SET_FULL_HEIGHT]: SetWidgetFullHeightPayload;
     [WidgetMethodsEmit.PROVIDER_RPC_REQUEST]: ProviderRpcRequestPayload;
     [WidgetMethodsEmit.INTERCEPT_WINDOW_OPEN]: WindowOpenPayload;
+    [WidgetMethodsEmit.PROCESS_HOOK]: WidgetHookPayload<WidgetHookEvents>;
 }
 export interface WidgetMethodsListenPayloadMap {
     [WidgetMethodsListen.UPDATE_APP_DATA]: UpdateAppDataPayload;
     [WidgetMethodsListen.UPDATE_PARAMS]: UpdateParamsPayload;
     [WidgetMethodsListen.PROVIDER_RPC_RESPONSE]: ProviderRpcResponsePayload;
     [WidgetMethodsListen.PROVIDER_ON_EVENT]: ProviderOnEventPayload;
+    [WidgetMethodsListen.HOOK_RESULT]: WidgetHookResultPayload;
 }
 export type WidgetEventsPayloadMap = WidgetMethodsEmitPayloadMap & WidgetMethodsListenPayloadMap;
 export type WidgetMethodsEmitPayloads = WidgetMethodsEmitPayloadMap[WidgetMethodsEmit];
 export type WidgetMethodsListenPayloads = WidgetMethodsListenPayloadMap[WidgetMethodsListen];
-export type CowSwapWidgetAppParams = Omit<CowSwapWidgetParams, 'theme'>;
+export type CowSwapWidgetAppParams = Omit<CowSwapWidgetParams, 'theme' | 'hooks'>;
 export interface UpdateParamsPayload {
     urlParams: {
         pathname: string;
@@ -316,6 +387,23 @@ export interface UpdateWidgetHeightPayload {
 export interface SetWidgetFullHeightPayload {
     isUpToSmall?: boolean;
 }
+export type WidgetHookId = string;
+export interface WidgetHookPayload<T extends WidgetHookEvents> {
+    id: WidgetHookId;
+    event: T;
+    payload: WidgetHookPayloadMap[T];
+}
+export interface WidgetHookResultPayload {
+    id: WidgetHookId;
+    result: boolean;
+}
+export interface WidgetHookPayloadMap {
+    [WidgetHookEvents.ON_BEFORE_APPROVAL]: OnApprovalPayload;
+    [WidgetHookEvents.ON_BEFORE_TRADE]: OnTradeParamsPayload;
+    [WidgetHookEvents.ON_BEFORE_WRAP_UNWRAP]: OnTradeParamsPayload;
+    [WidgetHookEvents.ON_BEFORE_ORDER_CANCEL]: EnrichedOrder;
+    [WidgetHookEvents.ON_BEFORE_ORDERS_CANCEL]: EnrichedOrder[];
+}
 export interface EmitCowEventPayload<T extends CowWidgetEvents> {
     event: T;
     payload: CowWidgetEventPayloadMap[T];