@ape.swap/bonds-sdk 1.0.327 → 1.0.329

package/dist/components/YourBondsModal/YourBondsModal.js

@@ -56,7 +56,8 @@ import getTimePeriods from '../../utils/getTimePeriods';
 import axios from 'axios';
 import { BigNumber } from 'bignumber.js';
 import { getFirstNonZeroDigits } from '../../utils/roundNumber';
-import { Button, Svg, ListTag } from '../uikit-sdk';
+import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
+import { UserBillTooltipText } from '../../enum/tooltips';
 import billAbi from '../../config/abi/bond.json';
 import TokenImage from '../uikit-sdk/TokenImage';
 import { getBalanceNumber } from '../../utils/getBalanceNumber';
@@ -64,6 +65,8 @@ import multicall from '../../utils/multicall';
 import { BillVersion } from '../../enum/apeswaplists';
 import { ACF_TO_ABOND } from '../../config/constants/addresses';
 import { MAINNET_CHAINS } from '../../config/constants/chains';
+import { getPendingVesting } from '../../hooks/usePendingVesting';
+import { formatNumberSI } from '../../utils/formatNumber';
 var YourBondsModal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
     if (!isOpen)
@@ -232,11 +235,11 @@ var YourBondsModal = function (_a) {
         return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
     };
     return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: userOwnedBillsData.flat().map(function (data) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
             console.log("USER BILL LOG");
             console.log(userBill);
-            return userBill ? (_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: [_jsx(Flex, __assign({ className: "modal-container bondimage" }, { children: "IMAGE" })), _jsxs(Flex, __assign({ className: "modal-container bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = userBill.bond.showcaseTokenName) !== null && _a !== void 0 ? _a : userBill.bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: (_b = userBill.bond) === null || _b === void 0 ? void 0 : _b.showcaseTokenName })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_d = (_c = userBill.bond) === null || _c === void 0 ? void 0 : _c.tags) === null || _d === void 0 ? void 0 : _d[0], variant: ((_f = (_e = userBill.bond) === null || _e === void 0 ? void 0 : _e.tags) === null || _f === void 0 ? void 0 : _f[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsx(Flex, __assign({ className: "modal-block column-discount" }, { children: _jsx(Flex, __assign({ className: "block-header header" }, { children: "Traits" })) })), _jsx(Flex, __assign({ className: "modal-block column-arr" }, { children: _jsx(Flex, __assign({ className: "block-header header" }, { children: "Fully Vested" })) })), _jsx(Flex, __assign({ className: "modal-block column-term" }, { children: _jsx(Flex, __assign({ className: "block-header header" }, { children: "Pending" })) })), _jsx(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: _jsx(Flex, __assign({ className: "block-header header" }, { children: "Claimable" })) }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsx(Button, { children: "CLAIM" }) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: _jsx(Button, { children: "TRANSFER" }) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
+            return userBill ? (_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: [_jsx(Flex, __assign({ className: "modal-container bondimage" }, { children: "IMAGE" })), _jsxs(Flex, __assign({ className: "modal-container bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = userBill.bond.showcaseTokenName) !== null && _a !== void 0 ? _a : userBill.bond.payoutTokenName, size: 40 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: (_b = userBill.bond) === null || _b === void 0 ? void 0 : _b.showcaseTokenName })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_d = (_c = userBill.bond) === null || _c === void 0 ? void 0 : _c.tags) === null || _d === void 0 ? void 0 : _d[0], variant: ((_f = (_e = userBill.bond) === null || _e === void 0 ? void 0 : _e.tags) === null || _f === void 0 ? void 0 : _f[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsx(Flex, __assign({ className: "modal-block row-traits" }, { children: _jsx(Flex, __assign({ className: "modal-block header" }, { children: "Traits" })) })), _jsxs(Flex, __assign({ className: "modal-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "modal-block header" }, { children: ["Fully Vested", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "modal-block info" }, { children: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) }))] })), _jsxs(Flex, __assign({ className: "modal-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "modal-block header" }, { children: ["Pending", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "modal-block info" }, { children: [_jsx(TokenImage, { symbol: (_g = userBill.bond.showcaseTokenName) !== null && _g !== void 0 ? _g : userBill.bond.payoutTokenName, size: 25 }), formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4), "($".concat((totalPending(userBill) * ((_h = parseFloat(earnTokenPrice(userBill.bond))) !== null && _h !== void 0 ? _h : 0)).toFixed(2), ")")] }))] })), _jsxs(Flex, __assign({ className: "modal-block row-claimable" }, { children: [_jsxs(Flex, __assign({ className: "modal-block header" }, { children: ["Claimable", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "modal-block info" }, { children: [_jsx(TokenImage, { symbol: (_j = userBill.bond.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill.bond.payoutTokenName, size: 25 }), formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4), "($".concat((claimable(userBill) * ((_k = parseFloat(earnTokenPrice(userBill.bond))) !== null && _k !== void 0 ? _k : 0)).toFixed(2), ")")] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container claim" }, { children: _jsx(Button, { children: "CLAIM" }) })), _jsx(Flex, __assign({ className: "button-container transfer" }, { children: _jsx(Button, { children: "TRANSFER" }) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
         }) })));
 };
 export default YourBondsModal;

package/dist/enum/tooltips.d.ts

@@ -6,3 +6,8 @@ export declare const TooltipText: {
     MaxBuy: (payoutToken: string) => string;
     Premium: string;
 };
+export declare const UserBillTooltipText: {
+    FullyVested: string;
+    Pending: string;
+    Claimable: string;
+};

package/dist/enum/tooltips.js

@@ -6,3 +6,8 @@ export var TooltipText = {
     MaxBuy: function (payoutToken) { return "This is the maximum amount of ".concat(payoutToken, " you can currently purchase through this Bond."); },
     Premium: "This is the dollar value of the additional tokens you’ll receive at current market price.",
 };
+export var UserBillTooltipText = {
+    FullyVested: "This is the time remaining until all tokens from the bond are available to claim.",
+    Pending: "This is the amount of unvested tokens that cannot be claimed yet.",
+    Claimable: "This is the amount of tokens that have vested and are available to claim."
+};

package/dist/scss/YourBondsModal.scss

@@ -108,9 +108,8 @@
 }
 
 .modal-block {
-    min-width: 0px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     background: var(--theme-ui-colors-white3);
     font-weight: 900;
@@ -121,11 +120,12 @@
     padding-bottom: 10px;
 }
 
-.block-header.header {
+.modal-block.header {
     color: white;
     font-weight: bold;
     font-size: 12px;
     padding-bottom: 10px;
+    align-items: center;
 }
 
 .block-header.icon {
@@ -134,24 +134,48 @@
     cursor: pointer;
 }
 
-.modal-block.column-discount {
-    width: 100%;
-    flex-direction: column;
+.modal-block.info {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
 }
 
-.modal-block.column-arr {
-    width: 100%;
-    flex-direction: column;
+.modal-block.row-traits {
+    flex-direction: row;
+    width: 400px;
+    margin-bottom: 10px;
+    align-items: center;
+    justify-content: start;
 }
 
-.modal-block.column-term {
-    width: 100%;
-    flex-direction: column;
+.modal-block.row-vested {
+    flex-direction: row;
+    width: 400px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.modal-block.column-maxbuy {
-    width: 100%;
-    flex-direction: column;
+.modal-block.row-pending {
+    flex-direction: row;
+    width: 400px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.modal-block.row-claimable {
+    flex-direction: row;
+    width: 400px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .modal-container.button-container {
@@ -162,21 +186,21 @@
     justify-content: space-between;
 }
 
-.button-container.get {
+.button-container.claim {
     justify-content: center;
     align-items: center;
     cursor: pointer;    
 
     Button {
-        width: 275px;
+        width: 300px;
     }
 }
 
-.button-container.buy {
+.button-container.transfer {
     justify-content: center;
     align-items: center;
 
     Button {
-        width: 375px;
+        width: 100px;
     }
 }

package/package.json

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