@ape.swap/bonds-sdk 2.5.2 → 2.5.3

package/dist/main.js

@@ -74072,7 +74072,7 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
 
 const BondCards = ({ bondData }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    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: `${(_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: `${((((_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'
+    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: `${((((_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`
@@ -74086,7 +74086,7 @@ const Estimations = ({ bondData, inputValue, inputToken, estimatedOutput, inputT
     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).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
@@ -74218,6 +74218,22 @@ const RestrictedRegionModal = ({ onDismiss }) => {
     return (jsxs(Modal, { className: "modal", title: "Notice", sx: { maxWidth: '200px' }, children: [jsxs(Flex, { sx: { my: '20px' }, children: ["Unfortunately, this bond is restricted for your region: ", geoData === null || geoData === void 0 ? void 0 : geoData.countryCode, "."] }), jsx$2(Button, { fullWidth: true, onClick: onDismiss, children: "Close" })] }));
 };
 
+const NoBonusModal = ({ onAcknowledge, showcaseTokenName }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [isChecked, setIsChecked] = useState(false);
+    const handleAcknowledge = () => {
+        onAcknowledge();
+        setIsOpen(false);
+    };
+    const handleCancel = () => {
+        setIsOpen(false);
+    };
+    const handleCheckboxChange = () => {
+        setIsChecked(!isChecked);
+    };
+    return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx$2("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row", sx: { flexDirection: 'row', gap: '8px', pb: '20px' }, children: [jsx$2(Flex, { className: "nobonus-checkbox", children: jsx$2(Checkbox, { onChange: handleCheckboxChange }) }), jsx$2(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions", sx: { flexDirection: 'row', gap: '8px' }, children: [jsx$2(Button, { classname: "nobonus-cancel", onClick: handleCancel, sx: { width: '100%', justifyContent: 'center' }, variant: "secondary", children: "Cancel" }), jsx$2(Button, { className: "nobonus-buy", onClick: handleAcknowledge, disabled: !isChecked, sx: { width: '100%', justifyContent: 'center' }, children: "Buy" })] })] })));
+};
+
 const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const SDKConfig = useSDKConfig();
@@ -74411,6 +74427,17 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
             }
         }
     };
+    const [openNoBonusModal] = useModal(jsx$2(NoBonusModal, { onAcknowledge: handleBothPurchases, showcaseTokenName: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), true, true, 'NoBonusModal');
+    const handleOpenModal = () => {
+        var _a;
+        const bonus = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.bonus) !== null && _a !== void 0 ? _a : 0;
+        if (bonus < 0) {
+            openNoBonusModal();
+        }
+        else {
+            handleBothPurchases();
+        }
+    };
     const openExternal = () => {
         if ((bondData === null || bondData === void 0 ? void 0 : bondData.chainId) === types.ChainId.LIGHTLINK) {
             window.open('https://bridge.lightlink.io/bridge?from=ETHEREUM&to=LIGHTLINK&token=ETH', '_blank');
@@ -74441,7 +74468,7 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
                                                 !inputValue ||
                                                 parseFloat(inputValue) === 0 ||
                                                 fetchingZapQuote ||
-                                                zapError, onClick: handleBothPurchases, children: zapError ? 'something went wrong' : `buy` })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
+                                                zapError, onClick: handleOpenModal, children: zapError ? 'something went wrong' : `buy` })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
@@ -74705,7 +74732,7 @@ const BondRow = ({ bond }) => {
         const tokens = new BigNumber$1(tokensRemaining);
         return tokens.times(payoutTokenPrice);
     };
-    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsxs("div", { className: "bond-info-columns", children: [jsx$2("div", { className: `discount-column ${getDiscountColor(bonus)}`, children: bonus !== undefined ? `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%` : '-' }), jsx$2("div", { className: "arr-column", children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' }), jsx$2("div", { className: "terms-column", children: bond.type === 'staking'
+    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", children: 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 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' }), jsx$2("div", { className: "arr-column", children: 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`
@@ -74737,7 +74764,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx$2(Flex, { sx: styles$a.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, 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: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', 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(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%` : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$a.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, 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: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', 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(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {

package/dist/styles.css

@@ -753,12 +753,12 @@ span.flex-inline {
 }
 
 .discount-positive {
-  color: #38A611;
+  color: #38a611;
   width: 20%;
 }
 
 .discount-negative {
-  color: #DF4141;
+  color: #ffffff;
   width: 20%;
 }
 

package/dist/views/BondModal/NoBonusModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NoBonusModalProps {
+    showcaseTokenName?: string;
+    onAcknowledge: () => void;
+}
+declare const NoBonusModal: React.FC<NoBonusModalProps>;
+export default NoBonusModal;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",