@ape.swap/bonds-sdk 6.2.13 → 6.2.15

package/dist/views/Bonds/components/BondRows/ActiveBondRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveBondRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/ActiveBondRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport ChainTitle from './ChainTitle'\nimport BondRow from './BondRow'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport { BaseBondConfig, ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport HotBondCards from '../HotBondCards'\nimport ChainBanner from '../ChainBanner/ChainBanner'\nimport {\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\n// Record<string, (BondsData | BaseBondConfig)[]>\n\ninterface ActiveBondRowsProps {\n  chain: number\n  bonds: (BondsData | BaseBondConfig)[]\n  hideTitles: boolean\n  showHotBonds: boolean\n}\n\nconst ActiveBondRows: React.FC<ActiveBondRowsProps> = ({ chain, bonds, hideTitles, showHotBonds }) => {\n  const { namingPreference, useCardsView } = useSDKConfig()\n  const [isOpen, setIsOpen] = useState<boolean>(true)\n  const key = chain\n\n  return (\n    <Flex className=\"bondrowswithtitle ape:w-full ape:flex-col\" key={key}>\n      <AnimatePresence initial={false}>\n        <Flex onClick={() => setIsOpen(!isOpen)} className=\"ape:cursor-pointer\">\n          <ChainTitle\n            chain={chain}\n            pt={'5px'}\n            hideTitles={(bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles}\n            isOpen={isOpen}\n          />\n        </Flex>\n        {isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (\n          <motion.div\n            initial={{ height: 0, overflow: 'hidden' }}\n            animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n            exit={{ height: 0, overflow: 'hidden' }}\n            className={clsx(\n              'bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0',\n              useCardsView && 'ape:flex ape:flex-wrap',\n            )}\n            key={key}\n          >\n            {[\n              // ChainId.SOL,\n              ChainId.MONAD,\n              // ChainId.APTOS,\n              // ChainId.SUI\n            ].includes(chain) &&\n              !hideTitles && <ChainBanner chainId={chain} />}\n            {bonds?.map((bondFromMap, index) => {\n              // PRE TGE ROWS\n\n              if (bondFromMap.billType === 'fcfs') {\n                const bond = bondFromMap as BondsData\n                const totalPrincipalBilled =\n                  Math.round(\n                    getBalanceNumber(\n                      bond?.totalPrincipalBilled ?? '0',\n                      bond?.lpToken?.decimals?.[bond?.chainId] as number,\n                    ),\n                  ) / (bond.initPrice ?? 0)\n                const raiseGoal =\n                  Math.round(\n                    getBalanceNumber(bond?.totalRaise ?? '0', bond?.lpToken?.decimals?.[bond?.chainId] as number),\n                  ) / (bond.initPrice ?? 0)\n\n                const tokensRemaining = raiseGoal - totalPrincipalBilled\n                const tokensRemainingUSD = tokensRemaining * (bond?.initPrice ?? 0)\n                const percentageAvailable = 100 - Math.floor((totalPrincipalBilled * 100) / raiseGoal)\n                const earnToken = bond?.earnToken?.symbol\n\n                const baseBonus = bond?.trueBondPrices?.[0]?.bonus ?? 0\n                const airdropBonus = bond?.airdropBonus ?? 0\n                const bonus = baseBonus + airdropBonus\n                const initialRelease = (bond?.initialRelease ?? 0) * 100\n\n                const now = new Date().getTime()\n                const saleFinishTime = (bond?.finishTime ?? 0) * 1000\n                const saleHasFinished = now > saleFinishTime || bond.finalized\n\n                return (\n                  <BondRow\n                    key={`${bond.contractAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.underlyingEarnToken || bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bonus={\n                      bond.yieldBond\n                        ? `${bond.yieldData?.apr.toFixed()}% APR`\n                        : saleHasFinished\n                          ? undefined\n                          : `${bonus}%`\n                    }\n                    airdropTooltip={bond.airdropTooltip}\n                    percentageAvailable={percentageAvailable}\n                    remainingTokensString={\n                      saleHasFinished\n                        ? `0 ${earnToken} ($0) `\n                        : `${formatNumberSI(tokensRemaining, 0)} ${earnToken} ($${formatNumberSI(tokensRemainingUSD, 2)})`\n                    }\n                    vestingTermString={\n                      saleHasFinished\n                        ? '-'\n                        : bond.yieldBond\n                          ? `${\n                              getTimePeriods(\n                                (bond?.yieldData?.rewardDistributionEnd ?? 0) -\n                                  parseInt(bond.startVestingTimestamp ?? '0'),\n                                true,\n                              ).days\n                            } D`\n                          : initialRelease === 100\n                            ? `0 D`\n                            : `${getTimePeriods(bond.vestingTerm).months} Mo`\n                    }\n                    vestingCliffString={\n                      bond.yieldBond\n                        ? `This is the duration over which the bonus yield will be distributed while your initial tokens remain staked.`\n                        : undefined\n                    }\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bondSoldOut={saleHasFinished}\n                    shortDescription={bond.shortDescription}\n                  />\n                )\n              } else {\n                // POST TGE BONDS AKA NORMAL BONDS\n\n                const bond = bondFromMap as BondsData\n                const bondAddress = bond?.contractAddress?.[bond?.chainId] as string\n                const remainingTokensString = getRemainingTokensString(bond)\n                return (\n                  <BondRow\n                    key={`${bondAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bondAddress}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.highlightTag || bond.tags?.[0]}\n                    trueBondPrices={namingPreference === 'Bonus' ? bond.trueBondPrices : undefined}\n                    minTier={bond?.minTier}\n                    vestingTermString={getVestingTermsString(bond)}\n                    vestingCliffString={getVestingTermsTooltipString(bond)}\n                    percentageAvailable={remainingPercentage(bond)}\n                    remainingTokensString={remainingTokensString}\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bonus={\n                      namingPreference === 'Discount'\n                        ? `${bond?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n                        : undefined\n                    }\n                    shortDescription={bond.shortDescription}\n                    cgId={bond.cgId}\n                    dexscreener={bond?.dexscreener}\n                  />\n                )\n              }\n            })}\n            {showHotBonds && <HotBondCards />}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default ActiveBondRows\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ActiveBondRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/ActiveBondRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport ChainTitle from './ChainTitle'\nimport BondRow from './BondRow'\nimport { Flex } from 'theme-ui'\nimport { BondsData } from '../../../../types/bonds'\nimport { BaseBondConfig, ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport HotBondCards from '../HotBondCards'\nimport ChainBanner from '../ChainBanner/ChainBanner'\nimport {\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\n// Record<string, (BondsData | BaseBondConfig)[]>\n\ninterface ActiveBondRowsProps {\n  chain: number\n  bonds: (BondsData | BaseBondConfig)[]\n  hideTitles: boolean\n  showHotBonds: boolean\n}\n\nconst ActiveBondRows: React.FC<ActiveBondRowsProps> = ({ chain, bonds, hideTitles, showHotBonds }) => {\n  const { namingPreference } = useSDKConfig()\n  const [isOpen, setIsOpen] = useState<boolean>(true)\n  const key = chain\n\n  return (\n    <Flex className=\"bondrowswithtitle\" key={key}>\n      <AnimatePresence initial={false}>\n        <Flex onClick={() => setIsOpen(!isOpen)} sx={{ cursor: 'pointer' }}>\n          <ChainTitle\n            chain={chain}\n            pt={'5px'}\n            hideTitles={(bonds.length <= 0 && chain !== ChainId.SOL && chain !== ChainId.MONAD) || hideTitles}\n            isOpen={isOpen}\n          />\n        </Flex>\n        {isOpen && (bonds.length > 0 || chain === ChainId.MONAD) && (\n          <motion.div\n            initial={{ height: 0, overflow: 'hidden' }}\n            animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n            exit={{ height: 0, overflow: 'hidden' }}\n            sx={{\n              position: 'relative',\n              overflow: 'hidden',\n              width: '100%',\n              marginTop: '0px',\n            }}\n            key={key}\n            className=\"bonds-card-container\"\n          >\n            {[\n              // ChainId.SOL,\n              ChainId.MONAD,\n              // ChainId.APTOS,\n              // ChainId.SUI\n            ].includes(chain) &&\n              !hideTitles && <ChainBanner chainId={chain} />}\n            {bonds?.map((bondFromMap, index) => {\n              // PRE TGE ROWS\n\n              if (bondFromMap.billType === 'fcfs') {\n                const bond = bondFromMap as BondsData\n                const totalPrincipalBilled =\n                  Math.round(\n                    getBalanceNumber(\n                      bond?.totalPrincipalBilled ?? '0',\n                      bond?.lpToken?.decimals?.[bond?.chainId] as number,\n                    ),\n                  ) / (bond.initPrice ?? 0)\n                const raiseGoal =\n                  Math.round(\n                    getBalanceNumber(bond?.totalRaise ?? '0', bond?.lpToken?.decimals?.[bond?.chainId] as number),\n                  ) / (bond.initPrice ?? 0)\n\n                const tokensRemaining = raiseGoal - totalPrincipalBilled\n                const tokensRemainingUSD = tokensRemaining * (bond?.initPrice ?? 0)\n                const percentageAvailable = 100 - Math.floor((totalPrincipalBilled * 100) / raiseGoal)\n                const earnToken = bond?.earnToken?.symbol\n\n                const baseBonus = bond?.trueBondPrices?.[0]?.bonus ?? 0\n                const airdropBonus = bond?.airdropBonus ?? 0\n                const bonus = baseBonus + airdropBonus\n                const initialRelease = (bond?.initialRelease ?? 0) * 100\n\n                const now = new Date().getTime()\n                const saleFinishTime = (bond?.finishTime ?? 0) * 1000\n                const saleHasFinished = now > saleFinishTime || bond.finalized\n\n                return (\n                  <BondRow\n                    key={`${bond.contractAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.underlyingEarnToken || bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bonus={\n                      bond.yieldBond\n                        ? `${bond.yieldData?.apr.toFixed()}% APR`\n                        : saleHasFinished\n                          ? undefined\n                          : `${bonus}%`\n                    }\n                    airdropTooltip={bond.airdropTooltip}\n                    percentageAvailable={percentageAvailable}\n                    remainingTokensString={\n                      saleHasFinished\n                        ? `0 ${earnToken} ($0) `\n                        : `${formatNumberSI(tokensRemaining, 0)} ${earnToken} ($${formatNumberSI(tokensRemainingUSD, 2)})`\n                    }\n                    vestingTermString={\n                      saleHasFinished\n                        ? '-'\n                        : bond.yieldBond\n                          ? `${\n                              getTimePeriods(\n                                (bond?.yieldData?.rewardDistributionEnd ?? 0) -\n                                  parseInt(bond.startVestingTimestamp ?? '0'),\n                                true,\n                              ).days\n                            } D`\n                          : initialRelease === 100\n                            ? `0 D`\n                            : `${getTimePeriods(bond.vestingTerm).months} Mo`\n                    }\n                    vestingCliffString={\n                      bond.yieldBond\n                        ? `This is the duration over which the bonus yield will be distributed while your initial tokens remain staked.`\n                        : undefined\n                    }\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bondSoldOut={saleHasFinished}\n                    shortDescription={bond.shortDescription}\n                  />\n                )\n              } else {\n                // POST TGE BONDS AKA NORMAL BONDS\n\n                const bond = bondFromMap as BondsData\n                const bondAddress = bond?.contractAddress?.[bond?.chainId] as string\n                const remainingTokensString = getRemainingTokensString(bond)\n                return (\n                  <BondRow\n                    key={`${bondAddress}-${bond.chainId}-${index}`}\n                    bondAddress={bondAddress}\n                    bondChain={bond.chainId}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.highlightTag || bond.tags?.[0]}\n                    trueBondPrices={namingPreference === 'Bonus' ? bond.trueBondPrices : undefined}\n                    minTier={bond?.minTier}\n                    vestingTermString={getVestingTermsString(bond)}\n                    vestingCliffString={getVestingTermsTooltipString(bond)}\n                    percentageAvailable={remainingPercentage(bond)}\n                    remainingTokensString={remainingTokensString}\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    bonus={\n                      namingPreference === 'Discount'\n                        ? `${bond?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n                        : undefined\n                    }\n                    shortDescription={bond.shortDescription}\n                    cgId={bond.cgId}\n                    dexscreener={bond?.dexscreener}\n                  />\n                )\n              }\n            })}\n            {showHotBonds && <HotBondCards />}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default ActiveBondRows\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/views/Bonds/components/BondRows/BondRow.js

@@ -1,6 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import React from 'react';
-import clsx from 'clsx';
 import ProgressBar from '../../../../components/ProgressBar/ProgressBar.js';
 import ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper.js';
 import TokenInfoAndName from '../../../../components/TokenInfoAndName/index.js';
@@ -20,7 +19,7 @@ import Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret.js';
 import More from '../../../../components/uikit-sdk/Svg/Icons/More.js';
 
 const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billType, tag, bondSoldOut, trueBondPrices, minTier, bonus, airdropTooltip, vestingTermString, vestingCliffString, percentageAvailable, remainingTokensString, projectURL, twitterURL, shortDescription, soldoutBondsCount, isOpen, cgId, dexscreener, }) => {
-    const { useCardsView: cardsView } = useSDKConfig();
+    const SDKConfig = useSDKConfig();
     // Modal
     const [openBuyModal] = useModal(jsx(ModalHandler, { bondAddress: bondAddress, bondChain: bondChain }), true, true, `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`);
     const [openPreTGEBondModal] = useModal(jsx(ModalHandlerPreTGE, { bondAddress: bondAddress, bondChain: bondChain }), true, true, `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
@@ -47,21 +46,21 @@ const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billT
             },
         });
     };
-    return (jsxs("div", { className: clsx('bond-row ape:group ape:rounded-normal ape:relative ape:flex', cardsView
-            ? 'ape:flex-col ape:w-[calc(33.33%-20px)] ape:max-[768px]:w-full ape:h-fit ape:float-left ape:mr-[20px] ape:mb-[20px] ape:p-[20px] ape:justify-between'
-            : 'ape:flex-row ape:w-full ape:h-[70px] ape:bg-white2 ape:mb-[5px] ape:justify-between ape:hover:bg-white3'), onClick: handleOpenModal, style: {
-            cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',
+    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, sx: {
+            borderRadius: 'normal',
+            // Insert special campaign styles here
             ...MCBondRowStyles[marketingCampaign],
-        }, children: [jsx("div", { className: clsx('token-info-container', cardsView ? 'ape:w-full' : 'ape:w-[45%] ape:lg:w-[30%] ape:min-w-[unset] ape:lg:min-w-[400px]'), children: jsx(TokenInfoAndName, { tokenSymbol: payoutToken?.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign, cardsView: cardsView }) }), cardsView && shortDescription && (jsx("div", { className: "short-description ape:flex ape:text-[12px] ape:font-normal ape:leading-[22px]", children: jsx(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: clsx('bond-info-columns ape:flex', cardsView
-                    ? 'ape:w-full ape:justify-between ape:items-start ape:mt-[40px]'
-                    : 'ape:flex-row ape:items-center ape:justify-end ape:lg:justify-between ape:w-[55%] ape:lg:w-[70%]'), children: [!cardsView && jsx("div", { className: "ape:hidden ape:lg:flex ape:w-[125px]" }), jsx(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, cardsView: cardsView }), jsxs("div", { className: clsx('terms-column', cardsView
-                            ? 'ape:flex ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[60px]'
-                            : 'ape:hidden ape:lg:flex ape:lg:w-[115px] ape:items-center ape:justify-center'), children: [cardsView && (jsx("span", { className: "ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]", children: "Terms" })), vestingTermString, vestingCliffString && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { className: "ape:opacity-60 ape:ml-[6px]", children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), jsx("div", { className: clsx('tokens-remaining-column', cardsView ? 'ape:hidden' : 'ape:hidden ape:lg:flex ape:lg:w-[135px] ape:items-end ape:justify-center'), children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: percentageAvailable }), style: {
+            cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',
+            '&:hover .list-tag': {
+                background: 'rgb(20 18 29 / 0.25)',
+            },
+        }, children: [jsx("div", { className: "token-info-container", sx: { width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }, children: jsx(TokenInfoAndName, { tokenSymbol: payoutToken?.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign }) }), SDKConfig.useCardsView && shortDescription && (jsx("div", { className: "short-description", children: jsx(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['55%', '55%', '55%', '70%'] }, children: [!SDKConfig.useCardsView && jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), jsx("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
                                 justifyContent: 'center',
-                            }, hideOnMobile: true, showTooltip: true, toolTip: remainingTokensString })) }), jsx("div", { className: clsx('tooltip-column ape:flex', cardsView ? 'ape:w-[25px]' : 'ape:w-[50px]'), children: soldoutBondsCount ? (jsxs(Flex, { className: "ape:gap-[5px] ape:text-[13px] ape:font-medium ape:opacity-50", children: ["(", soldoutBondsCount, ")", jsx(Caret, { direction: isOpen ? 'up' : 'down', width: "8px" })] })) : (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(BondInfoTooltip, { earnTokenContract: payoutToken?.address?.[bondChain] ?? '', earnTokenSymbol: payoutToken?.symbol ?? '', bondContract: bondAddress ?? '', projectLink: projectURL, twitter: twitterURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType, cgId: cgId, dexscreener: dexscreener }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx(Flex, { className: "more-icon ape:opacity-80", children: jsx(More, { width: "25px" }) }) })) })] })] }, `${bondAddress}-${bondChain}`));
+                                display: ['none', 'none', 'none', 'flex'],
+                            }, showTooltip: true, toolTip: remainingTokensString })) }), jsx("div", { className: "tooltip-column", children: soldoutBondsCount ? (jsxs(Flex, { sx: { gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }, children: ["(", soldoutBondsCount, ")", jsx(Caret, { direction: isOpen ? 'up' : 'down', width: "8px" })] })) : (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(BondInfoTooltip, { earnTokenContract: payoutToken?.address?.[bondChain] ?? '', earnTokenSymbol: payoutToken?.symbol ?? '', bondContract: bondAddress ?? '', projectLink: projectURL, twitter: twitterURL, chain: bondChain, isSoldOut: bondSoldOut, billType: billType, cgId: cgId, dexscreener: dexscreener }), width: "205px", placement: "bottomRight", transformTip: "translate(7%, -2%)", children: jsx(Flex, { className: "more-icon", sx: { opacity: 0.8 }, children: jsx(More, { width: "25px" }) }) })) })] })] }, `${bondAddress}-${bondChain}`));
 };
 var BondRow$1 = React.memo(BondRow);
 

package/dist/views/Bonds/components/BondRows/BondRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\ninterface BondRowProps {\n  bondAddress: string\n  bondChain: ChainId\n  marketingCampaign?: MarketingCampaign\n  payoutToken: Token\n  billType: string\n  tag?: string\n  bondSoldOut?: boolean\n  trueBondPrices?: TrueBondPrices[]\n  minTier?: LaunchBondTiers\n  bonus?: string\n  airdropTooltip?: string\n  vestingTermString: string\n  vestingCliffString?: string\n  percentageAvailable: number\n  remainingTokensString: string\n  projectURL?: string\n  twitterURL?: string\n  shortDescription?: string\n  soldoutBondsCount?: number\n  isOpen?: boolean\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n  bondAddress,\n  bondChain,\n  marketingCampaign,\n  payoutToken,\n  billType,\n  tag,\n  bondSoldOut,\n  trueBondPrices,\n  minTier,\n  bonus,\n  airdropTooltip,\n  vestingTermString,\n  vestingCliffString,\n  percentageAvailable,\n  remainingTokensString,\n  projectURL,\n  twitterURL,\n  shortDescription,\n  soldoutBondsCount,\n  isOpen,\n  cgId,\n  dexscreener,\n}) => {\n  const { useCardsView: cardsView } = useSDKConfig()\n\n  // Modal\n  const [openBuyModal] = useModal(\n    <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n  )\n\n  const [openPreTGEBondModal] = useModal(\n    <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n  )\n\n  const handleOpenModal = () => {\n    if (bondSoldOut) return\n    if (billType === 'fcfs') {\n      openPreTGEBondModal()\n    } else {\n      openBuyModal()\n    }\n    if (typeof window !== 'undefined') {\n      const locationPath = window.location.pathname.replace('/', '')\n      window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n    }\n    track({\n      event: 'buyModalOpen',\n      chain: bondChain,\n      data: {\n        cat: 'Row',\n        bond: payoutToken.symbol,\n        bondChain: bondChain,\n      },\n    })\n  }\n\n  return (\n    <div\n      className={clsx(\n        'bond-row ape:group ape:rounded-normal ape:relative ape:flex',\n        cardsView\n          ? 'ape:flex-col ape:w-[calc(33.33%-20px)] ape:max-[768px]:w-full ape:h-fit ape:float-left ape:mr-[20px] ape:mb-[20px] ape:p-[20px] ape:justify-between'\n          : 'ape:flex-row ape:w-full ape:h-[70px] ape:bg-white2 ape:mb-[5px] ape:justify-between ape:hover:bg-white3',\n      )}\n      onClick={handleOpenModal}\n      key={`${bondAddress}-${bondChain}`}\n      style={{\n        cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n        ...MCBondRowStyles[marketingCampaign!],\n      }}\n    >\n      <div\n        className={clsx(\n          'token-info-container',\n          cardsView ? 'ape:w-full' : 'ape:w-[45%] ape:lg:w-[30%] ape:min-w-[unset] ape:lg:min-w-[400px]',\n        )}\n      >\n        <TokenInfoAndName\n          tokenSymbol={payoutToken?.symbol}\n          chain={bondChain}\n          tag={tag}\n          marketingCampaign={marketingCampaign}\n          cardsView={cardsView}\n        />\n      </div>\n      {cardsView && shortDescription && (\n        <div className=\"short-description ape:flex ape:text-[12px] ape:font-normal ape:leading-[22px]\">\n          <SafeHTMLComponent html={shortDescription} />\n        </div>\n      )}\n      <div\n        className={clsx(\n          'bond-info-columns ape:flex',\n          cardsView\n            ? 'ape:w-full ape:justify-between ape:items-start ape:mt-[40px]'\n            : 'ape:flex-row ape:items-center ape:justify-end ape:lg:justify-between ape:w-[55%] ape:lg:w-[70%]',\n        )}\n      >\n        {!cardsView && <div className=\"ape:hidden ape:lg:flex ape:w-[125px]\" />}\n        <BonusContainer\n          trueBondPrices={trueBondPrices}\n          minTier={minTier}\n          bonus={bonus}\n          airdropTooltip={airdropTooltip}\n          cardsView={cardsView}\n        />\n\n        <div\n          className={clsx(\n            'terms-column',\n            cardsView\n              ? 'ape:flex ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[60px]'\n              : 'ape:hidden ape:lg:flex ape:lg:w-[115px] ape:items-center ape:justify-center',\n          )}\n        >\n          {cardsView && (\n            <span className=\"ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]\">Terms</span>\n          )}\n          {vestingTermString}\n          {vestingCliffString && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{vestingCliffString}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex className=\"ape:opacity-60 ape:ml-[6px]\">\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n        <div\n          className={clsx(\n            'tokens-remaining-column',\n            cardsView ? 'ape:hidden' : 'ape:hidden ape:lg:flex ape:lg:w-[135px] ape:items-end ape:justify-center',\n          )}\n        >\n          {bondSoldOut ? (\n            '-'\n          ) : (\n            <ProgressBarWrapper\n              title={''}\n              value={<ProgressBar value={percentageAvailable} />}\n              style={{\n                width: '127px',\n                height: '25px',\n                flexDirection: 'column',\n                justifyContent: 'center',\n              }}\n              hideOnMobile\n              showTooltip={true}\n              toolTip={remainingTokensString}\n            />\n          )}\n        </div>\n        <div className={clsx('tooltip-column ape:flex', cardsView ? 'ape:w-[25px]' : 'ape:w-[50px]')}>\n          {soldoutBondsCount ? (\n            <Flex className=\"ape:gap-[5px] ape:text-[13px] ape:font-medium ape:opacity-50\">\n              ({soldoutBondsCount})\n              <Caret direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n            </Flex>\n          ) : (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Tooltip\n                  earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n                  earnTokenSymbol={payoutToken?.symbol ?? ''}\n                  bondContract={bondAddress ?? ''}\n                  projectLink={projectURL}\n                  twitter={twitterURL}\n                  chain={bondChain}\n                  isSoldOut={bondSoldOut}\n                  billType={billType}\n                  cgId={cgId}\n                  dexscreener={dexscreener}\n                />\n              }\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(7%, -2%)\"\n            >\n              <Flex className=\"more-icon ape:opacity-80\">\n                <More width=\"25px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(BondRow)\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}
+{"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\n\ninterface BondRowProps {\n  bondAddress: string\n  bondChain: ChainId\n  marketingCampaign?: MarketingCampaign\n  payoutToken: Token\n  billType: string\n  tag?: string\n  bondSoldOut?: boolean\n  trueBondPrices?: TrueBondPrices[]\n  minTier?: LaunchBondTiers\n  bonus?: string\n  airdropTooltip?: string\n  vestingTermString: string\n  vestingCliffString?: string\n  percentageAvailable: number\n  remainingTokensString: string\n  projectURL?: string\n  twitterURL?: string\n  shortDescription?: string\n  soldoutBondsCount?: number\n  isOpen?: boolean\n  cgId?: string\n  dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n  bondAddress,\n  bondChain,\n  marketingCampaign,\n  payoutToken,\n  billType,\n  tag,\n  bondSoldOut,\n  trueBondPrices,\n  minTier,\n  bonus,\n  airdropTooltip,\n  vestingTermString,\n  vestingCliffString,\n  percentageAvailable,\n  remainingTokensString,\n  projectURL,\n  twitterURL,\n  shortDescription,\n  soldoutBondsCount,\n  isOpen,\n  cgId,\n  dexscreener,\n}) => {\n  const SDKConfig = useSDKConfig()\n\n  // Modal\n  const [openBuyModal] = useModal(\n    <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n  )\n\n  const [openPreTGEBondModal] = useModal(\n    <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n    true,\n    true,\n    `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n  )\n\n  const handleOpenModal = () => {\n    if (bondSoldOut) return\n    if (billType === 'fcfs') {\n      openPreTGEBondModal()\n    } else {\n      openBuyModal()\n    }\n    if (typeof window !== 'undefined') {\n      const locationPath = window.location.pathname.replace('/', '')\n      window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n    }\n    track({\n      event: 'buyModalOpen',\n      chain: bondChain,\n      data: {\n        cat: 'Row',\n        bond: payoutToken.symbol,\n        bondChain: bondChain,\n      },\n    })\n  }\n\n  return (\n    <div\n      className=\"bond-row\"\n      onClick={handleOpenModal}\n      key={`${bondAddress}-${bondChain}`}\n      sx={{\n        borderRadius: 'normal',\n        // Insert special campaign styles here\n        ...MCBondRowStyles[marketingCampaign!],\n        cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n        '&:hover .list-tag': {\n          background: 'rgb(20 18 29 / 0.25)',\n        },\n      }}\n    >\n      <div\n        className=\"token-info-container\"\n        sx={{ width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }}\n      >\n        <TokenInfoAndName\n          tokenSymbol={payoutToken?.symbol}\n          chain={bondChain}\n          tag={tag}\n          marketingCampaign={marketingCampaign}\n        />\n      </div>\n      {SDKConfig.useCardsView && shortDescription && (\n        <div className=\"short-description\">\n          <SafeHTMLComponent html={shortDescription} />\n        </div>\n      )}\n      <div className=\"bond-info-columns\" sx={{ width: ['55%', '55%', '55%', '70%'] }}>\n        {!SDKConfig.useCardsView && <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />}\n        <BonusContainer\n          trueBondPrices={trueBondPrices}\n          minTier={minTier}\n          bonus={bonus}\n          airdropTooltip={airdropTooltip}\n        />\n\n        <div className=\"terms-column\">\n          {vestingTermString}\n          {vestingCliffString && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{vestingCliffString}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex sx={{ opacity: 0.6, ml: '6px' }}>\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n        <div className=\"tokens-remaining-column\">\n          {bondSoldOut ? (\n            '-'\n          ) : (\n            <ProgressBarWrapper\n              title={''}\n              value={<ProgressBar value={percentageAvailable} />}\n              style={{\n                width: '127px',\n                height: '25px',\n                flexDirection: 'column',\n                justifyContent: 'center',\n                display: ['none', 'none', 'none', 'flex'],\n              }}\n              showTooltip={true}\n              toolTip={remainingTokensString}\n            />\n          )}\n        </div>\n        <div className=\"tooltip-column\">\n          {soldoutBondsCount ? (\n            <Flex sx={{ gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }}>\n              ({soldoutBondsCount})\n              <Caret direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n            </Flex>\n          ) : (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Tooltip\n                  earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n                  earnTokenSymbol={payoutToken?.symbol ?? ''}\n                  bondContract={bondAddress ?? ''}\n                  projectLink={projectURL}\n                  twitter={twitterURL}\n                  chain={bondChain}\n                  isSoldOut={bondSoldOut}\n                  billType={billType}\n                  cgId={cgId}\n                  dexscreener={dexscreener}\n                />\n              }\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(7%, -2%)\"\n            >\n              <Flex className=\"more-icon\" sx={{ opacity: 0.8 }}>\n                <More width=\"25px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(BondRow)\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
+import React from 'react';
 declare const ChainTitle: ({ chain, pt, hideTitles, isOpen, }: {
     chain: number;
     pt: string;
     hideTitles?: boolean;
     isOpen: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ChainTitle;

package/dist/views/Bonds/components/BondRows/ChainTitle.js

@@ -1,8 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { NETWORK_LABEL } from '../../../../config/constants/chains.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
-import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 import TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble/index.js';
@@ -11,8 +9,18 @@ import QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionC
 
 const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
     const isMobile = useIsMobile();
-    const { useCardsView } = useSDKConfig();
-    return (jsxs("div", { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: clsx('chaintitle ape:pb-[10px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase ape:w-[300px] ape:items-center', useCardsView || hideTitles ? 'ape:hidden' : 'ape:flex'), style: { paddingTop: pt }, children: [NETWORK_LABEL[chain], " Bonds", jsx(Flex, { className: "ape:ml-[7px]", children: jsx(Caret, { direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (jsxs(Flex, { className: "ape:ml-[15px]", children: [jsx(Text, { size: "12px", style: { color: '#DE62F3', fontWeight: 700, marginRight: '7px' }, children: "TESTNET" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Text, { className: "ape:normal-case", 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(QuestionCircle, { width: 14, color: "textDisabledButton" }) })] }))] }));
+    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(Flex, { sx: { ml: '7px' }, children: jsx(Caret, { direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) }), NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (jsxs(Flex, { sx: { ml: '15px' }, children: [jsx(Text, { sx: { fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }, children: "TESTNET" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(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(QuestionCircle, { width: 14, color: "textDisabledButton" }) })] }))] }));
 };
 
 export { ChainTitle as default };

package/dist/views/Bonds/components/BondRows/ChainTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChainTitle.js","sources":["../../../../../src/views/Bonds/components/BondRows/ChainTitle.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst ChainTitle = ({\n  chain,\n  pt,\n  hideTitles,\n  isOpen,\n}: {\n  chain: number\n  pt: string\n  hideTitles?: boolean\n  isOpen: boolean\n}) => {\n  const isMobile = useIsMobile()\n  const { useCardsView } = useSDKConfig()\n  return (\n    <div\n      id={`${NETWORK_LABEL[chain].toLowerCase().replace(/\\s+/g, '')}`}\n      className={clsx(\n        'chaintitle ape:pb-[10px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase ape:w-[300px] ape:items-center',\n        useCardsView || hideTitles ? 'ape:hidden' : 'ape:flex',\n      )}\n      style={{ paddingTop: pt }}\n    >\n      {NETWORK_LABEL[chain]} Bonds\n      <Flex className=\"ape:ml-[7px]\">\n        <Caret direction={isOpen ? 'down' : 'up'} width={8} color=\"textDisabledButton\" />\n      </Flex>\n      {NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (\n        <Flex className=\"ape:ml-[15px]\">\n          <Text size=\"12px\" style={{ color: '#DE62F3', fontWeight: 700, marginRight: '7px' }}>\n            TESTNET\n          </Text>\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Text className=\"ape:normal-case\">Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development.</Text>}\n            width={isMobile ? '272px' : '280px'}\n            placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n            transformTip={isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)'}\n          >\n            <QuestionCircle width={14} color=\"textDisabledButton\" />\n          </TooltipBubble>\n        </Flex>\n      )}\n    </div>\n  )\n}\n\nexport default ChainTitle\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWA,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GAMP,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE;IACvC,QACEA,cACE,EAAE,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA,CAAE,EAC/D,SAAS,EAAE,IAAI,CACb,wJAAwJ,EACxJ,YAAY,IAAI,UAAU,GAAG,YAAY,GAAG,UAAU,CACvD,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAA,QAAA,EAAA,CAExB,aAAa,CAAC,KAAK,CAAC,EAAA,QAAA,EACrBC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BA,IAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC5E,EACN,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,KACtDD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,eAAe,aAC7BC,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,SAAA,EAAA,CAE3E,EACPA,IAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAA,qGAAA,EAAA,CAA2G,EAClJ,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,EACnC,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,qBAAqB,GAAG,qBAAqB,EAAA,QAAA,EAEtEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,GAC1C,CAAA,EAAA,CACX,CACR,CAAA,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"ChainTitle.js","sources":["../../../../../src/views/Bonds/components/BondRows/ChainTitle.tsx"],"sourcesContent":["import React from 'react'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst ChainTitle = ({\n  chain,\n  pt,\n  hideTitles,\n  isOpen,\n}: {\n  chain: number\n  pt: string\n  hideTitles?: boolean\n  isOpen: boolean\n}) => {\n  const isMobile = useIsMobile()\n  return (\n    <Flex\n      id={`${NETWORK_LABEL[chain].toLowerCase().replace(/\\s+/g, '')}`}\n      className=\"chaintitle\"\n      sx={{\n        pt,\n        pb: '10px',\n        color: 'textDisabledButton',\n        fontSize: '13px',\n        fontWeight: 500,\n        cursor: 'pointer',\n        textTransform: 'uppercase',\n        display: hideTitles ? 'none' : 'flex',\n        width: '300px',\n        alignItems: 'center',\n      }}\n    >\n      {NETWORK_LABEL[chain]} Bonds\n      <Flex sx={{ ml: '7px' }}>\n        <Caret direction={isOpen ? 'down' : 'up'} width={8} color=\"textDisabledButton\" />\n      </Flex>\n      {NETWORK_LABEL[chain]?.toLowerCase().includes('testnet') && (\n        <Flex sx={{ ml: '15px' }}>\n          <Text sx={{ fontSize: '12px', color: '#DE62F3', fontWeight: 700, mr: '7px' }}>TESTNET</Text>\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Text sx={{ textTransform: 'none' }}>\n                Testnet Bonds let you experiment with fake tokens for free on upcoming chains still in development.\n              </Text>\n            }\n            width={isMobile ? '272px' : '280px'}\n            placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n            transformTip={isMobile ? 'translate(10%, -5%)' : 'translate(-5%, -5%)'}\n          >\n            <QuestionCircle width={14} color=\"textDisabledButton\" />\n          </TooltipBubble>\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default ChainTitle\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AASA,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,EAAE,EACF,UAAU,EACV,MAAM,GAMP,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,CAAA,EAAG,aAAa,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA,CAAE,EAC/D,SAAS,EAAC,YAAY,EACtB,EAAE,EAAE;YACF,EAAE;AACF,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,KAAK,EAAE,oBAAoB;AAC3B,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,aAAa,EAAE,WAAW;YAC1B,OAAO,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM;AACrC,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA,EAAA,QAAA,EAAA,CAEA,aAAa,CAAC,KAAK,CAAC,EAAA,QAAA,EACrBC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,YACrBA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC5E,EACN,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,KACtDD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CACtBC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,wBAAgB,EAC5FA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EACFA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,oHAE5B,EAET,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,EACnC,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,qBAAqB,GAAG,qBAAqB,YAEtEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,EAAA,CAC1C,IACX,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

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

@@ -1,7 +1,8 @@
+import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 declare const ModalHandler: ({ onDismiss, bondAddress, bondChain, }: {
     onDismiss?: () => void;
     bondAddress: string;
     bondChain: ChainId;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ModalHandler;

package/dist/views/Bonds/components/BondRows/ModalHandler.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { getUserBonds } from '../../../../state/bonds/useUserBonds.js';
 import YourBondsModal from '../../../YourBondsModal/YourBondsModal.js';

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

@@ -1,6 +1,7 @@
+import React from 'react';
 declare const ModalHandlerPreTGE: ({ onDismiss, bondAddress, bondChain, }: {
     onDismiss?: () => void;
     bondAddress: string;
     bondChain: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ModalHandlerPreTGE;

package/dist/views/Bonds/components/BondRows/ModalHandlerPreTGE.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import { useState, useEffect } from 'react';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import { useMonitorTx } from '../../../../hooks/useMonitorTx.js';

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

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

package/dist/views/Bonds/components/BondRows/SoldOutRows.js

@@ -1,25 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
-import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import BondRow from './BondRow.js';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import TurnArrow from '../../../../components/uikit-sdk/Svg/Icons/TurnArrow.js';
-import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 
 const SoldOutRows = ({ bonds }) => {
     const bond = bonds[0];
     const [isOpen, setIsOpen] = useState(false);
-    const { useCardsView } = useSDKConfig();
-    return (jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { className: "ape:cursor-pointer", onClick: () => setIsOpen(!isOpen), children: jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, 
+    return (jsxs(AnimatePresence, { initial: false, children: [jsx(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, 
                     //@ts-ignore
                     payoutToken: bond.underlyingEarnToken || bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription, soldoutBondsCount: bonds.length > 1 ? bonds.length : undefined, isOpen: isOpen }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`) }), bonds.length > 1 &&
                 isOpen &&
                 bonds
                     .sort((a, b) => (b?.initTime?.[b.chainId] ?? 0) - (a?.initTime?.[a.chainId] ?? 0))
                     .map((bond) => {
-                    return (jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, className: clsx('bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0', useCardsView && 'ape:flex ape:flex-wrap'), children: jsxs(Flex, { className: "ape:cursor-pointer", onClick: () => setIsOpen(!isOpen), children: [jsx(Flex, { className: "ape:items-center ape:pb-[10px]", children: jsx(TurnArrow, { direction: 'up' }) }), jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription })] }) }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`));
+                    return (jsx(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: jsxs(Flex, { sx: { cursor: 'pointer' }, onClick: () => setIsOpen(!isOpen), children: [jsx(Flex, { sx: { alignItems: 'center', pb: '10px' }, children: jsx(TurnArrow, { direction: 'up' }) }), jsx(BondRow, { bondAddress: bond.contractAddress?.[bond.chainId], marketingCampaign: bond.marketingCampaign, bondChain: bond.chainId, payoutToken: bond.earnToken, billType: bond.billType, tag: bond.tags?.[0], bondSoldOut: true, percentageAvailable: 100, remainingTokensString: `${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`, vestingTermString: "-", projectURL: bond.projectLink, twitterURL: bond.twitter, shortDescription: bond.shortDescription })] }) }, `${bond.contractAddress[bond.chainId]}-${bond.chainId}`));
                 })] }));
 };
 

package/dist/views/Bonds/components/BondRows/SoldOutRows.js.map

@@ -1 +1 @@
-{"version":3,"file":"SoldOutRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/SoldOutRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { BaseBondConfig, BillsConfig, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport BondRow from './BondRow'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { BondsData } from '../../../../types/bonds'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TurnArrow from '../../../../components/uikit-sdk/Svg/Icons/TurnArrow'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\nconst SoldOutRows = ({ bonds }: { bonds: (BondsData | BaseBondConfig)[] }) => {\n  const bond = bonds[0] as BaseBondConfig\n  const [isOpen, setIsOpen] = useState(false)\n  const { useCardsView } = useSDKConfig()\n  return (\n    <AnimatePresence initial={false}>\n      <Flex className=\"ape:cursor-pointer\" onClick={() => setIsOpen(!isOpen)}>\n        <BondRow\n          key={`${bond.contractAddress[bond.chainId]}-${bond.chainId}`}\n          bondAddress={bond.contractAddress?.[bond.chainId] as string}\n          marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n          bondChain={bond.chainId}\n          //@ts-ignore\n          payoutToken={bond.underlyingEarnToken || bond.earnToken}\n          billType={bond.billType}\n          tag={bond.tags?.[0]}\n          bondSoldOut={true}\n          percentageAvailable={100}\n          remainingTokensString={`${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`}\n          vestingTermString=\"-\"\n          projectURL={bond.projectLink}\n          twitterURL={bond.twitter}\n          shortDescription={bond.shortDescription}\n          soldoutBondsCount={bonds.length > 1 ? bonds.length : undefined}\n          isOpen={isOpen}\n        />\n      </Flex>\n      {bonds.length > 1 &&\n        isOpen &&\n        bonds\n          .sort((a: BillsConfig, b: BillsConfig) => (b?.initTime?.[b.chainId] ?? 0) - (a?.initTime?.[a.chainId] ?? 0))\n          .map((bond) => {\n            return (\n              <motion.div\n                initial={{ height: 0, overflow: 'hidden' }}\n                animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n                exit={{ height: 0, overflow: 'hidden' }}\n                key={`${bond.contractAddress[bond.chainId]}-${bond.chainId}`}\n                className={clsx(\n                  'bonds-card-container ape:relative ape:overflow-hidden ape:w-full ape:mt-0',\n                  useCardsView && 'ape:flex ape:flex-wrap',\n                )}\n              >\n                <Flex className=\"ape:cursor-pointer\" onClick={() => setIsOpen(!isOpen)}>\n                  <Flex className=\"ape:items-center ape:pb-[10px]\">\n                    <TurnArrow direction={'up'} />\n                  </Flex>\n                  <BondRow\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    bondChain={bond.chainId}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bondSoldOut={true}\n                    percentageAvailable={100}\n                    remainingTokensString={`${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`}\n                    vestingTermString=\"-\"\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    shortDescription={bond.shortDescription}\n                  />\n                </Flex>\n              </motion.div>\n            )\n          })}\n    </AnimatePresence>\n  )\n}\n\nexport default SoldOutRows\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"SoldOutRows.js","sources":["../../../../../src/views/Bonds/components/BondRows/SoldOutRows.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { BaseBondConfig, BillsConfig, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport BondRow from './BondRow'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { BondsData } from '../../../../types/bonds'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TurnArrow from '../../../../components/uikit-sdk/Svg/Icons/TurnArrow'\n\nconst SoldOutRows = ({ bonds }: { bonds: (BondsData | BaseBondConfig)[] }) => {\n  const bond = bonds[0] as BaseBondConfig\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <AnimatePresence initial={false}>\n      <Flex sx={{ cursor: 'pointer' }} onClick={() => setIsOpen(!isOpen)}>\n        <BondRow\n          key={`${bond.contractAddress[bond.chainId]}-${bond.chainId}`}\n          bondAddress={bond.contractAddress?.[bond.chainId] as string}\n          marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n          bondChain={bond.chainId}\n          //@ts-ignore\n          payoutToken={bond.underlyingEarnToken || bond.earnToken}\n          billType={bond.billType}\n          tag={bond.tags?.[0]}\n          bondSoldOut={true}\n          percentageAvailable={100}\n          remainingTokensString={`${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`}\n          vestingTermString=\"-\"\n          projectURL={bond.projectLink}\n          twitterURL={bond.twitter}\n          shortDescription={bond.shortDescription}\n          soldoutBondsCount={bonds.length > 1 ? bonds.length : undefined}\n          isOpen={isOpen}\n        />\n      </Flex>\n      {bonds.length > 1 &&\n        isOpen &&\n        bonds\n          .sort((a: BillsConfig, b: BillsConfig) => (b?.initTime?.[b.chainId] ?? 0) - (a?.initTime?.[a.chainId] ?? 0))\n          .map((bond) => {\n            return (\n              <motion.div\n                initial={{ height: 0, overflow: 'hidden' }}\n                animate={{ height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }}\n                exit={{ height: 0, overflow: 'hidden' }}\n                sx={{\n                  position: 'relative',\n                  overflow: 'hidden',\n                  width: '100%',\n                  marginTop: '0px',\n                }}\n                key={`${bond.contractAddress[bond.chainId]}-${bond.chainId}`}\n                className=\"bonds-card-container\"\n              >\n                <Flex sx={{ cursor: 'pointer' }} onClick={() => setIsOpen(!isOpen)}>\n                  <Flex sx={{ alignItems: 'center', pb: '10px' }}>\n                    <TurnArrow direction={'up'} />\n                  </Flex>\n                  <BondRow\n                    bondAddress={bond.contractAddress?.[bond.chainId] as string}\n                    marketingCampaign={bond.marketingCampaign as MarketingCampaign}\n                    bondChain={bond.chainId}\n                    payoutToken={bond.earnToken}\n                    billType={bond.billType}\n                    tag={bond.tags?.[0]}\n                    bondSoldOut={true}\n                    percentageAvailable={100}\n                    remainingTokensString={`${formatNumberSI(0, 0)} ${bond.earnToken.symbol} ($${formatNumberSI(0, 2)})`}\n                    vestingTermString=\"-\"\n                    projectURL={bond.projectLink}\n                    twitterURL={bond.twitter}\n                    shortDescription={bond.shortDescription}\n                  />\n                </Flex>\n              </motion.div>\n            )\n          })}\n    </AnimatePresence>\n  )\n}\n\nexport default SoldOutRows\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/BondsMenu/BondsMenu.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Input from '../../../../components/uikit-sdk/Input/Input.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import FavIcon from '../../../../components/FavIcons/FavFilter.js';
@@ -8,8 +7,15 @@ import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import Sort from '../../../../components/uikit-sdk/Svg/Icons/Sort.js';
 
 const BondsMenu = ({ searchQuery, setSearchQuery, setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onSort, }) => {
-    const { namingPreference, useCardsView } = useSDKConfig();
-    return (jsxs("div", { className: "bonds-menu ape:flex ape:justify-around ape:items-center ape:flex-col ape:w-full ape:text-[11px]", children: [jsx(BondFilters, { chainFilterOption: chainFilterOption ?? ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }), jsxs("div", { className: "table-header-container ape:flex ape:w-full ape:justify-between ape:overflow-hidden ape:py-[10px] ape:min-[1000px]:p-[20px_0_10px_0]", children: [jsx("div", { className: "search-container ape:flex ape:flex-row ape:lg:w-[30%] ape:lg:min-w-[400px]", children: jsxs(Flex, { className: "ape:w-full ape:max-w-[340px]", children: [jsx(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", width: '100%', className: "ape:font-semibold ape:bg-white2 ape:h-[30px] ape:text-[14px] ape:w-[calc(50vw-25px)]", style: { color: 'white' }, placeholder: 'Search...' }), jsx(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: clsx('headers-container ape:flex ape:w-1/2 ape:justify-end ape:items-center ape:min-[1000px]:justify-between ape:min-[1000px]:w-[70%]', useCardsView && 'ape:hidden'), children: [jsx(Flex, { className: "ape:w-[125px]" }), jsxs("div", { className: "discount-header ape:flex ape:w-[170px] ape:items-end ape:cursor-pointer ape:opacity-60 ape:pl-[15px] ape:min-[513px]:pl-0 ape:min-[513px]:justify-center", onClick: () => onSort('bonus'), children: [namingPreference.toUpperCase(), jsx(Flex, { className: "ape:ml-[5px] ape:mb-[3px]", children: jsx(Sort, { width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header ape:hidden ape:w-[115px] ape:items-end ape:justify-center ape:opacity-60 ape:cursor-pointer ape:min-[1000px]:flex", onClick: () => onSort('terms'), children: ["TERMS", jsx(Flex, { className: "ape:ml-[5px] ape:mb-[3px]", children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header ape:hidden ape:w-[135px] ape:items-end ape:justify-center ape:cursor-pointer ape:opacity-60 ape:min-[1000px]:flex", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx(Flex, { className: "ape:ml-[5px] ape:mb-[3px]", children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsx("div", { className: "tooltip-header ape:w-[50px] ape:flex" })] })] })] }));
+    const { namingPreference } = useSDKConfig();
+    return (jsxs("div", { className: "bonds-menu", children: [jsx(BondFilters, { chainFilterOption: chainFilterOption ?? ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setSearchQuery('') }), jsxs("div", { className: "table-header-container", children: [jsx("div", { className: "search-container", children: jsxs(Flex, { sx: { width: '100%', maxWidth: '340px' }, children: [jsx(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(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: "headers-container", children: [jsx(Flex, { sx: { width: '125px' } }), jsxs("div", { className: "discount-header", onClick: () => onSort('bonus'), children: [namingPreference.toUpperCase(), jsx(Flex, { sx: { ml: '5px', mb: '3px' }, children: jsx(Sort, { width: 10, color: "textDisabledButton" }) })] }), jsxs("div", { className: "terms-header", onClick: () => onSort('terms'), children: ["TERMS", jsx(Flex, { sx: { ml: '5px', mb: '3px' }, children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "tokens-remaining-header", onClick: () => onSort('tokensRemaining'), children: ["TOKENS REMAINING", jsx(Flex, { sx: { ml: '5px', mb: '3px' }, children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsx("div", { className: "tooltip-header" })] })] })] }));
 };
 
 export { BondsMenu as default };

package/dist/views/Bonds/components/BondsMenu/BondsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondsMenu.js","sources":["../../../../../src/views/Bonds/components/BondsMenu/BondsMenu.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Input from '../../../../components/uikit-sdk/Input/Input'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport FavIcon from '../../../../components/FavIcons/FavFilter'\nimport BondFilters from '../../../../components/BondFilters/BondFilters'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport Sort from '../../../../components/uikit-sdk/Svg/Icons/Sort'\n\ninterface BondRowHeaderProps {\n  searchQuery: string\n  setSearchQuery: (value: string) => void\n  setChainFilterOption: (newValue: string[]) => void\n  chainFilterOption: string[]\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n  onSort: (key: 'bonus' | 'arr' | 'terms' | 'tokensRemaining') => void\n}\n\nconst BondsMenu: React.FC<BondRowHeaderProps> = ({\n  searchQuery,\n  setSearchQuery,\n  setChainFilterOption,\n  chainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  onSort,\n}) => {\n  const { namingPreference, useCardsView } = useSDKConfig()\n  return (\n    <div className=\"bonds-menu ape:flex ape:justify-around ape:items-center ape:flex-col ape:w-full ape:text-[11px]\">\n      <BondFilters\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        setChainFilterOption={setChainFilterOption}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={setFilterOption}\n        onHandleQueryChange={() => setSearchQuery('')}\n      />\n      <div className=\"table-header-container ape:flex ape:w-full ape:justify-between ape:overflow-hidden ape:py-[10px] ape:min-[1000px]:p-[20px_0_10px_0]\">\n        <div className=\"search-container ape:flex ape:flex-row ape:lg:w-[30%] ape:lg:min-w-[400px]\">\n          <Flex className=\"ape:w-full ape:max-w-[340px]\">\n            <Input\n              value={searchQuery}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(event.target.value)}\n              variant=\"search\"\n              width={'100%'}\n              className=\"ape:font-semibold ape:bg-white2 ape:h-[30px] ape:text-[14px] ape:w-[calc(50vw-25px)]\"\n              style={{ color: 'white' }}\n              placeholder={'Search...'}\n            />\n            <FavIcon filterOption={filterOption} setFilterOption={setFilterOption} />\n          </Flex>\n        </div>\n        <div\n          className={clsx(\n            'headers-container ape:flex ape:w-1/2 ape:justify-end ape:items-center ape:min-[1000px]:justify-between ape:min-[1000px]:w-[70%]',\n            useCardsView && 'ape:hidden',\n          )}\n        >\n          <Flex className=\"ape:w-[125px]\" />\n          <div\n            className=\"discount-header ape:flex ape:w-[170px] ape:items-end ape:cursor-pointer ape:opacity-60 ape:pl-[15px] ape:min-[513px]:pl-0 ape:min-[513px]:justify-center\"\n            onClick={() => onSort('bonus')}\n          >\n            {namingPreference.toUpperCase()}\n            <Flex className=\"ape:ml-[5px] ape:mb-[3px]\">\n              <Sort width={10} color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div\n            className=\"terms-header ape:hidden ape:w-[115px] ape:items-end ape:justify-center ape:opacity-60 ape:cursor-pointer ape:min-[1000px]:flex\"\n            onClick={() => onSort('terms')}\n          >\n            TERMS\n            <Flex className=\"ape:ml-[5px] ape:mb-[3px]\">\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div\n            className=\"tokens-remaining-header ape:hidden ape:w-[135px] ape:items-end ape:justify-center ape:cursor-pointer ape:opacity-60 ape:min-[1000px]:flex\"\n            onClick={() => onSort('tokensRemaining')}\n          >\n            TOKENS REMAINING\n            <Flex className=\"ape:ml-[5px] ape:mb-[3px]\">\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"tooltip-header ape:w-[50px] ape:flex\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default BondsMenu\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"BondsMenu.js","sources":["../../../../../src/views/Bonds/components/BondsMenu/BondsMenu.tsx"],"sourcesContent":["import React from 'react'\nimport Input from '../../../../components/uikit-sdk/Input/Input'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport FavIcon from '../../../../components/FavIcons/FavFilter'\nimport BondFilters from '../../../../components/BondFilters/BondFilters'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport Sort from '../../../../components/uikit-sdk/Svg/Icons/Sort'\n\ninterface BondRowHeaderProps {\n  searchQuery: string\n  setSearchQuery: (value: string) => void\n  setChainFilterOption: (newValue: string[]) => void\n  chainFilterOption: string[]\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newOption: string) => void\n  onSort: (key: 'bonus' | 'arr' | 'terms' | 'tokensRemaining') => void\n}\n\nconst BondsMenu: React.FC<BondRowHeaderProps> = ({\n  searchQuery,\n  setSearchQuery,\n  setChainFilterOption,\n  chainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  onSort,\n}) => {\n  const { namingPreference } = useSDKConfig()\n  return (\n    <div className=\"bonds-menu\">\n      <BondFilters\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        setChainFilterOption={setChainFilterOption}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={setFilterOption}\n        onHandleQueryChange={() => setSearchQuery('')}\n      />\n      <div className=\"table-header-container\">\n        <div className=\"search-container\">\n          <Flex sx={{ width: '100%', maxWidth: '340px' }}>\n            <Input\n              value={searchQuery}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(event.target.value)}\n              variant=\"search\"\n              width={'100%'}\n              sx={{\n                fontWeight: 600,\n                background: 'white2',\n                height: '30px',\n                fontSize: '14px',\n                color: 'white',\n                width: ['calc(50vw - 25px)'],\n              }}\n              placeholder={'Search...'}\n            />\n            <FavIcon filterOption={filterOption} setFilterOption={setFilterOption} />\n          </Flex>\n        </div>\n        <div className=\"headers-container\">\n          <Flex sx={{ width: '125px' }} />\n          <div className=\"discount-header\" onClick={() => onSort('bonus')}>\n            {namingPreference.toUpperCase()}\n            <Flex sx={{ ml: '5px', mb: '3px' }}>\n              <Sort width={10} color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"terms-header\" onClick={() => onSort('terms')}>\n            TERMS\n            <Flex sx={{ ml: '5px', mb: '3px' }}>\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"tokens-remaining-header\" onClick={() => onSort('tokensRemaining')}>\n            TOKENS REMAINING\n            <Flex sx={{ ml: '5px', mb: '3px' }}>\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"tooltip-header\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default BondsMenu\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAmBA,MAAM,SAAS,GAAiC,CAAC,EAC/C,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,MAAM,GACP,KAAI;AACH,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,YAAY,EAAE;IAC3C,QACEA,cAAK,SAAS,EAAC,YAAY,EAAA,QAAA,EAAA,CACzBC,GAAA,CAAC,WAAW,EAAA,EACV,iBAAiB,EAAE,iBAAiB,IAAI,CAAC,YAAY,CAAC,EACtD,oBAAoB,EAAE,oBAAoB,EAC1C,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,EAChC,mBAAmB,EAAE,MAAM,cAAc,CAAC,EAAE,CAAC,EAAA,CAC7C,EACFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EAAA,CACrCC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,YAC/BD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,CAC5CC,IAAC,KAAK,EAAA,EACJ,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,KAA0C,KAAK,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5F,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,MAAM,EACb,EAAE,EAAE;AACF,wCAAA,UAAU,EAAE,GAAG;AACf,wCAAA,UAAU,EAAE,QAAQ;AACpB,wCAAA,MAAM,EAAE,MAAM;AACd,wCAAA,QAAQ,EAAE,MAAM;AAChB,wCAAA,KAAK,EAAE,OAAO;wCACd,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC7B,qCAAA,EACD,WAAW,EAAE,WAAW,GACxB,EACFA,GAAA,CAAC,OAAO,EAAA,EAAC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,GAAI,CAAA,EAAA,CACpE,EAAA,CACH,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,aAChCC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,CAAI,EAChCD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,CAC5D,gBAAgB,CAAC,WAAW,EAAE,EAC/BC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,YAChCA,GAAA,CAAC,IAAI,IAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAA,CAAG,GACzC,CAAA,EAAA,CACH,EACND,cAAK,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,sBAE1DC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,oBAAoB,GAAG,EAAA,CAC3C,CAAA,EAAA,CACH,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,MAAM,MAAM,CAAC,iBAAiB,CAAC,EAAA,QAAA,EAAA,CAAA,kBAAA,EAE/EC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,oBAAoB,GAAG,EAAA,CAC3C,CAAA,EAAA,CACH,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,CAAG,IAC9B,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/views/Bonds/components/BonusComponents/BonusComponent.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TrueBondPrices } from '../../../../types/bonds';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 declare const BonusComponent: ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition, hideTooltip, }: {
@@ -7,5 +8,5 @@ declare const BonusComponent: ({ trueBondPrices, minTier, bonus, airdropTooltip,
     airdropTooltip?: string;
     tooltipPosition?: "bottomRight" | "bottomLeft";
     hideTooltip?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default BonusComponent;

package/dist/views/Bonds/components/BonusComponents/BonusComponent.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import BonusTable from './BonusTable.js';
 import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import { getDiscountColor } from '../../utils.js';
@@ -16,9 +15,30 @@ const BonusComponent = ({ trueBondPrices, minTier, bonus, airdropTooltip, toolti
         return BigInt(current.points) > BigInt(max.points) ? current : max;
     }, trueBondPrices[0]);
     const baseTrueBondPrice = findHighestTrueBondPrice('0', trueBondPrices);
-    return (jsx(Flex, { children: trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (jsx(Flex, { className: "ape:items-center ape:min-w-[20px]", children: highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (jsx(TooltipBubble, { width: "280px", placement: tooltipPosition, transformTip: tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)', body: jsx(BonusTable, { trueBondPrices: trueBondPrices, minTier: minTier }), hideTooltip: hideTooltip, children: jsxs(Flex, { className: "ape:p-[3px_6px] ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:bg-transparent ape:relative ape:overflow-hidden ape:cursor-pointer ape:w-[130px] ape:md:w-[150px]", children: [jsx(Flex, { className: "ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-[1] ape:bg-[#9960C5] ape:opacity-20" }), jsxs(Flex, { className: "ape:w-full ape:z-[2] ape:items-center ape:justify-center", children: [jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsx(Flex, { className: "ape:text-[12px] ape:lg:text-[14px] ape:mr-[3px]", children: "Up to" }), jsxs(Flex, { className: clsx('ape:text-[14px] ape:lg:text-[16px]', highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0
-                                        ? 'ape:text-success'
-                                        : 'ape:text-error'), children: [highestPointsElement?.bonusWithFee?.toFixed(2), "%"] })] })] }) })) : (jsx(Flex, { className: "ape:h-[20px] ape:w-[20px]", children: jsx(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx(Timer, { width: "20px", color: "#81CFEA" }) }) })) })) : baseTrueBondPrice ? (jsx(Flex, { className: clsx('ape:items-center ape:min-w-[20px]', getDiscountColor(+baseTrueBondPrice?.bonusWithFee)), children: baseTrueBondPrice?.bonusWithFee > 0 ? (`${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`) : (jsx(Flex, { className: "ape:h-[20px] ape:w-[20px]", children: jsx(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx(Timer, { width: "20px", color: "#81CFEA" }) }) })) })) : (jsxs(Flex, { className: "ape:items-center ape:min-w-[20px]", style: { color: bonus ? 'var(--ape-color-success)' : undefined }, children: [bonus || '-', airdropTooltip && (jsx(TooltipBubble, { body: jsx(Fragment, { children: airdropTooltip }), width: "230px", placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)', children: jsx(Flex, { className: "ape:w-[20px] ape:h-[20px] ape:items-center ape:ml-[5px]", children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png", alt: "airdrop-img", style: { width: '20px', height: '20px' } }) }) }))] })) }));
+    return (jsx(Flex, { children: trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (jsx(Flex, { sx: { alignItems: 'center', minWidth: '20px' }, children: highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (jsx(TooltipBubble, { width: "280px", placement: tooltipPosition, transformTip: tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)', body: jsx(BonusTable, { trueBondPrices: trueBondPrices, minTier: minTier }), sx: { display: hideTooltip ? 'none' : 'block' }, children: jsxs(Flex, { sx: {
+                        p: '3px 6px',
+                        border: '1px solid #9960C5',
+                        borderRadius: 'normal',
+                        background: 'transparent',
+                        position: 'relative',
+                        overflow: 'hidden',
+                        cursor: 'pointer',
+                        width: ['130px', '130px', '150px', '150px'],
+                    }, children: [jsx(Flex, { sx: {
+                                position: 'absolute',
+                                width: '100%',
+                                height: '100%',
+                                top: 0,
+                                left: 0,
+                                zIndex: 1,
+                                background: '#9960C5',
+                                opacity: 0.2,
+                            } }), jsxs(Flex, { sx: { width: '100%', zIndex: 2, alignItems: 'center', justifyContent: 'center' }, children: [jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsx(Flex, { sx: { fontSize: ['12px', '12px', '14px', '14px'], mr: '3px' }, children: "Up to" }), jsxs(Flex, { sx: {
+                                        color: highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0
+                                            ? 'success'
+                                            : 'error',
+                                        fontSize: ['14px', '14px', '16px', '16px'],
+                                    }, children: [highestPointsElement?.bonusWithFee?.toFixed(2), "%"] })] })] }) })) : (jsx(Flex, { sx: { height: '20px', width: '20px' }, children: jsx(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx(Timer, { width: "20px", color: "#81CFEA" }) }) })) })) : baseTrueBondPrice ? (jsx(Flex, { sx: { alignItems: 'center', minWidth: '20px' }, className: `${getDiscountColor(+baseTrueBondPrice?.bonusWithFee)}`, children: baseTrueBondPrice?.bonusWithFee > 0 ? (`${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`) : (jsx(Flex, { sx: { height: '20px', width: '20px' }, children: jsx(TooltipBubble, { body: 'This bond is currently on cooldown and has no bonus. Please check back soon.', width: "205px", placement: "bottomRight", transformTip: "translate(10%, 0%)", children: jsx(Timer, { width: "20px", color: "#81CFEA" }) }) })) })) : (jsxs(Flex, { sx: { color: bonus && 'success', alignItems: 'center', minWidth: '20px' }, children: [bonus || '-', airdropTooltip && (jsx(TooltipBubble, { body: jsx(Fragment, { children: airdropTooltip }), width: "230px", placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)', children: jsx(Flex, { sx: { width: '20px', height: '20px', alignItems: 'center', ml: '5px' }, children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png", alt: "airdrop-img", style: { width: '20px', height: '20px' } }) }) }))] })) }));
 };
 
 export { BonusComponent as default };