@cowprotocol/widget-lib 0.4.0 → 0.6.0-RC.0

package/IframeCowEventEmitter.d.ts

@@ -0,0 +1,11 @@
+import { CowEventListeners } from '@cowprotocol/events';
+export declare class IframeCowEventEmitter {
+    private contentWindow;
+    private eventEmitter;
+    private listeners;
+    private widgetListener;
+    private instanceNumber;
+    constructor(contentWindow: Window, listeners?: CowEventListeners);
+    stopListeningIframe(): void;
+    updateListeners(listeners?: CowEventListeners): void;
+}

package/IframeRpcProviderBridge.d.ts

@@ -0,0 +1,44 @@
+import { EthereumProvider, JsonRpcRequestMessage } from './types';
+/**
+ * Handles JSON-RPC request comming from an iFrame by delegating to a given Ethereum provider.
+ * The result will be passed back to the iFrame.
+ *
+ * Additionally, it will forward some special events from the wallet, to the iFrame window, for example connect/disconnect/chainChanged
+ */
+export declare class IframeRpcProviderBridge {
+    private iframeWidow;
+    /**
+     * The Ethereum provider instance.
+     * When is null the JSON-RPC bridge is disconnected from the Ethereum provider.
+     * */
+    private ethereumProvider;
+    /** Stored JSON-RPC requests, to queue them when disconnected. */
+    private requestWaitingForConnection;
+    /**
+     * 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(iframeWidow: Window);
+    /**
+     * Disconnects the JSON-RPC bridge from the Ethereum provider.
+     */
+    disconnect(): void;
+    /**
+     * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
+     * @param newProvider - The Ethereum provider to connect.
+     */
+    onConnect(newProvider: EthereumProvider): void;
+    private processPendingRequests;
+    /**
+     * Processes a JSON-RPC request and sends appropriate response or error via the content window.
+     * @param request - The JSON-RPC request to be processed.
+     */
+    processRpcRequest(request: JsonRpcRequestMessage): void;
+    private processRpcCallFromWindow;
+    private onProviderEvent;
+    /**
+     * Forward a JSON-RPC message to the content window.
+     */
+    private forwardRpcResponseToIframe;
+}

package/README.md

@@ -6,7 +6,7 @@ look and much more!
 
 ## Live example
 
-See the widget in action in the [widget configurator](../../apps/widget-configurator/src/main.tsx)
+See the widget in action in the [widget configurator](https://widget.cow.fi)
 
 ## Docs
 

package/cowSwapWidget.d.ts

@@ -1,12 +1,18 @@
-import { CowSwapWidgetParams } from './types';
+import { CowEventListeners } from '@cowprotocol/events';
+import { CowSwapWidgetParams, CowSwapWidgetProps, EthereumProvider } from './types';
 /**
  * Callback function signature for updating the CoW Swap Widget.
  */
-export type UpdateWidgetCallback = (params: CowSwapWidgetParams) => void;
+export interface CowSwapWidgetHandler {
+    updateParams: (params: CowSwapWidgetParams) => void;
+    updateListeners: (newListeners?: CowEventListeners) => void;
+    updateProvider: (newProvider?: EthereumProvider) => void;
+    destroy: () => void;
+}
 /**
  * Generates and injects a CoW Swap Widget into the provided container.
  * @param container - The HTML element to inject the widget into.
  * @param params - Parameters for configuring the widget.
  * @returns A callback function to update the widget with new settings.
  */
-export declare function cowSwapWidget(container: HTMLElement, params?: CowSwapWidgetParams): UpdateWidgetCallback;
+export declare function createCowSwapWidget(container: HTMLElement, props: CowSwapWidgetProps): CowSwapWidgetHandler;

package/index.d.ts

@@ -1,4 +1,5 @@
-export { cowSwapWidget } from './cowSwapWidget';
-export type { UpdateWidgetCallback } from './cowSwapWidget';
+export { createCowSwapWidget } from './cowSwapWidget';
+export type { CowSwapWidgetHandler } from './cowSwapWidget';
 export { COWSWAP_URLS } from './consts';
 export * from './types';
+export * from './messages';

package/index.iife.js

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

package/index.mjs

@@ -1,131 +1,223 @@
-const w = "2.0", m = "*", g = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
-class f {
+const R = "cowSwapWidget";
+function p(t, n, e) {
+  const i = {
+    key: R,
+    method: n,
+    ...typeof e == "object" ? e : {}
+  };
+  t.postMessage(
+    i,
+    "*"
+    // TODO: Change to CoW specific origin in production. https://github.com/cowprotocol/cowswap/issues/3828
+  );
+}
+function u(t, n, e) {
+  const s = (i) => {
+    !I(i.data) || i.data.key !== R || i.data.method !== n || e(i.data);
+  };
+  return t.addEventListener("message", s), s;
+}
+function I(t) {
+  return typeof t == "object" && t !== null && "key" in t && "method" in t && typeof t.key == "string" && typeof t.method == "string";
+}
+function C(t, n, e) {
+  t.removeEventListener("message", e);
+}
+function T(t, n) {
+  t.removeEventListener("message", n);
+}
+var d = /* @__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))(d || {}), h = /* @__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))(h || {}), _ = /* @__PURE__ */ ((t) => (t.SWAP = "swap", t.LIMIT = "limit", t.ADVANCED = "advanced", t))(_ || {});
+const D = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
+class W {
   /**
-   * Creates an instance of JsonRpcManager.
-   * @param contentWindow - The window for handling events.
+   * 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(t) {
-    this.contentWindow = t, this.ethereumProvider = null, this.requests = {}, this.processEvent = (e) => {
-      e.data.jsonrpc === "2.0" && (this.ethereumProvider ? this.processRequest(e.data) : this.requests[e.data.id] = e.data);
-    }, window.addEventListener("message", this.processEvent);
+  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);
+    };
   }
   /**
-   * Disconnects the JSON-RPC manager from the Ethereum provider.
+   * Disconnects the JSON-RPC bridge from the Ethereum provider.
    */
   disconnect() {
-    this.ethereumProvider = null, window.removeEventListener("message", this.processEvent);
+    this.ethereumProvider = null, C(window, d.PROVIDER_RPC_REQUEST, this.processRpcCallFromWindow);
   }
   /**
    * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
-   * @param ethereumProvider - The Ethereum provider to connect.
+   * @param newProvider - The Ethereum provider to connect.
    */
-  onConnect(t) {
-    this.ethereumProvider = t, Object.keys(this.requests).forEach((e) => {
-      this.processRequest(this.requests[e]);
-    }), this.requests = {}, g.forEach((e) => {
-      t.on(e, (n) => {
-        this.postMessage({ method: e, params: [n] });
-      });
+  onConnect(n) {
+    this.ethereumProvider ? this.disconnect() : u(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 = {};
+  }
   /**
    * Processes a JSON-RPC request and sends appropriate response or error via the content window.
    * @param request - The JSON-RPC request to be processed.
    */
-  processRequest(t) {
-    if (!this.ethereumProvider)
+  processRpcRequest(n) {
+    const { id: e, jsonrpc: s, method: i } = n;
+    if (!this.ethereumProvider || !e)
       return;
-    (t.method === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request(t)).then((n) => {
-      this.postMessage({ id: t.id, result: n });
-    }).catch((n) => {
-      this.postMessage({ id: t.id, error: n });
+    (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) {
+    p(this.iframeWidow, h.PROVIDER_ON_EVENT, {
+      event: n,
+      params: e
     });
   }
-  postMessage(t) {
-    this.contentWindow.postMessage(
-      {
-        jsonrpc: w,
-        ...t
-      },
-      m
-    );
+  /**
+   * Forward a JSON-RPC message to the content window.
+   */
+  forwardRpcResponseToIframe(n) {
+    p(this.iframeWidow, h.PROVIDER_RPC_RESPONSE, n);
   }
 }
-function l() {
+function O() {
   return typeof window > "u" || !window ? "" : `https://swap-dev-git-${window.location.hostname.replace("widget-configurator-git-", "").replace("-cowswap.vercel.app", "")}-cowswap.vercel.app`;
 }
-const E = {
+const S = {
   local: "http://localhost:3000",
   prod: "https://swap.cow.fi",
   dev: "https://dev.swap.cow.fi",
-  pr: l()
-};
-var d = /* @__PURE__ */ ((s) => (s.SWAP = "swap", s.LIMIT = "limit", s.ADVANCED = "advanced", s))(d || {});
-const r = "_";
-function v(s) {
-  const t = E[s.env || "prod"], e = h(s), n = p(s);
-  return t + "/#" + e + "?" + n;
-}
-function h(s) {
-  const { chainId: t = 1, sell: e, buy: n, tradeType: o = d.SWAP } = s, i = [(e == null ? void 0 : e.asset) || r, (n == null ? void 0 : n.asset) || r].map(encodeURIComponent).join("/");
-  return `/${t}/widget/${o}/${i}`;
-}
-function p(s) {
-  const { sell: t, buy: e, theme: n } = s, o = new URLSearchParams();
-  return t != null && t.amount && o.append("sellAmount", t.amount), e != null && e.amount && o.append("buyAmount", e.amount), n && o.append("theme", typeof n == "string" ? n : n.baseTheme), o;
-}
-const a = "cowSwapWidget", u = "640px", P = "450px", W = 20;
-function M(s, t = {}) {
-  const { provider: e } = t, n = y(t);
-  s.innerHTML = "", s.appendChild(n);
-  const { contentWindow: o } = n;
-  if (!o)
-    throw new Error("Iframe does not contain a window!");
-  return T(o, t.appCode), A(n, t.height), e && new f(o).onConnect(e), n.addEventListener("load", () => {
-    c(t, o);
-  }), (i) => c(i, o);
-}
-function y(s) {
-  const { width: t = P, height: e = u } = s, n = document.createElement("iframe");
-  return n.src = v(s), n.width = t, n.height = e, n.style.border = "0", n;
-}
-function c(s, t) {
-  const e = h(s), n = p(s).toString();
-  t.postMessage(
-    {
-      key: a,
-      method: "update",
-      urlParams: {
-        pathname: e,
-        search: n
-      },
-      appParams: {
-        ...s,
-        provider: void 0
-      }
-    },
-    "*"
-  );
+  pr: O()
+}, w = "_";
+function V(t) {
+  const n = S[t.env || "prod"], e = A(t), s = v(t);
+  return n + "/#" + e + "?" + s;
 }
-function T(s, t) {
-  window.addEventListener("message", (e) => {
-    e.data.key !== a || e.data.method !== "activate" || s.postMessage(
-      {
-        key: a,
-        method: "metaData",
-        metaData: t ? { appCode: t } : void 0
-      },
-      "*"
+function A(t) {
+  const { chainId: n = 1, sell: e, buy: s, tradeType: i = _.SWAP } = t, r = [(e == null ? void 0 : e.asset) || w, (s == null ? void 0 : s.asset) || w].map(encodeURIComponent).join("/");
+  return `/${n}/widget/${i}/${r}`;
+}
+function v(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 U = 1;
+class y {
+  constructor(n, e = []) {
+    this.contentWindow = n, this.eventEmitter = new L(), this.listeners = [], this.instanceNumber = U++, this.updateListeners(e), this.widgetListener = u(
+      this.contentWindow,
+      d.EMIT_COW_EVENT,
+      (s) => this.eventEmitter.emit(s.event, s.payload)
     );
+  }
+  stopListeningIframe() {
+    T(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", N = "450px", H = 20;
+function M(t, n) {
+  const { params: e, provider: s, listeners: i } = n;
+  let r = s;
+  const o = F(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 E = [];
+  E.push(b(a, e.appCode)), E.push(q(o, e.height));
+  const m = new y(window, i);
+  let f = P(a, null, r);
+  return o.addEventListener("load", () => l(a, e, r)), {
+    updateParams: (c) => l(a, c, r),
+    updateListeners: (c) => m.updateListeners(c),
+    updateProvider: (c) => {
+      r = c, f = P(a, f, c);
+    },
+    destroy: () => {
+      m.stopListeningIframe(), E.forEach((c) => window.removeEventListener("message", c)), t.removeChild(o);
+    }
+  };
+}
+function P(t, n, e) {
+  n && n.disconnect();
+  const s = n || new W(t);
+  return e && s.onConnect(e), s;
+}
+function F(t) {
+  const { width: n = N, height: e = g } = t, s = document.createElement("iframe");
+  return s.src = V(t), s.width = n, s.height = e, s.style.border = "0", s;
+}
+function l(t, n, e) {
+  const s = !!e, i = A(n), r = v(n).toString();
+  p(t, h.UPDATE_PARAMS, {
+    urlParams: {
+      pathname: i,
+      search: r
+    },
+    appParams: {
+      ...n
+    },
+    hasProvider: s
+  });
+}
+function b(t, n) {
+  const e = u(window, d.ACTIVATE, () => {
+    T(window, e), p(t, h.UPDATE_APP_DATA, {
+      metaData: n ? { appCode: n } : void 0
+    });
   });
+  return e;
 }
-function A(s, t = u) {
-  window.addEventListener("message", (e) => {
-    e.data.key !== a || e.data.method !== "iframeHeight" || (s.style.height = e.data.height ? `${e.data.height + W}px` : t);
+function q(t, n = g) {
+  return u(window, d.UPDATE_HEIGHT, (e) => {
+    t.style.height = e.height ? `${e.height + H}px` : n;
   });
 }
 export {
-  E as COWSWAP_URLS,
-  d as TradeType,
-  M as cowSwapWidget
+  S as COWSWAP_URLS,
+  _ as TradeType,
+  d as WidgetMethodsEmit,
+  h as WidgetMethodsListen,
+  M as createCowSwapWidget,
+  u as listenToMessageFromWindow,
+  p as postMessageToWindow,
+  C as stopListeningToMessageFromWindow,
+  T as stopListeningWindowListener
 };

package/messages.d.ts

@@ -0,0 +1,9 @@
+import { WidgetMethodsEmit, WidgetMethodsEmitPayloadMap, WidgetMethodsListen, WidgetMethodsListenPayloadMap } from './types';
+export declare function postMessageToWindow<T extends WidgetMethodsEmit>(contentWindow: Window, method: T, payload: WidgetMethodsEmitPayloadMap[T]): void;
+export declare function postMessageToWindow<T extends WidgetMethodsListen>(contentWindow: Window, method: T, payload: WidgetMethodsListenPayloadMap[T]): void;
+export type WindowListener = (event: MessageEvent<unknown>) => void;
+export declare function listenToMessageFromWindow<T extends WidgetMethodsListen>(contentWindow: Window, method: T, callback: (payload: WidgetMethodsListenPayloadMap[T]) => void): WindowListener;
+export declare function listenToMessageFromWindow<T extends WidgetMethodsEmit>(contentWindow: Window, method: T, callback: (payload: WidgetMethodsEmitPayloadMap[T]) => void): WindowListener;
+export declare function stopListeningToMessageFromWindow<T extends WidgetMethodsListen>(contentWindow: Window, method: T, callback: (payload: WidgetMethodsListenPayloadMap[T]) => void): void;
+export declare function stopListeningToMessageFromWindow<T extends WidgetMethodsEmit>(contentWindow: Window, method: T, callback: (payload: WidgetMethodsEmitPayloadMap[T]) => void): void;
+export declare function stopListeningWindowListener(contentWindow: Window, callback: WindowListener): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.4.0",
+  "version": "0.6.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",

package/types.d.ts

@@ -1,4 +1,23 @@
 import type { SupportedChainId } from '@cowprotocol/cow-sdk';
+import { CowEventListeners, CowEventPayloadMap, CowEvents } from '@cowprotocol/events';
+export type { SupportedChainId } from '@cowprotocol/cow-sdk';
+export declare enum WidgetMethodsEmit {
+    ACTIVATE = "ACTIVATE",
+    UPDATE_HEIGHT = "UPDATE_HEIGHT",
+    EMIT_COW_EVENT = "EMIT_COW_EVENT",
+    PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST"
+}
+export declare enum WidgetMethodsListen {
+    UPDATE_PARAMS = "UPDATE_PARAMS",
+    UPDATE_APP_DATA = "UPDATE_APP_DATA",
+    PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE",
+    PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT"
+}
+export interface CowSwapWidgetProps {
+    params: CowSwapWidgetParams;
+    provider?: EthereumProvider;
+    listeners?: CowEventListeners;
+}
 export interface JsonRpcRequest {
     id: number;
     method: string;
@@ -49,6 +68,21 @@ export declare enum TradeType {
      */
     ADVANCED = "advanced"
 }
+/**
+ * The partner fee
+ *
+ * Please contact https://cowprotocol.typeform.com/to/rONXaxHV
+ */
+export interface PartnerFee {
+    /**
+     * The fee in basis points (BPS). One basis point is equivalent to 0.01% (1/100th of a percent)
+     */
+    bps: number;
+    /**
+     * The Ethereum address of the partner to receive the fee.
+     */
+    recipient: string;
+}
 export interface CowSwapWidgetPalette {
     baseTheme: CowSwapTheme;
     primary: string;
@@ -61,75 +95,184 @@ export interface CowSwapWidgetPalette {
     info: string;
     success: string;
 }
-interface CowSwapWidgetConfig {
-    /**
-     * The width of the widget in pixels. Default: 400px
-     */
-    width: string;
-    /**
-     * The height of the widget in pixels. Default: 600px
-     */
-    height: string;
+export interface CowSwapWidgetParams {
     /**
      * The unique identifier of the widget consumer.
      * Please fill the for to let us know a little about you: https://cowprotocol.typeform.com/to/rONXaxHV
      */
     appCode: string;
     /**
-     * The widget might be connected to a custom Ethereum provider.
+     * The width of the widget in pixels. Default: 400px
      */
-    provider: EthereumProvider;
+    width?: string;
+    /**
+     * The height of the widget in pixels. Default: 600px
+     */
+    height?: string;
     /**
      * Network ID.
      */
-    chainId: SupportedChainId;
+    chainId?: SupportedChainId;
     /**
      * The token lists urls to use in the widget
      */
-    tokenLists: string[];
+    tokenLists?: string[];
     /**
      * Swap, Limit or Advanced (Twap).
      */
-    tradeType: TradeType;
+    tradeType?: TradeType;
     /**
      * The environment of the widget. Default: prod
      */
-    env: CowSwapWidgetEnv;
+    env?: CowSwapWidgetEnv;
     /**
      * Sell token, and optionally the amount.
      */
-    sell: TradeAsset;
+    sell?: TradeAsset;
     /**
      * Buy token, and optionally the amount.
      */
-    buy: TradeAsset;
+    buy?: TradeAsset;
     /**
-     * The theme of the widget UI.
+     * Enables the ability to switch between trade types in the widget.
      */
-    theme: CowSwapTheme | CowSwapWidgetPalette;
+    enabledTradeTypes?: TradeType[];
     /**
-     * Allows to set a custom logo for the widget.
+     * The partner fee
+     *
+     * Please contact https://cowprotocol.typeform.com/to/rONXaxHV
+     */
+    partnerFee?: PartnerFee;
+    /**
+     * Disables showing the confirmation modal you get after posting an order.
+     * Defaults to false.
+     */
+    disablePostedOrderConfirmationModal?: boolean;
+    /**
+     * Disables showing the toast messages.
+     * Some UI might want to disable it and subscribe to WidgetMethodsEmit.ON_TOAST_MESSAGE event to handle the toast messages itself.
+     * Defaults to false.
      */
-    logoUrl: string;
+    disableToastMessages?: boolean;
     /**
      * Option to hide the logo in the widget.
      */
-    hideLogo: boolean;
+    hideLogo?: boolean;
     /**
      * Option to hide the network selector in the widget.
      */
-    hideNetworkSelector: boolean;
+    hideNetworkSelector?: boolean;
     /**
-     * Enables the ability to switch between trade types in the widget.
+     * Hides the connect buttons, and the connected account button. Defaults to false.
      */
-    enabledTradeTypes: TradeType[];
+    hideConnectButton?: boolean;
     /**
-     * The interface fee in basis points.
-     * For example: 1.5% = 150 bips
-     *
-     * Please contact https://cowprotocol.typeform.com/to/rONXaxHV
+     * 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.
      */
-    interfaceFeeBips: string;
+    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;
+    };
+    /**
+     * 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;
+    };
+}
+export interface WidgetMethodsEmitPayloadMap {
+    [WidgetMethodsEmit.ACTIVATE]: void;
+    [WidgetMethodsEmit.EMIT_COW_EVENT]: EmitCowEventPayload<CowEvents>;
+    [WidgetMethodsEmit.UPDATE_HEIGHT]: UpdateWidgetHeightPayload;
+    [WidgetMethodsEmit.PROVIDER_RPC_REQUEST]: ProviderRpcRequestPayload;
+}
+export interface WidgetMethodsListenPayloadMap {
+    [WidgetMethodsListen.UPDATE_APP_DATA]: UpdateAppDataPayload;
+    [WidgetMethodsListen.UPDATE_PARAMS]: UpdateParamsPayload;
+    [WidgetMethodsListen.PROVIDER_RPC_RESPONSE]: ProviderRpcResponsePayload;
+    [WidgetMethodsListen.PROVIDER_ON_EVENT]: ProviderOnEventPayload;
+}
+export type WidgetMethodsEmitPayloads = WidgetMethodsEmitPayloadMap[WidgetMethodsEmit];
+export type WidgetMethodsListenPayloads = WidgetMethodsListenPayloadMap[WidgetMethodsListen];
+export interface UpdateParamsPayload {
+    urlParams: {
+        pathname: string;
+        search: string;
+    };
+    appParams: CowSwapWidgetParams;
+    hasProvider: boolean;
+}
+export interface UpdateAppDataPayload {
+    metaData?: {
+        appCode: string;
+    };
+}
+export interface UpdateWidgetHeightPayload {
+    height?: number;
+}
+export interface EmitCowEventPayload<T extends CowEvents> {
+    event: T;
+    payload: CowEventPayloadMap[T];
+}
+export type WidgetMethodsEmitListener<T extends WidgetMethodsEmit> = T extends WidgetMethodsEmit ? {
+    event: T;
+    handler: WidgetMethodHandler<T>;
+} : never;
+export type WidgetMethodHandler<T extends WidgetMethodsEmit> = (payload: WidgetMethodsEmitPayloadMap[T]) => void;
+export interface ProviderRpcRequestPayload {
+    rpcRequest: JsonRpcRequestMessage;
+}
+export interface JsonRpcRequestMessage {
+    jsonrpc: '2.0';
+    id?: number;
+    method: string;
+    params: unknown[];
+}
+export interface BaseJsonRpcResponseMessage {
+    id: number;
+    jsonrpc: '2.0';
+}
+export interface JsonRpcSucessfulResponseMessage<TResult = unknown> extends BaseJsonRpcResponseMessage {
+    result: TResult;
+}
+export interface JsonRpcError<TData = unknown> {
+    code: number;
+    message: string;
+    data?: TData;
+}
+export interface JsonRpcErrorResponseMessage<TErrorData = unknown> extends BaseJsonRpcResponseMessage {
+    error: JsonRpcError<TErrorData>;
+}
+export type ProviderRpcResponsePayload = {
+    rpcResponse: JsonRpcResponse;
+};
+export type JsonRpcResponse = JsonRpcRequestMessage | JsonRpcErrorResponseMessage | JsonRpcSucessfulResponseMessage;
+export interface ProviderOnEventPayload {
+    event: string;
+    params: unknown;
 }
-export type CowSwapWidgetParams = Partial<CowSwapWidgetConfig>;
-export {};

package/urlUtils.d.ts

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

package/JsonRpcManager.d.ts

@@ -1,35 +0,0 @@
-import { EthereumProvider, JsonRpcRequest } from './types';
-/**
- * Manages JSON-RPC requests and interactions with an Ethereum provider.
- */
-export declare class JsonRpcManager {
-    private contentWindow;
-    /**
-     * The Ethereum provider instance.
-     * When is null the JSON-RPC manager is disconnected from the Ethereum provider.
-     * */
-    private ethereumProvider;
-    /** Stored JSON-RPC requests. */
-    private requests;
-    /**
-     * Creates an instance of JsonRpcManager.
-     * @param contentWindow - The window for handling events.
-     */
-    constructor(contentWindow: Window);
-    /**
-     * Disconnects the JSON-RPC manager from the Ethereum provider.
-     */
-    disconnect(): void;
-    /**
-     * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
-     * @param ethereumProvider - The Ethereum provider to connect.
-     */
-    onConnect(ethereumProvider: EthereumProvider): void;
-    /**
-     * Processes a JSON-RPC request and sends appropriate response or error via the content window.
-     * @param request - The JSON-RPC request to be processed.
-     */
-    processRequest(request: JsonRpcRequest): void;
-    private processEvent;
-    private postMessage;
-}