@ape.swap/bonds-sdk 1.0.246 → 1.0.248
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.
|
@@ -24,6 +24,7 @@ import { useParams } from 'react-router-dom';
|
|
|
24
24
|
import { isNumber } from '../../utils/numbers';
|
|
25
25
|
import { Button, Svg, TooltipBubble } from '../uikit-sdk';
|
|
26
26
|
import { TooltipText } from '../../enum/tooltips';
|
|
27
|
+
import { formatNumberSI } from '../../utils/formatNumber';
|
|
27
28
|
var BondSingle = function (_a) {
|
|
28
29
|
var billAddress = useParams().billAddress;
|
|
29
30
|
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
@@ -64,9 +65,60 @@ var BondSingle = function (_a) {
|
|
|
64
65
|
var handleInputChange = function (event) {
|
|
65
66
|
setInputValue(event.target.value);
|
|
66
67
|
};
|
|
68
|
+
function formatNumber(input) {
|
|
69
|
+
var number = new BigNumber(input);
|
|
70
|
+
if (number.isNaN())
|
|
71
|
+
return '0';
|
|
72
|
+
return number.gt(1000000)
|
|
73
|
+
? formatNumberSI(number.toNumber())
|
|
74
|
+
: number.gt(1000)
|
|
75
|
+
? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
76
|
+
: number.gt(0.01)
|
|
77
|
+
? parseFloat(number.toFixed(2)).toLocaleString(undefined)
|
|
78
|
+
: parseFloat(number.toPrecision(5)).toLocaleString(undefined);
|
|
79
|
+
}
|
|
80
|
+
function formatUSDNumber(input) {
|
|
81
|
+
var number = new BigNumber(input);
|
|
82
|
+
if (number.isNaN())
|
|
83
|
+
return '0';
|
|
84
|
+
// If the number is greater than 0 but less than 0.01
|
|
85
|
+
if (number.gt(0) && number.lt(0.01)) {
|
|
86
|
+
return '< 0.01';
|
|
87
|
+
}
|
|
88
|
+
// If the number is greater than 1k, round to no decimals.
|
|
89
|
+
if (number.gt(1000)) {
|
|
90
|
+
return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
91
|
+
}
|
|
92
|
+
// Note: Between 1k and 0.01 show 2 decimals
|
|
93
|
+
return parseFloat(number.toFixed(2)).toLocaleString(undefined);
|
|
94
|
+
}
|
|
95
|
+
var youSpend = formatNumber(inputValue);
|
|
96
|
+
var youSpendUSD = function (bond) {
|
|
97
|
+
return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
|
|
98
|
+
};
|
|
99
|
+
var youGet = function (bond) {
|
|
100
|
+
var _a;
|
|
101
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
102
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
103
|
+
return formatNumber(billValue.toString());
|
|
104
|
+
};
|
|
105
|
+
var youGetUSD = function (bond) {
|
|
106
|
+
var _a;
|
|
107
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
108
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
109
|
+
return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
|
|
110
|
+
};
|
|
111
|
+
var premium = function (bond) {
|
|
112
|
+
var premiumUSD = parseFloat(youGetUSD(bond)) - parseFloat(youSpendUSD(bond));
|
|
113
|
+
return formatUSDNumber(premiumUSD.toString());
|
|
114
|
+
};
|
|
115
|
+
var getPremiumColor = function (bond) {
|
|
116
|
+
var getPremium = premium(bond);
|
|
117
|
+
return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
|
|
118
|
+
};
|
|
67
119
|
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: _jsx(Flex, __assign({ className: "container page-container" }, { children: bondData.map(function (bond) {
|
|
68
120
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
69
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ className: "container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "block-container discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container arr" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container term" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "container bondinfo-graph-container" }, { children: [_jsxs(Flex, __assign({ className: "container bondinfo-container" }, { children: [_jsxs(Flex, __assign({ className: "bondinfo-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bond" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] }))] })), _jsx(Flex, __assign({ className: "bondinfo-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "bondinfo-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: ["
|
|
121
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ className: "container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "block-container discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container arr" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container term" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "block-container maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ 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, __assign({ className: "container bondinfo-graph-container" }, { children: [_jsxs(Flex, __assign({ className: "container bondinfo-container" }, { children: [_jsxs(Flex, __assign({ className: "bondinfo-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bond" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] }))] })), _jsx(Flex, __assign({ className: "bondinfo-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "bondinfo-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond)) }, { children: ["$ ", premium(bond)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] }))] }))] })), _jsxs(Flex, __assign({ className: "bondinfo-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
70
122
|
if (v.currentTarget.value.includes(',')) {
|
|
71
123
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
72
124
|
}
|
|
@@ -45,6 +45,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
45
45
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
49
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
50
|
+
if (ar || !(i in from)) {
|
|
51
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
52
|
+
ar[i] = from[i];
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
56
|
+
};
|
|
48
57
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
49
58
|
/** @jsxImportSource theme-ui */
|
|
50
59
|
import { useCallback, useEffect, useState } from 'react';
|
|
@@ -111,12 +120,28 @@ var Bonds = function (_a) {
|
|
|
111
120
|
}); };
|
|
112
121
|
var _d = useState([]), bondData = _d[0], setBondData = _d[1];
|
|
113
122
|
var _e = useState([]), hotBonds = _e[0], setHotBonds = _e[1];
|
|
123
|
+
var _f = useState(bondData), sortedBonds = _f[0], setSortedBonds = _f[1];
|
|
124
|
+
var _g = useState(true), isAscending = _g[0], setIsAscending = _g[1];
|
|
114
125
|
var vestingTime = function (vestingTerm) {
|
|
115
126
|
return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
|
|
116
127
|
};
|
|
117
128
|
useEffect(function () {
|
|
118
129
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
119
130
|
var bonds = response.data.bonds.filter(function (bond) { return !isSoldOut(bond); });
|
|
131
|
+
bonds.sort(function (a, b) {
|
|
132
|
+
var _a, _b;
|
|
133
|
+
var aIsHot = hotBonds.includes(a.billAddress.toLowerCase()) && ((_a = a.discount) !== null && _a !== void 0 ? _a : 0) > 0;
|
|
134
|
+
var bIsHot = hotBonds.includes(b.billAddress.toLowerCase()) && ((_b = b.discount) !== null && _b !== void 0 ? _b : 0) > 0;
|
|
135
|
+
if (aIsHot && !bIsHot) {
|
|
136
|
+
return -1;
|
|
137
|
+
}
|
|
138
|
+
else if (!aIsHot && bIsHot) {
|
|
139
|
+
return 1;
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
return b.discount - a.discount;
|
|
143
|
+
}
|
|
144
|
+
});
|
|
120
145
|
setBondData(bonds);
|
|
121
146
|
});
|
|
122
147
|
}, []);
|
|
@@ -141,22 +166,20 @@ var Bonds = function (_a) {
|
|
|
141
166
|
return true;
|
|
142
167
|
return ((_b = new BigNumber(bond.tokensRemaining)) === null || _b === void 0 ? void 0 : _b.lte(thresholdToHide)) || bond.discount === 100;
|
|
143
168
|
}, []);
|
|
144
|
-
var
|
|
145
|
-
var
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
var _f = useState(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
|
|
159
|
-
var _g = useState(null), selectedBond = _g[0], setSelectedBond = _g[1];
|
|
169
|
+
var sortBondsByName = function () {
|
|
170
|
+
var sorted = __spreadArray([], sortedBonds, true).sort(function (a, b) {
|
|
171
|
+
if (isAscending) {
|
|
172
|
+
return a.showcaseTokenName.localeCompare(b.showcaseTokenName);
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
return b.showcaseTokenName.localeCompare(a.showcaseTokenName);
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
setSortedBonds(sorted);
|
|
179
|
+
setIsAscending(!isAscending);
|
|
180
|
+
};
|
|
181
|
+
var _h = useState(false), isModalOpen = _h[0], setIsModalOpen = _h[1];
|
|
182
|
+
var _j = useState(null), selectedBond = _j[0], setSelectedBond = _j[1];
|
|
160
183
|
var rowClick = function (bond) {
|
|
161
184
|
setSelectedBond(bond);
|
|
162
185
|
setIsModalOpen(true);
|
|
@@ -190,7 +213,7 @@ var Bonds = function (_a) {
|
|
|
190
213
|
setSelectedBond(bond);
|
|
191
214
|
navigate("/bondsingle/".concat(bond.billAddress));
|
|
192
215
|
};
|
|
193
|
-
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-term" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, { className: "column column-hotbond" })] }))] })),
|
|
216
|
+
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens", onClick: sortBondsByName }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-term" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), bondData.map(function (bond) {
|
|
194
217
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
195
218
|
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "column column-tokenicons" }, { children: [_jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.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: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "infoSolid", width: "12px" }) })), _jsx(Flex, __assign({ className: "column-tokenicons projectinfo", onClick: function () { return iconClick(bond); } }, { children: _jsx(Svg, { icon: "expand", width: "15px", color: "white2" }) }), bond.billAddress)] })), _jsx(Flex, __assign({ className: "column column-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' }) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
|
|
196
219
|
width: '127px',
|