@ape.swap/bonds-sdk 1.0.78-2.test.25 → 1.0.78-2.test.27
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/dist/scss/BondModal.scss
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
padding: 10px;
|
|
20
20
|
border-radius: 10px;
|
|
21
21
|
z-index: 1001;
|
|
22
|
-
max-width:
|
|
22
|
+
max-width: 1100px;
|
|
23
23
|
min-width: 700px;
|
|
24
24
|
height: auto;
|
|
25
25
|
max-height: 80vh;
|
|
@@ -414,4 +414,46 @@
|
|
|
414
414
|
@keyframes fadeout {
|
|
415
415
|
from { top: 50px; opacity: 1; }
|
|
416
416
|
to { top: 0; opacity: 0; }
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.font-small {
|
|
420
|
+
font-size: 14px;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.font-x-small {
|
|
424
|
+
font-size: 12px;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.text-highlight {
|
|
428
|
+
color: #38A611;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.paragraph-spaced {
|
|
432
|
+
line-height: 150%;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.button-narrow {
|
|
436
|
+
width: 190px !important;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.fading-hr {
|
|
440
|
+
border: none;
|
|
441
|
+
height: 1px; /* Adjust thickness */
|
|
442
|
+
background: linear-gradient(to right, transparent, white, transparent); /* White fades to transparent */
|
|
443
|
+
width: 100%; /* Full width */
|
|
444
|
+
margin: 20px 0; /* Adjust margin for spacing */
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
span.flex-inline {
|
|
448
|
+
display: contents;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.footer-details {
|
|
452
|
+
margin-left: -10px !important;
|
|
453
|
+
margin-right: -10px !important;
|
|
454
|
+
margin-bottom: -10px !important;
|
|
455
|
+
margin-top: 20px !important;
|
|
456
|
+
height: 50px;
|
|
457
|
+
align-items: center;
|
|
458
|
+
border-top: 1px solid #FFFFFF;
|
|
417
459
|
}
|
|
@@ -46,36 +46,38 @@ import { isNumber } from '../../utils/numbers';
|
|
|
46
46
|
import { TooltipBubble, Button, Svg, ListTag, Modal } from '../../components/uikit-sdk';
|
|
47
47
|
import { TooltipText } from '../../enum/tooltips';
|
|
48
48
|
import { ethers } from 'ethers';
|
|
49
|
-
import convertToTokenValue, { adjustDecimals } from
|
|
49
|
+
import convertToTokenValue, { adjustDecimals } from '../../utils/convertToTokenValue';
|
|
50
50
|
import TokenImage from '../../components/uikit-sdk/TokenImage';
|
|
51
51
|
import BOND_ABI from '../../config/abi/bond.json';
|
|
52
52
|
import ERC_20_ABI from '../../config/abi/erc20.json';
|
|
53
53
|
import { NETWORK_ICONS, NETWORK_LABEL } from '../../config/constants/chains';
|
|
54
54
|
import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
|
|
55
55
|
import '../../scss/BondModal.scss';
|
|
56
|
-
import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from
|
|
57
|
-
import { PUBLIC_RPC_URLS } from
|
|
58
|
-
import useModal from
|
|
56
|
+
import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
|
|
57
|
+
import { PUBLIC_RPC_URLS } from '../../config/constants/networks';
|
|
58
|
+
import useModal from '../../hooks/useModal';
|
|
59
59
|
import AccordionText from '../../components/AccordionText';
|
|
60
|
+
import moment from 'moment';
|
|
61
|
+
import { toNumber } from 'lodash';
|
|
60
62
|
var BondModal = function (_a) {
|
|
61
|
-
var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress, _b = _a.accordionTitle, accordionTitle = _b === void 0 ?
|
|
63
|
+
var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress, _b = _a.accordionTitle, accordionTitle = _b === void 0 ? 'What are Bonds?' : _b, _c = _a.accordionBody, accordionBody = _c === void 0 ? 'Body' : _c, _d = _a.accordionVisible, accordionVisible = _d === void 0 ? false : _d, _e = _a.style, style = _e === void 0 ? 'alt' : _e;
|
|
62
64
|
if (!isOpen)
|
|
63
65
|
return null;
|
|
64
66
|
var chainId = useChainId();
|
|
65
|
-
var
|
|
66
|
-
var
|
|
67
|
-
var
|
|
68
|
-
var
|
|
67
|
+
var _f = useSwitchChain(), chains = _f.chains, switchChain = _f.switchChain;
|
|
68
|
+
var _g = useState([]), bondData = _g[0], setBondData = _g[1];
|
|
69
|
+
var _h = useWriteContract(), hash = _h.data, isPending = _h.isPending, writeContract = _h.writeContract, writeContractAsync = _h.writeContractAsync;
|
|
70
|
+
var _j = useWaitForTransactionReceipt({
|
|
69
71
|
confirmations: 4,
|
|
70
72
|
chainId: chainId !== null && chainId !== void 0 ? chainId : accountChainId,
|
|
71
73
|
hash: hash,
|
|
72
|
-
}), isConfirming =
|
|
73
|
-
var
|
|
74
|
-
var
|
|
75
|
-
var
|
|
76
|
-
var
|
|
77
|
-
var
|
|
78
|
-
var
|
|
74
|
+
}), isConfirming = _j.isLoading, isConfirmed = _j.isSuccess;
|
|
75
|
+
var _k = useState(null), approveTx = _k[0], setApproveTx = _k[1];
|
|
76
|
+
var _l = useState(null), toastMessage = _l[0], setToastMessage = _l[1];
|
|
77
|
+
var _m = useState(null), buyTx = _m[0], setBuyTx = _m[1];
|
|
78
|
+
var _o = useState(null), tokenBalance = _o[0], setTokenBalance = _o[1];
|
|
79
|
+
var _p = useState(null), tokenDecimals = _p[0], setTokenDecimals = _p[1];
|
|
80
|
+
var _q = useState(''), inputValue = _q[0], setInputValue = _q[1];
|
|
79
81
|
var handleInputChange = function (event) {
|
|
80
82
|
setInputValue(event.target.value);
|
|
81
83
|
};
|
|
@@ -106,7 +108,7 @@ var BondModal = function (_a) {
|
|
|
106
108
|
chainId: chainId,
|
|
107
109
|
transactionHash: tx,
|
|
108
110
|
referenceId: 'cgpt-sdk',
|
|
109
|
-
billContract: billAddress
|
|
111
|
+
billContract: billAddress,
|
|
110
112
|
};
|
|
111
113
|
return [4 /*yield*/, axios.post("https://api-v2.apeswap.finance/bills/widget", data)];
|
|
112
114
|
case 3:
|
|
@@ -138,7 +140,7 @@ var BondModal = function (_a) {
|
|
|
138
140
|
address: tokenAddress,
|
|
139
141
|
abi: ERC_20_ABI,
|
|
140
142
|
functionName: 'approve',
|
|
141
|
-
args: [bondData[0].billAddress, amount]
|
|
143
|
+
args: [bondData[0].billAddress, amount],
|
|
142
144
|
})];
|
|
143
145
|
case 2:
|
|
144
146
|
tx = _a.sent();
|
|
@@ -163,11 +165,13 @@ var BondModal = function (_a) {
|
|
|
163
165
|
}, [approveTx, buyTx, isConfirmed]);
|
|
164
166
|
useEffect(function () {
|
|
165
167
|
if (isActive && account && bondData.length > 0) {
|
|
166
|
-
getTokenBalance(chainId, bondData[0].lpToken.address[chainId], account)
|
|
168
|
+
getTokenBalance(chainId, bondData[0].lpToken.address[chainId], account)
|
|
169
|
+
.then(function (_a) {
|
|
167
170
|
var roundedBalance = _a.roundedBalance, decimals = _a.decimals;
|
|
168
171
|
setTokenBalance(roundedBalance);
|
|
169
172
|
setTokenDecimals(decimals);
|
|
170
|
-
})
|
|
173
|
+
})
|
|
174
|
+
.catch(function (error) {
|
|
171
175
|
console.error('Error fetching token balance', error);
|
|
172
176
|
});
|
|
173
177
|
}
|
|
@@ -204,9 +208,7 @@ var BondModal = function (_a) {
|
|
|
204
208
|
// Fetch data
|
|
205
209
|
useEffect(function () {
|
|
206
210
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
207
|
-
var bond = response.data.bonds.filter(function (x) {
|
|
208
|
-
return x.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase());
|
|
209
|
-
});
|
|
211
|
+
var bond = response.data.bonds.filter(function (x) { return x.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
|
|
210
212
|
setBondData(bond);
|
|
211
213
|
});
|
|
212
214
|
}, [bondAddress]);
|
|
@@ -231,7 +233,7 @@ var BondModal = function (_a) {
|
|
|
231
233
|
var thresholdToShow = new BigNumber(threshold).div((_b = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
232
234
|
var safeAvailable = available.minus(thresholdToShow);
|
|
233
235
|
var singlePurchaseLimit = new BigNumber((_c = bond === null || bond === void 0 ? void 0 : bond.maxPayout) !== null && _c !== void 0 ? _c : 0).div(new BigNumber(10).pow((_d = bond === null || bond === void 0 ? void 0 : bond.earnToken.decimals[chainId]) !== null && _d !== void 0 ? _d : 18));
|
|
234
|
-
return !available ? 0 :
|
|
236
|
+
return !available ? 0 : singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable;
|
|
235
237
|
};
|
|
236
238
|
var onAsd = useModal(_jsx(Modal, { sx: { zIndex: 5000 }, children: _jsx(_Fragment, { children: "asd!" }) }))[0];
|
|
237
239
|
// const ref = React.useRef<boolean>(false);
|
|
@@ -262,8 +264,10 @@ var BondModal = function (_a) {
|
|
|
262
264
|
return 'Approve';
|
|
263
265
|
};
|
|
264
266
|
return (_jsx(_Fragment, { children: bondData.map(function (bond) {
|
|
265
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
266
|
-
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 &&
|
|
267
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
268
|
+
return (_jsx(React.Fragment, { children: style === 'standard' ? (_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" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".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" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".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" }) }) })] }), _jsx(Flex, { className: "block-content", children: vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days
|
|
269
|
+
? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D")
|
|
270
|
+
: '-' })] }), _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" }) }) })] }), _jsx(Flex, { className: "block-content", children: (_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) {
|
|
267
271
|
if (v.currentTarget.value.includes(',')) {
|
|
268
272
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
269
273
|
}
|
|
@@ -274,23 +278,41 @@ var BondModal = function (_a) {
|
|
|
274
278
|
v.currentTarget.value = '0.';
|
|
275
279
|
}
|
|
276
280
|
v.currentTarget.value =
|
|
277
|
-
!!v.currentTarget.value &&
|
|
281
|
+
!!v.currentTarget.value &&
|
|
282
|
+
isNumber(v.currentTarget.value) &&
|
|
283
|
+
parseFloat(v.currentTarget.value) >= 0
|
|
278
284
|
? v.currentTarget.value
|
|
279
285
|
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
280
286
|
} }) }), _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 bondname-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 () {
|
|
281
287
|
setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0');
|
|
282
|
-
}, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: onAsd, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: chainId !== bond.chainId
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
288
|
+
}, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: onAsd, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: chainId !== bond.chainId ? (_jsx(Button, { className: "switch-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: function (event) {
|
|
289
|
+
event.stopPropagation();
|
|
290
|
+
switchChain({ chainId: bond.chainId });
|
|
291
|
+
}, children: !account ? 'Connect Wallet' : "Switch to ".concat(NETWORK_LABEL[bond.chainId]) })) : approveTx != null && isConfirmed ? (_jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleBuy, children: getActionButtonText(bond) })) : (_jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleApprove, children: getActionButtonText(bond) })) })] }), accordionVisible && (_jsx(Flex, { className: "modaltable-container accordion-container", children: _jsx(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] })] }) })) : (_jsx(Flex, { className: "modal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "modal-content font-small", 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", sx: { flexDirection: 'row', gap: '20px' }, children: [_jsxs(Flex, { sx: { width: '500px', flexDirection: 'column' }, children: [_jsx("img", { src: "https://placehold.co/400x200" }), _jsx(Flex, { className: "modaltable-container description-container paragraph-spaced", sx: { marginTop: '20px' }, children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })] }), _jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [_jsxs(Flex, { sx: { alignItems: 'center' }, children: [_jsx(Flex, { sx: { minWidth: '300px' }, children: _jsxs("h2", { sx: { margin: '0px' }, children: [bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, ' ', _jsx(Svg, { width: 20, height: 20, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _p !== void 0 ? _p : 'question' })] }) }), _jsxs(Flex, { sx: { justifyContent: 'space-between', flexGrow: 1 }, children: [_jsx(TokenImage, { symbol: (_q = bond.showcaseTokenName) !== null && _q !== void 0 ? _q : bond.earnToken.symbol, size: 20 }), _jsx("span", { children: bond.earnToken.symbol }), " ", _jsx("span", { children: "|" }), ' ', _jsxs("span", { children: ["Market Price: $", earnTokenPrice(bond)] })] })] }), _jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px' }, children: [_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) {
|
|
292
|
+
if (v.currentTarget.value.includes(',')) {
|
|
293
|
+
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
294
|
+
}
|
|
295
|
+
if (v.currentTarget.value.includes('%')) {
|
|
296
|
+
v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
|
|
297
|
+
}
|
|
298
|
+
if (v.currentTarget.value === '.') {
|
|
299
|
+
v.currentTarget.value = '0.';
|
|
300
|
+
}
|
|
301
|
+
v.currentTarget.value =
|
|
302
|
+
!!v.currentTarget.value &&
|
|
303
|
+
isNumber(v.currentTarget.value) &&
|
|
304
|
+
parseFloat(v.currentTarget.value) >= 0
|
|
305
|
+
? v.currentTarget.value
|
|
306
|
+
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
307
|
+
} }) }), _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: (_r = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _r !== void 0 ? _r : 'question' }), _jsx(TokenImage, { symbol: (_s = bond.lpToken.symbol) !== null && _s !== void 0 ? _s : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container bondname-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 () {
|
|
308
|
+
setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0');
|
|
309
|
+
}, children: "Max" }) })] }))] }), _jsxs(Flex, { sx: { justifyContent: 'space-between', alignItems: 'center' }, children: [_jsxs(Flex, { children: ["You will receive:", _jsx(Flex, { sx: { marginLeft: '15px', marginRight: '5px' }, children: _jsx(TokenImage, { symbol: (_t = bond.showcaseTokenName) !== null && _t !== void 0 ? _t : bond.earnToken.symbol, size: 20 }) }), (toNumber(inputValue) / toNumber(earnTokenPrice(bond))).toFixed(2), " ", bond.earnToken.symbol, " + \u00A0", (toNumber(youGet(bond, inputValue)) -
|
|
310
|
+
toNumber(inputValue) / toNumber(earnTokenPrice(bond))).toFixed(2), _jsx("span", { className: "text-highlight", children: "\u00A0additional" })] }), _jsx(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: chainId !== bond.chainId ? (_jsx(Button, { className: "switch-button button-narrow", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: function (event) {
|
|
311
|
+
event.stopPropagation();
|
|
312
|
+
switchChain({ chainId: bond.chainId });
|
|
313
|
+
}, children: !account ? 'Connect Wallet' : "Switch to ".concat(NETWORK_LABEL[bond.chainId]) })) : approveTx != null && isConfirmed ? (_jsx(Button, { className: "action-button button-narrow", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleBuy, children: getActionButtonText(bond) })) : (_jsx(Button, { className: "action-button button-narrow", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut) || !account, onClick: handleApprove, children: getActionButtonText(bond) })) })] }), _jsx(Flex, { sx: { width: '100%', marginTop: '10px', marginBottom: '10px' }, children: _jsx("hr", { className: "fading-hr" }) }), _jsxs(Flex, { sx: { width: '100%' }, children: [_jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["Market Price: $", formatUSDNumber((toNumber(youGet(bond, inputValue)) * toNumber(earnTokenPrice(bond))).toString()), _jsx("hr", { className: "fading-hr" }), _jsx("span", { className: "text-highlight flex-inline", children: "Our price: " }), _jsxs("span", { className: "flex-inline", children: ["$", formatUSDNumber((toNumber(inputValue) * toNumber(bond.principalTokenPrice)).toString()), ' '] }), _jsxs("span", { className: "text-highlight flex-inline", children: ["(discount rate ", bond === null || bond === void 0 ? void 0 : bond.discount.toFixed(2), "%)"] })] }), _jsx(Flex, { sx: { width: '50px', alignItems: 'center', justifyContent: 'center' }, children: "vs." }), _jsxs(Flex, { sx: { width: '50%', flexDirection: 'column' }, children: ["If purchased from market: ", (toNumber(inputValue) / toNumber(earnTokenPrice(bond))).toFixed(0), ' ', bond.earnToken.symbol, _jsx("hr", { className: "fading-hr" }), _jsx("span", { className: "text-highlight flex-inline", children: "Amount you will get:" }), ' ', youGet(bond, inputValue), " ", _jsx("span", { className: "flex-inline", children: bond.earnToken.symbol })] })] })] })] })] }), _jsxs(Flex, { className: "footer-details", children: [_jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting start date: ", moment().format('DD-MMM-YYYY')] }), _jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: ["Vesting end date:", ' ', moment()
|
|
314
|
+
.add(vestingTime((_u = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _u !== void 0 ? _u : 0).days, 'days')
|
|
315
|
+
.format('DD-MMM-YYYY')] }), _jsx(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "Vesting type: Linear" }), _jsx(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: "What are bonds?" })] }), accordionVisible && (_jsx(Flex, { className: "modaltable-container accordion-container", children: _jsx(AccordionText, { title: accordionTitle, body: accordionBody, isVisible: accordionVisible }) }))] }) })) }, bond.billAddress));
|
|
294
316
|
}) }));
|
|
295
317
|
};
|
|
296
318
|
export default BondModal;
|
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.78-2.test.
|
|
6
|
+
"version": "1.0.78-2.test.27",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.es.js",
|
|
9
9
|
"types": "dist/index.d.ts",
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
"eslint-plugin-react": "^7.35.2",
|
|
51
51
|
"ethers": "5.7.2",
|
|
52
52
|
"globals": "^15.9.0",
|
|
53
|
+
"prettier": "^3.3.3",
|
|
53
54
|
"rimraf": "5.0.10",
|
|
54
55
|
"sass": "^1.77.7",
|
|
55
56
|
"theme-ui": "^0.16.2",
|
|
@@ -72,6 +73,7 @@
|
|
|
72
73
|
"framer-motion": "^11.3.2",
|
|
73
74
|
"lodash": "^4.17.21",
|
|
74
75
|
"lottie-react": "^2.4.0",
|
|
76
|
+
"moment": "^2.30.1",
|
|
75
77
|
"next": "^14.2.5",
|
|
76
78
|
"numbro": "^2.5.0",
|
|
77
79
|
"react-redux": "^9.1.2",
|