@cowprotocol/widget-lib 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,63 @@
+# CoW Swap widget-lib
+
+## Use it
+
+Install dependency
+
+```bash
+# Install the dependency using NPM
+npm install @cowprotocol/widget-lib --save
+
+# ...or alternativelly use YARN
+yarn add @cowprotocol/widget-lib
+```
+
+Create an empty div somewhere in your website:
+
+```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')
+cowSwapWidget({
+  container: widgetContainer
+})
+
+
+// Additionally, you can pass some additional params to customise your widget
+provider = /* instantiate your own web3 provider */
+cowSwapWidget({
+  container: widgetContainer,
+  width: 600
+  height: 640
+  urlParams: {
+    sell: { asset: 'DAI' },
+    buy: { asset: 'USDC', amount: '0.1' }
+  },
+  provider
+})
+```
+
+## Developers
+
+```bash
+# Test
+nx test widget-lib
+
+# Build the library
+nx build widget-lib
+cp src/libs/widget-lib/README.md dist/libs/widget-lib # automate
+
+# Publish to NPM
+npm publish --access=public ./dist/libs/widget-lib
+```
+
+## Running unit tests
+
+Run `nx test widget-lib` to execute the unit tests via [Jest](https://jestjs.io).

package/consts.d.ts

@@ -1,2 +1,5 @@
 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/index.js

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

package/index.mjs

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

package/package.json

@@ -1,5 +1,24 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.0.1",
-  "type": "commonjs"
+  "version": "0.0.2",
+  "type": "commonjs",
+  "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
+  "main": "index.js",
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.mjs"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cowprotocol/cowswap"
+  },
+  "keywords": [
+    "cowprotocol",
+    "widget",
+    "cowswap",
+    "dex",
+    "widget-lib"
+  ],
+  "dependencies": {}
 }

package/types.d.ts

@@ -13,7 +13,7 @@ export interface EthereumProvider {
     request<T>(params: JsonRpcRequest): Promise<T>;
     enable(): Promise<void>;
 }
-export type CowSwapWidgetEnv = 'local' | 'prod';
+export type CowSwapWidgetEnv = 'local' | 'prod' | 'barn';
 export type CowSwapTheme = 'dark' | 'light';
 interface TradeAsset {
     asset: string;
@@ -24,16 +24,16 @@ export interface TradeAssets {
     buy: TradeAsset;
 }
 export interface CowSwapWidgetUrlParams {
-    env: CowSwapWidgetEnv;
-    chainId: number;
+    chainId?: number;
+    env?: CowSwapWidgetEnv;
     tradeAssets?: TradeAssets;
     theme?: CowSwapTheme;
 }
 export interface CowSwapWidgetParams {
-    urlParams: CowSwapWidgetUrlParams;
-    width: number;
-    height: number;
     container: HTMLElement;
+    width?: number;
+    height?: number;
+    urlParams?: CowSwapWidgetUrlParams;
     provider?: EthereumProvider;
 }
 export {};