@ape.swap/bonds-sdk 1.0.360 → 1.0.361

package/dist/components/BondModal/BondModal.js

@@ -59,13 +59,13 @@ import { useNavigate } from 'react-router-dom';
 import { isNumber } from '../../utils/numbers';
 import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
 import { TooltipText } from '../../enum/tooltips';
-import { formatNumberSI } from '../../utils/formatNumber';
 import { ethers } from 'ethers';
 import { adjustDecimals } from "../../utils/convertToTokenValue";
 import TokenImage from '../uikit-sdk/TokenImage';
 import '../../scss/BondModal.scss';
 import BOND_ABI from '../../config/abi/bond.json';
 import ERC_20_ABI from '../../config/abi/bond.json';
+import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
 var BondModal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
     if (!isOpen)
@@ -116,62 +116,6 @@ var BondModal = function (_a) {
         setSelectedBond(bond);
         navigate("/bondsingle/".concat(bond.billAddress));
     };
-    //Note to Gordon: Can we put all this in a helper file or something so the code in here is less?
-    /////////////////////
-    function formatNumber(input) {
-        var number = new BigNumber(input);
-        if (number.isNaN())
-            return '0';
-        return number.gt(1000000)
-            ? formatNumberSI(number.toNumber())
-            : number.gt(1000)
-                ? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
-                : number.gt(0.01)
-                    ? parseFloat(number.toFixed(2)).toLocaleString(undefined)
-                    : parseFloat(number.toPrecision(5)).toLocaleString(undefined);
-    }
-    function formatUSDNumber(input) {
-        var number = new BigNumber(input);
-        if (number.isNaN())
-            return '0';
-        // If the number is greater than 0 but less than 0.01
-        if (number.gt(0) && number.lt(0.01)) {
-            return '< 0.01';
-        }
-        // If the number is greater than 1k, round to no decimals.
-        if (number.gt(1000)) {
-            return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
-        }
-        // Note: Between 1k and 0.01 show 2 decimals
-        return parseFloat(number.toFixed(2)).toLocaleString(undefined);
-    }
-    var youSpend = formatNumber(inputValue);
-    var youSpendUSD = function (bond) {
-        return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
-    };
-    var youGet = function (bond) {
-        var _a;
-        var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
-        var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
-        return formatNumber(billValue.toString());
-    };
-    var youGetUSD = function (bond) {
-        var _a;
-        var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
-        var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
-        return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
-    };
-    var premium = function (bond) {
-        var premiumUSD = parseFloat(youGetUSD(bond)) - parseFloat(youSpendUSD(bond));
-        return formatUSDNumber(premiumUSD.toString());
-    };
-    var getPremiumColor = function (bond) {
-        var getPremium = premium(bond);
-        return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
-    };
-    ////////////////////////////////////////////////////////////////////////////////////
-    ////////////////////////////////////////////////////////////////////////////////////
-    ////////////////////////////////////////////////////////////////////////////////////
     var handleBuy = function () { return __awaiter(void 0, void 0, void 0, function () {
         var provider, signer, bondContract, maxPrice, amount, tx, error_1;
         return __generator(this, function (_a) {
@@ -249,7 +193,7 @@ var BondModal = function (_a) {
     }); };
     return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { 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: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header 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((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-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((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 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: "modal-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) {
+            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { 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: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header 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((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header 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" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-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(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _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, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ 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, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-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) {
                                                         if (v.currentTarget.value.includes(',')) {
                                                             v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                                         }

package/dist/components/BondModal/helper.d.ts

@@ -0,0 +1,9 @@
+import { BondsDataResponse } from "../../types/bonds";
+export declare function formatNumber(input: string): string;
+export declare function formatUSDNumber(input: string): string;
+export declare const youSpend: (inputValue: string) => string;
+export declare const youSpendUSD: (bond: BondsDataResponse, inputValue: string) => string;
+export declare const youGet: (bond: BondsDataResponse, inputValue: string) => string;
+export declare const youGetUSD: (bond: BondsDataResponse, inputValue: string) => string;
+export declare const premium: (bond: BondsDataResponse, inputValue: string) => string;
+export declare const getPremiumColor: (bond: BondsDataResponse, inputValue: string) => string;

package/dist/components/BondModal/helper.js

@@ -0,0 +1,53 @@
+import BigNumber from "bignumber.js";
+import { formatNumberSI } from "../../utils/formatNumber";
+export function formatNumber(input) {
+    var number = new BigNumber(input);
+    if (number.isNaN())
+        return '0';
+    return number.gt(1000000)
+        ? formatNumberSI(number.toNumber())
+        : number.gt(1000)
+            ? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
+            : number.gt(0.01)
+                ? parseFloat(number.toFixed(2)).toLocaleString(undefined)
+                : parseFloat(number.toPrecision(5)).toLocaleString(undefined);
+}
+export function formatUSDNumber(input) {
+    var number = new BigNumber(input);
+    if (number.isNaN())
+        return '0';
+    // If the number is greater than 0 but less than 0.01
+    if (number.gt(0) && number.lt(0.01)) {
+        return '< 0.01';
+    }
+    // If the number is greater than 1k, round to no decimals.
+    if (number.gt(1000)) {
+        return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
+    }
+    // Note: Between 1k and 0.01 show 2 decimals
+    return parseFloat(number.toFixed(2)).toLocaleString(undefined);
+}
+export var youSpend = function (inputValue) { return formatNumber(inputValue); };
+export var youSpendUSD = function (bond, inputValue) {
+    return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
+};
+export var youGet = function (bond, inputValue) {
+    var _a;
+    var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
+    var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
+    return formatNumber(billValue.toString());
+};
+export var youGetUSD = function (bond, inputValue) {
+    var _a;
+    var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
+    var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
+    return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
+};
+export var premium = function (bond, inputValue) {
+    var premiumUSD = parseFloat(youGetUSD(bond, inputValue)) - parseFloat(youSpendUSD(bond, inputValue));
+    return formatUSDNumber(premiumUSD.toString());
+};
+export var getPremiumColor = function (bond, inputValue) {
+    var getPremium = premium(bond, inputValue);
+    return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
+};

package/dist/scss/YourBondsModal.scss

@@ -10,6 +10,7 @@
     align-items: center;
     z-index: 1000;
     overflow: auto;
+    padding: 50px;
 }
 
 .yourbondsmodal.content {
@@ -20,8 +21,8 @@
     padding: 10px;
     border-radius: 10px;
     z-index: 1001;
-    max-width: 1500px;
-    min-width: 1200px;
+    max-width: 1200px;
+    min-width: 1000px;
     overflow: auto;
 }
 
@@ -154,7 +155,7 @@
     flex-direction: row;
     height: 25px;
     padding-left: 10px;
-    width: 450px;
+    width: 100%;
     margin-bottom: 10px;
     align-items: center;
     justify-content: start;
@@ -163,7 +164,7 @@
 .yourbondinfo-block.row-vested {
     flex-direction: row;
     height: 50px;
-    width: 450px;
+    width: 100%;
     margin-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;
@@ -174,7 +175,7 @@
 .yourbondinfo-block.row-pending {
     flex-direction: row;
     height: 50px;
-    width: 450px;
+    width: 100%;
     margin-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;
@@ -185,7 +186,7 @@
 .yourbondinfo-block.row-claimable {
     flex-direction: row;
     height: 50px;
-    width: 450px;
+    width: 100%;
     margin-bottom: 10px;
     padding-left: 10px;
     padding-right: 10px;

package/package.json

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