@cowprotocol/widget-lib 0.0.7 → 0.1.1

package/README.md

@@ -0,0 +1,70 @@
+# CoW Swap Widget Library
+
+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!
+
+## Live example
+
+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
+```
+
+```
+yarn add @cowprotocol/widget-lib
+```
+
+Create a container somewhere in your website, the widget will be rendered inside it:
+
+```html
+<div id="cowswap-widget"></div>
+```
+
+Import the widget and initialise it:
+
+```js
+import { cowSwapWidget } 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
+}, {
+  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
+
+#### Test
+```
+nx test widget-lib
+```
+
+#### Build the library
+```
+nx build widget-lib
+```
+

package/consts.d.ts

@@ -1,5 +1,2 @@
 import { CowSwapWidgetEnv } from './types';
-export declare const DEFAULT_CHAIN = 1;
-export declare const DEFAULT_WIDTH = 400;
-export declare const DEFAULT_HEIGHT = 640;
 export declare const COWSWAP_URLS: Record<CowSwapWidgetEnv, string>;

package/cowSwapWidget.d.ts

@@ -1,4 +1,3 @@
-import { CowSwapWidgetParams, CowSwapWidgetUrlParams } from './types';
-type UpdateWidgetCallback = (params: CowSwapWidgetUrlParams) => void;
-export declare function cowSwapWidget(params: CowSwapWidgetParams): UpdateWidgetCallback;
-export {};
+import { CowSwapWidgetParams, CowSwapWidgetSettings } from './types';
+export type UpdateWidgetCallback = (params: CowSwapWidgetSettings) => void;
+export declare function cowSwapWidget(params: CowSwapWidgetParams, settings: CowSwapWidgetSettings): UpdateWidgetCallback;

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.0.7",
+  "version": "0.1.1",
   "type": "commonjs",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
   "main": "index.js",
@@ -21,4 +21,4 @@
     "widget-lib"
   ],
   "dependencies": {}
-}
+}

package/types.d.ts

@@ -1,8 +1,3 @@
-declare global {
-    interface Window {
-        ethereum?: EthereumProvider;
-    }
-}
 export interface JsonRpcRequest {
     id: number;
     method: string;
@@ -13,7 +8,7 @@ export interface EthereumProvider {
     request<T>(params: JsonRpcRequest): Promise<T>;
     enable(): Promise<void>;
 }
-export type CowSwapWidgetEnv = 'local' | 'prod' | 'barn';
+export type CowSwapWidgetEnv = 'local' | 'prod' | 'dev' | 'pr';
 export type CowSwapTheme = 'dark' | 'light';
 interface TradeAsset {
     asset: string;
@@ -23,17 +18,42 @@ export interface TradeAssets {
     sell: TradeAsset;
     buy: TradeAsset;
 }
+export declare enum TradeType {
+    SWAP = "swap",
+    LIMIT = "limit",
+    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 {
+    appKey: string;
+    url: string;
+}
 export interface CowSwapWidgetParams {
+    width: number;
+    height: number;
     container: HTMLElement;
-    width?: number;
-    height?: number;
-    urlParams?: CowSwapWidgetUrlParams;
+    metaData: CowSwapWidgetMetaData;
     provider?: EthereumProvider;
 }
 export {};