@ape.swap/bonds-sdk 3.0.5 → 3.0.8

package/dist/main.js

@@ -7664,6 +7664,7 @@ var placements;
     placements["BOTTOMRIGHT"] = "bottomRight";
     placements["BOTTOMLEFT"] = "bottomLeft";
     placements["ONLYCONTAINERRIGHT"] = "onlyContainerRight";
+    placements["LEFT"] = "left";
 })(placements || (placements = {}));
 
 const baseStyle$1 = {
@@ -7682,6 +7683,7 @@ const baseDirectionArrow = {
 };
 const topArrow = Object.assign(Object.assign({ bottom: 0 }, baseDirectionArrow), { borderBottom: 0, borderTopWidth: '15px', borderTopStyle: 'solid', transform: 'translate(-50%, calc(100%))' });
 const bottomArrow = Object.assign(Object.assign({ top: 0 }, baseDirectionArrow), { borderTop: 0, borderBottomWidth: '15px', borderBottomStyle: 'solid', transform: 'translate(-50%, calc(-100%))' });
+const leftArrow = Object.assign(Object.assign({}, baseDirectionArrow), { borderRight: 0, borderRightWidth: '15px', borderRightStyle: 'solid', transform: 'translate(-50%, calc(-100%))' });
 const container = (hide) => ({
     position: 'relative',
     display: 'flex',
@@ -7713,6 +7715,9 @@ const styles$h = {
             borderBottomColor: 'white2',
         },
     },
+    left: {
+        '&::before': Object.assign({ position: 'absolute', top: '65%', left: '-13px', color: 'white2' }, leftArrow),
+    },
 };
 
 const placementStyles = {
@@ -7736,6 +7741,10 @@ const placementStyles = {
         top: 'calc(100% + 15px)',
         right: 0,
     },
+    [placements.LEFT]: {
+        left: 'calc(100% + 15px)',
+        right: 0,
+    },
 };
 const TooltipBubble = (_a) => {
     var { width, placement = placements.BOTTOMRIGHT, body, backgroundColor, hideTooltip, children, transformTip } = _a, props = __rest(_a, ["width", "placement", "body", "backgroundColor", "hideTooltip", "children", "transformTip"]);
@@ -7743,8 +7752,12 @@ const TooltipBubble = (_a) => {
         ? {
             backgroundColor,
             '&:before': {
-                borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT ? backgroundColor : undefined,
-                borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT ? backgroundColor : undefined,
+                borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT || placement === placements.LEFT
+                    ? backgroundColor
+                    : undefined,
+                borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT || placement === placements.LEFT
+                    ? backgroundColor
+                    : undefined,
             },
         }
         : {};
@@ -17828,7 +17841,7 @@ const styles$g = {
         left: '50%',
         transform: 'translate(-50%, -50%)',
         width: '380px',
-        minWidth: ['95%', 'min(360px, 90%)', '320px'],
+        minWidth: ['95%', 'min(380px, 90%)', '380px'],
         overflowY: ['auto', 'auto', 'auto', 'unset'],
         maxHeight: 'calc(100% - 30px)',
         maxWidth: '95vw',
@@ -19140,11 +19153,13 @@ const TokenInfoAndName = ({ bill, vestEnds, isHotBond, }) => {
                     left: '-20px',
                 }, children: jsx$2(Flex, { sx: { borderRadius: '56px', overflow: 'hidden' }, children: jsx$2(Svg, { width: 100, height: 100, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _a !== void 0 ? _a : 'question' }) }) })) : (jsxs(Fragment$1, { children: [jsx$2(Flex, { className: "tokeninfoname chain", children: jsx$2(Svg, { width: 20, height: 20, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bill === null || bill === void 0 ? void 0 : bill.chainId]) !== null && _b !== void 0 ? _b : 'question' }) }), jsx$2(Flex, { className: "tokeninfoname gradient", sx: {
                             background: isHotBond || vestEnds ? 'transparent' : NETWORK_COLORS[bill.chainId],
-                        } })] })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: { marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0 }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
-                    display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'],
+                        } })] })), jsxs(Flex, { className: "tokeninfoname tokencontainer", sx: {
+                    marginTop: vestEnds ? ['10px', '10px', '10px', '0px'] : 0,
+                    maxWidth: ['140px', '140px', '140px', '190px', '190px'],
+                }, children: [jsx$2(TokenImage, { symbol: tokenName, size: 33 }), jsxs(Flex, { className: "tokeninfoname tokentext", children: [tokenName, vestEnds && (jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400, opacity: 0.6, lineHeight: '14px' }, children: vestEnds }))] }), jsx$2(Flex, { className: "tokeninfofav", sx: { minWidth: '25px', p: '5px' }, children: jsx$2(AddFavToken, { tokenSymbol: tokenName, hotBond: isHotBond }) })] }), jsx$2(Flex, { sx: {
                     justifyContent: isHotBond ? 'center' : 'flex-start',
-                    width: '100%',
-                }, 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 })] }));
+                    alignItems: 'center',
+                }, children: jsx$2(Flex, { sx: { display: isHotBond ? 'flex' : ['none', 'none', 'none', 'none', 'flex'] }, 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 formatNumber$3 = (number, minPrecision = 2, maxPrecision = 2) => {
@@ -22265,7 +22280,6 @@ function formatUSDNumber(input) {
     // Note: Between 1k and 0.01 show 2 decimals
     return parseFloat(number.toFixed(2)).toLocaleString('en-US');
 }
-const youSpend = (inputValue) => formatNumber$2(inputValue);
 const youSpendUSD = (bond, inputValue) => {
     return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
 };
@@ -22298,8 +22312,6 @@ const getRawBonus = (bond, inputValue) => {
     if (!bond || !inputValue)
         return '0';
     const premiumUSD = parseFloat(youGetUSD(bond, inputValue)) - parseFloat(youSpendUSD(bond, inputValue));
-    //TODO: rollback this
-    // return formatUSDNumber(premiumUSD.toString())
     return premiumUSD.toString();
 };
 const getFeeAmount = (bond, inputValue) => {
@@ -70914,30 +70926,7 @@ const ExpandedViewButton = ({ handleNavigation, rightPos }) => {
                 cursor: 'pointer',
                 width: '100%',
                 display: 'flex',
-            }, onClick: handleNavigation, children: [jsx$2(Flex, { sx: {
-                        background: '#DF414166',
-                        borderRadius: 'small',
-                        p: '1px 5px',
-                        position: 'absolute',
-                        height: '20px',
-                        left: '-50px',
-                        fontSize: '12px',
-                        fontWeight: 400,
-                        lineHeight: '17px',
-                        width: '40px',
-                        '&:before': {
-                            content: '""',
-                            display: 'block',
-                            height: 0,
-                            width: 0,
-                            position: 'absolute',
-                            top: '50%',
-                            left: 'calc(100% - 0px)',
-                            border: '5px solid transparent',
-                            borderLeftColor: '#DF414166',
-                            transform: 'translateY(-50%)',
-                        },
-                    }, children: "NEW" }), "Project Info", jsx$2(Flex, { sx: { ml: '4px' }, children: jsx$2(Svg, { icon: "expand", width: 20, color: "white" }) })] }) }));
+            }, onClick: handleNavigation, children: ["Project Info", jsx$2(Flex, { sx: { ml: '4px' }, children: jsx$2(Svg, { icon: "expand", width: 20, color: "white" }) })] }) }));
 };
 
 const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, projectLink, twitter, audit, chain, }) => {
@@ -71699,27 +71688,11 @@ const useTopTags = (initialBondList) => {
 };
 
 const isBondSoldOut = (bill) => {
-    var _a;
     if (bill.soldOut)
         return true;
     if (bill.inactive)
         return true;
-    const { tokensRemaining, payoutTokenPrice, bonus } = bill;
-    if (!tokensRemaining)
-        return false;
-    const thresholdToHide = new BigNumber$1(100).div(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : 0);
-    if (bonus && bonus > 50) {
-        // If discount is over 50% it will be hidden
-        // console.log('Soldout contract:', billAddress)
-        return true;
-    }
-    if (((_a = new BigNumber$1(tokensRemaining)) === null || _a === void 0 ? void 0 : _a.lte(thresholdToHide)) || bonus === 100) {
-        // If there's less than 100 usd bond will be hidden
-        // console.log('Soldout contract: ', billAddress)
-        return true;
-    }
-    else
-        return false;
+    return false;
 };
 const sortBonds = (sortConfig, bonds) => {
     const bondsToSort = bonds !== null && bonds !== void 0 ? bonds : [];
@@ -71989,12 +71962,13 @@ const getSymbol = (token, chainId) => {
 };
 
 const TokenRow = ({ token, chainId, handleTokenSelect, }) => {
-    var _a;
+    var _a, _b;
     const symbol = getSymbol(token, chainId);
     const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId];
     const { address } = useAccount();
     const { isLoading, data: tokenBalance } = useCurrencyBalance(token, address !== null && address !== void 0 ? address : null, chainId);
-    return (jsxs(Flex, { sx: { p: '8px', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { background: 'white4' } }, onClick: () => handleTokenSelect(tokenAddress !== null && tokenAddress !== void 0 ? tokenAddress : ''), children: [jsxs(Flex, { children: [jsx$2(TokenImage, { symbol: symbol === null || symbol === void 0 ? void 0 : symbol.toUpperCase(), chain: chainId, size: 30 }), jsx$2(Flex, { sx: { mx: '8px', lineHeight: '28px', fontSize: '14px' }, children: symbol })] }), address && (jsx$2(Flex, { sx: { fontSize: '14px' }, children: tokenBalance === '0' ? ('0') : !tokenBalance && isLoading ? (jsx$2(Spinner, { size: 15 })) : (jsx$2(Fragment$1, { children: (_a = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toPrecision(5) })) }))] }));
+    const splited = typeof token !== 'string' ? (_a = token === null || token === void 0 ? void 0 : token.symbol) === null || _a === void 0 ? void 0 : _a.split('-') : undefined;
+    return (jsxs(Flex, { sx: { p: '8px', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { background: 'white4' } }, onClick: () => handleTokenSelect(tokenAddress !== null && tokenAddress !== void 0 ? tokenAddress : ''), children: [jsxs(Flex, { children: [lodashExports.isArray(splited) ? (jsx$2(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: chainId })) : (jsx$2(TokenImage, { symbol: getSymbol(token, chainId), size: 28, chain: chainId })), jsx$2(Flex, { sx: { mx: '8px', lineHeight: '28px', fontSize: '14px' }, children: symbol })] }), address && (jsx$2(Flex, { sx: { fontSize: '14px' }, children: tokenBalance === '0' ? ('0') : !tokenBalance && isLoading ? (jsx$2(Spinner, { size: 15 })) : (jsx$2(Fragment$1, { children: (_b = new BigNumber$1(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0')) === null || _b === void 0 ? void 0 : _b.toPrecision(5) })) }))] }));
 };
 
 const TokenSelectorModal = ({ bondPrincipalToken, bondEarnToken, handleCurrencySelect, chainId, onDismiss, }) => {
@@ -72219,6 +72193,7 @@ const useSoulZapTokenQuote = (typedValue, inputCurrency, outputToken, chainId, a
     const { data: response, isLoading, error, } = useQuery({
         queryKey: [QUERY_KEYS.ZAP_TOKEN_QUOTE, queryKey],
         queryFn: fetchZapDetails,
+        refetchInterval: 20000,
         enabled: !!queryKey,
         retry: 1,
     });
@@ -73390,7 +73365,7 @@ const AccordionText = ({ isVisible = false }) => {
 };
 
 const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
     const debouncedInput = useDebounce(typedValue, 400);
     const [slippage] = useSlippage();
     const principalToken = bond === null || bond === void 0 ? void 0 : bond.lpToken;
@@ -73484,9 +73459,10 @@ const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
         console.log((_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.result) === null || _c === void 0 ? void 0 : _c.data);
         return (_f = (_e = (_d = response.data) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.result) === null || _f === void 0 ? void 0 : _f.data;
     });
-    const { data: response, isLoading, error, } = useQuery({
+    const { data: response, isLoading, isFetching, error, } = useQuery({
         queryKey: [QUERY_KEYS.ZAP_TOKEN_QUOTE, queryKey],
         queryFn: fetchZapDetails,
+        refetchInterval: 60000, // i.e. 60 sec
         enabled: !!queryKey,
         retry: 1,
     });
@@ -73515,7 +73491,11 @@ const useSoulZapBondQuote = (typedValue, inputCurrency, bond, account) => {
     const isWrap = inputCurrency === 'NATIVE' &&
         ((_7 = (_6 = (_5 = bond === null || bond === void 0 ? void 0 : bond.lpToken) === null || _5 === void 0 ? void 0 : _5.address) === null || _6 === void 0 ? void 0 : _6[chainId]) === null || _7 === void 0 ? void 0 : _7.toLowerCase()) === ((_10 = (_9 = (_8 = WNATIVE[chainId]) === null || _8 === void 0 ? void 0 : _8.address) === null || _9 === void 0 ? void 0 : _9[chainId]) === null || _10 === void 0 ? void 0 : _10.toLowerCase());
     const estimatedDepositAmountToReturn = isWrap ? typedValue : estimatedDepositAmount.toString();
-    return [isLoading, response, estimatedDepositAmountToReturn, zapError];
+    const trueBondPrice = (_11 = response === null || response === void 0 ? void 0 : response.protocolQuote) === null || _11 === void 0 ? void 0 : _11.trueBondPrice;
+    const zapLoading = isLoading || isFetching;
+    if (zapLoading)
+        return [true, undefined, '', false, undefined];
+    return [zapLoading, response, estimatedDepositAmountToReturn, zapError, trueBondPrice];
 };
 
 const useSendReferenceId = () => {
@@ -73533,197 +73513,6 @@ const useSendReferenceId = () => {
     }), [config === null || config === void 0 ? void 0 : config.referenceId, apiV2URL]);
 };
 
-const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
-    var _a, _b;
-    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
-    const handleClose = () => {
-        if (typeof window !== 'undefined') {
-            window.history.pushState({}, '', `/bonds`);
-        }
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    };
-    const handleProjectViewNavigation = () => {
-        window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self');
-        track({
-            event: 'projectInfoClick',
-            chain: bondData.chainId,
-            data: {
-                cat: 'Modal',
-                bond: bondData.earnToken.symbol,
-                bondChain: bondData.chainId,
-            },
-        });
-    };
-    return (jsxs(Flex, { className: "modaltable-container title-container", children: [jsxs(Flex, { className: "title-container bondicon", children: [jsx$2("img", { src: "/images/bills/xmasHat.png", alt: "xmas-hat", className: "xmas-hat" }), jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId })] }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { className: "slipagge-close-icons", children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }));
-};
-
-const BondCards = ({ bondData }) => {
-    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.bonusWithFee) }, 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.bonusWithFee) < 0 ? '0%' : `${(_a = bondData === null || bondData === void 0 ? void 0 : bondData.bonusWithFee) === 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.bonusWithFee) < 0
-                            ? '0%'
-                            : `${((((_b = bondData === null || bondData === void 0 ? void 0 : bondData.bonusWithFee) !== 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, depositAmount, inputTokenPrice, isZap, fetchingZapQuote, zapError, }) => {
-    var _a, _b, _c, _d, _e;
-    const rawPayoutAmount = getRawPayoutAmount(bondData, depositAmount);
-    // Estimations
-    const rawEstimatedOutputUSD = rawPayoutAmount * 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 rawBonus = getRawBonus(bondData, depositAmount);
-    const bonusString = isZap ? (rawEstimatedOutputUSD - estimatedInputUSD).toString() : rawBonus;
-    const fee = getFeeAmount(bondData, depositAmount);
-    const feeUSD = fee * parseFloat((_b = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _b !== void 0 ? _b : '0');
-    const estimatedOutputAmount = getPayoutAmount(bondData, depositAmount);
-    const estimatedOutputUSD = estimatedOutputAmount * parseFloat((_c = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _c !== void 0 ? _c : '0');
-    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 ${getBonusColor(bonusString)}`, children: ["$ ", formatUSDNumber(bonusString)] }))] }), bondData.feeInPayout && (jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Fee:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Fee }), 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" }) }) })] }), jsxs(Flex, { className: `row-container premium-val`, children: ["$ ", formatUSDNumber(feeUSD.toString())] })] })), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime(((_d = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _d !== void 0 ? _d : 0) - ((_e = bondData.vestingCliff) !== null && _e !== void 0 ? _e : 0)).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutputAmount.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
-};
-
-// Custom HTML sanitizer
-function sanitizeHTML(html) {
-    var _a;
-    const tagWhitelist = ['a', 'br', 'span']; // Allowed tags
-    const attrWhitelist = ['target', 'rel', 'style', 'href']; // Allowed attributes
-    const doc = new DOMParser().parseFromString(html, 'text/html');
-    const elements = doc.body.querySelectorAll('*');
-    for (const el of elements) {
-        // Remove elements that are not in the whitelist
-        if (!tagWhitelist.includes(el.tagName.toLowerCase())) {
-            (_a = el === null || el === void 0 ? void 0 : el.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(el);
-            continue;
-        }
-        // Loop through the element's attributes and remove those that are not in the whitelist
-        Array.from(el.attributes).forEach((attr) => {
-            if (!attrWhitelist.includes(attr.name.toLowerCase())) {
-                el.removeAttribute(attr.name);
-            }
-        });
-    }
-    return doc.body.innerHTML;
-}
-const SafeHTMLComponent = ({ html }) => {
-    const sanitizedHTML = sanitizeHTML(html);
-    return jsx$2("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
-};
-
-const ProjectDescription = ({ description }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (jsxs(Flex, { className: "description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
-                            fontSize: ['12px', '12px', '12px', '14px'],
-                            mt: '10px',
-                            lineHeight: ['18px', '18px', '18px', '21px'],
-                            fontWeight: 400,
-                            overflow: 'hidden',
-                            maxHeight: isOpen ? 'unset' : '54px',
-                        }, children: description && jsx$2(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { sx: {
-                            color: 'primaryButton',
-                            fontSize: '12px',
-                            lineHeight: '18px',
-                            fontWeight: 400,
-                            cursor: 'pointer',
-                        }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(SafeHTMLComponent, { html: description !== null && description !== void 0 ? description : '' }) })] }));
-};
-
-const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
-    const handleClose = () => {
-        if (typeof window !== 'undefined') {
-            window.history.pushState({}, '', `/bonds`);
-        }
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    };
-    // const handleProjectViewNavigation = () => {
-    //   window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self')
-    //   track({
-    //     event: 'projectInfoClick',
-    //     chain: bondData.chainId,
-    //     data: {
-    //       cat: 'Modal',
-    //       bond: bondData.earnToken.symbol,
-    //       bondChain: bondData.chainId,
-    //     },
-    //   })
-    // }
-    return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bondData.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bondData === null || bondData === void 0 ? void 0 : bondData.projectLink, twitter: bondData === null || bondData === void 0 ? void 0 : bondData.twitter, audit: bondData === null || bondData === void 0 ? void 0 : bondData.audit, chain: bondData === null || bondData === void 0 ? void 0 : bondData.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" }) }) }), jsx$2(Flex, { sx: { pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
-};
-
-const ImageAndShortDescription = ({ bondData, onDismiss }) => {
-    var _a;
-    const SDKConfig = useSDKConfig();
-    // Swiper logic for the alt view
-    const [activeSlide, setActiveSlide] = useState(0);
-    const { swiper, setSwiper } = useSwiper();
-    const imagesLength = 3;
-    const handleSlide = (event) => {
-        const slideNumber = getDotPos(event.activeIndex, imagesLength);
-        setActiveSlide(slideNumber);
-    };
-    const slideTo = (index) => {
-        setActiveSlide(index);
-        swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
-    };
-    return (jsxs(Flex, { sx: { maxWidth: ['unset', 'unset', 'unset', '500px'], flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
-                    flexDirection: 'column',
-                    width: '100%',
-                    alignItems: 'center',
-                    overflow: 'hidden',
-                    position: 'relative',
-                }, children: [jsxs(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, lazy: true, preloadImages: false, onSlideChange: handleSlide, style: { width: '100%', overflow: 'visible' }, children: [jsx$2(SwiperSlide, { style: {
-                                    width: '100%',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 0), jsx$2(SwiperSlide, { style: {
-                                    width: '100%',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 1), jsx$2(SwiperSlide, { style: {
-                                    width: '100%',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 2)] }), jsx$2(Flex, { sx: { position: 'absolute', bottom: ['15px', '15px', '15px', '20px'], left: 'calc(50% - 28,5px)', zIndex: 2 }, children: [...Array(imagesLength)].map((_, i) => {
-                            return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
-                        }) })] }), jsxs(Flex, { sx: { alignItems: 'center', display: ['flex', 'flex', 'flex', 'none'], p: '10px', width: '100%' }, children: [jsxs(Flex, { sx: { width: ['50%', '50%', '50%', '100%'], alignItems: 'center' }, children: [jsx$2(Flex, { sx: { mr: '5px' }, children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 30, chain: bondData.chainId }) }), jsxs("h2", { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' '] })] }), jsx$2(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'flex-end', alignItems: 'center' }, children: jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }) }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsx$2(Flex, { className: "description-container paragraph-spaced", sx: { px: '10px', opacity: 0.7, mt: ['0', '0', '0', '10px'] }, children: jsx$2(ProjectDescription, { description: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }) })] }));
-};
-
-// Fetch country code to check if the region is allowed
-const fetchLocation = (apiv2URL) => __awaiter$9(void 0, void 0, void 0, function* () {
-    const resp = yield axios.get(`${apiv2URL}/check`);
-    const { isRestrictedRegion, countryCode } = resp === null || resp === void 0 ? void 0 : resp.data;
-    return { isRestrictedRegion, countryCode };
-});
-function useGeoFencing() {
-    const apiv2URL = useURLByEnvironment('apiV2');
-    return useQuery({
-        queryKey: [QUERY_KEYS.GEO_FENCING],
-        queryFn: () => fetchLocation(apiv2URL),
-        staleTime: Infinity,
-        refetchOnMount: false,
-        refetchOnWindowFocus: false,
-    });
-}
-
-const RestrictedRegionModal = ({ onDismiss }) => {
-    const { data: geoData } = useGeoFencing();
-    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" })] })] })));
-};
-
 var lensContractABI = [
 	{
 		inputs: [
@@ -74130,11 +73919,196 @@ function useGetUserEscrowWeight(account) {
     });
 }
 
-const TagXmasFlashBond = ({ userTier, minTier }) => {
+const BondModalMinTierHeader = ({ minTier }) => {
+    return (jsx$2(Fragment$1, { children: minTier !== null && minTier !== undefined && (jsx$2(Flex, { sx: {
+                justifyContent: 'start',
+                alignItems: 'center',
+                flexDirection: 'row-reverse',
+                width: ['100%', '100%', '100%', 'auto', 'auto'],
+            }, children: Object.values(TIERS_NAMES).map((tier, index) => {
+                if (index >= minTier) {
+                    return (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: tier }), width: "100px", placement: "bottomLeft", transformTip: "translate(1%, -5%)", children: jsx$2("img", { src: `/images/launch/${tier.toLowerCase()}.png`, alt: "minTier", style: { width: '30px', height: '30px', marginLeft: '3px', zIndex: 1 } }, `tier-logo-${index}`) }, tier));
+                }
+            }) })) }));
+};
+
+const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, }) => {
+    var _a, _b;
+    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
+    const minTier = bondData.minTier !== undefined ? bondData.minTier : null;
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `/bonds`);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    const handleProjectViewNavigation = () => {
+        window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self');
+        track({
+            event: 'projectInfoClick',
+            chain: bondData.chainId,
+            data: {
+                cat: 'Modal',
+                bond: bondData.earnToken.symbol,
+                bondChain: bondData.chainId,
+            },
+        });
+    };
+    return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { className: "slipagge-close-icon", sx: { width: '100%', height: '30px', mb: ['10px', '10px', '10px', '0px'], mt: '-10px' }, children: [jsx$2(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none', 'none'] }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) }), jsx$2(Flex, { sx: { flexDirection: 'column', position: 'absolute', right: '0px' }, children: onDismiss ? (jsxs(Fragment$1, { children: [showProjectInfoButton && jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose }), jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })] })) : (jsx$2(Flex, { sx: { py: '3px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) })] }), jsxs(Flex, { sx: { width: '100%' }, children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 50, chain: bondData.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, jsx$2(ListTag, { text: (_b = bondData === null || bondData === void 0 ? void 0 : bondData.tags) === null || _b === void 0 ? void 0 : _b[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', paddingLeft: '20px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bondData)] })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex', 'flex'], ml: '10px' }, children: jsx$2(BondModalMinTierHeader, { minTier: minTier }) })] })] }));
+};
+
+const BondCards = ({ bondData }) => {
+    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.bonusWithFee) }, 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.bonusWithFee) < 0 ? '0%' : `${(_a = bondData === null || bondData === void 0 ? void 0 : bondData.bonusWithFee) === 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.bonusWithFee) < 0
+                            ? '0%'
+                            : `${((((_b = bondData === null || bondData === void 0 ? void 0 : bondData.bonusWithFee) !== 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 = ({ depositAmount, bondData, youSpendString, isZap, fetchingZapQuote, zapError, }) => {
+    var _a, _b, _c, _d;
+    // Estimations
+    const bonusString = getRawBonus(bondData, depositAmount);
+    const fee = getFeeAmount(bondData, depositAmount);
+    const feeUSD = fee * parseFloat((_a = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
+    const estimatedOutputAmount = getPayoutAmount(bondData, depositAmount);
+    const estimatedOutputUSD = estimatedOutputAmount * parseFloat((_b = bondData === null || bondData === void 0 ? void 0 : bondData.payoutTokenPrice) !== null && _b !== void 0 ? _b : '0');
+    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:" }), jsx$2(Flex, { className: "row-container spend-val", children: youSpendString })] }), 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 ${getBonusColor(bonusString)}`, children: ["$ ", formatUSDNumber(bonusString)] }))] }), bondData.feeInPayout && (jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: ["Fee:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Fee }), 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" }) }) })] }), jsxs(Flex, { className: `row-container premium-val`, children: ["$ ", formatUSDNumber(feeUSD.toString())] })] })), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container get", children: ["You Get (over ", vestingTime(((_c = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _c !== void 0 ? _c : 0) - ((_d = bondData.vestingCliff) !== null && _d !== void 0 ? _d : 0)).days, " days):"] }), isZap && fetchingZapQuote ? (jsx$2(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", children: [formatNumber$2(estimatedOutputAmount.toString()), " ", bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, " = $", ' ', formatUSDNumber(estimatedOutputUSD.toString())] }))] })] }));
+};
+
+// Custom HTML sanitizer
+function sanitizeHTML(html) {
+    var _a;
+    const tagWhitelist = ['a', 'br', 'span']; // Allowed tags
+    const attrWhitelist = ['target', 'rel', 'style', 'href']; // Allowed attributes
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const elements = doc.body.querySelectorAll('*');
+    for (const el of elements) {
+        // Remove elements that are not in the whitelist
+        if (!tagWhitelist.includes(el.tagName.toLowerCase())) {
+            (_a = el === null || el === void 0 ? void 0 : el.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(el);
+            continue;
+        }
+        // Loop through the element's attributes and remove those that are not in the whitelist
+        Array.from(el.attributes).forEach((attr) => {
+            if (!attrWhitelist.includes(attr.name.toLowerCase())) {
+                el.removeAttribute(attr.name);
+            }
+        });
+    }
+    return doc.body.innerHTML;
+}
+const SafeHTMLComponent = ({ html }) => {
+    const sanitizedHTML = sanitizeHTML(html);
+    return jsx$2("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
+};
+
+const ProjectDescription = ({ description }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (jsxs(Flex, { className: "description-container", children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx$2(Text, { sx: {
+                            fontSize: ['12px', '12px', '12px', '14px'],
+                            mt: '10px',
+                            lineHeight: ['18px', '18px', '18px', '21px'],
+                            fontWeight: 400,
+                            overflow: 'hidden',
+                            maxHeight: isOpen ? 'unset' : '54px',
+                        }, children: description && jsx$2(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { sx: {
+                            color: 'primaryButton',
+                            fontSize: '12px',
+                            lineHeight: '18px',
+                            fontWeight: 400,
+                            cursor: 'pointer',
+                        }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx$2(SafeHTMLComponent, { html: description !== null && description !== void 0 ? description : '' }) })] }));
+};
+
+const BondModalHeaderAlt = ({ bondData, onDismiss, showProjectInfoButton, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const [onOpenSlippageModal] = useModal(jsx$2(SlippageModal, {}));
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `/bonds`);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    // const handleProjectViewNavigation = () => {
+    //   window.open(`${window.location.origin}/bonds/${bondData.billAddress}/${bondData.chainId}`, '_self')
+    //   track({
+    //     event: 'projectInfoClick',
+    //     chain: bondData.chainId,
+    //     data: {
+    //       cat: 'Modal',
+    //       bond: bondData.earnToken.symbol,
+    //       bondChain: bondData.chainId,
+    //     },
+    //   })
+    // }
+    return (jsx$2(Flex, { className: "modaltable-container title-container", children: jsx$2(Flex, { className: "slipagge-close-icons", sx: { flexDirection: 'row' }, children: onDismiss ? (jsxs(Fragment$1, { children: [jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bondData === null || bondData === void 0 ? void 0 : bondData.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bondData.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bondData === null || bondData === void 0 ? void 0 : bondData.projectLink, twitter: bondData === null || bondData === void 0 ? void 0 : bondData.twitter, audit: bondData === null || bondData === void 0 ? void 0 : bondData.audit, chain: bondData === null || bondData === void 0 ? void 0 : bondData.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" }) }) }), jsx$2(Flex, { sx: { pr: '10px' }, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) }), jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: handleClose })] })) : (jsx$2(Flex, { sx: {}, onClick: onOpenSlippageModal, children: jsx$2(Svg, { icon: "cog", width: "16px" }) })) }) }));
+};
+
+const ImageAndShortDescription = ({ bondData, onDismiss }) => {
+    var _a;
+    const SDKConfig = useSDKConfig();
+    // Swiper logic for the alt view
+    const [activeSlide, setActiveSlide] = useState(0);
+    const { swiper, setSwiper } = useSwiper();
+    const imagesLength = 3;
+    const handleSlide = (event) => {
+        const slideNumber = getDotPos(event.activeIndex, imagesLength);
+        setActiveSlide(slideNumber);
+    };
+    const slideTo = (index) => {
+        setActiveSlide(index);
+        swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
+    };
+    return (jsxs(Flex, { sx: { maxWidth: ['unset', 'unset', 'unset', '500px'], flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
+                    flexDirection: 'column',
+                    width: '100%',
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, children: [jsxs(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, lazy: true, preloadImages: false, onSlideChange: handleSlide, style: { width: '100%', overflow: 'visible' }, children: [jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 0), jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 1), jsx$2(SwiperSlide, { style: {
+                                    width: '100%',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                }, children: jsx$2("img", { className: "project-image", src: "https://placehold.co/400x200" }) }, 2)] }), jsx$2(Flex, { sx: { position: 'absolute', bottom: ['15px', '15px', '15px', '20px'], left: 'calc(50% - 28,5px)', zIndex: 2 }, children: [...Array(imagesLength)].map((_, i) => {
+                            return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
+                        }) })] }), jsxs(Flex, { sx: { alignItems: 'center', display: ['flex', 'flex', 'flex', 'none'], p: '10px', width: '100%' }, children: [jsxs(Flex, { sx: { width: ['50%', '50%', '50%', '100%'], alignItems: 'center' }, children: [jsx$2(Flex, { sx: { mr: '5px' }, children: jsx$2(TokenImage, { symbol: (_a = bondData.showcaseTokenName) !== null && _a !== void 0 ? _a : bondData.earnToken.symbol, size: 30, chain: bondData.chainId }) }), jsxs("h2", { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName, ' '] })] }), jsx$2(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'flex-end', alignItems: 'center' }, children: jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }) }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsx$2(Flex, { className: "description-container paragraph-spaced", sx: { px: '10px', opacity: 0.7, mt: ['0', '0', '0', '10px'] }, children: jsx$2(ProjectDescription, { description: bondData === null || bondData === void 0 ? void 0 : bondData.shortDescription }) })] }));
+};
+
+// Fetch country code to check if the region is allowed
+const fetchLocation = (apiv2URL) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const resp = yield axios.get(`${apiv2URL}/check`);
+    const { isRestrictedRegion, countryCode } = resp === null || resp === void 0 ? void 0 : resp.data;
+    return { isRestrictedRegion, countryCode };
+});
+function useGeoFencing() {
+    const apiv2URL = useURLByEnvironment('apiV2');
+    return useQuery({
+        queryKey: [QUERY_KEYS.GEO_FENCING],
+        queryFn: () => fetchLocation(apiv2URL),
+        staleTime: Infinity,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+    });
+}
+
+const RestrictedRegionModal = ({ onDismiss }) => {
+    const { data: geoData } = useGeoFencing();
+    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 TagMinTierBond = ({ userTier, minTier }) => {
     return (jsxs(Flex, { sx: {
             p: '5px 10px',
             width: '100%',
-            background: '#DF4141',
+            background: '#DE62F366',
             borderRadius: 'normal',
             mt: '10px',
             fontSize: '12px',
@@ -74142,11 +74116,56 @@ const TagXmasFlashBond = ({ userTier, minTier }) => {
             justifyContent: 'center',
             textAlign: 'center',
             display: 'block',
-        }, children: ["This is a special ", jsx$2("span", { style: { fontWeight: 700 }, children: "Christmas Flash Bond." }), !userTier || (minTier !== undefined && userTier < minTier) ? (jsxs(Fragment$1, { children: [' ', "You need to achieve", ' ', jsxs("span", { style: { fontWeight: 700 }, children: [TIERS_NAMES[minTier], " Ape Tier"] }), " to be elegible!"] })) : (jsxs(Fragment$1, { children: [' ', "You are eligible to buy it thanks to your", ' ', jsxs("span", { style: { fontWeight: 700 }, children: [TIERS_NAMES[userTier], " Ape Tier!"] }), ' '] }))] }));
+        }, children: ["To be eligible to purchase this bond you need to get a", jsxs("span", { style: { fontWeight: 700 }, children: [` ${TIERS_NAMES[minTier]}`, " Tier or better!"] })] }));
+};
+
+const NewRateModal = ({ bond, zapTrueBondPrice, depositAmount, youSpendString, isZap, fetchingZapQuote, zapError, handleZap, onDismiss, }) => {
+    var _a, _b, _c, _d, _e;
+    const tokenSymbol = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.symbol;
+    const oldBonus = (_b = bond === null || bond === void 0 ? void 0 : bond.bonusWithFee) !== null && _b !== void 0 ? _b : 0;
+    const fee = (_c = bond === null || bond === void 0 ? void 0 : bond.feeInPayout) !== null && _c !== void 0 ? _c : 0;
+    const earnTokenPrice = parseFloat((_d = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _d !== void 0 ? _d : '0');
+    const lpPrice = parseFloat((_e = bond === null || bond === void 0 ? void 0 : bond.principalTokenPrice) !== null && _e !== void 0 ? _e : '0');
+    const trueBillPriceMinusFee = new BigNumber$1(zapTrueBondPrice !== null && zapTrueBondPrice !== void 0 ? zapTrueBondPrice : '0').times((100 + fee) / 100);
+    const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice;
+    const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100;
+    const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0;
+    return (jsx$2(Modal, { title: "Bonus update", sx: { width: '380px' }, children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', flexDirection: 'column', mt: '10px' }, children: [jsxs(Flex, { sx: { display: 'block', fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }, children: ["The bonus for the bond you are purchasing has been adjusted by", ' ', jsxs(Text, { sx: { color: 'error' }, children: [(zapBonusWithFee - oldBonus).toFixed(2), "%"] }), "."] }), jsxs(Flex, { sx: {
+                        p: '8px 4px 4px 4px',
+                        borderRadius: '8px',
+                        width: '100%',
+                        alignItems: 'center',
+                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '10px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', fontWeight: '300', lineHeight: '14px' }, children: "Old Bonus:" }), jsxs(Text, { sx: { fontSize: '12px', fontWeight: 400 }, children: [oldBonus === null || oldBonus === void 0 ? void 0 : oldBonus.toFixed(2), "% ", tokenSymbol] })] })] }), jsx$2(Flex, { sx: { width: '15px', height: '15px', ml: '20px', mr: '10px', alignItems: 'center' }, children: jsx$2(Svg, { icon: "arrow", direction: "right" }) }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '10px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', fontWeight: '300', lineHeight: '14px' }, children: "New Bonus:" }), jsxs(Text, { sx: { fontSize: '12px', fontWeight: 400 }, children: [zapBonusWithFee.toFixed(2), "% ", tokenSymbol] })] })] })] }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: Object.assign(Object.assign({}, bond), { trueBillPrice: zapTrueBondPrice }), youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(Flex, { sx: {
+                        width: '100%',
+                        fontSize: '14px',
+                        fontWeight: 500,
+                        color: 'textDisabledButton',
+                        justifyContent: 'flex-start',
+                        mb: '10px',
+                    }, children: "Would you like to confirm the new rate?" }), jsx$2(Button, { fullWidth: true, onClick: () => {
+                        handleZap();
+                        onDismiss && onDismiss();
+                    }, disabled: fetchingZapQuote, load: fetchingZapQuote, children: fetchingZapQuote ? 'Loading' : 'Buy' })] }) }));
+};
+
+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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const SDKConfig = useSDKConfig();
     const { data: geoData } = useGeoFencing();
     // State
@@ -74163,19 +74182,21 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
     const { data: userEscrowWeight } = useGetUserEscrowWeight(account);
     const userTier = getUserTier(userEscrowWeight !== null && userEscrowWeight !== void 0 ? userEscrowWeight : '0');
     // State
-    const bondData = useMemo(() => bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); }), [bondAddress]);
-    const isXmasStyle = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) ? bondData.minTier : null;
+    const bondData = bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
+    const minTier = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined ? bondData.minTier : null;
     const [buyTxHash, setBuyTxHash] = useState();
     const [inputValue, setInputValue] = useState('');
-    const [inputTokenString, setInputTokenString] = useState((_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData.chainId]) !== null && _c !== void 0 ? _c : 'NATIVE');
+    const [inputTokenString, setInputTokenString] = useState((_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData.chainId]);
     // Data
     const inputToken = useTokenFromZapList(inputTokenString, bondData === null || bondData === void 0 ? void 0 : bondData.chainId, bondData === null || bondData === void 0 ? void 0 : bondData.lpToken);
-    const isZap = (inputTokenString === null || inputTokenString === void 0 ? void 0 : inputTokenString.toLowerCase()) !== ((_f = (_e = (_d = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _d === void 0 ? void 0 : _d.address) === null || _e === void 0 ? void 0 : _e[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _f === void 0 ? void 0 : _f.toLowerCase());
-    const [fetchingZapQuote, zapData, zapDepositAmount, zapError] = useSoulZapBondQuote(inputValue, inputToken, bondData, account);
+    const isZap = (inputTokenString === null || inputTokenString === void 0 ? void 0 : inputTokenString.toLowerCase()) !== ((_e = (_d = (_c = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _e === void 0 ? void 0 : _e.toLowerCase());
+    const [fetchingZapQuote, zapData, zapDepositAmount, zapError, zapTrueBondPrice] = useSoulZapBondQuote(inputValue, inputToken, bondData, account);
     const inputTokenPrice = useCurrencyPrice(inputToken !== null && inputToken !== void 0 ? inputToken : null, bondChain);
-    const { data: inputCurrencyBalance } = useCurrencyBalance(inputToken !== null && inputToken !== void 0 ? inputToken : null, account !== null && account !== void 0 ? account : null, (_g = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _g !== void 0 ? _g : null);
+    const { data: inputCurrencyBalance } = useCurrencyBalance(inputToken !== null && inputToken !== void 0 ? inputToken : null, account !== null && account !== void 0 ? account : null, (_f = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _f !== void 0 ? _f : null);
     // Estimations
     const depositAmount = isZap ? zapDepositAmount : inputValue;
+    const youSpendString = `${formatNumber$2(inputValue)} ${getSymbol(inputToken, bondData === null || bondData === void 0 ? void 0 : bondData.chainId)} = 
+                  $${formatUSDNumber((parseFloat(inputValue) * ((_g = inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price) !== null && _g !== void 0 ? _g : 0)).toString())}`;
     // Loading State
     const [loadingTx, setLoadingTx] = useState(false);
     const { addToastError } = usePopups();
@@ -74325,6 +74346,8 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
         '0x94A283756B70c2A77bc58Ae0E2615Caf14310186'.toLowerCase(),
         '0x6639D4acAe77967c253C75cBfEd7C612682E2704'.toLowerCase(),
     ];
+    const rateChanged = parseFloat(zapTrueBondPrice !== null && zapTrueBondPrice !== void 0 ? zapTrueBondPrice : '0') > parseFloat((_k = bondData === null || bondData === void 0 ? void 0 : bondData.trueBillPrice) !== null && _k !== void 0 ? _k : '0');
+    const [openNewRateModal] = useModal(jsx$2(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError, handleZap: () => handleZapCallback().finally(() => setLoadingTx(false)) }), true, false);
     const handleBothPurchases = () => {
         var _a, _b;
         if ((geoData === null || geoData === void 0 ? void 0 : geoData.countryCode) === 'AE' && blockedBondsForAE.includes((_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '')) {
@@ -74333,7 +74356,12 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
         else {
             setLoadingTx(true);
             if (isZap) {
-                handleZapCallback().finally(() => setLoadingTx(false));
+                if (rateChanged) {
+                    openNewRateModal();
+                }
+                else {
+                    handleZapCallback().finally(() => setLoadingTx(false));
+                }
             }
             else {
                 handleBuyCallback().finally(() => setLoadingTx(false));
@@ -74362,7 +74390,20 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
             window.open(`https://ape.bond/swap?outputcurrency=${bondData === null || bondData === void 0 ? void 0 : bondData.lpToken.address[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]}&outputChain=${bondData === null || bondData === void 0 ? void 0 : bondData.chainId}`, '_blank');
         }
     };
-    return (jsx$2(Modal, { className: `modal ${isXmasStyle ? 'xmas-style' : ''}`, onDismiss: onDismiss, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"standard\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: bondData }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, depositAmount: depositAmount, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, inputDisabled: isXmasStyle && bondData.minTier && (!userTier || userTier < bondData.minTier) ? true : false }), bondData.type === 'staking' && (jsxs(Flex, { sx: {
+    // Effects
+    const [hasChecked, setHasChecked] = useState(false);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (inputCurrencyBalance !== 'undefined' &&
+            inputCurrencyBalance === '0' &&
+            (inputTokenString === null || inputTokenString === void 0 ? void 0 : inputTokenString.toLowerCase()) === ((_c = (_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.lpToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bondData === null || bondData === void 0 ? void 0 : bondData.chainId]) === null || _c === void 0 ? void 0 : _c.toLowerCase()) &&
+            !hasChecked) {
+            setHasChecked(true);
+            setInputTokenString('NATIVE');
+            console.log('change to native');
+        }
+    }, [inputCurrencyBalance]);
+    return (jsx$2(Modal, { className: "modal", onDismiss: onDismiss, sx: { width: '400px' }, children: modalVariant === 'standard' ? (jsx$2(Fragment$1, { children: bondData && (jsxs(Flex, { className: "modal-content", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white', fontSize: '14px', mb: '10px' }, children: ["Dev mode - Current view: \"standard\"", jsx$2(Text, { onClick: () => setModalVariant('alt'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", children: [jsx$2(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(BondCards, { bondData: bondData }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, inputDisabled: minTier !== null && (!userTier || userTier < minTier) ? true : false }), bondData.type === 'staking' && (jsxs(Flex, { sx: {
                                     p: '5px 10px',
                                     width: '100%',
                                     background: '#8E568F',
@@ -74372,8 +74413,7 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
                                     fontWeight: 400,
                                     justifyContent: 'center',
                                     display: 'block',
-                                }, children: ["Tokens bought through this bond will go directly to the", ' ', jsx$2("span", { onClick: () => window.open('https://basepad.finance/earn', '_blank'), style: { textDecoration: 'underline', cursor: 'pointer', color: 'blue' }, children: "$BPAD staking pool" }), ' ', "with a ", daysLeftOnBasepadPool(), " days lock."] })), isXmasStyle && (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined && (jsx$2(TagXmasFlashBond, { userTier: userTier, minTier: bondData.minTier })), jsxs(Flex, { className: "modaltable-container button-container", children: [account &&
-                                        (!isXmasStyle || (isXmasStyle && bondData.minTier && userTier && userTier >= bondData.minTier)) && (jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : isXmasStyle && bondData.minTier && (!userTier || userTier < bondData.minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
+                                }, children: ["Tokens bought through this bond will go directly to the", ' ', jsx$2("span", { onClick: () => window.open('https://basepad.finance/earn', '_blank'), style: { textDecoration: 'underline', cursor: 'pointer', color: 'blue' }, children: "$BPAD staking pool" }), ' ', "with a ", daysLeftOnBasepadPool(), " days lock."] })), minTier !== null && jsx$2(TagMinTierBond, { userTier: userTier, minTier: minTier }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (minTier === null || (minTier !== null && userTier !== null && userTier >= minTier)) && (jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", fullWidth: true, children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : minTier !== null && (!userTier || userTier < minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "action-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                 event.stopPropagation();
                                                 switchChain({ chainId: bondData.chainId });
                                             }, style: { fontSize: '14px', padding: '6px', marginLeft: '0px' }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsx$2(Button, { className: "action-button", load: load || fetchingZapQuote, disabled: load ||
@@ -74386,8 +74426,8 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
                                                 (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) ||
                                                 !account ||
                                                 !inputValue ||
-                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "modal-content font-small", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: ['0px', '0px', '0px', '20px'] }, children: [jsx$2(ImageAndShortDescription, { bondData: bondData, onDismiss: onDismiss }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center', display: ['none', 'none', 'none', 'flex'] }, children: [jsx$2(Flex, { sx: { width: ['50%', '50%', '50%', '50%'], ml: ['0px', '0px', '0px', '10px'] }, children: jsxs(Flex, { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [jsx$2(Flex, { sx: { fontSize: '26px', fontWeight: 700, mr: '4px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsx$2(Svg, { width: 20, height: 20, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _k !== void 0 ? _k : 'question' })] }) }), jsxs(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: (_l = bondData.showcaseTokenName) !== null && _l !== void 0 ? _l : bondData.earnToken.symbol, size: 30 }), jsx$2("span", { className: "modal-marketprice-token", children: bondData.earnToken.symbol }), jsx$2("hr", { className: "fading-hr rotate-hr" }), jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }), jsx$2("hr", { className: "fading-hr rotate-hr" })] }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px', mx: '10px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: (value) => setInputValue(value), handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, modalVariant: modalVariant }), jsxs(Flex, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center', fontSize: '14px' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: [jsx$2(Flex, { sx: { opacity: 0.8 }, children: "You will receive:" }), jsxs(Flex, { children: [jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 20 }) }), jsxs(Flex, { className: "modal-receive-text", sx: { opacity: 0.8 }, children: [formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol, " + \u00A0", formatNumber$2((getRawPayoutAmount(bondData, inputValue) -
-                                                                                        lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0))] }), jsx$2("span", { className: "text-highlight", children: "\u00A0Additional" })] })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button button-narrow", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
+                                                parseFloat(inputValue) === 0, onClick: handleApprove, children: "enable" })) })] })] })] })) })) : (jsx$2(Fragment$1, { children: bondData && (jsxs(Fragment$1, { children: [jsxs(Flex, { className: "modal-content font-small", children: [typeof window !== 'undefined' && window.location.origin === 'http://localhost:5173' && (jsxs(Text, { sx: { borderBottom: '1px solid white' }, children: ["Dev Mode - Current view: \"alt\"", jsx$2(Text, { onClick: () => setModalVariant('standard'), sx: { ml: '15px', textDecoration: 'underline', cursor: 'pointer' }, children: "Switch view" })] })), jsxs(Flex, { className: "modaltable-container", sx: { flexDirection: 'row', gap: ['0px', '0px', '0px', '20px'] }, children: [jsx$2(ImageAndShortDescription, { bondData: bondData, onDismiss: onDismiss }), jsxs(Flex, { sx: { flexDirection: 'column', width: '600px' }, children: [jsxs(Flex, { sx: { alignItems: 'center', display: ['none', 'none', 'none', 'flex'] }, children: [jsx$2(Flex, { sx: { width: ['50%', '50%', '50%', '50%'], ml: ['0px', '0px', '0px', '10px'] }, children: jsxs(Flex, { className: "modal-tokenname-chainicon", sx: { margin: '0px' }, children: [jsx$2(Flex, { sx: { fontSize: '26px', fontWeight: 700, mr: '4px' }, children: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), jsx$2(Svg, { width: 20, height: 20, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bondData.chainId]) !== null && _l !== void 0 ? _l : 'question' })] }) }), jsxs(Flex, { className: "modal-marketprice-header", sx: { justifyContent: 'space-between', width: '100%', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: (_m = bondData.showcaseTokenName) !== null && _m !== void 0 ? _m : bondData.earnToken.symbol, size: 30 }), jsx$2("span", { className: "modal-marketprice-token", children: bondData.earnToken.symbol }), jsx$2("hr", { className: "fading-hr rotate-hr" }), jsxs("span", { className: "modal-marketprice", children: ["Market Price: $", earnTokenPrice(bondData)] }), jsx$2("hr", { className: "fading-hr rotate-hr" })] }), jsx$2(Flex, { className: "bondmodal-header-alt", sx: { mb: '10px' }, children: jsx$2(BondModalHeaderAlt, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.referenceId) === 'apebond' }) })] }), jsxs(Flex, { sx: { flexDirection: 'column', marginTop: '20px', mx: '10px' }, children: [jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: (value) => setInputValue(value), handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: true, bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, modalVariant: modalVariant }), jsxs(Flex, { className: "modal-youreceive-row", sx: { justifyContent: 'space-between', alignItems: 'center', fontSize: '14px' }, children: [jsxs(Flex, { className: "modal-youreceive-textbox", children: [jsx$2(Flex, { sx: { opacity: 0.8 }, children: "You will receive:" }), jsxs(Flex, { children: [jsx$2(Flex, { className: "modal-youreceive-tokenimage", sx: { marginLeft: '15px', marginRight: '5px' }, children: jsx$2(TokenImage, { symbol: (_o = bondData.showcaseTokenName) !== null && _o !== void 0 ? _o : bondData.earnToken.symbol, size: 20 }) }), jsxs(Flex, { className: "modal-receive-text", sx: { opacity: 0.8 }, children: [formatNumber$2((lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0)), ' ', bondData.earnToken.symbol, " + \u00A0", formatNumber$2((getRawPayoutAmount(bondData, inputValue) -
+                                                                                        lodashExports.toNumber(inputValue) / lodashExports.toNumber(earnTokenPrice(bondData))).toFixed(0))] }), jsx$2("span", { className: "text-highlight", children: "\u00A0Additional" })] })] }), jsx$2(Flex, { className: "button-container buy", sx: { justifyContent: 'end' }, children: !account ? (jsx$2(ConnectButton, {})) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "action-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                                         event.stopPropagation();
                                                                         switchChain({ chainId: bondData.chainId });
                                                                     }, children: `Switch Chain` })) : approvalState === ApprovalState.APPROVED ? (jsxs(Button, { className: "action-button", load: load, disabled: load || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut) || !account || !inputValue || parseFloat(inputValue) === 0, onClick: handleBothPurchases, children: ["buy", ' ', isZap ? (jsx$2("span", { style: { marginLeft: '8px' }, children: jsx$2(Svg, { icon: "ZapIcon" }) })) : ('')] })) : (jsx$2(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING, disabled: approvalState === ApprovalState.PENDING ||
@@ -74407,7 +74447,7 @@ const BondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond }) =
                                                     width: '100%',
                                                     justifyContent: 'center',
                                                     flexDirection: ['column', 'column', 'column', 'row'],
-                                                }, children: [jsx$2(Flex, { className: "modal-footer-header", sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: "Vesting end Date:\u00A0" }), jsxs(Flex, { sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: [' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_o = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _o !== void 0 ? _o : 0).days * 86400000))] })] })] }), jsx$2("hr", { className: "fading-hr hide-mobile" }), jsxs(Flex, { sx: {
+                                                }, children: [jsx$2(Flex, { className: "modal-footer-header", sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: "Vesting end Date:\u00A0" }), jsxs(Flex, { sx: { justifyContent: ['flex-end', 'flex-end', 'flex-end', 'flex-start'] }, children: [' ', new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).format(new Date(Date.now() + vestingTime((_p = bondData === null || bondData === void 0 ? void 0 : bondData.vestingTerm) !== null && _p !== void 0 ? _p : 0).days * 86400000))] })] })] }), jsx$2("hr", { className: "fading-hr hide-mobile" }), jsxs(Flex, { sx: {
                                             width: '100%',
                                             justifyContent: ['space-between', 'space-between', 'space-between', 'space-around'],
                                         }, children: [jsxs(Flex, { sx: { justifyContent: 'center', flexDirection: ['column', 'column', 'column', 'row'] }, children: [jsx$2(Flex, { className: "modal-footer-header", children: "Vesting type:\u00A0" }), " ", jsx$2(Flex, { children: " Linear" })] }), jsxs(Flex, { sx: {
@@ -74602,6 +74642,10 @@ const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement
 };
 var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
+const MinTierRow = ({ minTier }) => {
+    return (jsx$2(Fragment$1, { children: minTier !== null && minTier != undefined && (jsx$2(Flex, { children: jsxs(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { sx: { textAlign: 'center' }, children: ["You need a ", TIERS_NAMES[minTier], " Ape Tier or better in order to buy this Bond."] }), width: "200px", placement: "bottomLeft", transformTip: "translate(1%, 0%)", children: [jsx$2("img", { src: `/images/launch/${TIERS_NAMES[minTier].toLowerCase()}.png`, alt: "minTier", style: { width: '30px', height: '30px', marginLeft: '10px', zIndex: 1 } }), minTier < 4 && (jsx$2("img", { src: `/images/launch/iconPlus.png`, alt: "minTier", style: { width: '30px', height: '30px', marginLeft: '-11px', zIndex: 0 } }))] }) })) }));
+};
+
 const BondRow = ({ bond }) => {
     var _a, _b, _c, _d, _e;
     const locationPath = window.location.pathname.replace('/', '');
@@ -74611,7 +74655,7 @@ const BondRow = ({ bond }) => {
             ? bond.contractAddress[bond.chainId]
             : undefined;
     const bonus = 'bonus' in bond ? bond.bonusWithFee : undefined;
-    const isXmasStyle = 'minTier' in bond ? bond.minTier : null;
+    const minTier = bond.minTier !== undefined ? bond.minTier : null;
     // Modal
     const [openBuyModal] = useModal(jsx$2(ModalHandler, { bondAddress: billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${billAddress}-${bond.chainId}`);
     const handleOpenModal = () => {
@@ -74649,7 +74693,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)) : ('-') }), 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: {
+    return (jsxs("div", { className: `bond-row`, onClick: handleOpenModal, children: [jsx$2("div", { className: "token-info-container", sx: { width: ['45%', '45%', '33%', '30%'] }, children: jsx$2(TokenInfoAndName, { bill: bond }) }), jsx$2("div", { className: "min-tiers-container", sx: { width: ['20%', '20%', '17%', '10%'] }, children: jsx$2(MinTierRow, { minTier: minTier }) }), jsxs("div", { className: "bond-info-columns", sx: { width: ['33%', '33%', '60%', '60%'] }, 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',
@@ -74769,16 +74813,12 @@ const BondRowsWithTitle = ({ chain, bonds, hideTitles, showHotBonds }) => {
                         }), showHotBonds && (jsx$2(SwiperProvider, { children: jsx$2(HotBondCards, {}) }))] }, key))] }) }, key));
 };
 
-const BondRowsByChain = ({ bonds, hideTitles, isCampaign = false }) => {
+const BondRowsByChain = ({ bonds, hideTitles }) => {
     var _a;
     const SDKConfig = useSDKConfig();
     const validatedChains = (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.filter((chain) => MAINNET_CHAINS.includes(chain));
     return (jsx$2(Flex$1, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
-            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: hideTitles
-                    ? false
-                    : !isCampaign && SDKConfig.useHotBonds
-                        ? chain === types.ChainId.BASE || chain === types.ChainId.MAINNET
-                        : false }, chain));
+            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: hideTitles ? false : SDKConfig.useHotBonds ? chain === types.ChainId.BASE || chain === types.ChainId.MAINNET : false }, chain));
         }) }));
 };
 
@@ -74974,31 +75014,9 @@ const Bonds = () => {
     const topTags = useTopTags(sortedBonds);
     // remove favorites for seedify
     const filterOptions = SDKConfig.referenceId !== 'seedify' ? ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'] : ['ALL', ...topTags, 'SOLD OUT'];
-    let campaign = 'noCampaign';
-    if (typeof window !== 'undefined' &&
-        (window.location.host.includes('ape.bond') ||
-            window.location.host.includes('apebond') ||
-            window.location.host.includes('localhost'))) {
-        if (window.location.pathname.includes('christmas-sale'))
-            campaign = 'xmas';
-        if (window.location.pathname.includes('bonds'))
-            campaign = 'combined';
-    }
     const billsToRender = useMemo(() => {
         let billsToReturn = filterOption === 'SOLD OUT' ? (allBonds !== null && allBonds !== void 0 ? allBonds : []) : (sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : []);
         billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => isBondSupported(SDKConfig.highestCompatibleVersion, bill.version));
-        if (campaign === undefined || campaign === 'noCampaign') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
-                const isXmasStyle = 'minTier' in bill ? bill.minTier : null;
-                return !isXmasStyle;
-            });
-        }
-        if (campaign === 'xmas') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
-                const isXmasStyle = 'minTier' in bill ? bill.minTier : null;
-                return isXmasStyle;
-            });
-        }
         if (searchQuery) {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
                 var _a, _b;
@@ -75033,7 +75051,7 @@ const Bonds = () => {
     const handleChangeFilterOption = useCallback((newOption) => {
         setFilterOption(newOption);
     }, []);
-    return (jsxs(Flex$1, { className: "bonds-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), campaign !== 'xmas' && SDKConfig.useHotBonds && jsx$2(BuyAgainRow, {}), (billsToRender === null || billsToRender === void 0 ? void 0 : billsToRender.length) > 0 ? (jsx$2(BondRowsByChain, { bonds: billsToRender, hideTitles: searchQuery !== '', isCampaign: campaign === 'xmas' })) : searchQuery ? (jsx$2(PlaceholderMonkey, { text: 'No results' })) : filterOption === 'FAVORITES' ? (jsxs(Flex$1, { sx: {
+    return (jsxs(Flex$1, { className: "bonds-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), SDKConfig.useHotBonds && jsx$2(BuyAgainRow, {}), (billsToRender === null || billsToRender === void 0 ? void 0 : billsToRender.length) > 0 ? (jsx$2(BondRowsByChain, { bonds: billsToRender, hideTitles: searchQuery !== '' })) : searchQuery ? (jsx$2(PlaceholderMonkey, { text: 'No results' })) : filterOption === 'FAVORITES' ? (jsxs(Flex$1, { sx: {
                     width: '100%',
                     height: '300px',
                     background: 'white2',
@@ -75042,7 +75060,7 @@ const Bonds = () => {
                     alignItems: 'center',
                     flexDirection: 'column',
                     mt: '10px',
-                }, children: [jsx$2(Svg, { icon: "StarFilled", width: 75, height: 75 }), jsx$2(Flex$1, { sx: { mt: '10px' }, children: `You don't have any Favorite Bonds yet!` }), jsx$2(Flex$1, { sx: { fontSize: '12px', fontWeight: 400, color: 'textDisabledButton', mt: '10px' }, children: `Click on the 'star' or 'fire' icon to add Bonds to the list.` })] })) : (jsx$2(Flex$1, { className: "bonds-spinner", children: jsx$2(Spinner, { size: 100 }) })), campaign !== 'xmas' && SDKConfig.useHotBonds && jsx$2(RecommendationCards$1, {})] }));
+                }, children: [jsx$2(Svg, { icon: "StarFilled", width: 75, height: 75 }), jsx$2(Flex$1, { sx: { mt: '10px' }, children: `You don't have any Favorite Bonds yet!` }), jsx$2(Flex$1, { sx: { fontSize: '12px', fontWeight: 400, color: 'textDisabledButton', mt: '10px' }, children: `Click on the 'star' or 'fire' icon to add Bonds to the list.` })] })) : (jsx$2(Flex$1, { className: "bonds-spinner", children: jsx$2(Spinner, { size: 100 }) })), SDKConfig.useHotBonds && jsx$2(RecommendationCards$1, {})] }));
 };
 
 var BondsViewOptions;
@@ -91465,14 +91483,14 @@ const PriceChart = ({ selectedBond, historicalPrices, }) => {
 };
 
 const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { data: bonds } = useBondsData();
     const bondData = bonds === null || bonds === void 0 ? void 0 : bonds.find((bond) => {
         var _a;
         return ((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()) &&
             bondChain === bond.chainId.toString();
     });
-    const isXmasStyle = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) ? bondData.minTier : null;
+    const minTier = (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) ? bondData.minTier : null;
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
@@ -91500,6 +91518,8 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
     const { data: inputCurrencyBalance } = useCurrencyBalance(inputToken !== null && inputToken !== void 0 ? inputToken : null, account !== null && account !== void 0 ? account : null, (_d = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _d !== void 0 ? _d : null);
     // Estimations
     const depositAmount = isZap ? zapDepositAmount : inputValue;
+    const youSpendString = `${formatNumber$2(inputValue)} ${getSymbol(inputToken, bondData === null || bondData === void 0 ? void 0 : bondData.chainId)} = 
+                  $${formatUSDNumber((parseFloat(inputValue) * ((_e = inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price) !== null && _e !== void 0 ? _e : 0)).toString())}`;
     // Loading State
     const [loadingTx, setLoadingTx] = useState(false);
     const { addToastError } = usePopups();
@@ -91513,7 +91533,7 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
     // Modals
     const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
     // Approve & Purchase Functions
-    const [approvalState, approveCallback] = useApproval(inputValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_e = (isZap ? SoulZapTokenManager === null || SoulZapTokenManager === void 0 ? void 0 : SoulZapTokenManager[bondData === null || bondData === void 0 ? void 0 : bondData.chainId] : bondData === null || bondData === void 0 ? void 0 : bondData.billAddress)) !== null && _e !== void 0 ? _e : null, account !== null && account !== void 0 ? account : null, (_f = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _f !== void 0 ? _f : null);
+    const [approvalState, approveCallback] = useApproval(inputValue, inputToken !== null && inputToken !== void 0 ? inputToken : null, (_f = (isZap ? SoulZapTokenManager === null || SoulZapTokenManager === void 0 ? void 0 : SoulZapTokenManager[bondData === null || bondData === void 0 ? void 0 : bondData.chainId] : bondData === null || bondData === void 0 ? void 0 : bondData.billAddress)) !== null && _f !== void 0 ? _f : null, account !== null && account !== void 0 ? account : null, (_g = bondData === null || bondData === void 0 ? void 0 : bondData.chainId) !== null && _g !== void 0 ? _g : null);
     const handleApprove = () => {
         approveCallback().then(() => {
             track({
@@ -91621,7 +91641,7 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
                                         p: '20px',
                                         borderRadius: '10px',
                                         mt: '5px',
-                                    }, className: `project-view ${isXmasStyle ? 'xmas-style' : ''}`, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(Estimations, { bondData: bondData, inputValue: inputValue, inputToken: inputToken, depositAmount: depositAmount, inputTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), bondData.type === 'staking' && (jsxs(Flex, { sx: {
+                                    }, className: `project-view`, children: [jsx$2(BondModalHeader, { bondData: bondData }), jsx$2(ProjectDescription, { description: bondData.shortDescription }), jsx$2(Estimations, { depositAmount: depositAmount, bondData: bondData, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(inputCurrencyBalance !== null && inputCurrencyBalance !== void 0 ? inputCurrencyBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: handleCurrencySelect, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId, enableZap: supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId), bondPrincipalToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price }), bondData.type === 'staking' && (jsxs(Flex, { sx: {
                                                 p: '5px 10px',
                                                 width: '100%',
                                                 background: '#8E568F',
@@ -91631,9 +91651,8 @@ const ProjectView = ({ bondAddress, bondChain, historicalPrices }) => {
                                                 fontWeight: 400,
                                                 justifyContent: 'center',
                                                 display: 'block',
-                                            }, children: ["Tokens bought through this bond will go directly to the", ' ', jsx$2("span", { onClick: () => window.open('https://basepad.finance/earn', '_blank'), style: { textDecoration: 'underline', cursor: 'pointer', color: 'blue' }, children: "$BPAD staking pool" }), ' ', "with a ", daysLeftOnBasepadPool(), " days lock."] })), isXmasStyle && (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined && (jsx$2(TagXmasFlashBond, { userTier: userTier, minTier: bondData === null || bondData === void 0 ? void 0 : bondData.minTier })), jsxs(Flex, { className: "modaltable-container button-container", children: [account &&
-                                                    (!isXmasStyle ||
-                                                        (isXmasStyle && bondData.minTier && (!userTier || userTier >= bondData.minTier))) && (jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : isXmasStyle && bondData.minTier && (!userTier || userTier < bondData.minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
+                                            }, children: ["Tokens bought through this bond will go directly to the", ' ', jsx$2("span", { onClick: () => window.open('https://basepad.finance/earn', '_blank'), style: { textDecoration: 'underline', cursor: 'pointer', color: 'blue' }, children: "$BPAD staking pool" }), ' ', "with a ", daysLeftOnBasepadPool(), " days lock."] })), minTier && (bondData === null || bondData === void 0 ? void 0 : bondData.minTier) !== undefined && (jsx$2(TagMinTierBond, { userTier: userTier, minTier: bondData === null || bondData === void 0 ? void 0 : bondData.minTier })), jsxs(Flex, { className: "modaltable-container button-container", children: [account &&
+                                                    (!minTier || (minTier && bondData.minTier && (!userTier || userTier >= bondData.minTier))) && (jsx$2(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", onClick: () => supportedByLIFI.includes(bondData === null || bondData === void 0 ? void 0 : bondData.chainId) ? handleOpenZapModal() : openExternal(), variant: "secondary", children: ["Get ", getSymbol(bondData === null || bondData === void 0 ? void 0 : bondData.lpToken)] }) })), jsx$2(Flex, { className: "button-container buy", children: !account ? (jsx$2(ConnectButton, {})) : minTier && bondData.minTier && (!userTier || userTier < bondData.minTier) ? (jsx$2(Button, { className: "action-button", onClick: () => window.open(`https://www.ape.bond/tier-staking`, '_blank'), children: "GET YOUR TIER" })) : userChainId !== bondData.chainId ? (jsx$2(Button, { className: "switch-button", disabled: loadingTx || isConfirming || (bondData === null || bondData === void 0 ? void 0 : bondData.soldOut), onClick: (event) => {
                                                             event.stopPropagation();
                                                             switchChain({ chainId: bondData.chainId });
                                                         }, style: { fontSize: '14px', padding: '6px', marginLeft: '0px' }, children: `Switch to ${NETWORK_LABEL[bondData.chainId]}` })) : approvalState === ApprovalState.APPROVED ? (jsx$2(Button, { className: "action-button", load: load || fetchingZapQuote, disabled: load ||