@cowprotocol/widget-lib 2.1.0 → 2.2.3

package/README.md

@@ -44,7 +44,7 @@ const params: CowSwapWidgetParams = {
 const {updateParams} = createCowSwapWidget(
   widgetContainer,
   // Optionally, you can provide some additional params to customise your widget
-  {params, provider}
+  {params, provider, onReady: () => console.log('Widget ready')}
 )
 
 // You also can change widget configuration on the fly

package/index.cjs

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "2.1.0",
+  "version": "2.2.3",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "repository": {
     "type": "git",
@@ -15,9 +15,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@cowprotocol/cow-sdk": "8.0.3",
-    "@cowprotocol/events": "^4.1.0",
-    "@cowprotocol/iframe-transport": "^2.0.10"
+    "@cowprotocol/cow-sdk": "8.0.5",
+    "@cowprotocol/events": "^4.1.1",
+    "@cowprotocol/iframe-transport": "^2.0.11"
   },
   "exports": {
     ".": {

package/types.d.ts

@@ -7,6 +7,7 @@ export type PerNetworkConfig<T> = Partial<Record<SupportedChainId, T>>;
 export type FlexibleConfig<T> = T | PerNetworkConfig<T> | PerTradeTypeConfig<T> | PerTradeTypeConfig<PerNetworkConfig<T>> | PerNetworkConfig<PerTradeTypeConfig<T>>;
 export declare enum WidgetMethodsEmit {
     ACTIVATE = "ACTIVATE",
+    READY = "READY",
     UPDATE_HEIGHT = "UPDATE_HEIGHT",
     SET_FULL_HEIGHT = "SET_FULL_HEIGHT",
     EMIT_COW_EVENT = "EMIT_COW_EVENT",
@@ -40,6 +41,7 @@ export interface CowSwapWidgetProps {
     params: CowSwapWidgetParams;
     provider?: EthereumProvider;
     listeners?: CowWidgetEventListeners;
+    onReady?(): void;
 }
 export interface JsonRpcRequest {
     id: number;
@@ -277,6 +279,11 @@ export interface CowSwapWidgetParams {
      * Defaults to false.
      */
     disableProgressBar?: boolean;
+    /**
+     * Disables CoW Swap educational tips shown after a trade completes when no surplus message is available.
+     * Defaults to false.
+     */
+    disablePostTradeTips?: boolean;
     /**
      * Disables showing the toast messages.
      * Some UI might want to disable it and subscribe to WidgetMethodsEmit.ON_TOAST_MESSAGE event to handle the toast messages itself.
@@ -350,6 +357,7 @@ export interface CowSwapWidgetParams {
 }
 export interface WidgetMethodsEmitPayloadMap {
     [WidgetMethodsEmit.ACTIVATE]: void;
+    [WidgetMethodsEmit.READY]: void;
     [WidgetMethodsEmit.EMIT_COW_EVENT]: EmitCowEventPayload<CowWidgetEvents>;
     [WidgetMethodsEmit.UPDATE_HEIGHT]: UpdateWidgetHeightPayload;
     [WidgetMethodsEmit.SET_FULL_HEIGHT]: SetWidgetFullHeightPayload;