@ape.swap/bonds-sdk 1.0.700 → 1.0.701
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.
|
@@ -224,7 +224,7 @@ var BondModal = function (_a) {
|
|
|
224
224
|
};
|
|
225
225
|
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
|
|
226
226
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
227
|
-
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "modal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "
|
|
227
|
+
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "modal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modaltable-container", children: [_jsxs(Flex, { className: "modaltable-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.earnToken.symbol, size: 50 })] }) }), _jsx(Flex, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { className: "title-container tokentags", children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })] }), _jsx(Flex, { className: "modaltable-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modaltable-container blocks-container", children: [_jsxs(Flex, { className: "modal-block block-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header", children: ["Discount", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%")] }), _jsxs(Flex, { className: "modal-block block-arr", children: [_jsxs(Flex, { className: "block-header", children: ["ARR", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%")] }), _jsxs(Flex, { className: "modal-block block-term", children: [_jsxs(Flex, { className: "block-header", children: ["Terms", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-'] }), _jsxs(Flex, { className: "modal-block block-maxbuy", children: [_jsxs(Flex, { className: "block-header", children: ["Max Buy", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US')] })] }), _jsxs(Flex, { className: "modaltable-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.lpToken.symbol, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] }), _jsxs(Flex, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modaltable-container buy-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
228
228
|
if (v.currentTarget.value.includes(',')) {
|
|
229
229
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
230
230
|
}
|
|
@@ -238,7 +238,7 @@ var BondModal = function (_a) {
|
|
|
238
238
|
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
239
239
|
? v.currentTarget.value
|
|
240
240
|
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
241
|
-
} }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max-button", onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "
|
|
241
|
+
} }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max max-button", onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null && isConfirmed ?
|
|
242
242
|
_jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleBuy, children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) })
|
|
243
243
|
:
|
|
244
244
|
_jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleApprove, children: isConfirming ? 'Confirming...' : 'Approve' }) })] })] })] }) }) }, bond.billAddress));
|
package/dist/scss/BondModal.scss
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
.
|
|
39
|
+
.modaltable-container {
|
|
40
40
|
width: 100%;
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: column;
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
padding-bottom: 10px;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.
|
|
48
|
+
.modaltable-container.title-container {
|
|
49
49
|
font-weight: bold;
|
|
50
50
|
font-size: 1.5rem;
|
|
51
51
|
display: flex;
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
padding-left: 10px;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.modaltable-container.description-container {
|
|
134
134
|
display: flex;
|
|
135
135
|
align-items: start;
|
|
136
136
|
padding-top: 10px;
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
font-weight: normal;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.
|
|
141
|
+
.modaltable-container.blocks-container {
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: row;
|
|
144
144
|
align-items: center;
|
|
@@ -201,7 +201,7 @@
|
|
|
201
201
|
width: 350px;
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
.
|
|
204
|
+
.modaltable-container.text-container {
|
|
205
205
|
display: flex;
|
|
206
206
|
flex-direction: column;
|
|
207
207
|
justify-content: center;
|
|
@@ -258,10 +258,10 @@
|
|
|
258
258
|
display: flex;
|
|
259
259
|
}
|
|
260
260
|
|
|
261
|
-
.
|
|
261
|
+
.modaltable-container.buy-container {
|
|
262
262
|
display: flex;
|
|
263
263
|
flex-direction: column;
|
|
264
|
-
background-color:
|
|
264
|
+
background-color: transparent;
|
|
265
265
|
border-radius: 10px;
|
|
266
266
|
min-height: 100px;
|
|
267
267
|
margin-top: 10px;
|
|
@@ -289,26 +289,26 @@
|
|
|
289
289
|
.balancerow.max {
|
|
290
290
|
align-items: center;
|
|
291
291
|
cursor: pointer;
|
|
292
|
+
}
|
|
292
293
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
background: var(--theme-ui-colors-primaryButton);
|
|
296
|
-
height: 22px;
|
|
297
|
-
padding-left: 8px;
|
|
298
|
-
padding-right: 8px;
|
|
299
|
-
cursor: 'pointer';
|
|
300
|
-
font-size: 12px;
|
|
301
|
-
font-weight: 600;
|
|
302
|
-
border-radius: small;
|
|
303
|
-
margin-left: 10px;
|
|
304
|
-
transition: 'all .3s linear';
|
|
305
|
-
display: flex;
|
|
306
|
-
align-items: center;
|
|
307
|
-
justify-content: center;
|
|
294
|
+
.max.max-button {
|
|
308
295
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
296
|
+
background: var(--theme-ui-colors-primaryButton);
|
|
297
|
+
height: 22px;
|
|
298
|
+
padding-left: 8px;
|
|
299
|
+
padding-right: 8px;
|
|
300
|
+
cursor: 'pointer';
|
|
301
|
+
font-size: 12px;
|
|
302
|
+
font-weight: 600;
|
|
303
|
+
border-radius: small;
|
|
304
|
+
margin-left: 10px;
|
|
305
|
+
transition: 'all .3s linear';
|
|
306
|
+
display: flex;
|
|
307
|
+
align-items: center;
|
|
308
|
+
justify-content: center;
|
|
309
|
+
|
|
310
|
+
&:active {
|
|
311
|
+
transform: scale(0.9);
|
|
312
312
|
}
|
|
313
313
|
}
|
|
314
314
|
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
cursor: unset;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
.
|
|
348
|
+
.modaltable-container.button-container {
|
|
349
349
|
width: 100%;
|
|
350
350
|
padding-top: 10px;
|
|
351
351
|
display: flex;
|