@cowprotocol/widget-lib 4.3.1 → 4.4.1

package/IframeSafeSdkBridge.d.ts

@@ -1,8 +1,12 @@
 export declare class IframeSafeSdkBridge {
     private appWindow;
-    private iframeWidow;
+    private iframeWindow;
+    private iframeOrigin;
+    private parentOrigin;
     forwardSdkMessage: (event: MessageEvent<unknown>) => void;
-    constructor(appWindow: Window, iframeWidow: Window);
+    constructor(appWindow: Window, iframeWindow: Window, iframeOrigin: string, parentOrigin: string | null);
     private startListening;
     stopListening(): void;
+    private forwardRequest;
+    private forwardResponse;
 }

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 D=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",de="cowswap-widget",le={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||{}),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))(g||{}),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 D.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,o,r){this.appWindow=t,this.iframeWindow=n,this.iframeOrigin=o,this.parentOrigin=r,this.forwardSdkMessage=i=>{fe(i.data)&&(Ee(i.data)?this.forwardRequest(i,i.data):we(i.data)&&this.forwardResponse(i,i.data))},this.startListening()}forwardSdkMessage;startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}forwardRequest(t,n){!this.parentOrigin||this.appWindow.parent===this.appWindow||t.source!==this.iframeWindow||t.origin!==this.iframeOrigin||this.appWindow.parent.postMessage(n,this.parentOrigin)}forwardResponse(t,n){this.appWindow.parent!==this.appWindow&&(t.source!==this.appWindow.parent||t.origin!==this.parentOrigin||this.iframeWindow.postMessage(n,this.iframeOrigin))}}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 ge(...e){process.env.NODE_ENV!=="test"&&he("Widget","#47aba8",...e)}function b(e){return!!(e&&typeof e=="object")}const X="https://swap.cow.fi",B="_",_e="CoW Swap widget: invalid baseUrl.",J=!1;function Re(e){return e==="localhost"||e==="127.0.0.1"||e==="::1"||e.endsWith(".localhost")}function W(e,t){const n=`${_e} ${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 W(`Not a valid URL: ${JSON.stringify(n)}`,t)}if(o.username||o.password)return W("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 W(`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||B,o?.asset||B].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?(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 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",k=`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(We()){m||(m=new CSSStyleSheet,m.replaceSync(M)),document.adoptedStyleSheets.includes(m)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,m]);return}if(!document.head.querySelector(`style[${k}]`)){const e=document.createElement("style");e.setAttribute(k,""),e.textContent=M,document.head.appendChild(e)}}}function We(){return typeof document<"u"&&"adoptedStyleSheets"in Document.prototype&&typeof CSSStyleSheet=="function"&&typeof CSSStyleSheet.prototype.replaceSync=="function"}const M=`
+.${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;
+}`,ve={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=V(n),l="";if(typeof window>"u")return ve;const s=Ne(c),d=Ue(s);ge("Resolved trusted iframe origin",{iframeOrigin:d});const y=[];e.innerHTML="",e.appendChild(s),G(e,c);let a=null,C=()=>{},I=()=>{},N=()=>{},P=null,A=null,U=null,H=[],R=null;function F(){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(Fe(a,d,()=>{i?.(),te()})),y.push(He(a,d,c.appCode)),H=Me(e,s,d,ne=>{l=ne});let u=null;C=()=>{a&&(u&&window.removeEventListener("message",u),!c.disableWindowOpen&&(u=xe(d,a),y.push(u)))},I=()=>{a&&(R&&window.removeEventListener("message",R),R=Ge(a,d,c.hooks))},C(),I(),P=new ue(window,d,a,r),A=$(a,d,null,E),s.addEventListener("load",()=>{a&&j(a,d,c,E)}),U=be(f,window,a,d);const _=Ie(e,s,F,x,t.onLoadingError);N=_.cancelWidgetLoading;const te=_.onWidgetReady}function x(u=!1){A?.disconnect(),P?.stopListeningIframe(),H.forEach(_=>window.removeEventListener("message",_)),y.forEach(_=>window.removeEventListener("message",_)),R&&window.removeEventListener("message",R),U?.stopListening(),!u&&s&&s.parentNode===e&&e.removeChild(s),N?.()}return F(),{iframe:s,updateParams:u=>{a&&(c=V(u),G(e,c,l),j(a,d,c,E),C(),I())},updateListeners:u=>P?.updateListeners(u),updateProvider:u=>{a&&(E=u,A=$(a,d,A,u))},destroy:x}}function be(e,t,n,o){return e?new pe(t,n,o,D.getParentOrigin()||null):null}function V(e){const t={...le,...e};if(typeof t.appCode!="string"||t.appCode.trim().length===0)throw new Error("Required param `appCode` is missing");return t}function $(e,t,n,o){n&&n.disconnect();const r=n||new D.IframeRpcProviderBridge(e,t);return o&&r.onConnect(o),r}function Ne(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 G(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:b(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(v,n)}function Ue(e){return new URL(e.src).origin}function j(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 He(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 Fe(e,t,n){let o=!1;return p.listenToMessageFromWindow(window,e,w.READY,()=>{o||(o=!0,n())},t)}function xe(e,t){return p.listenToMessageFromWindow(window,t,w.INTERCEPT_WINDOW_OPEN,({href:n,rel:o,target:r})=>{const i=Be(n.toString(),e);i&&se(i)&&window.open(i,r,o)},e)}function Be(e,t){const n=e.trim();if(!n)return null;try{return new URL(n,t).toString()}catch{return null}}const v="--dynamicHeight",ke=0;function Me(e,t,n,o){return t.contentWindow?[p.listenToMessageFromWindow(window,t.contentWindow,w.UPDATE_HEIGHT,r=>{const i=`${(r?.height??0)+ke}px`;e.style.setProperty(v,i),o(i)},n),p.listenToMessageFromWindow(window,t.contentWindow,w.SET_FULL_HEIGHT,()=>{e.style.setProperty(v,"100dvh"),o("100dvh")},n)]:[]}const Ve={[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 $e(e,t){return Ve[e.event](e.payload,t)}function Ge(e,t,n){return p.listenToMessageFromWindow(window,e,w.PROCESS_HOOK,async o=>{let r=!1;try{r=await $e(o,n)}catch{}p.postMessageToWindow(e,T.HOOK_RESULT,{id:o.id,result:r},t)},t)}const je=Object.values(L);function Ke(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=>je.includes(t))}const Ye=/^\d+$/;function S(e){return typeof e!="object"?!1:Object.keys(e).every(t=>Ye.test(t))}function Qe(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=de;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=g;exports.WidgetMethodsEmit=w;exports.WidgetMethodsListen=T;exports.createCowSwapWidget=De;exports.isCowSwapWidgetPalette=b;exports.isPerNetworkConfig=S;exports.isPerTradeTypeConfig=O;exports.resolveFlexibleConfig=Ke;exports.resolveFlexibleConfigValues=Qe;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, getParentOrigin as Z } from "@cowprotocol/iframe-transport";
+import { SimpleCowEventEmitter as q } from "@cowprotocol/events";
+const ee = /* @__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) {
+]), te = /* @__PURE__ */ new Set(["http:", "https:"]);
+function ne(e) {
   try {
     const t = new URL(e).protocol;
-    return $.has(t) || V.has(t);
+    return te.has(t) || ee.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 oe(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 re = "cowswap-widget-iframe", Qe = "cowswap-widget", ie = {
+  appCode: ""
+}, se = "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox", ae = "strict-origin-when-cross-origin", le = "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 || {}), m = /* @__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))(m || {}), W = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(W || {});
+const ze = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], p = new X("cowSwapWidget");
+class de {
   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, w.EMIT_COW_EVENT, (i) => this.eventEmitter.emit(i.event, i.payload), n);
   }
-  eventEmitter = new M();
+  eventEmitter = new q();
   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 {
-  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, "*")));
+class ce {
+  constructor(t, n, o, r) {
+    this.appWindow = t, this.iframeWindow = n, this.iframeOrigin = o, this.parentOrigin = r, this.forwardSdkMessage = (i) => {
+      ue(i.data) && (pe(i.data) ? this.forwardRequest(i, i.data) : fe(i.data) && this.forwardResponse(i, i.data));
     }, this.startListening();
   }
   forwardSdkMessage;
@@ -70,181 +84,187 @@ class z {
   stopListening() {
     this.appWindow.removeEventListener("message", this.forwardSdkMessage);
   }
+  forwardRequest(t, n) {
+    !this.parentOrigin || this.appWindow.parent === this.appWindow || t.source !== this.iframeWindow || t.origin !== this.iframeOrigin || this.appWindow.parent.postMessage(n, this.parentOrigin);
+  }
+  forwardResponse(t, n) {
+    this.appWindow.parent !== this.appWindow && (t.source !== this.appWindow.parent || t.origin !== this.parentOrigin || this.iframeWindow.postMessage(n, this.iframeOrigin));
+  }
 }
-function X(e) {
+function ue(e) {
   return typeof e == "object" && e !== null && "id" in e && typeof e.id == "string";
 }
-function J(e) {
+function pe(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 fe(e) {
   return "success" in e && typeof e.success == "boolean" && "version" in e && typeof e.version == "string";
 }
-function q(e = "Default", t = "#1c5dbf", ...n) {
+function Ee(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 he(...e) {
+  process.env.NODE_ENV !== "test" && Ee("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.", ge = !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 _e(e, t = ge) {
   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 Oe(e) {
+  const t = _e(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 = W.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 Ae(Te(ye(Se(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 Se(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 ye(e, t) {
   return t.targetChainId && e.append("targetChainId", t.targetChainId.toString()), e;
 }
-function ce(e, t) {
+function Te(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 Ae(e, t) {
+  return Le(t.hooks) ? e.append("hooksEnabled", "true") : e.delete("hooksEnabled"), e;
 }
-function pe(e) {
+function Le(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 Ce = 3e4, h = "cow-widget-loading-error", B = `data-${h}`;
+function Pe(e, t, n, o, r) {
+  const i = t.src;
+  let f = !1, E = null;
+  function c() {
+    r?.(), t.style.display = "none", ve();
+    const d = document.createElement("div"), s = document.createElement("button"), l = document.createElement("p");
+    s.innerText = "Reload", s.addEventListener("click", () => {
+      e.removeChild(d), o(!0), t.src = "about:blank", t.style.display = "", setTimeout(() => {
+        t.src = i, n();
+      }, 100);
+    }), l.innerText = "Couldn't load the page. Please, try again later", d.classList.add(h), d.appendChild(l), d.appendChild(s), e.appendChild(d);
   }
-  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", (d) => {
+    f || (console.error("Could not load iframe", d), c());
+  }), E = window.setTimeout(() => {
+    f || c();
+  }, Ce), {
     onWidgetReady() {
-      i = !0, clearTimeout(u);
+      E && clearTimeout(E);
+      const d = document.getElementsByClassName(h)[0];
+      d && e.removeChild(d);
+    },
+    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 O = null;
+function ve() {
+  if (!(typeof document > "u")) {
+    if (Ie()) {
+      O || (O = new CSSStyleSheet(), O.replaceSync(k)), document.adoptedStyleSheets.includes(O) || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, O]);
+      return;
+    }
+    if (!document.head.querySelector(`style[${B}]`)) {
+      const e = document.createElement("style");
+      e.setAttribute(B, ""), e.textContent = k, document.head.appendChild(e);
+    }
+  }
+}
+function Ie() {
+  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;
+}
 
-        background: #fff5f5;
-        color: #d32f2f;
+.${h} p {
+  margin: 0;
+}
 
-        border: 1px solid #f5c2c7;
-        border-radius: 12px;
+.${h} 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>
+.${h} button:disabled {
+  cursor: progress;
+  opacity: 0.75;
+}
 
-      <button class="${T}">Retry</button>
-    </div>
-  </body>
-</html>`, F = "640px", _e = "450px", Oe = 20, Re = {
+.${h} button:not(:disabled):hover {
+  background: #d32f2f;
+  color: #fff5f5;
+}`, We = {
   iframe: null,
   updateParams: () => {
   },
@@ -255,118 +275,157 @@ const we = `<!DOCTYPE html>
   destroy: () => {
   }
 };
-function ye(e, t) {
+function Xe(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), d = "";
+  if (typeof window > "u") return We;
+  const s = De(c), l = Ne(s);
+  he("Resolved trusted iframe origin", {
+    iframeOrigin: l
   });
-  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 R = [];
+  e.innerHTML = "", e.appendChild(s), M(e, c);
+  let a = null, L = () => {
+  }, C = () => {
+  }, b = () => {
+  }, P = null, S = null, D = null, N = [], _ = 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!");
+    R.push(He(a, l, () => {
+      i?.(), Q();
+    })), R.push(Ue(a, l, c.appCode)), N = Fe(e, s, l, (z) => {
+      d = z;
+    });
+    let u = null;
+    L = () => {
+      a && (u && window.removeEventListener("message", u), !c.disableWindowOpen && (u = xe(l, a), R.push(u)));
+    }, C = () => {
+      a && (_ && window.removeEventListener("message", _), _ = $e(a, l, c.hooks));
+    }, L(), C(), P = new de(window, l, a, r), S = V(a, l, null, E), s.addEventListener("load", () => {
+      a && $(a, l, c, E);
+    }), D = be(f, window, a, l);
+    const g = Pe(e, s, U, H, t.onLoadingError);
+    b = g.cancelWidgetLoading;
+    const Q = g.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(), N.forEach((g) => window.removeEventListener("message", g)), R.forEach((g) => window.removeEventListener("message", g)), _ && window.removeEventListener("message", _), D?.stopListening(), !u && s && s.parentNode === e && e.removeChild(s), b?.();
   }
-  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, d), $(a, l, 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, l, 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 be(e, t, n, o) {
+  return e ? new ce(t, n, o, Z() || null) : null;
+}
+function F(e) {
+  const t = {
+    ...ie,
+    ...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 De(e) {
+  const t = document.createElement("iframe");
+  return t.id = re, t.src = Oe(e), t.setAttribute("sandbox", se), t.referrerPolicy = ae, t.allow = le, t.style.width = "100%", t.style.height = "100%", t.style.border = "0", t.style.display = "block", t;
+}
+function M(e, t, n) {
+  oe(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 Ne(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: d,
     ...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 Ue(e, t, n) {
+  return p.listenToMessageFromWindow(window, e, w.ACTIVATE, () => {
+    p.postMessageToWindow(e, A.UPDATE_APP_DATA, {
       metaData: n ? {
         appCode: n
       } : void 0
     }, t);
   }, t);
 }
-function me(e, t, n) {
+function He(e, t, n) {
   let o = !1;
-  return c.listenToMessageFromWindow(window, e, w.READY, () => {
+  return p.listenToMessageFromWindow(window, e, w.READY, () => {
     o || (o = !0, n());
   }, t);
 }
-function Le(e, t) {
-  return c.listenToMessageFromWindow(window, t, w.INTERCEPT_WINDOW_OPEN, ({
+function xe(e, t) {
+  return p.listenToMessageFromWindow(window, t, w.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 = Be(n.toString(), e);
+    i && ne(i) && window.open(i, r, o);
   }, e);
 }
-function Ae(e, t) {
+function Be(e, t) {
   const n = e.trim();
   if (!n)
     return null;
@@ -376,77 +435,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", ke = 0;
+function Fe(e, t, n, o) {
+  return t.contentWindow ? [p.listenToMessageFromWindow(window, t.contentWindow, w.UPDATE_HEIGHT, (r) => {
+    const i = `${(r?.height ?? 0) + ke}px`;
+    e.style.setProperty(I, i), o(i);
+  }, n), p.listenToMessageFromWindow(window, t.contentWindow, w.SET_FULL_HEIGHT, () => {
+    e.style.setProperty(I, "100dvh"), o("100dvh");
+  }, n)] : [];
+}
+const Ve = {
+  [m.ON_BEFORE_APPROVAL]: (e, t) => t?.onBeforeApproval ? t.onBeforeApproval(e) : !0,
+  [m.ON_BEFORE_TRADE]: (e, t) => t?.onBeforeTrade ? t.onBeforeTrade(e) : !0,
+  [m.ON_BEFORE_WRAP_UNWRAP]: (e, t) => t?.onBeforeWrapOrUnwrap ? t.onBeforeWrapOrUnwrap(e) : !0,
+  [m.ON_BEFORE_ORDER_CANCEL]: (e, t) => t?.onBeforeOrderCancel ? t.onBeforeOrderCancel(e) : !0,
+  [m.ON_BEFORE_ORDERS_CANCEL]: (e, t) => t?.onBeforeOrdersCancel ? t.onBeforeOrdersCancel(e) : !0
 };
-function Ie(e, t) {
-  return Ce[e.event](e.payload, t);
+function Me(e, t) {
+  return Ve[e.event](e.payload, t);
 }
-function Se(e, t, n) {
-  return c.listenToMessageFromWindow(window, e, w.PROCESS_HOOK, async (o) => {
+function $e(e, t, n) {
+  return p.listenToMessageFromWindow(window, e, w.PROCESS_HOOK, async (o) => {
     let r = !1;
     try {
-      r = await Ie(o, n);
+      r = await Me(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 Ge = Object.values(W);
+function Je(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) => Ge.includes(t));
 }
-const De = /^\d+$/;
-function L(e) {
-  return typeof e != "object" ? !1 : Object.keys(e).every((t) => De.test(t));
+const je = /^\d+$/;
+function T(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => je.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 Ze(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,
+  ge as SHOULD_THROW_IF_INVALID_URL,
+  W as TradeType,
+  Qe as WIDGET_CONTAINER_ID,
+  le as WIDGET_IFRAME_ALLOW,
+  re as WIDGET_IFRAME_ID,
+  ae as WIDGET_IFRAME_REFERRER_POLICY,
+  se as WIDGET_IFRAME_SANDBOX,
+  ze as WIDGET_PALETTE_COLORS,
+  m as WidgetHookEvents,
   w 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
+  Xe as createCowSwapWidget,
+  G as isCowSwapWidgetPalette,
+  T as isPerNetworkConfig,
+  y as isPerTradeTypeConfig,
+  Je as resolveFlexibleConfig,
+  Ze as resolveFlexibleConfigValues,
+  _e as sanitizeWidgetBaseUrl,
+  p as widgetIframeTransport
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "repository": {
     "type": "git",
@@ -19,6 +19,9 @@
     "@cowprotocol/events": "^4.7.1",
     "@cowprotocol/iframe-transport": "^2.3.2"
   },
+  "devDependencies": {
+    "csstype": "3.1.3"
+  },
   "exports": {
     ".": {
       "types": "./index.d.ts",

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 {};