@ape.swap/bonds-sdk 1.0.174 → 1.0.176

package/dist/components/Bonds/Bonds.js

@@ -58,9 +58,12 @@ import { defaultTheme } from '../../theme';
 import Svg from '../uikit/Svg';
 import '../../scss/Bonds.scss';
 import { BigNumber } from 'bignumber.js';
-import { ChainId } from '../../config/chains';
+import { ChainId } from '../../enum/chains';
 import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
 import ProgressBar from '../ProgressBar/ProgressBar';
+import { formatDollar, formatValue } from '../../utils/formatNumbers';
+import Tooltip from '../Tooltip';
+import { TooltipText } from '../../enum/tooltips';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -169,7 +172,16 @@ var Bonds = function (_a) {
         var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
         return remainingTokens.div(totalMaxPayout).times(100).toNumber();
     };
-    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 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: _jsxs(Tooltip, __assign({ body: TooltipText.Discount }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: _jsxs(Tooltip, __assign({ body: TooltipText.ARR }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-term" }, { children: _jsxs(Tooltip, __assign({ body: TooltipText.Terms }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsxs(Tooltip, __assign({ body: TooltipText.TokensRemaining }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })) })), _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: remainingPercentage(bond) }), style: {
                                             width: '127px',
@@ -177,7 +189,10 @@ var Bonds = function (_a) {
                                             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/dist/enum/tooltips.d.ts

@@ -0,0 +1,6 @@
+export declare enum TooltipText {
+    Discount = "This is the percentage discount relative to the token's current market price.",
+    ARR = "This is the Annualized Rate of Return you would receive considering the current discount, adjusted for APR.",
+    Terms = "This is the amount of days it will take for all tokens in the Bond to fully vest.",
+    TokensRemaining = "This is the amount of remaining tokens for sale in this Bond."
+}

package/dist/enum/tooltips.js

@@ -0,0 +1,7 @@
+export var TooltipText;
+(function (TooltipText) {
+    TooltipText["Discount"] = "This is the percentage discount relative to the token's current market price.";
+    TooltipText["ARR"] = "This is the Annualized Rate of Return you would receive considering the current discount, adjusted for APR.";
+    TooltipText["Terms"] = "This is the amount of days it will take for all tokens in the Bond to fully vest.";
+    TooltipText["TokensRemaining"] = "This is the amount of remaining tokens for sale in this Bond.";
+})(TooltipText || (TooltipText = {}));

package/dist/scss/Bonds.scss

@@ -44,6 +44,7 @@
     flex: 1;
     min-width: 150px;
     text-align: center;
+    cursor: pointer;
 }
 
 .column.column-token {
@@ -90,4 +91,10 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+}
+
+.column.header-icon {
+    padding-left: 5px;
+    align-items: start;
+    cursor: pointer;
 }

package/package.json

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