@cowprotocol/widget-lib 2.0.0 → 2.0.2

package/IframeCowEventEmitter.d.ts

@@ -0,0 +1,10 @@
+import { CowWidgetEventListeners } from '@cowprotocol/events';
+export declare class IframeCowEventEmitter {
+    private contentWindow;
+    private eventEmitter;
+    private listeners;
+    private widgetListener;
+    constructor(contentWindow: Window, listeners?: CowWidgetEventListeners);
+    stopListeningIframe(): void;
+    updateListeners(listeners?: CowWidgetEventListeners): void;
+}

package/IframeSafeSdkBridge.d.ts

@@ -0,0 +1,8 @@
+export declare class IframeSafeSdkBridge {
+    private appWindow;
+    private iframeWidow;
+    forwardSdkMessage: (event: MessageEvent<unknown>) => void;
+    constructor(appWindow: Window, iframeWidow: Window);
+    private startListening;
+    stopListening(): void;
+}

package/cowSwapWidget.d.ts

@@ -0,0 +1,18 @@
+import { CowWidgetEventListeners } from '@cowprotocol/events';
+import { CowSwapWidgetParams, CowSwapWidgetProps, EthereumProvider } from './types';
+/**
+ * Callback function signature for updating the CoW Swap Widget.
+ */
+export interface CowSwapWidgetHandler {
+    updateParams: (params: CowSwapWidgetParams) => void;
+    updateListeners: (newListeners?: CowWidgetEventListeners) => void;
+    updateProvider: (newProvider?: EthereumProvider) => void;
+    destroy: () => void;
+}
+/**
+ * Generates and injects a CoW Swap Widget into the provided container.
+ * @param container - The HTML element to inject the widget into.
+ * @param params - Parameters for configuring the widget.
+ * @returns A callback function to update the widget with new settings.
+ */
+export declare function createCowSwapWidget(container: HTMLElement, props: CowSwapWidgetProps): CowSwapWidgetHandler;

package/flexibleConfig.d.ts

@@ -0,0 +1,5 @@
+import { SupportedChainId } from '@cowprotocol/cow-sdk';
+import { FlexibleConfig, PerNetworkConfig, PerTradeTypeConfig, TradeType } from './types';
+export declare function resolveFlexibleConfig<T>(config: FlexibleConfig<T>, chainId: SupportedChainId, tradeType: TradeType): T | undefined;
+export declare function isPerTradeTypeConfig<T>(config: FlexibleConfig<T>): config is PerTradeTypeConfig<T>;
+export declare function isPerNetworkConfig<T>(config: FlexibleConfig<T>): config is PerNetworkConfig<T>;

package/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("@cowprotocol/iframe-transport"),W=require("@cowprotocol/events");var c=(e=>(e.ACTIVATE="ACTIVATE",e.UPDATE_HEIGHT="UPDATE_HEIGHT",e.SET_FULL_HEIGHT="SET_FULL_HEIGHT",e.EMIT_COW_EVENT="EMIT_COW_EVENT",e.PROVIDER_RPC_REQUEST="PROVIDER_RPC_REQUEST",e.INTERCEPT_WINDOW_OPEN="INTERCEPT_WINDOW_OPEN",e))(c||{}),E=(e=>(e.UPDATE_PARAMS="UPDATE_PARAMS",e.UPDATE_APP_DATA="UPDATE_APP_DATA",e.PROVIDER_RPC_RESPONSE="PROVIDER_RPC_RESPONSE",e.PROVIDER_ON_EVENT="PROVIDER_ON_EVENT",e))(E||{}),T=(e=>(e.SWAP="swap",e.LIMIT="limit",e.ADVANCED="advanced",e.YIELD="yield",e))(T||{});const O=["primary","background","paper","text","danger","warning","alert","info","success"],r=new I.IframeTransport("cowSwapWidget");class R{constructor(t,i=[]){this.contentWindow=t,this.updateListeners(i),this.widgetListener=r.listenToMessageFromWindow(this.contentWindow,c.EMIT_COW_EVENT,n=>this.eventEmitter.emit(n.event,n.payload))}eventEmitter=new W.SimpleCowEventEmitter;listeners=[];widgetListener;stopListeningIframe(){r.stopListeningWindowListener(this.contentWindow,this.widgetListener)}updateListeners(t){for(const i of this.listeners)this.eventEmitter.off(i);this.listeners=t||[];for(const i of this.listeners)this.eventEmitter.on(i)}}class D{constructor(t,i){this.appWindow=t,this.iframeWidow=i,this.forwardSdkMessage=n=>{b(n.data)&&(typeof window<"u"&&n.origin===window.location.origin||(y(n.data)?this.appWindow.parent.postMessage(n.data,"*"):M(n.data)&&this.iframeWidow.postMessage(n.data,"*")))},this.startListening()}forwardSdkMessage;startListening(){this.appWindow.addEventListener("message",this.forwardSdkMessage)}stopListening(){this.appWindow.removeEventListener("message",this.forwardSdkMessage)}}function b(e){return typeof e=="object"&&e!==null&&"id"in e&&typeof e.id=="string"}function y(e){return"method"in e&&typeof e.method=="string"&&"params"in e&&"env"in e&&typeof e.env=="object"&&e.env!==null&&"sdkVersion"in e.env}function M(e){return"success"in e&&typeof e.success=="boolean"&&"version"in e&&typeof e.version=="string"}function A(e){return!!(e&&typeof e=="object")}const g="_";function N(e){const t=typeof e.baseUrl=="string"?e.baseUrl:"https://swap.cow.fi",i=v(e);return t+"/#"+i+"?"+C(e)}function v(e){const{chainId:t=1,sell:i,buy:n,tradeType:o=T.SWAP}=e,s=[i?.asset||g,n?.asset||g].map(encodeURIComponent).join("/");return`/${t}/widget/${o}/${s}`}function C(e){const t=new URLSearchParams;return V(H(U(t,e),e),e)}function U(e,t){const{sell:i,buy:n}=t;return i?.amount&&e.append("sellAmount",i.amount),n?.amount&&e.append("buyAmount",n.amount),e}function H(e,t){const i=t.theme;return i?(A(i)?(e.append("palette",encodeURIComponent(JSON.stringify(i))),e.append("theme",i.baseTheme)):(e.append("palette","null"),e.append("theme",i)),e):(e.append("palette","null"),e)}function V(e,t){return t.targetChainId&&e.append("targetChainId",t.targetChainId.toString()),e}const S="640px",F="450px",k=20,j={updateParams:()=>{},updateListeners:()=>{},updateProvider:()=>{},destroy:()=>{}};function G(e,t){const{params:i,provider:n,listeners:o}=t;let s=n,l=i;if(typeof window>"u")return j;const a=x(i);e.innerHTML="",e.appendChild(a);const{contentWindow:u}=a;if(!u)throw console.error("Iframe does not contain a window",a),new Error("Iframe does not contain a window!");const w=[];w.push(Q(u,i.appCode)),w.push(...B(a,i.height,i.maxHeight)),w.push($());const P=new R(window,o);let h=m(u,null,s);a.addEventListener("load",()=>_(u,l,s));const L=new D(window,u);return{updateParams:d=>{l=d,_(u,l,s)},updateListeners:d=>P.updateListeners(d),updateProvider:d=>{s=d,h=m(u,h,d)},destroy:()=>{h.disconnect(),P.stopListeningIframe(),w.forEach(d=>window.removeEventListener("message",d)),L.stopListening(),e.removeChild(a)}}}function m(e,t,i){t&&t.disconnect();const n=t||new I.IframeRpcProviderBridge(e);return i&&n.onConnect(i),n}function x(e){const{width:t=F,height:i=S}=e,n=document.createElement("iframe");return n.src=N(e),n.width=t,n.height=i,n.style.border="0",n.allow="clipboard-read; clipboard-write",n}function _(e,t,i){const n=!!i,o=v(t),s=C(t).toString(),{theme:l,...a}=t;r.postMessageToWindow(e,E.UPDATE_PARAMS,{urlParams:{pathname:o,search:s},appParams:a,hasProvider:n})}function Q(e,t){return r.listenToMessageFromWindow(window,c.ACTIVATE,()=>{r.postMessageToWindow(e,E.UPDATE_APP_DATA,{metaData:t?{appCode:t}:void 0})})}function $(){return r.listenToMessageFromWindow(window,c.INTERCEPT_WINDOW_OPEN,({href:e,rel:t,target:i})=>{const n=e.toString();if(!n.startsWith("http")&&n.match(/^[a-zA-Z0-9]+:\/\//)){window.open(n,i,t);return}})}function B(e,t=S,i){return[r.listenToMessageFromWindow(window,c.UPDATE_HEIGHT,n=>{const o=n.height?n.height+k:void 0;e.style.height=o?`${i?Math.min(o,i):o}px`:t}),r.listenToMessageFromWindow(window,c.SET_FULL_HEIGHT,({isUpToSmall:n})=>{e.style.height=n?t:`${i||document.body.offsetHeight}px`})]}const Y=Object.values(T);function z(e,t,i){if(p(e)){const n=e[i];return f(n)?n[t]:n}if(f(e)){const n=e[t];return p(n)?n[i]:n}return e}function p(e){return typeof e!="object"?!1:Object.keys(e).every(t=>Y.includes(t))}const J=/^\d+$/;function f(e){return typeof e!="object"?!1:Object.keys(e).every(t=>J.test(t))}function K(e){return p(e)?Object.values(e).flatMap(t=>f(t)?Object.values(t):[t]):f(e)?Object.values(e).flatMap(t=>p(t)?Object.values(t):[t]):[e]}exports.TradeType=T;exports.WIDGET_PALETTE_COLORS=O;exports.WidgetMethodsEmit=c;exports.WidgetMethodsListen=E;exports.createCowSwapWidget=G;exports.isCowSwapWidgetPalette=A;exports.isPerNetworkConfig=f;exports.isPerTradeTypeConfig=p;exports.resolveFlexibleConfig=z;exports.resolveFlexibleConfigValues=K;exports.widgetIframeTransport=r;

package/index.d.ts

@@ -0,0 +1,7 @@
+export { createCowSwapWidget } from './cowSwapWidget';
+export { widgetIframeTransport } from './widgetIframeTransport';
+export type { CowSwapWidgetHandler } from './cowSwapWidget';
+export { resolveFlexibleConfigValues } from './resolveFlexibleConfigValues';
+export * from './types';
+export * from './themeUtils';
+export * from './flexibleConfig';

package/index.js

@@ -0,0 +1,217 @@
+import { IframeTransport as C, IframeRpcProviderBridge as L } from "@cowprotocol/iframe-transport";
+import { SimpleCowEventEmitter as R } from "@cowprotocol/events";
+var u = /* @__PURE__ */ ((e) => (e.ACTIVATE = "ACTIVATE", e.UPDATE_HEIGHT = "UPDATE_HEIGHT", e.SET_FULL_HEIGHT = "SET_FULL_HEIGHT", e.EMIT_COW_EVENT = "EMIT_COW_EVENT", e.PROVIDER_RPC_REQUEST = "PROVIDER_RPC_REQUEST", e.INTERCEPT_WINDOW_OPEN = "INTERCEPT_WINDOW_OPEN", e))(u || {}), T = /* @__PURE__ */ ((e) => (e.UPDATE_PARAMS = "UPDATE_PARAMS", e.UPDATE_APP_DATA = "UPDATE_APP_DATA", e.PROVIDER_RPC_RESPONSE = "PROVIDER_RPC_RESPONSE", e.PROVIDER_ON_EVENT = "PROVIDER_ON_EVENT", e))(T || {}), h = /* @__PURE__ */ ((e) => (e.SWAP = "swap", e.LIMIT = "limit", e.ADVANCED = "advanced", e.YIELD = "yield", e))(h || {});
+const K = ["primary", "background", "paper", "text", "danger", "warning", "alert", "info", "success"], d = new C("cowSwapWidget");
+class D {
+  constructor(t, i = []) {
+    this.contentWindow = t, this.updateListeners(i), this.widgetListener = d.listenToMessageFromWindow(this.contentWindow, u.EMIT_COW_EVENT, (n) => this.eventEmitter.emit(n.event, n.payload));
+  }
+  eventEmitter = new R();
+  listeners = [];
+  widgetListener;
+  stopListeningIframe() {
+    d.stopListeningWindowListener(this.contentWindow, this.widgetListener);
+  }
+  updateListeners(t) {
+    for (const i of this.listeners)
+      this.eventEmitter.off(i);
+    this.listeners = t || [];
+    for (const i of this.listeners)
+      this.eventEmitter.on(i);
+  }
+}
+class O {
+  constructor(t, i) {
+    this.appWindow = t, this.iframeWidow = i, this.forwardSdkMessage = (n) => {
+      W(n.data) && (typeof window < "u" && n.origin === window.location.origin || (b(n.data) ? this.appWindow.parent.postMessage(n.data, "*") : y(n.data) && this.iframeWidow.postMessage(n.data, "*")));
+    }, this.startListening();
+  }
+  forwardSdkMessage;
+  startListening() {
+    this.appWindow.addEventListener("message", this.forwardSdkMessage);
+  }
+  stopListening() {
+    this.appWindow.removeEventListener("message", this.forwardSdkMessage);
+  }
+}
+function W(e) {
+  return typeof e == "object" && e !== null && "id" in e && typeof e.id == "string";
+}
+function b(e) {
+  return "method" in e && typeof e.method == "string" && "params" in e && "env" in e && typeof e.env == "object" && e.env !== null && "sdkVersion" in e.env;
+}
+function y(e) {
+  return "success" in e && typeof e.success == "boolean" && "version" in e && typeof e.version == "string";
+}
+function U(e) {
+  return !!(e && typeof e == "object");
+}
+const m = "_";
+function H(e) {
+  const t = typeof e.baseUrl == "string" ? e.baseUrl : "https://swap.cow.fi", i = A(e);
+  return t + "/#" + i + "?" + g(e);
+}
+function A(e) {
+  const {
+    chainId: t = 1,
+    sell: i,
+    buy: n,
+    tradeType: o = h.SWAP
+  } = e, r = [i?.asset || m, n?.asset || m].map(encodeURIComponent).join("/");
+  return `/${t}/widget/${o}/${r}`;
+}
+function g(e) {
+  const t = new URLSearchParams();
+  return V(M(N(t, e), e), e);
+}
+function N(e, t) {
+  const {
+    sell: i,
+    buy: n
+  } = t;
+  return i?.amount && e.append("sellAmount", i.amount), n?.amount && e.append("buyAmount", n.amount), e;
+}
+function M(e, t) {
+  const i = t.theme;
+  return i ? (U(i) ? (e.append("palette", encodeURIComponent(JSON.stringify(i))), e.append("theme", i.baseTheme)) : (e.append("palette", "null"), e.append("theme", i)), e) : (e.append("palette", "null"), e);
+}
+function V(e, t) {
+  return t.targetChainId && e.append("targetChainId", t.targetChainId.toString()), e;
+}
+const v = "640px", F = "450px", k = 20, j = {
+  updateParams: () => {
+  },
+  updateListeners: () => {
+  },
+  updateProvider: () => {
+  },
+  destroy: () => {
+  }
+};
+function X(e, t) {
+  const {
+    params: i,
+    provider: n,
+    listeners: o
+  } = t;
+  let r = n, p = i;
+  if (typeof window > "u") return j;
+  const s = G(i);
+  e.innerHTML = "", e.appendChild(s);
+  const {
+    contentWindow: c
+  } = s;
+  if (!c)
+    throw console.error("Iframe does not contain a window", s), new Error("Iframe does not contain a window!");
+  const f = [];
+  f.push(x(c, i.appCode)), f.push(...$(s, i.height, i.maxHeight)), f.push(Q());
+  const P = new D(window, o);
+  let w = _(c, null, r);
+  s.addEventListener("load", () => I(c, p, r));
+  const S = new O(window, c);
+  return {
+    updateParams: (a) => {
+      p = a, I(c, p, r);
+    },
+    updateListeners: (a) => P.updateListeners(a),
+    updateProvider: (a) => {
+      r = a, w = _(c, w, a);
+    },
+    destroy: () => {
+      w.disconnect(), P.stopListeningIframe(), f.forEach((a) => window.removeEventListener("message", a)), S.stopListening(), e.removeChild(s);
+    }
+  };
+}
+function _(e, t, i) {
+  t && t.disconnect();
+  const n = t || new L(e);
+  return i && n.onConnect(i), n;
+}
+function G(e) {
+  const {
+    width: t = F,
+    height: i = v
+  } = e, n = document.createElement("iframe");
+  return n.src = H(e), n.width = t, n.height = i, n.style.border = "0", n.allow = "clipboard-read; clipboard-write", n;
+}
+function I(e, t, i) {
+  const n = !!i, o = A(t), r = g(t).toString(), {
+    theme: p,
+    ...s
+  } = t;
+  d.postMessageToWindow(e, T.UPDATE_PARAMS, {
+    urlParams: {
+      pathname: o,
+      search: r
+    },
+    appParams: s,
+    hasProvider: n
+  });
+}
+function x(e, t) {
+  return d.listenToMessageFromWindow(window, u.ACTIVATE, () => {
+    d.postMessageToWindow(e, T.UPDATE_APP_DATA, {
+      metaData: t ? {
+        appCode: t
+      } : void 0
+    });
+  });
+}
+function Q() {
+  return d.listenToMessageFromWindow(window, u.INTERCEPT_WINDOW_OPEN, ({
+    href: e,
+    rel: t,
+    target: i
+  }) => {
+    const n = e.toString();
+    if (!n.startsWith("http") && n.match(/^[a-zA-Z0-9]+:\/\//)) {
+      window.open(n, i, t);
+      return;
+    }
+  });
+}
+function $(e, t = v, i) {
+  return [d.listenToMessageFromWindow(window, u.UPDATE_HEIGHT, (n) => {
+    const o = n.height ? n.height + k : void 0;
+    e.style.height = o ? `${i ? Math.min(o, i) : o}px` : t;
+  }), d.listenToMessageFromWindow(window, u.SET_FULL_HEIGHT, ({
+    isUpToSmall: n
+  }) => {
+    e.style.height = n ? t : `${i || document.body.offsetHeight}px`;
+  })];
+}
+const B = Object.values(h);
+function Z(e, t, i) {
+  if (l(e)) {
+    const n = e[i];
+    return E(n) ? n[t] : n;
+  }
+  if (E(e)) {
+    const n = e[t];
+    return l(n) ? n[i] : n;
+  }
+  return e;
+}
+function l(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => B.includes(t));
+}
+const Y = /^\d+$/;
+function E(e) {
+  return typeof e != "object" ? !1 : Object.keys(e).every((t) => Y.test(t));
+}
+function q(e) {
+  return l(e) ? Object.values(e).flatMap((t) => E(t) ? Object.values(t) : [t]) : E(e) ? Object.values(e).flatMap((t) => l(t) ? Object.values(t) : [t]) : [e];
+}
+export {
+  h as TradeType,
+  K as WIDGET_PALETTE_COLORS,
+  u as WidgetMethodsEmit,
+  T as WidgetMethodsListen,
+  X as createCowSwapWidget,
+  U as isCowSwapWidgetPalette,
+  E as isPerNetworkConfig,
+  l as isPerTradeTypeConfig,
+  Z as resolveFlexibleConfig,
+  q as resolveFlexibleConfigValues,
+  d as widgetIframeTransport
+};

package/package.json

@@ -1,17 +1,29 @@
 {
   "name": "@cowprotocol/widget-lib",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",
-  "type": "commonjs",
-  "main": "./src/index.ts",
-  "types": "./src/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cowprotocol/cowswap.git",
+    "directory": "libs/widget-lib"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
   "license": "ISC",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@cowprotocol/cow-sdk": "8.0.0",
-    "@cowprotocol/events": "4.0.0",
-    "@cowprotocol/iframe-transport": "2.0.8"
+    "@cowprotocol/cow-sdk": "8.0.3",
+    "@cowprotocol/events": "^4.0.2",
+    "@cowprotocol/iframe-transport": "^2.0.10"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
   }
 }

package/resolveFlexibleConfigValues.d.ts

@@ -0,0 +1,2 @@
+import { FlexibleConfig } from './types';
+export declare function resolveFlexibleConfigValues<T>(config: FlexibleConfig<T>): T[];

package/themeUtils.d.ts

@@ -0,0 +1,2 @@
+import { CowSwapTheme, CowSwapWidgetPalette } from './types';
+export declare function isCowSwapWidgetPalette(palette: CowSwapTheme | CowSwapWidgetPalette | undefined): palette is CowSwapWidgetPalette;