@ape.swap/bonds-sdk 1.0.78-2.test.26 → 1.0.78-2.test.28
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/components/BondRows/BondRow.d.ts +1 -1
- package/dist/components/BondRows/BondRow.js +16 -14
- package/dist/scss/BondModal.scss +48 -1
- package/dist/views/BondModal/BondModal.d.ts +1 -0
- package/dist/views/BondModal/BondModal.js +61 -39
- package/dist/views/BondModal/helper.d.ts +1 -1
- package/dist/views/BondModal/helper.js +3 -3
- package/package.json +3 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
2
|
-
import BigNumber from
|
|
3
|
-
import { ChainId } from
|
|
4
|
-
import ProgressBar from
|
|
5
|
-
import ProgressBarWrapper from
|
|
6
|
-
import TokenInfoAndName from
|
|
7
|
-
import Tooltip from
|
|
8
|
-
import { Svg, TooltipBubble } from
|
|
9
|
-
import { formatDollar, formatValue } from
|
|
10
|
-
import getTimePeriods from
|
|
11
|
-
import { BLOCK_EXPLORER } from
|
|
12
|
-
import { useEffect, useState } from
|
|
2
|
+
import BigNumber from 'bignumber.js';
|
|
3
|
+
import { ChainId } from '../../enum/apeswaplists';
|
|
4
|
+
import ProgressBar from '../ProgressBar/ProgressBar';
|
|
5
|
+
import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
|
|
6
|
+
import TokenInfoAndName from '../TokenInfoAndName';
|
|
7
|
+
import Tooltip from '../Tooltip/Tooltip';
|
|
8
|
+
import { Svg, TooltipBubble } from '../uikit-sdk';
|
|
9
|
+
import { formatDollar, formatValue } from '../../utils/formatNumbers';
|
|
10
|
+
import getTimePeriods from '../../utils/getTimePeriods';
|
|
11
|
+
import { BLOCK_EXPLORER } from '../../config/constants/chains';
|
|
12
|
+
import { useEffect, useState } from 'react';
|
|
13
13
|
import '../../scss/BondRow.scss';
|
|
14
|
-
import { Flex } from
|
|
14
|
+
import { Flex } from 'theme-ui';
|
|
15
15
|
var BondRow = function (_a) {
|
|
16
16
|
var _b, _c, _d;
|
|
17
17
|
var bond = _a.bond, hotBonds = _a.hotBonds;
|
|
@@ -19,7 +19,7 @@ var BondRow = function (_a) {
|
|
|
19
19
|
var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
|
|
20
20
|
useEffect(function () {
|
|
21
21
|
if (isModalOpen === true) {
|
|
22
|
-
if (typeof window !==
|
|
22
|
+
if (typeof window !== 'undefined') {
|
|
23
23
|
var newUrl = "/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId);
|
|
24
24
|
window.history.pushState({ path: newUrl }, '', newUrl);
|
|
25
25
|
console.log(isModalOpen);
|
|
@@ -32,6 +32,8 @@ var BondRow = function (_a) {
|
|
|
32
32
|
}, []);
|
|
33
33
|
var rowClick = function (bond) {
|
|
34
34
|
setIsModalOpen(true);
|
|
35
|
+
var newUrl = "/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId);
|
|
36
|
+
window.location.href = newUrl;
|
|
35
37
|
};
|
|
36
38
|
// Functions for calcuations
|
|
37
39
|
var vestingTime = function (vestingTerm) {
|
|
@@ -65,7 +67,7 @@ var BondRow = function (_a) {
|
|
|
65
67
|
var _a;
|
|
66
68
|
var discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
|
|
67
69
|
var vestingDays = vestingTime(bond.vestingTerm).days;
|
|
68
|
-
return parseFloat(((
|
|
70
|
+
return parseFloat(((discount * 365) / vestingDays).toFixed(2));
|
|
69
71
|
};
|
|
70
72
|
return (_jsxs(Flex, { className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); }, children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bond }) }), _jsx(Flex, { className: "column column-tokenicons", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: _jsx(Svg, { icon: "more", width: "20px" }) }) })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsx(Flex, { className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' }), _jsx(Flex, { className: "column column-arr", children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' }), _jsx(Flex, { className: "column column-terms", children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' }), _jsx(Flex, { className: "column column-tokensremaining", children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
|
|
71
73
|
width: '127px',
|
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,51 @@
|
|
|
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;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.expand-icon {
|
|
462
|
+
height: 20px;
|
|
463
|
+
fill: #38A611;;
|
|
417
464
|
}
|
|
@@ -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:" }), ' ', inputValue ? toNumber(youGet(bond, inputValue)).toFixed(2) : 0, ' ', _jsx("span", { className: "flex-inline", children: bond.earnToken.symbol })] })] })] })] })] }), _jsxs(Flex, { className: "footer-details", children: [_jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: [_jsx("strong", { children: "Vesting start date:" }), "\u00A0", moment().format('DD-MMM-YYYY')] }), _jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: [_jsx("strong", { children: "Vesting end date:" }), "\u00A0", 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')] }), _jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, children: [_jsx("strong", { children: "Vesting type:" }), "\u00A0Linear"] }), _jsxs(Flex, { sx: { width: '25%', justifyContent: 'center' }, className: "text-highlight", children: ["What are bonds?", _jsx("i", { className: "fa-solid fa-angle-down" })] })] }), 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;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BondsDataResponse } from
|
|
1
|
+
import { BondsDataResponse } from '../../types/bonds';
|
|
2
2
|
declare function formatNumber(input: string): string;
|
|
3
3
|
declare function formatUSDNumber(input: string): string;
|
|
4
4
|
declare const youSpend: (inputValue: string) => string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import BigNumber from
|
|
2
|
-
import { formatNumberSI } from
|
|
1
|
+
import BigNumber from 'bignumber.js';
|
|
2
|
+
import { formatNumberSI } from '../../utils/formatNumber';
|
|
3
3
|
function formatNumber(input) {
|
|
4
4
|
var number = new BigNumber(input);
|
|
5
5
|
if (number.isNaN())
|
|
@@ -35,7 +35,7 @@ var youGet = function (bond, inputValue) {
|
|
|
35
35
|
var _a;
|
|
36
36
|
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
37
37
|
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
38
|
-
return
|
|
38
|
+
return billValue.toString();
|
|
39
39
|
};
|
|
40
40
|
var youGetUSD = function (bond, inputValue) {
|
|
41
41
|
var _a;
|
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.28",
|
|
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",
|