@ape.swap/bonds-sdk 1.0.90 → 1.0.92
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.
|
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
13
|
-
import { Flex, ThemeUIProvider } from "theme-ui";
|
|
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 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: [
|
|
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: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bond" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container bond-price" }, { children: [_jsx(Flex, __assign({ className: "bond-price price" }, { children: "$0.0111" })), _jsx(Flex, __assign({ className: "bond-price discounted" }, { children: "$0.0101" }))] }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { 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;
|
package/dist/scss/bondmodal.scss
CHANGED
|
@@ -8,25 +8,26 @@
|
|
|
8
8
|
display: flex;
|
|
9
9
|
justify-content: center;
|
|
10
10
|
align-items: center;
|
|
11
|
-
z-index: 1000;
|
|
11
|
+
z-index: 1000;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.modal.modal-content {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
border-radius: 10px;
|
|
18
|
-
background-color:
|
|
19
|
-
padding:
|
|
18
|
+
background-color: var(--theme-ui-colors-white2);
|
|
19
|
+
padding: 10px;
|
|
20
20
|
border-radius: 10px;
|
|
21
21
|
z-index: 1001;
|
|
22
22
|
max-width: 700px;
|
|
23
23
|
min-width: 700px;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.modal.modal-header{
|
|
26
|
+
.modal.modal-header {
|
|
27
27
|
display: flex;
|
|
28
28
|
justify-content: end;
|
|
29
29
|
align-items: center;
|
|
30
|
+
padding: 5px;
|
|
30
31
|
|
|
31
32
|
.svg-close {
|
|
32
33
|
height: 12px;
|
|
@@ -75,17 +76,47 @@
|
|
|
75
76
|
width: 100%;
|
|
76
77
|
display: flex;
|
|
77
78
|
flex-direction: column;
|
|
78
|
-
padding: 10px;
|
|
79
|
+
padding-left: 10px;
|
|
80
|
+
padding-right: 10px;
|
|
81
|
+
padding-bottom: 10px;
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
.modal-container.title-container {
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
font-size: 1.5rem;
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: row;
|
|
89
|
+
align-items: center;
|
|
90
|
+
padding-top: 10px;
|
|
91
|
+
padding-bottom: 10px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.title-container.bond {
|
|
95
|
+
display: flex;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.title-container.bond-price {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
padding-left: 10px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.bond-price.price {
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
color: var(--theme-ui-colors-gray);
|
|
107
|
+
text-decoration: line-through;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.bond-price.discounted {
|
|
82
111
|
display: flex;
|
|
83
|
-
align-items: start;
|
|
84
112
|
}
|
|
85
113
|
|
|
86
114
|
.modal-container.description-container {
|
|
87
115
|
display: flex;
|
|
88
116
|
align-items: start;
|
|
117
|
+
padding-top: 10px;
|
|
118
|
+
padding-bottom: 10px;
|
|
119
|
+
font-weight: normal;
|
|
89
120
|
}
|
|
90
121
|
|
|
91
122
|
.modal-container.blocks-container {
|
|
@@ -94,8 +125,8 @@
|
|
|
94
125
|
align-items: center;
|
|
95
126
|
width: 100%;
|
|
96
127
|
justify-content: space-around;
|
|
97
|
-
margin-bottom:
|
|
98
|
-
margin-top:
|
|
128
|
+
margin-bottom: 10px;
|
|
129
|
+
margin-top: 5px;
|
|
99
130
|
}
|
|
100
131
|
|
|
101
132
|
.modal-block {
|
|
@@ -114,7 +145,7 @@
|
|
|
114
145
|
|
|
115
146
|
.block-header.header {
|
|
116
147
|
color: white;
|
|
117
|
-
font-weight:
|
|
148
|
+
font-weight: bold;
|
|
118
149
|
font-size: 12px;
|
|
119
150
|
padding-bottom: 10px;
|
|
120
151
|
}
|
|
@@ -122,7 +153,6 @@
|
|
|
122
153
|
.block-header.icon {
|
|
123
154
|
padding-left: 5px;
|
|
124
155
|
align-items: start;
|
|
125
|
-
width: 18px;
|
|
126
156
|
cursor: pointer;
|
|
127
157
|
}
|
|
128
158
|
|
|
@@ -145,15 +175,76 @@
|
|
|
145
175
|
width: 350px;
|
|
146
176
|
}
|
|
147
177
|
|
|
178
|
+
.modal-container.text-container {
|
|
179
|
+
display: flex;
|
|
180
|
+
flex-direction: column;
|
|
181
|
+
justify-content: center;
|
|
182
|
+
font-size: 12px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.text-container.row {
|
|
186
|
+
padding-top: 2px;
|
|
187
|
+
padding-bottom: 2px;
|
|
188
|
+
display: flex;
|
|
189
|
+
flex-direction: row;
|
|
190
|
+
justify-content: space-between;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.modal-container.input-container {
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: row;
|
|
196
|
+
background: var(--theme-ui-colors-white3);
|
|
197
|
+
border-radius: 10px;
|
|
198
|
+
min-height: 100px;
|
|
199
|
+
margin-top: 10px;
|
|
200
|
+
margin-bottom: 0px;
|
|
201
|
+
padding: 10px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.input-container.input {
|
|
205
|
+
background: var(--theme-ui-colors-white3);
|
|
206
|
+
border-radius: 10px;
|
|
207
|
+
border: medium;
|
|
208
|
+
padding-right: 10px;
|
|
209
|
+
width: 80%;
|
|
210
|
+
height: 50px;
|
|
211
|
+
font-size: 22px;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.input-container.token {
|
|
215
|
+
display: flex;
|
|
216
|
+
background: var(--theme-ui-colors-white4);
|
|
217
|
+
border-radius: 10px;
|
|
218
|
+
position: relative;
|
|
219
|
+
width: 190px;
|
|
220
|
+
height: 40px;
|
|
221
|
+
padding: 5px 4px;
|
|
222
|
+
cursor: unset;
|
|
223
|
+
}
|
|
224
|
+
|
|
148
225
|
.modal-container.button-container {
|
|
149
226
|
width: 100%;
|
|
227
|
+
padding-top: 10px;
|
|
228
|
+
display: flex;
|
|
229
|
+
flex-direction: row;
|
|
230
|
+
justify-content: space-between;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.button-container.get {
|
|
234
|
+
justify-content: center;
|
|
235
|
+
align-items: center;
|
|
236
|
+
cursor: pointer;
|
|
150
237
|
|
|
151
238
|
Button {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
239
|
+
width: 275px;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.button-container.buy {
|
|
244
|
+
justify-content: center;
|
|
245
|
+
align-items: center;
|
|
246
|
+
|
|
247
|
+
Button {
|
|
248
|
+
width: 375px;
|
|
158
249
|
}
|
|
159
250
|
}
|