@ape.swap/bonds-sdk 4.2.3-test.0 → 4.2.3-test.2

package/dist/components/uikit-sdk/Svg/Icons/TurnArrow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SvgProps } from './types';
+declare const TurnArrow: React.FC<SvgProps>;
+export default TurnArrow;

package/dist/components/uikit-sdk/Svg/types.d.ts

@@ -1,4 +1,5 @@
 export declare enum icons {
+    TURN_ARROW = "turnArrow",
     CARET = "caret",
     EXTERNAL = "external",
     MORE = "more",

package/dist/hooks/useTopTags.d.ts

@@ -1,2 +1 @@
-import { BondsData } from '../types/bonds';
-export declare const useTopTags: (initialBondList?: BondsData[]) => string[];
+export declare const useTopTags: () => string[];

package/dist/main.js

@@ -4219,6 +4219,7 @@ var tslib_es6$1 = /*#__PURE__*/Object.freeze({
 
 var icons;
 (function (icons) {
+    icons["TURN_ARROW"] = "turnArrow";
     icons["CARET"] = "caret";
     icons["EXTERNAL"] = "external";
     icons["MORE"] = "more";
@@ -4849,6 +4850,10 @@ const BASE$1 = ({ width }) => {
     return (jsxs("svg", { width: width || '30', height: width || '30', viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx$2("rect", { width: "30", height: "30", fill: "#0052FF" }), jsx$2("path", { d: "M14.9646 25.5633C20.7986 25.5633 25.528 20.8339 25.528 14.9999C25.528 9.16591 20.7986 4.43652 14.9646 4.43652C9.43001 4.43652 4.88952 8.69296 4.43809 14.1109H20.1134V15.87H4.43652C4.87896 21.297 9.42354 25.5633 14.9646 25.5633Z", fill: "white" })] }));
 };
 
+const TurnArrow = ({ width }) => {
+    return (jsx$2("svg", { xmlns: "http://www.w3.org/2000/svg", width: width || '30', height: width || '30', viewBox: "0 0 24 24", sx: { transform: 'rotate(270deg)' }, children: jsxs("g", { fill: "none", stroke: "#73728E", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "0.5", children: [jsx$2("path", { d: "m14 15l-5 5l-5-5" }), jsx$2("path", { d: "M20 4h-7a4 4 0 0 0-4 4v12" })] }) }));
+};
+
 const Svg = (_a) => {
     var { icon } = _a, props = __rest(_a, ["icon"]);
     const getStyles = ({ degree, color, margin }) => dynamicStyles$1.generic({
@@ -4933,6 +4938,8 @@ const Svg = (_a) => {
             return jsx$2(Timer, Object.assign({}, props, { getStyles: getStyles }));
         case icons.TICK:
             return jsx$2(Tick, Object.assign({}, props, { getStyles: getStyles }));
+        case icons.TURN_ARROW:
+            return jsx$2(TurnArrow, Object.assign({}, props, { getStyles: getStyles }));
         // ONLY TOKENS BELOW
         case icons.BLAST:
             return jsx$2(BLAST, Object.assign({}, props, { getStyles: getStyles }));
@@ -76669,39 +76676,44 @@ const YourBonds = ({ showOnly }) => {
 };
 
 // This basically returns the 2 tags with the higher active bond count
-const useTopTags = (initialBondList) => {
+const useTopTags = () => {
+    const { data: bonds } = useBondsData();
     const SDKConfig = useSDKConfig();
     const chains = SDKConfig.chains;
-    const bonds = initialBondList;
-    const countTagsInBonds = (bonds) => {
-        const tagCount = {};
-        bonds === null || bonds === void 0 ? void 0 : bonds.forEach((bond) => {
-            var _a;
-            if (bond.soldOut)
-                return;
-            (_a = bond.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => {
-                if (tag in tagCount) {
-                    tagCount[tag] += 1;
-                }
-                else {
-                    tagCount[tag] = 1;
-                }
+    return useMemo(() => {
+        if (!bonds || bonds.length === 0)
+            return [];
+        const countTagsInBonds = (bonds) => {
+            const tagCount = {};
+            bonds === null || bonds === void 0 ? void 0 : bonds.forEach((bond) => {
+                var _a;
+                if (bond.soldOut)
+                    return;
+                (_a = bond.tags) === null || _a === void 0 ? void 0 : _a.forEach((tag) => {
+                    if (tag in tagCount) {
+                        tagCount[tag] += 1;
+                    }
+                    else {
+                        tagCount[tag] = 1;
+                    }
+                });
             });
+            return tagCount;
+        };
+        const activeBonds = bonds === null || bonds === void 0 ? void 0 : bonds.filter((bond) => !bond.soldOut && (chains === null || chains === void 0 ? void 0 : chains.includes(bond.chainId)));
+        const filteredBonds = activeBonds === null || activeBonds === void 0 ? void 0 : activeBonds.filter((bond) => {
+            var _a, _b;
+            if (SDKConfig.bondPartner) {
+                return ((_a = bond === null || bond === void 0 ? void 0 : bond.bondPartner) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.bondPartner) === null || _b === void 0 ? void 0 : _b.toLowerCase());
+            }
+            else
+                return true;
         });
-        return tagCount;
-    };
-    const activeBonds = bonds === null || bonds === void 0 ? void 0 : bonds.filter((bond) => !bond.soldOut && (chains === null || chains === void 0 ? void 0 : chains.includes(bond.chainId)));
-    const filteredBonds = activeBonds === null || activeBonds === void 0 ? void 0 : activeBonds.filter((bond) => {
-        var _a, _b;
-        if (SDKConfig.bondPartner) {
-            return ((_a = bond === null || bond === void 0 ? void 0 : bond.bondPartner) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.bondPartner) === null || _b === void 0 ? void 0 : _b.toLowerCase());
-        }
-        else
-            return true;
-    });
-    const countedTags = countTagsInBonds(filteredBonds);
-    const sortedTagsArray = Object.entries(countedTags).sort((a, b) => b[1] - a[1]);
-    return sortedTagsArray.slice(0, 2).map((tagCountArray) => tagCountArray[0]);
+        const countedTags = countTagsInBonds(filteredBonds);
+        const sortedTagsArray = Object.entries(countedTags).sort((a, b) => b[1] - a[1]);
+        return sortedTagsArray.slice(0, 2).map((tagCountArray) => tagCountArray[0]);
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [bonds === null || bonds === void 0 ? void 0 : bonds.length]);
 };
 
 function adjustDecimals(numStr) {
@@ -79776,7 +79788,7 @@ const BuyComponentSolana = ({ onDismiss, bondAddress, bondChain, isProjectView,
             });
             // waits 3 seconds before triggering after-purchase flow
             yield new Promise((resolve) => setTimeout(resolve, 3000));
-            console.timeEnd('3 seconds elapsed. trigger bonds refetch');
+            console.log('3 seconds elapsed. trigger bonds refetch');
             addToastSuccess(txId, bondChain);
             setBillId === null || setBillId === void 0 ? void 0 : setBillId(nftMint.publicKey.toString());
         }
@@ -80265,21 +80277,151 @@ const CheckUrl = () => {
     return jsx$2(Fragment$1, {});
 };
 
-const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
+const styles$8 = {
+    smallCardContainer: {
+        width: '100%',
+        p: '6px 12px',
+        background: 'white2',
+        borderRadius: 'normal',
+        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 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 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), "%"] })] })] }));
+};
+
+function useHotBondContracts() {
+    const apiUrl = useURLByEnvironment('apiV2');
+    return useQuery({
+        queryKey: [QUERY_KEYS.HOT_BONDS_CONTRACTS],
+        queryFn: () => getHotBondsContracts(apiUrl),
+        staleTime: Infinity,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        retry: 1,
+    });
+}
+function useHotBonds() {
+    const { data: bondsData } = useBondsData();
+    const { data: hotBondContracts } = useHotBondContracts();
+    return useQuery({
+        queryKey: [QUERY_KEYS.HOT_BONDS, bondsData === null || bondsData === void 0 ? void 0 : bondsData.length, hotBondContracts === null || hotBondContracts === void 0 ? void 0 : hotBondContracts.length],
+        queryFn: () => getHotBonds(bondsData, hotBondContracts),
+        refetchOnWindowFocus: false,
+        refetchInterval: 30000,
+        enabled: !!bondsData && bondsData.length > 0 && !!hotBondContracts && hotBondContracts.length > 0,
+        retry: 0,
+    });
+}
+const getHotBondsContracts = (apiUrl) => __awaiter$9(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield axios.get(`${STRAPI_URL}/hot-bonds`);
+        return response.data.map((bond) => bond.BondAddress.toLowerCase());
+    }
+    catch (e) {
+        reportError({
+            apiUrl,
+            error: e,
+            extraInfo: { type: 'getHotBondsContracts', e },
+        });
+        return [];
+    }
+});
+const getHotBonds = (bondData, hotBondContracts) => __awaiter$9(void 0, void 0, void 0, function* () {
+    return bondData.filter((bond) => { var _a, _b, _c; return hotBondContracts.includes((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond === null || bond === void 0 ? void 0 : bond.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : ''); });
+});
+
+const RecommendationCards$1 = () => {
+    const topTags = useTopTags();
+    const { address: account } = useEVMAccount();
+    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 || b === void 0 ? void 0 : b.trueBondPrices)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) -
+                ((_d = (_c = findHighestTrueBondPrice('0', a === null || a === void 0 ? void 0 : a.trueBondPrices)) === 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, _d;
+        const contractAddress = 'billAddress' in bond ? bond.billAddress : (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond === null || bond === void 0 ? void 0 : bond.chainId];
+        const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol;
+        return {
+            payoutTokenName: payoutTokenName,
+            contractAddress,
+            vestingTerm: (_b = bond.vestingTerm) !== null && _b !== void 0 ? _b : 0,
+            bonus: 'bonus' in bond ? bond.bonus : ((_d = (_c = findHighestTrueBondPrice('0', bond === null || bond === void 0 ? void 0 : bond.trueBondPrices)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 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, }) => {
+    const { namingPreference } = useSDKConfig();
+    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: [jsx$2(Flex$1, { sx: { width: '125px' } }), jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: [namingPreference.toUpperCase(), 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 BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition = 'bottomRight', }) => {
@@ -80287,7 +80429,7 @@ const BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, toolti
     return (jsx$2("div", { className: `discount-column`, children: jsx$2(BonusComponent, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' }) }));
 };
 
-const BondRow = ({ bondAddress, bondChain, billArtCollection, payoutToken, billType, tag, bondSoldOut, trueBondPrices, minTier, bonus, airdropTooltip, vestingTermString, vestingCliffString, percentageAvailable, remainingTokensString, projectURL, twitterURL, auditURL, shortDescription, }) => {
+const BondRow = ({ bondAddress, bondChain, billArtCollection, payoutToken, billType, tag, bondSoldOut, trueBondPrices, minTier, bonus, airdropTooltip, vestingTermString, vestingCliffString, percentageAvailable, remainingTokensString, projectURL, twitterURL, auditURL, shortDescription, soldoutBondsCount, isOpen, }) => {
     var _a, _b, _c;
     const SDKConfig = useSDKConfig();
     const locationPath = window.location.pathname.replace('/', '');
@@ -80317,13 +80459,134 @@ const BondRow = ({ bondAddress, bondChain, billArtCollection, payoutToken, billT
         });
     };
     return (jsxs("div", { className: "bond-row" // Insert special campaign styles here
-        , onClick: handleOpenModal, sx: Object.assign({ borderRadius: 'normal' }, bondRowCampaignStyles[billArtCollection]), children: [jsx$2("div", { className: "token-info-container", sx: { width: ['40%', '40%', '40%', '30%'] }, children: jsx$2(TokenInfoAndName, { tokenSymbol: payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol, chain: bondChain, tag: tag, billArtCollection: billArtCollection }) }), SDKConfig.useCardsView && shortDescription && (jsx$2("div", { className: "short-description", children: jsx$2(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['60%', '60%', '60%', '70%'] }, children: [!SDKConfig.useCardsView && jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx$2(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx$2("div", { className: "tokens-remaining-column", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: percentageAvailable }), style: {
+        , onClick: handleOpenModal, sx: Object.assign({ borderRadius: 'normal' }, bondRowCampaignStyles[billArtCollection]), children: [jsx$2("div", { className: "token-info-container", sx: { width: ['40%', '40%', '40%', '30%'] }, children: jsx$2(TokenInfoAndName, { tokenSymbol: payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol, chain: bondChain, tag: tag, billArtCollection: billArtCollection }) }), SDKConfig.useCardsView && shortDescription && (jsx$2("div", { className: "short-description", children: jsx$2(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['60%', '60%', '60%', '70%'] }, children: [!SDKConfig.useCardsView && jsx$2(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx$2(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx$2("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
                                 justifyContent: 'center',
                                 display: ['none', 'none', 'none', 'flex'],
-                            }, showTooltip: true, toolTip: remainingTokensString }) }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_b = (_a = payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.address) === null || _a === void 0 ? void 0 : _a[bondChain]) !== null && _b !== void 0 ? _b : '', earnTokenSymbol: (_c = payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol) !== null && _c !== void 0 ? _c : '', bondContract: bondAddress !== null && bondAddress !== void 0 ? bondAddress : '', projectLink: projectURL, twitter: twitterURL, audit: auditURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] })] }, `${bondAddress}-${bondChain}`));
+                            }, showTooltip: true, toolTip: remainingTokensString })) }), jsx$2("div", { className: "tooltip-column", children: soldoutBondsCount ? (jsxs(Flex, { sx: { gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }, children: ["(", soldoutBondsCount, ")", jsx$2(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down', width: "8px" })] })) : (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_b = (_a = payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.address) === null || _a === void 0 ? void 0 : _a[bondChain]) !== null && _b !== void 0 ? _b : '', earnTokenSymbol: (_c = payoutToken === null || payoutToken === void 0 ? void 0 : payoutToken.symbol) !== null && _c !== void 0 ? _c : '', bondContract: bondAddress !== null && bondAddress !== void 0 ? bondAddress : '', projectLink: projectURL, twitter: twitterURL, audit: auditURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx$2(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) })) })] })] }, `${bondAddress}-${bondChain}`));
+};
+
+const getUserApiStats = (account) => __awaiter$9(void 0, void 0, void 0, function* () {
+    if (!account)
+        return null;
+    const { data } = yield axios.get(`https://dashboard-api.ape.bond/collector/userSalesInfo/purchased/${account}`);
+    return data;
+});
+function useUserApiStats() {
+    const { address: account } = useEVMAccount();
+    return useQuery({
+        queryKey: [`${QUERY_KEYS.USER_STATS}-${account}`],
+        queryFn: () => getUserApiStats(account),
+        staleTime: Infinity,
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        retry: 1,
+    });
+}
+
+const BuyAgainRow = () => {
+    var _a, _b, _c;
+    const { data: userData } = useUserApiStats();
+    const { data: bills } = useBondsData();
+    const SDKConfig = useSDKConfig();
+    const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
+    const bond = useMemo(() => {
+        if (userData && (userData === null || userData === void 0 ? void 0 : userData.Sales.length) > 0) {
+            const sortedPurchases = userData === null || userData === void 0 ? void 0 : userData.Sales.sort((a, b) => b.dollarValue - a.dollarValue);
+            const activeBills = bills === null || bills === void 0 ? void 0 : bills.filter((bill) => !isBondSoldOut(bill, SDKConfig.showLowValueBonds) && (chains === null || chains === void 0 ? void 0 : chains.includes(bill.chainId)));
+            const highestActivePurchase = sortedPurchases === null || sortedPurchases === void 0 ? void 0 : sortedPurchases.find((purchase) => activeBills === null || activeBills === void 0 ? void 0 : activeBills.find((bill) => {
+                var _a, _b;
+                if (purchase.contractAddress.toLowerCase() === ((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.contractAddress) === null || _a === void 0 ? void 0 : _a[bill.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()))
+                    return true;
+            }));
+            return activeBills === null || activeBills === void 0 ? void 0 : activeBills.find((bill) => {
+                var _a, _b, _c;
+                return ((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.contractAddress) === null || _a === void 0 ? void 0 : _a[bill.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
+                    ((_c = highestActivePurchase === null || highestActivePurchase === void 0 ? void 0 : highestActivePurchase.contractAddress) === null || _c === void 0 ? void 0 : _c.toLowerCase());
+            });
+        }
+    }, [SDKConfig.showLowValueBonds, bills, chains, userData]);
+    const bondAddress = (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond.chainId];
+    const remainingTokensFormat = (bond) => {
+        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
+        return formatNumberSI(parseFloat(tokensRemaining !== null && tokensRemaining !== void 0 ? tokensRemaining : '0'), 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 !== null && tokensRemaining !== void 0 ? tokensRemaining : '0');
+        return tokens.times(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : '0');
+    };
+    const remainingTokensString = bond
+        ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond).toNumber())})`
+        : '';
+    return bond ? (jsx$2(AnimatePresence, { children: jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+                position: 'relative',
+                overflow: 'hidden',
+                width: '100%',
+                mb: '10px',
+            }, children: [jsx$2(Flex, { sx: {
+                        p: '0 1px',
+                        width: '100%',
+                        pt: '5px',
+                        background: 'primaryButton',
+                        borderRadius: 'normal',
+                        flexDirection: 'column',
+                        opacity: 0.5,
+                    }, children: jsx$2(Flex, { className: "buy-again-header", sx: {
+                            width: '100%',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            pl: '26px',
+                            color: 'primaryBright',
+                            height: '91px',
+                        }, children: "BUY AGAIN" }) }), jsx$2(Flex, { onClick: () => {
+                        track({
+                            event: 'buyAgainClick',
+                            chain: bond.chainId,
+                            data: {
+                                bond: bond.earnToken.symbol,
+                            },
+                        });
+                    }, sx: { position: 'absolute', top: '25px', left: '1px', width: 'calc(100% - 2px)' }, children: jsx$2(BondRow, { bondAddress: (_b = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: (_c = bond.tags) === null || _c === void 0 ? void 0 : _c[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond === null || bond === void 0 ? void 0 : bond.trueBondPrices, minTier: bond === null || bond === void 0 ? void 0 : bond.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] }) })) : null;
+};
+
+const LoadingSkeleton = () => {
+    return (jsxs(Flex$1, { sx: { width: '100%', flexDirection: 'column', mt: '35px' }, children: [Array.from({ length: 5 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
+                    width: '100%',
+                    height: '70px',
+                    borderRadius: 'normal',
+                    mb: '5px',
+                } }, `row-shadow-${index}`))), jsx$2(Flex$1, { sx: { width: '100%', gap: '15px', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
+                        width: '100%',
+                        height: '125px',
+                        borderRadius: 'normal',
+                        mb: '5px',
+                    } }, `hot-card-shadow${index}`))) }), jsx$2(Flex$1, { sx: { width: '100%', flexDirection: 'column', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
+                        width: '100%',
+                        height: '70px',
+                        borderRadius: 'normal',
+                        mb: '5px',
+                    } }, `second-row-shadow-${index}`))) })] }));
+};
+
+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 SwiperContext$1 = createContext$1({
@@ -80342,7 +80605,7 @@ const SwiperProvider = ({ children }) => {
     return jsx$2(SwiperContext$1.Provider, { value: { swiper, setSwiper, destroySwiper }, children: children });
 };
 
-const styles$8 = {
+const styles$7 = {
     mainComponent: {
         width: '100%',
         flexDirection: 'column',
@@ -80404,7 +80667,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx$2(Flex, { sx: styles$8.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { tokenSymbol: bond.earnToken.symbol, chain: bond.chainId, tag: (_d = bond.tags) === null || _d === void 0 ? void 0 : _d[0], isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_g = (_f = (_e = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _g !== void 0 ? _g : '', earnTokenSymbol: (_j = (_h = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _h === void 0 ? void 0 : _h.symbol) !== null && _j !== void 0 ? _j : '', bondContract: (_l = (_k = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _k === void 0 ? void 0 : _k[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _l !== void 0 ? _l : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond, SDKConfig.useTiers) })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_m = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _m === void 0 ? void 0 : _m.days) ? `${(_o = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _o === void 0 ? void 0 : _o.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$7.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { tokenSymbol: bond.earnToken.symbol, chain: bond.chainId, tag: (_d = bond.tags) === null || _d === void 0 ? void 0 : _d[0], isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_g = (_f = (_e = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _g !== void 0 ? _g : '', earnTokenSymbol: (_j = (_h = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _h === void 0 ? void 0 : _h.symbol) !== null && _j !== void 0 ? _j : '', bondContract: (_l = (_k = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _k === void 0 ? void 0 : _k[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _l !== void 0 ? _l : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond, SDKConfig.useTiers) })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_m = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _m === void 0 ? void 0 : _m.days) ? `${(_o = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _o === void 0 ? void 0 : _o.days} D` : '-' })] })] })] }) }));
 };
 
 /**
@@ -85555,47 +85818,6 @@ const getDotPos = (index, carouselLength) => {
             : index - carouselLength;
 };
 
-function useHotBondContracts() {
-    const apiUrl = useURLByEnvironment('apiV2');
-    return useQuery({
-        queryKey: [QUERY_KEYS.HOT_BONDS_CONTRACTS],
-        queryFn: () => getHotBondsContracts(apiUrl),
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnMount: false,
-        retry: 1,
-    });
-}
-function useHotBonds() {
-    const { data: bondsData } = useBondsData();
-    const { data: hotBondContracts } = useHotBondContracts();
-    return useQuery({
-        queryKey: [QUERY_KEYS.HOT_BONDS, bondsData === null || bondsData === void 0 ? void 0 : bondsData.length, hotBondContracts === null || hotBondContracts === void 0 ? void 0 : hotBondContracts.length],
-        queryFn: () => getHotBonds(bondsData, hotBondContracts),
-        refetchOnWindowFocus: false,
-        refetchInterval: 30000,
-        enabled: !!bondsData && bondsData.length > 0 && !!hotBondContracts && hotBondContracts.length > 0,
-        retry: 0,
-    });
-}
-const getHotBondsContracts = (apiUrl) => __awaiter$9(void 0, void 0, void 0, function* () {
-    try {
-        const response = yield axios.get(`${STRAPI_URL}/hot-bonds`);
-        return response.data.map((bond) => bond.BondAddress.toLowerCase());
-    }
-    catch (e) {
-        reportError({
-            apiUrl,
-            error: e,
-            extraInfo: { type: 'getHotBondsContracts', e },
-        });
-        return [];
-    }
-});
-const getHotBonds = (bondData, hotBondContracts) => __awaiter$9(void 0, void 0, void 0, function* () {
-    return bondData.filter((bond) => { var _a, _b, _c; return hotBondContracts.includes((_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond === null || bond === void 0 ? void 0 : bond.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== null && _c !== void 0 ? _c : ''); });
-});
-
 const HotBondCards = () => {
     var _a;
     const { data: hotBonds } = useHotBonds();
@@ -85618,7 +85840,7 @@ const HotBondCards = () => {
         setActiveSlide(index);
         swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
     };
-    return (jsxs(Flex, { sx: styles$8.mainComponent, children: [jsx$2(Flex, { sx: styles$8.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$8.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
+    return (jsxs(Flex, { sx: styles$7.mainComponent, children: [jsx$2(Flex, { sx: styles$7.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$7.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
                     var _a;
                     return jsx$2(HotBondCard, { bond: bond }, `${(_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond === null || bond === void 0 ? void 0 : bond.chainId]}-${index}`);
                 }) }), jsxs(Flex, { sx: {
@@ -85705,31 +85927,16 @@ const ChainBanner = ({ chainId }) => {
                         }, children: "Get Started" }))] })] }, `banner-container-${chainId}`));
 };
 
-const BondRowsWithTitle = ({ chain, bonds, hideTitles, showHotBonds, showSolSkeleton, }) => {
+const ActiveBondRows = ({ chain, bonds, hideTitles, showHotBonds }) => {
     const { namingPreference } = useSDKConfig();
     const [isOpen, setIsOpen] = useState(true);
     const key = chain;
-    const { data: bondList } = useBondsList();
-    const solanaBondCount = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = bondList === null || bondList === void 0 ? void 0 : bondList.filter((bond) => bond.chainId === main.ChainId.SOL)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        /* eslint-disable react-hooks/exhaustive-deps */
-    }, [bondList === null || bondList === void 0 ? void 0 : bondList.length]);
-    return (jsx$2(Flex$1, { className: "bondrowswithtitle", children: jsxs(AnimatePresence, { initial: false, children: [jsx$2(Flex$1, { onClick: () => setIsOpen(!isOpen), sx: { cursor: 'pointer' }, children: jsx$2(ChainTitle, { chain: chain, pt: '5px', hideTitles: (bonds.length <= 0 && chain !== main.ChainId.SOL) ||
-                            hideTitles ||
-                            (!showSolSkeleton && chain === main.ChainId.SOL && bonds.length <= 0), isOpen: isOpen }) }), isOpen && (bonds.length > 0 || chain === main.ChainId.SOL) && (jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+    return (jsx$2(Flex$1, { className: "bondrowswithtitle", children: jsxs(AnimatePresence, { initial: false, children: [jsx$2(Flex$1, { onClick: () => setIsOpen(!isOpen), sx: { cursor: 'pointer' }, children: jsx$2(ChainTitle, { chain: chain, pt: '5px', hideTitles: (bonds.length <= 0 && chain !== main.ChainId.SOL) || hideTitles, isOpen: isOpen }) }), isOpen && (bonds.length > 0 || chain === main.ChainId.SOL) && (jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
                         position: 'relative',
                         overflow: 'hidden',
                         width: '100%',
                         marginTop: '0px',
-                    }, className: "bonds-card-container", children: [[main.ChainId.SOL, main.ChainId.MONAD_TESTNET].includes(chain) && !hideTitles && showSolSkeleton && (jsx$2(ChainBanner, { chainId: chain })), bonds.length <= 0 && chain === main.ChainId.SOL && !hideTitles && showSolSkeleton && (jsx$2(Flex$1, { sx: { width: '100%', flexDirection: 'column' }, className: "bonds-card-container", children: Array.from({ length: solanaBondCount }).map((_, index) => {
-                                return (jsx$2(Skeleton, { animation: "waves", sx: {
-                                        width: '100%',
-                                        height: '70px',
-                                        borderRadius: 'normal',
-                                        mb: '5px',
-                                    } }, `sol-shadow-${index}`));
-                            }) }, key)), bonds === null || bonds === void 0 ? void 0 : bonds.map((bondFromMap, index) => {
+                    }, className: "bonds-card-container", children: [[main.ChainId.SOL, main.ChainId.MONAD_TESTNET].includes(chain) && !hideTitles && jsx$2(ChainBanner, { chainId: chain }), bonds === null || bonds === void 0 ? void 0 : bonds.map((bondFromMap, index) => {
                             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
                             if (bondFromMap.soldOut) {
                                 const bond = bondFromMap;
@@ -85767,297 +85974,130 @@ const BondRowsWithTitle = ({ chain, bonds, hideTitles, showHotBonds, showSolSkel
                         }), showHotBonds && (jsx$2(SwiperProvider, { children: jsx$2(HotBondCards, {}) }))] }, key))] }) }, key));
 };
 
-const BondRowsByChain = ({ bonds, hideTitles, showSolSkeleton }) => {
-    var _a;
-    const SDKConfig = useSDKConfig();
-    const validatedChains = (_a = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains) === null || _a === void 0 ? void 0 : _a.filter((chain) => MAINNET_CHAINS.includes(chain));
-    const groupedBonds = bonds.reduce((acc, bond) => {
-        const { chainId } = bond;
-        if (!acc[chainId])
-            acc[chainId] = [];
-        acc[chainId].push(bond);
-        return acc;
-    }, {});
-    return (jsx$2(Flex$1, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
-            var _a, _b;
-            return (jsx$2(BondRowsWithTitle, { chain: chain, bonds: (_a = groupedBonds[chain]) !== null && _a !== void 0 ? _a : [], hideTitles: hideTitles, showHotBonds: hideTitles ? false : SDKConfig.useHotBonds ? (_b = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.hotBondChains) === null || _b === void 0 ? void 0 : _b.includes(chain) : false, showSolSkeleton: showSolSkeleton }, chain));
-        }) }));
-};
-
-const styles$7 = {
-    smallCardContainer: {
-        width: '100%',
-        p: '6px 12px',
-        background: 'white2',
-        borderRadius: 'normal',
-        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$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 } = useEVMAccount();
-    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 || b === void 0 ? void 0 : b.trueBondPrices)) === null || _a === void 0 ? void 0 : _a.bonusWithFee) !== null && _b !== void 0 ? _b : 0) -
-                ((_d = (_c = findHighestTrueBondPrice('0', a === null || a === void 0 ? void 0 : a.trueBondPrices)) === 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, _d;
-        const contractAddress = 'billAddress' in bond ? bond.billAddress : (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond === null || bond === void 0 ? void 0 : bond.chainId];
-        const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol;
-        return {
-            payoutTokenName: payoutTokenName,
-            contractAddress,
-            vestingTerm: (_b = bond.vestingTerm) !== null && _b !== void 0 ? _b : 0,
-            bonus: 'bonus' in bond ? bond.bonus : ((_d = (_c = findHighestTrueBondPrice('0', bond === null || bond === void 0 ? void 0 : bond.trueBondPrices)) === null || _c === void 0 ? void 0 : _c.bonusWithFee) !== null && _d !== void 0 ? _d : 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, }) => {
-    const { namingPreference } = useSDKConfig();
-    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: [jsx$2(Flex$1, { sx: { width: '125px' } }), jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: [namingPreference.toUpperCase(), 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 getUserApiStats = (account) => __awaiter$9(void 0, void 0, void 0, function* () {
-    if (!account)
-        return null;
-    const { data } = yield axios.get(`https://dashboard-api.ape.bond/collector/userSalesInfo/purchased/${account}`);
-    return data;
-});
-function useUserApiStats() {
-    const { address: account } = useEVMAccount();
-    return useQuery({
-        queryKey: [`${QUERY_KEYS.USER_STATS}-${account}`],
-        queryFn: () => getUserApiStats(account),
-        staleTime: Infinity,
-        refetchOnWindowFocus: false,
-        refetchOnMount: false,
-        retry: 1,
-    });
-}
-
-const BuyAgainRow = () => {
+const CollapsableSoldoutRow = ({ groupedBonds }) => {
     var _a, _b, _c;
-    const { data: userData } = useUserApiStats();
-    const { data: bills } = useBondsData();
-    const SDKConfig = useSDKConfig();
-    const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
-    const bond = useMemo(() => {
-        if (userData && (userData === null || userData === void 0 ? void 0 : userData.Sales.length) > 0) {
-            const sortedPurchases = userData === null || userData === void 0 ? void 0 : userData.Sales.sort((a, b) => b.dollarValue - a.dollarValue);
-            const activeBills = bills === null || bills === void 0 ? void 0 : bills.filter((bill) => !isBondSoldOut(bill, SDKConfig.showLowValueBonds) && (chains === null || chains === void 0 ? void 0 : chains.includes(bill.chainId)));
-            const highestActivePurchase = sortedPurchases === null || sortedPurchases === void 0 ? void 0 : sortedPurchases.find((purchase) => activeBills === null || activeBills === void 0 ? void 0 : activeBills.find((bill) => {
-                var _a, _b;
-                if (purchase.contractAddress.toLowerCase() === ((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.contractAddress) === null || _a === void 0 ? void 0 : _a[bill.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()))
-                    return true;
-            }));
-            return activeBills === null || activeBills === void 0 ? void 0 : activeBills.find((bill) => {
-                var _a, _b, _c;
-                return ((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.contractAddress) === null || _a === void 0 ? void 0 : _a[bill.chainId]) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ===
-                    ((_c = highestActivePurchase === null || highestActivePurchase === void 0 ? void 0 : highestActivePurchase.contractAddress) === null || _c === void 0 ? void 0 : _c.toLowerCase());
-            });
-        }
-    }, [SDKConfig.showLowValueBonds, bills, chains, userData]);
-    const bondAddress = (_a = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond.chainId];
-    const remainingTokensFormat = (bond) => {
-        const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0';
-        return formatNumberSI(parseFloat(tokensRemaining !== null && tokensRemaining !== void 0 ? tokensRemaining : '0'), 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 !== null && tokensRemaining !== void 0 ? tokensRemaining : '0');
-        return tokens.times(payoutTokenPrice !== null && payoutTokenPrice !== void 0 ? payoutTokenPrice : '0');
-    };
-    const remainingTokensString = bond
-        ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond).toNumber())})`
-        : '';
-    return bond ? (jsx$2(AnimatePresence, { children: jsxs(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
-                position: 'relative',
-                overflow: 'hidden',
-                width: '100%',
-                mb: '10px',
-            }, children: [jsx$2(Flex, { sx: {
-                        p: '0 1px',
-                        width: '100%',
-                        pt: '5px',
-                        background: 'primaryButton',
-                        borderRadius: 'normal',
-                        flexDirection: 'column',
-                        opacity: 0.5,
-                    }, children: jsx$2(Flex, { className: "buy-again-header", sx: {
+    const [symbol, bonds] = groupedBonds;
+    const bond = bonds[0];
+    const [isOpen, setIsOpen] = useState(false);
+    bonds.length > 1;
+    return (jsxs(AnimatePresence, { initial: false, children: [jsx$2(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: jsx$2(BondRow, { bondAddress: (_a = bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond.chainId], billArtCollection: (_b = bond.billArt) === null || _b === void 0 ? void 0 : _b.collection, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: (_c = bond.tags) === null || _c === void 0 ? void 0 : _c[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, auditURL: bond.audit, shortDescription: bond.shortDescription, soldoutBondsCount: bonds.length > 1 ? bonds.length : undefined, isOpen: isOpen }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`) }), bonds.length > 1 &&
+                isOpen &&
+                bonds.map((bond) => {
+                    var _a, _b, _c;
+                    return (jsx$2(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+                            position: 'relative',
+                            overflow: 'hidden',
                             width: '100%',
-                            fontSize: '12px',
-                            fontWeight: 500,
-                            pl: '26px',
-                            color: 'primaryBright',
-                            height: '91px',
-                        }, children: "BUY AGAIN" }) }), jsx$2(Flex, { onClick: () => {
-                        track({
-                            event: 'buyAgainClick',
-                            chain: bond.chainId,
-                            data: {
-                                bond: bond.earnToken.symbol,
-                            },
-                        });
-                    }, sx: { position: 'absolute', top: '25px', left: '1px', width: 'calc(100% - 2px)' }, children: jsx$2(BondRow, { bondAddress: (_b = bond === null || bond === void 0 ? void 0 : bond.contractAddress) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: (_c = bond.tags) === null || _c === void 0 ? void 0 : _c[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond === null || bond === void 0 ? void 0 : bond.trueBondPrices, minTier: bond === null || bond === void 0 ? void 0 : bond.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] }) })) : null;
+                            marginTop: '0px',
+                        }, className: "bonds-card-container", children: jsxs(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: [jsx$2(Flex, { sx: { alignItems: 'center', pb: '10px' }, children: jsx$2(Svg, { icon: "turnArrow", direction: 'up' }) }), jsx$2(BondRow, { bondAddress: (_a = bond.contractAddress) === null || _a === void 0 ? void 0 : _a[bond.chainId], billArtCollection: (_b = bond.billArt) === null || _b === void 0 ? void 0 : _b.collection, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: (_c = bond.tags) === null || _c === void 0 ? void 0 : _c[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, auditURL: bond.audit, shortDescription: bond.shortDescription })] }) }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`));
+                })] }));
 };
 
-const LoadingSkeleton = () => {
-    return (jsxs(Flex$1, { sx: { width: '100%', flexDirection: 'column', mt: '35px' }, children: [Array.from({ length: 5 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
-                    width: '100%',
-                    height: '70px',
-                    borderRadius: 'normal',
-                    mb: '5px',
-                } }, `row-shadow-${index}`))), jsx$2(Flex$1, { sx: { width: '100%', gap: '15px', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
-                        width: '100%',
-                        height: '125px',
-                        borderRadius: 'normal',
-                        mb: '5px',
-                    } }, `hot-card-shadow${index}`))) }), jsx$2(Flex$1, { sx: { width: '100%', flexDirection: 'column', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx$2(Skeleton, { animation: "waves", sx: {
-                        width: '100%',
-                        height: '70px',
-                        borderRadius: 'normal',
-                        mb: '5px',
-                    } }, `second-row-shadow-${index}`))) })] }));
+const SoldOutRows = ({ bonds }) => {
+    return (jsx$2(Fragment$1, { children: Object.entries(bonds).map((groupedBonds) => (jsx$2(CollapsableSoldoutRow, { groupedBonds: groupedBonds }, groupedBonds[0]))) }));
 };
 
 const Bonds = () => {
-    var _a;
+    var _a, _b, _c;
     // Fetch data
     useHotBonds();
+    const SDKConfig = useSDKConfig();
     const { favTokens } = useFavoriteTokens();
     const { data: bondData, refetch } = useBondsData();
     const { data: allBonds } = useBondsList();
     const { data: allPreBonds } = useBondsListPreTGE();
     const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption();
     const { data: tokenPrices } = useTokenPrices();
-    const SDKConfig = useSDKConfig();
+    const topTags = useTopTags();
     // State
     const [sortConfig, setSortConfig] = useState({ key: 'bonus', direction: 'desc' });
     const [searchQuery, setSearchQuery] = useState('');
     const [filterOption, setFilterOption] = useState('ALL');
-    const sortedBonds = sortBonds(sortConfig, bondData);
-    const topTags = useTopTags(sortedBonds);
+    // Static data
     const filterOptions = ['ALL', 'FAVORITES', ...topTags, 'SOLD OUT'];
+    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));
     const billsToRender = useMemo(() => {
-        let billsToReturn = filterOption === 'SOLD OUT' ? [...(allPreBonds !== null && allPreBonds !== void 0 ? allPreBonds : []), ...(allBonds !== null && allBonds !== void 0 ? allBonds : [])] : (sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : []);
-        billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
-            return (isBondSupported(SDKConfig.highestCompatibleVersion, bill.version) &&
-                (bill.onlyPartner ? SDKConfig.bondPartner === bill.bondPartner : true));
+        if (!allBonds || !allPreBonds)
+            return {};
+        const sortedBonds = sortBonds(sortConfig, bondData);
+        const bondsToUse = filterOption === 'SOLD OUT' ? [...allPreBonds, ...allBonds] : sortedBonds;
+        const filteredBonds = bondsToUse === null || bondsToUse === void 0 ? void 0 : bondsToUse.filter((bill) => {
+            var _a, _b, _c, _d, _e, _f;
+            // filter incompatible bonds
+            if (!isBondSupported(SDKConfig.highestCompatibleVersion, bill.version))
+                return false;
+            // filter onlyPartner Bonds
+            if (bill.onlyPartner && SDKConfig.bondPartner !== bill.bondPartner)
+                return false;
+            // filter searchQuery
+            if (searchQuery) {
+                const matchesSearch = [
+                    `${(_a = bill === null || bill === void 0 ? void 0 : bill.earnToken) === null || _a === void 0 ? void 0 : _a.symbol.toUpperCase()}`,
+                    `${(_b = bill === null || bill === void 0 ? void 0 : bill.lpToken) === null || _b === void 0 ? void 0 : _b.symbol.toUpperCase()}`,
+                ].some((property) => property === null || property === void 0 ? void 0 : property.includes(searchQuery.toUpperCase()));
+                if (!matchesSearch)
+                    return false;
+            }
+            // filter tiers
+            if (!(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers) && 'minTier' in bill) {
+                if (bill.minTier !== null && bill.minTier !== undefined)
+                    return false;
+            }
+            // filter bondPartner
+            if ((SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.bondPartner) && bill.bondPartner !== SDKConfig.bondPartner)
+                return false;
+            // filter topTags
+            if (topTags.includes(filterOption) && !((_c = bill === null || bill === void 0 ? void 0 : bill.tags) === null || _c === void 0 ? void 0 : _c.includes(filterOption)))
+                return false;
+            // filter chainFilterOption
+            if (chainFilterOption && !(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes('All Chains'))) {
+                if (!(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes((_d = bill === null || bill === void 0 ? void 0 : bill.chainId) === null || _d === void 0 ? void 0 : _d.toString())))
+                    return false;
+            }
+            // filter SOLD OUT
+            if (filterOption === 'SOLD OUT' && !isBondSoldOut(bill, SDKConfig.showLowValueBonds))
+                return false;
+            // filter not SOLD OUT
+            if (filterOption !== 'SOLD OUT' && isBondSoldOut(bill, SDKConfig.showLowValueBonds))
+                return false;
+            // filter FAVORITES
+            if (filterOption === 'FAVORITES' && !favTokens.includes((_f = (_e = bill === null || bill === void 0 ? void 0 : bill.earnToken) === null || _e === void 0 ? void 0 : _e.symbol) === null || _f === void 0 ? void 0 : _f.toLowerCase()))
+                return false;
+            return true;
         });
-        if (searchQuery) {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
-                var _a, _b;
-                return [`${(_a = bill === null || bill === void 0 ? void 0 : bill.earnToken) === null || _a === void 0 ? void 0 : _a.symbol.toUpperCase()}`, `${(_b = bill === null || bill === void 0 ? void 0 : bill.lpToken) === null || _b === void 0 ? void 0 : _b.symbol.toUpperCase()}`].some((property) => property === null || property === void 0 ? void 0 : property.includes(searchQuery.toUpperCase()));
-            });
-        }
-        if (!(SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers)) {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => {
-                return 'minTier' in bill ? bill.minTier === null || bill.minTier === undefined : true; //TODO: check this
-            });
-        }
-        if (SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.bondPartner) {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => bill.bondPartner === SDKConfig.bondPartner);
-        }
-        if (topTags.includes(filterOption)) {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => { var _a; return (_a = bill === null || bill === void 0 ? void 0 : bill.tags) === null || _a === void 0 ? void 0 : _a.includes(filterOption); });
-        }
-        if (!(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes('All Chains'))) {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => { var _a; return chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes((_a = bill === null || bill === void 0 ? void 0 : bill.chainId) === null || _a === void 0 ? void 0 : _a.toString()); });
-        }
-        if (filterOption !== 'SOLD OUT') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => !isBondSoldOut(bond, SDKConfig.showLowValueBonds));
-        }
         if (filterOption === 'SOLD OUT') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => isBondSoldOut(bond, SDKConfig.showLowValueBonds));
+            return filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.reduce((acc, bond) => {
+                var _a;
+                const symbol = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.symbol;
+                const chainId = bond.chainId;
+                if (!acc[chainId])
+                    acc[chainId] = {};
+                if (!acc[chainId][symbol])
+                    acc[chainId][symbol] = [];
+                acc[chainId][symbol].push(bond);
+                return acc;
+            }, {});
         }
-        if (filterOption === 'FAVORITES') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bill) => { var _a, _b; return favTokens.includes((_b = (_a = bill === null || bill === void 0 ? void 0 : bill.earnToken) === null || _a === void 0 ? void 0 : _a.symbol) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+        else {
+            return filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.reduce((acc, bond) => {
+                const { chainId } = bond;
+                if (!acc[chainId])
+                    acc[chainId] = [];
+                acc[chainId].push(bond);
+                return acc;
+            }, {});
         }
-        return billsToReturn;
     }, [
-        filterOption,
-        allPreBonds,
         allBonds,
-        sortedBonds,
-        searchQuery,
-        SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers,
-        SDKConfig.bondPartner,
+        allPreBonds,
+        sortConfig,
+        bondData,
+        filterOption,
         SDKConfig.highestCompatibleVersion,
+        SDKConfig.bondPartner,
+        SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.useTiers,
         SDKConfig.showLowValueBonds,
+        searchQuery,
         topTags,
         chainFilterOption,
         favTokens,
@@ -86098,8 +86138,11 @@ const Bonds = () => {
             refetch();
         }
         /* eslint-disable react-hooks/exhaustive-deps */
-    }, [(_a = Object.keys(tokenPrices !== null && tokenPrices !== void 0 ? tokenPrices : {})) === null || _a === void 0 ? void 0 : _a.length, bondData === null || bondData === void 0 ? void 0 : bondData.length, refetch]);
-    return (jsxs(Flex, { className: "bonds-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), SDKConfig.useHotBonds && !SDKConfig.bondPartner && jsx$2(BuyAgainRow, {}), (billsToRender === null || billsToRender === void 0 ? void 0 : billsToRender.length) > 0 ? (jsx$2(BondRowsByChain, { bonds: billsToRender, hideTitles: searchQuery !== '' || filterOption !== 'ALL', showSolSkeleton: chainFilterOption.includes('All Chains') || chainFilterOption.includes(main.ChainId.SOL.toString()) })) : searchQuery || !chainFilterOption.includes('All Chains') ? (jsx$2(Flex, { className: "placeholder-monkey-wrapper", children: jsx$2(PlaceholderMonkey, { text: 'No results, change filters.' }) })) : filterOption === 'FAVORITES' ? (jsxs(Flex, { sx: {
+    }, [(_b = Object.keys(tokenPrices !== null && tokenPrices !== void 0 ? tokenPrices : {})) === null || _b === void 0 ? void 0 : _b.length, bondData === null || bondData === void 0 ? void 0 : bondData.length, refetch]);
+    return (jsxs(Flex, { className: "bonds-container", children: [jsx$2(CheckUrl, {}), jsx$2(BondsMenu, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onSort: handleSortOptions }), SDKConfig.useHotBonds && !SDKConfig.bondPartner && jsx$2(BuyAgainRow, {}), ((_c = Object.keys(billsToRender)) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx$2(Flex, { className: "bondrowsbychain", children: validatedChains === null || validatedChains === void 0 ? void 0 : validatedChains.map((chain) => {
+                    var _a, _b, _c;
+                    return filterOption === 'SOLD OUT' ? (jsx$2(SoldOutRows, { bonds: ((_a = billsToRender[chain]) !== null && _a !== void 0 ? _a : {}) }, chain)) : (jsx$2(ActiveBondRows, { chain: chain, bonds: ((_b = billsToRender[chain]) !== null && _b !== void 0 ? _b : []), hideTitles: searchQuery !== '', showHotBonds: !searchQuery && SDKConfig.useHotBonds && ((_c = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.hotBondChains) === null || _c === void 0 ? void 0 : _c.includes(chain)) }, chain));
+                }) })) : searchQuery || !chainFilterOption.includes('All Chains') ? (jsx$2(Flex, { className: "placeholder-monkey-wrapper", children: jsx$2(PlaceholderMonkey, { text: 'No results, change filters.' }) })) : filterOption === 'FAVORITES' ? (jsxs(Flex, { sx: {
                     width: '100%',
                     height: '300px',
                     background: 'white2',

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

@@ -1,9 +1,13 @@
 import React from 'react';
+import { BondsData } from '../../types/bonds';
+import { BaseBondConfig } from '@ape.swap/apeswap-lists';
 type SortableKeys = 'bonus' | 'arr' | 'terms' | 'tokensRemaining';
 type SortDirection = 'asc' | 'desc';
 export interface SortOptions {
     key: SortableKeys;
     direction: SortDirection;
 }
+export type GroupedByChain = Record<number, (BondsData | BaseBondConfig)[]>;
+export type GroupedBySymbol = Record<number, Record<string, (BondsData | BaseBondConfig)[]>>;
 declare const Bonds: () => React.JSX.Element;
 export default Bonds;

package/dist/views/Bonds/components/BondRows/{BondRowsWithTitle.d.ts → ActiveBondRows.d.ts}

@@ -1,12 +1,11 @@
 import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 import { BaseBondConfig } from '@ape.swap/apeswap-lists';
-export interface BondRowsWithTitleProps {
+export interface ActiveBondRowsProps {
     chain: number;
     bonds: (BondsData | BaseBondConfig)[];
     hideTitles: boolean;
     showHotBonds: boolean;
-    showSolSkeleton: boolean;
 }
-declare const BondRowsWithTitle: React.FC<BondRowsWithTitleProps>;
-export default BondRowsWithTitle;
+declare const ActiveBondRows: React.FC<ActiveBondRowsProps>;
+export default ActiveBondRows;

package/dist/views/Bonds/components/BondRows/BondRow.d.ts

@@ -21,6 +21,8 @@ interface BondRowProps {
     twitterURL?: string;
     auditURL?: string;
     shortDescription?: string;
+    soldoutBondsCount?: number;
+    isOpen?: boolean;
 }
 declare const BondRow: React.FC<BondRowProps>;
 export default BondRow;

package/dist/views/Bonds/components/BondRows/CollapsableSoldoutRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BaseBondConfig } from '@ape.swap/apeswap-lists';
+import { BondsData } from '../../../../types/bonds';
+declare const CollapsableSoldoutRow: ({ groupedBonds }: {
+    groupedBonds: [string, (BondsData | BaseBondConfig)[]];
+}) => React.JSX.Element;
+export default CollapsableSoldoutRow;

package/dist/views/Bonds/components/BondRows/SoldOutRows.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BondsData } from '../../../../types/bonds';
+import { BaseBondConfig } from '@ape.swap/apeswap-lists';
+declare const SoldOutRows: ({ bonds }: {
+    bonds: Record<string, (BondsData | BaseBondConfig)[]>;
+}) => React.JSX.Element;
+export default SoldOutRows;

package/package.json

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

package/dist/views/Bonds/components/BondRows/BondRowsByChain.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { BondsData } from '../../../../types/bonds';
-import { BaseBondConfig } from '@ape.swap/apeswap-lists';
-export interface BondRowsByChainProps {
-    bonds: (BondsData | BaseBondConfig)[];
-    hideTitles: boolean;
-    showSolSkeleton: boolean;
-}
-declare const BondRowsByChain: React.FC<BondRowsByChainProps>;
-export default BondRowsByChain;