@ape.swap/bonds-sdk 3.0.57-test.2 → 3.0.57-test.4

package/dist/main.js

@@ -60910,10 +60910,16 @@ var get$1 = /*@__PURE__*/getDefaultExportFromCjs(get_1);
 const useModal = (modal, closeOnOverlayClick = true, updateOnPropsChange = false, modalId = 'defaultNodeId', clearModalStack = false) => {
     // Clear modal stack will not update props if the parent modal gets unmounted
     const { nodeId, modalNode, setModalNode, onPresent, handleClose, setCloseOnOverlayClick } = useContext(Context);
-    const onPresentCallback = useCallback(() => {
-        onPresent(modal, modalId, clearModalStack);
-    }, [modal, modalId, clearModalStack, onPresent]);
     const nodeIdIndex = nodeId.indexOf(modalId);
+    const onPresentCallback = useCallback(() => {
+        if (nodeIdIndex !== -1) {
+            console.error('Modal is already open.'); //TODO: when sure this works as expected. remove console
+            return;
+        }
+        else {
+            onPresent(modal, modalId, clearModalStack);
+        }
+    }, [modal, modalId, clearModalStack, onPresent, nodeIdIndex]);
     useEffect(() => {
         // NodeId is needed in case there are 2 useModal hooks on the same page and one has updateOnPropsChange
         if (updateOnPropsChange) {
@@ -79718,190 +79724,470 @@ const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
         } }));
 };
 
-/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
-const CheckUrl = () => {
-    var _a, _b;
-    if (typeof window === 'undefined')
-        return null;
-    const { data: bonds } = useBondsData();
-    const asPath = window.location.search;
-    const urlParams = new URLSearchParams(new URL(asPath, window.location.origin).search);
-    const bondAddress = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondAddress')) !== null && _a !== void 0 ? _a : '';
-    const bondChain = (_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondChain')) !== null && _b !== void 0 ? _b : '';
-    const bond = useMemo(() => {
-        if (!bondAddress)
-            return undefined;
-        return 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()); });
-    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
-    const [onPresentBuyBillsModal] = useModal(jsx$2(ModalHandler, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }), true, true, `BuyBondModal:${bondAddress.toLowerCase()}-${bondChain}-${bond === null || bond === void 0 ? void 0 : bond.index}`);
-    useEffect(() => {
-        if (bond && bondChain && bondAddress) {
-            onPresentBuyBillsModal();
-            track({
-                event: 'buyModalOpen',
-                chain: bondChain,
-                data: {
-                    cat: 'customURL',
-                    bond: bond.earnToken.symbol,
-                    bondChain: bondChain,
-                },
-            });
-        }
-    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
-    return jsx$2(Fragment$1, {});
-};
-
-const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
-    var _a;
-    const isMobile = useIsMobile();
-    return (jsxs(Flex, { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: "chaintitle", sx: {
-            pt,
-            pb: '10px',
-            color: 'textDisabledButton',
-            fontSize: '13px',
-            fontWeight: 500,
-            cursor: 'pointer',
-            textTransform: 'uppercase',
-            display: hideTitles ? 'none' : 'flex',
-            width: '300px',
-            alignItems: 'center',
-        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), ((_a = NETWORK_LABEL[chain]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('testnet')) && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development." }), width: isMobile ? '272px' : '280px', placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)', children: jsx$2(Svg, { icon: "questionCircle", width: 14, color: "textDisabledButton" }) })] }))] }));
-};
-
-const ProgressBar = ({ value, color = 'text' }) => {
-    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
-                    width: `${value <= 3 ? 3 : value}%`,
-                } }) }) }));
-};
-
 const styles$9 = {
-    titleText: {
-        opacity: 0.6,
+    buyContainer: {
+        width: '100%',
+        mb: ['30px', '30px', '30px', '0px'],
+        flexDirection: 'column',
+    },
+    cardContainer: {
+        width: '100%',
+        background: 'white2',
+        borderRadius: 'normal',
+        flexDirection: 'column',
+    },
+    infoRowsContainer: {
+        width: '100%',
+        flexDirection: 'column',
+        mb: '10px',
+    },
+    infoRow: {
+        width: '100%',
+        justifyContent: 'space-between',
+    },
+    infoTitle: {
         fontSize: '12px',
-        lineHeight: ['16px', '16px', '16px', '24px'],
         fontWeight: 400,
     },
-    skeleton: {
-        width: ['45px', '45px', '60px'],
-        maxHeight: '18px',
-        minHeight: '18px',
-    }};
-
-const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
-    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$9.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$9.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$9.skeleton }) }))] }));
-};
-var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
-
-const BonusContainer = ({ bond, tooltipPosition = 'bottomRight', }) => {
-    var _a, _b;
-    const SDKConfig = useSDKConfig();
-    const isMobile = useIsMobile();
-    return (jsx$2("div", { className: `discount-column`, children: 'trueBondPrices' in bond ? (((_b = (_a = findHighestTrueBondPrice((SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers) ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) > 0 ? (jsx$2(BonusComponent, { bond: bond, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' })) : (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" }) }))) : ('-') }));
+    infoData: {
+        fontSize: '12px',
+        fontWeight: 700,
+    },
 };
+({
+    [types.LaunchBondTiers.Bronze]: '#CD7F32',
+    [types.LaunchBondTiers.Silver]: '#C0C0C0',
+    [types.LaunchBondTiers.Gold]: '#FFD700',
+    [types.LaunchBondTiers.Diamond]: '#B9F2FF',
+    [types.LaunchBondTiers.Legend]: '#a587e6', // Replaced hex color for a violet hex
+});
 
-const NETWORK_COLORS$1 = {
-    [types.ChainId.BSC]: '#F3BA2F4d',
-    [types.ChainId.MAINNET]: '#627eea4d',
-    [types.ChainId.MATIC]: '#8247e54d',
-    [types.ChainId.LIGHTLINK]: '#6087ff4d',
-    [types.ChainId.BASE]: '#0052ff4d',
-    [types.ChainId.ARBITRUM]: '#289fef4d',
-    [types.ChainId.LINEA]: '#ffffff4d',
-    [types.ChainId.IOTA]: '#ffffff4d',
-    [types.ChainId.GRAPHLINQ]: '#ded2ff4d',
-    [types.ChainId.AVAX]: '#e743444d',
-    [types.ChainId.BLAST]: '#fcfc034d',
-    [types.ChainId.CROSSFI]: '#7c80844d',
-    [types.ChainId.MONAD_TESTNET]: '#836EF94d',
-    [types.ChainId.SONIC]: '#fb9a4c4d',
-    [types.ChainId.BERACHAIN]: '#783e244d',
-};
-const BondRow = ({ bond }) => {
-    var _a, _b, _c, _d, _e;
-    const locationPath = window.location.pathname.replace('/', '');
-    const isMobile = useIsMobile();
-    const rangeColorNetworkRow = isMobile ? { from: '0%', to: '20%' } : { from: '3%', to: '8%' };
-    const billAddress = 'billAddress' in bond
-        ? bond.billAddress
-        : 'contractAddress' in bond
-            ? bond.contractAddress[bond.chainId]
-            : undefined;
-    const isGoldRush = 'billArt' in bond ? bond.billArt.collection === types.BillArtCollection.GoldenTicket_Collection1 : false;
-    const isSoldOut = isBondSoldOut(bond);
-    // Modal
-    const [openBuyModal] = useModal(jsx$2(ModalHandler, { bondAddress: billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${billAddress}-${bond.chainId}`);
-    const handleOpenModal = () => {
-        if (isSoldOut)
-            return;
-        openBuyModal();
-        if (typeof window !== 'undefined') {
-            window.history.pushState({}, '', `${locationPath}?bondAddress=${billAddress}&bondChain=${bond.chainId}`);
+const ParticipationSuccessful = ({ onDismiss, launchBond, inputAmount, }) => {
+    var _a, _b, _c, _d;
+    const { data: tokenPrices } = useTokenPrices();
+    const principalTokenPrice = (_a = tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.find((token) => { var _a, _b, _c; return ((_a = token === null || token === void 0 ? void 0 : token.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.token) === null || _b === void 0 ? void 0 : _b.address[launchBond === null || launchBond === void 0 ? void 0 : launchBond.chainId]) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _a === void 0 ? void 0 : _a.price;
+    const inputValue = parseFloat(inputAmount !== null && inputAmount !== void 0 ? inputAmount : '0');
+    const depositAmountUsd = inputValue * (principalTokenPrice !== null && principalTokenPrice !== void 0 ? principalTokenPrice : 0);
+    const userAllocation = depositAmountUsd / (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice);
+    const userAllocationUsd = userAllocation * (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice);
+    const finishTime = ((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.redeemTime) !== null && _b !== void 0 ? _b : 0) * 1000;
+    const finishDate = new Date(finishTime);
+    const month = finishDate.toLocaleDateString('en-US', { month: 'short' });
+    const getDayWithSuffix = (day) => {
+        if (day > 3 && day < 21)
+            return `${day}th`;
+        switch (day % 10) {
+            case 1:
+                return `${day}st`;
+            case 2:
+                return `${day}nd`;
+            case 3:
+                return `${day}rd`;
+            default:
+                return `${day}th`;
         }
-        track({
-            event: 'buyModalOpen',
-            chain: bond.chainId,
-            data: {
-                cat: 'Row',
-                bond: bond.earnToken.symbol,
-                bondChain: bond.chainId,
-            },
-        });
-    };
-    const remainingPercentage = (bond) => {
-        var _a, _b, _c;
-        const maxTotalPayout = 'maxTotalPayout' in bond ? bond.maxTotalPayout : undefined;
-        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : undefined;
-        if (!maxTotalPayout)
-            return 0;
-        const totalMaxPayout = new BigNumber$1(maxTotalPayout !== null && maxTotalPayout !== void 0 ? maxTotalPayout : '0').div(new BigNumber$1(10).pow((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
-        const remainingTokens = new BigNumber$1(tokensRemaining !== null && tokensRemaining !== void 0 ? tokensRemaining : '0');
-        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
-    };
-    const remainingTokensFormat = (bond) => {
-        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
-        return formatNumberSI(parseFloat(tokensRemaining), 0);
-    };
-    const remainingTokensUsd = (bond) => {
-        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
-        const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0;
-        const tokens = new BigNumber$1(tokensRemaining);
-        return tokens.times(payoutTokenPrice);
-    };
-    return (jsxs("div", { className: `bond-row ${isGoldRush ? 'gold-rush' : ''}`, onClick: handleOpenModal, sx: {
-            borderRadius: 'normal',
-            background: NETWORK_COLORS$1[bond.chainId]
-                ? `linear-gradient(90deg, ${NETWORK_COLORS$1[bond.chainId]} ${rangeColorNetworkRow.from}, rgba(21,20,32,1) ${rangeColorNetworkRow.to})`
-                : 'linear-gradient(90deg, rgba(21,20,32,0.3) 3%, rgba(21,20,32,1) 8%)',
-        }, children: [jsx$2("div", { className: "gold-ribbon" }), jsx$2("div", { className: "token-info-container", sx: { width: ['70%', '70%', '65%', '30%'] }, children: jsx$2(TokenInfoAndName, { bill: bond, isGoldBond: isGoldRush }) }), jsxs("div", { className: "bond-info-columns", sx: { width: '55%' }, children: [jsx$2(BonusContainer, { bond: bond }), jsxs("div", { className: "terms-column", children: [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',
-                                justifyContent: 'center',
-                                display: ['none', 'none', 'none', 'flex'],
-                            }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
-                                num: remainingTokensUsd(bond).toNumber(),
-                                isPrice: true,
-                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId, isSoldOut: isSoldOut }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
-};
-
-const HotBondCard = ({ bond }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const bonus = (_a = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], bond)) === null || _a === void 0 ? void 0 : _a.bonus;
-    const SDKConfig = useSDKConfig();
-    // Modal
-    const [openBuyModal] = useModal(jsx$2(BuyBondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
-    const handleOpenModal = () => {
-        openBuyModal();
-        track({
-            event: 'hotClick',
-            chain: bond.chainId,
-            data: {
-                cat: 'hotClick',
-                bond: bond.earnToken.symbol,
-            },
-        });
     };
-    return (jsx$2(Flex, { sx: styles$d.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _d !== void 0 ? _d : '', earnTokenSymbol: (_f = (_e = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : '', bondContract: (_g = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _g !== void 0 ? _g : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond, SDKConfig.useTiers) })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days) ? `${(_j = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _j === void 0 ? void 0 : _j.days} D` : '-' })] })] })] }) }));
+    const day = finishDate.getDate();
+    const formattedFinishDate = `${month} ${getDayWithSuffix(day)} at 11 UTC.`;
+    const initialRelease = userAllocation * ((launchBond === null || launchBond === void 0 ? void 0 : launchBond.initialRelease) / 10000);
+    const initialReleaseUsd = initialRelease * ((_c = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice) !== null && _c !== void 0 ? _c : 0);
+    const vestedAmount = userAllocation * (1 - (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initialRelease) / 10000);
+    const vestedAmountUsd = vestedAmount * ((_d = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice) !== null && _d !== void 0 ? _d : 0);
+    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { hideDivider: true }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '15px' }, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700 }, children: "Participation Details" }) }), jsxs(Flex, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 400,
+                            flexDirection: 'column',
+                        }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Your Deposit" }), jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: [getFirstNonZeroDigits(inputValue, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.token.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", depositAmountUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Your Allocation" }), jsxs(Flex, { sx: {
+                                            fontSize: '12px',
+                                            fontWeight: 500,
+                                        }, children: [getFirstNonZeroDigits(userAllocation, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", userAllocationUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Initial Release", jsx$2(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: `You'll be able to claim an initial release of ${launchBond.initialRelease / 100}% 
+                    of your allocation on ${formattedFinishDate}` }), children: jsx$2(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: {
+                                            fontSize: '12px',
+                                            fontWeight: 500,
+                                        }, children: [getFirstNonZeroDigits(initialRelease, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: {
+                                                    color: 'textDisabledButton',
+                                                    ml: '5px',
+                                                }, children: ["($", initialReleaseUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Vested Tokens", jsx$2(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: `Remaining tokens will vest linearly over ${getTimePeriods(parseInt(launchBond.vestingTerm)).months} months after claiming the initial release.` }), children: jsx$2(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: {
+                                            fontSize: '12px',
+                                            fontWeight: 500,
+                                        }, children: [getFirstNonZeroDigits(vestedAmount, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", vestedAmountUsd.toFixed(2), ")"] })] })] }), jsx$2(Flex, { sx: { mt: '10px' }, children: `Your purchased bond can be found under the "Your Bonds" tab.` })] }), jsx$2(Button, { onClick: onDismiss, sx: { fontSize: '16px', width: '100%', mt: '15px' }, children: "Close" })] })] }));
+};
+
+const BuyAction = ({ launchBond, inputValue, selectedCurrency, soldout, }) => {
+    var _a, _b;
+    // Local state
+    const [loading, setLoading] = useState(false);
+    // Hooks
+    const { switchChain: onSelectChain } = useSwitchChain();
+    const { address: account, chainId } = useAccount();
+    const { data: currencyBalanceString } = useCurrencyBalance(selectedCurrency, account, launchBond.chainId);
+    const exceedsBalance = parseFloat(inputValue) > parseFloat(currencyBalanceString !== null && currencyBalanceString !== void 0 ? currencyBalanceString : '0');
+    usePopups();
+    // Buy confirm modal
+    const [onOpenPurchaseModal] = useModal(jsx$2(ParticipationSuccessful, { launchBond: launchBond, inputAmount: inputValue }), true, true, `confirm buy modal`);
+    // Approve logic
+    const [approvalState, approveCallback] = useApproval(inputValue, selectedCurrency, launchBond === null || launchBond === void 0 ? void 0 : launchBond.contractAddress, account, chainId);
+    const handleApprove = () => {
+        setLoading(true);
+        approveCallback().finally(() => setLoading(false));
+    };
+    const { writeContractAsync } = useWriteContract();
+    const onBuyBill = () => __awaiter$9(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const amount = new BigNumber$1(inputValue)
+            .times(new BigNumber$1(10).pow((_a = selectedCurrency.decimals[launchBond.chainId]) !== null && _a !== void 0 ? _a : 18))
+            .toString();
+        const maxPrice = new BigNumber$1((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.trueBillPrice) !== null && _b !== void 0 ? _b : '0').times(102).div(100).toFixed(0);
+        const args = [amount, maxPrice, account];
+        yield writeContractAsync({
+            address: launchBond === null || launchBond === void 0 ? void 0 : launchBond.contractAddress,
+            abi: launchBondsABI_V2_2_0,
+            functionName: 'deposit',
+            args: args,
+            chain: launchBond.chainId,
+            account,
+        });
+    });
+    const handleBuyBill = () => {
+        setLoading(true);
+        onBuyBill()
+            .then(() => {
+            if (chainId && account) {
+                console.log('Purchase successful, open purchase modal');
+                onOpenPurchaseModal();
+                track({
+                    event: 'bond',
+                    chain: chainId,
+                    data: {
+                        cat: 'buy',
+                        type: launchBond.billVersion === types.BillVersion.FlashTieredSale ? 'flash' : 'launch',
+                        principalToken: launchBond === null || launchBond === void 0 ? void 0 : launchBond.token.symbol,
+                        earnToken: launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol,
+                        amount: inputValue,
+                        usdAmount: inputValue, // TODO: fix usdAmount here because this assumes principal token is stablecoin
+                    },
+                });
+            }
+        })
+            .catch((e) => {
+            console.log(e);
+            // addToastError(e)
+        })
+            .finally(() => {
+            setLoading(false);
+        });
+    };
+    const saleStartTime = ((_a = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initTime) !== null && _a !== void 0 ? _a : 0) * 1000;
+    const saleFinishTime = ((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.finishTime) !== null && _b !== void 0 ? _b : 0) * 1000;
+    const now = new Date().getTime();
+    const saleHasStarted = now > saleStartTime;
+    const saleHasFinished = now > saleFinishTime || launchBond.finalized;
+    const error = !saleHasStarted
+        ? `Sale hasn't started`
+        : saleHasFinished
+            ? 'Sale Finished'
+            : exceedsBalance
+                ? 'Exceeds balance'
+                : soldout
+                    ? 'Soldout'
+                    : chainId !== launchBond.chainId
+                        ? `Switch to ${NETWORK_LABEL[launchBond.chainId]}`
+                        : !inputValue || parseFloat(inputValue) === 0
+                            ? 'Insert amount'
+                            : null;
+    return (jsx$2(Flex, { sx: { width: '100%', ml: ['0', '0', '0', '10px'], mb: ['10px', '10px', '10px', '0'] }, children: !account ? (jsx$2(ConnectButton, {})) : chainId !== launchBond.chainId ? (jsx$2(Button, { fullWidth: true, onClick: () => {
+                onSelectChain({ chainId: launchBond.chainId });
+            }, children: `Switch to ${NETWORK_LABEL[launchBond.chainId]}` })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { fullWidth: true, onClick: handleApprove, disabled: approvalState === ApprovalState.PENDING || loading || !!error, load: approvalState === ApprovalState.PENDING || loading, children: error ? error : approvalState === ApprovalState.PENDING ? 'Enabling' : 'Enable' })) : (jsx$2(Button, { fullWidth: true, onClick: handleBuyBill, disabled: loading || !!error, load: loading, children: error ? error : 'Buy' })) }));
+};
+
+const BondCards = ({ bond }) => {
+    return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", sx: {
+                    borderRadius: ['0px', '0px', '0px', 'normal'],
+                    '&:first-of-type': {
+                        borderTopRightRadius: 'normal',
+                        borderTopLeftRadius: 'normal',
+                    },
+                    '&:last-of-type': {
+                        borderBottomRightRadius: 'normal',
+                        borderBottomLeftRadius: 'normal',
+                    },
+                }, children: [jsxs(Flex, { className: "bond-card-title", sx: { alignItems: 'center' }, children: ["Bonus", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the percentage of additional tokens you\u2019ll get compared to buying at market price." }), 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(Flex, { sx: { color: 'success' }, children: [((bond.tgePrice / bond.initPrice) * 100 - 100).toFixed(0), "%"] })] }), jsxs("div", { className: "bond-card-block", sx: {
+                    fontSize: '13px !important',
+                    borderRadius: ['0px', '0px', '0px', 'normal'],
+                    '&:first-of-type': {
+                        borderTopRightRadius: 'normal',
+                        borderTopLeftRadius: 'normal',
+                    },
+                    '&:last-of-type': {
+                        borderBottomRightRadius: 'normal',
+                        borderBottomLeftRadius: 'normal',
+                    },
+                }, children: [jsxs(Flex, { className: "bond-card-title", children: ["TGE", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the date and time when this token will become tradeable and officially live on-chain." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "May 25th, 13:00 UTC"] }), jsxs("div", { className: "bond-card-block", sx: {
+                    borderRadius: ['0px', '0px', '0px', 'normal'],
+                    '&:first-of-type': {
+                        borderTopRightRadius: 'normal',
+                        borderTopLeftRadius: 'normal',
+                    },
+                    '&:last-of-type': {
+                        borderBottomRightRadius: 'normal',
+                        borderBottomLeftRadius: 'normal',
+                    },
+                }, children: [jsxs("div", { className: "bond-card-title", children: ["Initial Release", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the percentage of tokens you can claim immediately on May 25th at 11:00 UTC. The rest follows the vesting schedule." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "25%"] }), jsxs("div", { className: "bond-card-block", sx: {
+                    borderRadius: ['0px', '0px', '0px', 'normal'],
+                    '&:first-of-type': {
+                        borderTopRightRadius: 'normal',
+                        borderTopLeftRadius: 'normal',
+                    },
+                    '&:last-of-type': {
+                        borderBottomRightRadius: 'normal',
+                        borderBottomLeftRadius: 'normal',
+                    },
+                }, children: [jsxs("div", { className: "bond-card-title", children: ["Vesting Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["Remaining tokens will vest linearly over ", getTimePeriods(parseInt(bond.vestingTerm)).months, " months after claiming the initial release."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), getTimePeriods(parseInt(bond.vestingTerm)).months, " M"] })] }));
+};
+
+const BuyComponent = ({ bond, onDismiss }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    // Hooks
+    const { data: userEscrowWeight } = useTierPoints();
+    const userTier = getUserTier(userEscrowWeight);
+    const { address, chainId } = useAccount();
+    const { data: principalTokenBalance } = useCurrencyBalance(bond.token, address, bond.chainId);
+    // Local state
+    const [inputValue, setInputValue] = useState('');
+    // Display Values
+    const raiseGoal = getBalanceNumber(new BigNumber$1((_a = bond === null || bond === void 0 ? void 0 : bond.totalRaise) !== null && _a !== void 0 ? _a : '0'), 18);
+    const totalPrincipalBilled = getBalanceNumber(new BigNumber$1((_b = bond === null || bond === void 0 ? void 0 : bond.totalPrincipalBilled) !== null && _b !== void 0 ? _b : '0'), 18);
+    const percentageSold = (totalPrincipalBilled * 100) / raiseGoal;
+    const inputValueToDisplay = parseFloat(inputValue).toFixed(2);
+    const inputValueToDisplayUSD = parseFloat(inputValueToDisplay) * bond.principalTokenPrice;
+    const youGet = parseFloat(inputValue) / (bond === null || bond === void 0 ? void 0 : bond.initPrice);
+    const youGetUSD = youGet * (bond === null || bond === void 0 ? void 0 : bond.tgePrice);
+    const bonusUSD = youGetUSD - inputValueToDisplayUSD;
+    const airdropBonus = (_c = bond === null || bond === void 0 ? void 0 : bond.tiersAirdrop) === null || _c === void 0 ? void 0 : _c[userTier !== null && userTier !== void 0 ? userTier : 'noTier'];
+    (parseFloat(inputValue) * airdropBonus) / (bond === null || bond === void 0 ? void 0 : bond.initPrice);
+    `${bond === null || bond === void 0 ? void 0 : bond.totalAllocation}`;
+    new Date().getTime();
+    ((_d = bond === null || bond === void 0 ? void 0 : bond.initTime) !== null && _d !== void 0 ? _d : 0) * 1000;
+    ((_e = bond === null || bond === void 0 ? void 0 : bond.finishTime) !== null && _e !== void 0 ? _e : 0) * 1000;
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `/bonds`);
+        }
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    return (jsxs(Modal, { onDismiss: handleClose, sx: { width: '740px' }, children: [jsx$2(ModalHeader, { onDismiss: handleClose, hideDivider: true }), jsx$2(Flex, { sx: styles$9.buyContainer, children: jsxs(Flex, { sx: styles$9.cardContainer, children: [jsx$2(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: jsxs(Flex, { children: [jsxs(Flex, { children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: bond.earnToken.symbol, size: 50, chain: bond.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bond.earnToken.symbol, jsx$2(ListTag, { text: (_f = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _f === void 0 ? void 0 : _f[0] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '15px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", bond.tgePrice] }), jsxs(Flex, { sx: { fontSize: '24px', fontWeight: 700 }, children: ["$", bond.initPrice] })] })] }) }), jsx$2(ProjectDescription, { description: bond.shortDescription, isProjectView: true }), jsx$2(BondCards, { bond: bond }), jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$9.infoRowsContainer), { mt: '10px' }), children: [jsxs(Flex, { sx: styles$9.infoRow, children: [jsx$2(Text, { sx: styles$9.infoTitle, children: "You Spend:" }), jsxs(Text, { sx: styles$9.infoData, children: [isNaN(parseFloat(inputValueToDisplay)) ? 0 : inputValueToDisplay, " ", bond === null || bond === void 0 ? void 0 : bond.token.symbol, " = $", isNaN(inputValueToDisplayUSD) ? '0' : inputValueToDisplayUSD.toFixed(2)] })] }), jsxs(Flex, { sx: styles$9.infoRow, children: [jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$9.infoTitle), { alignItems: 'center' }), children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Text, { sx: Object.assign(Object.assign({}, styles$9.infoData), { color: 'success' }), children: ["$", isNaN(bonusUSD) ? '0' : bonusUSD.toFixed(2)] })] }), jsxs(Flex, { sx: styles$9.infoRow, children: [jsx$2(Text, { sx: styles$9.infoTitle, children: "You Get:" }), jsxs(Text, { sx: styles$9.infoData, children: [isNaN(youGet) ? 0 : formatNumberSI(youGet, 0), " ", bond === null || bond === void 0 ? void 0 : bond.earnToken.symbol, " = $", isNaN(youGetUSD) ? '0' : youGetUSD.toFixed(2)] })] })] }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: bond === null || bond === void 0 ? void 0 : bond.token, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(principalTokenBalance !== null && principalTokenBalance !== void 0 ? principalTokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: () => null, chainId: bond === null || bond === void 0 ? void 0 : bond.chainId, enableZap: false, bondPrincipalToken: bond === null || bond === void 0 ? void 0 : bond.token, tokenBalance: principalTokenBalance, selectedTokenPrice: bond.principalTokenPrice, inputDisabled: false }), jsxs(Flex, { sx: {
+                                width: '100%',
+                                background: '#DE62F366',
+                                justifyContent: 'center',
+                                mt: '10px',
+                                borderRadius: 'normal',
+                                p: '2px 10px',
+                                fontSize: '12px',
+                                fontWeight: 400,
+                            }, children: ["This is a Pre-TGE Bond - Tokens will be tradeable upon listing.", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Pre-TGE Bonds are a pre-sale for tokens before their Token Generation Event (TGE), when tokens are officially launched to the public." }), width: "315px", placement: "topRight", transformTip: "translate(9%, -10%)", children: jsx$2(Flex, { sx: { ml: '4px', minWidth: '14px' }, children: jsx$2(Svg, { icon: "questionCircle", width: 12 }) }) })] }), jsxs(Flex, { sx: {
+                                width: '100%',
+                                mt: '10px',
+                                justifyContent: 'space-between',
+                                height: ['unset', 'unset', 'unset', '40px'],
+                                flexDirection: ['column-reverse', 'column-reverse', 'column-reverse', 'row'],
+                            }, children: [jsx$2(Flex, { sx: { width: ['100%', '100%', '100%', '45%'], justifyContent: 'center' }, children: jsxs(Button, { variant: "secondary", onClick: () => {
+                                            var _a;
+                                            return window.open(`/swap?outputCurrency=${(_a = bond === null || bond === void 0 ? void 0 : bond.token) === null || _a === void 0 ? void 0 : _a.address[bond === null || bond === void 0 ? void 0 : bond.chainId]}&outputChain=${bond === null || bond === void 0 ? void 0 : bond.chainId}`, '_blank');
+                                        }, fullWidth: true, children: ["Get ", (_g = bond === null || bond === void 0 ? void 0 : bond.token) === null || _g === void 0 ? void 0 : _g.symbol] }) }), (bond === null || bond === void 0 ? void 0 : bond.contractAddress) ? (jsx$2(BuyAction, { launchBond: bond, inputValue: inputValue, selectedCurrency: bond === null || bond === void 0 ? void 0 : bond.token, soldout: (bond === null || bond === void 0 ? void 0 : bond.billType) === 'fcfs' && percentageSold === 100 })) : (jsx$2(Button, { disabled: true, fullWidth: true, sx: { ml: ['0', '0', '0', '10px'] }, children: `Sale hasn't started` }))] })] }) })] }));
+};
+
+/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
+const CheckUrl = () => {
+    var _a, _b;
+    if (typeof window === 'undefined')
+        return null;
+    const { data: bonds } = useBondsData();
+    const { data: preTGEBonds } = usePreTGEBondsData();
+    const asPath = window.location.search;
+    const urlParams = new URLSearchParams(new URL(asPath, window.location.origin).search);
+    const bondAddress = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondAddress')) !== null && _a !== void 0 ? _a : '';
+    const bondChain = (_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('bondChain')) !== null && _b !== void 0 ? _b : '';
+    const preTGEBond = useMemo(() => {
+        if (!bondAddress)
+            return undefined;
+        return preTGEBonds === null || preTGEBonds === void 0 ? void 0 : preTGEBonds.find((bond) => { var _a; return ((_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
+    }, [preTGEBonds === null || preTGEBonds === void 0 ? void 0 : preTGEBonds.length]);
+    const [onPresentBuyBillsModal] = useModal(jsx$2(ModalHandler, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }), true, true, `BuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
+    const [onPresentPreTGEBondModal] = useModal(jsx$2(BuyComponent, { bond: preTGEBond }), true, true, `buyBondModal${preTGEBond === null || preTGEBond === void 0 ? void 0 : preTGEBond.contractAddress}-${preTGEBond === null || preTGEBond === void 0 ? void 0 : preTGEBond.chainId}-${preTGEBond === null || preTGEBond === void 0 ? void 0 : preTGEBond.index}`);
+    useEffect(() => {
+        const bond = 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()); });
+        if (bond && bondChain && bondAddress) {
+            onPresentBuyBillsModal();
+            track({
+                event: 'buyModalOpen',
+                chain: bondChain,
+                data: {
+                    cat: 'customURL',
+                    bond: bond.earnToken.symbol,
+                    bondChain: bondChain,
+                },
+            });
+        }
+    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
+    useEffect(() => {
+        if (preTGEBond && bondChain && bondAddress) {
+            onPresentPreTGEBondModal();
+        }
+    }, [preTGEBonds === null || preTGEBonds === void 0 ? void 0 : preTGEBonds.length]);
+    return jsx$2(Fragment$1, {});
+};
+
+const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
+    var _a;
+    const isMobile = useIsMobile();
+    return (jsxs(Flex, { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: "chaintitle", sx: {
+            pt,
+            pb: '10px',
+            color: 'textDisabledButton',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            display: hideTitles ? 'none' : 'flex',
+            width: '300px',
+            alignItems: 'center',
+        }, children: [NETWORK_LABEL[chain], " Bonds", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), ((_a = NETWORK_LABEL[chain]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('testnet')) && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx$2(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development." }), width: isMobile ? '272px' : '280px', placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)', children: jsx$2(Svg, { icon: "questionCircle", width: 14, color: "textDisabledButton" }) })] }))] }));
+};
+
+const ProgressBar = ({ value, color = 'text' }) => {
+    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
+                    width: `${value <= 3 ? 3 : value}%`,
+                } }) }) }));
+};
+
+const styles$8 = {
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    }};
+
+const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
+    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$8.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$8.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$8.skeleton }) }))] }));
+};
+var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
+
+const BonusContainer = ({ bond, tooltipPosition = 'bottomRight', }) => {
+    var _a, _b;
+    const SDKConfig = useSDKConfig();
+    const isMobile = useIsMobile();
+    return (jsx$2("div", { className: `discount-column`, children: 'trueBondPrices' in bond ? (((_b = (_a = findHighestTrueBondPrice((SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers) ? TIERS_WEIGHT[types.LaunchBondTiers.Legend] : '0', bond)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) > 0 ? (jsx$2(BonusComponent, { bond: bond, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' })) : (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" }) }))) : ('-') }));
+};
+
+const NETWORK_COLORS$1 = {
+    [types.ChainId.BSC]: '#F3BA2F4d',
+    [types.ChainId.MAINNET]: '#627eea4d',
+    [types.ChainId.MATIC]: '#8247e54d',
+    [types.ChainId.LIGHTLINK]: '#6087ff4d',
+    [types.ChainId.BASE]: '#0052ff4d',
+    [types.ChainId.ARBITRUM]: '#289fef4d',
+    [types.ChainId.LINEA]: '#ffffff4d',
+    [types.ChainId.IOTA]: '#ffffff4d',
+    [types.ChainId.GRAPHLINQ]: '#ded2ff4d',
+    [types.ChainId.AVAX]: '#e743444d',
+    [types.ChainId.BLAST]: '#fcfc034d',
+    [types.ChainId.CROSSFI]: '#7c80844d',
+    [types.ChainId.MONAD_TESTNET]: '#836EF94d',
+    [types.ChainId.SONIC]: '#fb9a4c4d',
+    [types.ChainId.BERACHAIN]: '#783e244d',
+};
+const BondRow = ({ bond }) => {
+    var _a, _b, _c, _d, _e;
+    const locationPath = window.location.pathname.replace('/', '');
+    const isMobile = useIsMobile();
+    const rangeColorNetworkRow = isMobile ? { from: '0%', to: '20%' } : { from: '3%', to: '8%' };
+    const billAddress = 'billAddress' in bond
+        ? bond.billAddress
+        : 'contractAddress' in bond
+            ? bond.contractAddress[bond.chainId]
+            : undefined;
+    const isGoldRush = 'billArt' in bond ? bond.billArt.collection === types.BillArtCollection.GoldenTicket_Collection1 : false;
+    const isSoldOut = isBondSoldOut(bond);
+    // Modal
+    const [openBuyModal] = useModal(jsx$2(ModalHandler, { bondAddress: billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${billAddress.toLowerCase()}-${bond.chainId}`);
+    const handleOpenModal = () => {
+        if (isSoldOut)
+            return;
+        openBuyModal();
+        if (typeof window !== 'undefined') {
+            window.history.pushState({}, '', `${locationPath}?bondAddress=${billAddress}&bondChain=${bond.chainId}`);
+        }
+        track({
+            event: 'buyModalOpen',
+            chain: bond.chainId,
+            data: {
+                cat: 'Row',
+                bond: bond.earnToken.symbol,
+                bondChain: bond.chainId,
+            },
+        });
+    };
+    const remainingPercentage = (bond) => {
+        var _a, _b, _c;
+        const maxTotalPayout = 'maxTotalPayout' in bond ? bond.maxTotalPayout : undefined;
+        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : undefined;
+        if (!maxTotalPayout)
+            return 0;
+        const totalMaxPayout = new BigNumber$1(maxTotalPayout !== null && maxTotalPayout !== void 0 ? maxTotalPayout : '0').div(new BigNumber$1(10).pow((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[bond.chainId]) !== null && _c !== void 0 ? _c : 18));
+        const remainingTokens = new BigNumber$1(tokensRemaining !== null && tokensRemaining !== void 0 ? tokensRemaining : '0');
+        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+    };
+    const remainingTokensFormat = (bond) => {
+        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
+        return formatNumberSI(parseFloat(tokensRemaining), 0);
+    };
+    const remainingTokensUsd = (bond) => {
+        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
+        const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0;
+        const tokens = new BigNumber$1(tokensRemaining);
+        return tokens.times(payoutTokenPrice);
+    };
+    return (jsxs("div", { className: `bond-row ${isGoldRush ? 'gold-rush' : ''}`, onClick: handleOpenModal, sx: {
+            borderRadius: 'normal',
+            background: NETWORK_COLORS$1[bond.chainId]
+                ? `linear-gradient(90deg, ${NETWORK_COLORS$1[bond.chainId]} ${rangeColorNetworkRow.from}, rgba(21,20,32,1) ${rangeColorNetworkRow.to})`
+                : 'linear-gradient(90deg, rgba(21,20,32,0.3) 3%, rgba(21,20,32,1) 8%)',
+        }, children: [jsx$2("div", { className: "gold-ribbon" }), jsx$2("div", { className: "token-info-container", sx: { width: ['70%', '70%', '65%', '30%'] }, children: jsx$2(TokenInfoAndName, { bill: bond, isGoldBond: isGoldRush }) }), jsxs("div", { className: "bond-info-columns", sx: { width: '55%' }, children: [jsx$2(BonusContainer, { bond: bond }), jsxs("div", { className: "terms-column", children: [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',
+                                justifyContent: 'center',
+                                display: ['none', 'none', 'none', 'flex'],
+                            }, showTooltip: true, toolTip: `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} (${formatDollar({
+                                num: remainingTokensUsd(bond).toNumber(),
+                                isPrice: true,
+                            })})` }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: billAddress !== null && billAddress !== void 0 ? billAddress : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId, isSoldOut: isSoldOut }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, billAddress));
+};
+
+const HotBondCard = ({ bond }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const bonus = (_a = findHighestTrueBondPrice(TIERS_WEIGHT[types.LaunchBondTiers.Legend], bond)) === null || _a === void 0 ? void 0 : _a.bonus;
+    const SDKConfig = useSDKConfig();
+    // Modal
+    const [openBuyModal] = useModal(jsx$2(BuyBondModal, { bondAddress: bond.billAddress, bondChain: bond.chainId }), true, true, `buyBondModal-${bond.billAddress}-${bond.chainId}`);
+    const handleOpenModal = () => {
+        openBuyModal();
+        track({
+            event: 'hotClick',
+            chain: bond.chainId,
+            data: {
+                cat: 'hotClick',
+                bond: bond.earnToken.symbol,
+            },
+        });
+    };
+    return (jsx$2(Flex, { sx: styles$d.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _d !== void 0 ? _d : '', earnTokenSymbol: (_f = (_e = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _e === void 0 ? void 0 : _e.symbol) !== null && _f !== void 0 ? _f : '', bondContract: (_g = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _g !== void 0 ? _g : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond, SDKConfig.useTiers) })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days) ? `${(_j = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _j === void 0 ? void 0 : _j.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {
@@ -80042,7 +80328,7 @@ const BondRowsByChain = ({ bonds, hideTitles }) => {
         }) }));
 };
 
-const styles$8 = {
+const styles$7 = {
     smallCardContainer: {
         width: '100%',
         p: '6px 12px',
@@ -80053,364 +80339,98 @@ const styles$8 = {
         cursor: 'pointer',
         mr: '10px',
         ':last-of-type': {
-            mr: '0px',
-        },
-    },
-    subTitle: {
-        color: 'textDisabledButton',
-        fontSize: '12px',
-        fontWeight: 400,
-        lineHeight: '16px',
-    },
-};
-
-const SmallRecommendationCard = ({ recommendation }) => {
-    var _a;
-    const vestingTime = getTimePeriods((_a = recommendation.vestingTerm) !== null && _a !== void 0 ? _a : 0, true);
-    return (jsxs(Flex, { sx: styles$8.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$8.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$8.subTitle, children: "Bonus" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.bonus > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.bonus.toFixed(2), "%"] })] })] }));
-};
-
-const RecommendationCards$1 = () => {
-    const topTags = useTopTags();
-    const { address: account } = useAccount();
-    const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags];
-    const [activeOption, setActiveOption] = useState(options[0]);
-    const { data: hotRecommendations } = useHotBonds();
-    const { data: bonds } = useBondsData();
-    const SDKConfig = useSDKConfig();
-    const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3');
-    const sortedBonds = bonds && (bonds === null || bonds === void 0 ? void 0 : bonds.length) > 0
-        ? [...bonds].sort((a, b) => {
-            var _a, _b, _c, _d;
-            return ((_b = (_a = findHighestTrueBondPrice('0', b)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) -
-                ((_d = (_c = findHighestTrueBondPrice('0', a)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 0);
-        })
-        : undefined;
-    const filteredBonds = sortedBonds === null || sortedBonds === void 0 ? void 0 : sortedBonds.filter((bond) => { var _a, _b; return ((_a = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _a === void 0 ? void 0 : _a.includes(activeOption)) && !(bond === null || bond === void 0 ? void 0 : bond.soldOut) && ((_b = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _b === void 0 ? void 0 : _b.includes(bond.chainId)); });
-    const selectedBonds = activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds;
-    const slicedBonds = selectedBonds === null || selectedBonds === void 0 ? void 0 : selectedBonds.filter((bond) => { var _a; return (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.includes(bond.chainId); }).slice(0, 3);
-    const parsedBondsToRender = slicedBonds === null || slicedBonds === void 0 ? void 0 : slicedBonds.map((bond) => {
-        var _a, _b, _c;
-        const contractAddress = bond.billAddress;
-        const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol;
-        return {
-            payoutTokenName: payoutTokenName,
-            contractAddress,
-            vestingTerm: (_a = bond.vestingTerm) !== null && _a !== void 0 ? _a : 0,
-            bonus: 'bonus' in bond ? bond.bonus : ((_c = (_b = findHighestTrueBondPrice('0', bond)) === null || _b === void 0 ? void 0 : _b.bonusWithFee) !== null && _c !== void 0 ? _c : 0),
-            chainId: bond.chainId,
-        };
-    });
-    useEffect(() => {
-        if (account) {
-            setActiveOption('For You');
-        }
-        else {
-            setActiveOption('Hot');
-        }
-    }, [account]);
-    return (jsxs(Flex, { sx: { mt: '15px', flexDirection: 'column', width: '100%', display: ['none', 'none', 'none', 'flex'] }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Flex, { children: [jsx$2(Flex, { sx: {
-                                    width: ['60px', '60px', '60px', 'unset'],
-                                    mr: ['0px', '0px', '0px', '15px'],
-                                    alignItems: 'center',
-                                    color: 'grey',
-                                    fontSize: ['11px'],
-                                    fontWeight: 500,
-                                }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] } })] }), jsx$2(Flex, { sx: {
-                    my: '10px',
-                    minHeight: '47.45px',
-                }, children: parsedBondsToRender &&
-                    parsedBondsToRender.length > 0 &&
-                    parsedBondsToRender.map((bond, index) => {
-                        return jsx$2(SmallRecommendationCard, { recommendation: bond }, `${bond.payoutTokenName}-${index}`);
-                    }) })] }));
-};
-
-// import track from 'utils/track'
-const FavIcon = ({ filterOption, setFilterOption, }) => {
-    const handleFilterOption = (newOption) => {
-        setFilterOption(newOption);
-    };
-    return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
-            handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
-        }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: "Star", width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
-};
-
-const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
-    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsxs(Flex$1, { sx: { width: '100%', maxWidth: '340px' }, children: [jsx$2(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", width: '100%', sx: {
-                                        fontWeight: 600,
-                                        background: 'white2',
-                                        height: '30px',
-                                        fontSize: '14px',
-                                        color: 'white',
-                                        width: ['calc(50vw - 25px)'],
-                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: ["BONUS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "tooltip-header" })] })] })] }));
-};
-
-const styles$7 = {
-    buyContainer: {
-        width: '100%',
-        mb: ['30px', '30px', '30px', '0px'],
-        flexDirection: 'column',
-    },
-    cardContainer: {
-        width: '100%',
-        background: 'white2',
-        borderRadius: 'normal',
-        flexDirection: 'column',
-    },
-    infoRowsContainer: {
-        width: '100%',
-        flexDirection: 'column',
-        mb: '10px',
-    },
-    infoRow: {
-        width: '100%',
-        justifyContent: 'space-between',
-    },
-    infoTitle: {
-        fontSize: '12px',
-        fontWeight: 400,
-    },
-    infoData: {
-        fontSize: '12px',
-        fontWeight: 700,
-    },
-};
-({
-    [types.LaunchBondTiers.Bronze]: '#CD7F32',
-    [types.LaunchBondTiers.Silver]: '#C0C0C0',
-    [types.LaunchBondTiers.Gold]: '#FFD700',
-    [types.LaunchBondTiers.Diamond]: '#B9F2FF',
-    [types.LaunchBondTiers.Legend]: '#a587e6', // Replaced hex color for a violet hex
-});
-
-const ParticipationSuccessful = ({ onDismiss, launchBond, inputAmount, }) => {
-    var _a, _b, _c, _d;
-    const { data: tokenPrices } = useTokenPrices();
-    const principalTokenPrice = (_a = tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.find((token) => { var _a, _b, _c; return ((_a = token === null || token === void 0 ? void 0 : token.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_c = (_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.token) === null || _b === void 0 ? void 0 : _b.address[launchBond === null || launchBond === void 0 ? void 0 : launchBond.chainId]) === null || _c === void 0 ? void 0 : _c.toLowerCase()); })) === null || _a === void 0 ? void 0 : _a.price;
-    const inputValue = parseFloat(inputAmount !== null && inputAmount !== void 0 ? inputAmount : '0');
-    const depositAmountUsd = inputValue * (principalTokenPrice !== null && principalTokenPrice !== void 0 ? principalTokenPrice : 0);
-    const userAllocation = depositAmountUsd / (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice);
-    const userAllocationUsd = userAllocation * (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice);
-    const finishTime = ((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.redeemTime) !== null && _b !== void 0 ? _b : 0) * 1000;
-    const finishDate = new Date(finishTime);
-    const month = finishDate.toLocaleDateString('en-US', { month: 'short' });
-    const getDayWithSuffix = (day) => {
-        if (day > 3 && day < 21)
-            return `${day}th`;
-        switch (day % 10) {
-            case 1:
-                return `${day}st`;
-            case 2:
-                return `${day}nd`;
-            case 3:
-                return `${day}rd`;
-            default:
-                return `${day}th`;
-        }
-    };
-    const day = finishDate.getDate();
-    const formattedFinishDate = `${month} ${getDayWithSuffix(day)} at 11 UTC.`;
-    const initialRelease = userAllocation * ((launchBond === null || launchBond === void 0 ? void 0 : launchBond.initialRelease) / 10000);
-    const initialReleaseUsd = initialRelease * ((_c = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice) !== null && _c !== void 0 ? _c : 0);
-    const vestedAmount = userAllocation * (1 - (launchBond === null || launchBond === void 0 ? void 0 : launchBond.initialRelease) / 10000);
-    const vestedAmountUsd = vestedAmount * ((_d = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initPrice) !== null && _d !== void 0 ? _d : 0);
-    return (jsxs(Modal, { children: [jsx$2(ModalHeader, { hideDivider: true }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '15px' }, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700 }, children: "Participation Details" }) }), jsxs(Flex, { sx: {
-                            fontSize: '14px',
-                            fontWeight: 400,
-                            flexDirection: 'column',
-                        }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Your Deposit" }), jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: [getFirstNonZeroDigits(inputValue, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.token.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", depositAmountUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsx$2(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Your Allocation" }), jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [getFirstNonZeroDigits(userAllocation, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", userAllocationUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Initial Release", jsx$2(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: `You'll be able to claim an initial release of ${launchBond.initialRelease / 100}% 
-                    of your allocation on ${formattedFinishDate}` }), children: jsx$2(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [getFirstNonZeroDigits(initialRelease, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: {
-                                                    color: 'textDisabledButton',
-                                                    ml: '5px',
-                                                }, children: ["($", initialReleaseUsd.toFixed(2), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Vested Tokens", jsx$2(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: `Remaining tokens will vest linearly over ${getTimePeriods(parseInt(launchBond.vestingTerm)).months} months after claiming the initial release.` }), children: jsx$2(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [getFirstNonZeroDigits(vestedAmount, 2), " ", launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", vestedAmountUsd.toFixed(2), ")"] })] })] }), jsx$2(Flex, { sx: { mt: '10px' }, children: `Your purchased bond can be found under the "Your Bonds" tab.` })] }), jsx$2(Button, { onClick: onDismiss, sx: { fontSize: '16px', width: '100%', mt: '15px' }, children: "Close" })] })] }));
+            mr: '0px',
+        },
+    },
+    subTitle: {
+        color: 'textDisabledButton',
+        fontSize: '12px',
+        fontWeight: 400,
+        lineHeight: '16px',
+    },
 };
 
-const BuyAction = ({ launchBond, inputValue, selectedCurrency, soldout, }) => {
-    var _a, _b;
-    // Local state
-    const [loading, setLoading] = useState(false);
-    // Hooks
-    const { switchChain: onSelectChain } = useSwitchChain();
-    const { address: account, chainId } = useAccount();
-    const { data: currencyBalanceString } = useCurrencyBalance(selectedCurrency, account, launchBond.chainId);
-    const exceedsBalance = parseFloat(inputValue) > parseFloat(currencyBalanceString !== null && currencyBalanceString !== void 0 ? currencyBalanceString : '0');
-    usePopups();
-    // Buy confirm modal
-    const [onOpenPurchaseModal] = useModal(jsx$2(ParticipationSuccessful, { launchBond: launchBond, inputAmount: inputValue }), true, true, `confirm buy modal`);
-    // Approve logic
-    const [approvalState, approveCallback] = useApproval(inputValue, selectedCurrency, launchBond === null || launchBond === void 0 ? void 0 : launchBond.contractAddress, account, chainId);
-    const handleApprove = () => {
-        setLoading(true);
-        approveCallback().finally(() => setLoading(false));
-    };
-    const { writeContractAsync } = useWriteContract();
-    const onBuyBill = () => __awaiter$9(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const amount = new BigNumber$1(inputValue)
-            .times(new BigNumber$1(10).pow((_a = selectedCurrency.decimals[launchBond.chainId]) !== null && _a !== void 0 ? _a : 18))
-            .toString();
-        const maxPrice = new BigNumber$1((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.trueBillPrice) !== null && _b !== void 0 ? _b : '0').times(102).div(100).toFixed(0);
-        const args = [amount, maxPrice, account];
-        yield writeContractAsync({
-            address: launchBond === null || launchBond === void 0 ? void 0 : launchBond.contractAddress,
-            abi: launchBondsABI_V2_2_0,
-            functionName: 'deposit',
-            args: args,
-            chain: launchBond.chainId,
-            account,
-        });
-    });
-    const handleBuyBill = () => {
-        setLoading(true);
-        onBuyBill()
-            .then(() => {
-            if (chainId && account) {
-                console.log('Purchase successful, open purchase modal');
-                onOpenPurchaseModal();
-                track({
-                    event: 'bond',
-                    chain: chainId,
-                    data: {
-                        cat: 'buy',
-                        type: launchBond.billVersion === types.BillVersion.FlashTieredSale ? 'flash' : 'launch',
-                        principalToken: launchBond === null || launchBond === void 0 ? void 0 : launchBond.token.symbol,
-                        earnToken: launchBond === null || launchBond === void 0 ? void 0 : launchBond.earnToken.symbol,
-                        amount: inputValue,
-                        usdAmount: inputValue, // TODO: fix usdAmount here because this assumes principal token is stablecoin
-                    },
-                });
-            }
-        })
-            .catch((e) => {
-            console.log(e);
-            // addToastError(e)
+const SmallRecommendationCard = ({ recommendation }) => {
+    var _a;
+    const vestingTime = getTimePeriods((_a = recommendation.vestingTerm) !== null && _a !== void 0 ? _a : 0, true);
+    return (jsxs(Flex, { sx: styles$7.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx$2(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles$7.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx$2(Flex, { sx: styles$7.subTitle, children: "Bonus" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.bonus > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.bonus.toFixed(2), "%"] })] })] }));
+};
+
+const RecommendationCards$1 = () => {
+    const topTags = useTopTags();
+    const { address: account } = useAccount();
+    const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags];
+    const [activeOption, setActiveOption] = useState(options[0]);
+    const { data: hotRecommendations } = useHotBonds();
+    const { data: bonds } = useBondsData();
+    const SDKConfig = useSDKConfig();
+    const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3');
+    const sortedBonds = bonds && (bonds === null || bonds === void 0 ? void 0 : bonds.length) > 0
+        ? [...bonds].sort((a, b) => {
+            var _a, _b, _c, _d;
+            return ((_b = (_a = findHighestTrueBondPrice('0', b)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) -
+                ((_d = (_c = findHighestTrueBondPrice('0', a)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 0);
         })
-            .finally(() => {
-            setLoading(false);
-        });
-    };
-    const saleStartTime = ((_a = launchBond === null || launchBond === void 0 ? void 0 : launchBond.initTime) !== null && _a !== void 0 ? _a : 0) * 1000;
-    const saleFinishTime = ((_b = launchBond === null || launchBond === void 0 ? void 0 : launchBond.finishTime) !== null && _b !== void 0 ? _b : 0) * 1000;
-    const now = new Date().getTime();
-    const saleHasStarted = now > saleStartTime;
-    const saleHasFinished = now > saleFinishTime || launchBond.finalized;
-    const error = !saleHasStarted
-        ? `Sale hasn't started`
-        : saleHasFinished
-            ? 'Sale Finished'
-            : exceedsBalance
-                ? 'Exceeds balance'
-                : soldout
-                    ? 'Soldout'
-                    : chainId !== launchBond.chainId
-                        ? `Switch to ${NETWORK_LABEL[launchBond.chainId]}`
-                        : !inputValue || parseFloat(inputValue) === 0
-                            ? 'Insert amount'
-                            : null;
-    return (jsx$2(Flex, { sx: { width: '100%', ml: ['0', '0', '0', '10px'], mb: ['10px', '10px', '10px', '0'] }, children: !account ? (jsx$2(ConnectButton, {})) : chainId !== launchBond.chainId ? (jsx$2(Button, { fullWidth: true, onClick: () => {
-                onSelectChain({ chainId: launchBond.chainId });
-            }, children: `Switch to ${NETWORK_LABEL[launchBond.chainId]}` })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx$2(Button, { fullWidth: true, onClick: handleApprove, disabled: approvalState === ApprovalState.PENDING || loading || !!error, load: approvalState === ApprovalState.PENDING || loading, children: error ? error : approvalState === ApprovalState.PENDING ? 'Enabling' : 'Enable' })) : (jsx$2(Button, { fullWidth: true, onClick: handleBuyBill, disabled: loading || !!error, load: loading, children: error ? error : 'Buy' })) }));
+        : undefined;
+    const filteredBonds = sortedBonds === null || sortedBonds === void 0 ? void 0 : sortedBonds.filter((bond) => { var _a, _b; return ((_a = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _a === void 0 ? void 0 : _a.includes(activeOption)) && !(bond === null || bond === void 0 ? void 0 : bond.soldOut) && ((_b = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _b === void 0 ? void 0 : _b.includes(bond.chainId)); });
+    const selectedBonds = activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds;
+    const slicedBonds = selectedBonds === null || selectedBonds === void 0 ? void 0 : selectedBonds.filter((bond) => { var _a; return (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.includes(bond.chainId); }).slice(0, 3);
+    const parsedBondsToRender = slicedBonds === null || slicedBonds === void 0 ? void 0 : slicedBonds.map((bond) => {
+        var _a, _b, _c;
+        const contractAddress = bond.billAddress;
+        const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol;
+        return {
+            payoutTokenName: payoutTokenName,
+            contractAddress,
+            vestingTerm: (_a = bond.vestingTerm) !== null && _a !== void 0 ? _a : 0,
+            bonus: 'bonus' in bond ? bond.bonus : ((_c = (_b = findHighestTrueBondPrice('0', bond)) === null || _b === void 0 ? void 0 : _b.bonusWithFee) !== null && _c !== void 0 ? _c : 0),
+            chainId: bond.chainId,
+        };
+    });
+    useEffect(() => {
+        if (account) {
+            setActiveOption('For You');
+        }
+        else {
+            setActiveOption('Hot');
+        }
+    }, [account]);
+    return (jsxs(Flex, { sx: { mt: '15px', flexDirection: 'column', width: '100%', display: ['none', 'none', 'none', 'flex'] }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Flex, { children: [jsx$2(Flex, { sx: {
+                                    width: ['60px', '60px', '60px', 'unset'],
+                                    mr: ['0px', '0px', '0px', '15px'],
+                                    alignItems: 'center',
+                                    color: 'grey',
+                                    fontSize: ['11px'],
+                                    fontWeight: 500,
+                                }, children: "BONDS MARKETS:" }), jsx$2(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] } })] }), jsx$2(Flex, { sx: {
+                    my: '10px',
+                    minHeight: '47.45px',
+                }, children: parsedBondsToRender &&
+                    parsedBondsToRender.length > 0 &&
+                    parsedBondsToRender.map((bond, index) => {
+                        return jsx$2(SmallRecommendationCard, { recommendation: bond }, `${bond.payoutTokenName}-${index}`);
+                    }) })] }));
 };
 
-const BondCards = ({ bond }) => {
-    return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs(Flex, { className: "bond-card-title", sx: { alignItems: 'center' }, children: ["Bonus", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the percentage of additional tokens you\u2019ll get compared to buying at market price." }), 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(Flex, { sx: { color: 'success' }, children: [((bond.tgePrice / bond.initPrice) * 100 - 100).toFixed(0), "%"] })] }), jsxs("div", { className: "bond-card-block", sx: {
-                    fontSize: '13px !important',
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs(Flex, { className: "bond-card-title", children: ["TGE", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the date and time when this token will become tradeable and officially live on-chain." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "May 25th, 13:00 UTC"] }), jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs("div", { className: "bond-card-title", children: ["Initial Release", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: "This is the percentage of tokens you can claim immediately on May 25th at 11:00 UTC. The rest follows the vesting schedule." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "25%"] }), jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs("div", { className: "bond-card-title", children: ["Vesting Terms", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["Remaining tokens will vest linearly over ", getTimePeriods(parseInt(bond.vestingTerm)).months, " months after claiming the initial release."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx$2("div", { className: "bond-card-tooltip", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), getTimePeriods(parseInt(bond.vestingTerm)).months, " M"] })] }));
+// import track from 'utils/track'
+const FavIcon = ({ filterOption, setFilterOption, }) => {
+    const handleFilterOption = (newOption) => {
+        setFilterOption(newOption);
+    };
+    return (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
+            handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
+        }, children: jsx$2(AnimatePresence, { mode: "wait", children: jsx$2(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx$2(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx$2(Svg, { icon: "Star", width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
 };
 
-const BuyComponent = ({ bond, onDismiss }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    // Hooks
-    const { data: userEscrowWeight } = useTierPoints();
-    const userTier = getUserTier(userEscrowWeight);
-    const { address, chainId } = useAccount();
-    const { data: principalTokenBalance } = useCurrencyBalance(bond.token, address, bond.chainId);
-    // Local state
-    const [inputValue, setInputValue] = useState('');
-    // Display Values
-    const raiseGoal = getBalanceNumber(new BigNumber$1((_a = bond === null || bond === void 0 ? void 0 : bond.totalRaise) !== null && _a !== void 0 ? _a : '0'), 18);
-    const totalPrincipalBilled = getBalanceNumber(new BigNumber$1((_b = bond === null || bond === void 0 ? void 0 : bond.totalPrincipalBilled) !== null && _b !== void 0 ? _b : '0'), 18);
-    const percentageSold = (totalPrincipalBilled * 100) / raiseGoal;
-    const inputValueToDisplay = parseFloat(inputValue).toFixed(2);
-    const inputValueToDisplayUSD = parseFloat(inputValueToDisplay) * bond.principalTokenPrice;
-    const youGet = parseFloat(inputValue) / (bond === null || bond === void 0 ? void 0 : bond.initPrice);
-    const youGetUSD = youGet * (bond === null || bond === void 0 ? void 0 : bond.tgePrice);
-    const bonusUSD = youGetUSD - inputValueToDisplayUSD;
-    const airdropBonus = (_c = bond === null || bond === void 0 ? void 0 : bond.tiersAirdrop) === null || _c === void 0 ? void 0 : _c[userTier !== null && userTier !== void 0 ? userTier : 'noTier'];
-    (parseFloat(inputValue) * airdropBonus) / (bond === null || bond === void 0 ? void 0 : bond.initPrice);
-    `${bond === null || bond === void 0 ? void 0 : bond.totalAllocation}`;
-    new Date().getTime();
-    ((_d = bond === null || bond === void 0 ? void 0 : bond.initTime) !== null && _d !== void 0 ? _d : 0) * 1000;
-    ((_e = bond === null || bond === void 0 ? void 0 : bond.finishTime) !== null && _e !== void 0 ? _e : 0) * 1000;
-    return (jsxs(Modal, { onDismiss: onDismiss, sx: { width: '740px' }, children: [jsx$2(ModalHeader, { onDismiss: onDismiss, hideDivider: true }), jsx$2(Flex, { sx: styles$7.buyContainer, children: jsxs(Flex, { sx: styles$7.cardContainer, children: [jsx$2(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: jsxs(Flex, { children: [jsxs(Flex, { children: [jsx$2(Flex, { className: "title-container bondicon", children: jsx$2(TokenImage, { symbol: bond.earnToken.symbol, size: 50, chain: bond.chainId }) }), jsxs(Flex, { className: "title-container bondname", children: [bond.earnToken.symbol, jsx$2(ListTag, { text: (_f = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _f === void 0 ? void 0 : _f[0] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '15px' }, children: [jsxs(Flex, { className: "price-container price", children: ["$", bond.tgePrice] }), jsxs(Flex, { sx: { fontSize: '24px', fontWeight: 700 }, children: ["$", bond.initPrice] })] })] }) }), jsx$2(ProjectDescription, { description: bond.shortDescription, isProjectView: true }), jsx$2(BondCards, { bond: bond }), jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$7.infoRowsContainer), { mt: '10px' }), children: [jsxs(Flex, { sx: styles$7.infoRow, children: [jsx$2(Text, { sx: styles$7.infoTitle, children: "You Spend:" }), jsxs(Text, { sx: styles$7.infoData, children: [isNaN(parseFloat(inputValueToDisplay)) ? 0 : inputValueToDisplay, " ", bond === null || bond === void 0 ? void 0 : bond.token.symbol, " = $", isNaN(inputValueToDisplayUSD) ? '0' : inputValueToDisplayUSD.toFixed(2)] })] }), jsxs(Flex, { sx: styles$7.infoRow, children: [jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$7.infoTitle), { alignItems: 'center' }), children: ["Bonus:", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex, { className: "row-container premium-icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Text, { sx: Object.assign(Object.assign({}, styles$7.infoData), { color: 'success' }), children: ["$", isNaN(bonusUSD) ? '0' : bonusUSD.toFixed(2)] })] }), jsxs(Flex, { sx: styles$7.infoRow, children: [jsx$2(Text, { sx: styles$7.infoTitle, children: "You Get:" }), jsxs(Text, { sx: styles$7.infoData, children: [isNaN(youGet) ? 0 : formatNumberSI(youGet, 0), " ", bond === null || bond === void 0 ? void 0 : bond.earnToken.symbol, " = $", isNaN(youGetUSD) ? '0' : youGetUSD.toFixed(2)] })] })] }), jsx$2(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: bond === null || bond === void 0 ? void 0 : bond.token, handleValueBtn: () => { var _a; return setInputValue((_a = new BigNumber$1(principalTokenBalance !== null && principalTokenBalance !== void 0 ? principalTokenBalance : '0')) === null || _a === void 0 ? void 0 : _a.toString()); }, handleCurrencySelect: () => null, chainId: bond === null || bond === void 0 ? void 0 : bond.chainId, enableZap: false, bondPrincipalToken: bond === null || bond === void 0 ? void 0 : bond.token, tokenBalance: principalTokenBalance, selectedTokenPrice: bond.principalTokenPrice, inputDisabled: false }), jsxs(Flex, { sx: {
-                                width: '100%',
-                                background: '#DE62F366',
-                                justifyContent: 'center',
-                                mt: '10px',
-                                borderRadius: 'normal',
-                                p: '2px 10px',
-                                fontSize: '12px',
-                                fontWeight: 400,
-                            }, children: ["This is a Pre-TGE Bond - Tokens will be tradeable upon listing.", jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Text, { sx: { textTransform: 'none' }, children: "Pre-TGE Bonds are a pre-sale for tokens before their Token Generation Event (TGE), when tokens are officially launched to the public." }), width: "315px", placement: "topRight", transformTip: "translate(9%, -10%)", children: jsx$2(Flex, { sx: { ml: '4px', minWidth: '14px' }, children: jsx$2(Svg, { icon: "questionCircle", width: 12 }) }) })] }), jsxs(Flex, { sx: {
-                                width: '100%',
-                                mt: '10px',
-                                justifyContent: 'space-between',
-                                height: ['unset', 'unset', 'unset', '40px'],
-                                flexDirection: ['column-reverse', 'column-reverse', 'column-reverse', 'row'],
-                            }, children: [jsx$2(Flex, { sx: { width: ['100%', '100%', '100%', '45%'], justifyContent: 'center' }, children: jsxs(Button, { variant: "secondary", onClick: () => {
-                                            var _a;
-                                            return window.open(`/swap?outputCurrency=${(_a = bond === null || bond === void 0 ? void 0 : bond.token) === null || _a === void 0 ? void 0 : _a.address[bond === null || bond === void 0 ? void 0 : bond.chainId]}&outputChain=${bond === null || bond === void 0 ? void 0 : bond.chainId}`, '_blank');
-                                        }, fullWidth: true, children: ["Get ", (_g = bond === null || bond === void 0 ? void 0 : bond.token) === null || _g === void 0 ? void 0 : _g.symbol] }) }), (bond === null || bond === void 0 ? void 0 : bond.contractAddress) ? (jsx$2(BuyAction, { launchBond: bond, inputValue: inputValue, selectedCurrency: bond === null || bond === void 0 ? void 0 : bond.token, soldout: (bond === null || bond === void 0 ? void 0 : bond.billType) === 'fcfs' && percentageSold === 100 })) : (jsx$2(Button, { disabled: true, fullWidth: true, sx: { ml: ['0', '0', '0', '10px'] }, children: `Sale hasn't started` }))] })] }) })] }));
+const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
+    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsxs(Flex$1, { sx: { width: '100%', maxWidth: '340px' }, children: [jsx$2(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", width: '100%', sx: {
+                                        fontWeight: 600,
+                                        background: 'white2',
+                                        height: '30px',
+                                        fontSize: '14px',
+                                        color: 'white',
+                                        width: ['calc(50vw - 25px)'],
+                                    }, placeholder: 'Search...' }), jsx$2(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: ["BONUS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx$2(Flex$1, { sx: { ml: '5px', mb: '3px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2("div", { className: "tooltip-header" })] })] })] }));
 };
 
 const Row = ({ bond }) => {
@@ -80424,7 +80444,12 @@ const Row = ({ bond }) => {
     const percentageSold = Math.floor((totalPrincipalBilled * 100) / raiseGoal);
     const earnToken = (_g = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _g === void 0 ? void 0 : _g.symbol;
     const tokensRemainingUSD = tokensRemaining * bond.earnTokenPrice;
-    const [handleOpenModal] = useModal(jsx$2(BuyComponent, { bond: bond }));
+    const [openBuyModal] = useModal(jsx$2(BuyComponent, { bond: bond }), true, true, `buyBondModal${bond.contractAddress}-${bond.chainId}-${bond === null || bond === void 0 ? void 0 : bond.index}`);
+    const handleOpenModal = () => {
+        const locationPath = window.location.pathname.replace('/', '');
+        openBuyModal();
+        window.history.pushState({}, '', `${locationPath}?bondAddress=${bond === null || bond === void 0 ? void 0 : bond.contractAddress}&bondChain=${bond.chainId}`);
+    };
     return (jsxs("div", { className: `bond-row`, onClick: handleOpenModal, sx: {
             borderRadius: 'normal',
             background: NETWORK_COLORS[bond.chainId]

package/package.json

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