@ape.swap/bonds-sdk 2.6.10 → 2.6.11

package/dist/components/ChainOptionList/ChainOptionsButtons.d.ts

@@ -0,0 +1,8 @@
+import { ChainId } from '@ape.swap/apeswap-lists';
+declare const ChainOptionsButtons: ({ selectedChain, setSelectedChain, setViewAllChains, chainList, }: {
+    selectedChain?: number;
+    setSelectedChain: (chain: ChainId) => void;
+    setViewAllChains: (viewAllChains: boolean) => void;
+    chainList: ChainId[];
+}) => import("react").JSX.Element;
+export default ChainOptionsButtons;

package/dist/components/ChainOptionList/ChainOptionsList.d.ts

@@ -0,0 +1,7 @@
+import { ChainId } from '@ape.swap/apeswap-lists';
+declare const ChainOptionsList: ({ setSelectedChain, setViewAllChains, chainList, }: {
+    setSelectedChain: (chain: ChainId) => void;
+    setViewAllChains: (viewAllChains: boolean) => void;
+    chainList: ChainId[];
+}) => import("react").JSX.Element;
+export default ChainOptionsList;

package/dist/components/ChainOptionList/constants.d.ts

@@ -0,0 +1,5 @@
+import { ChainId } from '@ape.swap/apeswap-lists';
+export declare const formatChainList: (list: ChainId[]) => {
+    chain: ChainId;
+    name: string;
+}[];

package/dist/components/ChainOptionList/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'sectionDividerFont' | 'searchAndListContainer' | 'searchInput' | 'chainOptionButton' | 'cursorHover' | 'chainOptionList' | 'chainListContainer', ThemeUIStyleObject>;

package/dist/main.js

@@ -7625,7 +7625,7 @@ const pulse = keyframes$1({
     '50%': { opacity: 0.4 },
     '100%': { opacity: 1 },
 });
-const styles$g = {
+const styles$h = {
     waves: {
         position: 'relative',
         overflow: 'hidden',
@@ -7657,7 +7657,7 @@ const styles$g = {
 
 const Skeleton = (_a) => {
     var { variant: variant$1 = variant.RECT, animation: animation$1 = animation.PULSE } = _a, props = __rest(_a, ["variant", "animation"]);
-    return (jsx$2(Box$1, Object.assign({}, props, { sx: Object.assign(Object.assign({}, (animation$1 === animation.WAVES ? styles$g.waves : styles$g.pulse)), { height: props.height, width: props.width, borderRadius: variant$1 === variant.RECT ? '10px' : '50%' }) })));
+    return (jsx$2(Box$1, Object.assign({}, props, { sx: Object.assign(Object.assign({}, (animation$1 === animation.WAVES ? styles$h.waves : styles$h.pulse)), { height: props.height, width: props.width, borderRadius: variant$1 === variant.RECT ? '10px' : '50%' }) })));
 };
 
 var placements;
@@ -7695,7 +7695,7 @@ const container = (hide) => ({
         display: hide ? 'none' : 'block',
     },
 });
-const styles$f = {
+const styles$g = {
     default: Object.assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle$1),
     bottomRight: {
         '&::before': Object.assign(Object.assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
@@ -7754,7 +7754,7 @@ const TooltipBubble = (_a) => {
     const handleClick = (event) => {
         event.stopPropagation();
     };
-    return (jsxs(Box$1, { sx: container(hideTooltip), onClick: handleClick, children: [jsx$2(Box$1, { sx: Object.assign({ position: 'absolute' }, (placementStyles[placement] || {})), children: jsx$2(Box$1, Object.assign({ sx: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative' }, styles$f.default), styles$f[placement]), backgroundColorStyle), { width, transform: transformTip }) }, props, { children: body })) }), children] }));
+    return (jsxs(Box$1, { sx: container(hideTooltip), onClick: handleClick, children: [jsx$2(Box$1, { sx: Object.assign({ position: 'absolute' }, (placementStyles[placement] || {})), children: jsx$2(Box$1, Object.assign({ sx: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative' }, styles$g.default), styles$g[placement]), backgroundColorStyle), { width, transform: transformTip }) }, props, { children: body })) }), children] }));
 };
 
 const warned = new Set();
@@ -17816,7 +17816,7 @@ const AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, on
         }) }));
 };
 
-const styles$e = {
+const styles$f = {
     container: {
         padding: '20px',
         background: 'white2',
@@ -17992,7 +17992,7 @@ const defaultStyle = {
         transform: 'scale(0.9)',
     },
 };
-const styles$d = {
+const styles$e = {
     primary: Object.assign({}, defaultStyle),
     transparent: Object.assign(Object.assign({}, defaultStyle), { backgroundColor: 'transparent', backgroundRepeat: 'no-repeat', padding: '0px', border: 'none', cursor: 'pointer', svg: {
             background: 'transparent',
@@ -18001,12 +18001,12 @@ const styles$d = {
 
 const IconButton = (_a) => {
     var { icon = icons.DISCORD, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children } = _a, props = __rest(_a, ["icon", "color", "background", "variant", "iconWidth", "children"]);
-    return (jsx$2(Button$1, Object.assign({}, props, { variant: variant, sx: Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: `buttons.${variant}`, color: 'primaryBright', background }, (variant === iconButtonVariants.PRIMARY ? styles$d.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$d.transparent : {})), children: children || (jsx$2("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx$2(Svg, Object.assign({ color: color, icon: icon }, props, { width: iconWidth })) })) })));
+    return (jsx$2(Button$1, Object.assign({}, props, { variant: variant, sx: Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: `buttons.${variant}`, color: 'primaryBright', background }, (variant === iconButtonVariants.PRIMARY ? styles$e.primary : {})), (variant === iconButtonVariants.TRANSPARENT ? styles$e.transparent : {})), children: children || (jsx$2("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx$2(Svg, Object.assign({ color: color, icon: icon }, props, { width: iconWidth })) })) })));
 };
 
 const ModalHeader = (_a) => {
     var { children, onDismiss, hideDivider } = _a, props = __rest(_a, ["children", "onDismiss", "hideDivider"]);
-    return (jsxs(Fragment$1, { children: [jsxs(Flex$1, Object.assign({}, props, { sx: styles$e.modalHead, children: [children, onDismiss && jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && jsx$2(Divider, {})] }));
+    return (jsxs(Fragment$1, { children: [jsxs(Flex$1, Object.assign({}, props, { sx: styles$f.modalHead, children: [children, onDismiss && jsx$2(IconButton, { icon: "close", color: "text", variant: "transparent", onClick: onDismiss })] })), !hideDivider && jsx$2(Divider, {})] }));
 };
 
 const Modal = (_a) => {
@@ -18022,10 +18022,10 @@ const Modal = (_a) => {
                     }, transition: {
                         opacity: { duration: 0.2 },
                         transform: { duration: 0.2 },
-                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: Object.assign(Object.assign({}, styles$e.container), { zIndex }), onAnimationComplete: onAnimationComplete, children: [title && (jsx$2(ModalHeader, { onDismiss: onClose, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] }))) }), open && jsx$2(Box$1, { sx: Object.assign(Object.assign({}, styles$e.backdrop), backdrop), onClick: onClose })] }));
+                    }, exit: { opacity: 0, transform: 'translate(-50%, -50%) scale(0)' } }, props, { sx: Object.assign(Object.assign({}, styles$f.container), { zIndex }), onAnimationComplete: onAnimationComplete, children: [title && (jsx$2(ModalHeader, { onDismiss: onClose, children: jsx$2(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: title }) })), children] }))) }), open && jsx$2(Box$1, { sx: Object.assign(Object.assign({}, styles$f.backdrop), backdrop), onClick: onClose })] }));
 };
 
-const styles$c = {
+const styles$d = {
     container: {
         display: 'flex',
         borderRadius: '10px',
@@ -39303,6 +39303,11 @@ const claimable = (userBill) => {
     var _a, _b, _c;
     return getBalanceNumber(new BigNumber$1(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[userBill.bond.chainId]) !== null && _c !== void 0 ? _c : 18);
 };
+const claimableUSD = (userBill) => {
+    var _a, _b, _c;
+    const claimableTokens = getBalanceNumber(new BigNumber$1(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[userBill.bond.chainId]) !== null && _c !== void 0 ? _c : 18);
+    return claimableTokens * parseFloat(userBill.bond.payoutTokenPrice);
+};
 const earnTokenPrice = (bond) => {
     var _a;
     //TODO: remove this?
@@ -39312,14 +39317,15 @@ const totalPending = (userBill) => {
     var _a, _b, _c, _d;
     return getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 18);
 };
+const totalPendingUSD = (userBill) => {
+    var _a, _b, _c, _d;
+    const pendingTokens = getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 18);
+    return pendingTokens * parseFloat(userBill.bond.payoutTokenPrice);
+};
 const vestingTimeRemaining = (userBill) => {
     const currentTime = new Date().getTime() / 1000;
     return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
 };
-const vestingTimeRemainingYourBonds = (userBill) => {
-    const currentTime = new Date().getTime() / 1000;
-    return parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime;
-};
 const discountEarnTokenPrice = (bond) => {
     var _a, _b;
     const earnTokenPrice = parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
@@ -43961,7 +43967,7 @@ function offset() {
   return null;
 }
 
-function styles$b() {
+function styles$c() {
   const window = getWindow();
   if (this[0]) return window.getComputedStyle(this[0], null);
   return {};
@@ -44340,7 +44346,7 @@ const Methods = {
   transitionEnd: transitionEnd$1,
   outerWidth,
   outerHeight,
-  styles: styles$b,
+  styles: styles$c,
   offset,
   css,
   each: each$1,
@@ -48941,7 +48947,7 @@ const getDotPos = (index, carouselLength) => {
             : index - carouselLength;
 };
 
-const styles$a = {
+const styles$b = {
     mainComponent: {
         width: '100%',
         flexDirection: 'column',
@@ -49014,7 +49020,7 @@ const CardRecommendationsMobile = ({ recommendations }) => {
                             display: 'flex',
                             justifyContent: 'center',
                         }, children: jsx$2(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer') }, `${bond.billAddress}-${index}`) }, index));
-                }) }), jsx$2(Flex, { sx: styles$a.bubbleContainer, children: [...Array(recommendations === null || recommendations === void 0 ? void 0 : recommendations.length)].map((_, i) => {
+                }) }), jsx$2(Flex, { sx: styles$b.bubbleContainer, children: [...Array(recommendations === null || recommendations === void 0 ? void 0 : recommendations.length)].map((_, i) => {
                     return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
                 }) })] }));
 };
@@ -71301,7 +71307,7 @@ const YourBondsModal = ({ onDismiss, userBill }) => {
                                                 }, children: "Claim" })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, disabled: !userBill, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
 };
 
-const styles$9 = {
+const styles$a = {
     infoRow: {
         justifyContent: 'space-between',
         width: '100%',
@@ -71348,7 +71354,7 @@ const styles$9 = {
 
 const ButtonsRow = ({ projectLink, twitter, bubble, audit, }) => {
     const bubbleURL = `https://app.bubblemaps.io/bsc/token/${bubble}`;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$9.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$9.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$9.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$9.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
+    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx$2(Flex, { sx: styles$a.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx$2(Svg, { icon: "URL", width: 18 }) }), jsx$2(Flex, { sx: styles$a.iconButton, as: Link, href: twitter, target: "_blank", children: jsx$2(Svg, { icon: "twitter", width: 18, color: "text" }) }), bubble && (jsx$2(Flex, { sx: styles$a.iconButton, as: Link, href: bubbleURL, target: "_blank", children: jsx$2(Svg, { icon: "bubble", width: 18, color: "text" }) })), audit && (jsxs(Flex, { sx: Object.assign(Object.assign({}, styles$a.iconButton), { margin: '0 0 5px 0', '& svg': { marginRight: '5px' } }), as: Link, href: audit, target: "_blank", children: [jsx$2(Svg, { icon: "audit", width: 18, color: "text" }), jsx$2(Text, { sx: { paddingRight: '5px' }, children: 'Audit' })] }))] }));
 };
 
 const ExpandedViewButton = ({ handleNavigation, rightPos }) => {
@@ -71409,7 +71415,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
             },
         });
     };
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: earnTokenContract, audit: audit }), (config === null || config === void 0 ? void 0 : config.referenceId) === 'apebond' && (jsx$2(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$9.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles$9.link, target: "_blank", children: ["View Token Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$9.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles$9.link, target: "_blank", children: ["View Bond Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$9.linkRow, children: bondLink && (jsxs(Link, { href: bondDashboard, sx: styles$9.link, target: "_blank", children: ["View Bond Insights", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) })] }) })] }));
+    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: earnTokenContract, audit: audit }), (config === null || config === void 0 ? void 0 : config.referenceId) === 'apebond' && (jsx$2(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$a.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles$a.link, target: "_blank", children: ["View Token Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$a.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles$a.link, target: "_blank", children: ["View Bond Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$a.linkRow, children: bondLink && (jsxs(Link, { href: bondDashboard, sx: styles$a.link, target: "_blank", children: ["View Bond Insights", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) })] }) })] }));
 };
 
 const UserBondRow = ({ bill }) => {
@@ -71450,7 +71456,7 @@ const UserBondRow = ({ bill }) => {
         }
         catch (error) {
             setLoadingTx(false);
-            console.error('Approval failed:', error);
+            console.error('Claim failed:', error);
             addToastError(error.message);
         }
     });
@@ -71488,7 +71494,7 @@ const getBondsList = (apeswapListsURL) => __awaiter$9(void 0, void 0, void 0, fu
 });
 
 /* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
-const fetchUserOwnedBillsDataAsync = (chainId, account, bondData) => __awaiter$9(void 0, void 0, void 0, function* () {
+const fetchUserOwnedBillsDataAsync = (chainId, account, bondData, tokenPrices) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
         const bonds = bondData.filter((bond) => {
             var _a;
@@ -71498,7 +71504,7 @@ const fetchUserOwnedBillsDataAsync = (chainId, account, bondData) => __awaiter$9
                 ((_a = bond.contractAddress[bond.chainId]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ACF_TO_ABOND.toLowerCase();
         });
         // Fetch and set user owned bill data without NFT Data
-        const userOwnedBills = yield fetchUserOwnedBills(chainId, account, bonds);
+        const userOwnedBills = yield fetchUserOwnedBills(chainId, account, bonds, tokenPrices);
         const mapUserOwnedBills = bonds.map((bill) => userOwnedBills.filter((b) => { var _a; return b.address.toLowerCase() === ((_a = bill.contractAddress[bill.chainId]) === null || _a === void 0 ? void 0 : _a.toLowerCase()); }));
         const userOwnedBillsData = bonds.map((bill, i) => ({
             index: bill.index,
@@ -71518,8 +71524,8 @@ const fetchUserOwnedBillsDataAsync = (chainId, account, bondData) => __awaiter$9
     }
 });
 /* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
-const fetchUserOwnedBills = (chainId, account, bonds) => __awaiter$9(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d, _e;
+const fetchUserOwnedBills = (chainId, account, bonds, tokenPrices) => __awaiter$9(void 0, void 0, void 0, function* () {
+    var _a, _b, _c, _d, _e, _f, _g;
     // Maps all the bills in the list repo to make a call to each of them to get Bills Id, meaning purchased bill ids
     const billIdCalls = bonds.map((b) => {
         var _a;
@@ -71534,7 +71540,6 @@ const fetchUserOwnedBills = (chainId, account, bonds) => __awaiter$9(void 0, voi
     const billDataCalls = [];
     const billVersions = [];
     const billNFTCalls = [];
-    // console.log(bonds)
     billIds.forEach((idArray, index) => idArray[0].forEach((id) => id.gt(0) &&
         (billDataCalls.push({
             address: bonds[index].contractAddress[bonds[index].chainId],
@@ -71557,23 +71562,32 @@ const fetchUserOwnedBills = (chainId, account, bonds) => __awaiter$9(void 0, voi
             billVersions.push(bonds[index].billVersion))));
     const billData = yield multicall(chainId, BOND_ABI, billDataCalls, true, 150);
     const pendingRewardsCall = yield multicall(chainId, BOND_ABI, billsPendingRewardCall);
-    // const depositAmountCalls = await multicall(chainId, billAbi, billNFTCalls)
     const result = [];
     for (let i = 0; i < billsPendingRewardCall.length; i++) {
         const billDataPos = i === 0 ? 0 : i * 2;
+        let bond = billsPendingRewardCall[i].bond;
+        bond = Object.assign(Object.assign({}, bond), { payoutTokenPrice: (_a = tokenPrices.find((tokenPrice) => {
+                var _a, _b, _c, _d;
+                return ((_a = tokenPrice.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[bond.chainId]) === null || _d === void 0 ? void 0 : _d.toLowerCase()) &&
+                    tokenPrice.chainId === bond.chainId;
+            })) === null || _a === void 0 ? void 0 : _a.price, principalTokenPrice: (_b = tokenPrices.find((tokenPrice) => {
+                var _a, _b, _c, _d;
+                return ((_a = tokenPrice.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.lpToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[bond.chainId]) === null || _d === void 0 ? void 0 : _d.toLowerCase()) &&
+                    tokenPrice.chainId === bond.chainId;
+            })) === null || _b === void 0 ? void 0 : _b.price });
         const data = billVersions[i] !== types.BillVersion.V1
             ? {
                 address: billsPendingRewardCall[i].address,
                 id: billsPendingRewardCall[i].params[0].toString(),
-                payout: new BigNumber$1((_a = billData[billDataPos][0]) === null || _a === void 0 ? void 0 : _a.payout.toString())
-                    .minus((_b = billData[billDataPos][0]) === null || _b === void 0 ? void 0 : _b.payoutClaimed.toString())
+                payout: new BigNumber$1((_c = billData[billDataPos][0]) === null || _c === void 0 ? void 0 : _c.payout.toString())
+                    .minus((_d = billData[billDataPos][0]) === null || _d === void 0 ? void 0 : _d.payoutClaimed.toString())
                     .toString(),
                 billNftAddress: billData[billDataPos + 1][0].toString(),
-                vesting: (_c = billData[billDataPos][0]) === null || _c === void 0 ? void 0 : _c.vesting.toString(),
-                lastBlockTimestamp: (_d = billData[billDataPos][0]) === null || _d === void 0 ? void 0 : _d.lastClaimTimestamp.toString(),
-                truePricePaid: (_e = billData[billDataPos][0]) === null || _e === void 0 ? void 0 : _e.truePricePaid.toString(),
+                vesting: (_e = billData[billDataPos][0]) === null || _e === void 0 ? void 0 : _e.vesting.toString(),
+                lastBlockTimestamp: (_f = billData[billDataPos][0]) === null || _f === void 0 ? void 0 : _f.lastClaimTimestamp.toString(),
+                truePricePaid: (_g = billData[billDataPos][0]) === null || _g === void 0 ? void 0 : _g.truePricePaid.toString(),
                 pendingRewards: pendingRewardsCall[i][0].toString(),
-                bond: billsPendingRewardCall[i].bond,
+                bond,
             }
             : {
                 address: billsPendingRewardCall[i].address,
@@ -71584,7 +71598,7 @@ const fetchUserOwnedBills = (chainId, account, bonds) => __awaiter$9(void 0, voi
                 lastBlockTimestamp: billData[billDataPos][2].toString(),
                 truePricePaid: billData[billDataPos][3].toString(),
                 pendingRewards: pendingRewardsCall[i][0].toString(),
-                bond: billsPendingRewardCall[i].bond,
+                bond,
             };
         result.push(data);
     }
@@ -71596,19 +71610,20 @@ function useUserBonds() {
     const { data: bondList } = useBondsList();
     const { address } = useAccount();
     const SDKConfig = useSDKConfig();
+    const { data: tokenPrices } = useTokenPrices();
     const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
     // Once the full list is fetched, fetch user's purchased bonds
     return useQuery({
         queryKey: [QUERY_KEYS.USER_BONDS, address],
-        queryFn: () => getUserBonds(address, bondList, chains),
+        queryFn: () => getUserBonds(address, bondList, chains, tokenPrices),
         refetchOnWindowFocus: false,
         refetchInterval: 60000,
-        enabled: !!bondList && !!address,
+        enabled: !!bondList && !!address && !!tokenPrices,
     });
 }
-const getUserBonds = (account, bondList, chains) => __awaiter$9(void 0, void 0, void 0, function* () {
+const getUserBonds = (account, bondList, chains, tokenPrices) => __awaiter$9(void 0, void 0, void 0, function* () {
     try {
-        const results = yield Promise.allSettled(chains.map((chain) => fetchUserOwnedBillsDataAsync(chain, account, bondList)));
+        const results = yield Promise.allSettled(chains.map((chain) => fetchUserOwnedBillsDataAsync(chain, account, bondList, tokenPrices)));
         // Filter out only fulfilled promises
         const fulfilledResults = results
             .filter((result) => result.status === 'fulfilled')
@@ -71813,8 +71828,208 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
                 }, children: ["Clear All", jsx$2(Flex, { sx: { ml: '7px' }, children: jsx$2(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
 };
 
+const styles$9 = {
+    sectionDividerFont: {
+        fontWeight: '300',
+        fontSize: '12px',
+    },
+    searchAndListContainer: {
+        maxWidth: '100%',
+        width: '450px',
+        flexDirection: 'column',
+        bg: 'white3',
+        padding: '10px',
+        borderRadius: '10px',
+        height: 'calc(100% - 150px)',
+    },
+    searchInput: {
+        fontWeight: '400',
+        bg: 'white4',
+        height: '40px',
+        border: 'none',
+        pl: '10px',
+        borderRadius: '10px',
+        mb: '8px',
+        ':focus': { outline: 'none' },
+    },
+    chainOptionButton: {
+        width: '40px',
+        height: '40px',
+        borderRadius: 'normal',
+        bg: 'white3',
+        justifyContent: 'center',
+        alignItems: ' center',
+        ':hover': {
+            cursor: 'pointer',
+            bg: 'white4',
+        },
+    },
+    chainListContainer: {
+        position: 'relative',
+        mb: '10px',
+        flexDirection: 'column',
+        height: '100%',
+    },
+    chainOptionList: {
+        width: '100%',
+        height: '45px',
+        borderRadius: '10px',
+        gap: '10px',
+        px: '10px',
+        bg: 'white3',
+        alignItems: ' center',
+        ':hover': {
+            cursor: 'pointer',
+            bg: 'white4',
+        },
+    },
+    cursorHover: {
+        ':hover': {
+            cursor: 'pointer',
+        },
+    },
+};
+
+const formatChainList = (list) => {
+    return list.map((chain) => ({
+        chain,
+        name: NETWORK_LABEL[chain] || 'Unknown',
+    }));
+};
+
+const ChainOptionsList = ({ setSelectedChain, setViewAllChains, chainList, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const handleChainSelect = (chain) => {
+        setSelectedChain(chain);
+        setViewAllChains(false);
+    };
+    const handleInput = useCallback((event) => {
+        const input = event.target.value;
+        setSearchQuery(input);
+    }, []);
+    return (jsx$2(Flex, { sx: styles$9.searchAndListContainer, children: jsxs(Flex, { sx: { position: 'relative', flexDirection: 'column', height: '100%' }, children: [jsxs(Flex, { children: [jsx$2(Input, { onChange: handleInput, sx: styles$9.searchInput, placeholder: "Search by chain name" }), jsx$2(Flex, { sx: { position: 'absolute', right: '10px', top: '12px' }, children: jsx$2(Svg, { icon: "search" }) })] }), jsx$2(Flex, { sx: styles$9.chainListContainer, children: formatChainList(chainList)
+                        .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))
+                        .map((chainInfo) => {
+                        return (jsxs(Flex, { sx: styles$9.chainOptionList, onClick: () => handleChainSelect(chainInfo.chain), children: [jsx$2(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx$2(Svg, { width: "25px", icon: NETWORK_ICONS[chainInfo.chain] ? NETWORK_ICONS[chainInfo.chain] : 'question' }) }), jsx$2(Text, { sx: { fontWeight: '500', fontSize: '16px' }, children: chainInfo.name })] }, chainInfo.name));
+                    }) })] }) }));
+};
+
+const ChainOptionsButtons = ({ selectedChain, setSelectedChain, setViewAllChains, chainList, }) => {
+    return (jsxs(Flex, { sx: { position: 'relative', mb: '10px' }, children: [formatChainList(chainList)
+                .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))
+                .slice(0, 7)
+                .map((chainInfo) => {
+                return (jsx$2(Flex, { sx: Object.assign(Object.assign({}, styles$9.chainOptionButton), { border: selectedChain === chainInfo.chain && 'primaryButton', mr: '10px' }), onClick: () => setSelectedChain(chainInfo.chain), children: jsx$2(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx$2(Svg, { width: "25px", icon: NETWORK_ICONS[chainInfo.chain] ? NETWORK_ICONS[chainInfo.chain] : 'question' }) }) }, chainInfo.name));
+            }), chainList.length > 7 && (jsx$2(Flex, { sx: styles$9.chainOptionButton, onClick: () => setViewAllChains(true), children: jsxs(Text, { children: [chainList.length - 7, "+"] }) }))] }));
+};
+
+const ClaimAllModal = () => {
+    var _a, _b;
+    const { chainId, address: account } = useAccount();
+    const { switchChain } = useSwitchChain();
+    const SDKConfig = useSDKConfig();
+    const chains = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.chains;
+    const [selectedChain, setSelectedChain] = useState(chainId !== null && chainId !== void 0 ? chainId : 56);
+    const [viewAllChains, setViewAllChains] = useState(false);
+    const { data: userOwnedBills } = useUserBonds();
+    const ownedBills = userOwnedBills === null || userOwnedBills === void 0 ? void 0 : userOwnedBills.filter((bill) => parseFloat(bill === null || bill === void 0 ? void 0 : bill.payout) > 0);
+    const groupedBills = ownedBills === null || ownedBills === void 0 ? void 0 : ownedBills.reduce((acc, bill) => {
+        const bondIndex = bill.bond.index;
+        // Check if this bond index already exists in the accumulator
+        const existingGroup = acc.find((group) => group.bond.index === bondIndex);
+        if (existingGroup) {
+            // If the group already exists, add this bill to the userOwnedBills array
+            existingGroup.userOwnedBills.push(bill);
+        }
+        else {
+            // If it doesn't exist, create a new group
+            acc.push({
+                bond: bill.bond,
+                userOwnedBills: [bill],
+            });
+        }
+        return acc;
+    }, []);
+    const bondsOfSelectedChain = groupedBills === null || groupedBills === void 0 ? void 0 : groupedBills.filter((group) => group.bond.chainId === selectedChain);
+    const ownedBillsAmount = bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.reduce((total, ownerBills) => { var _a; return total + (((_a = ownerBills.userOwnedBills) === null || _a === void 0 ? void 0 : _a.length) || 0); }, 0);
+    const { addToastError } = usePopups();
+    const { writeContractAsync } = useWriteContract();
+    const handleClaim = () => __awaiter$9(void 0, void 0, void 0, function* () {
+        try {
+            bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.map((purchasedBond) => __awaiter$9(void 0, void 0, void 0, function* () {
+                const address = purchasedBond.bond.contractAddress[purchasedBond.bond.chainId];
+                console.log(purchasedBond);
+                console.log(address);
+                track({
+                    event: 'bond',
+                    chain: purchasedBond.bond.chainId,
+                    data: {
+                        cat: 'claimAll',
+                        address,
+                        earnToken: purchasedBond === null || purchasedBond === void 0 ? void 0 : purchasedBond.bond.earnToken.symbol,
+                    },
+                });
+                return writeContractAsync({
+                    address: address,
+                    abi: BOND_ABI,
+                    functionName: 'batchRedeem',
+                    args: [purchasedBond.userOwnedBills.map((b) => b.id)],
+                });
+            }));
+        }
+        catch (error) {
+            console.error('Claim All failed:', error);
+            addToastError(error.message);
+        }
+    });
+    const purchasedBillsChains = (_a = groupedBills === null || groupedBills === void 0 ? void 0 : groupedBills.reduce((acc, bill) => {
+        if (acc.includes(bill.bond.chainId)) {
+            return acc;
+        }
+        else
+            return [...acc, bill.bond.chainId];
+    }, [])) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a - b);
+    return (jsx$2(Modal, { title: "Claim All", sx: { width: '420px' }, children: viewAllChains ? (jsxs(Fragment$1, { children: [jsxs(Flex, { sx: { justifyContent: 'space-between', mb: '20px' }, children: [jsx$2(Flex, { onClick: () => setViewAllChains(false), sx: {
+                                ':hover': {
+                                    cursor: 'pointer',
+                                },
+                            }, children: jsx$2(Svg, { width: "10px", icon: "arrow", direction: "left" }) }), jsx$2(Text, { sx: { fontSize: '16px', fontWeight: '300' }, children: "All Chain Options" })] }), jsx$2(ChainOptionsList, { setSelectedChain: setSelectedChain, setViewAllChains: setViewAllChains, chainList: chains })] })) : (jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsx$2(Text, { sx: { fontSize: '14px', fontWeight: 400, my: '10px' }, children: "Select the chain from which you want to claim your Bonds." }), jsx$2(ChainOptionsButtons, { setSelectedChain: setSelectedChain, selectedChain: selectedChain, setViewAllChains: setViewAllChains, chainList: purchasedBillsChains !== null && purchasedBillsChains !== void 0 ? purchasedBillsChains : [] }), jsx$2(Flex, { sx: {
+                        width: '100%',
+                        mt: '10px',
+                        background: 'white3',
+                        borderRadius: 'normal',
+                        p: '10px',
+                        flexDirection: 'column',
+                        height: '30vh',
+                        overflowY: 'auto',
+                    }, children: bondsOfSelectedChain && (bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.length) > 0 ? (bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.filter((userBill) => userBill.bond.chainId === selectedChain).map((ownedBill, index) => {
+                        var _a, _b;
+                        return (jsxs(Flex, { sx: { width: '100%', alignItems: 'center', p: '5px' }, children: [jsx$2(TokenImage, { symbol: ownedBill.bond.earnToken.symbol, size: 30 }), jsxs(Text, { sx: { ml: '10px' }, children: [ownedBill.bond.earnToken.symbol, jsxs(Text, { sx: { fontSize: '14px', fontWeight: 400, color: 'textDisabledButton', ml: '10px' }, children: ["(", (_a = ownedBill === null || ownedBill === void 0 ? void 0 : ownedBill.userOwnedBills) === null || _a === void 0 ? void 0 : _a.length, " Bond", (ownedBill === null || ownedBill === void 0 ? void 0 : ownedBill.userOwnedBills) && ((_b = ownedBill === null || ownedBill === void 0 ? void 0 : ownedBill.userOwnedBills) === null || _b === void 0 ? void 0 : _b.length) > 1 ? 's' : '', ")"] })] })] }, `${ownedBill.bond.earnToken.symbol}-${index}`));
+                    })) : (jsx$2(Flex, { sx: {
+                            fontSize: '14px',
+                            fontWeight: 400,
+                            color: 'textDisabledButton',
+                            justifyContent: 'center',
+                            mt: '10px',
+                        }, children: "No bonds to claim for this chain" })) }), jsxs(Text, { sx: { fontSize: '14px', fontWeight: 400, mt: '15px' }, children: [`You'll claim`, " ", ownedBillsAmount, " Bonds in ", bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.length, " transaction", ((_b = bondsOfSelectedChain === null || bondsOfSelectedChain === void 0 ? void 0 : bondsOfSelectedChain.length) !== null && _b !== void 0 ? _b : 0) > 1 ? 's' : '', "."] }), chainId === selectedChain ? (jsx$2(Button, { sx: { mt: '15px', width: '100%' }, onClick: handleClaim, children: "Claim" })) : (jsxs(Button, { sx: { mt: '15px', width: '100%' }, onClick: () => switchChain({ chainId: selectedChain }), children: ["Switch to ", NETWORK_LABEL[selectedChain !== null && selectedChain !== void 0 ? selectedChain : 0]] }))] })) }));
+};
+
+const ClaimAll = () => {
+    const { address: account } = useAccount();
+    const [onOpenModal] = useModal(jsx$2(ClaimAllModal, {}));
+    return (jsx$2(Button, { onClick: onOpenModal, disabled: !account, sx: {
+            height: ['36px', '36px', '36px', '26px'],
+            lineHeight: '12px',
+            fontSize: '14px',
+            fontWeight: 600,
+            width: '100%',
+            opacity: 1,
+        }, children: "Claim All" }));
+};
+
 const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
-    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: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container" })] })] })] }));
+    const SDKConfig = 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: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", children: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
 };
 
 const YourBonds = () => {
@@ -71824,47 +72039,60 @@ const YourBonds = () => {
     const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption();
     useTokenPrices();
     // State
-    const [sortConfig, setSortConfig] = useState(null);
-    const [sortedBonds, setSortedBonds] = useState();
+    const [sortConfig, setSortConfig] = useState({
+        key: 'pending',
+        direction: 'desc',
+    });
     const [inputValue, setInputValue] = useState('');
-    const [filteredBonds, setFilteredBonds] = useState(sortedBonds);
     const filterOptions = ['CLAIMABLE', 'ALL'];
     const [filterOption, setFilterOption] = useState(filterOptions[0]);
     const handleSort = (key) => {
-        let direction = 'asc';
-        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'asc') {
-            direction = 'desc';
+        let direction = 'desc';
+        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'desc') {
+            direction = 'asc';
         }
         setSortConfig({ key, direction });
     };
-    // This Effects handles the sorting
-    useEffect(() => {
-        var _a;
-        //TODO: fix sorting should be usd values NOT the amount of tokens. Also it is not correct to handle this with useEffects
-        // The correct way to handle would be to have a single const wrapped by a useMemo, in the first part handle filter and lastly handle sort
+    const bondsToRender = useMemo(() => {
         if (!userBonds)
-            return;
-        if (sortConfig === null) {
-            const sortedBills = (_a = [...userBonds]) === null || _a === void 0 ? void 0 : _a.sort((a, b) => {
-                const vestingDifference = parseFloat(vestingTimeRemainingYourBonds(b).toFixed(3)) -
-                    parseFloat(vestingTimeRemainingYourBonds(a).toFixed(3));
-                if (vestingDifference !== 0) {
-                    return vestingDifference;
-                }
-                return 0;
+            return [];
+        let bondsToReturn = userBonds;
+        // Handle Filtering //
+        // Filter by search query
+        if (inputValue !== '') {
+            bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                return [
+                    (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _a === void 0 ? void 0 : _a.showcaseTokenName) === null || _b === void 0 ? void 0 : _b.toLowerCase(),
+                    (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _c === void 0 ? void 0 : _c.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) === null || _e === void 0 ? void 0 : _e.toLowerCase(),
+                    (_h = (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _f === void 0 ? void 0 : _f.lpToken) === null || _g === void 0 ? void 0 : _g.symbol) === null || _h === void 0 ? void 0 : _h.toLowerCase(),
+                ].some((property) => property === null || property === void 0 ? void 0 : property.includes(inputValue.toLowerCase()));
             });
-            setSortedBonds(sortedBills);
-            return;
         }
-        const sorted = [...userBonds].sort((a, b) => {
+        // Filter by chain selector
+        if (!chainFilterOption.includes('All Chains')) {
+            bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
+                return chainFilterOption.includes(bond.bond.chainId.toString());
+            });
+        }
+        // Filter by filter option (claimable or all buttons)
+        if (filterOption === 'CLAIMABLE') {
+            bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.filter((bond) => {
+                return bond.pendingRewards !== '0';
+            });
+        }
+        // Handle sorting //
+        if (sortConfig === null)
+            return bondsToReturn;
+        bondsToReturn = bondsToReturn === null || bondsToReturn === void 0 ? void 0 : bondsToReturn.sort((a, b) => {
             let aValue, bValue;
             if (sortConfig.key === 'claimable') {
-                aValue = parseFloat(claimable(a).toFixed(3));
-                bValue = parseFloat(claimable(b).toFixed(3));
+                aValue = claimableUSD(a);
+                bValue = claimableUSD(b);
             }
             else if (sortConfig.key === 'pending') {
-                aValue = parseFloat(totalPending(a).toFixed(0));
-                bValue = parseFloat(totalPending(b).toFixed(0));
+                aValue = totalPendingUSD(a);
+                bValue = totalPendingUSD(b);
             }
             else if (sortConfig.key === 'terms') {
                 const aRemainingTime = vestingTimeRemaining(a).days * 24 * 3600 +
@@ -71888,41 +72116,12 @@ const YourBonds = () => {
             }
             return 0;
         });
-        setSortedBonds(sorted);
-    }, [sortConfig, userBonds]);
-    // This effect handles the filtering
-    useEffect(() => {
-        // TODO: when this is refactored a single filter method should be applied, this is mapping the bonds a lot of times
-        let filtered = sortedBonds;
-        // Filter by search query
-        if (inputValue !== '') {
-            filtered = filtered === null || filtered === void 0 ? void 0 : filtered.filter((bond) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                return [
-                    (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _a === void 0 ? void 0 : _a.showcaseTokenName) === null || _b === void 0 ? void 0 : _b.toLowerCase(),
-                    (_e = (_d = (_c = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _c === void 0 ? void 0 : _c.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) === null || _e === void 0 ? void 0 : _e.toLowerCase(),
-                    (_h = (_g = (_f = bond === null || bond === void 0 ? void 0 : bond.bond) === null || _f === void 0 ? void 0 : _f.lpToken) === null || _g === void 0 ? void 0 : _g.symbol) === null || _h === void 0 ? void 0 : _h.toLowerCase(),
-                ].some((property) => property === null || property === void 0 ? void 0 : property.includes(inputValue.toLowerCase()));
-            });
-        }
-        // Filter by chain selector
-        if (!chainFilterOption.includes('All Chains')) {
-            filtered = filtered === null || filtered === void 0 ? void 0 : filtered.filter((bond) => {
-                return chainFilterOption.includes(bond.bond.chainId.toString());
-            });
-        }
-        // Filter by filter option (claimable or all buttons)
-        if (filterOption === 'CLAIMABLE') {
-            filtered = filtered === null || filtered === void 0 ? void 0 : filtered.filter((bond) => {
-                return bond.pendingRewards !== '0';
-            });
-        }
-        setFilteredBonds(filtered);
-    }, [inputValue, sortedBonds, chainFilterOption, filterOption]);
+        return bondsToReturn;
+    }, [userBonds, sortConfig, inputValue, chainFilterOption, filterOption, userBondsFetched]);
     const handleFilterOption = useCallback((newOption) => {
         setFilterOption(newOption);
     }, []);
-    return (jsxs(Flex$1, { className: "yourbonds table-container", children: [jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort }), !account ? (jsx$2(PlaceholderMonkey, { text: 'You are not connected' })) : filteredBonds && (filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.length) > 0 ? (filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.map((bill) => jsx$2(UserBondRow, { bill: bill }, bill.id))) : inputValue !== '' || !chainFilterOption.includes('All Chains') ? (jsx$2(PlaceholderMonkey, { text: 'No results, change filters!' })) : userBondsFetched && (userBonds === null || userBonds === void 0 ? void 0 : userBonds.length) === 0 ? (jsxs(Flex$1, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }, children: [jsx$2(Svg, { icon: "placeholderMonkey" }), jsx$2(Flex$1, { sx: { mt: '15px' }, children: "You do not own any Bonds." })] })) : (jsx$2(Flex$1, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
+    return (jsxs(Flex$1, { className: "yourbonds table-container", children: [jsx$2(YourBondsMenu, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleFilterOption, setInputValue: setInputValue, inputValue: inputValue, handleSort: handleSort }), !account ? (jsx$2(PlaceholderMonkey, { text: 'You are not connected' })) : bondsToRender && (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.length) > 0 ? (bondsToRender === null || bondsToRender === void 0 ? void 0 : bondsToRender.map((bill) => jsx$2(UserBondRow, { bill: bill }, bill.id))) : inputValue !== '' || !chainFilterOption.includes('All Chains') ? (jsx$2(PlaceholderMonkey, { text: 'No results, change filters!' })) : userBondsFetched && (userBonds === null || userBonds === void 0 ? void 0 : userBonds.length) === 0 ? (jsxs(Flex$1, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }, children: [jsx$2(Svg, { icon: "placeholderMonkey" }), jsx$2(Flex$1, { sx: { mt: '15px' }, children: "You do not own any Bonds." })] })) : (jsx$2(Flex$1, { className: "yourbonds-spinner", children: jsx$2(Spinner, { size: 100 }) }))] }));
 };
 
 // This basically returns the 2 tags with the higher active bond count
@@ -75346,7 +75545,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx$2(Flex, { sx: styles$a.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
+    return (jsx$2(Flex, { sx: styles$b.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', height: '75px' }, children: [jsx$2(Flex, { sx: { width: '66.66%' }, children: jsx$2(TokenInfoAndName, { bill: bond, isHotBond: true }) }), jsx$2(Flex, { className: "column column-tokenicons", sx: { width: '33.33% !important', justifyContent: 'center !important', alignItems: 'center' }, children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (_c = (_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.address) === null || _b === void 0 ? void 0 : _b[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _c !== void 0 ? _c : '', earnTokenSymbol: (_e = (_d = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) !== null && _e !== void 0 ? _e : '', bondContract: (_f = bond === null || bond === void 0 ? void 0 : bond.billAddress) !== null && _f !== void 0 ? _f : '', projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: bond === null || bond === void 0 ? void 0 : bond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: jsx$2(Svg, { icon: "more", width: "20px" }) }) })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-around' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400 }, children: "Bonus" }), jsx$2(Flex, { className: `${getDiscountColor(bonus)}`, sx: { width: '100%', justifyContent: 'center' }, children: bonus !== undefined ? (bonus < 0 ? '0%' : `${bonus === null || bonus === void 0 ? void 0 : bonus.toFixed(2)}%`) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "ARR" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: calculateARR(bond) !== undefined ? calculateARR(bond) : '-' })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', width: '100%' }, children: [jsx$2(Flex, { sx: { opacity: 0.6, fontSize: '12px', fontWeight: 400, width: '100%', justifyContent: 'center' }, children: "Terms" }), jsx$2(Flex, { sx: { width: '100%', justifyContent: 'center' }, children: ((_g = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _g === void 0 ? void 0 : _g.days) ? `${(_h = vestingTime(bond === null || bond === void 0 ? void 0 : bond.vestingTerm)) === null || _h === void 0 ? void 0 : _h.days} D` : '-' })] })] })] }) }));
 };
 
 function useHotBondContracts() {
@@ -75397,7 +75596,7 @@ const HotBondCards = () => {
         setActiveSlide(index);
         swiper === null || swiper === void 0 ? void 0 : swiper.slideTo(index);
     };
-    return (jsxs(Flex, { sx: styles$a.mainComponent, children: [jsx$2(Flex, { sx: styles$a.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$a.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
+    return (jsxs(Flex, { sx: styles$b.mainComponent, children: [jsx$2(Flex, { sx: styles$b.hotBondTitle, children: "HOT BONDS" }), jsx$2(Flex, { sx: styles$b.desktopCards, children: filteredBonds === null || filteredBonds === void 0 ? void 0 : filteredBonds.slice(0, 3).map((bond, index) => {
                     return jsx$2(HotBondCard, { bond: bond }, `${bond.billAddress}-${index}`);
                 }) }), jsxs(Flex, { sx: {
                     flexDirection: 'column',
@@ -75416,7 +75615,7 @@ const HotBondCards = () => {
                                     display: 'flex',
                                     justifyContent: 'center',
                                 }, children: jsx$2(HotBondCard, { bond: bond }, `${bond.billAddress}-${index}`) }, index));
-                        }) }), jsx$2(Flex, { sx: styles$a.bubbleContainer, children: [...Array(hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.length)].map((_, i) => {
+                        }) }), jsx$2(Flex, { sx: styles$b.bubbleContainer, children: [...Array(hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.length)].map((_, i) => {
                             return jsx$2(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
                         }) })] })] }));
 };
@@ -75678,9 +75877,9 @@ const Bonds = () => {
         if (filterOption !== 'SOLD OUT') {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => !isBondSoldOut(bond));
         }
-        if (filterOption === 'SOLD OUT') {
-            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter((bond) => !bond.soldOut);
-        }
+        // if (filterOption === 'SOLD OUT') {
+        //   billsToReturn = billsToReturn?.filter((bond) => !bond.soldOut)
+        // }
         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()); });
         }
@@ -75739,8 +75938,8 @@ const FullBondsView = () => {
 };
 
 const Toggle = ({ options, activeOption, handleToggle, claimableBillsAmount, }) => {
-    return (jsx$2(Flex, { sx: styles$c.container, children: jsx$2(AnimatePresence, { initial: false, children: options.map((option) => {
-                return (jsx$2(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex, { sx: Object.assign(Object.assign({}, styles$c.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: () => handleToggle(option), children: jsxs(Text, { sx: { fontSize: '14px' }, children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }) }, option));
+    return (jsx$2(Flex, { sx: styles$d.container, children: jsx$2(AnimatePresence, { initial: false, children: options.map((option) => {
+                return (jsx$2(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: jsx$2(Flex, { sx: Object.assign(Object.assign({}, styles$d.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: () => handleToggle(option), children: jsxs(Text, { sx: { fontSize: '14px' }, children: [option, option === BondsViewOptions.YOURBONDS && claimableBillsAmount ? ` (${claimableBillsAmount})` : ''] }) }) }, option));
             }) }) }));
 };
 

package/dist/state/bonds/useUserBonds.d.ts

@@ -1,5 +1,6 @@
 import { UseQueryResult } from '@tanstack/react-query';
 import { BillsConfig } from '@ape.swap/apeswap-lists';
 import { UserBill } from '../../types/yourbonds';
+import { TokenPrices } from '../tokenPrices/useTokenPrices';
 export default function useUserBonds(): UseQueryResult<UserBill[]>;
-export declare const getUserBonds: (account: string, bondList: BillsConfig[], chains: number[]) => Promise<UserBill[]>;
+export declare const getUserBonds: (account: string, bondList: BillsConfig[], chains: number[], tokenPrices: TokenPrices[]) => Promise<UserBill[]>;

package/dist/styles.css

@@ -895,7 +895,6 @@ span.flex-inline {
 .bonds-menu .headers-container {
   display: flex;
   width: 60%;
-  opacity: 0.6;
   justify-content: flex-end;
 }
 @media screen and (min-width: 1000px) {
@@ -964,6 +963,8 @@ span.flex-inline {
   align-items: flex-end;
   justify-content: center;
   cursor: pointer;
+  opacity: 0.6;
+  line-height: 12px;
 }
 @media screen and (min-width: 1000px) {
   .bonds-menu .your-bonds-table-headers {

package/dist/utils/displayHelpers.d.ts

@@ -2,8 +2,10 @@ import { BigNumber } from 'bignumber.js';
 import { UserBill } from '../types/yourbonds';
 import { BondsData } from '../types/bonds';
 export declare const claimable: (userBill: UserBill) => number;
+export declare const claimableUSD: (userBill: UserBill) => number;
 export declare const earnTokenPrice: (bond: BondsData) => string;
 export declare const totalPending: (userBill: UserBill) => number;
+export declare const totalPendingUSD: (userBill: UserBill) => number;
 export declare const vestingTimeRemaining: (userBill: UserBill) => {
     years: number;
     months: number;

package/dist/views/YourBonds/components/ClaimAll/ClaimAllModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ClaimAllModal: () => React.JSX.Element;
+export default ClaimAllModal;

package/dist/views/YourBonds/components/ClaimAll/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ClaimAll: () => React.JSX.Element;
+export default ClaimAll;

package/dist/views/YourBonds/fetchBillsUser.d.ts

@@ -1,4 +1,5 @@
 import { UserBill, UserOwnedBillsData } from '../../types/yourbonds';
 import { BillsConfig, ChainId } from '@ape.swap/apeswap-lists';
-export declare const fetchUserOwnedBillsDataAsync: (chainId: ChainId, account: string, bondData: BillsConfig[]) => Promise<UserOwnedBillsData[]>;
-export declare const fetchUserOwnedBills: (chainId: ChainId, account: string, bonds: BillsConfig[]) => Promise<UserBill[]>;
+import { TokenPrices } from '../../state/tokenPrices/useTokenPrices';
+export declare const fetchUserOwnedBillsDataAsync: (chainId: ChainId, account: string, bondData: BillsConfig[], tokenPrices: TokenPrices[]) => Promise<UserOwnedBillsData[]>;
+export declare const fetchUserOwnedBills: (chainId: ChainId, account: string, bonds: BillsConfig[], tokenPrices: TokenPrices[]) => Promise<UserBill[]>;

package/package.json

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