@cowprotocol/widget-lib 4.3.0 → 4.4.0

package/applyElementStyles.d.ts

@@ -0,0 +1,6 @@
+import type * as CSS from 'csstype';
+/**
+ * Assigns camelCase CSS properties to a DOM element's style.
+ * String values are applied as-is; numbers are stringified (e.g. `inset: 0` → `"0"`).
+ */
+export declare function assignElementStyles(element: HTMLElement, styles: CSS.Properties | undefined): void;

package/cowSwapWidget.constants.d.ts

@@ -1,3 +1,10 @@
+/** `id` of the iframe element created by {@link createCowSwapWidget}. */
+export declare const WIDGET_IFRAME_ID = "cowswap-widget-iframe";
+/** Default `id` of the host container rendered by `@cowprotocol/widget-react`. */
+export declare const WIDGET_CONTAINER_ID = "cowswap-widget";
+export declare const DEFAULT_WIDGET_PARAMS: {
+    readonly appCode: "";
+};
 /**
  * Iframe sandbox allowlist for the embedded CoW Swap app.
  * - allow-scripts + allow-same-origin: required for the SPA, storage, and same-origin API calls.

package/index.cjs

@@ -1,53 +1,44 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("@cowprotocol/iframe-transport"),K=require("@cowprotocol/events"),Q=new Set(["wc:","metamask:","imtokenv2:","trustassetapp:","okex:","ledgerlive:","rainbow:","argent:","exodus:","zerion:","okxwallet:","uniswap:","robinhood-wallet:","krakenwallet:","bitpay:","oneinch:","safe:","backpack:","tangem:","mathwallet:","keplrwallet:","coin98:","tpoutside:","bncus:","bnc:"]),Y=new Set(["http:","https:"]);function z(e){try{const t=new URL(e).protocol;return Y.has(t)||Q.has(t)}catch{return!1}}const U="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox",F="strict-origin-when-cross-origin",B="clipboard-read; clipboard-write";var f=(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))(f||{}),g=(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))(g||{}),_=(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))(_||{}),P=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e.YIELD="yield",e))(P||{});const X=["primary","background","paper","text","danger","warning","alert","info","success"],c=new y.IframeTransport("cowSwapWidget");class J{constructor(t,n,o,r=[]){this.contentWindow=t,this.updateListeners(r),this.widgetListener=c.listenToMessageFromWindow(this.contentWindow,o,f.EMIT_COW_EVENT,i=>this.eventEmitter.emit(i.event,i.payload),n)}eventEmitter=new K.SimpleCowEventEmitter;listeners=[];widgetListener;stopListeningIframe(){c.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 Z{constructor(t,n){this.appWindow=t,this.iframeWidow=n,this.forwardSdkMessage=o=>{q(o.data)&&(typeof window<"u"&&o.origin===window.location.origin||(ee(o.data)?this.appWindow.parent.postMessage(o.data,"*"):te(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 q(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function ee(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 te(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}function ne(e="Default",t="#1c5dbf",...n){console.debug(`%c [COW][${e}]`,`font-weight: bold; color: ${t}`,...n)}function oe(...e){process.env.NODE_ENV!=="test"&&ne("Widget","#47aba8",...e)}const H="https://swap.cow.fi";function k(e){return!!(e&&typeof e=="object")}const v="_",re="CoW Swap widget: invalid baseUrl.",M=!1;function ie(e){return e==="localhost"||e==="127.0.0.1"||e==="::1"||e.endsWith(".localhost")}function C(e,t){const n=`${re} ${e}`;if(t)throw new Error(n);return console.error("[CoW Widget]",n),H}function x(e,t=M){const n=typeof e=="string"?e.trim():"";if(!n)return H;let o;try{o=new URL(n)}catch{return C(`Not a valid URL: ${JSON.stringify(n)}`,t)}if(o.username||o.password)return C("Userinfo (username/password) in URL is not allowed.",t);const r=o.protocol==="https:",i=o.protocol==="http:"&&ie(o.hostname);if(!r&&!i)return C(`Use https, or http only on localhost / 127.0.0.1 / ::1 / *.localhost (got ${o.protocol}//${o.hostname}).`,t);const u=o.pathname==="/"||o.pathname===""?"":o.pathname.replace(/\/+$/,"");return`${o.origin}${u}`}function se(e){const t=x(e.baseUrl),n=V(e);return t+"/#"+n+"?"+$(e)}function V(e){const{chainId:t=1,sell:n,buy:o,tradeType:r=P.SWAP}=e,i=[n?.asset||v,o?.asset||v].map(encodeURIComponent).join("/");return`/${t}/widget/${r}/${i}`}function $(e){const t=new URLSearchParams;return ue(ce(le(de(ae(t,e),e),e),e),e)}function ae(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 de(e,t){const n=t.theme;return n?(k(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 le(e,t){return t.targetChainId&&e.append("targetChainId",t.targetChainId.toString()),e}function ce(e,t){return t.locale&&e.append("lng",t.locale),e}function ue(e,t){return pe(t.hooks)?e.append("hooksEnabled","true"):e.delete("hooksEnabled"),e}function pe(e){return!!e&&Object.values(e).some(Boolean)}const fe=3e4,m="coWWidgetContentReloadButton";function Ee(e,t,n){const o=e.src;let r=!1,i=!1,u;function E(){e.srcdoc=we,t?.()}function p(){clearTimeout(u),u=setTimeout(()=>{r||i||E()},fe)}function s(){r||i||(e.removeAttribute("srcdoc"),e.src=o,p())}function a(){if(r)return;const d=e.contentDocument,T=d?.querySelector(`.${m}`);if(!(!d||!T)&&(T.addEventListener("click",s),n)){const h=d.createElement("style");h.textContent=n,d.head.appendChild(h)}}return e.addEventListener("error",d=>{r||(console.error("Could not load iframe",d),E())}),e.addEventListener("load",a),p(),{cancelWidgetLoading(){r=!0,clearTimeout(u),e.removeEventListener("load",a)},onWidgetReady(){i=!0,clearTimeout(u)}}}const we=`<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-      html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
-      .errorContent {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("@cowprotocol/iframe-transport"),oe=require("@cowprotocol/events"),re=new Set(["wc:","metamask:","imtokenv2:","trustassetapp:","okex:","ledgerlive:","rainbow:","argent:","exodus:","zerion:","okxwallet:","uniswap:","robinhood-wallet:","krakenwallet:","bitpay:","oneinch:","safe:","backpack:","tangem:","mathwallet:","keplrwallet:","coin98:","tpoutside:","bncus:","bnc:"]),ie=new Set(["http:","https:"]);function se(e){try{const t=new URL(e).protocol;return ie.has(t)||re.has(t)}catch{return!1}}function ae(e,t){if(t){e.removeAttribute("style");for(const n of Object.keys(t)){const o=n,r=t[o];if(r==null||typeof r!="string"&&typeof r!="number")continue;const i=`${r}`;e.style[o]=i}}}const K="cowswap-widget-iframe",le="cowswap-widget",de={appCode:""},Y="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox",Q="strict-origin-when-cross-origin",z="clipboard-read; clipboard-write";var w=(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))(w||{}),T=(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))(T||{}),_=(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))(_||{}),L=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e.YIELD="yield",e))(L||{});const ce=["primary","background","paper","text","danger","warning","alert","info","success"],p=new j.IframeTransport("cowSwapWidget");class ue{constructor(t,n,o,r=[]){this.contentWindow=t,this.updateListeners(r),this.widgetListener=p.listenToMessageFromWindow(this.contentWindow,o,w.EMIT_COW_EVENT,i=>this.eventEmitter.emit(i.event,i.payload),n)}eventEmitter=new oe.SimpleCowEventEmitter;listeners=[];widgetListener;stopListeningIframe(){p.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 pe{constructor(t,n){this.appWindow=t,this.iframeWidow=n,this.forwardSdkMessage=o=>{fe(o.data)&&(typeof window<"u"&&o.origin===window.location.origin||(Ee(o.data)?this.appWindow.parent.postMessage(o.data,"*"):we(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 fe(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function Ee(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 we(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}function he(e="Default",t="#1c5dbf",...n){console.debug(`%c [COW][${e}]`,`font-weight: bold; color: ${t}`,...n)}function _e(...e){process.env.NODE_ENV!=="test"&&he("Widget","#47aba8",...e)}function D(e){return!!(e&&typeof e=="object")}const X="https://swap.cow.fi",x="_",ge="CoW Swap widget: invalid baseUrl.",J=!1;function Re(e){return e==="localhost"||e==="127.0.0.1"||e==="::1"||e.endsWith(".localhost")}function v(e,t){const n=`${ge} ${e}`;if(t)throw new Error(n);return console.error("[CoW Widget]",n),X}function Z(e,t=J){const n=typeof e=="string"?e.trim():"";if(!n)return X;let o;try{o=new URL(n)}catch{return v(`Not a valid URL: ${JSON.stringify(n)}`,t)}if(o.username||o.password)return v("Userinfo (username/password) in URL is not allowed.",t);const r=o.protocol==="https:",i=o.protocol==="http:"&&Re(o.hostname);if(!r&&!i)return v(`Use https, or http only on localhost / 127.0.0.1 / ::1 / *.localhost (got ${o.protocol}//${o.hostname}).`,t);const f=o.pathname==="/"||o.pathname===""?"":o.pathname.replace(/\/+$/,"");return`${o.origin}${f}`}function me(e){const t=Z(e.baseUrl),n=q(e);return t+"/#"+n+"?"+ee(e)}function q(e){const{chainId:t=1,sell:n,buy:o,tradeType:r=L.SWAP}=e,i=[n?.asset||x,o?.asset||x].map(encodeURIComponent).join("/");return`/${t}/widget/${r}/${i}`}function ee(e){const t=new URLSearchParams;return Ae(ye(Te(Se(Oe(t,e),e),e),e),e)}function Oe(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 Se(e,t){const n=t.theme;return n?(D(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 Te(e,t){return t.targetChainId&&e.append("targetChainId",t.targetChainId.toString()),e}function ye(e,t){return t.locale&&e.append("lng",t.locale),e}function Ae(e,t){return Le(t.hooks)?e.append("hooksEnabled","true"):e.delete("hooksEnabled"),e}function Le(e){return!!e&&Object.values(e).some(Boolean)}const Ce=3e4,h="cow-widget-loading-error",B=`data-${h}`;function Ie(e,t,n,o,r){const i=t.src;let f=!1,E=null;function c(){r?.(),t.style.display="none",Pe();const l=document.createElement("div"),s=document.createElement("button"),d=document.createElement("p");s.innerText="Reload",s.addEventListener("click",()=>{e.removeChild(l),o(!0),t.src="about:blank",t.style.display="",setTimeout(()=>{t.src=i,n()},100)}),d.innerText="Couldn't load the page. Please, try again later",l.classList.add(h),l.appendChild(d),l.appendChild(s),e.appendChild(l)}return t.addEventListener("error",l=>{f||(console.error("Could not load iframe",l),c())}),E=window.setTimeout(()=>{f||c()},Ce),{onWidgetReady(){E&&clearTimeout(E);const l=document.getElementsByClassName(h)[0];l&&e.removeChild(l)},cancelWidgetLoading(){f=!0}}}let m=null;function Pe(){if(!(typeof document>"u")){if(ve()){m||(m=new CSSStyleSheet,m.replaceSync(k)),document.adoptedStyleSheets.includes(m)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,m]);return}if(!document.head.querySelector(`style[${B}]`)){const e=document.createElement("style");e.setAttribute(B,""),e.textContent=k,document.head.appendChild(e)}}}function ve(){return typeof document<"u"&&"adoptedStyleSheets"in Document.prototype&&typeof CSSStyleSheet=="function"&&typeof CSSStyleSheet.prototype.replaceSync=="function"}const k=`
+.${h} {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  padding: 24px;
+  background: #fff5f5;
+  color: #d32f2f;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+}
 
-        width: 100%;
-        height: 100%;
+.${h} p {
+  margin: 0;
+}
 
-        padding: 24px;
-        box-sizing: border-box;
+.${h} button {
+  padding: 8px 24px;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid #d32f2f;
+  background: transparent;
+  color: #d32f2f;
+}
 
-        background: #fff5f5;
-        color: #d32f2f;
+.${h} button:disabled {
+  cursor: progress;
+  opacity: 0.75;
+}
 
-        border: 1px solid #f5c2c7;
-        border-radius: 12px;
-
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
-        font-weight: 500;
-      }
-      .${m} {
-        padding: 8px 24px;
-        border: 1px solid #d32f2f;
-        border-radius: 8px;
-        background: transparent;
-        color: #d32f2f;
-        font: inherit;
-        cursor: pointer;
-      }
-      .${m}:hover {
-        background: #d32f2f;
-        color: #fff5f5;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="errorContent">
-      <span>Couldn't load the widget. Please try again later.</span>
-
-      <button class="${m}">Retry</button>
-    </div>
-  </body>
-</html>`,G="640px",_e="450px",Oe=20,Re={iframe:null,updateParams:()=>{},updateListeners:()=>{},updateProvider:()=>{},destroy:()=>{}};function ge(e,t){const{params:n,provider:o,listeners:r,onReady:i,enableSafeSdkBridge:u=!0}=t;let E=o,p=n;if(typeof window>"u")return Re;const s=Te(n),a=he(s);oe("Resolved trusted iframe origin",{iframeOrigin:a});const d=[];e.innerHTML="",e.appendChild(s);const{cancelWidgetLoading:T,onWidgetReady:h}=Ee(s,t.onLoadingError,t.loadingErrorStyles),{contentWindow:l}=s;if(!l)throw console.error("Iframe does not contain a window",s),new Error("Iframe does not contain a window!");d.push(Ae(l,a,()=>{i?.(),h()})),d.push(Le(l,a,n.appCode)),d.push(...Ie(s,a,n.height,n.maxHeight));let L=null;function W(){l&&(L&&window.removeEventListener("message",L),!p.disableWindowOpen&&(L=me(a,l),d.push(L)))}let A=null;function S(){l&&(A&&window.removeEventListener("message",A),A=Se(l,a,p.hooks),d.push(A))}W(),S();const D=new J(window,a,l,r);let I=b(l,a,null,E);s.addEventListener("load",()=>{N(l,a,p,E)});const j=u?new Z(window,l):null;return{iframe:s,updateParams:w=>{p=w,N(l,a,p,E),W(),S()},updateListeners:w=>D.updateListeners(w),updateProvider:w=>{E=w,I=b(l,a,I,w)},destroy:()=>{I.disconnect(),D.stopListeningIframe(),d.forEach(w=>window.removeEventListener("message",w)),j?.stopListening(),s&&s.parentNode===e&&e.removeChild(s),T()}}}function b(e,t,n,o){n&&n.disconnect();const r=n||new y.IframeRpcProviderBridge(e,t);return o&&r.onConnect(o),r}function Te(e){const{width:t=_e,height:n=G}=e,o=document.createElement("iframe");return o.src=se(e),o.width=t,o.height=n,o.style.border="0",o.setAttribute("sandbox",U),o.referrerPolicy=F,o.allow=B,o}function he(e){return new URL(e.src).origin}function N(e,t,n,o){const r=!!o,i=V(n),u=$(n).toString(),{theme:E,hooks:p,...s}=n;c.postMessageToWindow(e,g.UPDATE_PARAMS,{urlParams:{pathname:i,search:u},appParams:s,hasProvider:r},t)}function Le(e,t,n){return c.listenToMessageFromWindow(window,e,f.ACTIVATE,()=>{c.postMessageToWindow(e,g.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0},t)},t)}function Ae(e,t,n){let o=!1;return c.listenToMessageFromWindow(window,e,f.READY,()=>{o||(o=!0,n())},t)}function me(e,t){return c.listenToMessageFromWindow(window,t,f.INTERCEPT_WINDOW_OPEN,({href:n,rel:o,target:r})=>{const i=Pe(n.toString(),e);i&&z(i)&&window.open(i,r,o)},e)}function Pe(e,t){const n=e.trim();if(!n)return null;try{return new URL(n,t).toString()}catch{return null}}function Ie(e,t,n=G,o){return e.contentWindow?[c.listenToMessageFromWindow(window,e.contentWindow,f.UPDATE_HEIGHT,r=>{const i=r.height?r.height+Oe:void 0;e.style.height=i?`${o?Math.min(i,o):i}px`:n},t),c.listenToMessageFromWindow(window,e.contentWindow,f.SET_FULL_HEIGHT,({isUpToSmall:r})=>{e.style.height=r?n:`${o||document.body.offsetHeight}px`},t)]:[]}const Ce={[_.ON_BEFORE_APPROVAL]:(e,t)=>t?.onBeforeApproval?t.onBeforeApproval(e):!0,[_.ON_BEFORE_TRADE]:(e,t)=>t?.onBeforeTrade?t.onBeforeTrade(e):!0,[_.ON_BEFORE_WRAP_UNWRAP]:(e,t)=>t?.onBeforeWrapOrUnwrap?t.onBeforeWrapOrUnwrap(e):!0,[_.ON_BEFORE_ORDER_CANCEL]:(e,t)=>t?.onBeforeOrderCancel?t.onBeforeOrderCancel(e):!0,[_.ON_BEFORE_ORDERS_CANCEL]:(e,t)=>t?.onBeforeOrdersCancel?t.onBeforeOrdersCancel(e):!0};function We(e,t){return Ce[e.event](e.payload,t)}function Se(e,t,n){return c.listenToMessageFromWindow(window,e,f.PROCESS_HOOK,async o=>{let r=!1;try{r=await We(o,n)}catch{}c.postMessageToWindow(e,g.HOOK_RESULT,{id:o.id,result:r},t)},t)}const De=Object.values(P);function ve(e,t,n){if(O(e)){const o=e[n];return R(o)?o[t]:o}if(R(e)){const o=e[t];return O(o)?o[n]:o}return e}function O(e){return typeof e!="object"?!1:Object.keys(e).every(t=>De.includes(t))}const be=/^\d+$/;function R(e){return typeof e!="object"?!1:Object.keys(e).every(t=>be.test(t))}function Ne(e){return O(e)?Object.values(e).flatMap(t=>R(t)?Object.values(t):[t]):R(e)?Object.values(e).flatMap(t=>O(t)?Object.values(t):[t]):[e]}exports.SHOULD_THROW_IF_INVALID_URL=M;exports.TradeType=P;exports.WIDGET_IFRAME_ALLOW=B;exports.WIDGET_IFRAME_REFERRER_POLICY=F;exports.WIDGET_IFRAME_SANDBOX=U;exports.WIDGET_PALETTE_COLORS=X;exports.WidgetHookEvents=_;exports.WidgetMethodsEmit=f;exports.WidgetMethodsListen=g;exports.createCowSwapWidget=ge;exports.isCowSwapWidgetPalette=k;exports.isPerNetworkConfig=R;exports.isPerTradeTypeConfig=O;exports.resolveFlexibleConfig=ve;exports.resolveFlexibleConfigValues=Ne;exports.sanitizeWidgetBaseUrl=x;exports.widgetIframeTransport=c;
+.${h} button:not(:disabled):hover {
+  background: #d32f2f;
+  color: #fff5f5;
+}`,We={iframe:null,updateParams:()=>{},updateListeners:()=>{},updateProvider:()=>{},destroy:()=>{}};function De(e,t){const{params:n,provider:o,listeners:r,onReady:i,enableSafeSdkBridge:f=!0}=t;let E=o,c=M(n),l="";if(typeof window>"u")return We;const s=be(c),d=Ne(s);_e("Resolved trusted iframe origin",{iframeOrigin:d});const y=[];e.innerHTML="",e.appendChild(s),$(e,c);let a=null,C=()=>{},I=()=>{},b=()=>{},P=null,A=null,N=null,U=[],R=null;function H(){if(a=s.contentWindow,!a)throw console.error("Iframe does not contain a window",s),new Error("Iframe does not contain a window!");y.push(He(a,d,()=>{i?.(),te()})),y.push(Ue(a,d,c.appCode)),U=ke(e,s,d,ne=>{l=ne});let u=null;C=()=>{a&&(u&&window.removeEventListener("message",u),!c.disableWindowOpen&&(u=Fe(d,a),y.push(u)))},I=()=>{a&&(R&&window.removeEventListener("message",R),R=$e(a,d,c.hooks))},C(),I(),P=new ue(window,d,a,r),A=V(a,d,null,E),s.addEventListener("load",()=>{a&&G(a,d,c,E)}),N=f?new pe(window,a):null;const g=Ie(e,s,H,F,t.onLoadingError);b=g.cancelWidgetLoading;const te=g.onWidgetReady}function F(u=!1){A?.disconnect(),P?.stopListeningIframe(),U.forEach(g=>window.removeEventListener("message",g)),y.forEach(g=>window.removeEventListener("message",g)),R&&window.removeEventListener("message",R),N?.stopListening(),!u&&s&&s.parentNode===e&&e.removeChild(s),b?.()}return H(),{iframe:s,updateParams:u=>{a&&(c=M(u),$(e,c,l),G(a,d,c,E),C(),I())},updateListeners:u=>P?.updateListeners(u),updateProvider:u=>{a&&(E=u,A=V(a,d,A,u))},destroy:F}}function M(e){const t={...de,...e};if(typeof t.appCode!="string"||t.appCode.trim().length===0)throw new Error("Required param `appCode` is missing");return t}function V(e,t,n,o){n&&n.disconnect();const r=n||new j.IframeRpcProviderBridge(e,t);return o&&r.onConnect(o),r}function be(e){const t=document.createElement("iframe");return t.id=K,t.src=me(e),t.setAttribute("sandbox",Y),t.referrerPolicy=Q,t.allow=z,t.style.width="100%",t.style.height="100%",t.style.border="0",t.style.display="block",t}function $(e,t,n){ae(e,t.rootStyle),[{name:"params.width",value:t.width,replacementName:"rootStyle.width",replacementValue:t.rootStyle?.width,applyDeprecated:()=>t.width?e.style.width=t.width:void 0},{name:"params.height",value:t.height,replacementName:"rootStyle.height",replacementValue:t.rootStyle?.height,applyDeprecated:()=>t.height?e.style.height=t.height:void 0},{name:"params.maxHeight",value:t.maxHeight,replacementName:"rootStyle.maxHeight",replacementValue:t.rootStyle?.maxHeight,applyDeprecated:()=>t.maxHeight?e.style.maxHeight=`${t.maxHeight}px`:void 0},{name:"params.theme.boxShadow",value:D(t.theme)?t.theme.boxShadow:void 0,replacementName:"cardStyle.boxShadow",replacementValue:t.cardStyle?.boxShadow,applyDeprecated:()=>{}}].filter(r=>!!r.value).forEach(r=>{r.replacementValue?console.warn(`Both ${r.name} and ${r.replacementName} have been set. ${r.name} will be ignored.`):(console.warn(`${r.name} is deprecated. Use ${r.replacementName} instead.`),r.applyDeprecated())}),n&&e.style.setProperty(W,n)}function Ne(e){return new URL(e.src).origin}function G(e,t,n,o){const r=!!o,i=q(n),f=ee(n).toString(),{theme:E,hooks:c,rootStyle:l,...s}=n;p.postMessageToWindow(e,T.UPDATE_PARAMS,{urlParams:{pathname:i,search:f},appParams:s,hasProvider:r},t)}function Ue(e,t,n){return p.listenToMessageFromWindow(window,e,w.ACTIVATE,()=>{p.postMessageToWindow(e,T.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0},t)},t)}function He(e,t,n){let o=!1;return p.listenToMessageFromWindow(window,e,w.READY,()=>{o||(o=!0,n())},t)}function Fe(e,t){return p.listenToMessageFromWindow(window,t,w.INTERCEPT_WINDOW_OPEN,({href:n,rel:o,target:r})=>{const i=xe(n.toString(),e);i&&se(i)&&window.open(i,r,o)},e)}function xe(e,t){const n=e.trim();if(!n)return null;try{return new URL(n,t).toString()}catch{return null}}const W="--dynamicHeight",Be=0;function ke(e,t,n,o){return t.contentWindow?[p.listenToMessageFromWindow(window,t.contentWindow,w.UPDATE_HEIGHT,r=>{const i=`${(r?.height??0)+Be}px`;e.style.setProperty(W,i),o(i)},n),p.listenToMessageFromWindow(window,t.contentWindow,w.SET_FULL_HEIGHT,()=>{e.style.setProperty(W,"100dvh"),o("100dvh")},n)]:[]}const Me={[_.ON_BEFORE_APPROVAL]:(e,t)=>t?.onBeforeApproval?t.onBeforeApproval(e):!0,[_.ON_BEFORE_TRADE]:(e,t)=>t?.onBeforeTrade?t.onBeforeTrade(e):!0,[_.ON_BEFORE_WRAP_UNWRAP]:(e,t)=>t?.onBeforeWrapOrUnwrap?t.onBeforeWrapOrUnwrap(e):!0,[_.ON_BEFORE_ORDER_CANCEL]:(e,t)=>t?.onBeforeOrderCancel?t.onBeforeOrderCancel(e):!0,[_.ON_BEFORE_ORDERS_CANCEL]:(e,t)=>t?.onBeforeOrdersCancel?t.onBeforeOrdersCancel(e):!0};function Ve(e,t){return Me[e.event](e.payload,t)}function $e(e,t,n){return p.listenToMessageFromWindow(window,e,w.PROCESS_HOOK,async o=>{let r=!1;try{r=await Ve(o,n)}catch{}p.postMessageToWindow(e,T.HOOK_RESULT,{id:o.id,result:r},t)},t)}const Ge=Object.values(L);function je(e,t,n){if(O(e)){const o=e[n];return S(o)?o[t]:o}if(S(e)){const o=e[t];return O(o)?o[n]:o}return e}function O(e){return typeof e!="object"?!1:Object.keys(e).every(t=>Ge.includes(t))}const Ke=/^\d+$/;function S(e){return typeof e!="object"?!1:Object.keys(e).every(t=>Ke.test(t))}function Ye(e){return O(e)?Object.values(e).flatMap(t=>S(t)?Object.values(t):[t]):S(e)?Object.values(e).flatMap(t=>O(t)?Object.values(t):[t]):[e]}exports.SHOULD_THROW_IF_INVALID_URL=J;exports.TradeType=L;exports.WIDGET_CONTAINER_ID=le;exports.WIDGET_IFRAME_ALLOW=z;exports.WIDGET_IFRAME_ID=K;exports.WIDGET_IFRAME_REFERRER_POLICY=Q;exports.WIDGET_IFRAME_SANDBOX=Y;exports.WIDGET_PALETTE_COLORS=ce;exports.WidgetHookEvents=_;exports.WidgetMethodsEmit=w;exports.WidgetMethodsListen=T;exports.createCowSwapWidget=De;exports.isCowSwapWidgetPalette=D;exports.isPerNetworkConfig=S;exports.isPerTradeTypeConfig=O;exports.resolveFlexibleConfig=je;exports.resolveFlexibleConfigValues=Ye;exports.sanitizeWidgetBaseUrl=Z;exports.widgetIframeTransport=p;

package/index.d.ts

@@ -1,5 +1,5 @@
 export { createCowSwapWidget } from './cowSwapWidget';
-export { WIDGET_IFRAME_ALLOW, WIDGET_IFRAME_REFERRER_POLICY, WIDGET_IFRAME_SANDBOX } from './cowSwapWidget.constants';
+export { WIDGET_CONTAINER_ID, WIDGET_IFRAME_ALLOW, WIDGET_IFRAME_ID, WIDGET_IFRAME_REFERRER_POLICY, WIDGET_IFRAME_SANDBOX, } from './cowSwapWidget.constants';
 export type { CowSwapWidgetHandler } from './cowSwapWidget';
 export { resolveFlexibleConfigValues } from './resolveFlexibleConfigValues';
 export { sanitizeWidgetBaseUrl, SHOULD_THROW_IF_INVALID_URL } from './urlUtils';

package/index.js

@@ -1,6 +1,6 @@
-import { IframeTransport as k, IframeRpcProviderBridge as x } from "@cowprotocol/iframe-transport";
-import { SimpleCowEventEmitter as M } from "@cowprotocol/events";
-const V = /* @__PURE__ */ new Set([
+import { IframeTransport as X, IframeRpcProviderBridge as J } from "@cowprotocol/iframe-transport";
+import { SimpleCowEventEmitter as Z } from "@cowprotocol/events";
+const q = /* @__PURE__ */ new Set([
   "wc:",
   // default Wallet-connect protocol
   "metamask:",
@@ -27,27 +27,41 @@ const V = /* @__PURE__ */ new Set([
   "tpoutside:",
   "bncus:",
   "bnc:"
-]), $ = /* @__PURE__ */ new Set(["http:", "https:"]);
-function G(e) {
+]), ee = /* @__PURE__ */ new Set(["http:", "https:"]);
+function te(e) {
   try {
     const t = new URL(e).protocol;
-    return $.has(t) || V.has(t);
+    return ee.has(t) || q.has(t);
   } catch {
     return !1;
   }
 }
-const j = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox", K = "strict-origin-when-cross-origin", Q = "clipboard-read; clipboard-write";
-var w = /* @__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))(w || {}), A = /* @__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))(A || {}), _ = /* @__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))(_ || {}), I = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(I || {});
-const Ne = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], c = new k("cowSwapWidget");
-class Y {
+function ne(e, t) {
+  if (t) {
+    e.removeAttribute("style");
+    for (const n of Object.keys(t)) {
+      const o = n, r = t[o];
+      if (r == null || typeof r != "string" && typeof r != "number")
+        continue;
+      const i = `${r}`;
+      e.style[o] = i;
+    }
+  }
+}
+const oe = "cowswap-widget-iframe", Ke = "cowswap-widget", re = {
+  appCode: ""
+}, ie = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox", se = "strict-origin-when-cross-origin", ae = "clipboard-read; clipboard-write";
+var h = /* @__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))(h || {}), A = /* @__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))(A || {}), g = /* @__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))(g || {}), b = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(b || {});
+const Ye = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], p = new X("cowSwapWidget");
+class le {
   constructor(t, n, o, r = []) {
-    this.contentWindow = t, this.updateListeners(r), this.widgetListener = c.listenToMessageFromWindow(this.contentWindow, o, w.EMIT_COW_EVENT, (i) => this.eventEmitter.emit(i.event, i.payload), n);
+    this.contentWindow = t, this.updateListeners(r), this.widgetListener = p.listenToMessageFromWindow(this.contentWindow, o, h.EMIT_COW_EVENT, (i) => this.eventEmitter.emit(i.event, i.payload), n);
   }
-  eventEmitter = new M();
+  eventEmitter = new Z();
   listeners = [];
   widgetListener;
   stopListeningIframe() {
-    c.stopListeningWindowListener(this.contentWindow, this.widgetListener);
+    p.stopListeningWindowListener(this.contentWindow, this.widgetListener);
   }
   updateListeners(t) {
     for (const n of this.listeners)
@@ -57,10 +71,10 @@ class Y {
       this.eventEmitter.on(n);
   }
 }
-class z {
+class de {
   constructor(t, n) {
     this.appWindow = t, this.iframeWidow = n, this.forwardSdkMessage = (o) => {
-      X(o.data) && (typeof window < "u" && o.origin === window.location.origin || (J(o.data) ? this.appWindow.parent.postMessage(o.data, "*") : Z(o.data) && this.iframeWidow.postMessage(o.data, "*")));
+      ce(o.data) && (typeof window < "u" && o.origin === window.location.origin || (ue(o.data) ? this.appWindow.parent.postMessage(o.data, "*") : pe(o.data) && this.iframeWidow.postMessage(o.data, "*")));
     }, this.startListening();
   }
   forwardSdkMessage;
@@ -71,180 +85,180 @@ class z {
     this.appWindow.removeEventListener("message", this.forwardSdkMessage);
   }
 }
-function X(e) {
+function ce(e) {
   return typeof e == "object" && e !== null && "id" in e && typeof e.id == "string";
 }
-function J(e) {
+function ue(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 Z(e) {
+function pe(e) {
   return "success" in e && typeof e.success == "boolean" && "version" in e && typeof e.version == "string";
 }
-function q(e = "Default", t = "#1c5dbf", ...n) {
+function fe(e = "Default", t = "#1c5dbf", ...n) {
   console.debug(`%c [COW][${e}]`, `font-weight: bold; color: ${t}`, ...n);
 }
-function ee(...e) {
-  process.env.NODE_ENV !== "test" && q("Widget", "#47aba8", ...e);
+function Ee(...e) {
+  process.env.NODE_ENV !== "test" && fe("Widget", "#47aba8", ...e);
 }
-const y = "https://swap.cow.fi";
-function te(e) {
+function G(e) {
   return !!(e && typeof e == "object");
 }
-const v = "_", ne = "CoW Swap widget: invalid baseUrl.", oe = !1;
-function re(e) {
+const j = "https://swap.cow.fi", x = "_", we = "CoW Swap widget: invalid baseUrl.", he = !1;
+function me(e) {
   return e === "localhost" || e === "127.0.0.1" || e === "::1" || e.endsWith(".localhost");
 }
-function C(e, t) {
-  const n = `${ne} ${e}`;
+function v(e, t) {
+  const n = `${we} ${e}`;
   if (t)
     throw new Error(n);
-  return console.error("[CoW Widget]", n), y;
+  return console.error("[CoW Widget]", n), j;
 }
-function ie(e, t = oe) {
+function ge(e, t = he) {
   const n = typeof e == "string" ? e.trim() : "";
   if (!n)
-    return y;
+    return j;
   let o;
   try {
     o = new URL(n);
   } catch {
-    return C(`Not a valid URL: ${JSON.stringify(n)}`, t);
+    return v(`Not a valid URL: ${JSON.stringify(n)}`, t);
   }
   if (o.username || o.password)
-    return C("Userinfo (username/password) in URL is not allowed.", t);
-  const r = o.protocol === "https:", i = o.protocol === "http:" && re(o.hostname);
+    return v("Userinfo (username/password) in URL is not allowed.", t);
+  const r = o.protocol === "https:", i = o.protocol === "http:" && me(o.hostname);
   if (!r && !i)
-    return C(`Use https, or http only on localhost / 127.0.0.1 / ::1 / *.localhost (got ${o.protocol}//${o.hostname}).`, t);
-  const u = o.pathname === "/" || o.pathname === "" ? "" : o.pathname.replace(/\/+$/, "");
-  return `${o.origin}${u}`;
+    return v(`Use https, or http only on localhost / 127.0.0.1 / ::1 / *.localhost (got ${o.protocol}//${o.hostname}).`, t);
+  const f = o.pathname === "/" || o.pathname === "" ? "" : o.pathname.replace(/\/+$/, "");
+  return `${o.origin}${f}`;
 }
-function se(e) {
-  const t = ie(e.baseUrl), n = U(e);
-  return t + "/#" + n + "?" + B(e);
+function _e(e) {
+  const t = ge(e.baseUrl), n = K(e);
+  return t + "/#" + n + "?" + Y(e);
 }
-function U(e) {
+function K(e) {
   const {
     chainId: t = 1,
     sell: n,
     buy: o,
-    tradeType: r = I.SWAP
-  } = e, i = [n?.asset || v, o?.asset || v].map(encodeURIComponent).join("/");
+    tradeType: r = b.SWAP
+  } = e, i = [n?.asset || x, o?.asset || x].map(encodeURIComponent).join("/");
   return `/${t}/widget/${r}/${i}`;
 }
-function B(e) {
+function Y(e) {
   const t = new URLSearchParams();
-  return ue(ce(le(de(ae(t, e), e), e), e), e);
+  return Te(ye(Se(Oe(Re(t, e), e), e), e), e);
 }
-function ae(e, t) {
+function Re(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 de(e, t) {
+function Oe(e, t) {
   const n = t.theme;
-  return n ? (te(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);
+  return n ? (G(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 le(e, t) {
+function Se(e, t) {
   return t.targetChainId && e.append("targetChainId", t.targetChainId.toString()), e;
 }
-function ce(e, t) {
+function ye(e, t) {
   return t.locale && e.append("lng", t.locale), e;
 }
-function ue(e, t) {
-  return pe(t.hooks) ? e.append("hooksEnabled", "true") : e.delete("hooksEnabled"), e;
+function Te(e, t) {
+  return Ae(t.hooks) ? e.append("hooksEnabled", "true") : e.delete("hooksEnabled"), e;
 }
-function pe(e) {
+function Ae(e) {
   return !!e && Object.values(e).some(Boolean);
 }
-const fe = 3e4, T = "coWWidgetContentReloadButton";
-function Ee(e, t, n) {
-  const o = e.src;
-  let r = !1, i = !1, u;
-  function f() {
-    e.srcdoc = we, t?.();
+const Le = 3e4, w = "cow-widget-loading-error", B = `data-${w}`;
+function Ce(e, t, n, o, r) {
+  const i = t.src;
+  let f = !1, E = null;
+  function c() {
+    r?.(), t.style.display = "none", Pe();
+    const l = document.createElement("div"), s = document.createElement("button"), d = document.createElement("p");
+    s.innerText = "Reload", s.addEventListener("click", () => {
+      e.removeChild(l), o(!0), t.src = "about:blank", t.style.display = "", setTimeout(() => {
+        t.src = i, n();
+      }, 100);
+    }), d.innerText = "Couldn't load the page. Please, try again later", l.classList.add(w), l.appendChild(d), l.appendChild(s), e.appendChild(l);
   }
-  function p() {
-    clearTimeout(u), u = setTimeout(() => {
-      r || i || f();
-    }, fe);
-  }
-  function s() {
-    r || i || (e.removeAttribute("srcdoc"), e.src = o, p());
-  }
-  function a() {
-    if (r) return;
-    const d = e.contentDocument, O = d?.querySelector(`.${T}`);
-    if (!(!d || !O) && (O.addEventListener("click", s), n)) {
-      const R = d.createElement("style");
-      R.textContent = n, d.head.appendChild(R);
-    }
-  }
-  return e.addEventListener("error", (d) => {
-    r || (console.error("Could not load iframe", d), f());
-  }), e.addEventListener("load", a), p(), {
-    cancelWidgetLoading() {
-      r = !0, clearTimeout(u), e.removeEventListener("load", a);
-    },
+  return t.addEventListener("error", (l) => {
+    f || (console.error("Could not load iframe", l), c());
+  }), E = window.setTimeout(() => {
+    f || c();
+  }, Le), {
     onWidgetReady() {
-      i = !0, clearTimeout(u);
+      E && clearTimeout(E);
+      const l = document.getElementsByClassName(w)[0];
+      l && e.removeChild(l);
+    },
+    cancelWidgetLoading() {
+      f = !0;
     }
   };
 }
-const we = `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-      html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
-      .errorContent {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-
-        width: 100%;
-        height: 100%;
-
-        padding: 24px;
-        box-sizing: border-box;
+let R = null;
+function Pe() {
+  if (!(typeof document > "u")) {
+    if (ve()) {
+      R || (R = new CSSStyleSheet(), R.replaceSync(k)), document.adoptedStyleSheets.includes(R) || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, R]);
+      return;
+    }
+    if (!document.head.querySelector(`style[${B}]`)) {
+      const e = document.createElement("style");
+      e.setAttribute(B, ""), e.textContent = k, document.head.appendChild(e);
+    }
+  }
+}
+function ve() {
+  return typeof document < "u" && "adoptedStyleSheets" in Document.prototype && typeof CSSStyleSheet == "function" && typeof CSSStyleSheet.prototype.replaceSync == "function";
+}
+const k = `
+.${w} {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  padding: 24px;
+  background: #fff5f5;
+  color: #d32f2f;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+}
 
-        background: #fff5f5;
-        color: #d32f2f;
+.${w} p {
+  margin: 0;
+}
 
-        border: 1px solid #f5c2c7;
-        border-radius: 12px;
+.${w} button {
+  padding: 8px 24px;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid #d32f2f;
+  background: transparent;
+  color: #d32f2f;
+}
 
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
-        font-weight: 500;
-      }
-      .${T} {
-        padding: 8px 24px;
-        border: 1px solid #d32f2f;
-        border-radius: 8px;
-        background: transparent;
-        color: #d32f2f;
-        font: inherit;
-        cursor: pointer;
-      }
-      .${T}:hover {
-        background: #d32f2f;
-        color: #fff5f5;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="errorContent">
-      <span>Couldn't load the widget. Please try again later.</span>
+.${w} button:disabled {
+  cursor: progress;
+  opacity: 0.75;
+}
 
-      <button class="${T}">Retry</button>
-    </div>
-  </body>
-</html>`, F = "640px", _e = "450px", Oe = 20, Re = {
+.${w} button:not(:disabled):hover {
+  background: #d32f2f;
+  color: #fff5f5;
+}`, Ie = {
   iframe: null,
   updateParams: () => {
   },
@@ -255,118 +269,154 @@ const we = `<!DOCTYPE html>
   destroy: () => {
   }
 };
-function ye(e, t) {
+function Qe(e, t) {
   const {
     params: n,
     provider: o,
     listeners: r,
     onReady: i,
-    enableSafeSdkBridge: u = !0
+    enableSafeSdkBridge: f = !0
   } = t;
-  let f = o, p = n;
-  if (typeof window > "u") return Re;
-  const s = he(n), a = ge(s);
-  ee("Resolved trusted iframe origin", {
-    iframeOrigin: a
+  let E = o, c = F(n), l = "";
+  if (typeof window > "u") return Ie;
+  const s = be(c), d = De(s);
+  Ee("Resolved trusted iframe origin", {
+    iframeOrigin: d
   });
-  const d = [];
-  e.innerHTML = "", e.appendChild(s);
-  const {
-    cancelWidgetLoading: O,
-    onWidgetReady: R
-  } = Ee(s, t.onLoadingError, t.loadingErrorStyles), {
-    contentWindow: l
-  } = s;
-  if (!l)
-    throw console.error("Iframe does not contain a window", s), new Error("Iframe does not contain a window!");
-  d.push(me(l, a, () => {
-    i?.(), R();
-  })), d.push(Te(l, a, n.appCode)), d.push(...Pe(s, a, n.height, n.maxHeight));
-  let h = null;
-  function S() {
-    l && (h && window.removeEventListener("message", h), !p.disableWindowOpen && (h = Le(a, l), d.push(h)));
+  const O = [];
+  e.innerHTML = "", e.appendChild(s), M(e, c);
+  let a = null, L = () => {
+  }, C = () => {
+  }, D = () => {
+  }, P = null, S = null, N = null, W = [], _ = null;
+  function U() {
+    if (a = s.contentWindow, !a)
+      throw console.error("Iframe does not contain a window", s), new Error("Iframe does not contain a window!");
+    O.push(We(a, d, () => {
+      i?.(), Q();
+    })), O.push(Ne(a, d, c.appCode)), W = Be(e, s, d, (z) => {
+      l = z;
+    });
+    let u = null;
+    L = () => {
+      a && (u && window.removeEventListener("message", u), !c.disableWindowOpen && (u = Ue(d, a), O.push(u)));
+    }, C = () => {
+      a && (_ && window.removeEventListener("message", _), _ = Ve(a, d, c.hooks));
+    }, L(), C(), P = new le(window, d, a, r), S = V(a, d, null, E), s.addEventListener("load", () => {
+      a && $(a, d, c, E);
+    }), N = f ? new de(window, a) : null;
+    const m = Ce(e, s, U, H, t.onLoadingError);
+    D = m.cancelWidgetLoading;
+    const Q = m.onWidgetReady;
   }
-  let g = null;
-  function W() {
-    l && (g && window.removeEventListener("message", g), g = Se(l, a, p.hooks), d.push(g));
+  function H(u = !1) {
+    S?.disconnect(), P?.stopListeningIframe(), W.forEach((m) => window.removeEventListener("message", m)), O.forEach((m) => window.removeEventListener("message", m)), _ && window.removeEventListener("message", _), N?.stopListening(), !u && s && s.parentNode === e && e.removeChild(s), D?.();
   }
-  S(), W();
-  const D = new Y(window, a, l, r);
-  let P = b(l, a, null, f);
-  s.addEventListener("load", () => {
-    N(l, a, p, f);
-  });
-  const H = u ? new z(window, l) : null;
-  return {
+  return U(), {
     iframe: s,
-    updateParams: (E) => {
-      p = E, N(l, a, p, f), S(), W();
+    updateParams: (u) => {
+      a && (c = F(u), M(e, c, l), $(a, d, c, E), L(), C());
     },
-    updateListeners: (E) => D.updateListeners(E),
-    updateProvider: (E) => {
-      f = E, P = b(l, a, P, E);
+    updateListeners: (u) => P?.updateListeners(u),
+    updateProvider: (u) => {
+      a && (E = u, S = V(a, d, S, u));
     },
-    destroy: () => {
-      P.disconnect(), D.stopListeningIframe(), d.forEach((E) => window.removeEventListener("message", E)), H?.stopListening(), s && s.parentNode === e && e.removeChild(s), O();
-    }
+    destroy: H
   };
 }
-function b(e, t, n, o) {
+function F(e) {
+  const t = {
+    ...re,
+    ...e
+  };
+  if (typeof t.appCode != "string" || t.appCode.trim().length === 0)
+    throw new Error("Required param `appCode` is missing");
+  return t;
+}
+function V(e, t, n, o) {
   n && n.disconnect();
-  const r = n || new x(e, t);
+  const r = n || new J(e, t);
   return o && r.onConnect(o), r;
 }
-function he(e) {
-  const {
-    width: t = _e,
-    height: n = F
-  } = e, o = document.createElement("iframe");
-  return o.src = se(e), o.width = t, o.height = n, o.style.border = "0", o.setAttribute("sandbox", j), o.referrerPolicy = K, o.allow = Q, o;
+function be(e) {
+  const t = document.createElement("iframe");
+  return t.id = oe, t.src = _e(e), t.setAttribute("sandbox", ie), t.referrerPolicy = se, t.allow = ae, t.style.width = "100%", t.style.height = "100%", t.style.border = "0", t.style.display = "block", t;
+}
+function M(e, t, n) {
+  ne(e, t.rootStyle), [{
+    name: "params.width",
+    value: t.width,
+    replacementName: "rootStyle.width",
+    replacementValue: t.rootStyle?.width,
+    applyDeprecated: () => t.width ? e.style.width = t.width : void 0
+  }, {
+    name: "params.height",
+    value: t.height,
+    replacementName: "rootStyle.height",
+    replacementValue: t.rootStyle?.height,
+    applyDeprecated: () => t.height ? e.style.height = t.height : void 0
+  }, {
+    name: "params.maxHeight",
+    value: t.maxHeight,
+    replacementName: "rootStyle.maxHeight",
+    replacementValue: t.rootStyle?.maxHeight,
+    applyDeprecated: () => t.maxHeight ? e.style.maxHeight = `${t.maxHeight}px` : void 0
+  }, {
+    name: "params.theme.boxShadow",
+    value: G(t.theme) ? t.theme.boxShadow : void 0,
+    replacementName: "cardStyle.boxShadow",
+    replacementValue: t.cardStyle?.boxShadow,
+    applyDeprecated: () => {
+    }
+  }].filter((r) => !!r.value).forEach((r) => {
+    r.replacementValue ? console.warn(`Both ${r.name} and ${r.replacementName} have been set. ${r.name} will be ignored.`) : (console.warn(`${r.name} is deprecated. Use ${r.replacementName} instead.`), r.applyDeprecated());
+  }), n && e.style.setProperty(I, n);
 }
-function ge(e) {
+function De(e) {
   return new URL(e.src).origin;
 }
-function N(e, t, n, o) {
-  const r = !!o, i = U(n), u = B(n).toString(), {
-    theme: f,
-    hooks: p,
+function $(e, t, n, o) {
+  const r = !!o, i = K(n), f = Y(n).toString(), {
+    theme: E,
+    hooks: c,
+    rootStyle: l,
     ...s
   } = n;
-  c.postMessageToWindow(e, A.UPDATE_PARAMS, {
+  p.postMessageToWindow(e, A.UPDATE_PARAMS, {
     urlParams: {
       pathname: i,
-      search: u
+      search: f
     },
     appParams: s,
     hasProvider: r
   }, t);
 }
-function Te(e, t, n) {
-  return c.listenToMessageFromWindow(window, e, w.ACTIVATE, () => {
-    c.postMessageToWindow(e, A.UPDATE_APP_DATA, {
+function Ne(e, t, n) {
+  return p.listenToMessageFromWindow(window, e, h.ACTIVATE, () => {
+    p.postMessageToWindow(e, A.UPDATE_APP_DATA, {
       metaData: n ? {
         appCode: n
       } : void 0
     }, t);
   }, t);
 }
-function me(e, t, n) {
+function We(e, t, n) {
   let o = !1;
-  return c.listenToMessageFromWindow(window, e, w.READY, () => {
+  return p.listenToMessageFromWindow(window, e, h.READY, () => {
     o || (o = !0, n());
   }, t);
 }
-function Le(e, t) {
-  return c.listenToMessageFromWindow(window, t, w.INTERCEPT_WINDOW_OPEN, ({
+function Ue(e, t) {
+  return p.listenToMessageFromWindow(window, t, h.INTERCEPT_WINDOW_OPEN, ({
     href: n,
     rel: o,
     target: r
   }) => {
-    const i = Ae(n.toString(), e);
-    i && G(i) && window.open(i, r, o);
+    const i = He(n.toString(), e);
+    i && te(i) && window.open(i, r, o);
   }, e);
 }
-function Ae(e, t) {
+function He(e, t) {
   const n = e.trim();
   if (!n)
     return null;
@@ -376,77 +426,78 @@ function Ae(e, t) {
     return null;
   }
 }
-function Pe(e, t, n = F, o) {
-  return e.contentWindow ? [c.listenToMessageFromWindow(window, e.contentWindow, w.UPDATE_HEIGHT, (r) => {
-    const i = r.height ? r.height + Oe : void 0;
-    e.style.height = i ? `${o ? Math.min(i, o) : i}px` : n;
-  }, t), c.listenToMessageFromWindow(window, e.contentWindow, w.SET_FULL_HEIGHT, ({
-    isUpToSmall: r
-  }) => {
-    e.style.height = r ? n : `${o || document.body.offsetHeight}px`;
-  }, t)] : [];
-}
-const Ce = {
-  [_.ON_BEFORE_APPROVAL]: (e, t) => t?.onBeforeApproval ? t.onBeforeApproval(e) : !0,
-  [_.ON_BEFORE_TRADE]: (e, t) => t?.onBeforeTrade ? t.onBeforeTrade(e) : !0,
-  [_.ON_BEFORE_WRAP_UNWRAP]: (e, t) => t?.onBeforeWrapOrUnwrap ? t.onBeforeWrapOrUnwrap(e) : !0,
-  [_.ON_BEFORE_ORDER_CANCEL]: (e, t) => t?.onBeforeOrderCancel ? t.onBeforeOrderCancel(e) : !0,
-  [_.ON_BEFORE_ORDERS_CANCEL]: (e, t) => t?.onBeforeOrdersCancel ? t.onBeforeOrdersCancel(e) : !0
+const I = "--dynamicHeight", xe = 0;
+function Be(e, t, n, o) {
+  return t.contentWindow ? [p.listenToMessageFromWindow(window, t.contentWindow, h.UPDATE_HEIGHT, (r) => {
+    const i = `${(r?.height ?? 0) + xe}px`;
+    e.style.setProperty(I, i), o(i);
+  }, n), p.listenToMessageFromWindow(window, t.contentWindow, h.SET_FULL_HEIGHT, () => {
+    e.style.setProperty(I, "100dvh"), o("100dvh");
+  }, n)] : [];
+}
+const ke = {
+  [g.ON_BEFORE_APPROVAL]: (e, t) => t?.onBeforeApproval ? t.onBeforeApproval(e) : !0,
+  [g.ON_BEFORE_TRADE]: (e, t) => t?.onBeforeTrade ? t.onBeforeTrade(e) : !0,
+  [g.ON_BEFORE_WRAP_UNWRAP]: (e, t) => t?.onBeforeWrapOrUnwrap ? t.onBeforeWrapOrUnwrap(e) : !0,
+  [g.ON_BEFORE_ORDER_CANCEL]: (e, t) => t?.onBeforeOrderCancel ? t.onBeforeOrderCancel(e) : !0,
+  [g.ON_BEFORE_ORDERS_CANCEL]: (e, t) => t?.onBeforeOrdersCancel ? t.onBeforeOrdersCancel(e) : !0
 };
-function Ie(e, t) {
-  return Ce[e.event](e.payload, t);
+function Fe(e, t) {
+  return ke[e.event](e.payload, t);
 }
-function Se(e, t, n) {
-  return c.listenToMessageFromWindow(window, e, w.PROCESS_HOOK, async (o) => {
+function Ve(e, t, n) {
+  return p.listenToMessageFromWindow(window, e, h.PROCESS_HOOK, async (o) => {
     let r = !1;
     try {
-      r = await Ie(o, n);
+      r = await Fe(o, n);
     } catch {
     }
-    c.postMessageToWindow(e, A.HOOK_RESULT, {
+    p.postMessageToWindow(e, A.HOOK_RESULT, {
       id: o.id,
       result: r
     }, t);
   }, t);
 }
-const We = Object.values(I);
-function Ue(e, t, n) {
-  if (m(e)) {
+const Me = Object.values(b);
+function ze(e, t, n) {
+  if (y(e)) {
     const o = e[n];
-    return L(o) ? o[t] : o;
+    return T(o) ? o[t] : o;
   }
-  if (L(e)) {
+  if (T(e)) {
     const o = e[t];
-    return m(o) ? o[n] : o;
+    return y(o) ? o[n] : o;
   }
   return e;
 }
-function m(e) {
-  return typeof e != "object" ? !1 : Object.keys(e).every((t) => We.includes(t));
+function y(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => Me.includes(t));
 }
-const De = /^\d+$/;
-function L(e) {
-  return typeof e != "object" ? !1 : Object.keys(e).every((t) => De.test(t));
+const $e = /^\d+$/;
+function T(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => $e.test(t));
 }
-function Be(e) {
-  return m(e) ? Object.values(e).flatMap((t) => L(t) ? Object.values(t) : [t]) : L(e) ? Object.values(e).flatMap((t) => m(t) ? Object.values(t) : [t]) : [e];
+function Xe(e) {
+  return y(e) ? Object.values(e).flatMap((t) => T(t) ? Object.values(t) : [t]) : T(e) ? Object.values(e).flatMap((t) => y(t) ? Object.values(t) : [t]) : [e];
 }
 export {
-  oe as SHOULD_THROW_IF_INVALID_URL,
-  I as TradeType,
-  Q as WIDGET_IFRAME_ALLOW,
-  K as WIDGET_IFRAME_REFERRER_POLICY,
-  j as WIDGET_IFRAME_SANDBOX,
-  Ne as WIDGET_PALETTE_COLORS,
-  _ as WidgetHookEvents,
-  w as WidgetMethodsEmit,
+  he as SHOULD_THROW_IF_INVALID_URL,
+  b as TradeType,
+  Ke as WIDGET_CONTAINER_ID,
+  ae as WIDGET_IFRAME_ALLOW,
+  oe as WIDGET_IFRAME_ID,
+  se as WIDGET_IFRAME_REFERRER_POLICY,
+  ie as WIDGET_IFRAME_SANDBOX,
+  Ye as WIDGET_PALETTE_COLORS,
+  g as WidgetHookEvents,
+  h as WidgetMethodsEmit,
   A as WidgetMethodsListen,
-  ye as createCowSwapWidget,
-  te as isCowSwapWidgetPalette,
-  L as isPerNetworkConfig,
-  m as isPerTradeTypeConfig,
-  Ue as resolveFlexibleConfig,
-  Be as resolveFlexibleConfigValues,
-  ie as sanitizeWidgetBaseUrl,
-  c as widgetIframeTransport
+  Qe as createCowSwapWidget,
+  G as isCowSwapWidgetPalette,
+  T as isPerNetworkConfig,
+  y as isPerTradeTypeConfig,
+  ze as resolveFlexibleConfig,
+  Xe as resolveFlexibleConfigValues,
+  ge as sanitizeWidgetBaseUrl,
+  p as widgetIframeTransport
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "repository": {
     "type": "git",
@@ -15,9 +15,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@cowprotocol/cow-sdk": "9.2.1",
-    "@cowprotocol/events": "^4.7.0",
-    "@cowprotocol/iframe-transport": "^2.3.1"
+    "@cowprotocol/cow-sdk": "9.2.2",
+    "@cowprotocol/events": "^4.7.1",
+    "@cowprotocol/iframe-transport": "^2.3.2"
+  },
+  "devDependencies": {
+    "csstype": "3.1.3"
   },
   "exports": {
     ".": {

package/types.d.ts

@@ -1,5 +1,6 @@
 import { EnrichedOrder, SupportedChainId } from '@cowprotocol/cow-sdk';
 import { CowWidgetEventListeners, CowWidgetEventPayloadMap, CowWidgetEvents, OnTradeParamsPayload } from '@cowprotocol/events';
+import type * as CSS from 'csstype';
 export type { SupportedChainId } from '@cowprotocol/cow-sdk';
 export type { OnTradeParamsPayload } from '@cowprotocol/events';
 export type PerTradeTypeConfig<T> = Partial<Record<TradeType, T>>;
@@ -76,11 +77,6 @@ export interface CowSwapWidgetProps {
     listeners?: CowWidgetEventListeners;
     onReady?(): void;
     onLoadingError?(): void;
-    /**
-     * Custom CSS appended to the error document displayed inside the iframe when the widget fails to load.
-     * Use it to override the default look (`.errorContent` and `.reloadButton` classes).
-     */
-    loadingErrorStyles?: string;
     enableSafeSdkBridge?: boolean;
 }
 export interface JsonRpcRequest {
@@ -163,6 +159,8 @@ export type CowSwapWidgetPalette = {
     /**
      * 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)`.
+     *
+     * @deprecated Use cardStyle.boxShadow instead.
      */
     boxShadow?: string;
 } & CowSwapWidgetPaletteParams;
@@ -210,17 +208,39 @@ export interface CowSwapWidgetParams {
      */
     appCode: string;
     /**
-     * The width of the widget in pixels. Default: 400px
+     * The width of the outer iframe element. Accepts CSS width values such as `450px` or `100%`.
+     * Default: `450px`
+     *
+     * @deprecated Use rootStyle.width instead.
      */
     width?: string;
     /**
-     * The height of the widget in pixels. Default: 600px
+     * The height of the outer iframe element. Accepts CSS height values such as `640px`.
+     * Default: `640px`
+     *
+     * @deprecated Use rootStyle.height instead.
      */
     height?: string;
     /**
      * The maximum height of the widget in pixels. Default: body.offsetHeight
+     *
+     * @deprecated Use rootStyle.maxHeight instead.
      */
     maxHeight?: number;
+    /**
+     * Extra inline styles for the outer container element (host page only; not sent into the iframe app).
+     * Applied after width/height attributes. Use e.g. `backgroundColor`, `borderRadius`, `boxShadow`, `border`.
+     * The injected iframe fills this container. Use `height: 'var(--dynamicHeight)'` here for dynamic height.
+     */
+    rootStyle?: CSS.Properties;
+    /**
+     * Inline styles for the body wrapper (inside the iframe).
+     */
+    bodyWrapperStyle?: CSS.Properties;
+    /**
+     * Inline styles for the main trade widget card (inside the iframe).
+     */
+    cardStyle?: CSS.Properties;
     /**
      * Network ID.
      */
@@ -351,6 +371,17 @@ export interface CowSwapWidgetParams {
      * Defaults to false.
      */
     disableProgressBar?: boolean;
+    /**
+     * Disabled switching tokens places by clicking to the arrow between them
+     */
+    disableSwitchingTokens?: boolean;
+    /**
+     * Hides scrollbars inside the widget iframe (`overflow: hidden` on the document).
+     * Only use when the host iframe height is driven by `var(--dynamicHeight)` and not constrained (e.g. no max-height).
+     *
+     * Defaults to false.
+     */
+    disableScrollbars?: boolean;
     /**
      * Disables CoW Swap educational tips shown after a trade completes when no surplus message is available.
      * Defaults to false.
@@ -441,7 +472,7 @@ export interface WidgetMethodsEmitPayloadMap {
     [WidgetMethodsEmit.READY]: void;
     [WidgetMethodsEmit.EMIT_COW_EVENT]: EmitCowEventPayload<CowWidgetEvents>;
     [WidgetMethodsEmit.UPDATE_HEIGHT]: UpdateWidgetHeightPayload;
-    [WidgetMethodsEmit.SET_FULL_HEIGHT]: SetWidgetFullHeightPayload;
+    [WidgetMethodsEmit.SET_FULL_HEIGHT]: void;
     [WidgetMethodsEmit.PROVIDER_RPC_REQUEST]: ProviderRpcRequestPayload;
     [WidgetMethodsEmit.INTERCEPT_WINDOW_OPEN]: WindowOpenPayload;
     [WidgetMethodsEmit.PROCESS_HOOK]: WidgetHookPayload<WidgetHookEvents>;
@@ -456,7 +487,7 @@ export interface WidgetMethodsListenPayloadMap {
 export type WidgetEventsPayloadMap = WidgetMethodsEmitPayloadMap & WidgetMethodsListenPayloadMap;
 export type WidgetMethodsEmitPayloads = WidgetMethodsEmitPayloadMap[WidgetMethodsEmit];
 export type WidgetMethodsListenPayloads = WidgetMethodsListenPayloadMap[WidgetMethodsListen];
-export type CowSwapWidgetAppParams = Omit<CowSwapWidgetParams, 'theme' | 'hooks'>;
+export type CowSwapWidgetAppParams = Omit<CowSwapWidgetParams, 'theme' | 'hooks' | 'rootStyle'>;
 export interface UpdateParamsPayload {
     urlParams: {
         pathname: string;
@@ -473,9 +504,6 @@ export interface UpdateAppDataPayload {
 export interface UpdateWidgetHeightPayload {
     height?: number;
 }
-export interface SetWidgetFullHeightPayload {
-    isUpToSmall?: boolean;
-}
 export type WidgetHookId = string;
 export interface WidgetHookPayload<T extends WidgetHookEvents> {
     id: WidgetHookId;

package/widgetIframeLoading.d.ts

@@ -1,6 +1,6 @@
-type IframeLoadingState = {
-    cancelWidgetLoading: () => void;
-    onWidgetReady: () => void;
-};
-export declare function widgetIframeLoading(iframe: HTMLIFrameElement, onWidgetLoadingError?: () => void, customErrorStyles?: string): IframeLoadingState;
+interface WidgetIframeLoadingContext {
+    cancelWidgetLoading(): void;
+    onWidgetReady(): void;
+}
+export declare function widgetIframeLoading(container: HTMLElement, iframe: HTMLIFrameElement, setup: () => void, destroy: (skipIframeDestroy?: boolean) => void, onWidgetLoadingError?: () => void): WidgetIframeLoadingContext;
 export {};