@cowprotocol/widget-lib 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -3
- package/index.iife.js +1 -1
- package/index.js +1 -1
- package/index.mjs +52 -54
- package/package.json +1 -1
- package/types.d.ts +14 -19
package/README.md
CHANGED
|
@@ -37,11 +37,11 @@ import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'
|
|
|
37
37
|
const widgetContainer = document.getElementById('cowswap-widget')
|
|
38
38
|
|
|
39
39
|
const params: CowSwapWidgetParams = {
|
|
40
|
-
|
|
40
|
+
appCode: '<YOUR_APP_KEY>', // Just an unique identifier for your app
|
|
41
41
|
sell: { asset: 'DAI' },
|
|
42
42
|
buy: { asset: 'USDC', amount: '0.1' },
|
|
43
43
|
// instantiate your own web3 provider
|
|
44
|
-
provider: window.ethereum
|
|
44
|
+
provider: window.ethereum,
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
const updateWidget = cowSwapWidget(
|
|
@@ -57,12 +57,13 @@ updateWidget({ ...params, tradeType: 'limit' })
|
|
|
57
57
|
## Developers
|
|
58
58
|
|
|
59
59
|
#### Test
|
|
60
|
+
|
|
60
61
|
```
|
|
61
62
|
nx test widget-lib
|
|
62
63
|
```
|
|
63
64
|
|
|
64
65
|
#### Build the library
|
|
66
|
+
|
|
65
67
|
```
|
|
66
68
|
nx build widget-lib
|
|
67
69
|
```
|
|
68
|
-
|
package/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var cowSwapWidget=function(
|
|
1
|
+
var cowSwapWidget=function(a){"use strict";const g="2.0",m="*",l=["connect","disconnect","close","chainChanged","accountsChanged"];class f{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={},l.forEach(t=>{e.on(t,n=>{this.postMessage({method:t,params:[n]})})})}processRequest(e){if(!this.ethereumProvider)return;(e.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(e)).then(n=>{this.postMessage({id:e.id,result:n})}).catch(n=>{this.postMessage({id:e.id,error:n})})}postMessage(e){this.contentWindow.postMessage({jsonrpc:g,...e},m)}}function E(){return typeof window>"u"||!window?"":`https://swap-dev-git-${window.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 e=d[s.env||"prod"],t=h(s),n=u(s);return e+"/#"+t+"?"+n}function h(s){const{chainId:e=1,sell:t,buy:n,tradeType:o=c.SWAP}=s,i=[];t?.asset&&i.push(t.asset),n?.asset&&i.push(n.asset);const R=i.map(encodeURIComponent).join("/");return`/${e}/widget/${o}/${R}`}function u(s){const{sell:e,buy:t,theme:n}=s,o=new URLSearchParams;return e?.amount&&o.append("sellAmount",e.amount),t?.amount&&o.append("buyAmount",t.amount),n&&o.append("theme",typeof n=="string"?n:n.baseTheme),o}const r="cowSwapWidget",p="640px",y="450px",W=20;function P(s,e={}){const{provider:t}=e,n=S(e);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return T(o,e.appCode),A(n,e.height),t&&new f(o).onConnect(t),n.addEventListener("load",()=>{w(e,o)}),i=>w(i,o)}function S(s){const{width:e=y,height:t=p}=s,n=document.createElement("iframe");return n.src=v(s),n.width=e,n.height=t,n.style.border="0",n}function w(s,e){const t=h(s),n=u(s).toString();e.postMessage({key:r,method:"update",urlParams:{pathname:t,search:n},appParams:{...s,provider:void 0}},"*")}function T(s,e){window.addEventListener("message",t=>{t.data.key!==r||t.data.method!=="activate"||s.postMessage({key:r,method:"metaData",metaData:e?{appCode:e}:void 0},"*")})}function A(s,e=p){window.addEventListener("message",t=>{t.data.key!==r||t.data.method!=="iframeHeight"||(s.style.height=t.data.height?`${t.data.height+W}px`:e)})}return a.COWSWAP_URLS=d,a.TradeType=c,a.cowSwapWidget=P,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),a}({});
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g="2.0",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g="2.0",m="*",l=["connect","disconnect","close","chainChanged","accountsChanged"];class f{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={},l.forEach(t=>{e.on(t,n=>{this.postMessage({method:t,params:[n]})})})}processRequest(e){if(!this.ethereumProvider)return;(e.method==="enable"?this.ethereumProvider.enable():this.ethereumProvider.request(e)).then(n=>{this.postMessage({id:e.id,result:n})}).catch(n=>{this.postMessage({id:e.id,error:n})})}postMessage(e){this.contentWindow.postMessage({jsonrpc:g,...e},m)}}function E(){return typeof window>"u"||!window?"":`https://swap-dev-git-${window.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 r=(s=>(s.SWAP="swap",s.LIMIT="limit",s.ADVANCED="advanced",s))(r||{});function v(s){const e=d[s.env||"prod"],t=h(s),n=u(s);return e+"/#"+t+"?"+n}function h(s){const{chainId:e=1,sell:t,buy:n,tradeType:o=r.SWAP}=s,i=[];t?.asset&&i.push(t.asset),n?.asset&&i.push(n.asset);const w=i.map(encodeURIComponent).join("/");return`/${e}/widget/${o}/${w}`}function u(s){const{sell:e,buy:t,theme:n}=s,o=new URLSearchParams;return e?.amount&&o.append("sellAmount",e.amount),t?.amount&&o.append("buyAmount",t.amount),n&&o.append("theme",typeof n=="string"?n:n.baseTheme),o}const a="cowSwapWidget",p="640px",y="450px",P=20;function W(s,e={}){const{provider:t}=e,n=S(e);s.innerHTML="",s.appendChild(n);const{contentWindow:o}=n;if(!o)throw new Error("Iframe does not contain a window!");return T(o,e.appCode),A(n,e.height),t&&new f(o).onConnect(t),n.addEventListener("load",()=>{c(e,o)}),i=>c(i,o)}function S(s){const{width:e=y,height:t=p}=s,n=document.createElement("iframe");return n.src=v(s),n.width=e,n.height=t,n.style.border="0",n}function c(s,e){const t=h(s),n=u(s).toString();e.postMessage({key:a,method:"update",urlParams:{pathname:t,search:n},appParams:{...s,provider:void 0}},"*")}function T(s,e){window.addEventListener("message",t=>{t.data.key!==a||t.data.method!=="activate"||s.postMessage({key:a,method:"metaData",metaData:e?{appCode:e}:void 0},"*")})}function A(s,e=p){window.addEventListener("message",t=>{t.data.key!==a||t.data.method!=="iframeHeight"||(s.style.height=t.data.height?`${t.data.height+P}px`:e)})}exports.COWSWAP_URLS=d;exports.TradeType=r;exports.cowSwapWidget=W;
|
package/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const
|
|
2
|
-
class
|
|
1
|
+
const w = "2.0", m = "*", g = ["connect", "disconnect", "close", "chainChanged", "accountsChanged"];
|
|
2
|
+
class f {
|
|
3
3
|
/**
|
|
4
4
|
* Creates an instance of JsonRpcManager.
|
|
5
5
|
* @param contentWindow - The window for handling events.
|
|
6
6
|
*/
|
|
7
|
-
constructor(
|
|
8
|
-
this.contentWindow =
|
|
9
|
-
|
|
7
|
+
constructor(e) {
|
|
8
|
+
this.contentWindow = e, this.ethereumProvider = null, this.requests = {}, this.processEvent = (t) => {
|
|
9
|
+
t.data.jsonrpc === "2.0" && (this.ethereumProvider ? this.processRequest(t.data) : this.requests[t.data.id] = t.data);
|
|
10
10
|
}, window.addEventListener("message", this.processEvent);
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
@@ -19,12 +19,12 @@ class l {
|
|
|
19
19
|
* Handles the 'connect' event and sets up event listeners for Ethereum provider events.
|
|
20
20
|
* @param ethereumProvider - The Ethereum provider to connect.
|
|
21
21
|
*/
|
|
22
|
-
onConnect(
|
|
23
|
-
this.ethereumProvider =
|
|
24
|
-
this.processRequest(this.requests[
|
|
25
|
-
}), this.requests = {}, g.forEach((
|
|
26
|
-
|
|
27
|
-
this.postMessage({ method:
|
|
22
|
+
onConnect(e) {
|
|
23
|
+
this.ethereumProvider = e, Object.keys(this.requests).forEach((t) => {
|
|
24
|
+
this.processRequest(this.requests[t]);
|
|
25
|
+
}), this.requests = {}, g.forEach((t) => {
|
|
26
|
+
e.on(t, (n) => {
|
|
27
|
+
this.postMessage({ method: t, params: [n] });
|
|
28
28
|
});
|
|
29
29
|
});
|
|
30
30
|
}
|
|
@@ -32,74 +32,72 @@ class l {
|
|
|
32
32
|
* Processes a JSON-RPC request and sends appropriate response or error via the content window.
|
|
33
33
|
* @param request - The JSON-RPC request to be processed.
|
|
34
34
|
*/
|
|
35
|
-
processRequest(
|
|
35
|
+
processRequest(e) {
|
|
36
36
|
if (!this.ethereumProvider)
|
|
37
37
|
return;
|
|
38
|
-
(
|
|
39
|
-
this.postMessage({ id:
|
|
38
|
+
(e.method === "enable" ? this.ethereumProvider.enable() : this.ethereumProvider.request(e)).then((n) => {
|
|
39
|
+
this.postMessage({ id: e.id, result: n });
|
|
40
40
|
}).catch((n) => {
|
|
41
|
-
this.postMessage({ id:
|
|
41
|
+
this.postMessage({ id: e.id, error: n });
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
|
-
postMessage(
|
|
44
|
+
postMessage(e) {
|
|
45
45
|
this.contentWindow.postMessage(
|
|
46
46
|
{
|
|
47
|
-
jsonrpc:
|
|
48
|
-
...
|
|
47
|
+
jsonrpc: w,
|
|
48
|
+
...e
|
|
49
49
|
},
|
|
50
50
|
m
|
|
51
51
|
);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
function
|
|
55
|
-
return `https://swap-dev-git-${location.hostname.replace("widget-configurator-git-", "").replace("-cowswap.vercel.app", "")}-cowswap.vercel.app`;
|
|
54
|
+
function l() {
|
|
55
|
+
return typeof window > "u" || !window ? "" : `https://swap-dev-git-${window.location.hostname.replace("widget-configurator-git-", "").replace("-cowswap.vercel.app", "")}-cowswap.vercel.app`;
|
|
56
56
|
}
|
|
57
|
-
const
|
|
57
|
+
const E = {
|
|
58
58
|
local: "http://localhost:3000",
|
|
59
59
|
prod: "https://swap.cow.fi",
|
|
60
60
|
dev: "https://dev.swap.cow.fi",
|
|
61
|
-
pr:
|
|
61
|
+
pr: l()
|
|
62
62
|
};
|
|
63
63
|
var c = /* @__PURE__ */ ((s) => (s.SWAP = "swap", s.LIMIT = "limit", s.ADVANCED = "advanced", s))(c || {});
|
|
64
|
-
function
|
|
65
|
-
const
|
|
66
|
-
return
|
|
64
|
+
function v(s) {
|
|
65
|
+
const e = E[s.env || "prod"], t = d(s), n = h(s);
|
|
66
|
+
return e + "/#" + t + "?" + n;
|
|
67
67
|
}
|
|
68
68
|
function d(s) {
|
|
69
|
-
const { chainId:
|
|
70
|
-
|
|
69
|
+
const { chainId: e = 1, sell: t, buy: n, tradeType: o = c.SWAP } = s, i = [];
|
|
70
|
+
t?.asset && i.push(t.asset), n?.asset && i.push(n.asset);
|
|
71
|
+
const u = i.map(encodeURIComponent).join("/");
|
|
72
|
+
return `/${e}/widget/${o}/${u}`;
|
|
71
73
|
}
|
|
72
74
|
function h(s) {
|
|
73
|
-
const {
|
|
74
|
-
|
|
75
|
-
const { sell: o, buy: i } = t;
|
|
76
|
-
o.amount && n.append("sellAmount", o.amount), i.amount && n.append("buyAmount", i.amount);
|
|
77
|
-
}
|
|
78
|
-
return e && n.append("theme", e), n;
|
|
75
|
+
const { sell: e, buy: t, theme: n } = s, o = new URLSearchParams();
|
|
76
|
+
return e?.amount && o.append("sellAmount", e.amount), t?.amount && o.append("buyAmount", t.amount), n && o.append("theme", typeof n == "string" ? n : n.baseTheme), o;
|
|
79
77
|
}
|
|
80
|
-
const a = "cowSwapWidget", p = "640px",
|
|
81
|
-
function
|
|
82
|
-
const { provider:
|
|
78
|
+
const a = "cowSwapWidget", p = "640px", y = "450px", P = 20;
|
|
79
|
+
function I(s, e = {}) {
|
|
80
|
+
const { provider: t } = e, n = W(e);
|
|
83
81
|
s.innerHTML = "", s.appendChild(n);
|
|
84
82
|
const { contentWindow: o } = n;
|
|
85
83
|
if (!o)
|
|
86
84
|
throw new Error("Iframe does not contain a window!");
|
|
87
|
-
return
|
|
88
|
-
r(
|
|
85
|
+
return A(o, e.appCode), R(n, e.height), t && new f(o).onConnect(t), n.addEventListener("load", () => {
|
|
86
|
+
r(e, o);
|
|
89
87
|
}), (i) => r(i, o);
|
|
90
88
|
}
|
|
91
|
-
function
|
|
92
|
-
const { width:
|
|
93
|
-
return n.src =
|
|
89
|
+
function W(s) {
|
|
90
|
+
const { width: e = y, height: t = p } = s, n = document.createElement("iframe");
|
|
91
|
+
return n.src = v(s), n.width = e, n.height = t, n.style.border = "0", n;
|
|
94
92
|
}
|
|
95
|
-
function r(s,
|
|
96
|
-
const
|
|
97
|
-
|
|
93
|
+
function r(s, e) {
|
|
94
|
+
const t = d(s), n = h(s).toString();
|
|
95
|
+
e.postMessage(
|
|
98
96
|
{
|
|
99
97
|
key: a,
|
|
100
98
|
method: "update",
|
|
101
99
|
urlParams: {
|
|
102
|
-
pathname:
|
|
100
|
+
pathname: t,
|
|
103
101
|
search: n
|
|
104
102
|
},
|
|
105
103
|
appParams: {
|
|
@@ -110,25 +108,25 @@ function r(s, t) {
|
|
|
110
108
|
"*"
|
|
111
109
|
);
|
|
112
110
|
}
|
|
113
|
-
function
|
|
114
|
-
window.addEventListener("message", (
|
|
115
|
-
|
|
111
|
+
function A(s, e) {
|
|
112
|
+
window.addEventListener("message", (t) => {
|
|
113
|
+
t.data.key !== a || t.data.method !== "activate" || s.postMessage(
|
|
116
114
|
{
|
|
117
115
|
key: a,
|
|
118
116
|
method: "metaData",
|
|
119
|
-
metaData:
|
|
117
|
+
metaData: e ? { appCode: e } : void 0
|
|
120
118
|
},
|
|
121
119
|
"*"
|
|
122
120
|
);
|
|
123
121
|
});
|
|
124
122
|
}
|
|
125
|
-
function
|
|
126
|
-
window.addEventListener("message", (
|
|
127
|
-
|
|
123
|
+
function R(s, e = p) {
|
|
124
|
+
window.addEventListener("message", (t) => {
|
|
125
|
+
t.data.key !== a || t.data.method !== "iframeHeight" || (s.style.height = t.data.height ? `${t.data.height + P}px` : e);
|
|
128
126
|
});
|
|
129
127
|
}
|
|
130
128
|
export {
|
|
131
|
-
|
|
129
|
+
E as COWSWAP_URLS,
|
|
132
130
|
c as TradeType,
|
|
133
|
-
|
|
131
|
+
I as cowSwapWidget
|
|
134
132
|
};
|
package/package.json
CHANGED
package/types.d.ts
CHANGED
|
@@ -40,13 +40,6 @@ interface TradeAsset {
|
|
|
40
40
|
*/
|
|
41
41
|
amount?: string;
|
|
42
42
|
}
|
|
43
|
-
/**
|
|
44
|
-
* A pair of assets to trade.
|
|
45
|
-
*/
|
|
46
|
-
export interface TradeAssets {
|
|
47
|
-
sell: TradeAsset;
|
|
48
|
-
buy: TradeAsset;
|
|
49
|
-
}
|
|
50
43
|
export declare enum TradeType {
|
|
51
44
|
SWAP = "swap",
|
|
52
45
|
LIMIT = "limit",
|
|
@@ -57,6 +50,7 @@ export declare enum TradeType {
|
|
|
57
50
|
ADVANCED = "advanced"
|
|
58
51
|
}
|
|
59
52
|
export interface CowSwapWidgetPalette {
|
|
53
|
+
baseTheme: CowSwapTheme;
|
|
60
54
|
primaryColor: string;
|
|
61
55
|
screenBackground: string;
|
|
62
56
|
widgetBackground: string;
|
|
@@ -73,9 +67,9 @@ interface CowSwapWidgetConfig {
|
|
|
73
67
|
height: string;
|
|
74
68
|
/**
|
|
75
69
|
* The unique identifier of the widget consumer.
|
|
76
|
-
* Please fill the for to let us know a little about you:
|
|
70
|
+
* Please fill the for to let us know a little about you: https://cowprotocol.typeform.com/to/rONXaxHV
|
|
77
71
|
*/
|
|
78
|
-
|
|
72
|
+
appCode: string;
|
|
79
73
|
/**
|
|
80
74
|
* The widget might be connected to a custom Ethereum provider.
|
|
81
75
|
*/
|
|
@@ -93,13 +87,17 @@ interface CowSwapWidgetConfig {
|
|
|
93
87
|
*/
|
|
94
88
|
env: CowSwapWidgetEnv;
|
|
95
89
|
/**
|
|
96
|
-
*
|
|
90
|
+
* Sell token, and optionally the amount.
|
|
97
91
|
*/
|
|
98
|
-
|
|
92
|
+
sell: TradeAsset;
|
|
93
|
+
/**
|
|
94
|
+
* Buy token, and optionally the amount.
|
|
95
|
+
*/
|
|
96
|
+
buy: TradeAsset;
|
|
99
97
|
/**
|
|
100
98
|
* The theme of the widget UI.
|
|
101
99
|
*/
|
|
102
|
-
theme: CowSwapTheme;
|
|
100
|
+
theme: CowSwapTheme | CowSwapWidgetPalette;
|
|
103
101
|
/**
|
|
104
102
|
* Allows to set a custom logo for the widget.
|
|
105
103
|
*/
|
|
@@ -117,15 +115,12 @@ interface CowSwapWidgetConfig {
|
|
|
117
115
|
*/
|
|
118
116
|
enabledTradeTypes: TradeType[];
|
|
119
117
|
/**
|
|
120
|
-
*
|
|
121
|
-
*/
|
|
122
|
-
palette: CowSwapWidgetPalette;
|
|
123
|
-
/**
|
|
124
|
-
* The partner fee in basis points.
|
|
118
|
+
* The interface fee in basis points.
|
|
125
119
|
* For example: 1.5% = 150 bips
|
|
126
|
-
*
|
|
120
|
+
*
|
|
121
|
+
* Please contact https://cowprotocol.typeform.com/to/rONXaxHV
|
|
127
122
|
*/
|
|
128
|
-
|
|
123
|
+
interfaceFeeBips: string;
|
|
129
124
|
}
|
|
130
125
|
export type CowSwapWidgetParams = Partial<CowSwapWidgetConfig>;
|
|
131
126
|
export {};
|