@ape.swap/bonds-sdk 1.0.89 → 1.0.91

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.
@@ -9,8 +9,8 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
13
- import { Flex, ThemeUIProvider } from "theme-ui";
12
+ import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
13
+ import { Flex, ThemeUIProvider, Input } from "theme-ui";
14
14
  import { useWeb3React } from "@web3-react/core";
15
15
  import { getColumnDiscountStyle } from '../Bonds/styles';
16
16
  import { defaultTheme } from '../../theme';
@@ -27,6 +27,6 @@ var BondModal = function (_a) {
27
27
  var vestingTime = function (vestingTerm) {
28
28
  return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
29
29
  };
30
- return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: _jsx(Flex, __assign({ className: "modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal-content" }, { children: [_jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close", width: "20px" }) })), "Bond Modal", _jsxs("p", { children: ["Bond Address: ", bond === null || bond === void 0 ? void 0 : bond.billAddress] }), isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Token" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" }))] })), _jsxs(Flex, __assign({ className: "container bondrow-container" }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) }, { children: "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat("".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 0) * 365) / vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days ? "".concat(vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: bond === null || bond === void 0 ? void 0 : bond.tokensRemaining.split('.')[0] }))] }))] })), _jsxs(Flex, __assign({ className: "container button-container" }, { children: [_jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }), _jsxs(Button, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })] }))] })) })) })));
30
+ return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsxs(Flex, __assign({ className: "modal modal-header" }, { children: [_jsx(Flex, __assign({ className: "new" }, { children: "NEW" })), _jsxs(Flex, __assign({ className: "project-info" }, { children: ["Project Info", _jsx(Flex, __assign({ className: "project-info icon" }, { children: _jsx(Svg, { icon: "expand" }) }))] })), _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) }))] })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsx(Flex, __assign({ className: "modal-container title-container" }, { children: _jsx("h2", { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: _jsx("p", { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }) })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount", sx: getColumnDiscountStyle((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat("".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 0) * 365) / vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days).toFixed(2), "%"))] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days ? "".concat(vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "1,000,000"] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx("div", { children: "You spend:" }), _jsxs("div", { children: ["0 ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName, " = $ 0"] })] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs("div", { children: ["Premium: ", _jsx(Svg, { icon: "questionFill", width: "15px" })] }), _jsx("div", { children: "$ 0" })] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx("div", { children: "You get (over 90 days):" }), _jsxs("div", { children: ["0 ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ 0"] })] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { type: "number", className: "number-input", placeholder: "0.0" }) })), _jsx(Flex, __assign({ className: "input-container token" }, { children: "Token" }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: _jsxs(Button, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }) }))] }))] }))] })) })) })));
31
31
  };
32
32
  export default BondModal;
@@ -149,7 +149,7 @@ var Bonds = function (_a) {
149
149
  var _a, _b, _c, _d;
150
150
  return (
151
151
  // <Flex className="container bondrow-container" onClick={() => handleRowClick(bond.billAddress)}>
152
- _jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClickModal(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token", sx: styles.columnToken }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0) }, { children: "".concat((_b = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _b === void 0 ? void 0 : _b.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr", sx: styles.columnArr }, { children: "".concat("".concat(((((_c = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _c !== void 0 ? _c : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term", sx: styles.columnTerm }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining", sx: styles.columnTokensRemaining }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "icon icon-tooltip" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] })));
152
+ _jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClickModal(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token", sx: styles.columnToken }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0) }, { children: "".concat((_b = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _b === void 0 ? void 0 : _b.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr", sx: styles.columnArr }, { children: "".concat("".concat(((((_c = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _c !== void 0 ? _c : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term", sx: styles.columnTerm }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining", sx: styles.columnTokensRemaining }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] })));
153
153
  })] }))] })));
154
154
  };
155
155
  export default Bonds;
@@ -1,4 +1,4 @@
1
- .modal-backdrop {
1
+ .modal.modal-backdrop {
2
2
  position: fixed;
3
3
  top: 0;
4
4
  left: 0;
@@ -8,97 +8,215 @@
8
8
  display: flex;
9
9
  justify-content: center;
10
10
  align-items: center;
11
- z-index: 1000; /* Ensure it's on top */
11
+ z-index: 1000;
12
12
  }
13
13
 
14
- .modal-content {
14
+ .modal.modal-content {
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  border-radius: 10px;
18
- background-color: #0E0D16;
19
- padding: 20px;
20
- border-radius: 5px;
18
+ background-color: var(--theme-ui-colors-white2);
19
+ padding: 10px;
20
+ border-radius: 10px;
21
21
  z-index: 1001;
22
+ max-width: 700px;
23
+ min-width: 700px;
22
24
  }
23
25
 
24
- .container.table-container {
26
+ .modal.modal-header{
27
+ display: flex;
28
+ justify-content: end;
29
+ align-items: center;
30
+ padding: 5px;
31
+
32
+ .svg-close {
33
+ height: 12px;
34
+ width: 12px;
35
+ cursor: pointer;
36
+ }
37
+
38
+ .project-info {
39
+ align-items: center;
40
+ box-sizing: border-box;
41
+ margin: 0px 10px 0px 0px;
42
+ min-width: 0px;
43
+ display: flex;
44
+ font-size: 12px;
45
+ font-weight: bold;
46
+ background: var(--theme-ui-colors-primaryButton);
47
+ padding-left: 10px;
48
+ padding-top: 2px;
49
+ padding-bottom: 2px;
50
+ border-radius: 10px;
51
+ align-items: center;
52
+ position: relative;
53
+ cursor: pointer;
54
+
55
+ .icon {
56
+ padding-left: 5px;
57
+ padding-right: 0px;
58
+ }
59
+ }
60
+
61
+ .new {
62
+ color: white;
63
+ display: flex;
64
+ background: rgba(223, 65, 65, 0.4);
65
+ border-radius: 6px;
66
+ padding: 1px 5px;
67
+ font-size: 12px;
68
+ font-weight: bold;
69
+ line-height: 17px;
70
+ margin-right: 10px;
71
+ cursor: pointer;
72
+ }
73
+ }
74
+
75
+ .modal-container.table-container {
25
76
  width: 100%;
26
77
  display: flex;
27
78
  flex-direction: column;
28
- padding: 50px;
79
+ padding-left: 10px;
80
+ padding-right: 10px;
81
+ padding-bottom: 10px;
29
82
  }
30
83
 
31
- .container.header-container {
84
+ .modal-container.title-container {
32
85
  display: flex;
33
- justify-content: space-around;
34
- padding: 5px;
35
- font-size: 12px;
36
- color: #78787D;
86
+ align-items: start;
37
87
  }
38
88
 
39
- .container.bondrow-container {
89
+ .modal-container.description-container {
90
+ display: flex;
91
+ align-items: start;
92
+ }
93
+
94
+ .modal-container.blocks-container {
40
95
  display: flex;
41
96
  flex-direction: row;
97
+ align-items: center;
42
98
  width: 100%;
43
99
  justify-content: space-around;
44
- background-color:#151320;
45
100
  margin-bottom: 10px;
46
- padding: 20px;
47
- border-radius: 10px;
48
- border: 1px solid #4B4B53;
49
- cursor: pointer;
101
+ margin-top: 5px;
50
102
  }
51
103
 
52
- .column.column-token {
53
- width: 100px;
104
+ .modal-block {
105
+ min-width: 0px;
106
+ display: flex;
54
107
  flex-direction: column;
55
- justify-content: center;
56
108
  align-items: center;
109
+ background: var(--theme-ui-colors-white3);
110
+ font-weight: 900;
111
+ font-size: 16px;
112
+ border-radius: 10px;
113
+ height: 90%;
114
+ padding-top: 10px;
115
+ padding-bottom: 10px;
57
116
  }
58
117
 
59
- .column.column-discount {
60
- width: 50px;
61
- flex-direction: column;
62
- justify-content: center;
63
- align-items: center;
118
+ .block-header.header {
119
+ color: white;
120
+ font-weight: normal;
121
+ font-size: 12px;
122
+ padding-bottom: 10px;
64
123
  }
65
124
 
66
- .column.column-arr {
67
- width: 50px;
68
- flex-direction: column;
69
- justify-content: center;
70
- align-items: center;
125
+ .block-header.icon {
126
+ padding-left: 5px;
127
+ align-items: start;
128
+ cursor: pointer;
71
129
  }
72
130
 
73
- .column.column-term {
74
- width: 50px;
75
- flex-direction: column;
76
- justify-content: center;
77
- align-items: center;
131
+ .modal-block.column-discount {
132
+ margin: 0px 10px 0px 0px;
133
+ width: 350px;
78
134
  }
79
135
 
80
- .column.column-tokensremaining {
81
- width: 50px;
136
+ .modal-block.column-arr {
137
+ margin: 0px 10px 0px 0px;
138
+ width: 350px;
139
+ }
140
+
141
+ .modal-block.column-term {
142
+ margin: 0px 10px 0px 0px;
143
+ width: 350px;
144
+ }
145
+
146
+ .modal-block.column-maxbuy {
147
+ width: 350px;
148
+ }
149
+
150
+ .modal-container.text-container {
151
+ display: flex;
82
152
  flex-direction: column;
83
153
  justify-content: center;
84
- align-items: center;
154
+ font-size: 12px;
85
155
  }
86
156
 
87
- .column.column-hotbond {
88
- width: 50px;
89
- flex-direction: column;
157
+ .text-container.row {
158
+ padding-top: 2px;
159
+ padding-bottom: 2px;
160
+ display: flex;
161
+ flex-direction: row;
162
+ justify-content: space-between;
163
+ }
164
+
165
+ .modal-container.input-container {
166
+ display: flex;
167
+ flex-direction: row;
168
+ background: var(--theme-ui-colors-white3);
169
+ border-radius: 10px;
170
+ min-height: 100px;
171
+ margin-top: 10px;
172
+ margin-bottom: 0px;
173
+ padding: 10px;
174
+ }
175
+
176
+ .input-container.input {
177
+ background: var(--theme-ui-colors-white3);
178
+ border-radius: 10px;
179
+ border: medium;
180
+ padding-right: 10px;
181
+ width: 80%;
182
+ height: 50px;
183
+ font-size: 22px;
184
+ }
185
+
186
+ .input-container.token {
187
+ display: flex;
188
+ background: var(--theme-ui-colors-white4);
189
+ border-radius: 10px;
190
+ position: relative;
191
+ width: 190px;
192
+ height: 40px;
193
+ padding: 5px 4px;
194
+ cursor: unset;
195
+ }
196
+
197
+ .modal-container.button-container {
198
+ width: 100%;
199
+ padding-top: 10px;
200
+ display: flex;
201
+ flex-direction: row;
202
+ justify-content: space-between;
203
+ }
204
+
205
+ .button-container.get {
90
206
  justify-content: center;
91
207
  align-items: center;
208
+ cursor: pointer;
209
+
210
+ Button {
211
+ width: 275px;
212
+ }
92
213
  }
93
214
 
94
- .container.button-container {
95
- width: 100%;
215
+ .button-container.buy {
216
+ justify-content: center;
217
+ align-items: center;
96
218
 
97
219
  Button {
98
- justify-content: center;
99
- align-items: center;
100
- flex: 1;
101
- margin-left: 10px;
102
- margin-right: 10px;
220
+ width: 375px;
103
221
  }
104
222
  }
@@ -30,4 +30,5 @@ export interface BondsDataResponse {
30
30
  priceUsd: string;
31
31
  tags?: string[];
32
32
  arr: string;
33
+ shortDescription?: string;
33
34
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "1.0.89",
6
+ "version": "1.0.91",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",
@@ -52,6 +52,7 @@
52
52
  "@emotion/react": "^11.11.4",
53
53
  "@emotion/styled": "^11.11.5",
54
54
  "@types/node": "^20.14.10",
55
+ "bignumber.js": "^9.1.2",
55
56
  "framer-motion": "^11.3.2",
56
57
  "lodash": "^4.17.21",
57
58
  "lottie-react": "^2.4.0",