@ape.swap/bonds-sdk 2.6.16 → 2.7.0

package/dist/main.js

@@ -7035,16 +7035,6 @@ const Farcaster = ({ width }) => {
 };
 
 const Timer = ({ direction = 'right', color = 'text', width, getStyles }) => {
-    const deg = {
-        left: 180,
-        up: 270,
-        right: 0,
-        down: 90,
-    };
-    getStyles({
-        degree: deg[direction],
-        color,
-    });
     return (jsx$2("svg", { width: width || '28', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: color, children: jsx$2("path", { d: "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
 };
 
@@ -19096,56 +19086,6 @@ const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
                 }, children: ((_c = bill.tags) === null || _c === void 0 ? void 0 : _c[0]) && jsx$2(ListTag, { text: (_e = (_d = bill.tags) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.toUpperCase() }) }), jsx$2(Flex, { className: vestEnds ? '' : 'short-description-basepad', sx: { display: 'none' }, children: bill.shortDescription })] }));
 };
 
-const MINUTE_IN_SECONDS = 60;
-const HOUR_IN_SECONDS = 3600;
-const DAY_IN_SECONDS = 86400;
-const MONTH_IN_SECONDS = 2629800;
-const YEAR_IN_SECONDS = 31557600;
-/**
- * Format number of seconds into year, month, day, hour, minute, seconds
- *
- * @param seconds
- */
-const getTimePeriods = (seconds, days) => {
-    let delta = seconds;
-    const timeLeft = {
-        years: 0,
-        months: 0,
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-    };
-    if (delta >= YEAR_IN_SECONDS && !days) {
-        timeLeft.years = Math.floor(delta / YEAR_IN_SECONDS);
-        delta -= timeLeft.years * YEAR_IN_SECONDS;
-    }
-    if (delta >= MONTH_IN_SECONDS && !days) {
-        timeLeft.months = Math.floor(delta / MONTH_IN_SECONDS);
-        delta -= timeLeft.months * MONTH_IN_SECONDS;
-    }
-    if (delta >= DAY_IN_SECONDS) {
-        timeLeft.days = Math.floor(delta / DAY_IN_SECONDS);
-        delta -= timeLeft.days * DAY_IN_SECONDS;
-    }
-    if (delta >= HOUR_IN_SECONDS) {
-        timeLeft.hours = Math.floor(delta / HOUR_IN_SECONDS);
-        delta -= timeLeft.hours * HOUR_IN_SECONDS;
-    }
-    if (delta >= MINUTE_IN_SECONDS) {
-        timeLeft.minutes = Math.floor(delta / MINUTE_IN_SECONDS);
-        delta -= timeLeft.minutes * MINUTE_IN_SECONDS;
-    }
-    timeLeft.seconds = delta;
-    return timeLeft;
-};
-
-const getPendingVesting = (lastBlockTimestamp, vesting) => {
-    const currentTime = new Date().getTime() / 1000;
-    const vestingTime = getTimePeriods(parseInt(lastBlockTimestamp) + parseInt(vesting) - currentTime, true);
-    return `${vestingTime.days}d, ${vestingTime.hours}h, ${vestingTime.minutes}m`;
-};
-
 const formatNumber$3 = (number, minPrecision = 2, maxPrecision = 2) => {
     const options = {
         minimumFractionDigits: minPrecision,
@@ -22105,6 +22045,50 @@ const getFirstNonZeroDigits = (numberToParse, precision = 3) => {
     return n.toFixed(amountToShow < 0 ? 0 : amountToShow);
 };
 
+const MINUTE_IN_SECONDS = 60;
+const HOUR_IN_SECONDS = 3600;
+const DAY_IN_SECONDS = 86400;
+const MONTH_IN_SECONDS = 2629800;
+const YEAR_IN_SECONDS = 31557600;
+/**
+ * Format number of seconds into year, month, day, hour, minute, seconds
+ *
+ * @param seconds
+ */
+const getTimePeriods = (seconds, days) => {
+    let delta = seconds;
+    const timeLeft = {
+        years: 0,
+        months: 0,
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+    };
+    if (delta >= YEAR_IN_SECONDS && !days) {
+        timeLeft.years = Math.floor(delta / YEAR_IN_SECONDS);
+        delta -= timeLeft.years * YEAR_IN_SECONDS;
+    }
+    if (delta >= MONTH_IN_SECONDS && !days) {
+        timeLeft.months = Math.floor(delta / MONTH_IN_SECONDS);
+        delta -= timeLeft.months * MONTH_IN_SECONDS;
+    }
+    if (delta >= DAY_IN_SECONDS) {
+        timeLeft.days = Math.floor(delta / DAY_IN_SECONDS);
+        delta -= timeLeft.days * DAY_IN_SECONDS;
+    }
+    if (delta >= HOUR_IN_SECONDS) {
+        timeLeft.hours = Math.floor(delta / HOUR_IN_SECONDS);
+        delta -= timeLeft.hours * HOUR_IN_SECONDS;
+    }
+    if (delta >= MINUTE_IN_SECONDS) {
+        timeLeft.minutes = Math.floor(delta / MINUTE_IN_SECONDS);
+        delta -= timeLeft.minutes * MINUTE_IN_SECONDS;
+    }
+    timeLeft.seconds = delta;
+    return timeLeft;
+};
+
 var lodash = {exports: {}};
 
 /**
@@ -39333,8 +39317,55 @@ const totalPendingUSD = (userBill) => {
     return pendingTokens * parseFloat(userBill.bond.payoutTokenPrice);
 };
 const vestingTimeRemaining = (userBill) => {
+    var _a, _b;
+    const currentTime = new Date().getTime() / 1000;
+    const vestingCliff = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.vestingCliff) !== null && _b !== void 0 ? _b : 0;
+    return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - vestingCliff - currentTime, true);
+};
+const vestingTimeRemainingString = (userBill) => {
+    var _a, _b, _c;
+    const currentTime = Math.round(new Date().getTime() / 1000);
+    const lastBlockTimestamp = parseInt((_a = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _a !== void 0 ? _a : '0');
+    const vesting = parseInt((_b = userBill === null || userBill === void 0 ? void 0 : userBill.vesting) !== null && _b !== void 0 ? _b : '0');
+    const vestingCliff = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.vestingCliff;
+    const vestingTime = getTimePeriods(lastBlockTimestamp + vesting - currentTime, true);
+    if (vestingCliff && currentTime - lastBlockTimestamp < vestingCliff) {
+        const linearVesting = getTimePeriods(vesting - vestingCliff, true);
+        const cliffCountdown = getTimePeriods(lastBlockTimestamp + vestingCliff - currentTime, true);
+        return `${cliffCountdown.days !== 0 ? `${cliffCountdown.days}d` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours}hs` : `${cliffCountdown.minutes}mins`} + ${linearVesting.days}d`;
+    }
+    return `${vestingTime.days}d, ${vestingTime.hours}h, ${vestingTime.minutes}m`;
+};
+const getPendingVestingString = (bond) => {
+    var _a, _b;
     const currentTime = new Date().getTime() / 1000;
-    return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
+    const lastBlockTimestamp = parseInt((_a = bond === null || bond === void 0 ? void 0 : bond.lastBlockTimestamp) !== null && _a !== void 0 ? _a : '0');
+    const vesting = parseInt((_b = bond === null || bond === void 0 ? void 0 : bond.vesting) !== null && _b !== void 0 ? _b : '0');
+    const vestingTime = getTimePeriods(lastBlockTimestamp + vesting - currentTime, true);
+    return `${vestingTime.days}d, ${vestingTime.hours}h, ${vestingTime.minutes}m`;
+};
+const getVestingTermsString = (bond) => {
+    var _a, _b;
+    const vestingTerm = (_a = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _a !== void 0 ? _a : 0;
+    const vestingCliff = (_b = bond === null || bond === void 0 ? void 0 : bond.vestingCliff) !== null && _b !== void 0 ? _b : 0;
+    if (!vestingCliff) {
+        const vestingTime = getTimePeriods(vestingTerm, true);
+        return `${vestingTime.days} D`;
+    }
+    else if (vestingCliff) {
+        const vestingTime = getTimePeriods(vestingTerm - vestingCliff, true);
+        const vestingCliffString = getTimePeriods(vestingCliff, true);
+        return `${vestingCliffString.days} D + ${vestingTime.days} D`;
+    }
+    return '-';
+};
+const getVestingTermsTooltipString = (bond) => {
+    var _a, _b;
+    const vestingTerm = (_a = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _a !== void 0 ? _a : 0;
+    const vestingCliff = (_b = bond === null || bond === void 0 ? void 0 : bond.vestingCliff) !== null && _b !== void 0 ? _b : 0;
+    const vestingTime = getTimePeriods(vestingTerm - vestingCliff, true);
+    const vestingCliffString = getTimePeriods(vestingCliff, true);
+    return `${vestingCliffString.days} days cliff + ${vestingTime.days} days linear vesting.`;
 };
 const discountEarnTokenPrice = (bond) => {
     var _a, _b;
@@ -43209,7 +43240,7 @@ const TransferAction = ({ userBill, toAddress, disabled, }) => {
 };
 
 const TransferModal = ({ onDismiss, userBill }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     // State
     const [confirmSend, setConfirmSend] = useState(false);
     const [toAddress, setToAddress] = useState('');
@@ -43219,7 +43250,7 @@ const TransferModal = ({ onDismiss, userBill }) => {
     const { lpToken, earnToken } = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) !== null && _a !== void 0 ? _a : {};
     const pending = chainId &&
         ((_e = getBalanceNumber(new BigNumber$1((_b = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _b !== void 0 ? _b : 0), (_d = (_c = earnToken === null || earnToken === void 0 ? void 0 : earnToken.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18)) === null || _e === void 0 ? void 0 : _e.toFixed(4));
-    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", zIndex: 130, children: [jsx$2(Flex, { sx: { mt: '20px' }, children: jsx$2(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [lpToken === null || lpToken === void 0 ? void 0 : lpToken.symbol, " #", userBill === null || userBill === void 0 ? void 0 : userBill.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getPendingVesting((_f = userBill.lastBlockTimestamp) !== null && _f !== void 0 ? _f : '', (_g = userBill.vesting) !== null && _g !== void 0 ? _g : '')] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx$2(TokenImage, { symbol: (_j = (_h = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _h === void 0 ? void 0 : _h.showcaseTokenName) !== null && _j !== void 0 ? _j : (_l = (_k = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _k === void 0 ? void 0 : _k.earnToken) === null || _l === void 0 ? void 0 : _l.symbol, size: 20, chain: (_m = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _m === void 0 ? void 0 : _m.chainId }), jsx$2(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx$2(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx$2(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx$2(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx$2(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend((prev) => !prev), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx$2(Checkbox, { checked: confirmSend, onChange: () => null }), jsx$2(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx$2(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: jsx$2(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress }) })] }));
+    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", zIndex: 130, children: [jsx$2(Flex, { sx: { mt: '20px' }, children: jsx$2(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [lpToken === null || lpToken === void 0 ? void 0 : lpToken.symbol, " #", userBill === null || userBill === void 0 ? void 0 : userBill.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getPendingVestingString(userBill)] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx$2(TokenImage, { symbol: (_g = (_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName) !== null && _g !== void 0 ? _g : (_j = (_h = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _h === void 0 ? void 0 : _h.earnToken) === null || _j === void 0 ? void 0 : _j.symbol, size: 20, chain: (_k = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _k === void 0 ? void 0 : _k.chainId }), jsx$2(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx$2(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx$2(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx$2(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx$2(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend((prev) => !prev), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx$2(Checkbox, { checked: confirmSend, onChange: () => null }), jsx$2(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx$2(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: jsx$2(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress }) })] }));
 };
 var TransferBondModal = React__default.memo(TransferModal);
 
@@ -69206,6 +69237,12 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
     const { isLoading, isSuccess: isConfirmed } = useMonitorTxHash(claimTxHash, (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId);
     const { addToastError } = usePopups();
     const load = loadingTx || (isLoading && !isConfirmed);
+    // Cliff display info:
+    const vestingCliff = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.vestingCliff;
+    const currentTime = Math.round(new Date().getTime() / 1000);
+    const lastBlockTimestamp = parseInt((_d = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _d !== void 0 ? _d : '0');
+    const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
+    const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
     const handleClaim = (billId, billAddress) => __awaiter$9(void 0, void 0, void 0, function* () {
         const address = billAddress;
         try {
@@ -69246,9 +69283,9 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
         var _a, _b, _c, _d, _e, _f;
         return getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.pendingRewards) !== null && _a !== void 0 ? _a : '0'), (_f = (_d = (_c = (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.earnToken) === null || _c === void 0 ? void 0 : _c.decimals) === null || _d === void 0 ? void 0 : _d[(_e = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _e === void 0 ? void 0 : _e.chainId]) !== null && _f !== void 0 ? _f : 18);
     };
-    const earnTokenPrice = useCurrencyPrice((_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken) !== null && _c !== void 0 ? _c : null, (_e = (_d = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _d === void 0 ? void 0 : _d.chainId) !== null && _e !== void 0 ? _e : null);
+    const earnTokenPrice = useCurrencyPrice((_e = userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken) !== null && _e !== void 0 ? _e : null, (_g = (_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.chainId) !== null && _g !== void 0 ? _g : null);
     const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
-    const attributes = (_f = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _f === void 0 ? void 0 : _f.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
+    const attributes = (_h = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _h === void 0 ? void 0 : _h.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
     const handleImageLoad = () => {
         setImgLoaded(true);
     };
@@ -69260,11 +69297,11 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
                                         justifyContent: 'center',
                                         alignItems: 'center',
                                         zIndex: 1,
-                                    }, children: jsx$2(Spinner, { width: 100 }) }))] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: userBill && (jsx$2(TokenImage, { symbol: (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken) === null || _k === void 0 ? void 0 : _k.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_m = (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_p = (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.tags) === null || _p === void 0 ? void 0 : _p.slice(0, 1).map((tag) => {
+                                    }, children: jsx$2(Spinner, { width: 100 }) }))] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: userBill && (jsx$2(TokenImage, { symbol: (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.showcaseTokenName) !== null && _k !== void 0 ? _k : (_m = (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.earnToken) === null || _m === void 0 ? void 0 : _m.symbol, size: 40, chain: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_p = (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.showcaseTokenName) !== null && _p !== void 0 ? _p : userBill === null || userBill === void 0 ? void 0 : userBill.bond.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_r = (_q = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _q === void 0 ? void 0 : _q.tags) === null || _r === void 0 ? void 0 : _r.slice(0, 1).map((tag) => {
                                                 return (jsx$2(Flex$1, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
                                             }) }), jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill === null || userBill === void 0 ? void 0 : userBill.id] })] }), jsxs(Flex$1, { className: "yourbondinfo blocks-container", children: [jsxs(Flex$1, { className: "attributes-container", children: [jsxs(Flex$1, { className: "attributes-header", sx: {
                                                         borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
-                                                    }, onClick: () => setIsOpenTraits(!isOpenTraits), children: [jsxs(Flex$1, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), ((_q = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _q === void 0 ? void 0 : _q.billType) === 'staking' && (jsxs(Flex$1, { sx: {
+                                                    }, onClick: () => setIsOpenTraits(!isOpenTraits), children: [jsxs(Flex$1, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), ((_s = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _s === void 0 ? void 0 : _s.billType) === 'staking' && (jsxs(Flex$1, { sx: {
                                                         p: '5px 10px',
                                                         width: '100%',
                                                         background: '#8E568F',
@@ -69278,7 +69315,7 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
                                                                 ? attributes.map((a) => (jsxs(Flex$1, { sx: { background: 'white4', width: '100%', padding: '2px 8px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
                                                                 : BILL_ATTRIBUTES.map((attrib) => {
                                                                     return (jsxs(Flex$1, { sx: { background: 'white4', width: '100%', padding: '2px 8px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
-                                                                }) }) })) })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon" }), jsx$2(Flex$1, { className: "block-info text", children: jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_r = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _r !== void 0 ? _r : '', (_s = userBill === null || userBill === void 0 ? void 0 : userBill.vesting) !== null && _s !== void 0 ? _s : '') }) })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-pending", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Pending" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: userBill && (jsx$2(TokenImage, { symbol: (_u = (_t = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _t === void 0 ? void 0 : _t.showcaseTokenName) !== null && _u !== void 0 ? _u : (_w = (_v = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _v === void 0 ? void 0 : _v.earnToken) === null || _w === void 0 ? void 0 : _w.symbol, size: 25, chain: (_x = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _x === void 0 ? void 0 : _x.chainId })) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
+                                                                }) }) })) })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon" }), jsx$2(Flex$1, { className: "block-info text", children: jsxs(Flex$1, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: [vestingTimeRemainingString(userBill), isPendingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex$1, { children: ["Bond will be claimable in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`, "."] }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex$1, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }) })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-pending", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Pending" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: userBill && (jsx$2(TokenImage, { symbol: (_u = (_t = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _t === void 0 ? void 0 : _t.showcaseTokenName) !== null && _u !== void 0 ? _u : (_w = (_v = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _v === void 0 ? void 0 : _v.earnToken) === null || _w === void 0 ? void 0 : _w.symbol, size: 25, chain: (_x = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _x === void 0 ? void 0 : _x.chainId })) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), jsx$2(Text, { sx: {
                                                                         fontSize: ['10px', '10px', '10px', '12px'],
                                                                         fontWeight: [500, 500, 500, 400],
                                                                         paddingLeft: '10px',
@@ -69290,10 +69327,12 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
                                                     var _a;
                                                     event.stopPropagation();
                                                     switchChain({ chainId: (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId });
-                                                }, children: ["Switch to ", NETWORK_LABEL[(_5 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _5 === void 0 ? void 0 : _5.chainId]] })) : (jsx$2(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || load || !userBill, load: load, onClick: (event) => {
+                                                }, children: ["Switch to ", NETWORK_LABEL[(_5 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _5 === void 0 ? void 0 : _5.chainId]] })) : (jsx$2(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || load || !userBill || isPendingCliff, load: load, onClick: (event) => {
                                                     event.stopPropagation();
                                                     handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
-                                                }, children: "Claim" })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, disabled: !userBill, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
+                                                }, children: isPendingCliff
+                                                    ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
+                                                    : 'Claim' })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, disabled: !userBill, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
 };
 
 const styles$a = {
@@ -69408,7 +69447,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
 };
 
 const UserBondRow = ({ bill }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const userChainId = useChainId();
     const { switchChain } = useSwitchChain();
     const { writeContractAsync } = useWriteContract();
@@ -69451,16 +69490,23 @@ const UserBondRow = ({ bill }) => {
     });
     // Display Info
     const earnTokenPrice = useCurrencyPrice(bill.bond.earnToken, bill.bond.chainId);
-    return (jsxs("div", { className: "your-bonds", onClick: onOpenPurchasedBond, children: [jsxs("div", { className: "token-info-container", children: [jsx$2(TokenInfoAndName, { bill: bill.bond, vestEnds: `Ends in ${getPendingVesting(bill.lastBlockTimestamp, bill.vesting)}` }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: ((_a = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _a === void 0 ? void 0 : _a.earnToken.address[bill === null || bill === void 0 ? void 0 : bill.bond.chainId]) || '', earnTokenSymbol: ((_b = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _b === void 0 ? void 0 : _b.earnToken.symbol) || '', bondContract: (_c = bill === null || bill === void 0 ? void 0 : bill.address) !== null && _c !== void 0 ? _c : '', projectLink: (_d = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _d === void 0 ? void 0 : _d.projectLink, twitter: (_e = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _e === void 0 ? void 0 : _e.twitter, audit: (_f = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _f === void 0 ? void 0 : _f.audit, chain: (_g = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _g === void 0 ? void 0 : _g.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Flex$1, { sx: {
+    const vestingCliff = (_a = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _a === void 0 ? void 0 : _a.vestingCliff;
+    const currentTime = Math.round(new Date().getTime() / 1000);
+    const lastBlockTimestamp = parseInt((_b = bill === null || bill === void 0 ? void 0 : bill.lastBlockTimestamp) !== null && _b !== void 0 ? _b : '0');
+    const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
+    const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
+    return (jsxs("div", { className: "your-bonds", onClick: onOpenPurchasedBond, children: [jsxs("div", { className: "token-info-container", children: [jsx$2(TokenInfoAndName, { bill: bill.bond, vestEnds: `Ends in ${getPendingVestingString(bill)}` }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: ((_c = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _c === void 0 ? void 0 : _c.earnToken.address[bill === null || bill === void 0 ? void 0 : bill.bond.chainId]) || '', earnTokenSymbol: ((_d = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _d === void 0 ? void 0 : _d.earnToken.symbol) || '', bondContract: (_e = bill === null || bill === void 0 ? void 0 : bill.address) !== null && _e !== void 0 ? _e : '', projectLink: (_f = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _f === void 0 ? void 0 : _f.projectLink, twitter: (_g = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _g === void 0 ? void 0 : _g.twitter, audit: (_h = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _h === void 0 ? void 0 : _h.audit, chain: (_j = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _j === void 0 ? void 0 : _j.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Flex$1, { sx: {
                                     opacity: 0.8,
-                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(4)), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * ((_h = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _h !== void 0 ? _h : 0)).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(totalPending(bill) * ((_j = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _j !== void 0 ? _j : 0)).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: `${vestingTimeRemaining(bill).days}d, ${vestingTimeRemaining(bill).hours}h, ${vestingTimeRemaining(bill).minutes}m` }), jsx$2("div", { className: "your-bonds-column-button", children: userChainId !== bill.bond.chainId ? (jsxs(Button, { className: "button", disabled: claimable(bill) === 0 || load, load: load, onClick: (event) => {
+                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(4)), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * ((_k = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _k !== void 0 ? _k : 0)).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(totalPending(bill) * ((_l = earnTokenPrice === null || earnTokenPrice === void 0 ? void 0 : earnTokenPrice.price) !== null && _l !== void 0 ? _l : 0)).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: vestingTimeRemainingString(bill) }), jsx$2("div", { className: "your-bonds-column-button", children: userChainId !== bill.bond.chainId ? (jsxs(Button, { className: "button", disabled: claimable(bill) === 0 || load, load: load, onClick: (event) => {
                                 event.stopPropagation();
                                 // Add your claim logic here
                                 switchChain({ chainId: bill.bond.chainId });
-                            }, fullWidth: true, children: ["Switch to ", NETWORK_LABEL[bill.bond.chainId]] })) : (jsx$2(Button, { className: "button", disabled: claimable(bill) === 0 || load, load: load, onClick: (event) => {
+                            }, fullWidth: true, children: ["Switch to ", NETWORK_LABEL[bill.bond.chainId]] })) : (jsx$2(Button, { className: "button", disabled: claimable(bill) === 0 || load || isPendingCliff, load: load, onClick: (event) => {
                                 event.stopPropagation();
                                 handleClaim(bill.id, bill.address);
-                            }, fullWidth: true, children: "Claim" })) })] })] }));
+                            }, fullWidth: true, children: isPendingCliff
+                                ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
+                                : 'Claim' })) })] })] }));
 };
 
 function useBondsList() {
@@ -69907,7 +69953,7 @@ const ChainOptionsButtons = ({ selectedChain, setSelectedChain, setViewAllChains
 
 const ClaimAllModal = () => {
     var _a, _b;
-    const { chainId, address: account } = useAccount();
+    const { chainId } = useAccount();
     const { switchChain } = useSwitchChain();
     const SDKConfig = useSDKConfig();
     const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
@@ -70060,6 +70106,9 @@ const YourBonds = () => {
         // Filter by filter option (claimable or all buttons)
         if (filterOption === 'CLAIMABLE') {
             bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
+                if (bond.bond.vestingCliff) {
+                    return bond.payout !== '0';
+                }
                 return bond.pendingRewards !== '0';
             });
         }
@@ -70136,7 +70185,7 @@ const useTopTags = (initialBondList) => {
 
 const isBondSoldOut = (bill) => {
     var _a;
-    const { tokensRemaining, discount, payoutTokenPrice, bonus } = bill;
+    const { tokensRemaining, payoutTokenPrice, bonus } = bill;
     if (bill.soldOut)
         return true;
     if (bill.inactive)
@@ -72404,24 +72453,20 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
 };
 
 const BondCards = ({ bondData }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", style: { color: getDiscountColor(bondData === null || bondData === void 0 ? void 0 : bondData.bonus) }, children: [jsxs("div", { className: "bond-card-title", children: ["Bonus", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: (bondData === null || bondData === void 0 ? void 0 : bondData.bonus) < 0 ? '0%' : `${(_a = bondData === null || bondData === void 0 ? void 0 : bondData.bonus) === null || _a === void 0 ? void 0 : _a.toFixed(2)}%` })] }), bondData.type !== 'staking' && (jsxs("div", { className: "bond-card-block hide-mobile", children: [jsxs("div", { className: "bond-card-title", children: ["ARR", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: (bondData === null || bondData === void 0 ? void 0 : bondData.bonus) < 0
                             ? '0%'
-                            : `${((((_b = bondData === null || bondData === void 0 ? void 0 : bondData.bonus) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0).days).toFixed(2)}%` })] })), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx$2("div", { className: "bond-card-content", children: bondData.type === 'staking'
-                            ? `${daysLeftOnBasepadPool()} D Lock`
-                            : vestingTime((_d = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _d !== void 0 ? _d : 0).days
-                                ? `${vestingTime((_e = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _e !== void 0 ? _e : 0).days} D`
-                                : '-' })] }), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy((_f = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [jsx$2("div", { style: { paddingRight: '3px' }, children: jsx$2(TokenImage, { symbol: (_g = bondData.showcaseTokenName) !== null && _g !== void 0 ? _g : bondData.earnToken.symbol, size: 20 }) }), (_h = parseFloat(maxBuy(bondData).toFixed(0))) === null || _h === void 0 ? void 0 : _h.toLocaleString('en-US')] })] })] }));
+                            : `${((((_b = bondData === null || bondData === void 0 ? void 0 : bondData.bonus) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0).days).toFixed(2)}%` })] })), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [bondData.type === 'staking' ? `${daysLeftOnBasepadPool()} D Lock` : getVestingTermsString(bondData), bondData.vestingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: getVestingTermsTooltipString(bondData) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] })] }), jsxs("div", { className: "bond-card-block", children: [jsxs("div", { className: "bond-card-title", children: ["Max Buy", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.MaxBuy((_d = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [jsx$2("div", { style: { paddingRight: '3px' }, children: jsx$2(TokenImage, { symbol: (_e = bondData.showcaseTokenName) !== null && _e !== void 0 ? _e : bondData.earnToken.symbol, size: 20 }) }), (_f = parseFloat(maxBuy(bondData).toFixed(0))) === null || _f === void 0 ? void 0 : _f.toLocaleString('en-US')] })] })] }));
 };
 
 const Estimations = ({ bondData, inputValue, inputToken, estimatedOutput, inputTokenPrice, isZap, fetchingZapQuote, zapError, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     // Estimations
     const estimatedOutputUSD = estimatedOutput * parseFloat((_a = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
     const estimatedInputUSD = parseFloat(inputValue) * (inputTokenPrice !== null && inputTokenPrice !== void 0 ? inputTokenPrice : 0);
     const normalPremium = premium(bondData, inputValue);
     const premiumString = isZap ? formatUSDNumber((estimatedOutputUSD - estimatedInputUSD).toString()) : normalPremium;
-    return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You Spend:" }), jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", getSymbol(inputToken, bondData.chainId), " = $", ' ', formatUSDNumber(estimatedInputUSD === null || estimatedInputUSD === void 0 ? void 0 : estimatedInputUSD.toString())] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getPremiumColor(premiumString)}`, children: ["$ ", premiumString] }))] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime((_b = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _b !== void 0 ? _b : 0).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutput.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
+    return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx$2(Flex, { className: "row-container spend", children: "You Spend:" }), jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", getSymbol(inputToken, bondData.chainId), " = $", ' ', formatUSDNumber(estimatedInputUSD === null || estimatedInputUSD === void 0 ? void 0 : estimatedInputUSD.toString())] })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getPremiumColor(premiumString)}`, children: ["$ ", premiumString] }))] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime(((_b = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _b !== void 0 ? _b : 0) - ((_c = bondData.vestingCliff) !== null && _c !== void 0 ? _c : 0)).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutput.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
 };
 
 // Custom HTML sanitizer
@@ -73449,7 +73494,7 @@ const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement
 var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
 const BondRow = ({ bond }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     const locationPath = window.location.pathname.replace('/', '');
     const billAddress = 'billAddress' in bond
         ? bond.billAddress
@@ -73495,11 +73540,7 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs("div", { className: `bond-row ${isXmasStyle ? 'xmas-border' : ''}`, onClick: handleOpenModal, children: [jsxs("div", { className: "token-info-container", children: [isXmasStyle && jsx$2("img", { src: "/images/bills/xmasHat.png", alt: "xmas-hat", className: "xmas-hat" }), jsx$2(TokenInfoAndName, { bill: bond })] }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(bonus)}`, children: bonus !== undefined ? (bonus <= 0 ? (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) })) : (`${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`)) : ('-') }), jsx$2("div", { className: "arr-column", children: bonus !== undefined && bonus <= 0 ? (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) })) : calculateARR(bond) !== undefined ? (calculateARR(bond)) : ('-') }), jsx$2("div", { className: "terms-column", children: bond.type === 'staking'
-                            ? `${daysLeftOnBasepadPool()} D Lock`
-                            : vestingTime((_a = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _a !== void 0 ? _a : 0).days
-                                ? `${vestingTime((_b = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _b !== void 0 ? _b : 0).days} D`
-                                : '-' }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
+    return (jsxs("div", { className: `bond-row ${isXmasStyle ? 'xmas-border' : ''}`, onClick: handleOpenModal, children: [jsxs("div", { className: "token-info-container", children: [isXmasStyle && jsx$2("img", { src: "/images/bills/xmasHat.png", alt: "xmas-hat", className: "xmas-hat" }), jsx$2(TokenInfoAndName, { bill: bond })] }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(bonus)}`, children: bonus !== undefined ? (bonus <= 0 ? (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) })) : (`${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`)) : ('-') }), jsx$2("div", { className: "arr-column", children: bonus !== undefined && bonus <= 0 ? (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx$2(Svg, { icon: "Timer", width: "20px", color: "#81CFEA" }) })) : calculateARR(bond) !== undefined ? (calculateARR(bond)) : ('-') }), jsxs("div", { className: "terms-column", children: [bond.type === 'staking' ? `${daysLeftOnBasepadPool()} D Lock` : getVestingTermsString(bond), bond.vestingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: getVestingTermsTooltipString(bond) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -73508,7 +73549,7 @@ const BondRow = ({ bond }) => {
                             }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _e !== void 0 ? _e : '', earnTokenSymbol: (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol) !== null && _g !== void 0 ? _g : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
+                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
 };
 
 const HotBondCard = ({ bond }) => {

package/dist/styles.css

@@ -755,8 +755,8 @@ span.flex-inline {
 }
 .bond-row .bond-info-columns .terms-column {
   display: none;
-  width: 87px;
-  align-items: flex-end;
+  width: 115px;
+  align-items: center;
   justify-content: center;
 }
 @media screen and (min-width: 1000px) {
@@ -924,7 +924,7 @@ span.flex-inline {
 }
 .bonds-menu .terms-header {
   display: none;
-  width: 87px;
+  width: 115px;
   align-items: flex-end;
   justify-content: center;
   cursor: pointer;

package/dist/types/bonds.d.ts

@@ -17,6 +17,7 @@ export interface BondsData {
     tokensRemaining: string;
     showcaseTokenName: string;
     vestingTerm: number;
+    vestingCliff?: number;
     principalTokenPrice: string;
     payoutTokenPrice: string;
     tags?: string[];

package/dist/utils/displayHelpers.d.ts

@@ -1,6 +1,7 @@
 import { BigNumber } from 'bignumber.js';
 import { UserBill } from '../types/yourbonds';
 import { BondsData } from '../types/bonds';
+import { BillsConfig } from '@ape.swap/apeswap-lists';
 export declare const claimable: (userBill: UserBill) => number;
 export declare const claimableUSD: (userBill: UserBill) => number;
 export declare const earnTokenPrice: (bond: BondsData) => string;
@@ -14,7 +15,10 @@ export declare const vestingTimeRemaining: (userBill: UserBill) => {
     minutes: number;
     seconds: number;
 };
-export declare const vestingTimeRemainingYourBonds: (userBill: UserBill) => number;
+export declare const vestingTimeRemainingString: (userBill?: UserBill) => string;
+export declare const getPendingVestingString: (bond?: UserBill) => string;
+export declare const getVestingTermsString: (bond?: BondsData | BillsConfig) => string;
+export declare const getVestingTermsTooltipString: (bond?: BondsData | BillsConfig) => string;
 export declare const discountEarnTokenPrice: (bond: BondsData) => string;
 export declare const maxBuy: (bond: BondsData) => 0 | BigNumber;
 export declare function formatNumber(input: string): string;

package/dist/views/Bonds/utils.d.ts

@@ -12,6 +12,5 @@ export declare const vestingTime: (vestingTerm?: number) => {
     seconds: number;
 };
 export declare const remainingPercentage: (bond: BondsData) => number;
-export declare const getBillContractURL: (bond: BondsData | BillsConfig) => string;
 export declare const getDiscountColor: (discount?: number) => string;
 export declare const calculateARR: (bond: BondsData | BillsConfig) => string;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "2.6.16",
+  "version": "2.7.0",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",
@@ -56,7 +56,7 @@
     "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {
-    "@ape.swap/apeswap-lists": "3.74.2",
+    "@ape.swap/apeswap-lists": "3.75.0",
     "@emotion/react": "11.11.4",
     "bignumber.js": "^9.1.2",
     "chart.js": "4.2.0",

package/dist/hooks/usePendingVesting.d.ts

@@ -1,5 +0,0 @@
-export declare const usePendingVesting: ({ lastBlockTimestamp, vesting }: {
-    lastBlockTimestamp: string;
-    vesting: string;
-}) => string;
-export declare const getPendingVesting: (lastBlockTimestamp: string, vesting: string) => string;