@cowprotocol/widget-lib 0.7.1 → 0.9.0-RC.0

package/IframeCowEventEmitter.d.ts

@@ -4,7 +4,6 @@ export declare class IframeCowEventEmitter {
     private eventEmitter;
     private listeners;
     private widgetListener;
-    private instanceNumber;
     constructor(contentWindow: Window, listeners?: CowEventListeners);
     stopListeningIframe(): void;
     updateListeners(listeners?: CowEventListeners): void;

package/IframeSafeSdkBridge.d.ts

@@ -0,0 +1,8 @@
+export declare class IframeSafeSdkBridge {
+    private appWindow;
+    private iframeWidow;
+    forwardSdkMessage: (event: MessageEvent<unknown>) => void;
+    constructor(appWindow: Window, iframeWidow: Window);
+    private startListening;
+    stopListening(): void;
+}

package/index.d.ts

@@ -2,3 +2,4 @@ export { createCowSwapWidget } from './cowSwapWidget';
 export type { CowSwapWidgetHandler } from './cowSwapWidget';
 export * from './types';
 export * from './messages';
+export * from './themeUtils';

package/index.iife.js

@@ -1 +1 @@
-var cowSwapWidget=function(o){"use strict";const w="cowSwapWidget";function E(t,n,e){const i={key:w,method:n,...typeof e=="object"?e:{}};t.postMessage(i,"*")}function p(t,n,e){const s=i=>{!W(i.data)||i.data.key!==w||i.data.method!==n||e(i.data)};return t.addEventListener("message",s),s}function W(t){return typeof t=="object"&&t!==null&&"key"in t&&"method"in t&&typeof t.key=="string"&&typeof t.method=="string"}function T(t,n,e){t.removeEventListener("message",e)}function m(t,n){t.removeEventListener("message",n)}var d=(t=>(t.ACTIVATE="ACTIVATE",t.UPDATE_HEIGHT="UPDATE_HEIGHT",t.EMIT_COW_EVENT="EMIT_COW_EVENT",t.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",t))(d||{}),h=(t=>(t.UPDATE_PARAMS="UPDATE_PARAMS",t.UPDATE_APP_DATA="UPDATE_APP_DATA",t.PROVIDER_RPC_RESPONSE="PROVIDER_RPC_RESPONSE",t.PROVIDER_ON_EVENT="PROVIDER_ON_EVENT",t))(h||{}),f=(t=>(t.SWAP="swap",t.LIMIT="limit",t.ADVANCED="advanced",t))(f||{});const D=["connect","disconnect","close","chainChanged","accountsChanged"];class O{constructor(n){this.iframeWidow=n,this.ethereumProvider=null,this.requestWaitingForConnection={},this.processRpcCallFromWindow=({rpcRequest:e})=>{if(!this.ethereumProvider){e.id&&(this.requestWaitingForConnection[e.id]=e);return}this.processRpcRequest(e)}}disconnect(){this.ethereumProvider=null,T(window,d.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow)}onConnect(n){this.ethereumProvider?this.disconnect():p(window,d.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow),this.ethereumProvider=n,this.processPendingRequests(),D.forEach(e=>{n.on(e,s=>this.onProviderEvent(e,s))})}processPendingRequests(){Object.keys(this.requestWaitingForConnection).forEach(n=>{this.processRpcRequest(this.requestWaitingForConnection[n])}),this.requestWaitingForConnection={}}processRpcRequest(n){const{id:e,jsonrpc:s,method:i}=n;if(!this.ethereumProvider||!e)return;(i==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request({...n,id:e})).then(r=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:e,result:r}})).catch(r=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:e,error:r}}))}onProviderEvent(n,e){E(this.iframeWidow,h.PROVIDER_ON_EVENT,{event:n,params:e})}forwardRpcResponseToIframe(n){E(this.iframeWidow,h.PROVIDER_RPC_RESPONSE,n)}}const R="_";function S(t){const n=typeof t.baseUrl=="string"?t.baseUrl:"https://swap.cow.fi",e=l(t),s=_(t);return n+"/#"+e+"?"+s}function l(t){const{chainId:n=1,sell:e,buy:s,tradeType:i=f.SWAP}=t,c=[(e==null?void 0:e.asset)||R,(s==null?void 0:s.asset)||R].map(encodeURIComponent).join("/");return`/${n}/widget/${i}/${c}`}function _(t){const{sell:n,buy:e,theme:s}=t,i=new URLSearchParams;return n!=null&&n.amount&&i.append("sellAmount",n.amount),e!=null&&e.amount&&i.append("buyAmount",e.amount),s&&i.append("theme",typeof s=="string"?s:s.baseTheme),i}class L{constructor(){this.subscriptions={}}on(n){const{event:e,handler:s}=n;this.subscriptions[e]||(this.subscriptions[e]=[]),this.subscriptions[e].push(s)}off(n){const{event:e,handler:s}=n;this.subscriptions[e]&&(this.subscriptions[e]=this.subscriptions[e].filter(i=>i!==s))}emit(n,e){this.subscriptions[n]&&this.subscriptions[n].forEach(s=>s(e))}}let V=1;class U{constructor(n,e=[]){this.contentWindow=n,this.eventEmitter=new L,this.listeners=[],this.instanceNumber=V++,this.updateListeners(e),this.widgetListener=p(this.contentWindow,d.EMIT_COW_EVENT,s=>this.eventEmitter.emit(s.event,s.payload))}stopListeningIframe(){m(this.contentWindow,this.widgetListener)}updateListeners(n){for(const e of this.listeners)this.eventEmitter.off(e);this.listeners=n||[];for(const e of this.listeners)this.eventEmitter.on(e)}}const g="640px",y="450px",b=20;function F(t,n){const{params:e,provider:s,listeners:i}=n;let c=s;const r=N(e);t.innerHTML="",t.appendChild(r);const{contentWindow:u}=r;if(!u)throw console.error("Iframe does not contain a window",r),new Error("Iframe does not contain a window!");const P=[];P.push(H(u,e.appCode)),P.push(M(r,e.height));const I=new U(window,i);let C=A(u,null,c);return r.addEventListener("load",()=>v(u,e,c)),{updateParams:a=>v(u,a,c),updateListeners:a=>I.updateListeners(a),updateProvider:a=>{c=a,C=A(u,C,a)},destroy:()=>{I.stopListeningIframe(),P.forEach(a=>window.removeEventListener("message",a)),t.removeChild(r)}}}function A(t,n,e){n&&n.disconnect();const s=n||new O(t);return e&&s.onConnect(e),s}function N(t){const{width:n=y,height:e=g}=t,s=document.createElement("iframe");return s.src=S(t),s.width=n,s.height=e,s.style.border="0",s}function v(t,n,e){const s=!!e,i=l(n),c=_(n).toString();E(t,h.UPDATE_PARAMS,{urlParams:{pathname:i,search:c},appParams:{...n},hasProvider:s})}function H(t,n){const e=p(window,d.ACTIVATE,()=>{m(window,e),E(t,h.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0})});return e}function M(t,n=g){return p(window,d.UPDATE_HEIGHT,e=>{t.style.height=e.height?`${e.height+b}px`:n})}return o.TradeType=f,o.WidgetMethodsEmit=d,o.WidgetMethodsListen=h,o.createCowSwapWidget=F,o.listenToMessageFromWindow=p,o.postMessageToWindow=E,o.stopListeningToMessageFromWindow=T,o.stopListeningWindowListener=m,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o}({});
+var cowSwapWidget=function(o){"use strict";const T="cowSwapWidget";function f(e,n,t){const s={key:T,method:n,...typeof t=="object"?t:{}};e.postMessage(s,"*")}function E(e,n,t){const i=s=>{!D(s.data)||s.data.key!==T||s.data.method!==n||t(s.data)};return e.addEventListener("message",i),i}function D(e){return typeof e=="object"&&e!==null&&"key"in e&&"method"in e&&typeof e.key=="string"&&typeof e.method=="string"}function R(e,n,t){e.removeEventListener("message",t)}function m(e,n){e.removeEventListener("message",n)}var h=(e=>(e.ACTIVATE="ACTIVATE",e.UPDATE_HEIGHT="UPDATE_HEIGHT",e.EMIT_COW_EVENT="EMIT_COW_EVENT",e.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",e))(h||{}),p=(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))(p||{}),w=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e))(w||{});const L=["primary","background","paper","text","danger","warning","alert","info","success"],O=["connect","disconnect","close","chainChanged","accountsChanged"];class V{constructor(n){this.iframeWidow=n,this.ethereumProvider=null,this.requestWaitingForConnection={},this.processRpcCallFromWindow=({rpcRequest:t})=>{if(!this.ethereumProvider){t.id&&(this.requestWaitingForConnection[t.id]=t);return}this.processRpcRequest(t)}}disconnect(){this.ethereumProvider=null,R(window,h.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow)}onConnect(n){this.ethereumProvider?this.disconnect():E(window,h.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow),this.ethereumProvider=n,this.processPendingRequests(),O.forEach(t=>{n.on(t,i=>this.onProviderEvent(t,i))})}processPendingRequests(){Object.keys(this.requestWaitingForConnection).forEach(n=>{this.processRpcRequest(this.requestWaitingForConnection[n])}),this.requestWaitingForConnection={}}processRpcRequest(n){const{id:t,jsonrpc:i,method:s}=n;if(!this.ethereumProvider||!t)return;(s==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request({...n,id:t})).then(a=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:i,id:t,result:a}})).catch(a=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:i,id:t,error:a}}))}onProviderEvent(n,t){f(this.iframeWidow,p.PROVIDER_ON_EVENT,{event:n,params:t})}forwardRpcResponseToIframe(n){f(this.iframeWidow,p.PROVIDER_RPC_RESPONSE,n)}}function g(e){return!!(e&&typeof e=="object")}const _="_";function y(e){const n=typeof e.baseUrl=="string"?e.baseUrl:"https://swap.cow.fi",t=A(e);return n+"/#"+t+"?"+W(e)}function A(e){const{chainId:n=1,sell:t,buy:i,tradeType:s=w.SWAP}=e,r=[(t==null?void 0:t.asset)||_,(i==null?void 0:i.asset)||_].map(encodeURIComponent).join("/");return`/${n}/widget/${s}/${r}`}function W(e){const n=new URLSearchParams;return U(M(n,e),e)}function M(e,n){const{sell:t,buy:i}=n;return t!=null&&t.amount&&e.append("sellAmount",t.amount),i!=null&&i.amount&&e.append("buyAmount",i.amount),e}function U(e,n){const t=n.theme;return t&&(g(t)?(e.append("palette",encodeURIComponent(JSON.stringify(t))),e.append("theme",t.baseTheme)):e.append("theme",t)),e}class b{constructor(){this.subscriptions={}}on(n){const{event:t,handler:i}=n;this.subscriptions[t]||(this.subscriptions[t]=[]),this.subscriptions[t].push(i)}off(n){const{event:t,handler:i}=n;this.subscriptions[t]&&(this.subscriptions[t]=this.subscriptions[t].filter(s=>s!==i))}emit(n,t){this.subscriptions[n]&&this.subscriptions[n].forEach(i=>i(t))}}class F{constructor(n,t=[]){this.contentWindow=n,this.eventEmitter=new b,this.listeners=[],this.updateListeners(t),this.widgetListener=E(this.contentWindow,h.EMIT_COW_EVENT,i=>this.eventEmitter.emit(i.event,i.payload))}stopListeningIframe(){m(this.contentWindow,this.widgetListener)}updateListeners(n){for(const t of this.listeners)this.eventEmitter.off(t);this.listeners=n||[];for(const t of this.listeners)this.eventEmitter.on(t)}}class N{constructor(n,t){this.appWindow=n,this.iframeWidow=t,this.forwardSdkMessage=i=>{H(i.data)&&(k(i.data)?this.appWindow.parent.postMessage(i.data,"*"):G(i.data)&&this.iframeWidow.postMessage(i.data,"*"))},this.startListening()}startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}}function H(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function k(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 G(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}const v="640px",Q="450px",q=20;function B(e,n){const{params:t,provider:i,listeners:s}=n;let r=i,a=t;const c=$(t);e.innerHTML="",e.appendChild(c);const{contentWindow:u}=c;if(!u)throw console.error("Iframe does not contain a window",c),new Error("Iframe does not contain a window!");const l=[];l.push(K(u,t.appCode)),l.push(Y(c,t.height));const S=new F(window,s);let P=C(u,null,r);c.addEventListener("load",()=>I(u,a,r));const j=new N(window,u);return{updateParams:d=>{a=d,I(u,a,r)},updateListeners:d=>S.updateListeners(d),updateProvider:d=>{r=d,P=C(u,P,d)},destroy:()=>{P.disconnect(),S.stopListeningIframe(),l.forEach(d=>window.removeEventListener("message",d)),j.stopListening(),e.removeChild(c)}}}function C(e,n,t){n&&n.disconnect();const i=n||new V(e);return t&&i.onConnect(t),i}function $(e){const{width:n=Q,height:t=v}=e,i=document.createElement("iframe");return i.src=y(e),i.width=n,i.height=t,i.style.border="0",i}function I(e,n,t){const i=!!t,s=A(n),r=W(n).toString(),{theme:a,...c}=n;f(e,p.UPDATE_PARAMS,{urlParams:{pathname:s,search:r},appParams:c,hasProvider:i})}function K(e,n){const t=E(window,h.ACTIVATE,()=>{m(window,t),f(e,p.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0})});return t}function Y(e,n=v){return E(window,h.UPDATE_HEIGHT,t=>{e.style.height=t.height?`${t.height+q}px`:n})}return o.TradeType=w,o.WIDGET_PALETTE_COLORS=L,o.WidgetMethodsEmit=h,o.WidgetMethodsListen=p,o.createCowSwapWidget=B,o.isCowSwapWidgetPalette=g,o.listenToMessageFromWindow=E,o.postMessageToWindow=f,o.stopListeningToMessageFromWindow=R,o.stopListeningWindowListener=m,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o}({});

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="cowSwapWidget";function u(t,n,e){const i={key:_,method:n,...typeof e=="object"?e:{}};t.postMessage(i,"*")}function E(t,n,e){const s=i=>{!C(i.data)||i.data.key!==_||i.data.method!==n||e(i.data)};return t.addEventListener("message",s),s}function C(t){return typeof t=="object"&&t!==null&&"key"in t&&"method"in t&&typeof t.key=="string"&&typeof t.method=="string"}function g(t,n,e){t.removeEventListener("message",e)}function m(t,n){t.removeEventListener("message",n)}var a=(t=>(t.ACTIVATE="ACTIVATE",t.UPDATE_HEIGHT="UPDATE_HEIGHT",t.EMIT_COW_EVENT="EMIT_COW_EVENT",t.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",t))(a||{}),h=(t=>(t.UPDATE_PARAMS="UPDATE_PARAMS",t.UPDATE_APP_DATA="UPDATE_APP_DATA",t.PROVIDER_RPC_RESPONSE="PROVIDER_RPC_RESPONSE",t.PROVIDER_ON_EVENT="PROVIDER_ON_EVENT",t))(h||{}),f=(t=>(t.SWAP="swap",t.LIMIT="limit",t.ADVANCED="advanced",t))(f||{});const W=["connect","disconnect","close","chainChanged","accountsChanged"];class D{constructor(n){this.iframeWidow=n,this.ethereumProvider=null,this.requestWaitingForConnection={},this.processRpcCallFromWindow=({rpcRequest:e})=>{if(!this.ethereumProvider){e.id&&(this.requestWaitingForConnection[e.id]=e);return}this.processRpcRequest(e)}}disconnect(){this.ethereumProvider=null,g(window,a.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow)}onConnect(n){this.ethereumProvider?this.disconnect():E(window,a.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow),this.ethereumProvider=n,this.processPendingRequests(),W.forEach(e=>{n.on(e,s=>this.onProviderEvent(e,s))})}processPendingRequests(){Object.keys(this.requestWaitingForConnection).forEach(n=>{this.processRpcRequest(this.requestWaitingForConnection[n])}),this.requestWaitingForConnection={}}processRpcRequest(n){const{id:e,jsonrpc:s,method:i}=n;if(!this.ethereumProvider||!e)return;(i==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request({...n,id:e})).then(o=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:e,result:o}})).catch(o=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:e,error:o}}))}onProviderEvent(n,e){u(this.iframeWidow,h.PROVIDER_ON_EVENT,{event:n,params:e})}forwardRpcResponseToIframe(n){u(this.iframeWidow,h.PROVIDER_RPC_RESPONSE,n)}}const T="_";function O(t){const n=typeof t.baseUrl=="string"?t.baseUrl:"https://swap.cow.fi",e=A(t),s=I(t);return n+"/#"+e+"?"+s}function A(t){const{chainId:n=1,sell:e,buy:s,tradeType:i=f.SWAP}=t,r=[(e==null?void 0:e.asset)||T,(s==null?void 0:s.asset)||T].map(encodeURIComponent).join("/");return`/${n}/widget/${i}/${r}`}function I(t){const{sell:n,buy:e,theme:s}=t,i=new URLSearchParams;return n!=null&&n.amount&&i.append("sellAmount",n.amount),e!=null&&e.amount&&i.append("buyAmount",e.amount),s&&i.append("theme",typeof s=="string"?s:s.baseTheme),i}class S{constructor(){this.subscriptions={}}on(n){const{event:e,handler:s}=n;this.subscriptions[e]||(this.subscriptions[e]=[]),this.subscriptions[e].push(s)}off(n){const{event:e,handler:s}=n;this.subscriptions[e]&&(this.subscriptions[e]=this.subscriptions[e].filter(i=>i!==s))}emit(n,e){this.subscriptions[n]&&this.subscriptions[n].forEach(s=>s(e))}}let L=1;class V{constructor(n,e=[]){this.contentWindow=n,this.eventEmitter=new S,this.listeners=[],this.instanceNumber=L++,this.updateListeners(e),this.widgetListener=E(this.contentWindow,a.EMIT_COW_EVENT,s=>this.eventEmitter.emit(s.event,s.payload))}stopListeningIframe(){m(this.contentWindow,this.widgetListener)}updateListeners(n){for(const e of this.listeners)this.eventEmitter.off(e);this.listeners=n||[];for(const e of this.listeners)this.eventEmitter.on(e)}}const v="640px",U="450px",y=20;function b(t,n){const{params:e,provider:s,listeners:i}=n;let r=s;const o=F(e);t.innerHTML="",t.appendChild(o);const{contentWindow:d}=o;if(!d)throw console.error("Iframe does not contain a window",o),new Error("Iframe does not contain a window!");const p=[];p.push(N(d,e.appCode)),p.push(H(o,e.height));const P=new V(window,i);let w=R(d,null,r);return o.addEventListener("load",()=>l(d,e,r)),{updateParams:c=>l(d,c,r),updateListeners:c=>P.updateListeners(c),updateProvider:c=>{r=c,w=R(d,w,c)},destroy:()=>{P.stopListeningIframe(),p.forEach(c=>window.removeEventListener("message",c)),t.removeChild(o)}}}function R(t,n,e){n&&n.disconnect();const s=n||new D(t);return e&&s.onConnect(e),s}function F(t){const{width:n=U,height:e=v}=t,s=document.createElement("iframe");return s.src=O(t),s.width=n,s.height=e,s.style.border="0",s}function l(t,n,e){const s=!!e,i=A(n),r=I(n).toString();u(t,h.UPDATE_PARAMS,{urlParams:{pathname:i,search:r},appParams:{...n},hasProvider:s})}function N(t,n){const e=E(window,a.ACTIVATE,()=>{m(window,e),u(t,h.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0})});return e}function H(t,n=v){return E(window,a.UPDATE_HEIGHT,e=>{t.style.height=e.height?`${e.height+y}px`:n})}exports.TradeType=f;exports.WidgetMethodsEmit=a;exports.WidgetMethodsListen=h;exports.createCowSwapWidget=b;exports.listenToMessageFromWindow=E;exports.postMessageToWindow=u;exports.stopListeningToMessageFromWindow=g;exports.stopListeningWindowListener=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="cowSwapWidget";function u(e,n,t){const i={key:_,method:n,...typeof t=="object"?t:{}};e.postMessage(i,"*")}function f(e,n,t){const s=i=>{!D(i.data)||i.data.key!==_||i.data.method!==n||t(i.data)};return e.addEventListener("message",s),s}function D(e){return typeof e=="object"&&e!==null&&"key"in e&&"method"in e&&typeof e.key=="string"&&typeof e.method=="string"}function A(e,n,t){e.removeEventListener("message",t)}function w(e,n){e.removeEventListener("message",n)}var h=(e=>(e.ACTIVATE="ACTIVATE",e.UPDATE_HEIGHT="UPDATE_HEIGHT",e.EMIT_COW_EVENT="EMIT_COW_EVENT",e.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",e))(h||{}),p=(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))(p||{}),l=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e))(l||{});const L=["primary","background","paper","text","danger","warning","alert","info","success"],O=["connect","disconnect","close","chainChanged","accountsChanged"];class V{constructor(n){this.iframeWidow=n,this.ethereumProvider=null,this.requestWaitingForConnection={},this.processRpcCallFromWindow=({rpcRequest:t})=>{if(!this.ethereumProvider){t.id&&(this.requestWaitingForConnection[t.id]=t);return}this.processRpcRequest(t)}}disconnect(){this.ethereumProvider=null,A(window,h.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow)}onConnect(n){this.ethereumProvider?this.disconnect():f(window,h.PROVIDER_RPC_REQUEST,this.processRpcCallFromWindow),this.ethereumProvider=n,this.processPendingRequests(),O.forEach(t=>{n.on(t,s=>this.onProviderEvent(t,s))})}processPendingRequests(){Object.keys(this.requestWaitingForConnection).forEach(n=>{this.processRpcRequest(this.requestWaitingForConnection[n])}),this.requestWaitingForConnection={}}processRpcRequest(n){const{id:t,jsonrpc:s,method:i}=n;if(!this.ethereumProvider||!t)return;(i==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request({...n,id:t})).then(r=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:t,result:r}})).catch(r=>this.forwardRpcResponseToIframe({rpcResponse:{jsonrpc:s,id:t,error:r}}))}onProviderEvent(n,t){u(this.iframeWidow,p.PROVIDER_ON_EVENT,{event:n,params:t})}forwardRpcResponseToIframe(n){u(this.iframeWidow,p.PROVIDER_RPC_RESPONSE,n)}}function W(e){return!!(e&&typeof e=="object")}const T="_";function y(e){const n=typeof e.baseUrl=="string"?e.baseUrl:"https://swap.cow.fi",t=v(e);return n+"/#"+t+"?"+C(e)}function v(e){const{chainId:n=1,sell:t,buy:s,tradeType:i=l.SWAP}=e,o=[(t==null?void 0:t.asset)||T,(s==null?void 0:s.asset)||T].map(encodeURIComponent).join("/");return`/${n}/widget/${i}/${o}`}function C(e){const n=new URLSearchParams;return U(M(n,e),e)}function M(e,n){const{sell:t,buy:s}=n;return t!=null&&t.amount&&e.append("sellAmount",t.amount),s!=null&&s.amount&&e.append("buyAmount",s.amount),e}function U(e,n){const t=n.theme;return t&&(W(t)?(e.append("palette",encodeURIComponent(JSON.stringify(t))),e.append("theme",t.baseTheme)):e.append("theme",t)),e}class b{constructor(){this.subscriptions={}}on(n){const{event:t,handler:s}=n;this.subscriptions[t]||(this.subscriptions[t]=[]),this.subscriptions[t].push(s)}off(n){const{event:t,handler:s}=n;this.subscriptions[t]&&(this.subscriptions[t]=this.subscriptions[t].filter(i=>i!==s))}emit(n,t){this.subscriptions[n]&&this.subscriptions[n].forEach(s=>s(t))}}class F{constructor(n,t=[]){this.contentWindow=n,this.eventEmitter=new b,this.listeners=[],this.updateListeners(t),this.widgetListener=f(this.contentWindow,h.EMIT_COW_EVENT,s=>this.eventEmitter.emit(s.event,s.payload))}stopListeningIframe(){w(this.contentWindow,this.widgetListener)}updateListeners(n){for(const t of this.listeners)this.eventEmitter.off(t);this.listeners=n||[];for(const t of this.listeners)this.eventEmitter.on(t)}}class N{constructor(n,t){this.appWindow=n,this.iframeWidow=t,this.forwardSdkMessage=s=>{H(s.data)&&(k(s.data)?this.appWindow.parent.postMessage(s.data,"*"):G(s.data)&&this.iframeWidow.postMessage(s.data,"*"))},this.startListening()}startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}}function H(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function k(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 G(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}const I="640px",Q="450px",q=20;function x(e,n){const{params:t,provider:s,listeners:i}=n;let o=s,r=t;const a=B(t);e.innerHTML="",e.appendChild(a);const{contentWindow:d}=a;if(!d)throw console.error("Iframe does not contain a window",a),new Error("Iframe does not contain a window!");const E=[];E.push($(d,t.appCode)),E.push(K(a,t.height));const P=new F(window,i);let m=R(d,null,o);a.addEventListener("load",()=>g(d,r,o));const S=new N(window,d);return{updateParams:c=>{r=c,g(d,r,o)},updateListeners:c=>P.updateListeners(c),updateProvider:c=>{o=c,m=R(d,m,c)},destroy:()=>{m.disconnect(),P.stopListeningIframe(),E.forEach(c=>window.removeEventListener("message",c)),S.stopListening(),e.removeChild(a)}}}function R(e,n,t){n&&n.disconnect();const s=n||new V(e);return t&&s.onConnect(t),s}function B(e){const{width:n=Q,height:t=I}=e,s=document.createElement("iframe");return s.src=y(e),s.width=n,s.height=t,s.style.border="0",s}function g(e,n,t){const s=!!t,i=v(n),o=C(n).toString(),{theme:r,...a}=n;u(e,p.UPDATE_PARAMS,{urlParams:{pathname:i,search:o},appParams:a,hasProvider:s})}function $(e,n){const t=f(window,h.ACTIVATE,()=>{w(window,t),u(e,p.UPDATE_APP_DATA,{metaData:n?{appCode:n}:void 0})});return t}function K(e,n=I){return f(window,h.UPDATE_HEIGHT,t=>{e.style.height=t.height?`${t.height+q}px`:n})}exports.TradeType=l;exports.WIDGET_PALETTE_COLORS=L;exports.WidgetMethodsEmit=h;exports.WidgetMethodsListen=p;exports.createCowSwapWidget=x;exports.isCowSwapWidgetPalette=W;exports.listenToMessageFromWindow=f;exports.postMessageToWindow=u;exports.stopListeningToMessageFromWindow=A;exports.stopListeningWindowListener=w;

package/index.mjs

@@ -1,61 +1,71 @@
 const T = "cowSwapWidget";
-function u(t, n, e) {
+function u(e, n, t) {
   const i = {
     key: T,
     method: n,
-    ...typeof e == "object" ? e : {}
+    ...typeof t == "object" ? t : {}
   };
-  t.postMessage(
+  e.postMessage(
     i,
     "*"
     // TODO: Change to CoW specific origin in production. https://github.com/cowprotocol/cowswap/issues/3828
   );
 }
-function E(t, n, e) {
+function f(e, n, t) {
   const s = (i) => {
-    !v(i.data) || i.data.key !== T || i.data.method !== n || e(i.data);
+    !W(i.data) || i.data.key !== T || i.data.method !== n || t(i.data);
   };
-  return t.addEventListener("message", s), s;
+  return e.addEventListener("message", s), s;
 }
-function v(t) {
-  return typeof t == "object" && t !== null && "key" in t && "method" in t && typeof t.key == "string" && typeof t.method == "string";
+function W(e) {
+  return typeof e == "object" && e !== null && "key" in e && "method" in e && typeof e.key == "string" && typeof e.method == "string";
 }
-function C(t, n, e) {
-  t.removeEventListener("message", e);
+function S(e, n, t) {
+  e.removeEventListener("message", t);
 }
-function l(t, n) {
-  t.removeEventListener("message", n);
+function _(e, n) {
+  e.removeEventListener("message", n);
 }
-var h = /* @__PURE__ */ ((t) => (t.ACTIVATE = "ACTIVATE", t.UPDATE_HEIGHT = "UPDATE_HEIGHT", t.EMIT_COW_EVENT = "EMIT_COW_EVENT", t.PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST", t))(h || {}), d = /* @__PURE__ */ ((t) => (t.UPDATE_PARAMS = "UPDATE_PARAMS", t.UPDATE_APP_DATA = "UPDATE_APP_DATA", t.PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE", t.PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT", t))(d || {}), _ = /* @__PURE__ */ ((t) => (t.SWAP = "swap", t.LIMIT = "limit", t.ADVANCED = "advanced", t))(_ || {});
-const D = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
-class W {
+var h = /* @__PURE__ */ ((e) => (e.ACTIVATE = "ACTIVATE", e.UPDATE_HEIGHT = "UPDATE_HEIGHT", e.EMIT_COW_EVENT = "EMIT_COW_EVENT", e.PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST", e))(h || {}), p = /* @__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))(p || {}), g = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e))(g || {});
+const $ = [
+  "primary",
+  "background",
+  "paper",
+  "text",
+  "danger",
+  "warning",
+  "alert",
+  "info",
+  "success"
+], D = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
+class O {
   /**
    * Creates an instance of IframeRpcProviderBridge.
    * @param iframeWidow - The iFrame window that will post up general RPC messages and to which the IframeRpcProviderBridge will forward the RPC result.
    *  Also it will receive some special RPC events coming from the wallet, like connect/chainChanged,accountChanged
    */
   constructor(n) {
-    this.iframeWidow = n, this.ethereumProvider = null, this.requestWaitingForConnection = {}, this.processRpcCallFromWindow = ({ rpcRequest: e }) => {
+    this.iframeWidow = n, this.ethereumProvider = null, this.requestWaitingForConnection = {}, this.processRpcCallFromWindow = ({ rpcRequest: t }) => {
       if (!this.ethereumProvider) {
-        e.id && (this.requestWaitingForConnection[e.id] = e);
+        t.id && (this.requestWaitingForConnection[t.id] = t);
         return;
       }
-      this.processRpcRequest(e);
+      this.processRpcRequest(t);
     };
   }
   /**
    * Disconnects the JSON-RPC bridge from the Ethereum provider.
    */
   disconnect() {
-    this.ethereumProvider = null, C(window, h.PROVIDER_RPC_REQUEST, this.processRpcCallFromWindow);
+    this.ethereumProvider = null, S(window, h.PROVIDER_RPC_REQUEST, this.processRpcCallFromWindow);
   }
   /**
    * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
    * @param newProvider - The Ethereum provider to connect.
    */
   onConnect(n) {
-    this.ethereumProvider ? this.disconnect() : E(window, h.PROVIDER_RPC_REQUEST, this.processRpcCallFromWindow), this.ethereumProvider = n, this.processPendingRequests(), D.forEach((e) => {
-      n.on(e, (s) => this.onProviderEvent(e, s));
+    this.ethereumProvider ? this.disconnect() : f(window, h.PROVIDER_RPC_REQUEST, this.processRpcCallFromWindow), this.ethereumProvider = n, this.processPendingRequests(), D.forEach((t) => {
+      n.on(t, (s) => this.onProviderEvent(t, s));
     });
   }
   processPendingRequests() {
@@ -68,147 +78,183 @@ class W {
    * @param request - The JSON-RPC request to be processed.
    */
   processRpcRequest(n) {
-    const { id: e, jsonrpc: s, method: i } = n;
-    if (!this.ethereumProvider || !e)
+    const { id: t, jsonrpc: s, method: i } = n;
+    if (!this.ethereumProvider || !t)
       return;
-    (i === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request({ ...n, id: e })).then(
-      (o) => this.forwardRpcResponseToIframe({
-        rpcResponse: { jsonrpc: s, id: e, result: o }
+    (i === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request({ ...n, id: t })).then(
+      (r) => this.forwardRpcResponseToIframe({
+        rpcResponse: { jsonrpc: s, id: t, result: r }
       })
     ).catch(
-      (o) => this.forwardRpcResponseToIframe({
-        rpcResponse: { jsonrpc: s, id: e, error: o }
+      (r) => this.forwardRpcResponseToIframe({
+        rpcResponse: { jsonrpc: s, id: t, error: r }
       })
     );
   }
-  onProviderEvent(n, e) {
-    u(this.iframeWidow, d.PROVIDER_ON_EVENT, {
+  onProviderEvent(n, t) {
+    u(this.iframeWidow, p.PROVIDER_ON_EVENT, {
       event: n,
-      params: e
+      params: t
     });
   }
   /**
    * Forward a JSON-RPC message to the content window.
    */
   forwardRpcResponseToIframe(n) {
-    u(this.iframeWidow, d.PROVIDER_RPC_RESPONSE, n);
+    u(this.iframeWidow, p.PROVIDER_RPC_RESPONSE, n);
   }
 }
+function L(e) {
+  return !!(e && typeof e == "object");
+}
 const P = "_";
-function O(t) {
-  const n = typeof t.baseUrl == "string" ? t.baseUrl : "https://swap.cow.fi", e = A(t), s = I(t);
-  return n + "/#" + e + "?" + s;
+function V(e) {
+  const n = typeof e.baseUrl == "string" ? e.baseUrl : "https://swap.cow.fi", t = A(e);
+  return n + "/#" + t + "?" + v(e);
+}
+function A(e) {
+  const { chainId: n = 1, sell: t, buy: s, tradeType: i = g.SWAP } = e, o = [(t == null ? void 0 : t.asset) || P, (s == null ? void 0 : s.asset) || P].map(encodeURIComponent).join("/");
+  return `/${n}/widget/${i}/${o}`;
 }
-function A(t) {
-  const { chainId: n = 1, sell: e, buy: s, tradeType: i = _.SWAP } = t, r = [(e == null ? void 0 : e.asset) || P, (s == null ? void 0 : s.asset) || P].map(encodeURIComponent).join("/");
-  return `/${n}/widget/${i}/${r}`;
+function v(e) {
+  const n = new URLSearchParams();
+  return y(U(n, e), e);
 }
-function I(t) {
-  const { sell: n, buy: e, theme: s } = t, i = new URLSearchParams();
-  return n != null && n.amount && i.append("sellAmount", n.amount), e != null && e.amount && i.append("buyAmount", e.amount), s && i.append("theme", typeof s == "string" ? s : s.baseTheme), i;
+function U(e, n) {
+  const { sell: t, buy: s } = n;
+  return t != null && t.amount && e.append("sellAmount", t.amount), s != null && s.amount && e.append("buyAmount", s.amount), e;
 }
-class S {
+function y(e, n) {
+  const t = n.theme;
+  return t && (L(t) ? (e.append("palette", encodeURIComponent(JSON.stringify(t))), e.append("theme", t.baseTheme)) : e.append("theme", t)), e;
+}
+class b {
   constructor() {
     this.subscriptions = {};
   }
   on(n) {
-    const { event: e, handler: s } = n;
-    this.subscriptions[e] || (this.subscriptions[e] = []), this.subscriptions[e].push(s);
+    const { event: t, handler: s } = n;
+    this.subscriptions[t] || (this.subscriptions[t] = []), this.subscriptions[t].push(s);
   }
   off(n) {
-    const { event: e, handler: s } = n;
-    this.subscriptions[e] && (this.subscriptions[e] = this.subscriptions[e].filter((i) => i !== s));
+    const { event: t, handler: s } = n;
+    this.subscriptions[t] && (this.subscriptions[t] = this.subscriptions[t].filter((i) => i !== s));
   }
-  emit(n, e) {
-    this.subscriptions[n] && this.subscriptions[n].forEach((s) => s(e));
+  emit(n, t) {
+    this.subscriptions[n] && this.subscriptions[n].forEach((s) => s(t));
   }
 }
-let V = 1;
-class L {
-  constructor(n, e = []) {
-    this.contentWindow = n, this.eventEmitter = new S(), this.listeners = [], this.instanceNumber = V++, this.updateListeners(e), this.widgetListener = E(
+class N {
+  constructor(n, t = []) {
+    this.contentWindow = n, this.eventEmitter = new b(), this.listeners = [], this.updateListeners(t), this.widgetListener = f(
       this.contentWindow,
       h.EMIT_COW_EVENT,
       (s) => this.eventEmitter.emit(s.event, s.payload)
     );
   }
   stopListeningIframe() {
-    l(this.contentWindow, this.widgetListener);
+    _(this.contentWindow, this.widgetListener);
   }
   updateListeners(n) {
-    for (const e of this.listeners)
-      this.eventEmitter.off(e);
+    for (const t of this.listeners)
+      this.eventEmitter.off(t);
     this.listeners = n || [];
-    for (const e of this.listeners)
-      this.eventEmitter.on(e);
-  }
-}
-const g = "640px", U = "450px", N = 20;
-function H(t, n) {
-  const { params: e, provider: s, listeners: i } = n;
-  let r = s;
-  const o = b(e);
-  t.innerHTML = "", t.appendChild(o);
-  const { contentWindow: a } = o;
-  if (!a)
-    throw console.error("Iframe does not contain a window", o), new Error("Iframe does not contain a window!");
-  const p = [];
-  p.push(y(a, e.appCode)), p.push(F(o, e.height));
-  const m = new L(window, i);
-  let f = R(a, null, r);
-  return o.addEventListener("load", () => w(a, e, r)), {
-    updateParams: (c) => w(a, c, r),
-    updateListeners: (c) => m.updateListeners(c),
+    for (const t of this.listeners)
+      this.eventEmitter.on(t);
+  }
+}
+class M {
+  constructor(n, t) {
+    this.appWindow = n, this.iframeWidow = t, this.forwardSdkMessage = (s) => {
+      F(s.data) && (H(s.data) ? this.appWindow.parent.postMessage(s.data, "*") : k(s.data) && this.iframeWidow.postMessage(s.data, "*"));
+    }, this.startListening();
+  }
+  startListening() {
+    this.appWindow.addEventListener("message", this.forwardSdkMessage);
+  }
+  stopListening() {
+    this.appWindow.removeEventListener("message", this.forwardSdkMessage);
+  }
+}
+function F(e) {
+  return typeof e == "object" && e !== null && "id" in e && typeof e.id == "string";
+}
+function H(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 k(e) {
+  return "success" in e && typeof e.success == "boolean" && "version" in e && typeof e.version == "string";
+}
+const I = "640px", G = "450px", Q = 20;
+function K(e, n) {
+  const { params: t, provider: s, listeners: i } = n;
+  let o = s, r = t;
+  const a = x(t);
+  e.innerHTML = "", e.appendChild(a);
+  const { contentWindow: d } = a;
+  if (!d)
+    throw console.error("Iframe does not contain a window", a), new Error("Iframe does not contain a window!");
+  const E = [];
+  E.push(q(d, t.appCode)), E.push(B(a, t.height));
+  const w = new N(window, i);
+  let m = l(d, null, o);
+  a.addEventListener("load", () => R(d, r, o));
+  const C = new M(window, d);
+  return {
+    updateParams: (c) => {
+      r = c, R(d, r, o);
+    },
+    updateListeners: (c) => w.updateListeners(c),
     updateProvider: (c) => {
-      r = c, f = R(a, f, c);
+      o = c, m = l(d, m, c);
     },
     destroy: () => {
-      m.stopListeningIframe(), p.forEach((c) => window.removeEventListener("message", c)), t.removeChild(o);
+      m.disconnect(), w.stopListeningIframe(), E.forEach((c) => window.removeEventListener("message", c)), C.stopListening(), e.removeChild(a);
     }
   };
 }
-function R(t, n, e) {
+function l(e, n, t) {
   n && n.disconnect();
-  const s = n || new W(t);
-  return e && s.onConnect(e), s;
+  const s = n || new O(e);
+  return t && s.onConnect(t), s;
 }
-function b(t) {
-  const { width: n = U, height: e = g } = t, s = document.createElement("iframe");
-  return s.src = O(t), s.width = n, s.height = e, s.style.border = "0", s;
+function x(e) {
+  const { width: n = G, height: t = I } = e, s = document.createElement("iframe");
+  return s.src = V(e), s.width = n, s.height = t, s.style.border = "0", s;
 }
-function w(t, n, e) {
-  const s = !!e, i = A(n), r = I(n).toString();
-  u(t, d.UPDATE_PARAMS, {
+function R(e, n, t) {
+  const s = !!t, i = A(n), o = v(n).toString(), { theme: r, ...a } = n;
+  u(e, p.UPDATE_PARAMS, {
     urlParams: {
       pathname: i,
-      search: r
-    },
-    appParams: {
-      ...n
+      search: o
     },
+    appParams: a,
     hasProvider: s
   });
 }
-function y(t, n) {
-  const e = E(window, h.ACTIVATE, () => {
-    l(window, e), u(t, d.UPDATE_APP_DATA, {
+function q(e, n) {
+  const t = f(window, h.ACTIVATE, () => {
+    _(window, t), u(e, p.UPDATE_APP_DATA, {
       metaData: n ? { appCode: n } : void 0
     });
   });
-  return e;
+  return t;
 }
-function F(t, n = g) {
-  return E(window, h.UPDATE_HEIGHT, (e) => {
-    t.style.height = e.height ? `${e.height + N}px` : n;
+function B(e, n = I) {
+  return f(window, h.UPDATE_HEIGHT, (t) => {
+    e.style.height = t.height ? `${t.height + Q}px` : n;
   });
 }
 export {
-  _ as TradeType,
+  g as TradeType,
+  $ as WIDGET_PALETTE_COLORS,
   h as WidgetMethodsEmit,
-  d as WidgetMethodsListen,
-  H as createCowSwapWidget,
-  E as listenToMessageFromWindow,
+  p as WidgetMethodsListen,
+  K as createCowSwapWidget,
+  L as isCowSwapWidgetPalette,
+  f as listenToMessageFromWindow,
   u as postMessageToWindow,
-  C as stopListeningToMessageFromWindow,
-  l as stopListeningWindowListener
+  S as stopListeningToMessageFromWindow,
+  _ as stopListeningWindowListener
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.7.1",
+  "version": "0.9.0-RC.0",
   "type": "commonjs",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "main": "index.js",
@@ -21,6 +21,6 @@
     "widget-lib"
   ],
   "dependencies": {
-    "@cowprotocol/events": "^0.2.0"
+    "@cowprotocol/events": "^1.2.0"
   }
 }

package/themeUtils.d.ts

@@ -0,0 +1,2 @@
+import { CowSwapTheme, CowSwapWidgetPalette } from './types';
+export declare function isCowSwapWidgetPalette(palette: CowSwapTheme | CowSwapWidgetPalette | undefined): palette is CowSwapWidgetPalette;

package/types.d.ts

@@ -82,17 +82,61 @@ export interface PartnerFee {
      */
     recipient: string;
 }
-export interface CowSwapWidgetPalette {
+/**
+ * ERC-20 token information
+ */
+export type TokenInfo = {
+    chainId: number;
+    address: string;
+    name: string;
+    decimals: number;
+    symbol: string;
+    logoURI?: string;
+};
+export declare const WIDGET_PALETTE_COLORS: readonly ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"];
+export type CowSwapWidgetPaletteColors = (typeof WIDGET_PALETTE_COLORS)[number];
+export type CowSwapWidgetPaletteParams = {
+    [K in CowSwapWidgetPaletteColors]: string;
+};
+export type CowSwapWidgetPalette = {
     baseTheme: CowSwapTheme;
-    primary: string;
-    background: string;
-    paper: string;
-    text: string;
-    danger: string;
-    warning: string;
-    alert: string;
-    info: string;
-    success: string;
+} & CowSwapWidgetPaletteParams;
+export interface CowSwapWidgetSounds {
+    /**
+     * The sound to play when the order is executed. Defaults to world wide famous CoW Swap moooooooooo!
+     * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
+     */
+    postOrder?: string | null;
+    /**
+     * The sound to play when the order is executed. Defaults to world wide famous CoW Swap happy moooooooooo!
+     * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
+     */
+    orderExecuted?: string | null;
+    /**
+     * The sound to play when the order is executed. Defaults to world wide famous CoW Swap unhappy moooooooooo!
+     * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
+     */
+    orderError?: string | null;
+}
+export interface CowSwapWidgetImages {
+    /**
+     * The image to display when the orders table is empty (no orders yet). It defaults to "Yoga CoW" image.
+     * Alternatively, you can use a URL to a custom image file, or set to null to disable the image.
+     */
+    emptyOrders?: string | null;
+}
+export interface CowSwapWidgetBanners {
+    /**
+     * Banner text: "Use Safe web app..."
+     *
+     * Conditions for displaying the banner:
+     *  - Safe-like app is connected to CoW Swap via WalletConnect
+     *  - Selling native token via Swap
+     *  - Sell token needs approval
+     *
+     *  If the flag is set to true, the banner will not be displayed
+     */
+    hideSafeWebAppBanner?: boolean;
 }
 export interface CowSwapWidgetParams {
     /**
@@ -175,40 +219,22 @@ export interface CowSwapWidgetParams {
      * The theme of the widget UI.
      */
     theme?: CowSwapTheme | CowSwapWidgetPalette;
-    /**
-     * Allows to set a custom logo for the widget.
-     */
-    logoUrl?: string;
     /**
      * Customizable images for the widget.
      */
-    images?: {
-        /**
-         * The image to display when the orders table is empty (no orders yet). It defaults to "Yoga CoW" image.
-         * Alternatively, you can use a URL to a custom image file, or set to null to disable the image.
-         */
-        emptyOrders?: string | null;
-    };
+    images?: CowSwapWidgetImages;
     /**
      * Sounds configuration for the app.
      */
-    sounds?: {
-        /**
-         * The sound to play when the order is executed. Defaults to world wide famous CoW Swap moooooooooo!
-         * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
-         */
-        postOrder?: string | null;
-        /**
-         * The sound to play when the order is executed. Defaults to world wide famous CoW Swap happy moooooooooo!
-         * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
-         */
-        orderExecuted?: string | null;
-        /**
-         * The sound to play when the order is executed. Defaults to world wide famous CoW Swap unhappy moooooooooo!
-         * Alternatively, you can use a URL to a custom sound file, or set to null to disable the sound.
-         */
-        orderError?: string | null;
-    };
+    sounds?: CowSwapWidgetSounds;
+    /**
+     * Flags to control the display of banners in the widget.
+     */
+    banners?: CowSwapWidgetBanners;
+    /**
+     * In case when widget does not support some tokens, you can provide a list of tokens to be used in the widget
+     */
+    customTokens?: TokenInfo[];
 }
 export interface WidgetMethodsEmitPayloadMap {
     [WidgetMethodsEmit.ACTIVATE]: void;
@@ -224,12 +250,13 @@ export interface WidgetMethodsListenPayloadMap {
 }
 export type WidgetMethodsEmitPayloads = WidgetMethodsEmitPayloadMap[WidgetMethodsEmit];
 export type WidgetMethodsListenPayloads = WidgetMethodsListenPayloadMap[WidgetMethodsListen];
+export type CowSwapWidgetAppParams = Omit<CowSwapWidgetParams, 'theme'>;
 export interface UpdateParamsPayload {
     urlParams: {
         pathname: string;
         search: string;
     };
-    appParams: CowSwapWidgetParams;
+    appParams: CowSwapWidgetAppParams;
     hasProvider: boolean;
 }
 export interface UpdateAppDataPayload {

package/urlUtils.d.ts

@@ -1,4 +1,4 @@
 import { CowSwapWidgetParams } from './types';
 export declare function buildWidgetUrl(params: Partial<CowSwapWidgetParams>): string;
 export declare function buildWidgetPath(params: Partial<CowSwapWidgetParams>): string;
-export declare function buildTradeAmountsQuery(params: Partial<CowSwapWidgetParams>): URLSearchParams;
+export declare function buildWidgetUrlQuery(params: Partial<CowSwapWidgetParams>): URLSearchParams;