@cowprotocol/widget-lib - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

cowSwapWidget.d.ts

@@ -1,3 +0,12 @@
-import { CowSwapWidgetParams, CowSwapWidgetSettings } from './types';
-export type UpdateWidgetCallback = (params: CowSwapWidgetSettings) => void;
-export declare function cowSwapWidget(params: CowSwapWidgetParams, settings: CowSwapWidgetSettings): UpdateWidgetCallback;
+import { CowSwapWidgetParams } from './types';
+/**
+ * Callback function signature for updating the CoW Swap Widget.
+ */
+export type UpdateWidgetCallback = (params: CowSwapWidgetParams) => 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 cowSwapWidget(container: HTMLElement, params?: CowSwapWidgetParams): UpdateWidgetCallback;

index.iife.js

@@ -1,1 +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}({});
+var cowSwapWidget=function(i){"use strict";const l="2.0",m="*",w=["connect","disconnect","close","chainChanged","accountsChanged"];class f{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={},w.forEach(e=>{t.on(e,n=>{this.postMessage({method:e,params:[n]})})})}processRequest(t){if(!this.ethereumProvider)return;(t.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(t)).then(n=>{this.postMessage({id:t.id,result:n})}).catch(n=>{this.postMessage({id:t.id,error:n})})}postMessage(t){this.contentWindow.postMessage({jsonrpc:l,...t},m)}}function E(){return`https://swap-dev-git-${location.hostname.replace("widget-configurator-git-","").replace("-cowswap.vercel.app","")}-cowswap.vercel.app`}const d={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:E()};var c=(s=>(s.SWAP="swap",s.LIMIT="limit",s.ADVANCED="advanced",s))(c||{});function v(s){const t=d[s.env||"prod"],e=h(s),n=u(s);return t+"/#"+e+"?"+n}function h(s){const{chainId:t=1,tradeAssets:e,tradeType:n=c.SWAP}=s,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${t}/widget/${n}/${o}`}function u(s){const{tradeAssets:t,theme:e}=s,n=new URLSearchParams;if(t){const{sell:o,buy:a}=t;o.amount&&n.append("sellAmount",o.amount),a.amount&&n.append("buyAmount",a.amount)}return e&&n.append("theme",e),n}const r="cowSwapWidget",p="640px",y="450px";function W(s,t={}){const{provider:e}=t,n=P(t);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return S(o,t.appKey),A(n,t.height),e&&new f(o).onConnect(e),n.addEventListener("load",()=>{g(t,o)}),a=>g(a,o)}function P(s){const{width:t=y,height:e=p}=s,n=document.createElement("iframe");return n.src=v(s),n.width=t,n.height=e,n.style.border="0",n}function g(s,t){const e=h(s),n=u(s).toString();t.postMessage({key:r,method:"update",urlParams:{pathname:e,search:n},appParams:{...s,provider:void 0}},"*")}function S(s,t){window.addEventListener("message",e=>{e.data.key!==r||e.data.method!=="activate"||s.postMessage({key:r,method:"metaData",metaData:t?{appKey:t}:void 0},"*")})}function A(s,t=p){window.addEventListener("message",e=>{e.data.key!==r||e.data.method!=="iframeHeight"||(s.style.height=e.data.height?`${e.data.height}px`:t)})}return i.COWSWAP_URLS=d,i.TradeType=c,i.cowSwapWidget=W,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({});

index.js

@@ -1,1 +0,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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g="2.0",l="*",m=["connect","disconnect","close","chainChanged","accountsChanged"];class w{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={},m.forEach(e=>{t.on(e,n=>{this.postMessage({method:e,params:[n]})})})}processRequest(t){if(!this.ethereumProvider)return;(t.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(t)).then(n=>{this.postMessage({id:t.id,result:n})}).catch(n=>{this.postMessage({id:t.id,error:n})})}postMessage(t){this.contentWindow.postMessage({jsonrpc:g,...t},l)}}function f(){return`https://swap-dev-git-${location.hostname.replace("widget-configurator-git-","").replace("-cowswap.vercel.app","")}-cowswap.vercel.app`}const d={local:"http://localhost:3000",prod:"https://swap.cow.fi",dev:"https://dev.swap.cow.fi",pr:f()};var r=(s=>(s.SWAP="swap",s.LIMIT="limit",s.ADVANCED="advanced",s))(r||{});function E(s){const t=d[s.env||"prod"],e=h(s),n=u(s);return t+"/#"+e+"?"+n}function h(s){const{chainId:t=1,tradeAssets:e,tradeType:n=r.SWAP}=s,o=e?[e.sell.asset,e.buy.asset].map(encodeURIComponent).join("/"):"";return`/${t}/widget/${n}/${o}`}function u(s){const{tradeAssets:t,theme:e}=s,n=new URLSearchParams;if(t){const{sell:o,buy:i}=t;o.amount&&n.append("sellAmount",o.amount),i.amount&&n.append("buyAmount",i.amount)}return e&&n.append("theme",e),n}const a="cowSwapWidget",p="640px",v="450px";function y(s,t={}){const{provider:e}=t,n=P(t);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return W(o,t.appKey),A(n,t.height),e&&new w(o).onConnect(e),n.addEventListener("load",()=>{c(t,o)}),i=>c(i,o)}function P(s){const{width:t=v,height:e=p}=s,n=document.createElement("iframe");return n.src=E(s),n.width=t,n.height=e,n.style.border="0",n}function c(s,t){const e=h(s),n=u(s).toString();t.postMessage({key:a,method:"update",urlParams:{pathname:e,search:n},appParams:{...s,provider:void 0}},"*")}function W(s,t){window.addEventListener("message",e=>{e.data.key!==a||e.data.method!=="activate"||s.postMessage({key:a,method:"metaData",metaData:t?{appKey:t}:void 0},"*")})}function A(s,t=p){window.addEventListener("message",e=>{e.data.key!==a||e.data.method!=="iframeHeight"||(s.style.height=e.data.height?`${e.data.height}px`:t)})}exports.COWSWAP_URLS=d;exports.TradeType=r;exports.cowSwapWidget=y;

JsonRpcManager.d.ts

 import { EthereumProvider, JsonRpcRequest } from './types';
+/**
+ * Manages JSON-RPC requests and interactions with an Ethereum provider.
+ */
 export declare class JsonRpcManager {
     private contentWindow;
-    ethereumProvider: EthereumProvider | null;
-    requests: {
-        [key: string]: JsonRpcRequest;
-    };
+    /**
+     * The Ethereum provider instance.
+     * When is null the JSON-RPC manager is disconnected from the Ethereum provider.
+     * */
+    private ethereumProvider;
+    /** Stored JSON-RPC requests. */
+    private requests;
+    /**
+     * Creates an instance of JsonRpcManager.
+     * @param contentWindow - The window for handling events.
+     */
     constructor(contentWindow: Window);
+    /**
+     * Disconnects the JSON-RPC manager from the Ethereum provider.
+     */
     disconnect(): void;
+    /**
+     * Handles the 'connect' event and sets up event listeners for Ethereum provider events.
+     * @param ethereumProvider - The Ethereum provider to connect.
+     */
     onConnect(ethereumProvider: EthereumProvider): void;
+    /**
+     * Processes a JSON-RPC request and sends appropriate response or error via the content window.
+     * @param request - The JSON-RPC request to be processed.
+     */
     processRequest(request: JsonRpcRequest): void;
@@ -12,0 +33,0 @@ private processEvent;

package.json

 {
   "name": "@cowprotocol/widget-lib",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "commonjs",
@@ -5,0 +5,0 @@ "description": "CoW Swap Widget Library. Allows you to easily embed a CoW Swap widget on your website.",

README.md

@@ -34,3 +34,3 @@ # CoW Swap Widget Library
 ```js
-import { cowSwapWidget } from '@cowprotocol/widget-lib'
+import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'
 
@@ -40,12 +40,4 @@ // Initialise the 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
-}, {
+const params: CowSwapWidgetParams = {
+  appKey: '<YOUR_APP_KEY>', // Just an unique identifier for your app
   sell: { asset: 'DAI' },
@@ -55,6 +47,12 @@ buy: { asset: 'USDC', amount: '0.1' },
   provider: window.ethereum
-})
+}
 
+const updateWidget = cowSwapWidget(
+  widgetContainer,
+  // Optionally, you can provide some additional params to customise your widget
+  params
+)
+
 // You also can change widget configuration on the fly
-updateWidget({ tradeType: 'limit' })
+updateWidget({ ...params, tradeType: 'limit' })
 ```
@@ -61,0 +59,0 @@

types.d.ts

@@ -0,1 +1,2 @@
+import type { SupportedChainId } from '@cowprotocol/cow-sdk';
 export interface JsonRpcRequest {
@@ -7,4 +8,18 @@ id: number;
 export interface EthereumProvider {
+    /**
+     * Subscribes to Ethereum-related events.
+     * @param event - The event to subscribe to.
+     * @param args - Arguments for the event.
+     */
     on(event: string, args: unknown): void;
+    /**
+     * Sends a JSON-RPC request to the Ethereum provider and returns the response.
+     * @param params - JSON-RPC request parameters.
+     * @returns A promise that resolves with the response.
+     */
     request<T>(params: JsonRpcRequest): Promise<T>;
+    /**
+     * Requests permission to connect to the Ethereum provider.
+     * @returns A promise that resolves once permission is granted.
+     */
     enable(): Promise<void>;
@@ -14,6 +29,20 @@ }
 export type CowSwapTheme = 'dark' | 'light';
+/**
+ *Trade asset parameters, for example:
+ * { asset: 'WBTC', amount: 12 }
+ * or
+ * { asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' } // USDC
+ */
 interface TradeAsset {
+    /** The asset symbol or identifier. */
     asset: string;
+    /**
+     * The amount of the asset (optional).
+     * If specified, represents the quantity or value of the asset.
+     */
     amount?: string;
 }
+/**
+ * A pair of assets to trade.
+ */
 export interface TradeAssets {
@@ -26,11 +55,8 @@ sell: TradeAsset;
     LIMIT = "limit",
+    /**
+     * Currently it means only TWAP orders.
+     * But in the future it can be extended to support other order types.
+     */
     ADVANCED = "advanced"
 }
-export interface CowSwapWidgetUrlParams {
-    chainId?: number;
-    tradeType?: TradeType;
-    env?: CowSwapWidgetEnv;
-    tradeAssets?: TradeAssets;
-    theme?: CowSwapTheme;
-}
 export interface CowSwapWidgetPalette {
@@ -42,22 +68,68 @@ primaryColor: string;
 }
-export interface CowSwapWidgetAppParams {
-    logoUrl?: string;
-    hideLogo?: boolean;
-    hideNetworkSelector?: boolean;
-    dynamicHeightEnabled?: boolean;
-    enabledTradeTypes?: TradeType[];
-    palette?: CowSwapWidgetPalette;
-}
-export type CowSwapWidgetSettings = CowSwapWidgetUrlParams & CowSwapWidgetAppParams;
-export interface CowSwapWidgetMetaData {
+interface CowSwapWidgetConfig {
+    /**
+     * The width of the widget in pixels. Default: 400px
+     */
+    width: string;
+    /**
+     * The height of the widget in pixels. Default: 600px
+     */
+    height: string;
+    /**
+     * The unique identifier of the widget consumer.
+     * Please fill the for to let us know a little about you: <TODO-TYPEFORM>
+     */
     appKey: string;
-    url: string;
+    /**
+     * The widget might be connected to a custom Ethereum provider.
+     */
+    provider: EthereumProvider;
+    /**
+     * Network ID.
+     */
+    chainId: SupportedChainId;
+    /**
+     * Swap, Limit or Advanced (Twap).
+     */
+    tradeType: TradeType;
+    /**
+     * The environment of the widget. Default: prod
+     */
+    env: CowSwapWidgetEnv;
+    /**
+     * The assets to trade.
+     */
+    tradeAssets: TradeAssets;
+    /**
+     * The theme of the widget UI.
+     */
+    theme: CowSwapTheme;
+    /**
+     * Allows to set a custom logo for the widget.
+     */
+    logoUrl: string;
+    /**
+     * Option to hide the logo in the widget.
+     */
+    hideLogo: boolean;
+    /**
+     * Option to hide the network selector in the widget.
+     */
+    hideNetworkSelector: boolean;
+    /**
+     * Enables the ability to switch between trade types in the widget.
+     */
+    enabledTradeTypes: TradeType[];
+    /**
+     * Colors palette to customize the widget UI.
+     */
+    palette: CowSwapWidgetPalette;
+    /**
+     * The partner fee in basis points.
+     * For example: 1.5% = 150 bips
+     * Please contact <TODO-TYPEFORM> to enable your partner fee.
+     */
+    partnerFeeBips: string;
 }
-export interface CowSwapWidgetParams {
-    width: number;
-    height: number;
-    container: HTMLElement;
-    metaData: CowSwapWidgetMetaData;
-    provider?: EthereumProvider;
-}
+export type CowSwapWidgetParams = Partial<CowSwapWidgetConfig>;
 export {};

urlUtils.d.ts

@@ -1,4 +0,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;
+import { CowSwapWidgetParams } from './types';
+export declare function buildWidgetUrl(params: CowSwapWidgetParams): string;
+export declare function buildWidgetPath(params: CowSwapWidgetParams): string;
+export declare function buildTradeAmountsQuery(params: CowSwapWidgetParams): URLSearchParams;

No alert changes

Improved metrics

Total package byte prevSize

17777

28.46%

Lines of code

345

54.02%

Worsened metrics

Number of lines in readme file

69

-2.82%

No dependency changes