@ape.swap/bonds-sdk 1.0.686 → 1.0.688
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.js +3 -3
- package/dist/components/MenuSelect/RecommendationSelector.js +0 -2
- package/dist/components/Modals/BondModal/BondModal.js +5 -5
- package/dist/components/Modals/YourBondsModal/YourBondsModal.js +2 -2
- package/dist/components/TokenInfoAndName/index.js +2 -2
- package/dist/components/Tooltip/ButtonsRow.js +1 -4
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -2
- package/dist/pages/Bonds/Bonds.js +2 -6
- package/dist/scss/ProgressBar.scss +1 -0
- package/dist/types/bonds.d.ts +16 -1
- package/package.json +1 -1
- package/dist/pages/BondSingle/BondSingle.d.ts +0 -5
- package/dist/pages/BondSingle/BondSingle.js +0 -128
|
@@ -35,7 +35,7 @@ var BondRow = function (_a) {
|
|
|
35
35
|
};
|
|
36
36
|
var remainingPercentage = function (bond) {
|
|
37
37
|
var _a, _b;
|
|
38
|
-
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.
|
|
38
|
+
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.earnToken.decimals[bond.chainId]));
|
|
39
39
|
var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
|
|
40
40
|
return remainingTokens.div(totalMaxPayout).times(100).toNumber();
|
|
41
41
|
};
|
|
@@ -60,13 +60,13 @@ var BondRow = function (_a) {
|
|
|
60
60
|
var vestingDays = vestingTime(bond.vestingTerm).days;
|
|
61
61
|
return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
|
|
62
62
|
};
|
|
63
|
-
return (_jsxs(Flex, { className: "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.
|
|
63
|
+
return (_jsxs(Flex, { className: "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: {
|
|
64
64
|
width: '127px',
|
|
65
65
|
height: '25px',
|
|
66
66
|
flexDirection: 'column',
|
|
67
67
|
justifyContent: 'center',
|
|
68
68
|
display: ['none', 'none', 'none', 'flex'],
|
|
69
|
-
}, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.
|
|
69
|
+
}, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.earnToken.symbol, " (").concat(formatDollar({
|
|
70
70
|
num: remainingTokensUsd(bond).toNumber(),
|
|
71
71
|
isPrice: true,
|
|
72
72
|
}), ")") }) }), _jsx(Flex, { className: "column column-hotbond", children: _jsx(Flex, { className: "column column-icon", children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) }) })] })] }, bond.billAddress));
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
2
2
|
import { Flex } from '../uikit-sdk';
|
|
3
|
-
import { useWeb3React } from '@web3-react/core';
|
|
4
3
|
var RecommendationSelector = function (_a) {
|
|
5
4
|
var options = _a.options, activeOption = _a.activeOption, setActiveOption = _a.setActiveOption;
|
|
6
|
-
var chainId = useWeb3React().chainId;
|
|
7
5
|
var handleClick = function (option) {
|
|
8
6
|
setActiveOption(option);
|
|
9
7
|
};
|
|
@@ -118,7 +118,7 @@ var BondModal = function (_a) {
|
|
|
118
118
|
return __generator(this, function (_a) {
|
|
119
119
|
switch (_a.label) {
|
|
120
120
|
case 0:
|
|
121
|
-
tokenAddress = bondData[0].
|
|
121
|
+
tokenAddress = bondData[0].lpToken.address;
|
|
122
122
|
decimals = tokenDecimals !== null && tokenDecimals !== void 0 ? tokenDecimals : 18;
|
|
123
123
|
_a.label = 1;
|
|
124
124
|
case 1:
|
|
@@ -153,7 +153,7 @@ var BondModal = function (_a) {
|
|
|
153
153
|
}, [approveTx, buyTx, isConfirmed]);
|
|
154
154
|
useEffect(function () {
|
|
155
155
|
if (isActive && account && bondData.length > 0) {
|
|
156
|
-
getTokenBalance(bondData[0].chainId, bondData[0].
|
|
156
|
+
getTokenBalance(bondData[0].chainId, bondData[0].lpToken.address[accountChainId], account).then(function (_a) {
|
|
157
157
|
var balanceInEther = _a.balanceInEther, decimals = _a.decimals;
|
|
158
158
|
setTokenBalance(balanceInEther);
|
|
159
159
|
setTokenDecimals(decimals);
|
|
@@ -219,12 +219,12 @@ var BondModal = function (_a) {
|
|
|
219
219
|
var threshold = 5;
|
|
220
220
|
var thresholdToShow = new BigNumber(threshold).div((_b = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
221
221
|
var safeAvailable = available.minus(thresholdToShow);
|
|
222
|
-
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.
|
|
222
|
+
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[accountChainId]) !== null && _d !== void 0 ? _d : 18));
|
|
223
223
|
return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
|
|
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: "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.
|
|
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: "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.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: "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 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: "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.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: "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.
|
|
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: "modal-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));
|
|
@@ -124,7 +124,7 @@ var YourBondsModal = function (_a) {
|
|
|
124
124
|
setIsImageLoaded(true);
|
|
125
125
|
};
|
|
126
126
|
return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "yourbondsmodal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image, onLoad: handleImageLoad }) }), isImageLoaded &&
|
|
127
|
-
(_jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.
|
|
127
|
+
(_jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.earnToken.symbol, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.slice(0, 1).map(function (tag) {
|
|
128
128
|
return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
|
|
129
129
|
}) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsx(Flex, { className: "yourbondinfo-block attributes", children: _jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [_jsxs(Flex, { sx: {
|
|
130
130
|
justifyContent: 'space-between',
|
|
@@ -137,6 +137,6 @@ var YourBondsModal = function (_a) {
|
|
|
137
137
|
? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
|
|
138
138
|
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
139
139
|
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
140
|
-
}) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.
|
|
140
|
+
}) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { className: "action-button", disabled: claimable(userBill) === 0 || isPending, onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "action-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] }))] })] }) }) }, userBill.address) }));
|
|
141
141
|
};
|
|
142
142
|
export default YourBondsModal;
|
|
@@ -45,13 +45,13 @@ var TokenInfoAndName = function (_a) {
|
|
|
45
45
|
height: '100%',
|
|
46
46
|
background: NETWORK_COLORS[bill.chainId],
|
|
47
47
|
filter: 'blur(35px)',
|
|
48
|
-
} }), _jsxs(Flex, { sx: { pl: '6px', width: '100%', maxWidth: '170px', alignItems: 'center' }, children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.
|
|
48
|
+
} }), _jsxs(Flex, { sx: { pl: '6px', width: '100%', maxWidth: '170px', alignItems: 'center' }, children: [_jsx(Index, { symbol: (_c = bill.showcaseTokenName) !== null && _c !== void 0 ? _c : bill.earnToken.symbol, size: 33 }), _jsxs(Flex, { sx: {
|
|
49
49
|
ml: '10px',
|
|
50
50
|
fontSize: '16px',
|
|
51
51
|
fontWeight: 700,
|
|
52
52
|
width: '100%',
|
|
53
53
|
flexDirection: 'column',
|
|
54
|
-
}, children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.
|
|
54
|
+
}, children: [(_d = bill.showcaseTokenName) !== null && _d !== void 0 ? _d : bill.earnToken.symbol, vestEnds && (_jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] })] }), _jsxs(Flex, { children: [_jsx(Flex, { sx: { width: '25px' } }), _jsx(Flex, { sx: {
|
|
55
55
|
ml: '10px',
|
|
56
56
|
display: ['none', 'none', 'none', 'flex'],
|
|
57
57
|
minWidth: '70px',
|
|
@@ -11,14 +11,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
13
13
|
import { styles } from './styles';
|
|
14
|
-
import { useWeb3React } from '@web3-react/core';
|
|
15
14
|
import { Flex, Svg, Text } from '../uikit-sdk';
|
|
16
|
-
import { ChainId } from '../../enum/apeswaplists';
|
|
17
15
|
import { Link } from 'theme-ui';
|
|
18
16
|
var ButtonsRow = function (_a) {
|
|
19
17
|
var projectLink = _a.projectLink, twitter = _a.twitter, bubble = _a.bubble, audit = _a.audit;
|
|
20
|
-
var chainId = useWeb3React().chainId;
|
|
21
18
|
var bubbleURL = "https://app.bubblemaps.io/bsc/token/".concat(bubble);
|
|
22
|
-
return (_jsxs(Flex, { sx: { justifyContent: 'center' }, children: [_jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: _jsx(Svg, { icon: "URL", width: 18 }) }), _jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: _jsx(Svg, { icon: "twitter", width: 18, color: "text" }) }),
|
|
19
|
+
return (_jsxs(Flex, { sx: { justifyContent: 'center' }, children: [_jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: _jsx(Svg, { icon: "URL", width: 18 }) }), _jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: _jsx(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (_jsx(Flex, { sx: styles.iconButton, as: Link, href: bubbleURL, target: "_blank", children: _jsx(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (_jsxs(Flex, { sx: __assign(__assign({}, styles.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [_jsx(Svg, { icon: "audit", width: 18, color: "text" }), _jsx(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
|
|
23
20
|
};
|
|
24
21
|
export default ButtonsRow;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import Bonds from './pages/Bonds/Bonds';
|
|
2
|
-
import BondSingle from './pages/BondSingle/BondSingle';
|
|
3
2
|
import YourBonds from './pages/YourBonds/YourBonds';
|
|
4
3
|
import BondModal from './components/Modals/BondModal/BondModal';
|
|
5
4
|
import YourBondsModal from './components/Modals/YourBondsModal/YourBondsModal';
|
|
6
|
-
export { Bonds,
|
|
5
|
+
export { Bonds, BondModal, YourBonds, YourBondsModal };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
2
|
import Bonds from './pages/Bonds/Bonds';
|
|
3
|
-
import BondSingle from './pages/BondSingle/BondSingle';
|
|
4
3
|
import YourBonds from './pages/YourBonds/YourBonds';
|
|
5
4
|
import BondModal from './components/Modals/BondModal/BondModal';
|
|
6
5
|
import YourBondsModal from './components/Modals/YourBondsModal/YourBondsModal';
|
|
7
|
-
export { Bonds,
|
|
6
|
+
export { Bonds, BondModal, YourBonds, YourBondsModal };
|
|
@@ -128,7 +128,7 @@ var Bonds = function (_a) {
|
|
|
128
128
|
};
|
|
129
129
|
var remainingPercentage = function (bond) {
|
|
130
130
|
var _a, _b;
|
|
131
|
-
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.
|
|
131
|
+
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.earnToken.decimals[accountChainId]));
|
|
132
132
|
var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
|
|
133
133
|
return remainingTokens.div(totalMaxPayout).times(100).toNumber();
|
|
134
134
|
};
|
|
@@ -149,7 +149,7 @@ var Bonds = function (_a) {
|
|
|
149
149
|
if (inputValue) {
|
|
150
150
|
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) {
|
|
151
151
|
var _a;
|
|
152
|
-
return "".concat(bill.
|
|
152
|
+
return "".concat(bill.earnToken.symbol.toUpperCase(), ",\n ").concat(bill.lpToken.symbol.toUpperCase(), ",\n ").concat((_a = bill === null || bill === void 0 ? void 0 : bill.showcaseTokenName) === null || _a === void 0 ? void 0 : _a.toUpperCase()).includes(inputValue.toUpperCase());
|
|
153
153
|
});
|
|
154
154
|
}
|
|
155
155
|
if (topTags.includes(filterOption)) {
|
|
@@ -164,11 +164,7 @@ var Bonds = function (_a) {
|
|
|
164
164
|
else {
|
|
165
165
|
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bond) { return bond.soldOut; });
|
|
166
166
|
}
|
|
167
|
-
// if (filterOption === 'FAVORITES') {
|
|
168
|
-
// billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
|
|
169
|
-
// }
|
|
170
167
|
return billsToReturn;
|
|
171
|
-
//return sortBills(billsToReturn, sortOption)
|
|
172
168
|
}, [filterOption, bondData, inputValue, chainFilterOption, topTags]);
|
|
173
169
|
var handleChangeFilterOption = useCallback(function (newOption) {
|
|
174
170
|
setFilterOption(newOption);
|
package/dist/types/bonds.d.ts
CHANGED
|
@@ -36,9 +36,24 @@ export interface BondsDataResponse {
|
|
|
36
36
|
projectLink?: string;
|
|
37
37
|
audit?: string;
|
|
38
38
|
billVersion?: string;
|
|
39
|
-
earnToken
|
|
39
|
+
earnToken: EarnToken;
|
|
40
|
+
lpToken: LpToken;
|
|
40
41
|
}
|
|
41
42
|
export interface EarnToken {
|
|
43
|
+
active: boolean;
|
|
44
|
+
symbol: string;
|
|
45
|
+
address: {
|
|
46
|
+
[chainId: number]: string;
|
|
47
|
+
};
|
|
48
|
+
decimals: {
|
|
49
|
+
[chainId: number]: number;
|
|
50
|
+
};
|
|
51
|
+
liquidityDex: {
|
|
52
|
+
[chainId: number]: string;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
export interface LpToken {
|
|
56
|
+
active: boolean;
|
|
42
57
|
symbol: string;
|
|
43
58
|
address: {
|
|
44
59
|
[chainId: number]: string;
|
package/package.json
CHANGED
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
|
|
2
|
-
/** @jsxImportSource theme-ui */
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
import { Flex, ThemeUIProvider, Input } from 'theme-ui';
|
|
5
|
-
import { useWeb3React } from '@web3-react/core';
|
|
6
|
-
import { defaultTheme } from '../../theme';
|
|
7
|
-
import '../../scss/BondSingle.scss';
|
|
8
|
-
import getTimePeriods from '../../utils/getTimePeriods';
|
|
9
|
-
import axios from 'axios';
|
|
10
|
-
import { BigNumber } from 'bignumber.js';
|
|
11
|
-
import { getFirstNonZeroDigits } from '../../utils/roundNumber';
|
|
12
|
-
import { useParams } from 'react-router-dom';
|
|
13
|
-
import { isNumber } from '../../utils/numbers';
|
|
14
|
-
import { Button, ListTag, Svg, TooltipBubble } from '../../components/uikit-sdk';
|
|
15
|
-
import { TooltipText } from '../../enum/tooltips';
|
|
16
|
-
import { formatNumberSI } from '../../utils/formatNumber';
|
|
17
|
-
import TokenImage from '../../components/uikit-sdk/TokenImage';
|
|
18
|
-
var BondSingle = function (_a) {
|
|
19
|
-
var billAddress = useParams().billAddress;
|
|
20
|
-
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
21
|
-
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
22
|
-
var vestingTime = function (vestingTerm) {
|
|
23
|
-
return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
|
|
24
|
-
};
|
|
25
|
-
useEffect(function () {
|
|
26
|
-
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
27
|
-
var bond = response.data.bonds.filter(function (x) {
|
|
28
|
-
return x.billAddress.toLowerCase() === (billAddress === null || billAddress === void 0 ? void 0 : billAddress.toLowerCase());
|
|
29
|
-
});
|
|
30
|
-
setBondData(bond);
|
|
31
|
-
});
|
|
32
|
-
}, []);
|
|
33
|
-
var getDiscountColor = function (discount) {
|
|
34
|
-
return discount < 0 ? 'discount-negative' : 'discount-positive';
|
|
35
|
-
};
|
|
36
|
-
var discountEarnTokenPrice = function (bond) {
|
|
37
|
-
var _a, _b;
|
|
38
|
-
var earnTokenPrice = parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
|
|
39
|
-
return getFirstNonZeroDigits(earnTokenPrice - earnTokenPrice * (((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) / 100));
|
|
40
|
-
};
|
|
41
|
-
var earnTokenPrice = function (bond) {
|
|
42
|
-
var _a;
|
|
43
|
-
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
44
|
-
};
|
|
45
|
-
var maxBuy = function (bond) {
|
|
46
|
-
var _a, _b, _c, _d;
|
|
47
|
-
var available = new BigNumber((_a = bond === null || bond === void 0 ? void 0 : bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
|
|
48
|
-
var threshold = 5;
|
|
49
|
-
var thresholdToShow = new BigNumber(threshold).div((_b = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
50
|
-
var safeAvailable = available.minus(thresholdToShow);
|
|
51
|
-
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.payoutTokenDecimals) !== null && _d !== void 0 ? _d : 18));
|
|
52
|
-
return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
|
|
53
|
-
};
|
|
54
|
-
var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
|
|
55
|
-
var handleInputChange = function (event) {
|
|
56
|
-
setInputValue(event.target.value);
|
|
57
|
-
};
|
|
58
|
-
function formatNumber(input) {
|
|
59
|
-
var number = new BigNumber(input);
|
|
60
|
-
if (number.isNaN())
|
|
61
|
-
return '0';
|
|
62
|
-
return number.gt(1000000)
|
|
63
|
-
? formatNumberSI(number.toNumber())
|
|
64
|
-
: number.gt(1000)
|
|
65
|
-
? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
66
|
-
: number.gt(0.01)
|
|
67
|
-
? parseFloat(number.toFixed(2)).toLocaleString(undefined)
|
|
68
|
-
: parseFloat(number.toPrecision(5)).toLocaleString(undefined);
|
|
69
|
-
}
|
|
70
|
-
function formatUSDNumber(input) {
|
|
71
|
-
var number = new BigNumber(input);
|
|
72
|
-
if (number.isNaN())
|
|
73
|
-
return '0';
|
|
74
|
-
// If the number is greater than 0 but less than 0.01
|
|
75
|
-
if (number.gt(0) && number.lt(0.01)) {
|
|
76
|
-
return '< 0.01';
|
|
77
|
-
}
|
|
78
|
-
// If the number is greater than 1k, round to no decimals.
|
|
79
|
-
if (number.gt(1000)) {
|
|
80
|
-
return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
81
|
-
}
|
|
82
|
-
// Note: Between 1k and 0.01 show 2 decimals
|
|
83
|
-
return parseFloat(number.toFixed(2)).toLocaleString(undefined);
|
|
84
|
-
}
|
|
85
|
-
var youSpend = formatNumber(inputValue);
|
|
86
|
-
var youSpendUSD = function (bond) {
|
|
87
|
-
return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
|
|
88
|
-
};
|
|
89
|
-
var youGet = function (bond) {
|
|
90
|
-
var _a;
|
|
91
|
-
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
92
|
-
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
93
|
-
return formatNumber(billValue.toString());
|
|
94
|
-
};
|
|
95
|
-
var youGetUSD = function (bond) {
|
|
96
|
-
var _a;
|
|
97
|
-
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
98
|
-
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
99
|
-
return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
|
|
100
|
-
};
|
|
101
|
-
var premium = function (bond) {
|
|
102
|
-
var premiumUSD = parseFloat(youGetUSD(bond)) - parseFloat(youSpendUSD(bond));
|
|
103
|
-
return formatUSDNumber(premiumUSD.toString());
|
|
104
|
-
};
|
|
105
|
-
var getPremiumColor = function (bond) {
|
|
106
|
-
var getPremium = premium(bond);
|
|
107
|
-
return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
|
|
108
|
-
};
|
|
109
|
-
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: _jsx(Flex, { className: "container page-container", children: bondData.map(function (bond) {
|
|
110
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
111
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { className: "container blocks-container", children: [_jsxs(Flex, { className: "block-container discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-container 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((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%")] }), _jsxs(Flex, { className: "block-container arr", children: [_jsxs(Flex, { className: "block-container 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(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime((_c = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _c !== void 0 ? _c : 0).days).toFixed(2), "%")] }), _jsxs(Flex, { className: "block-container term", children: [_jsxs(Flex, { className: "block-container 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((_d = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _d !== void 0 ? _d : 0).days ? "".concat(vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days, " D") : '-'] }), _jsxs(Flex, { className: "block-container maxbuy", children: [_jsxs(Flex, { className: "block-container 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" }) }) })] }), (_f = parseFloat(maxBuy(bond).toFixed(0))) === null || _f === void 0 ? void 0 : _f.toLocaleString('en-US')] })] }), _jsxs(Flex, { className: "container bondinfo-graph-container", children: [_jsxs(Flex, { className: "container bondinfo-container", children: [_jsxs(Flex, { className: "bondinfo-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsx(TokenImage, { symbol: (_g = bond.showcaseTokenName) !== null && _g !== void 0 ? _g : 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: (_h = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _h === void 0 ? void 0 : _h[0], variant: ((_j = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _j === void 0 ? void 0 : _j[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })] }), _jsx(Flex, { className: "bondinfo-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "bondinfo-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, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] })] }), _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)), children: ["$ ", premium(bond)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] }), _jsxs(Flex, { className: "row-container get-val", children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] })] })] }), _jsxs(Flex, { className: "bondinfo-container input-container", 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) {
|
|
112
|
-
if (v.currentTarget.value.includes(',')) {
|
|
113
|
-
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
114
|
-
}
|
|
115
|
-
if (v.currentTarget.value.includes('%')) {
|
|
116
|
-
v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
|
|
117
|
-
}
|
|
118
|
-
if (v.currentTarget.value === '.') {
|
|
119
|
-
v.currentTarget.value = '0.';
|
|
120
|
-
}
|
|
121
|
-
v.currentTarget.value =
|
|
122
|
-
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
123
|
-
? v.currentTarget.value
|
|
124
|
-
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
125
|
-
} }) }), _jsx(Flex, { className: "input-container token", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] }), _jsxs(Flex, { className: "bondinfo-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: _jsxs(Button, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }) })] })] }), _jsx(Flex, { className: "container graph-container", children: _jsx("div", { children: "Graph" }) })] }), _jsxs(Flex, { className: "container about-container", children: [_jsxs(Flex, { className: "about-container title", children: ["About ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }), _jsx(Flex, { className: "about-container description", children: bond === null || bond === void 0 ? void 0 : bond.fullDescription })] }), _jsxs(Flex, { className: "container stats-container", children: [_jsx(Flex, { className: "stats-container header", children: "Bond Stats" }), _jsxs(Flex, { className: "stats-container model", children: [_jsx(Flex, { className: "model-container graph", children: "GRAPH" }), _jsx(Flex, { className: "model-container data", children: "DATA" })] })] })] }));
|
|
126
|
-
}) }) }));
|
|
127
|
-
};
|
|
128
|
-
export default BondSingle;
|