@cowprotocol/widget-lib 0.1.0 → 0.1.2

package/README.md

@@ -1,18 +1,28 @@
 # CoW Swap Widget Library
 
-## Use it
+Integrate the power of `CowSwap` into your product!
+With the widget, you can create an incredible trading interface. Specify the required pair of currencies, customize the
+look and much more!
 
-Install dependency
+## Live example
 
-```bash
-# Install the dependency using NPM
+See the widget in action in the [widget configurator](../../apps/widget-configurator/src/main.tsx)
+
+## Docs
+
+You can find a detailed description of all widget parameters in the [documentation](../../libs/widget-lib/docs/README.md)
+
+## Quick start
+
+```
 npm install @cowprotocol/widget-lib --save
+```
 
-# ...or alternativelly use YARN
+```
 yarn add @cowprotocol/widget-lib
 ```
 
-Create an empty div somewhere in your website:
+Create a container somewhere in your website, the widget will be rendered inside it:
 
 ```html
 <div id="cowswap-widget"></div>
@@ -25,38 +35,36 @@ import { cowSwapWidget } from '@cowprotocol/widget-lib'
 
 // Initialise the widget
 const widgetContainer = document.getElementById('cowswap-widget')
-cowSwapWidget({
-  container: widgetContainer
-})
 
-
-// Additionally, you can pass some additional params to customise your widget
-provider = /* instantiate your own web3 provider */
-cowSwapWidget({
+const updateWidget = cowSwapWidget({
   container: widgetContainer,
-  width: 600
-  height: 640
-  urlParams: {
-    sell: { asset: 'DAI' },
-    buy: { asset: 'USDC', amount: '0.1' }
+  width: 600,
+  height: 640,
+  metaData: {
+    appKey: '<YOUR_APP_KEY>', // Just an unique identifier for your app,
+    appUrl: '<YOUR_APP_URL>'
   },
-  provider
+// Optionally, you can provide some additional params to customise your widget
+}, {
+  sell: { asset: 'DAI' },
+  buy: { asset: 'USDC', amount: '0.1' },
+  // instantiate your own web3 provider
+  provider: window.ethereum
 })
+
+// You also can change widget configuration on the fly
+updateWidget({ tradeType: 'limit' })
 ```
 
 ## Developers
 
-```bash
-# Run demo project locally
-# Will open http://localhost:3012/src/demo/index.html
-nx serve widget-lib
-
-# Test
+#### Test
+```
 nx test widget-lib
+```
 
-# Build the library
+#### Build the library
+```
 nx build widget-lib
-
-# Publish to NPM
-nx publish widget-lib --ver 0.0.7 --tag latest
 ```
+

package/index.iife.js

@@ -0,0 +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}({});

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 d={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:window.location.origin};function f(t){const s=d[t.env],e=h(t),n=u(t);return s+"/#"+e+"?"+n}function h(t){const{chainId:s,tradeAssets:e,tradeType:n}=t,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${s}/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)}return e&&n.append("theme",e),n}const i="cowSwapWidget";function P(t,s){const{container:e,provider:n}=t,o=E(t,s);e.innerHTML="",e.appendChild(o);const{contentWindow:a}=o;if(!a)throw new Error("Iframe does not contain a window!");return y(a,t.metaData),W(o,t.height),n&&new w(a).onConnect(n),o.addEventListener("load",()=>{c(s,a,o)}),r=>c(r,a,o)}function E(t,s){const{width:e,height:n}=t,o=document.createElement("iframe");return o.src=f(s.urlParams),o.width=`${e}px`,o.height=`${n}px`,o.style.border="0",o}function c(t,s,e){const n=h(t.urlParams),o=u(t.urlParams).toString();t.appParams.dynamicHeightEnabled||(e.style.height=""),s.postMessage({key:i,method:"update",urlParams:{pathname:n,search:o},appParams:t.appParams},"*")}function y(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`})}var p=(t=>(t.SWAP="swap",t.LIMIT="limit",t.ADVANCED="advanced",t))(p||{});exports.COWSWAP_URLS=d;exports.TradeType=p;exports.cowSwapWidget=P;
+"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;

package/index.mjs

@@ -1,5 +1,5 @@
-const u = "2.0", p = "*", m = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
-class l {
+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) => {
       e.data.jsonrpc === "2.0" && (this.ethereumProvider ? this.processRequest(e.data) : this.requests[e.data.id] = e.data);
@@ -11,7 +11,7 @@ class l {
   onConnect(s) {
     this.ethereumProvider = s, Object.keys(this.requests).forEach((e) => {
       this.processRequest(this.requests[e]);
-    }), this.requests = {}, m.forEach((e) => {
+    }), this.requests = {}, l.forEach((e) => {
       s.on(e, (n) => {
         this.postMessage({ method: e, params: [n] });
       });
@@ -29,28 +29,29 @@ class l {
   postMessage(s) {
     this.contentWindow.postMessage(
       {
-        jsonrpc: u,
+        jsonrpc: p,
         ...s
       },
-      p
+      m
     );
   }
 }
-const w = {
+const f = {
   local: "http://localhost:3000",
   prod: "https://swap.cow.fi",
   dev: "https://dev.swap.cow.fi",
   pr: window.location.origin
 };
-function f(t) {
-  const s = w[t.env], e = d(t), n = h(t);
+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;
 }
-function d(t) {
-  const { chainId: s, tradeAssets: e, tradeType: n } = t, o = e ? [e.sell.asset, e.buy.asset].map(encodeURIComponent).join("/") : "";
+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 h(t) {
+function u(t) {
   const { tradeAssets: s, theme: e } = t, n = new URLSearchParams();
   if (s) {
     const { sell: o, buy: a } = s;
@@ -60,22 +61,22 @@ function h(t) {
 }
 const i = "cowSwapWidget";
 function v(t, s) {
-  const { container: e, provider: n } = t, o = g(t, s);
+  const { container: e, provider: n } = t, o = E(t, s);
   e.innerHTML = "", e.appendChild(o);
   const { contentWindow: a } = o;
   if (!a)
     throw new Error("Iframe does not contain a window!");
-  return E(a, t.metaData), P(o, t.height), n && new l(a).onConnect(n), o.addEventListener("load", () => {
+  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);
 }
-function g(t, s) {
+function E(t, s) {
   const { width: e, height: n } = t, o = document.createElement("iframe");
-  return o.src = f(s.urlParams), o.width = `${e}px`, o.height = `${n}px`, o.style.border = "0", o;
+  return o.src = g(s), o.width = `${e}px`, o.height = `${n}px`, o.style.border = "0", o;
 }
 function c(t, s, e) {
-  const n = d(t.urlParams), o = h(t.urlParams).toString();
-  t.appParams.dynamicHeightEnabled || (e.style.height = ""), s.postMessage(
+  const n = h(t), o = u(t).toString();
+  t.dynamicHeightEnabled || (e.style.height = ""), s.postMessage(
     {
       key: i,
       method: "update",
@@ -83,12 +84,12 @@ function c(t, s, e) {
         pathname: n,
         search: o
       },
-      appParams: t.appParams
+      appParams: t
     },
     "*"
   );
 }
-function E(t, s) {
+function y(t, s) {
   window.addEventListener("message", (e) => {
     e.data.key !== i || e.data.method !== "activate" || t.postMessage(
       {
@@ -108,9 +109,8 @@ function P(t, s) {
     t.style.height = `${n}px`;
   });
 }
-var y = /* @__PURE__ */ ((t) => (t.SWAP = "swap", t.LIMIT = "limit", t.ADVANCED = "advanced", t))(y || {});
 export {
-  w as COWSWAP_URLS,
-  y as TradeType,
+  f as COWSWAP_URLS,
+  d as TradeType,
   v as cowSwapWidget
 };

package/package.json

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

@@ -24,13 +24,13 @@ export declare enum TradeType {
     ADVANCED = "advanced"
 }
 export interface CowSwapWidgetUrlParams {
-    chainId: number;
-    tradeType: TradeType;
-    env: CowSwapWidgetEnv;
+    chainId?: number;
+    tradeType?: TradeType;
+    env?: CowSwapWidgetEnv;
     tradeAssets?: TradeAssets;
     theme?: CowSwapTheme;
 }
-export interface InjectedWidgetPalette {
+export interface CowSwapWidgetPalette {
     primaryColor: string;
     screenBackground: string;
     widgetBackground: string;
@@ -42,12 +42,9 @@ export interface CowSwapWidgetAppParams {
     hideNetworkSelector?: boolean;
     dynamicHeightEnabled?: boolean;
     enabledTradeTypes?: TradeType[];
-    palette?: InjectedWidgetPalette;
-}
-export interface CowSwapWidgetSettings {
-    urlParams: CowSwapWidgetUrlParams;
-    appParams: CowSwapWidgetAppParams;
+    palette?: CowSwapWidgetPalette;
 }
+export type CowSwapWidgetSettings = CowSwapWidgetUrlParams & CowSwapWidgetAppParams;
 export interface CowSwapWidgetMetaData {
     appKey: string;
     url: string;