@ape.swap/bonds-sdk 3.0.57-test.1 → 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) {
@@ -74058,21 +74064,20 @@ const getPreTGEList = (apiURL) => __awaiter$9(void 0, void 0, void 0, function*
 });
 
 function usePreTGEBondsData() {
-    var _a, _b;
+    var _a;
     const { data: preTGEList } = usePreTGEList();
-    const { data: tokenPrices } = useTokenPrices();
     const SDKConfig = useSDKConfig();
     return useQuery({
-        queryKey: [QUERY_KEYS.PRE_TGE_BONDS, (_a = preTGEList === null || preTGEList === void 0 ? void 0 : preTGEList.length) !== null && _a !== void 0 ? _a : '', (_b = tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.length) !== null && _b !== void 0 ? _b : ''],
-        queryFn: () => getLaunchBondsPublicData(preTGEList, tokenPrices, SDKConfig.chains),
+        queryKey: [QUERY_KEYS.PRE_TGE_BONDS, (_a = preTGEList === null || preTGEList === void 0 ? void 0 : preTGEList.length) !== null && _a !== void 0 ? _a : ''],
+        queryFn: () => getLaunchBondsPublicData(preTGEList, SDKConfig.chains),
         staleTime: 60000,
         refetchOnWindowFocus: false,
-        enabled: !!preTGEList && preTGEList.length > 0 && !!tokenPrices && tokenPrices.length > 0,
+        enabled: !!preTGEList && preTGEList.length > 0,
     });
 }
-const getLaunchBondsPublicData = (preTGEBonds, tokenPrices, chains) => __awaiter$9(void 0, void 0, void 0, function* () {
+const getLaunchBondsPublicData = (preTGEBonds, chains) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        if (!(preTGEBonds === null || preTGEBonds === void 0 ? void 0 : preTGEBonds.length) && !(tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.length))
+        if (!(preTGEBonds === null || preTGEBonds === void 0 ? void 0 : preTGEBonds.length))
             return null;
         const data = [];
         for (const chain of chains) {
@@ -74088,19 +74093,11 @@ const getLaunchBondsPublicData = (preTGEBonds, tokenPrices, chains) => __awaiter
                 preTGEBondsIds.push(bond.index);
                 const bill = bond;
                 return [
-                    {
-                        address: bill.contractAddress,
-                        name: 'billPrice',
-                    },
                     // Get bill price with principal tokens
                     {
                         address: bill.contractAddress,
                         name: 'trueBillPrice',
                     },
-                    {
-                        address: bill.contractAddress,
-                        name: 'currentFee',
-                    },
                     // Terms
                     // (1) endTime (2) startTime (3) vestingTerm (4) minimumPrice (5) oversubscription (6) initialRelease (7) totalRaise (8) maxTotalPayout
                     {
@@ -74129,22 +74126,14 @@ const getLaunchBondsPublicData = (preTGEBonds, tokenPrices, chains) => __awaiter
             const vals = yield multicall(chainId, launchBondsABI_V2_2_0, launchBondsCalls);
             const chunkSize = vals.length / filteredBonds.length;
             const chunkedBills = lodashExports.chunk(vals, chunkSize);
-            // const returnedBills = cleanLaunchBondData(launchBondsIds, chunkedBills, tokenPrices, chainId, launchBonds)
             const returnedBills = chunkedBills === null || chunkedBills === void 0 ? void 0 : chunkedBills.map((chunk, index) => {
-                var _a;
                 const bondConfig = filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.find((bill) => (bill === null || bill === void 0 ? void 0 : bill.index) === preTGEBondsIds[index]);
-                const principalTokenPrice = (_a = tokenPrices === null || tokenPrices === void 0 ? void 0 : tokenPrices.find((tokenPrice) => {
-                    var _a, _b, _c, _d;
-                    return ((_a = tokenPrice.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_d = (_c = (_b = bondConfig === null || bondConfig === void 0 ? void 0 : bondConfig.token) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[chainId]) === null || _d === void 0 ? void 0 : _d.toLowerCase()) &&
-                        tokenPrice.chainId === chainId;
-                })) === null || _a === void 0 ? void 0 : _a.price;
+                const principalTokenPrice = 1;
                 const earnTokenPrice = bondConfig.initPrice;
-                const [billPrice, trueBillPrice, currentFee, terms, totalPrincipalBilled, finalized, minPoints, maxPoints] = chunk;
-                const [endTime, startTime, vestingTerm, minimumPrice, oversubscription, initialRelease, totalRaise, maxTotalPayout,] = terms;
-                const priceUsd = principalTokenPrice && trueBillPrice && getBalanceNumber(trueBillPrice === null || trueBillPrice === void 0 ? void 0 : trueBillPrice.toString()) * principalTokenPrice;
-                const formatedPrice = priceUsd ? getFirstNonZeroDigits(priceUsd) : undefined;
-                return Object.assign(Object.assign({}, bondConfig), { oversubscription,
-                    initialRelease, priceUsd: formatedPrice, vestingTerm: vestingTerm === null || vestingTerm === void 0 ? void 0 : vestingTerm.toString(), trueBillPrice: trueBillPrice === null || trueBillPrice === void 0 ? void 0 : trueBillPrice.toString(), currentFee: currentFee === null || currentFee === void 0 ? void 0 : currentFee.toString(), maxTotalPayout: maxTotalPayout === null || maxTotalPayout === void 0 ? void 0 : maxTotalPayout.toString(), totalPrincipalBilled: totalPrincipalBilled === null || totalPrincipalBilled === void 0 ? void 0 : totalPrincipalBilled.toString(), minimumPrice: minimumPrice === null || minimumPrice === void 0 ? void 0 : minimumPrice.toString(), earnTokenPrice: earnTokenPrice, principalTokenPrice, totalRaise: totalRaise === null || totalRaise === void 0 ? void 0 : totalRaise.toString(), billPrice: billPrice.toString(), finalized: finalized[0], minPoints: minPoints.toString(), maxPoints: maxPoints.toString() });
+                const [trueBillPrice, terms, totalPrincipalBilled, finalized, minPoints, maxPoints] = chunk;
+                const [, , vestingTerm, , , initialRelease, totalRaise, maxTotalPayout] = terms;
+                const data = Object.assign(Object.assign({}, bondConfig), { initialRelease, vestingTerm: vestingTerm === null || vestingTerm === void 0 ? void 0 : vestingTerm.toString(), trueBillPrice: trueBillPrice === null || trueBillPrice === void 0 ? void 0 : trueBillPrice.toString(), maxTotalPayout: maxTotalPayout === null || maxTotalPayout === void 0 ? void 0 : maxTotalPayout.toString(), totalPrincipalBilled: totalPrincipalBilled === null || totalPrincipalBilled === void 0 ? void 0 : totalPrincipalBilled.toString(), earnTokenPrice: earnTokenPrice, principalTokenPrice, totalRaise: totalRaise === null || totalRaise === void 0 ? void 0 : totalRaise.toString(), finalized: finalized[0], minPoints: minPoints.toString(), maxPoints: maxPoints.toString() });
+                return data;
             });
             data.push(returnedBills);
         }
@@ -79412,7 +79401,6 @@ const GetUpToComponent = ({ bond, depositAmount }) => {
 const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isProjectView }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const SDKConfig = useSDKConfig();
-    const { data: geoData } = useGeoFencing();
     // Hooks
     const userChainId = useChainId();
     const { address: account } = useAccount();
@@ -79598,25 +79586,19 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
         }
     });
     const handleBothPurchases = () => {
-        var _a, _b;
-        if ((geoData === null || geoData === void 0 ? void 0 : geoData.countryCode) === 'AE' && blockedBondsForAE.includes((_b = (_a = bondData === null || bondData === void 0 ? void 0 : bondData.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '')) {
-            openGeofencingModal(); // ignore this for SOL migration
-        }
-        else {
-            setLoadingTx(true);
-            if (isZap) {
-                // ignore this for SOL migration
-                if (rateChanged) {
-                    openNewRateModal();
-                }
-                else {
-                    handleZapCallback().finally(() => setLoadingTx(false));
-                }
+        setLoadingTx(true);
+        if (isZap) {
+            // ignore this for SOL migration
+            if (rateChanged) {
+                openNewRateModal();
             }
             else {
-                handleBuyCallback().finally(() => setLoadingTx(false));
+                handleZapCallback().finally(() => setLoadingTx(false));
             }
         }
+        else {
+            handleBuyCallback().finally(() => setLoadingTx(false));
+        }
     };
     const handleOpenModal = () => {
         var _a;
@@ -79641,13 +79623,7 @@ const BuyBond = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, isPro
     const [onOpenZapModal] = useModal(jsx$2(ZapModal, { outputToken: bondData === null || bondData === void 0 ? void 0 : bondData.lpToken, account: account, chainId: bondData === null || bondData === void 0 ? void 0 : bondData.chainId }), true, true, 'zapModal');
     const [openNewRateModal] = useModal(jsx$2(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, isZap: isZap, fetchingZapQuote: fetchingZapQuote, zapError: zapError, handleZap: () => handleZapCallback().finally(() => setLoadingTx(false)) }), true, false);
     const [openNoBonusModal] = useModal(jsx$2(NoBonusModal, { onAcknowledge: handleBothPurchases, showcaseTokenName: bondData === null || bondData === void 0 ? void 0 : bondData.showcaseTokenName }), true, true, 'NoBonusModal');
-    const [openGeofencingModal] = useModal(jsx$2(RestrictedRegionModal, {}));
-    const blockedBondsForAE = [
-        '0x0719CCaF2f07f59b23DB7d80E3d2791A0836bdfD'.toLowerCase(),
-        '0xBc48794a04777E7170bD5633E8b728f8a0945971'.toLowerCase(),
-        '0x94A283756B70c2A77bc58Ae0E2615Caf14310186'.toLowerCase(),
-        '0x6639D4acAe77967c253C75cBfEd7C612682E2704'.toLowerCase(),
-    ];
+    useModal(jsx$2(RestrictedRegionModal, {}));
     // Effects
     const [hasChecked, setHasChecked] = useState(false);
     useEffect(() => {
@@ -79748,151 +79724,431 @@ 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 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 remainingTokensUsd = (bond) => {
-        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
+    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);
@@ -80068,11 +80324,11 @@ const BondRowsByChain = ({ bonds, hideTitles }) => {
     const SDKConfig = useSDKConfig();
     const validatedChains = (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.filter((chain) => MAINNET_CHAINS.includes(chain));
     return (jsx$2(Flex$1, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
-            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: hideTitles ? false : SDKConfig.useHotBonds ? chain === types.ChainId.BSC || chain === types.ChainId.MAINNET : false }, chain));
+            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: bonds, hideTitles: hideTitles, showHotBonds: hideTitles ? false : SDKConfig.useHotBonds ? chain === types.ChainId.BSC || chain === types.ChainId.ARBITRUM : false }, chain));
         }) }));
 };
 
-const styles$8 = {
+const styles$7 = {
     smallCardContainer: {
         width: '100%',
         p: '6px 12px',
@@ -80081,366 +80337,100 @@ const styles$8 = {
         justifyContent: 'space-between',
         alignItems: 'center',
         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: '10px',
+        ':last-of-type': {
+            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 at May 25th, 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 }) => {
@@ -80454,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]
@@ -80507,8 +80502,8 @@ const PreTGERows = () => {
 
 const Bonds = () => {
     // Fetch data
+    usePreTGEBondsData();
     useHotBonds();
-    useGeoFencing();
     const { favTokens } = useFavoriteTokens();
     const { data: bondData, refetch: refetchBondsData } = useBondsData();
     const { data: allBonds } = useBondsList();