@cowprotocol/widget-lib 0.0.1

package/JsonRpcManager.d.ts

@@ -0,0 +1,14 @@
+import { EthereumProvider, JsonRpcRequest } from './types';
+export declare class JsonRpcManager {
+    private contentWindow;
+    ethereumProvider: EthereumProvider | null;
+    requests: {
+        [key: string]: JsonRpcRequest;
+    };
+    constructor(contentWindow: Window);
+    disconnect(): void;
+    onConnect(ethereumProvider: EthereumProvider): void;
+    processRequest(request: JsonRpcRequest): void;
+    private processEvent;
+    private postMessage;
+}

package/consts.d.ts

@@ -0,0 +1,2 @@
+import { CowSwapWidgetEnv } from './types';
+export declare const COWSWAP_URLS: Record<CowSwapWidgetEnv, string>;

package/cowSwapWidget.d.ts

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

package/index.d.ts

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

package/index.js

@@ -0,0 +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;

package/index.mjs

@@ -0,0 +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);
+    }, 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] });
+      });
+    });
+  }
+  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: a,
+        ...t
+      },
+      h
+    );
+  }
+}
+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 r(n) {
+  const { chainId: t, tradeAssets: e } = n, s = e ? [e.sell.asset, e.buy.asset].map(encodeURIComponent).join("/") : "";
+  return `/${t}/swap/widget/${s}`;
+}
+function c(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 l = "cowSwapWidget";
+function g(n) {
+  const { container: t, provider: e } = n, s = w(n);
+  t.innerHTML = "", t.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);
+}
+function f(n, t) {
+  const e = r(n), s = c(n).toString();
+  t.postMessage(
+    {
+      key: l,
+      pathname: e,
+      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;
+}
+export {
+  p as COWSWAP_URLS,
+  g as cowSwapWidget
+};

package/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@cowprotocol/widget-lib",
+  "version": "0.0.1",
+  "type": "commonjs"
+}

package/types.d.ts

@@ -0,0 +1,39 @@
+declare global {
+    interface Window {
+        ethereum?: EthereumProvider;
+    }
+}
+export interface JsonRpcRequest {
+    id: number;
+    method: string;
+    params: unknown[];
+}
+export interface EthereumProvider {
+    on(event: string, args: unknown): void;
+    request<T>(params: JsonRpcRequest): Promise<T>;
+    enable(): Promise<void>;
+}
+export type CowSwapWidgetEnv = 'local' | 'prod';
+export type CowSwapTheme = 'dark' | 'light';
+interface TradeAsset {
+    asset: string;
+    amount?: string;
+}
+export interface TradeAssets {
+    sell: TradeAsset;
+    buy: TradeAsset;
+}
+export interface CowSwapWidgetUrlParams {
+    env: CowSwapWidgetEnv;
+    chainId: number;
+    tradeAssets?: TradeAssets;
+    theme?: CowSwapTheme;
+}
+export interface CowSwapWidgetParams {
+    urlParams: CowSwapWidgetUrlParams;
+    width: number;
+    height: number;
+    container: HTMLElement;
+    provider?: EthereumProvider;
+}
+export {};

package/urlUtils.d.ts

@@ -0,0 +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;