@cowprotocol/widget-lib 0.2.0 → 0.3.0

package/index.iife.js

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

package/index.js

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

package/index.mjs

@@ -4,9 +4,9 @@ class f {
    * Creates an instance of JsonRpcManager.
    * @param contentWindow - The window for handling events.
    */
-  constructor(e) {
-    this.contentWindow = e, this.ethereumProvider = null, this.requests = {}, this.processEvent = (t) => {
-      t.data.jsonrpc === "2.0" && (this.ethereumProvider ? this.processRequest(t.data) : this.requests[t.data.id] = t.data);
+  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);
   }
   /**
@@ -19,12 +19,12 @@ class f {
    * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
    * @param ethereumProvider - The Ethereum provider to connect.
    */
-  onConnect(e) {
-    this.ethereumProvider = e, Object.keys(this.requests).forEach((t) => {
-      this.processRequest(this.requests[t]);
-    }), this.requests = {}, g.forEach((t) => {
-      e.on(t, (n) => {
-        this.postMessage({ method: t, params: [n] });
+  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] });
       });
     });
   }
@@ -32,20 +32,20 @@ class f {
    * 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(e) {
+  processRequest(t) {
     if (!this.ethereumProvider)
       return;
-    (e.method === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request(e)).then((n) => {
-      this.postMessage({ id: e.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: e.id, error: n });
+      this.postMessage({ id: t.id, error: n });
     });
   }
-  postMessage(e) {
+  postMessage(t) {
     this.contentWindow.postMessage(
       {
         jsonrpc: w,
-        ...e
+        ...t
       },
       m
     );
@@ -60,44 +60,43 @@ const E = {
   dev: "https://dev.swap.cow.fi",
   pr: l()
 };
-var c = /* @__PURE__ */ ((s) => (s.SWAP = "swap", s.LIMIT = "limit", s.ADVANCED = "advanced", s))(c || {});
+var d = /* @__PURE__ */ ((s) => (s.SWAP = "swap", s.LIMIT = "limit", s.ADVANCED = "advanced", s))(d || {});
+const r = "_";
 function v(s) {
-  const e = E[s.env || "prod"], t = d(s), n = h(s);
-  return e + "/#" + t + "?" + n;
-}
-function d(s) {
-  const { chainId: e = 1, sell: t, buy: n, tradeType: o = c.SWAP } = s, i = [];
-  t?.asset && i.push(t.asset), n?.asset && i.push(n.asset);
-  const u = i.map(encodeURIComponent).join("/");
-  return `/${e}/widget/${o}/${u}`;
+  const t = E[s.env || "prod"], e = h(s), n = p(s);
+  return t + "/#" + e + "?" + n;
 }
 function h(s) {
-  const { sell: e, buy: t, theme: n } = s, o = new URLSearchParams();
-  return e?.amount && o.append("sellAmount", e.amount), t?.amount && o.append("buyAmount", t.amount), n && o.append("theme", typeof n == "string" ? n : n.baseTheme), o;
+  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", p = "640px", y = "450px", P = 20;
-function I(s, e = {}) {
-  const { provider: t } = e, n = W(e);
+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 A(o, e.appCode), R(n, e.height), t && new f(o).onConnect(t), n.addEventListener("load", () => {
-    r(e, o);
-  }), (i) => r(i, o);
+  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 W(s) {
-  const { width: e = y, height: t = p } = s, n = document.createElement("iframe");
-  return n.src = v(s), n.width = e, n.height = t, n.style.border = "0", n;
+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 r(s, e) {
-  const t = d(s), n = h(s).toString();
-  e.postMessage(
+function c(s, t) {
+  const e = h(s), n = p(s).toString();
+  t.postMessage(
     {
       key: a,
       method: "update",
       urlParams: {
-        pathname: t,
+        pathname: e,
         search: n
       },
       appParams: {
@@ -108,25 +107,25 @@ function r(s, e) {
     "*"
   );
 }
-function A(s, e) {
-  window.addEventListener("message", (t) => {
-    t.data.key !== a || t.data.method !== "activate" || s.postMessage(
+function T(s, t) {
+  window.addEventListener("message", (e) => {
+    e.data.key !== a || e.data.method !== "activate" || s.postMessage(
       {
         key: a,
         method: "metaData",
-        metaData: e ? { appCode: e } : void 0
+        metaData: t ? { appCode: t } : void 0
       },
       "*"
     );
   });
 }
-function R(s, e = p) {
-  window.addEventListener("message", (t) => {
-    t.data.key !== a || t.data.method !== "iframeHeight" || (s.style.height = t.data.height ? `${t.data.height + P}px` : 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);
   });
 }
 export {
   E as COWSWAP_URLS,
-  c as TradeType,
-  I as cowSwapWidget
+  d as TradeType,
+  M as cowSwapWidget
 };

package/package.json

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

@@ -51,10 +51,15 @@ export declare enum TradeType {
 }
 export interface CowSwapWidgetPalette {
     baseTheme: CowSwapTheme;
-    primaryColor: string;
-    screenBackground: string;
-    widgetBackground: string;
-    textColor: string;
+    primary: string;
+    background: string;
+    paper: string;
+    text: string;
+    danger: string;
+    warning: string;
+    alert: string;
+    info: string;
+    success: string;
 }
 interface CowSwapWidgetConfig {
     /**
@@ -78,6 +83,10 @@ interface CowSwapWidgetConfig {
      * Network ID.
      */
     chainId: SupportedChainId;
+    /**
+     * The token lists urls to use in the widget
+     */
+    tokenLists: string[];
     /**
      * Swap, Limit or Advanced (Twap).
      */