@ape.swap/bonds-sdk 6.3.0-test.69 → 7.0.0-test.0

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

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/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';
@@ -8,7 +9,7 @@ import useModal from '../../../../hooks/useModal.js';
 import ModalHandler from './ModalHandler.js';
 import track from '../../../../utils/track.js';
 import BonusContainer from '../BonusComponents/BonusContainer.js';
-import ModalHandlerPreTGE from './ModalHandlerPreTGE.js';
+import { getAdapterForChain } from '../../../../adapters/registry.js';
 import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import SafeHTMLComponent from '../../../../components/SafeHTMLComponent/index.js';
 import { MCBondRowStyles } from '../../../../utils/campaignStyles.js';
@@ -19,14 +20,18 @@ 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 SDKConfig = useSDKConfig();
+    const { useCardsView: cardsView } = 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}}`);
+    // PreTGE / launch bonds ('fcfs') have their own buy flow, provided by the chain's adapter (EVM only today)
+    const preTGE = getAdapterForChain(bondChain)?.preTGE;
+    const [openPreTGEBondModal] = useModal(preTGE ? jsx(preTGE.ModalHandler, { bondAddress: bondAddress, bondChain: bondChain }) : null, true, true, `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
     const handleOpenModal = () => {
         if (bondSoldOut)
             return;
         if (billType === 'fcfs') {
+            if (!preTGE)
+                return;
             openPreTGEBondModal();
         }
         else {
@@ -46,21 +51,25 @@ const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billT
             },
         });
     };
-    return (jsxs("div", { className: "bond-row", onClick: handleOpenModal, sx: {
-            borderRadius: 'normal',
-            // Insert special campaign styles here
-            ...MCBondRowStyles[marketingCampaign],
+    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',
-            '&: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: {
+            ...MCBondRowStyles[marketingCampaign],
+        }, children: [jsx("div", { className: clsx('token-info-container', cardsView ? 'ape:w-full' : 'ape:w-[49%] ape:xl:w-[30%] ape:min-w-[unset] ape:xl: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:xl:justify-between ape:w-[49%] ape:xl: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:xl:flex ape:xl: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:xl:flex ape:xl:w-[135px] ape:items-end ape:justify-center'), children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar
+                            //TODO: remove this custom request once bond ends
+                            , { 
+                                //TODO: remove this custom request once bond ends
+                                value: payoutToken?.symbol === 'HAR' ? Math.max(percentageAvailable - 33, 0) : percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
                                 justifyContent: 'center',
-                                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}`));
+                            }, hideOnMobile: true, showTooltip: true, toolTip: remainingTokensString })) }), jsx("div", { className: clsx('tooltip-column ape:flex', cardsView ? 'ape:w-[25px]' : 'ape:w-[50px] ape:justify-center ape:sm:justify-start'), 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}`));
 };
 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 { 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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"}
+{"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 { getAdapterForChain } from '../../../../adapters/registry'\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  // PreTGE / launch bonds ('fcfs') have their own buy flow, provided by the chain's adapter (EVM only today)\n  const preTGE = getAdapterForChain(bondChain)?.preTGE\n  const [openPreTGEBondModal] = useModal(\n    preTGE ? <preTGE.ModalHandler bondAddress={bondAddress} bondChain={bondChain} /> : null,\n    true,\n    true,\n    `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n  )\n\n  const handleOpenModal = () => {\n    if (bondSoldOut) return\n    if (billType === 'fcfs') {\n      if (!preTGE) return\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-[49%] ape:xl:w-[30%] ape:min-w-[unset] ape:xl: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:xl:justify-between ape:w-[49%] ape:xl: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        <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:xl:flex ape:xl: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:xl:flex ape:xl:w-[135px] ape:items-end ape:justify-center',\n          )}\n        >\n          {bondSoldOut ? (\n            '-'\n          ) : (\n            <ProgressBarWrapper\n              title={''}\n              value={\n                <ProgressBar\n                  //TODO: remove this custom request once bond ends\n                  value={payoutToken?.symbol === 'HAR' ? Math.max(percentageAvailable - 33, 0) : percentageAvailable}\n                />\n              }\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\n          className={clsx(\n            'tooltip-column ape:flex',\n            cardsView ? 'ape:w-[25px]' : 'ape:w-[50px] ape:justify-center ape:sm:justify-start',\n          )}\n        >\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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"}

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

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

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

@@ -1,6 +1,8 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 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';
@@ -9,18 +11,8 @@ import QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionC
 
 const ChainTitle = ({ chain, pt, hideTitles, isOpen, }) => {
     const isMobile = useIsMobile();
-    return (jsxs(Flex, { id: `${NETWORK_LABEL[chain].toLowerCase().replace(/\s+/g, '')}`, className: "chaintitle", sx: {
-            pt,
-            pb: '10px',
-            color: 'textDisabledButton',
-            fontSize: '13px',
-            fontWeight: 500,
-            cursor: 'pointer',
-            textTransform: 'uppercase',
-            display: hideTitles ? 'none' : 'flex',
-            width: '300px',
-            alignItems: 'center',
-        }, children: [NETWORK_LABEL[chain], " Bonds", jsx(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" }) })] }))] }));
+    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" }) })] }))] }));
 };
 
 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 { 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -1,22 +1,18 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { getUserBonds } from '../../../../state/bonds/useUserBonds.js';
 import YourBondsModal from '../../../YourBondsModal/YourBondsModal.js';
 import BuyBondModal from '../../../BuyBond/BuyBondModal.js';
-import { useMonitorTx } from '../../../../hooks/useMonitorTx.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
-import useEVMAccount from '../../../../hooks/accounts/useEVMAccount.js';
-import useSOLAccount from '../../../../hooks/accounts/useSOLAccount.js';
-import useAPTAccount from '../../../../hooks/accounts/useAPTAccount.js';
-import useSUIAccount from '../../../../hooks/accounts/useSUIAccount.js';
+import useChainAccount from '../../../../state/chainAccount/useChainAccount.js';
 import { useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS } from '../../../../config/constants/queryKeys.js';
 
 /*
  * Basically this is a handler that controls which Modal is displayed to the user.
- * It will start by showing the buy modal and if a user purchases a bond, a hash will be set, this will initially trigger
- * a monitor of the txhash and the search for a bill Id. Finally, if a billId is found the YourBondModal will be shown.
+ * It will start by showing the buy modal; once a purchase is confirmed, the chain's buy component reports the new bill
+ * id through setBillId, and the YourBondModal is shown for that bill.
  * */
 const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
     // State
@@ -29,31 +25,11 @@ const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
     // Hooks
     const { data: bondsData } = useBondsData();
     const locationPath = window.location.pathname;
-    const { data: txReceipt } = useMonitorTx(afterFlowData.buyTxHash, bondChain);
-    const { address } = useEVMAccount();
-    const { publicKey } = useSOLAccount();
-    const solanaAccount = publicKey?.toBase58();
-    const { address: aptosAccount } = useAPTAccount();
-    const { address: suiAccount } = useSUIAccount();
+    const { address } = useChainAccount('evm');
+    const { address: solanaAccount } = useChainAccount('sol');
+    const { address: aptosAccount } = useChainAccount('aptos');
+    const { address: suiAccount } = useChainAccount('sui');
     const queryClient = useQueryClient();
-    // EVM - Look for billId on tx logs
-    if (txReceipt) {
-        try {
-            const billNftAddress = bondsData?.find((bond) => bond?.contractAddress?.[bond.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&
-                bond.chainId === bondChain)?.billNnftAddress?.[bondChain];
-            const { logs } = txReceipt;
-            const findBillNftLog = logs.find((log) => log.address.toLowerCase() === billNftAddress?.toLowerCase());
-            const getBillNftIndex = findBillNftLog?.topics[findBillNftLog.topics.length - 1];
-            const convertHexId = parseInt(getBillNftIndex, 16);
-            if (!billId) {
-                console.log('set Bill id: ' + convertHexId.toString());
-                setBillId(convertHexId.toString());
-            }
-        }
-        catch (e) {
-            console.log(e);
-        }
-    }
     // Trigger refetch once txs are confirmed
     const hasRefetched = useRef(false);
     useEffect(() => {
@@ -74,15 +50,12 @@ const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
                     setUserBill(cachedBond);
                     return;
                 }
-                getUserBonds(address, solanaAccount, aptosAccount, suiAccount, { [bondChain]: [bondToRefetch] }, queryClient)
+                getUserBonds({ evm: address, sol: solanaAccount, aptos: aptosAccount, sui: suiAccount }, { [bondChain]: [bondToRefetch] }, queryClient)
                     .then((bonds) => {
                     const purchasedBond = bonds.find((bond) => {
                         if (bond?.bond?.chainId === ChainId.SOL) {
                             return bond.asset === billId;
                         }
-                        else if (bond?.bond?.chainId === ChainId.SUI) {
-                            return bond.id === billId;
-                        }
                         else {
                             return bond.id === billId;
                         }

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

@@ -1 +1 @@
-{"version":3,"file":"ModalHandler.js","sources":["../../../../../src/views/Bonds/components/BondRows/ModalHandler.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { getUserBonds } from '../../../../state/bonds/useUserBonds'\nimport YourBondsModal from '../../../YourBondsModal/YourBondsModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport { useMonitorTx } from '../../../../hooks/useMonitorTx'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { BillsConfig, ChainId } from '@ape.swap/apeswap-lists'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../../../hooks/accounts/useSUIAccount'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { QUERY_KEYS } from '../../../../config/constants/queryKeys'\n\n/*\n * Basically this is a handler that controls which Modal is displayed to the user.\n * It will start by showing the buy modal and if a user purchases a bond, a hash will be set, this will initially trigger\n * a monitor of the txhash and the search for a bill Id. Finally, if a billId is found the YourBondModal will be shown.\n * */\n\nconst ModalHandler = ({\n  onDismiss,\n  bondAddress,\n  bondChain,\n}: {\n  onDismiss?: () => void\n  bondAddress: string\n  bondChain: ChainId\n}) => {\n  // State\n  const [billId, setBillId] = useState('')\n  const [afterFlowData, setAfterFlowData] = useState<{ buyTxHash: string; lostProfit?: string }>({\n    buyTxHash: '',\n    lostProfit: undefined,\n  })\n  const [userBill, setUserBill] = useState<UserBill>()\n\n  // Hooks\n  const { data: bondsData } = useBondsData()\n  const locationPath = window.location.pathname\n  const { data: txReceipt } = useMonitorTx(afterFlowData.buyTxHash, bondChain)\n  const { address } = useEVMAccount()\n  const { publicKey } = useSOLAccount()\n  const solanaAccount = publicKey?.toBase58()\n  const { address: aptosAccount } = useAPTAccount()\n  const { address: suiAccount } = useSUIAccount()\n  const queryClient = useQueryClient()\n\n  // EVM - Look for billId on tx logs\n  if (txReceipt) {\n    try {\n      const billNftAddress = bondsData?.find(\n        (bond) =>\n          bond?.contractAddress?.[bond.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&\n          bond.chainId === bondChain,\n      )?.billNnftAddress?.[bondChain]\n      const { logs } = txReceipt\n      const findBillNftLog = logs.find((log: any) => log.address.toLowerCase() === billNftAddress?.toLowerCase())\n      const getBillNftIndex = findBillNftLog?.topics[findBillNftLog.topics.length - 1] as string\n      const convertHexId = parseInt(getBillNftIndex, 16)\n      if (!billId) {\n        console.log('set Bill id: ' + convertHexId.toString())\n        setBillId(convertHexId.toString())\n      }\n    } catch (e) {\n      console.log(e)\n    }\n  }\n\n  // Trigger refetch once txs are confirmed\n  const hasRefetched = useRef(false)\n  useEffect(() => {\n    if (!hasRefetched.current) {\n      if (billId) {\n        console.log('Trigger user bonds refetch')\n        const bondToRefetch = bondsData?.find(\n          (bond) =>\n            bondAddress?.toLowerCase() === bond?.contractAddress?.[bond?.chainId]?.toLowerCase() &&\n            bondChain === bond?.chainId,\n        )\n        if (!bondToRefetch) return\n        hasRefetched.current = true\n\n        // Check cache first — if the bill is already in the cache (e.g. from\n        // a recent refetch or optimistic update), skip the network round-trip.\n        const cached = queryClient.getQueriesData<UserBill[] | undefined>({ queryKey: [QUERY_KEYS.USER_BONDS] })\n        const cachedBills = cached.flatMap(([, bills]) => bills ?? [])\n        const cachedBond = cachedBills.find((b) => b.id === billId)\n        if (cachedBond) {\n          setUserBill(cachedBond)\n          return\n        }\n\n        getUserBonds(\n          address!,\n          solanaAccount!,\n          aptosAccount!,\n          suiAccount!,\n          { [bondChain]: [bondToRefetch] } as Record<ChainId, BillsConfig[]>,\n          queryClient,\n        )\n          .then((bonds) => {\n            const purchasedBond = bonds.find((bond) => {\n              if (bond?.bond?.chainId === ChainId.SOL) {\n                return bond.asset === billId\n              } else if (bond?.bond?.chainId === ChainId.SUI) {\n                return bond.id === billId\n              } else {\n                return bond.id === billId\n              }\n            })\n            console.log(purchasedBond)\n            if (!purchasedBond) {\n              console.log(`No bond found for ${billId}`)\n            }\n            setUserBill(purchasedBond)\n          })\n          .catch((e) => {\n            console.error(e)\n          })\n      }\n    }\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [billId])\n\n  const handlePurchaseBondCallback = useCallback((data: any) => {\n    setAfterFlowData(data)\n  }, [])\n\n  return billId ? (\n    <YourBondsModal userBill={userBill} onDismiss={onDismiss} lostProfit={afterFlowData.lostProfit} />\n  ) : (\n    <BuyBondModal\n      bondAddress={bondAddress}\n      bondChain={bondChain}\n      handlePurchasedBond={handlePurchaseBondCallback}\n      setBillId={setBillId}\n      onDismiss={() => {\n        window.history.pushState({}, '', `${locationPath !== '/bonds' ? locationPath : '/bonds'}`)\n        onDismiss?.()\n      }}\n    />\n  )\n}\n\nexport default ModalHandler\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ModalHandler.js","sources":["../../../../../src/views/Bonds/components/BondRows/ModalHandler.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { getUserBonds } from '../../../../state/bonds/useUserBonds'\nimport YourBondsModal from '../../../YourBondsModal/YourBondsModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { BillsConfig, ChainId } from '@ape.swap/apeswap-lists'\nimport useChainAccount from '../../../../state/chainAccount/useChainAccount'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { QUERY_KEYS } from '../../../../config/constants/queryKeys'\n\n/*\n * Basically this is a handler that controls which Modal is displayed to the user.\n * It will start by showing the buy modal; once a purchase is confirmed, the chain's buy component reports the new bill\n * id through setBillId, and the YourBondModal is shown for that bill.\n * */\n\nconst ModalHandler = ({\n  onDismiss,\n  bondAddress,\n  bondChain,\n}: {\n  onDismiss?: () => void\n  bondAddress: string\n  bondChain: ChainId\n}) => {\n  // State\n  const [billId, setBillId] = useState('')\n  const [afterFlowData, setAfterFlowData] = useState<{ buyTxHash: string; lostProfit?: string }>({\n    buyTxHash: '',\n    lostProfit: undefined,\n  })\n  const [userBill, setUserBill] = useState<UserBill>()\n\n  // Hooks\n  const { data: bondsData } = useBondsData()\n  const locationPath = window.location.pathname\n  const { address } = useChainAccount('evm')\n  const { address: solanaAccount } = useChainAccount('sol')\n  const { address: aptosAccount } = useChainAccount('aptos')\n  const { address: suiAccount } = useChainAccount('sui')\n  const queryClient = useQueryClient()\n\n  // Trigger refetch once txs are confirmed\n  const hasRefetched = useRef(false)\n  useEffect(() => {\n    if (!hasRefetched.current) {\n      if (billId) {\n        console.log('Trigger user bonds refetch')\n        const bondToRefetch = bondsData?.find(\n          (bond) =>\n            bondAddress?.toLowerCase() === bond?.contractAddress?.[bond?.chainId]?.toLowerCase() &&\n            bondChain === bond?.chainId,\n        )\n        if (!bondToRefetch) return\n        hasRefetched.current = true\n\n        // Check cache first — if the bill is already in the cache (e.g. from\n        // a recent refetch or optimistic update), skip the network round-trip.\n        const cached = queryClient.getQueriesData<UserBill[] | undefined>({ queryKey: [QUERY_KEYS.USER_BONDS] })\n        const cachedBills = cached.flatMap(([, bills]) => bills ?? [])\n        const cachedBond = cachedBills.find((b) => b.id === billId)\n        if (cachedBond) {\n          setUserBill(cachedBond)\n          return\n        }\n\n        getUserBonds(\n          { evm: address, sol: solanaAccount, aptos: aptosAccount, sui: suiAccount },\n          { [bondChain]: [bondToRefetch] } as Record<ChainId, BillsConfig[]>,\n          queryClient,\n        )\n          .then((bonds) => {\n            const purchasedBond = bonds.find((bond) => {\n              if (bond?.bond?.chainId === ChainId.SOL) {\n                return bond.asset === billId\n              } else {\n                return bond.id === billId\n              }\n            })\n            console.log(purchasedBond)\n            if (!purchasedBond) {\n              console.log(`No bond found for ${billId}`)\n            }\n            setUserBill(purchasedBond)\n          })\n          .catch((e) => {\n            console.error(e)\n          })\n      }\n    }\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [billId])\n\n  const handlePurchaseBondCallback = useCallback((data: any) => {\n    setAfterFlowData(data)\n  }, [])\n\n  return billId ? (\n    <YourBondsModal userBill={userBill} onDismiss={onDismiss} lostProfit={afterFlowData.lostProfit} />\n  ) : (\n    <BuyBondModal\n      bondAddress={bondAddress}\n      bondChain={bondChain}\n      handlePurchasedBond={handlePurchaseBondCallback}\n      setBillId={setBillId}\n      onDismiss={() => {\n        window.history.pushState({}, '', `${locationPath !== '/bonds' ? locationPath : '/bonds'}`)\n        onDismiss?.()\n      }}\n    />\n  )\n}\n\nexport default ModalHandler\n"],"names":["_jsx"],"mappings":"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"}

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

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

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

@@ -1,27 +1,25 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/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);
-    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, 
+    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, 
                     //@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' }, 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}`));
+                    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}`));
                 })] }));
 };
 

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 { 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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"}
+{"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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"}

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

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 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';
@@ -7,15 +8,8 @@ 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 } = 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" })] })] })] }));
+    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-2.5 ape:xl:p-[20px_0_10px_0]", children: [jsx("div", { className: "search-container ape:flex ape:flex-row ape:w-[49%] ape:lg:w-[30%] ape:lg:min-w-100", children: jsxs(Flex, { className: "ape:w-full ape:lg:max-w-[calc(100%-35px)]", children: [jsx(Input, { value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), variant: "search", className: "search-input ape:h-7.5 ape:text-[14px] ape:text-white", placeholder: 'Search...' }), jsx(FavIcon, { filterOption: filterOption, setFilterOption: setFilterOption })] }) }), jsxs("div", { className: clsx('headers-container ape:flex ape:w-[49%] ape:justify-end ape:items-center ape:xl:justify-between ape:xl: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:xl: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:xl: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" })] })] })] }));
 };
 
 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 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;;;;"}
+{"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-2.5 ape:xl:p-[20px_0_10px_0]\">\n        <div className=\"search-container ape:flex ape:flex-row ape:w-[49%] ape:lg:w-[30%] ape:lg:min-w-100\">\n          <Flex className=\"ape:w-full ape:lg:max-w-[calc(100%-35px)]\">\n            <Input\n              value={searchQuery}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(event.target.value)}\n              variant=\"search\"\n              className=\"search-input ape:h-7.5 ape:text-[14px] ape:text-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-[49%] ape:justify-end ape:items-center ape:xl:justify-between ape:xl: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:xl: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:xl: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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"}

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

@@ -1,4 +1,3 @@
-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, }: {
@@ -8,5 +7,5 @@ declare const BonusComponent: ({ trueBondPrices, minTier, bonus, airdropTooltip,
     airdropTooltip?: string;
     tooltipPosition?: "bottomRight" | "bottomLeft";
     hideTooltip?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BonusComponent;