@ape.swap/bonds-sdk 1.0.173 → 1.0.175

package/dist/components/Bonds/Bonds.js

@@ -61,6 +61,7 @@ import { BigNumber } from 'bignumber.js';
 import { ChainId } from '../../config/chains';
 import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
 import ProgressBar from '../ProgressBar/ProgressBar';
+import { formatDollar, formatValue } from '../../utils/formatNumbers';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -163,19 +164,33 @@ var Bonds = function (_a) {
     var getDiscountColor = function (discount) {
         return discount < 0 ? 'discount-negative' : 'discount-positive';
     };
-    var getTokensRemaining = function (bond) {
-        var percentage = new BigNumber(bond.tokensRemaining).div(bond.maxTotalPayout).times(100).toNumber();
-        return percentage;
+    var remainingPercentage = function (bond) {
+        var _a, _b;
+        var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.payoutTokenDecimals));
+        var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
+        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+    };
+    var remainingTokensFormat = function (bond) {
+        var _a;
+        return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
+    };
+    var remainingTokensUsd = function (bond) {
+        var _a, _b;
+        var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
+        return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
     };
     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: [_jsx(Flex, __assign({ className: "column column-token" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-discount" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-term" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-hotbond" })] })), sortedBonds.map(function (bond) {
                         var _a, _b, _c;
-                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 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: getTokensRemaining(bond) }), style: {
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 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: {
                                             width: '127px',
                                             height: '25px',
                                             flexDirection: 'column',
                                             justifyContent: 'center',
                                             display: ['none', 'none', 'none', 'flex'],
-                                        }, showTooltip: false }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] }), bond.billAddress));
+                                        }, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.payoutTokenName, " (").concat(formatDollar({
+                                            num: remainingTokensUsd(bond).toNumber(),
+                                            isPrice: true,
+                                        }), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] }), bond.billAddress));
                     })] }))] })));
 };
 export default Bonds;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.173",
+  "version": "1.0.175",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",