@ape.swap/bonds-sdk 1.0.614 → 1.0.616
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.
|
@@ -62,7 +62,7 @@ var BondModal = function (_a) {
|
|
|
62
62
|
return null;
|
|
63
63
|
var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
|
|
64
64
|
var _c = useWaitForTransactionReceipt({
|
|
65
|
-
confirmations:
|
|
65
|
+
confirmations: 3,
|
|
66
66
|
chainId: accountChainId,
|
|
67
67
|
hash: hash,
|
|
68
68
|
}), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
|
|
@@ -148,8 +148,14 @@ var BondModal = function (_a) {
|
|
|
148
148
|
}
|
|
149
149
|
});
|
|
150
150
|
}); };
|
|
151
|
-
var _f = useState(null),
|
|
152
|
-
var _g = useState(null),
|
|
151
|
+
var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
|
|
152
|
+
var _g = useState(null), toastMessage = _g[0], setToastMessage = _g[1];
|
|
153
|
+
useEffect(function () {
|
|
154
|
+
if (isConfirmed) {
|
|
155
|
+
setToastMessage("Transaction complete");
|
|
156
|
+
setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
|
|
157
|
+
}
|
|
158
|
+
}, [approveTx, buyTx]);
|
|
153
159
|
var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
|
|
154
160
|
var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
|
|
155
161
|
useEffect(function () {
|
|
@@ -228,26 +234,26 @@ var BondModal = function (_a) {
|
|
|
228
234
|
var handleInputChange = function (event) {
|
|
229
235
|
setInputValue(event.target.value);
|
|
230
236
|
};
|
|
231
|
-
return (
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
237
|
+
return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), bondData.map(function (bond) {
|
|
238
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
239
|
+
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [_jsx(Flex, { className: "modal modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modal-container table-container", children: [_jsxs(Flex, { className: "modal-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.payoutTokenName, 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: "modal-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modal-container blocks-container", children: [_jsxs(Flex, { className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header header", children: ["Discount", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-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 column-arr", children: [_jsxs(Flex, { className: "block-header header", children: ["ARR", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-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 column-term", children: [_jsxs(Flex, { className: "block-header header", children: ["Terms", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-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 column-maxbuy", children: [_jsxs(Flex, { className: "block-header header", children: ["Max Buy", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-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: "modal-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.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { 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: "modal-container input-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) {
|
|
240
|
+
if (v.currentTarget.value.includes(',')) {
|
|
241
|
+
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
242
|
+
}
|
|
243
|
+
if (v.currentTarget.value.includes('%')) {
|
|
244
|
+
v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
|
|
245
|
+
}
|
|
246
|
+
if (v.currentTarget.value === '.') {
|
|
247
|
+
v.currentTarget.value = '0.';
|
|
248
|
+
}
|
|
249
|
+
v.currentTarget.value =
|
|
250
|
+
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
251
|
+
? v.currentTarget.value
|
|
252
|
+
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
253
|
+
} }) }), _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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), 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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null && isConfirmed ?
|
|
254
|
+
_jsx(Button, { disabled: isPending || isConfirming, onClick: handleBuy, children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) })
|
|
255
|
+
:
|
|
256
|
+
_jsx(Button, { disabled: isPending || isConfirming, onClick: handleApprove, children: isConfirming ? 'Confirming...' : 'Approve' }) })] })] })] }) }) }, bond.billAddress));
|
|
257
|
+
})] }));
|
|
252
258
|
};
|
|
253
259
|
export default BondModal;
|
package/dist/scss/BondModal.scss
CHANGED
|
@@ -405,4 +405,27 @@
|
|
|
405
405
|
Button {
|
|
406
406
|
width: 375px;
|
|
407
407
|
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.toast {
|
|
411
|
+
position: fixed;
|
|
412
|
+
bottom: 20px;
|
|
413
|
+
right: 20px;
|
|
414
|
+
background-color: #333;
|
|
415
|
+
color: #fff;
|
|
416
|
+
padding: 10px 20px;
|
|
417
|
+
border-radius: 5px;
|
|
418
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
419
|
+
z-index: 1000;
|
|
420
|
+
animation: fadein 0.5s, fadeout 0.5s 4.5s;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
@keyframes fadein {
|
|
424
|
+
from { bottom: 0; opacity: 0; }
|
|
425
|
+
to { bottom: 20px; opacity: 1; }
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
@keyframes fadeout {
|
|
429
|
+
from { bottom: 20px; opacity: 1; }
|
|
430
|
+
to { bottom: 0; opacity: 0; }
|
|
408
431
|
}
|
|
@@ -263,4 +263,27 @@
|
|
|
263
263
|
Button {
|
|
264
264
|
width: 125px;
|
|
265
265
|
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.toast {
|
|
269
|
+
position: fixed;
|
|
270
|
+
bottom: 20px;
|
|
271
|
+
right: 20px;
|
|
272
|
+
background-color: #333;
|
|
273
|
+
color: #fff;
|
|
274
|
+
padding: 10px 20px;
|
|
275
|
+
border-radius: 5px;
|
|
276
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
277
|
+
z-index: 1000;
|
|
278
|
+
animation: fadein 0.5s, fadeout 0.5s 4.5s;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
@keyframes fadein {
|
|
282
|
+
from { bottom: 0; opacity: 0; }
|
|
283
|
+
to { bottom: 20px; opacity: 1; }
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
@keyframes fadeout {
|
|
287
|
+
from { bottom: 20px; opacity: 1; }
|
|
288
|
+
to { bottom: 0; opacity: 0; }
|
|
266
289
|
}
|