@cowprotocol/widget-lib 0.1.2 → 0.1.4

package/JsonRpcManager.d.ts

@@ -1,13 +1,34 @@
 import { EthereumProvider, JsonRpcRequest } from './types';
+/**
+ * Manages JSON-RPC requests and interactions with an Ethereum provider.
+ */
 export declare class JsonRpcManager {
     private contentWindow;
-    ethereumProvider: EthereumProvider | null;
-    requests: {
-        [key: string]: JsonRpcRequest;
-    };
+    /**
+     * 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;

package/README.md

@@ -31,29 +31,27 @@ Create a container somewhere in your website, the widget will be rendered inside
 Import the widget and initialise it:
 
 ```js
-import { cowSwapWidget } from '@cowprotocol/widget-lib'
+import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'
 
 // Initialise the widget
 const widgetContainer = document.getElementById('cowswap-widget')
 
-const updateWidget = cowSwapWidget({
-  container: widgetContainer,
-  width: 600,
-  height: 640,
-  metaData: {
-    appKey: '<YOUR_APP_KEY>', // Just an unique identifier for your app,
-    appUrl: '<YOUR_APP_URL>'
-  },
-// Optionally, you can provide some additional params to customise your widget
-}, {
+const params: CowSwapWidgetParams = {
+  appKey: '<YOUR_APP_KEY>', // Just an unique identifier for your app
   sell: { asset: 'DAI' },
   buy: { asset: 'USDC', amount: '0.1' },
   // instantiate your own web3 provider
   provider: window.ethereum
-})
+}
+
+const updateWidget = cowSwapWidget(
+  widgetContainer,
+  // Optionally, you can provide some additional params to customise your widget
+  params
+)
 
 // You also can change widget configuration on the fly
-updateWidget({ tradeType: 'limit' })
+updateWidget({ ...params, tradeType: 'limit' })
 ```
 
 ## Developers

package/cowSwapWidget.d.ts

@@ -1,3 +1,12 @@
-import { CowSwapWidgetParams, CowSwapWidgetSettings } from './types';
-export type UpdateWidgetCallback = (params: CowSwapWidgetSettings) => void;
-export declare function cowSwapWidget(params: CowSwapWidgetParams, settings: CowSwapWidgetSettings): UpdateWidgetCallback;
+import { CowSwapWidgetParams } from './types';
+/**
+ * Callback function signature for updating the CoW Swap Widget.
+ */
+export type UpdateWidgetCallback = (params: CowSwapWidgetParams) => 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;

package/index.iife.js

@@ -1 +1 @@
-var cowSwapWidget=function(i){"use strict";const l="2.0",w="*",g=["connect","disconnect","close","chainChanged","accountsChanged"];class f{constructor(n){this.contentWindow=n,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(n){this.ethereumProvider=n,Object.keys(this.requests).forEach(e=>{this.processRequest(this.requests[e])}),this.requests={},g.forEach(e=>{n.on(e,s=>{this.postMessage({method:e,params:[s]})})})}processRequest(n){if(!this.ethereumProvider)return;(n.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(n)).then(s=>{this.postMessage({id:n.id,result:s})}).catch(s=>{this.postMessage({id:n.id,error:s})})}postMessage(n){this.contentWindow.postMessage({jsonrpc:l,...n},w)}}const d={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:window.location.origin};var c=(t=>(t.SWAP="swap",t.LIMIT="limit",t.ADVANCED="advanced",t))(c||{});function E(t){const n=d[t.env||"prod"],e=h(t),s=u(t);return n+"/#"+e+"?"+s}function h(t){const{chainId:n=1,tradeAssets:e,tradeType:s=c.SWAP}=t,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${n}/widget/${s}/${o}`}function u(t){const{tradeAssets:n,theme:e}=t,s=new URLSearchParams;if(n){const{sell:o,buy:a}=n;o.amount&&s.append("sellAmount",o.amount),a.amount&&s.append("buyAmount",a.amount)}return e&&s.append("theme",e),s}const r="cowSwapWidget";function y(t,n){const{container:e,provider:s}=t,o=W(t,n);e.innerHTML="",e.appendChild(o);const{contentWindow:a}=o;if(!a)throw new Error("Iframe does not contain a window!");return P(a,t.metaData),v(o,t.height),s&&new f(a).onConnect(s),o.addEventListener("load",()=>{p(n,a,o)}),m=>p(m,a,o)}function W(t,n){const{width:e,height:s}=t,o=document.createElement("iframe");return o.src=E(n),o.width=`${e}px`,o.height=`${s}px`,o.style.border="0",o}function p(t,n,e){const s=h(t),o=u(t).toString();t.dynamicHeightEnabled||(e.style.height=""),n.postMessage({key:r,method:"update",urlParams:{pathname:s,search:o},appParams:t},"*")}function P(t,n){window.addEventListener("message",e=>{e.data.key!==r||e.data.method!=="activate"||t.postMessage({key:r,method:"metaData",metaData:n},"*")})}function v(t,n){window.addEventListener("message",e=>{if(e.data.key!==r||e.data.method!=="iframeHeight")return;const s=e.data.height||n;t.style.height=`${s}px`})}return i.COWSWAP_URLS=d,i.TradeType=c,i.cowSwapWidget=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({});
+var cowSwapWidget=function(i){"use strict";const g="2.0",l="*",m=["connect","disconnect","close","chainChanged","accountsChanged"];class f{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={},m.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},l)}}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 d={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:E()};var c=(s=>(s.SWAP="swap",s.LIMIT="limit",s.ADVANCED="advanced",s))(c||{});function v(s){const t=d[s.env||"prod"],e=h(s),n=u(s);return t+"/#"+e+"?"+n}function h(s){const{chainId:t=1,tradeAssets:e,tradeType:n=c.SWAP}=s,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${t}/widget/${n}/${o}`}function u(s){const{tradeAssets:t,theme:e}=s,n=new URLSearchParams;if(t){const{sell:o,buy:a}=t;o.amount&&n.append("sellAmount",o.amount),a.amount&&n.append("buyAmount",a.amount)}return e&&n.append("theme",e),n}const r="cowSwapWidget",p="640px",y="450px";function W(s,t={}){const{provider:e}=t,n=P(t);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return S(o,t.appKey),A(n,t.height),e&&new f(o).onConnect(e),n.addEventListener("load",()=>{w(t,o)}),a=>w(a,o)}function P(s){const{width:t=y,height:e=p}=s,n=document.createElement("iframe");return n.src=v(s),n.width=t,n.height=e,n.style.border="0",n}function w(s,t){const e=h(s),n=u(s).toString();t.postMessage({key:r,method:"update",urlParams:{pathname:e,search:n},appParams:{...s,provider:void 0}},"*")}function S(s,t){window.addEventListener("message",e=>{e.data.key!==r||e.data.method!=="activate"||s.postMessage({key:r,method:"metaData",metaData:t?{appKey:t}:void 0},"*")})}function A(s,t=p){window.addEventListener("message",e=>{e.data.key!==r||e.data.method!=="iframeHeight"||(s.style.height=e.data.height?`${e.data.height}px`:t)})}return i.COWSWAP_URLS=d,i.TradeType=c,i.cowSwapWidget=W,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({});

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m="2.0",l="*",g=["connect","disconnect","close","chainChanged","accountsChanged"];class w{constructor(s){this.contentWindow=s,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(s){this.ethereumProvider=s,Object.keys(this.requests).forEach(e=>{this.processRequest(this.requests[e])}),this.requests={},g.forEach(e=>{s.on(e,n=>{this.postMessage({method:e,params:[n]})})})}processRequest(s){if(!this.ethereumProvider)return;(s.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(s)).then(n=>{this.postMessage({id:s.id,result:n})}).catch(n=>{this.postMessage({id:s.id,error:n})})}postMessage(s){this.contentWindow.postMessage({jsonrpc:m,...s},l)}}const h={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:window.location.origin};var r=(t=>(t.SWAP="swap",t.LIMIT="limit",t.ADVANCED="advanced",t))(r||{});function f(t){const s=h[t.env||"prod"],e=u(t),n=p(t);return s+"/#"+e+"?"+n}function u(t){const{chainId:s=1,tradeAssets:e,tradeType:n=r.SWAP}=t,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${s}/widget/${n}/${o}`}function p(t){const{tradeAssets:s,theme:e}=t,n=new URLSearchParams;if(s){const{sell:o,buy:a}=s;o.amount&&n.append("sellAmount",o.amount),a.amount&&n.append("buyAmount",a.amount)}return e&&n.append("theme",e),n}const i="cowSwapWidget";function E(t,s){const{container:e,provider:n}=t,o=y(t,s);e.innerHTML="",e.appendChild(o);const{contentWindow:a}=o;if(!a)throw new Error("Iframe does not contain a window!");return P(a,t.metaData),W(o,t.height),n&&new w(a).onConnect(n),o.addEventListener("load",()=>{d(s,a,o)}),c=>d(c,a,o)}function y(t,s){const{width:e,height:n}=t,o=document.createElement("iframe");return o.src=f(s),o.width=`${e}px`,o.height=`${n}px`,o.style.border="0",o}function d(t,s,e){const n=u(t),o=p(t).toString();t.dynamicHeightEnabled||(e.style.height=""),s.postMessage({key:i,method:"update",urlParams:{pathname:n,search:o},appParams:t},"*")}function P(t,s){window.addEventListener("message",e=>{e.data.key!==i||e.data.method!=="activate"||t.postMessage({key:i,method:"metaData",metaData:s},"*")})}function W(t,s){window.addEventListener("message",e=>{if(e.data.key!==i||e.data.method!=="iframeHeight")return;const n=e.data.height||s;t.style.height=`${n}px`})}exports.COWSWAP_URLS=h;exports.TradeType=r;exports.cowSwapWidget=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w="2.0",g="*",l=["connect","disconnect","close","chainChanged","accountsChanged"];class m{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:w,...t},g)}}function f(){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:f()};var r=(s=>(s.SWAP="swap",s.LIMIT="limit",s.ADVANCED="advanced",s))(r||{});function E(s){const t=d[s.env||"prod"],e=h(s),n=u(s);return t+"/#"+e+"?"+n}function h(s){const{chainId:t=1,tradeAssets:e,tradeType:n=r.SWAP}=s,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${t}/widget/${n}/${o}`}function u(s){const{tradeAssets:t,theme:e}=s,n=new URLSearchParams;if(t){const{sell:o,buy:i}=t;o.amount&&n.append("sellAmount",o.amount),i.amount&&n.append("buyAmount",i.amount)}return e&&n.append("theme",e),n}const a="cowSwapWidget",p="640px",v="450px";function y(s,t={}){const{provider:e}=t,n=P(t);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return W(o,t.appKey),A(n,t.height),e&&new m(o).onConnect(e),n.addEventListener("load",()=>{c(t,o)}),i=>c(i,o)}function P(s){const{width:t=v,height:e=p}=s,n=document.createElement("iframe");return n.src=E(s),n.width=t,n.height=e,n.style.border="0",n}function c(s,t){const e=h(s),n=u(s).toString();t.postMessage({key:a,method:"update",urlParams:{pathname:e,search:n},appParams:{...s,provider:void 0}},"*")}function W(s,t){window.addEventListener("message",e=>{e.data.key!==a||e.data.method!=="activate"||s.postMessage({key:a,method:"metaData",metaData:t?{appKey:t}:void 0},"*")})}function A(s,t=p){window.addEventListener("message",e=>{e.data.key!==a||e.data.method!=="iframeHeight"||(s.style.height=e.data.height?`${e.data.height}px`:t)})}exports.COWSWAP_URLS=d;exports.TradeType=r;exports.cowSwapWidget=y;

package/index.mjs

@@ -1,116 +1,134 @@
-const p = "2.0", m = "*", l = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
-class w {
-  constructor(s) {
-    this.contentWindow = s, this.ethereumProvider = null, this.requests = {}, this.processEvent = (e) => {
+const p = "2.0", w = "*", m = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
+class g {
+  /**
+   * Creates an instance of JsonRpcManager.
+   * @param contentWindow - The window for handling events.
+   */
+  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);
   }
+  /**
+   * Disconnects the JSON-RPC manager from the Ethereum provider.
+   */
   disconnect() {
     this.ethereumProvider = null, window.removeEventListener("message", this.processEvent);
   }
-  onConnect(s) {
-    this.ethereumProvider = s, Object.keys(this.requests).forEach((e) => {
+  /**
+   * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
+   * @param ethereumProvider - The Ethereum provider to connect.
+   */
+  onConnect(t) {
+    this.ethereumProvider = t, Object.keys(this.requests).forEach((e) => {
       this.processRequest(this.requests[e]);
-    }), this.requests = {}, l.forEach((e) => {
-      s.on(e, (n) => {
+    }), this.requests = {}, m.forEach((e) => {
+      t.on(e, (n) => {
         this.postMessage({ method: e, params: [n] });
       });
     });
   }
-  processRequest(s) {
+  /**
+   * 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)
       return;
-    (s.method === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request(s)).then((n) => {
-      this.postMessage({ id: s.id, result: n });
+    (t.method === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request(t)).then((n) => {
+      this.postMessage({ id: t.id, result: n });
     }).catch((n) => {
-      this.postMessage({ id: s.id, error: n });
+      this.postMessage({ id: t.id, error: n });
     });
   }
-  postMessage(s) {
+  postMessage(t) {
     this.contentWindow.postMessage(
       {
         jsonrpc: p,
-        ...s
+        ...t
       },
-      m
+      w
     );
   }
 }
+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 f = {
   local: "http://localhost:3000",
   prod: "https://swap.cow.fi",
   dev: "https://dev.swap.cow.fi",
-  pr: window.location.origin
+  pr: l()
 };
-var d = /* @__PURE__ */ ((t) => (t.SWAP = "swap", t.LIMIT = "limit", t.ADVANCED = "advanced", t))(d || {});
-function g(t) {
-  const s = f[t.env || "prod"], e = h(t), n = u(t);
-  return s + "/#" + e + "?" + n;
+var c = /* @__PURE__ */ ((s) => (s.SWAP = "swap", s.LIMIT = "limit", s.ADVANCED = "advanced", s))(c || {});
+function E(s) {
+  const t = f[s.env || "prod"], e = d(s), n = h(s);
+  return t + "/#" + e + "?" + n;
 }
-function h(t) {
-  const { chainId: s = 1, tradeAssets: e, tradeType: n = d.SWAP } = t, o = e ? [e.sell.asset, e.buy.asset].map(encodeURIComponent).join("/") : "";
-  return `/${s}/widget/${n}/${o}`;
+function d(s) {
+  const { chainId: t = 1, tradeAssets: e, tradeType: n = c.SWAP } = s, o = e ? [e.sell.asset, e.buy.asset].map(encodeURIComponent).join("/") : "";
+  return `/${t}/widget/${n}/${o}`;
 }
-function u(t) {
-  const { tradeAssets: s, theme: e } = t, n = new URLSearchParams();
-  if (s) {
-    const { sell: o, buy: a } = s;
-    o.amount && n.append("sellAmount", o.amount), a.amount && n.append("buyAmount", a.amount);
+function h(s) {
+  const { tradeAssets: t, theme: e } = s, n = new URLSearchParams();
+  if (t) {
+    const { sell: o, buy: i } = t;
+    o.amount && n.append("sellAmount", o.amount), i.amount && n.append("buyAmount", i.amount);
   }
   return e && n.append("theme", e), n;
 }
-const i = "cowSwapWidget";
-function v(t, s) {
-  const { container: e, provider: n } = t, o = E(t, s);
-  e.innerHTML = "", e.appendChild(o);
-  const { contentWindow: a } = o;
-  if (!a)
+const a = "cowSwapWidget", u = "640px", v = "450px";
+function A(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 y(a, t.metaData), P(o, t.height), n && new w(a).onConnect(n), o.addEventListener("load", () => {
-    c(s, a, o);
-  }), (r) => c(r, a, o);
+  return P(o, t.appKey), W(n, t.height), e && new g(o).onConnect(e), n.addEventListener("load", () => {
+    r(t, o);
+  }), (i) => r(i, o);
 }
-function E(t, s) {
-  const { width: e, height: n } = t, o = document.createElement("iframe");
-  return o.src = g(s), o.width = `${e}px`, o.height = `${n}px`, o.style.border = "0", o;
+function y(s) {
+  const { width: t = v, height: e = u } = s, n = document.createElement("iframe");
+  return n.src = E(s), n.width = t, n.height = e, n.style.border = "0", n;
 }
-function c(t, s, e) {
-  const n = h(t), o = u(t).toString();
-  t.dynamicHeightEnabled || (e.style.height = ""), s.postMessage(
+function r(s, t) {
+  const e = d(s), n = h(s).toString();
+  t.postMessage(
     {
-      key: i,
+      key: a,
       method: "update",
       urlParams: {
-        pathname: n,
-        search: o
+        pathname: e,
+        search: n
       },
-      appParams: t
+      appParams: {
+        ...s,
+        provider: void 0
+      }
     },
     "*"
   );
 }
-function y(t, s) {
+function P(s, t) {
   window.addEventListener("message", (e) => {
-    e.data.key !== i || e.data.method !== "activate" || t.postMessage(
+    e.data.key !== a || e.data.method !== "activate" || s.postMessage(
       {
-        key: i,
+        key: a,
         method: "metaData",
-        metaData: s
+        metaData: t ? { appKey: t } : void 0
       },
       "*"
     );
   });
 }
-function P(t, s) {
+function W(s, t = u) {
   window.addEventListener("message", (e) => {
-    if (e.data.key !== i || e.data.method !== "iframeHeight")
-      return;
-    const n = e.data.height || s;
-    t.style.height = `${n}px`;
+    e.data.key !== a || e.data.method !== "iframeHeight" || (s.style.height = e.data.height ? `${e.data.height}px` : t);
   });
 }
 export {
   f as COWSWAP_URLS,
-  d as TradeType,
-  v as cowSwapWidget
+  c as TradeType,
+  A as cowSwapWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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,19 +1,48 @@
+import type { SupportedChainId } from '@cowprotocol/cow-sdk';
 export interface JsonRpcRequest {
     id: number;
     method: string;
     params: unknown[];
 }
 export interface EthereumProvider {
+    /**
+     * Subscribes to Ethereum-related events.
+     * @param event - The event to subscribe to.
+     * @param args - Arguments for the event.
+     */
     on(event: string, args: unknown): void;
+    /**
+     * Sends a JSON-RPC request to the Ethereum provider and returns the response.
+     * @param params - JSON-RPC request parameters.
+     * @returns A promise that resolves with the response.
+     */
     request<T>(params: JsonRpcRequest): Promise<T>;
+    /**
+     * Requests permission to connect to the Ethereum provider.
+     * @returns A promise that resolves once permission is granted.
+     */
     enable(): Promise<void>;
 }
 export type CowSwapWidgetEnv = 'local' | 'prod' | 'dev' | 'pr';
 export type CowSwapTheme = 'dark' | 'light';
+/**
+ *Trade asset parameters, for example:
+ * { asset: 'WBTC', amount: 12 }
+ * or
+ * { asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' } // USDC
+ */
 interface TradeAsset {
+    /** The asset symbol or identifier. */
     asset: string;
+    /**
+     * The amount of the asset (optional).
+     * If specified, represents the quantity or value of the asset.
+     */
     amount?: string;
 }
+/**
+ * A pair of assets to trade.
+ */
 export interface TradeAssets {
     sell: TradeAsset;
     buy: TradeAsset;
@@ -21,39 +50,82 @@ export interface TradeAssets {
 export declare enum TradeType {
     SWAP = "swap",
     LIMIT = "limit",
+    /**
+     * Currently it means only TWAP orders.
+     * But in the future it can be extended to support other order types.
+     */
     ADVANCED = "advanced"
 }
-export interface CowSwapWidgetUrlParams {
-    chainId?: number;
-    tradeType?: TradeType;
-    env?: CowSwapWidgetEnv;
-    tradeAssets?: TradeAssets;
-    theme?: CowSwapTheme;
-}
 export interface CowSwapWidgetPalette {
     primaryColor: string;
     screenBackground: string;
     widgetBackground: string;
     textColor: string;
 }
-export interface CowSwapWidgetAppParams {
-    logoUrl?: string;
-    hideLogo?: boolean;
-    hideNetworkSelector?: boolean;
-    dynamicHeightEnabled?: boolean;
-    enabledTradeTypes?: TradeType[];
-    palette?: CowSwapWidgetPalette;
-}
-export type CowSwapWidgetSettings = CowSwapWidgetUrlParams & CowSwapWidgetAppParams;
-export interface CowSwapWidgetMetaData {
+interface CowSwapWidgetConfig {
+    /**
+     * The width of the widget in pixels. Default: 400px
+     */
+    width: string;
+    /**
+     * The height of the widget in pixels. Default: 600px
+     */
+    height: string;
+    /**
+     * The unique identifier of the widget consumer.
+     * Please fill the for to let us know a little about you: <TODO-TYPEFORM>
+     */
     appKey: string;
-    url: string;
-}
-export interface CowSwapWidgetParams {
-    width: number;
-    height: number;
-    container: HTMLElement;
-    metaData: CowSwapWidgetMetaData;
-    provider?: EthereumProvider;
+    /**
+     * The widget might be connected to a custom Ethereum provider.
+     */
+    provider: EthereumProvider;
+    /**
+     * Network ID.
+     */
+    chainId: SupportedChainId;
+    /**
+     * Swap, Limit or Advanced (Twap).
+     */
+    tradeType: TradeType;
+    /**
+     * The environment of the widget. Default: prod
+     */
+    env: CowSwapWidgetEnv;
+    /**
+     * The assets to trade.
+     */
+    tradeAssets: TradeAssets;
+    /**
+     * The theme of the widget UI.
+     */
+    theme: CowSwapTheme;
+    /**
+     * Allows to set a custom logo for the widget.
+     */
+    logoUrl: string;
+    /**
+     * Option to hide the logo in the widget.
+     */
+    hideLogo: boolean;
+    /**
+     * Option to hide the network selector in the widget.
+     */
+    hideNetworkSelector: boolean;
+    /**
+     * Enables the ability to switch between trade types in the widget.
+     */
+    enabledTradeTypes: TradeType[];
+    /**
+     * Colors palette to customize the widget UI.
+     */
+    palette: CowSwapWidgetPalette;
+    /**
+     * The partner fee in basis points.
+     * For example: 1.5% = 150 bips
+     * Please contact <TODO-TYPEFORM> to enable your partner fee.
+     */
+    partnerFeeBips: string;
 }
+export type CowSwapWidgetParams = Partial<CowSwapWidgetConfig>;
 export {};

package/urlUtils.d.ts

@@ -1,4 +1,4 @@
-import { CowSwapWidgetUrlParams } from './types';
-export declare function buildWidgetUrl(params: CowSwapWidgetUrlParams): string;
-export declare function buildWidgetPath(params: CowSwapWidgetUrlParams): string;
-export declare function buildTradeAmountsQuery(params: CowSwapWidgetUrlParams): URLSearchParams;
+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;