@ape.swap/bonds-sdk 6.2.11 → 6.2.13

package/dist/views/ProjectView/components/PriceChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport LineChartIcon from '../../../../components/uikit-sdk/Svg/Icons/LineChart'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PriceChart = ({\n  selectedBond,\n  historicalPrices,\n}: {\n  selectedBond: BondsData\n  historicalPrices?: HistoricalPrices[] | null\n}) => {\n  const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n  const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n  const bondPrice = discountEarnTokenPrice(selectedBond, true)\n  const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n  const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n  const [show, setShow] = useState<boolean>(false)\n  const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6\n  const [chartOption, setChartOption] = useState<'line' | 'candleStick'>('line')\n\n  useEffect(() => {\n    // This effect is to ensure that the charts are only rendered on the client\n    setShow(true)\n  }, [])\n\n  useEffect(() => {\n    // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n    setShow(false)\n    const timer = setTimeout(() => {\n      setShow(true)\n    }, 50)\n    return () => clearTimeout(timer)\n  }, [contractAddress])\n\n  return (\n    <Flex sx={styles.priceContainer}>\n      <Flex sx={{ width: '100%', justifyContent: 'space-between', mb: '15px', pr: '20px' }}>\n        <Flex>Prices</Flex>\n        <Flex>\n          <Flex sx={{ color: hasDiscount ? 'success' : 'error', fontSize: '12px', fontWeight: 500, mr: '15px' }}>\n            Bond Price: ${bondPrice}\n          </Flex>\n          <Flex sx={{ color: 'textDisabledButton', fontSize: '12px', fontWeight: 500 }}>\n            Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n          </Flex>\n        </Flex>\n      </Flex>\n      {show && (\n        <Flex sx={styles.container}>\n          <Flex sx={styles.buttonsContainer}>\n            <Flex sx={{ ...styles.button, mr: '15px' }} onClick={() => setChartOption('line')}>\n              <LineChartIcon width={20} />\n            </Flex>\n            <Flex sx={styles.button} onClick={() => setChartOption('candleStick')}>\n              D\n            </Flex>\n          </Flex>\n          {historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (\n            chartOption === 'line' ? (\n              <LineChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            ) : (\n              <CandleStickChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            )\n          ) : (\n            <Flex sx={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }}>\n              <PlaceholderMonkey />\n              <Flex sx={{ mt: '15px' }}>No Historical Price for this Token</Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx","LineChartIcon","LineChart"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport clsx from 'clsx'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport LineChartIcon from '../../../../components/uikit-sdk/Svg/Icons/LineChart'\nimport PlaceholderMonkey from '../../../../components/uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PriceChart = ({\n  selectedBond,\n  historicalPrices,\n}: {\n  selectedBond: BondsData\n  historicalPrices?: HistoricalPrices[] | null\n}) => {\n  const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n  const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n  const bondPrice = discountEarnTokenPrice(selectedBond, true)\n  const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n  const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n  const [show, setShow] = useState<boolean>(false)\n  const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6\n  const [chartOption, setChartOption] = useState<'line' | 'candleStick'>('line')\n\n  useEffect(() => {\n    // This effect is to ensure that the charts are only rendered on the client\n    setShow(true)\n  }, [])\n\n  useEffect(() => {\n    // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n    setShow(false)\n    const timer = setTimeout(() => {\n      setShow(true)\n    }, 50)\n    return () => clearTimeout(timer)\n  }, [contractAddress])\n\n  const buttonClasses =\n    'ape:w-[35px] ape:h-[35px] ape:text-[12px] ape:rounded-small ape:bg-white3 ape:border ape:border-[grey] ape:flex ape:justify-center ape:items-center ape:cursor-pointer ape:hover:bg-white4'\n\n  return (\n    <Flex className=\"ape:w-full ape:md:w-1/2 ape:text-[12px] ape:md:text-[16px] ape:flex-col ape:bg-white2 ape:rounded-normal ape:p-[20px] ape:pr-0 ape:items-center ape:mt-[15px] ape:md:mt-[5px] ape:min-h-[330px] ape:md:min-h-[430px] ape:ml-0 ape:md:ml-[5px]\">\n      <Flex className=\"ape:w-full ape:justify-between ape:mb-[15px] ape:pr-[20px]\">\n        <Flex>Prices</Flex>\n        <Flex>\n          <Flex\n            className=\"ape:text-[12px] ape:font-medium ape:mr-[15px]\"\n            style={{ color: hasDiscount ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}\n          >\n            Bond Price: ${bondPrice}\n          </Flex>\n          <Flex\n            className=\"ape:text-[12px] ape:font-medium\"\n            style={{ color: 'var(--ape-color-text-disabled-button)' }}\n          >\n            Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n          </Flex>\n        </Flex>\n      </Flex>\n      {show && (\n        <Flex className=\"ape:relative ape:w-full ape:h-full\">\n          <Flex className=\"ape:absolute ape:top-0 ape:left-0 ape:z-[20]\">\n            <Flex className={clsx(buttonClasses, 'ape:mr-[15px]')} onClick={() => setChartOption('line')}>\n              <LineChartIcon width={20} />\n            </Flex>\n            <Flex className={buttonClasses} onClick={() => setChartOption('candleStick')}>\n              D\n            </Flex>\n          </Flex>\n          {historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (\n            chartOption === 'line' ? (\n              <LineChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            ) : (\n              <CandleStickChart\n                historicalPrices={historicalPrices}\n                hasDiscount={hasDiscount}\n                bondPrice={bondPrice ?? '0'}\n                tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n              />\n            )\n          ) : (\n            <Flex className=\"ape:flex-col ape:justify-center ape:items-center ape:w-full\">\n              <PlaceholderMonkey />\n              <Flex className=\"ape:mt-[15px]\">No Historical Price for this Token</Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx","LineChartIcon","LineChart"],"mappings":"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"}

package/dist/views/ProjectView/components/ProjectInfo/index.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 declare const ProjectInfo: ({ selectedBond }: {
     selectedBond?: BondsData;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ProjectInfo;

package/dist/views/ProjectView/components/ProjectInfo/index.js

@@ -1,11 +1,10 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
-import { styles } from './styles.js';
 import SafeHTMLComponent from '../../../../components/SafeHTMLComponent/index.js';
 
 const ProjectInfo = ({ selectedBond }) => {
     const description = selectedBond?.fullDescription ?? selectedBond?.shortDescription;
-    return (jsxs(Flex, { sx: styles.projectInfoContainer, children: [jsxs(Flex, { sx: styles.tokenTitle, children: ["About ", selectedBond?.earnToken.symbol] }), jsx(Flex, { sx: styles.fullDescription, children: description && jsx(SafeHTMLComponent, { html: description }) }), jsx(Flex, { sx: { flexDirection: 'column' } })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:bg-white2 ape:p-[20px] ape:rounded-normal ape:flex-col", children: [jsxs(Flex, { className: "ape:w-full ape:text-[22px]", children: ["About ", selectedBond?.earnToken.symbol] }), jsx(Flex, { className: "ape:text-[14px] ape:font-medium ape:mt-[10px]", style: { lineHeight: '21px' }, children: description && jsx(SafeHTMLComponent, { html: description }) }), jsx(Flex, { className: "ape:flex-col" })] }));
 };
 
 export { ProjectInfo as default };

package/dist/views/ProjectView/components/ProjectInfo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/ProjectInfo/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { styles } from './styles'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { BondsData } from '../../../../types/bonds'\n\nconst ProjectInfo = ({ selectedBond }: { selectedBond?: BondsData }) => {\n  const description: string | undefined = selectedBond?.fullDescription ?? selectedBond?.shortDescription\n\n  return (\n    <Flex sx={styles.projectInfoContainer}>\n      <Flex sx={styles.tokenTitle}>About {selectedBond?.earnToken.symbol}</Flex>\n      <Flex sx={styles.fullDescription}>{description && <SafeHTMLComponent html={description} />}</Flex>\n      <Flex sx={{ flexDirection: 'column' }}></Flex>\n    </Flex>\n  )\n}\n\nexport default ProjectInfo\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAMA,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAgC,KAAI;IACrE,MAAM,WAAW,GAAuB,YAAY,EAAE,eAAe,IAAI,YAAY,EAAE,gBAAgB;IAEvG,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,oBAAoB,EAAA,QAAA,EAAA,CACnCA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAA,CAAA,QAAA,EAAS,YAAY,EAAE,SAAS,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC1EC,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,eAAe,EAAA,QAAA,EAAG,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,EAAA,CAAQ,EAClGA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,CAAS,CAAA,EAAA,CACzC;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/ProjectInfo/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { BondsData } from '../../../../types/bonds'\n\nconst ProjectInfo = ({ selectedBond }: { selectedBond?: BondsData }) => {\n  const description: string | undefined = selectedBond?.fullDescription ?? selectedBond?.shortDescription\n\n  return (\n    <Flex className=\"ape:w-full ape:bg-white2 ape:p-[20px] ape:rounded-normal ape:flex-col\">\n      <Flex className=\"ape:w-full ape:text-[22px]\">About {selectedBond?.earnToken.symbol}</Flex>\n      <Flex className=\"ape:text-[14px] ape:font-medium ape:mt-[10px]\" style={{ lineHeight: '21px' }}>\n        {description && <SafeHTMLComponent html={description} />}\n      </Flex>\n      <Flex className=\"ape:flex-col\"></Flex>\n    </Flex>\n  )\n}\n\nexport default ProjectInfo\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAgC,KAAI;IACrE,MAAM,WAAW,GAAuB,YAAY,EAAE,eAAe,IAAI,YAAY,EAAE,gBAAgB;IAEvG,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EAAA,CACrFA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAAA,QAAA,EAAQ,YAAY,EAAE,SAAS,CAAC,MAAM,CAAA,EAAA,CAAQ,EAC1FC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAC1F,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,EAAA,CACnD,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAQ,CAAA,EAAA,CACjC;AAEX;;;;"}

package/dist/views/ProjectView/components/RecommendationCards/index.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const RecommendationCards: () => React.JSX.Element;
+declare const RecommendationCards: () => import("react/jsx-runtime").JSX.Element;
 export default RecommendationCards;

package/dist/views/ProjectView/components/RecommendationCards/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useTopTags } from '../../../../hooks/useTopTags.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
@@ -64,21 +64,7 @@ const RecommendationCards = () => {
             setActiveOption('Hot');
         }
     }, [account]);
-    return (jsxs(Flex, { sx: { mt: '15px', flexDirection: 'column', width: '100%', display: ['none', 'none', 'none', 'flex'] }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Flex, { children: [jsx(Flex, { sx: {
-                                    width: ['60px', '60px', '60px', 'unset'],
-                                    mr: ['0px', '0px', '0px', '15px'],
-                                    alignItems: 'center',
-                                    color: 'grey',
-                                    fontSize: ['11px'],
-                                    fontWeight: 500,
-                                }, children: "BONDS MARKETS:" }), jsx(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx("img", { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", sx: {
-                                width: '190px',
-                                height: '20px',
-                                cursor: 'pointer',
-                            }, onClick: () => window.open('/apebond-ai', '_blank') }) })] }), jsx(Flex, { sx: {
-                    my: '10px',
-                    minHeight: '47.45px',
-                }, children: parsedBondsToRender &&
+    return (jsxs(Flex, { className: "ape:mt-[15px] ape:flex-col ape:w-full ape:hidden ape:md:flex", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsxs(Flex, { children: [jsx(Flex, { className: "ape:w-[60px] ape:md:w-[unset] ape:mr-0 ape:md:mr-[15px] ape:items-center ape:text-[11px] ape:font-medium", style: { color: 'grey' }, children: "BONDS MARKETS:" }), jsx(RecommendationSelector, { options: options, activeOption: activeOption, setActiveOption: setActiveOption })] }), jsx(Flex, { className: "ape:hidden ape:md:flex", children: jsx("img", { width: 190, height: 20, alt: "poweredBy", src: "/images/bills/powered.png", className: "ape:w-[190px] ape:h-[20px] ape:cursor-pointer", onClick: () => window.open('/apebond-ai', '_blank') }) })] }), jsx(Flex, { className: "ape:my-[10px] ape:min-h-[47.45px]", children: parsedBondsToRender &&
                     parsedBondsToRender.length > 0 &&
                     parsedBondsToRender.map((bond, index) => {
                         return jsx(SmallRecommendationCard, { recommendation: bond }, `${bond.payoutTokenName}-${index}`);

package/dist/views/ProjectView/components/RecommendationCards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { SmallCardBond } from '../../../Bonds/components/RecommendationCards'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport { useHotBondContracts } from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\n\nconst RecommendationCards = () => {\n  const topTags = useTopTags()\n  const { address: account } = useEVMAccount()\n  const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags]\n  const [activeOption, setActiveOption] = useState(options[0])\n  const { data: hotBonds } = useHotBondContracts()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3')\n  const { data: bonds } = useBondsData()\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0) -\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) =>\n      bond?.tags?.includes(activeOption) &&\n      !bond?.soldOut &&\n      (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonus ?? 0) < 50,\n  )\n\n  // This should come from the API\n  const hotRecommendations = sortedBonds?.filter((bond) =>\n    hotBonds?.includes(bond?.contractAddress?.[bond.chainId]?.toLowerCase() ?? ''),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds\n    ?.sort(\n      (a, b) =>\n        ('discount' in b\n          ? b.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0))! -\n        ('discount' in a\n          ? a.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0))!,\n    )\n    ?.slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    let contractAddress = ''\n    if ('contractAddress' in bond) {\n      contractAddress = bond.contractAddress as string\n    }\n    if ('billAddress' in bond) {\n      contractAddress = bond.billAddress as string\n    }\n\n    return {\n      payoutTokenName: bond?.showcaseTokenName ?? '',\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus:\n        'bonus' in bond\n          ? bond.bonus\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonusWithFee ?? 0),\n      chainId: bond.chainId,\n    }\n  })\n\n  useEffect(() => {\n    if (account) {\n      setActiveOption('For You')\n    } else {\n      setActiveOption('Hot')\n    }\n  }, [account])\n\n  return (\n    <Flex sx={{ mt: '15px', flexDirection: 'column', width: '100%', display: ['none', 'none', 'none', 'flex'] }}>\n      <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n        <Flex>\n          <Flex\n            sx={{\n              width: ['60px', '60px', '60px', 'unset'],\n              mr: ['0px', '0px', '0px', '15px'],\n              alignItems: 'center',\n              color: 'grey',\n              fontSize: ['11px'],\n              fontWeight: 500,\n            }}\n          >\n            BONDS MARKETS:\n          </Flex>\n          <RecommendationSelector options={options} activeOption={activeOption} setActiveOption={setActiveOption} />\n        </Flex>\n        <Flex sx={{ display: ['none', 'none', 'none', 'flex'] }}>\n          <img\n            width={190}\n            height={20}\n            alt=\"poweredBy\"\n            src=\"/images/bills/powered.png\"\n            sx={{\n              width: '190px',\n              height: '20px',\n              cursor: 'pointer',\n            }}\n            onClick={() => window.open('/apebond-ai', '_blank')}\n          />\n        </Flex>\n      </Flex>\n      <Flex\n        sx={{\n          my: '10px',\n          minHeight: '47.45px',\n        }}\n      >\n        {parsedBondsToRender &&\n          parsedBondsToRender.length > 0 &&\n          parsedBondsToRender.map((bond, index) => {\n            return <SmallRecommendationCard recommendation={bond} key={`${bond.payoutTokenName}-${index}`} />\n          })}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default RecommendationCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { SmallCardBond } from '../../../Bonds/components/RecommendationCards'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport { useHotBondContracts } from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\n\nconst RecommendationCards = () => {\n  const topTags = useTopTags()\n  const { address: account } = useEVMAccount()\n  const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags]\n  const [activeOption, setActiveOption] = useState(options[0])\n  const { data: hotBonds } = useHotBondContracts()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3')\n  const { data: bonds } = useBondsData()\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0) -\n            (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) =>\n      bond?.tags?.includes(activeOption) &&\n      !bond?.soldOut &&\n      (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonus ?? 0) < 50,\n  )\n\n  // This should come from the API\n  const hotRecommendations = sortedBonds?.filter((bond) =>\n    hotBonds?.includes(bond?.contractAddress?.[bond.chainId]?.toLowerCase() ?? ''),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds\n    ?.sort(\n      (a, b) =>\n        ('discount' in b\n          ? b.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonus ?? 0))! -\n        ('discount' in a\n          ? a.discount\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0))!,\n    )\n    ?.slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    let contractAddress = ''\n    if ('contractAddress' in bond) {\n      contractAddress = bond.contractAddress as string\n    }\n    if ('billAddress' in bond) {\n      contractAddress = bond.billAddress as string\n    }\n\n    return {\n      payoutTokenName: bond?.showcaseTokenName ?? '',\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus:\n        'bonus' in bond\n          ? bond.bonus\n          : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], bond?.trueBondPrices)?.bonusWithFee ?? 0),\n      chainId: bond.chainId,\n    }\n  })\n\n  useEffect(() => {\n    if (account) {\n      setActiveOption('For You')\n    } else {\n      setActiveOption('Hot')\n    }\n  }, [account])\n\n  return (\n    <Flex className=\"ape:mt-[15px] ape:flex-col ape:w-full ape:hidden ape:md:flex\">\n      <Flex className=\"ape:w-full ape:justify-between\">\n        <Flex>\n          <Flex\n            className=\"ape:w-[60px] ape:md:w-[unset] ape:mr-0 ape:md:mr-[15px] ape:items-center ape:text-[11px] ape:font-medium\"\n            style={{ color: 'grey' }}\n          >\n            BONDS MARKETS:\n          </Flex>\n          <RecommendationSelector options={options} activeOption={activeOption} setActiveOption={setActiveOption} />\n        </Flex>\n        <Flex className=\"ape:hidden ape:md:flex\">\n          <img\n            width={190}\n            height={20}\n            alt=\"poweredBy\"\n            src=\"/images/bills/powered.png\"\n            className=\"ape:w-[190px] ape:h-[20px] ape:cursor-pointer\"\n            onClick={() => window.open('/apebond-ai', '_blank')}\n          />\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:my-[10px] ape:min-h-[47.45px]\">\n        {parsedBondsToRender &&\n          parsedBondsToRender.length > 0 &&\n          parsedBondsToRender.map((bond, index) => {\n            return <SmallRecommendationCard recommendation={bond} key={`${bond.payoutTokenName}-${index}`} />\n          })}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default RecommendationCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/ProjectView/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Providers from '../../providers/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import ProjectView from './ProjectView.js';

package/dist/views/SingleBond/SingleBond.js

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
+import clsx from 'clsx';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
 import useBondsData from '../../state/bonds/useBondsData.js';
 import useBondsList from '../../state/bonds/useBondsList.js';
@@ -7,7 +8,7 @@ import BuyBond from '../BuyBond/BuyComponent.js';
 import TabNav from '../../components/uikit-sdk/TabNav/index.js';
 import YourBonds from '../YourBonds/YourBonds.js';
 import SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder.js';
-import { Spinner } from 'theme-ui';
+import Spinner from '../../components/uikit-sdk/Spinner/index.js';
 
 const SingleBond = ({ tokenSymbol }) => {
     // Data Hooks
@@ -29,14 +30,7 @@ const SingleBond = ({ tokenSymbol }) => {
     }, [allBonds, tokenSymbol]);
     const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId];
     const bondChain = activeBond?.chainId;
-    return (jsx(Flex, { sx: { flexDirection: 'column' }, children: jsxs(Flex, { sx: {
-                flexDirection: 'column',
-            }, children: [jsx(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '15px' }, children: jsx(TabNav, { activeTab: activeTab, tabOptions: ['Buy Bond', 'Your Bonds'], onChangeActiveTab: (newValue) => setActiveTab(newValue) }) }), activeTab === 'Buy Bond' ? (jsx(Flex, { sx: {
-                        background: activeTab === 'Buy Bond' && 'white2',
-                        borderRadius: 'normal',
-                        p: '0 20px 20px 20px',
-                        mx: '10px',
-                    }, children: activeBond ? (jsx(BuyBond, { bondAddress: bondAddress, bondChain: bondChain })) : soldOutBond && isFetched ? (jsx(SoldOutBuyBondPlaceholder, { bond: soldOutBond })) : isFetched ? (jsx(Flex, { sx: { justifyContent: 'center', width: '100%', pt: '20px' }, children: "No bond" })) : (jsx(Flex, { className: "placeholder-monkey-wrapper", children: jsx(Spinner, { size: 100 }) })) })) : (jsx(YourBonds, { showOnly: tokenSymbol?.[0] }))] }) }));
+    return (jsx(Flex, { className: "ape:flex-col", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[15px]", children: jsx(TabNav, { activeTab: activeTab, tabOptions: ['Buy Bond', 'Your Bonds'], onChangeActiveTab: (newValue) => setActiveTab(newValue) }) }), activeTab === 'Buy Bond' ? (jsx(Flex, { className: clsx('ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]', activeTab === 'Buy Bond' && 'ape:bg-white2'), children: activeBond ? (jsx(BuyBond, { bondAddress: bondAddress, bondChain: bondChain })) : soldOutBond && isFetched ? (jsx(SoldOutBuyBondPlaceholder, { bond: soldOutBond })) : isFetched ? (jsx(Flex, { className: "ape:justify-center ape:w-full ape:pt-[20px]", children: "No bond" })) : (jsx(Flex, { className: "placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]", children: jsx(Spinner, { size: 100 }) })) })) : (jsx(YourBonds, { showOnly: tokenSymbol?.[0] }))] }) }));
 };
 
 export { SingleBond as default };

package/dist/views/SingleBond/SingleBond.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleBond.js","sources":["../../../src/views/SingleBond/SingleBond.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport TabNav from '../../components/uikit-sdk/TabNav'\nimport YourBonds from '../YourBonds/YourBonds'\nimport SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder'\nimport { Spinner } from 'theme-ui'\n\nexport interface SingleBondProps {\n  tokenSymbol?: string[]\n}\n\nconst SingleBond: React.FC<SingleBondProps> = ({ tokenSymbol }) => {\n  // Data Hooks\n  const { data: bonds, isFetched } = useBondsData()\n  const { data: allBonds } = useBondsList()\n\n  // State\n  const [activeTab, setActiveTab] = useState<string>('Buy Bond')\n\n  // Data\n  const activeBond = bonds?.find((bond) =>\n    tokenSymbol?.some((symbol) => bond.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n  )\n  const soldOutBond = useMemo(() => {\n    if (!allBonds) return undefined\n\n    for (const bondsForChain of Object.values(allBonds)) {\n      const bond = bondsForChain.find((item) =>\n        tokenSymbol?.some((symbol) => item.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n      )\n\n      if (bond) return bond\n    }\n\n    return undefined\n  }, [allBonds, tokenSymbol])\n\n  const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId]\n  const bondChain = activeBond?.chainId\n\n  return (\n    <Flex sx={{ flexDirection: 'column' }}>\n      <Flex\n        sx={{\n          flexDirection: 'column',\n        }}\n      >\n        <Flex sx={{ width: '100%', justifyContent: 'center', mb: '15px' }}>\n          <TabNav\n            activeTab={activeTab}\n            tabOptions={['Buy Bond', 'Your Bonds']}\n            onChangeActiveTab={(newValue: string) => setActiveTab(newValue)}\n          />\n        </Flex>\n        {activeTab === 'Buy Bond' ? (\n          <Flex\n            sx={{\n              background: activeTab === 'Buy Bond' && 'white2',\n              borderRadius: 'normal',\n              p: '0 20px 20px 20px',\n              mx: '10px',\n            }}\n          >\n            {activeBond ? (\n              <BuyBond bondAddress={bondAddress} bondChain={bondChain} />\n            ) : soldOutBond && isFetched ? (\n              <SoldOutBuyBondPlaceholder bond={soldOutBond} />\n            ) : isFetched ? (\n              <Flex sx={{ justifyContent: 'center', width: '100%', pt: '20px' }}>No bond</Flex>\n            ) : (\n              <Flex className=\"placeholder-monkey-wrapper\">\n                <Spinner size={100} />\n              </Flex>\n            )}\n          </Flex>\n        ) : (\n          <YourBonds showOnly={tokenSymbol?.[0]} />\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SingleBond\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"SingleBond.js","sources":["../../../src/views/SingleBond/SingleBond.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport useBondsList from '../../state/bonds/useBondsList'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport TabNav from '../../components/uikit-sdk/TabNav'\nimport YourBonds from '../YourBonds/YourBonds'\nimport SoldOutBuyBondPlaceholder from './SoldOutBuyBondPlaceholder'\nimport Spinner from '../../components/uikit-sdk/Spinner'\n\nexport interface SingleBondProps {\n  tokenSymbol?: string[]\n}\n\nconst SingleBond: React.FC<SingleBondProps> = ({ tokenSymbol }) => {\n  // Data Hooks\n  const { data: bonds, isFetched } = useBondsData()\n  const { data: allBonds } = useBondsList()\n\n  // State\n  const [activeTab, setActiveTab] = useState<string>('Buy Bond')\n\n  // Data\n  const activeBond = bonds?.find((bond) =>\n    tokenSymbol?.some((symbol) => bond.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n  )\n  const soldOutBond = useMemo(() => {\n    if (!allBonds) return undefined\n\n    for (const bondsForChain of Object.values(allBonds)) {\n      const bond = bondsForChain.find((item) =>\n        tokenSymbol?.some((symbol) => item.earnToken.symbol?.toLowerCase() === symbol.toLowerCase()),\n      )\n\n      if (bond) return bond\n    }\n\n    return undefined\n  }, [allBonds, tokenSymbol])\n\n  const bondAddress = activeBond?.contractAddress?.[activeBond?.chainId]\n  const bondChain = activeBond?.chainId\n\n  return (\n    <Flex className=\"ape:flex-col\">\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:w-full ape:justify-center ape:mb-[15px]\">\n          <TabNav\n            activeTab={activeTab}\n            tabOptions={['Buy Bond', 'Your Bonds']}\n            onChangeActiveTab={(newValue: string) => setActiveTab(newValue)}\n          />\n        </Flex>\n        {activeTab === 'Buy Bond' ? (\n          <Flex className={clsx('ape:rounded-normal ape:p-[0_20px_20px_20px] ape:mx-[10px]', activeTab === 'Buy Bond' && 'ape:bg-white2')}>\n            {activeBond ? (\n              <BuyBond bondAddress={bondAddress} bondChain={bondChain} />\n            ) : soldOutBond && isFetched ? (\n              <SoldOutBuyBondPlaceholder bond={soldOutBond} />\n            ) : isFetched ? (\n              <Flex className=\"ape:justify-center ape:w-full ape:pt-[20px]\">No bond</Flex>\n            ) : (\n              <Flex className=\"placeholder-monkey-wrapper ape:w-full ape:flex-col ape:pt-[100px] ape:pb-[100px] ape:bg-white2 ape:items-center ape:rounded-[10px] ape:mt-[15px] ape:justify-center ape:h-[400px]\">\n                <Spinner size={100} />\n              </Flex>\n            )}\n          </Flex>\n        ) : (\n          <YourBonds showOnly={tokenSymbol?.[0]} />\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SingleBond\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAeA,MAAM,UAAU,GAA8B,CAAC,EAAE,WAAW,EAAE,KAAI;;IAEhE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE;IACjD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE;;IAGzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,UAAU,CAAC;;AAG9D,IAAA,MAAM,UAAU,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,KAClC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AACD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,SAAS;QAE/B,KAAK,MAAM,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;AACnD,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,KACnC,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAC7F;AAED,YAAA,IAAI,IAAI;AAAE,gBAAA,OAAO,IAAI;QACvB;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAE3B,MAAM,WAAW,GAAG,UAAU,EAAE,eAAe,GAAG,UAAU,EAAE,OAAO,CAAC;AACtE,IAAA,MAAM,SAAS,GAAG,UAAU,EAAE,OAAO;AAErC,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,YAC3DA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EACtC,iBAAiB,EAAE,CAAC,QAAgB,KAAK,YAAY,CAAC,QAAQ,CAAC,EAAA,CAC/D,EAAA,CACG,EACN,SAAS,KAAK,UAAU,IACvBA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,2DAA2D,EAAE,SAAS,KAAK,UAAU,IAAI,eAAe,CAAC,EAAA,QAAA,EAC5H,UAAU,IACTA,GAAA,CAAC,OAAO,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,IACzD,WAAW,IAAI,SAAS,IAC1BA,IAAC,yBAAyB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,IAC9C,SAAS,IACXA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,SAAA,EAAA,CAAe,KAE5EA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mLAAmL,EAAA,QAAA,EACjMA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,GAAG,EAAA,CAAI,GACjB,CACR,EAAA,CACI,KAEPA,IAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,WAAW,GAAG,CAAC,CAAC,EAAA,CAAI,CAC1C,CAAA,EAAA,CACI,EAAA,CACF;AAEX;;;;"}

package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Button from '../../components/uikit-sdk/Button/Button.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
@@ -31,41 +31,18 @@ const SoldOutBuyBondPlaceholder = ({ bond }) => {
     const inputToken = useTokenFromZapList(inputTokenString, bondData?.chainId, bondData?.lpToken);
     const isZap = inputTokenString?.toLowerCase() !== bondData?.lpToken?.address?.[bondData?.chainId]?.toLowerCase();
     const { data: inputCurrencyBalance } = useCurrencyBalance(inputToken ?? null, account ?? null, bondData?.chainId ?? null);
-    return bondData ? (jsx(Flex, { className: "modal-content", children: jsxs(Flex, { className: "modaltable-container", children: [jsxs(Flex, { sx: {
-                        position: 'absolute',
-                        width: 'calc(100% + 40px)',
-                        height: 'calc(100% + 20px)',
-                        top: '0',
-                        left: '-20px',
-                        overflow: 'hidden',
-                        borderRadius: 'normal',
-                    }, children: [jsx(Flex, { sx: {
-                                position: 'absolute',
-                                width: '100%',
-                                height: '100%',
-                                zIndex: 999,
+    return bondData ? (jsx(Flex, { className: "modal-content ape:flex ape:flex-col ape:rounded-[10px] ape:bg-white2 ape:w-full ape:p-[15px] ape:min-[800px]:p-[20px]", children: jsxs(Flex, { className: "modaltable-container ape:w-full ape:flex ape:flex-col ape:relative", children: [jsxs(Flex, { className: "ape:absolute ape:w-[calc(100%+40px)] ape:h-[calc(100%+20px)] ape:top-0 ape:left-[-20px] ape:overflow-hidden ape:rounded-normal", children: [jsx(Flex, { className: "ape:absolute ape:w-full ape:h-full ape:z-[999]", style: {
                                 backgroundColor: 'rgba(255,255,255,0.1)',
                                 backdropFilter: 'blur(1px)',
                                 WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari
-                            } }), jsx(Flex, { sx: {
-                                position: 'absolute',
-                                top: '50px',
-                                left: '-50px',
-                                backgroundColor: 'error',
-                                color: 'white',
-                                padding: '5px 20px',
-                                fontSize: '14px',
-                                fontWeight: 'bold',
-                                transform: 'rotate(-45deg)',
-                                zIndex: 1000, // Ensure it appears above other elements
+                            } }), jsx(Flex, { className: "ape:absolute ape:top-[50px] ape:left-[-50px] ape:text-white ape:p-[5px_20px] ape:text-[14px] ape:font-bold ape:rotate-[-45deg] ape:z-[1000] ape:w-[220px] ape:justify-center", style: {
+                                backgroundColor: 'var(--ape-color-error)',
                                 boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
-                                width: '220px',
-                                justifyContent: 'center',
                             }, children: "SOLD OUT" })] }), jsx(BondModalHeader, { bondData: bondData, 
                     // onDismiss={onDismiss}
                     showProjectInfoButton: SDKConfig?.referenceId === 'apebond' }), jsx(ProjectDescription, { description: bondData.shortDescription }), jsx(BondCards, { bondData: { ...bondData, bonusWithFee: -1 } }), jsx(Estimations, { depositAmount: '0', inputValue: '0', inputTokenPrice: 0, 
                     /*@ts-ignore*/
-                    bondData: bondData, youSpendString: '0', isZap: isZap, fetchingZapQuote: false, zapError: false }), jsx(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => null, handleCurrencySelect: () => null, bondChainId: bondData?.chainId, enableZap: zapSupported.includes(bondData?.chainId), bondPrincipalToken: bondData?.lpToken, tokenBalance: inputCurrencyBalance ?? undefined, selectedTokenPrice: 0, inputDisabled: true, isConnected: false }), jsxs(Flex, { className: "modaltable-container button-container", children: [account && (minTier === null || (userTier !== null && userTier >= minTier)) && (jsx(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", variant: "secondary", fullWidth: true, disabled: true, children: ["Get ", getSymbol(bondData?.lpToken)] }) })), jsx(Flex, { className: "button-container buy", children: jsx(Button, { className: "action-button", fullWidth: true, disabled: true, children: "Buy" }) })] })] }) })) : (jsx(Fragment, {}));
+                    bondData: bondData, youSpendString: '0', isZap: isZap, fetchingZapQuote: false, zapError: false }), jsx(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: () => null, handleCurrencySelect: () => null, bondChainId: bondData?.chainId, enableZap: zapSupported.includes(bondData?.chainId), bondPrincipalToken: bondData?.lpToken, tokenBalance: inputCurrencyBalance ?? undefined, selectedTokenPrice: 0, inputDisabled: true, isConnected: false }), jsxs(Flex, { className: "modaltable-container button-container ape:w-full ape:flex ape:relative ape:flex-row ape:pt-[10px] ape:justify-between", children: [account && (minTier === null || (userTier !== null && userTier >= minTier)) && (jsx(Flex, { className: "button-container get", children: jsxs(Button, { className: "action-button", variant: "secondary", fullWidth: true, disabled: true, children: ["Get ", getSymbol(bondData?.lpToken)] }) })), jsx(Flex, { className: "button-container buy ape:justify-center ape:items-center ape:cursor-pointer ape:w-full", children: jsx(Button, { className: "action-button", fullWidth: true, disabled: true, children: "Buy" }) })] })] }) })) : (jsx(Fragment, {}));
 };
 
 export { SoldOutBuyBondPlaceholder as default };

package/dist/views/SingleBond/SoldOutBuyBondPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"SoldOutBuyBondPlaceholder.js","sources":["../../../src/views/SingleBond/SoldOutBuyBondPlaceholder.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport TokenSelectorPanel from '../../components/TokenSelectorPanel'\nimport useCurrencyBalance from '../../state/balance/useCurrencyBalance'\nimport useTokenFromZapList from '../../hooks/useTokenFromZapList'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport { zapSupported, ZapSupportedChainId } from '../../config/constants/variables'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport useTierPoints, { getUserTier } from '../../state/tiers/useTierPoints'\nimport BondModalHeader from '../BuyBond/components/BondModalHeader'\nimport { BondsData } from '../../types/bonds'\nimport ProjectDescription from '../BuyBond/components/ProjectDescription'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport Estimations from '../BuyBond/components/Estimations'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\n\ninterface SoldOutProps {\n  onDismiss?: () => void\n  bond: BillsConfig\n}\n\nconst SoldOutBuyBondPlaceholder: React.FC<SoldOutProps> = ({ bond }) => {\n  const SDKConfig = useSDKConfig()\n  // Hooks\n  const { address: account } = useEVMAccount()\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints ?? '0')\n\n  // State\n  const bondData = bond\n  const minTier = bondData?.minTier !== undefined ? bondData.minTier : null\n  const [inputValue, setInputValue] = useState('')\n  const [inputTokenString] = useState(bondData?.lpToken?.address?.[bondData.chainId])\n\n  // Data\n  const inputToken = useTokenFromZapList(inputTokenString, bondData?.chainId, bondData?.lpToken)\n  const isZap = inputTokenString?.toLowerCase() !== bondData?.lpToken?.address?.[bondData?.chainId]?.toLowerCase()\n\n  const { data: inputCurrencyBalance } = useCurrencyBalance(\n    inputToken ?? null,\n    account ?? null,\n    bondData?.chainId ?? null,\n  )\n\n  return bondData ? (\n    <Flex className=\"modal-content\">\n      <Flex className=\"modaltable-container\">\n        <Flex\n          sx={{\n            position: 'absolute',\n            width: 'calc(100% + 40px)',\n            height: 'calc(100% + 20px)',\n            top: '0',\n            left: '-20px',\n            overflow: 'hidden',\n            borderRadius: 'normal',\n          }}\n        >\n          <Flex\n            sx={{\n              position: 'absolute',\n              width: '100%',\n              height: '100%',\n              zIndex: 999,\n              backgroundColor: 'rgba(255,255,255,0.1)',\n              backdropFilter: 'blur(1px)',\n              WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari\n            }}\n          ></Flex>\n          <Flex\n            sx={{\n              position: 'absolute',\n              top: '50px',\n              left: '-50px',\n              backgroundColor: 'error',\n              color: 'white',\n              padding: '5px 20px',\n              fontSize: '14px',\n              fontWeight: 'bold',\n              transform: 'rotate(-45deg)',\n              zIndex: 1000, // Ensure it appears above other elements\n              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n              width: '220px',\n              justifyContent: 'center',\n            }}\n          >\n            SOLD OUT\n          </Flex>\n        </Flex>\n        <BondModalHeader\n          bondData={bondData as unknown as BondsData}\n          // onDismiss={onDismiss}\n          showProjectInfoButton={SDKConfig?.referenceId === 'apebond'}\n        />\n        <ProjectDescription description={bondData.shortDescription} />\n        {/*@ts-ignore*/}\n        <BondCards bondData={{ ...bondData, bonusWithFee: -1 }} />\n        <Estimations\n          depositAmount={'0'}\n          inputValue={'0'}\n          inputTokenPrice={0}\n          /*@ts-ignore*/\n          bondData={bondData}\n          youSpendString={'0'}\n          isZap={isZap}\n          fetchingZapQuote={false}\n          zapError={false}\n        />\n        <TokenSelectorPanel\n          typedValue={inputValue}\n          setTypedValue={setInputValue}\n          selectedToken={inputToken}\n          handleValueBtn={() => null}\n          handleCurrencySelect={() => null}\n          bondChainId={bondData?.chainId}\n          enableZap={zapSupported.includes(bondData?.chainId as ZapSupportedChainId)}\n          bondPrincipalToken={bondData?.lpToken}\n          tokenBalance={inputCurrencyBalance ?? undefined}\n          selectedTokenPrice={0}\n          inputDisabled={true}\n          isConnected={false}\n        />\n        <Flex className=\"modaltable-container button-container\">\n          {account && (minTier === null || (userTier !== null && userTier >= minTier)) && (\n            <Flex className=\"button-container get\">\n              <Button className=\"action-button\" variant=\"secondary\" fullWidth disabled>\n                Get {getSymbol(bondData?.lpToken)}\n              </Button>\n            </Flex>\n          )}\n          <Flex className=\"button-container buy\">\n            <Button className=\"action-button\" fullWidth disabled>\n              Buy\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  ) : (\n    <></>\n  )\n}\nexport default SoldOutBuyBondPlaceholder\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAM,yBAAyB,GAA2B,CAAC,EAAE,IAAI,EAAE,KAAI;AACrE,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;;IAEhC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE;AAC3C,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,IAAI,EAAE;IAC7C,MAAM,QAAQ,GAAG,WAAW,CAAC,iBAAiB,IAAI,GAAG,CAAC;;IAGtD,MAAM,QAAQ,GAAG,IAAI;AACrB,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,OAAO,KAAK,SAAS,GAAG,QAAQ,CAAC,OAAO,GAAG,IAAI;IACzE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAChD,IAAA,MAAM,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;;AAGnF,IAAA,MAAM,UAAU,GAAG,mBAAmB,CAAC,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IAC9F,MAAM,KAAK,GAAG,gBAAgB,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE;IAEhH,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,CACvD,UAAU,IAAI,IAAI,EAClB,OAAO,IAAI,IAAI,EACf,QAAQ,EAAE,OAAO,IAAI,IAAI,CAC1B;IAED,OAAO,QAAQ,IACbA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,eAAe,YAC7BC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sBAAsB,aACpCA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,KAAK,EAAE,mBAAmB;AAC1B,wBAAA,MAAM,EAAE,mBAAmB;AAC3B,wBAAA,GAAG,EAAE,GAAG;AACR,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,YAAY,EAAE,QAAQ;AACvB,qBAAA,EAAA,QAAA,EAAA,CAEDD,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,KAAK,EAAE,MAAM;AACb,gCAAA,MAAM,EAAE,MAAM;AACd,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,eAAe,EAAE,uBAAuB;AACxC,gCAAA,cAAc,EAAE,WAAW;gCAC3B,oBAAoB,EAAE,WAAW;AAClC,6BAAA,EAAA,CACK,EACRA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,GAAG,EAAE,MAAM;AACX,gCAAA,IAAI,EAAE,OAAO;AACb,gCAAA,eAAe,EAAE,OAAO;AACxB,gCAAA,KAAK,EAAE,OAAO;AACd,gCAAA,OAAO,EAAE,UAAU;AACnB,gCAAA,QAAQ,EAAE,MAAM;AAChB,gCAAA,UAAU,EAAE,MAAM;AAClB,gCAAA,SAAS,EAAE,gBAAgB;gCAC3B,MAAM,EAAE,IAAI;AACZ,gCAAA,SAAS,EAAE,2BAA2B;AACtC,gCAAA,KAAK,EAAE,OAAO;AACd,gCAAA,cAAc,EAAE,QAAQ;AACzB,6BAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAGI,IACF,EACPA,GAAA,CAAC,eAAe,EAAA,EACd,QAAQ,EAAE,QAAgC;;oBAE1C,qBAAqB,EAAE,SAAS,EAAE,WAAW,KAAK,SAAS,EAAA,CAC3D,EACFA,GAAA,CAAC,kBAAkB,IAAC,WAAW,EAAE,QAAQ,CAAC,gBAAgB,GAAI,EAE9DA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,GAAG,QAAQ,EAAE,YAAY,EAAE,EAAE,EAAE,EAAA,CAAI,EAC1DA,GAAA,CAAC,WAAW,IACV,aAAa,EAAE,GAAG,EAClB,UAAU,EAAE,GAAG,EACf,eAAe,EAAE,CAAC;;AAElB,oBAAA,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,GAAG,EACnB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,KAAK,EACvB,QAAQ,EAAE,KAAK,EAAA,CACf,EACFA,GAAA,CAAC,kBAAkB,IACjB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,UAAU,EACzB,cAAc,EAAE,MAAM,IAAI,EAC1B,oBAAoB,EAAE,MAAM,IAAI,EAChC,WAAW,EAAE,QAAQ,EAAE,OAAO,EAC9B,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAA8B,CAAC,EAC1E,kBAAkB,EAAE,QAAQ,EAAE,OAAO,EACrC,YAAY,EAAE,oBAAoB,IAAI,SAAS,EAC/C,kBAAkB,EAAE,CAAC,EACrB,aAAa,EAAE,IAAI,EACnB,WAAW,EAAE,KAAK,EAAA,CAClB,EACFC,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uCAAuC,aACpD,OAAO,KAAK,OAAO,KAAK,IAAI,KAAK,QAAQ,KAAK,IAAI,IAAI,QAAQ,IAAI,OAAO,CAAC,CAAC,KAC1ED,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,sBAAsB,EAAA,QAAA,EACpCC,IAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAC,WAAW,EAAC,SAAS,QAAC,QAAQ,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,MAAA,EACjE,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,IAC1B,EAAA,CACJ,CACR,EACDD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,sBAAsB,EAAA,QAAA,EACpCA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAA,IAAA,EAAC,QAAQ,EAAA,IAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAE3C,EAAA,CACJ,IACF,CAAA,EAAA,CACF,EAAA,CACF,KAEPA,GAAA,CAAAE,QAAA,EAAA,EAAA,CAAK,CACN;AACH;;;;"}
+{"version":3,"file":"SoldOutBuyBondPlaceholder.js","sources":["../../../src/views/SingleBond/SoldOutBuyBondPlaceholder.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport TokenSelectorPanel from '../../components/TokenSelectorPanel'\nimport useCurrencyBalance from '../../state/balance/useCurrencyBalance'\nimport useTokenFromZapList from '../../hooks/useTokenFromZapList'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport { zapSupported, ZapSupportedChainId } from '../../config/constants/variables'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport useTierPoints, { getUserTier } from '../../state/tiers/useTierPoints'\nimport BondModalHeader from '../BuyBond/components/BondModalHeader'\nimport { BondsData } from '../../types/bonds'\nimport ProjectDescription from '../BuyBond/components/ProjectDescription'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport Estimations from '../BuyBond/components/Estimations'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\n\ninterface SoldOutProps {\n  onDismiss?: () => void\n  bond: BillsConfig\n}\n\nconst SoldOutBuyBondPlaceholder: React.FC<SoldOutProps> = ({ bond }) => {\n  const SDKConfig = useSDKConfig()\n  // Hooks\n  const { address: account } = useEVMAccount()\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints ?? '0')\n\n  // State\n  const bondData = bond\n  const minTier = bondData?.minTier !== undefined ? bondData.minTier : null\n  const [inputValue, setInputValue] = useState('')\n  const [inputTokenString] = useState(bondData?.lpToken?.address?.[bondData.chainId])\n\n  // Data\n  const inputToken = useTokenFromZapList(inputTokenString, bondData?.chainId, bondData?.lpToken)\n  const isZap = inputTokenString?.toLowerCase() !== bondData?.lpToken?.address?.[bondData?.chainId]?.toLowerCase()\n\n  const { data: inputCurrencyBalance } = useCurrencyBalance(\n    inputToken ?? null,\n    account ?? null,\n    bondData?.chainId ?? null,\n  )\n\n  return bondData ? (\n    <Flex className=\"modal-content ape:flex ape:flex-col ape:rounded-[10px] ape:bg-white2 ape:w-full ape:p-[15px] ape:min-[800px]:p-[20px]\">\n      <Flex className=\"modaltable-container ape:w-full ape:flex ape:flex-col ape:relative\">\n        <Flex className=\"ape:absolute ape:w-[calc(100%+40px)] ape:h-[calc(100%+20px)] ape:top-0 ape:left-[-20px] ape:overflow-hidden ape:rounded-normal\">\n          <Flex\n            className=\"ape:absolute ape:w-full ape:h-full ape:z-[999]\"\n            style={{\n              backgroundColor: 'rgba(255,255,255,0.1)',\n              backdropFilter: 'blur(1px)',\n              WebkitBackdropFilter: 'blur(1px)', // Ensure compatibility with Safari\n            }}\n          ></Flex>\n          <Flex\n            className=\"ape:absolute ape:top-[50px] ape:left-[-50px] ape:text-white ape:p-[5px_20px] ape:text-[14px] ape:font-bold ape:rotate-[-45deg] ape:z-[1000] ape:w-[220px] ape:justify-center\"\n            style={{\n              backgroundColor: 'var(--ape-color-error)',\n              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n            }}\n          >\n            SOLD OUT\n          </Flex>\n        </Flex>\n        <BondModalHeader\n          bondData={bondData as unknown as BondsData}\n          // onDismiss={onDismiss}\n          showProjectInfoButton={SDKConfig?.referenceId === 'apebond'}\n        />\n        <ProjectDescription description={bondData.shortDescription} />\n        {/*@ts-ignore*/}\n        <BondCards bondData={{ ...bondData, bonusWithFee: -1 }} />\n        <Estimations\n          depositAmount={'0'}\n          inputValue={'0'}\n          inputTokenPrice={0}\n          /*@ts-ignore*/\n          bondData={bondData}\n          youSpendString={'0'}\n          isZap={isZap}\n          fetchingZapQuote={false}\n          zapError={false}\n        />\n        <TokenSelectorPanel\n          typedValue={inputValue}\n          setTypedValue={setInputValue}\n          selectedToken={inputToken}\n          handleValueBtn={() => null}\n          handleCurrencySelect={() => null}\n          bondChainId={bondData?.chainId}\n          enableZap={zapSupported.includes(bondData?.chainId as ZapSupportedChainId)}\n          bondPrincipalToken={bondData?.lpToken}\n          tokenBalance={inputCurrencyBalance ?? undefined}\n          selectedTokenPrice={0}\n          inputDisabled={true}\n          isConnected={false}\n        />\n        <Flex className=\"modaltable-container button-container ape:w-full ape:flex ape:relative ape:flex-row ape:pt-[10px] ape:justify-between\">\n          {account && (minTier === null || (userTier !== null && userTier >= minTier)) && (\n            <Flex className=\"button-container get\">\n              <Button className=\"action-button\" variant=\"secondary\" fullWidth disabled>\n                Get {getSymbol(bondData?.lpToken)}\n              </Button>\n            </Flex>\n          )}\n          <Flex className=\"button-container buy ape:justify-center ape:items-center ape:cursor-pointer ape:w-full\">\n            <Button className=\"action-button\" fullWidth disabled>\n              Buy\n            </Button>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  ) : (\n    <></>\n  )\n}\nexport default SoldOutBuyBondPlaceholder\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/views/SingleBond/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Providers from '../../providers/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import SingleBond from './SingleBond.js';

package/dist/views/TransactionModal/TransactionModal.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ApprovalState } from '../../state/allowance/useAllowance';
 import { BondsData } from '../../types/bonds';
 import { Token } from '@ape.swap/apeswap-lists';
@@ -15,5 +14,5 @@ declare const TransactionModal: ({ onDismiss, txChain, approvalState, approveCal
     depositAmount: string;
     buyTxHash?: string;
     rateChanged: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TransactionModal;

package/dist/views/TransactionModal/TransactionModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect } from 'react';
 import Button from '../../components/uikit-sdk/Button/Button.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
@@ -129,11 +129,11 @@ const TransactionModal = ({ onDismiss, txChain, approvalState, approveCallback,
     const trueBondPrice = findHighestTrueBondPrice(
     // @ts-ignore
     TIERS_WEIGHT[getUserTier(promotionalPoints)] ?? '0', bondData?.trueBondPrices);
-    return (jsxs(Modal, { children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true }), jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [jsxs(Flex, { sx: { width: '100%', alignItems: 'center', p: '10px' }, children: [showSwitchChainFlow && (jsx(StepBubble, { number: 1, title: 'Switch Chain', currentStep: currentStep, loading: loadingSwitchChain })), jsx(StepBubble, { number: showSwitchChainFlow ? 2 : 1, title: 'Approve', currentStep: currentStep, loading: approveLoading || approvalState === ApprovalState.PENDING }), jsx(StepBubble, { number: showSwitchChainFlow ? 3 : 2, title: 'Buy', currentStep: currentStep, loading: loadingTx || verifyingTx, hideBar: true })] }), jsx(Flex, { sx: { width: '100%', mt: '40px', justifyContent: 'center' }, children: jsx(LoadingSpinner, { isLoading: loadingSwitchChain ||
+    return (jsxs(Modal, { children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true }), jsxs(Flex, { className: "ape:flex-col ape:w-full", children: [jsxs(Flex, { className: "ape:w-full ape:items-center ape:p-[10px]", children: [showSwitchChainFlow && (jsx(StepBubble, { number: 1, title: 'Switch Chain', currentStep: currentStep, loading: loadingSwitchChain })), jsx(StepBubble, { number: showSwitchChainFlow ? 2 : 1, title: 'Approve', currentStep: currentStep, loading: approveLoading || approvalState === ApprovalState.PENDING }), jsx(StepBubble, { number: showSwitchChainFlow ? 3 : 2, title: 'Buy', currentStep: currentStep, loading: loadingTx || verifyingTx, hideBar: true })] }), jsx(Flex, { className: "ape:w-full ape:mt-[40px] ape:justify-center", children: jsx(LoadingSpinner, { isLoading: loadingSwitchChain ||
                                 approveLoading ||
                                 loadingTx ||
                                 verifyingTx ||
-                                approvalState === ApprovalState.PENDING, size: 100 }) }), jsx(Flex, { sx: { width: '100%', justifyContent: 'center', mt: '10px' }, children: hasToSwitchChain
+                                approvalState === ApprovalState.PENDING, size: 100 }) }), jsx(Flex, { className: "ape:w-full ape:justify-center ape:mt-[10px]", children: hasToSwitchChain
                             ? loadingSwitchChain
                                 ? 'Switching Chain...'
                                 : 'Switch Chain'
@@ -143,52 +143,25 @@ const TransactionModal = ({ onDismiss, txChain, approvalState, approveCallback,
                                     : 'Approve Contract'
                                 : loadingTx || verifyingTx
                                     ? 'Buying...'
-                                    : 'Buy' }), bondData.billType === 'fcfs' ? (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '20px' }, children: [jsxs(Flex, { sx: {
-                                    width: '100%',
-                                    background: 'white3',
-                                    p: '5px',
-                                    borderRadius: 'normal',
-                                    color: 'textDisabledButton',
-                                    justifyContent: 'center',
-                                }, children: [bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol, !bondData.yieldBond && jsxs(Fragment, { children: ["(", getTimePeriods(bondData?.vestingTerm).months, " Mo)"] })] }), jsxs(Flex, { sx: { width: '100%', background: 'white3', p: '10px', borderRadius: 'normal', mt: '10px' }, children: [jsx(TokenImage, { symbol: bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol, size: 40, chain: txChain }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx(Flex, { sx: { flexDirection: 'column', fontSize: '12px', ml: '10px' }, children: bondData.yieldBond ? (jsx(Fragment, { children: bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol })) : (jsxs(Fragment, { children: [jsxs(Flex, { sx: { color: 'textDisabledButton', fontWeight: 400, textDecoration: 'line-through' }, children: ["$", bondData.tgePrice] }), jsxs(Flex, { sx: { color: 'green', fontWeight: 600 }, children: ["$", bondData.initPrice] })] })) }), jsx(Flex, { sx: {
-                                                    p: '5px',
-                                                    borderRadius: 'normal',
-                                                    border: '1px solid var(--theme-ui-colors-success)',
+                                    : 'Buy' }), bondData.billType === 'fcfs' ? (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[20px]", children: [jsxs(Flex, { className: "ape:w-full ape:bg-white3 ape:p-[5px] ape:rounded-normal ape:justify-center", style: { color: 'var(--ape-color-text-disabled-button)' }, children: [bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol, !bondData.yieldBond && jsxs(Fragment, { children: ["(", getTimePeriods(bondData?.vestingTerm).months, " Mo)"] })] }), jsxs(Flex, { className: "ape:w-full ape:bg-white3 ape:p-[10px] ape:rounded-normal ape:mt-[10px]", children: [jsx(TokenImage, { symbol: bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol, size: 40, chain: txChain }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center", children: [jsx(Flex, { className: "ape:flex-col ape:text-[12px] ape:ml-[10px]", children: bondData.yieldBond ? (jsx(Fragment, { children: bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol })) : (jsxs(Fragment, { children: [jsxs(Flex, { className: "ape:font-normal ape:line-through", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["$", bondData.tgePrice] }), jsxs(Flex, { className: "ape:font-semibold", style: { color: 'green' }, children: ["$", bondData.initPrice] })] })) }), jsx(Flex, { className: "ape:p-[5px] ape:rounded-normal ape:border ape:leading-[18px]", style: {
+                                                    borderColor: 'var(--ape-color-success)',
                                                     background: 'rgba(56, 166, 17, 0.13)',
-                                                    color: 'success',
-                                                    lineHeight: '18px',
+                                                    color: 'var(--ape-color-success)',
                                                 }, children: bondData.yieldBond
                                                     ? `${bondData.yieldData?.apr.toFixed()} % APR`
-                                                    : `${trueBondPrice?.bonusWithFee?.toFixed(2)} % Bonus` })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '10px' }, children: [jsxs(Flex, { sx: { p: '10px', borderRadius: 'normal', background: 'white3', alignItems: 'center', width: '45%' }, children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 20, chain: txChain })) : (jsx(TokenImage, { symbol: getSymbol(inputToken, txChain), size: 20, chain: txChain })), jsx(Flex, { sx: { fontSize: '14px', fontWeight: 600, mx: '5px' }, children: formatNumberSI(inputValue, 4) ?? '0' }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 400 }, children: ["(", inputTokenPrice?.price && inputValue
+                                                    : `${trueBondPrice?.bonusWithFee?.toFixed(2)} % Bonus` })] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:mt-[10px]", children: [jsxs(Flex, { className: "ape:p-[10px] ape:rounded-normal ape:bg-white3 ape:items-center ape:w-[45%]", children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 20, chain: txChain })) : (jsx(TokenImage, { symbol: getSymbol(inputToken, txChain), size: 20, chain: txChain })), jsx(Flex, { className: "ape:text-[14px] ape:font-semibold ape:mx-[5px]", children: formatNumberSI(inputValue, 4) ?? '0' }), jsxs(Flex, { className: "ape:text-[12px] ape:font-normal", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["(", inputTokenPrice?.price && inputValue
                                                         ? `$${formatNumberSI(inputTokenPrice?.price * parseFloat(inputValue))}`
-                                                        : '0.00', ")"] })] }), jsx(Arrow, { direction: 'right', width: '10px' }), jsxs(Flex, { sx: {
-                                            p: '10px',
-                                            borderRadius: 'normal',
-                                            background: 'white3',
-                                            alignItems: 'center',
-                                            width: '45%',
-                                            gap: '5px',
-                                        }, children: [jsx(TokenImage, { symbol: bondData.yieldBond
+                                                        : '0.00', ")"] })] }), jsx(Arrow, { direction: 'right', width: '10px' }), jsxs(Flex, { className: "ape:p-[10px] ape:rounded-normal ape:bg-white3 ape:items-center ape:w-[45%] ape:gap-[5px]", children: [jsx(TokenImage, { symbol: bondData.yieldBond
                                                     ? bondData.underlyingEarnToken?.symbol || bondData.earnToken?.symbol
-                                                    : getSymbol(bondData.earnToken, txChain), chain: txChain, size: 20 }), bondData.yieldBond ? (jsxs(Flex, { sx: { fontSize: '14px', fontWeight: 600 }, children: ["$", formatNumberSI(preTGEEstimatedOutputUSD)] })) : (jsxs(Fragment, { children: [jsx(Flex, { sx: { fontSize: '14px', fontWeight: 600, mx: '5px' }, children: formatNumberSI(preTGEEstimatedOutput, 4) }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 400 }, children: ["($", formatNumberSI(preTGEEstimatedOutputUSD), ")"] })] }))] })] })] })) : (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '20px' }, children: [jsxs(Flex, { sx: {
-                                    width: '100%',
-                                    background: 'white3',
-                                    p: '5px',
-                                    borderRadius: 'normal',
-                                    color: 'textDisabledButton',
-                                    justifyContent: 'center',
-                                }, children: [bondData.earnToken.symbol, " (", getVestingTermsString(bondData), ")"] }), jsxs(Flex, { sx: { width: '100%', background: 'white3', p: '10px', borderRadius: 'normal', mt: '10px' }, children: [jsx(TokenImage, { symbol: bondData.earnToken.symbol, size: 40, chain: txChain }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', fontSize: '12px', ml: '10px' }, children: [jsxs(Flex, { sx: { color: 'textDisabledButton', fontWeight: 400, textDecoration: 'line-through' }, children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { sx: { color: 'green', fontWeight: 600 }, children: ["$", discountEarnTokenPriceForUser(bondData, SDKConfig.useTiers, getUserTier(promotionalPoints) ?? undefined)] })] }), jsxs(Flex, { sx: {
-                                                    p: '5px',
-                                                    borderRadius: 'normal',
-                                                    border: '1px solid var(--theme-ui-colors-success)',
+                                                    : getSymbol(bondData.earnToken, txChain), chain: txChain, size: 20 }), bondData.yieldBond ? (jsxs(Flex, { className: "ape:text-[14px] ape:font-semibold", children: ["$", formatNumberSI(preTGEEstimatedOutputUSD)] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:text-[14px] ape:font-semibold ape:mx-[5px]", children: formatNumberSI(preTGEEstimatedOutput, 4) }), jsxs(Flex, { className: "ape:text-[12px] ape:font-normal", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["($", formatNumberSI(preTGEEstimatedOutputUSD), ")"] })] }))] })] })] })) : (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[20px]", children: [jsxs(Flex, { className: "ape:w-full ape:bg-white3 ape:p-[5px] ape:rounded-normal ape:justify-center", style: { color: 'var(--ape-color-text-disabled-button)' }, children: [bondData.earnToken.symbol, " (", getVestingTermsString(bondData), ")"] }), jsxs(Flex, { className: "ape:w-full ape:bg-white3 ape:p-[10px] ape:rounded-normal ape:mt-[10px]", children: [jsx(TokenImage, { symbol: bondData.earnToken.symbol, size: 40, chain: txChain }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center", children: [jsxs(Flex, { className: "ape:flex-col ape:text-[12px] ape:ml-[10px]", children: [jsxs(Flex, { className: "ape:font-normal ape:line-through", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["$", earnTokenPrice(bondData)] }), jsxs(Flex, { className: "ape:font-semibold", style: { color: 'green' }, children: ["$", discountEarnTokenPriceForUser(bondData, SDKConfig.useTiers, getUserTier(promotionalPoints) ?? undefined)] })] }), jsxs(Flex, { className: "ape:p-[5px] ape:rounded-normal ape:border ape:leading-[18px]", style: {
+                                                    borderColor: 'var(--ape-color-success)',
                                                     background: 'rgba(56, 166, 17, 0.13)',
-                                                    color: 'success',
-                                                    lineHeight: '18px',
+                                                    color: 'var(--ape-color-success)',
                                                 }, children: [bondData.earnToken.symbol.toLowerCase() === 'ireet'
                                                         ? '3.00'
-                                                        : trueBondPrice?.bonusWithFee?.toFixed(2), ' ', "% Bonus"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '10px' }, children: [jsxs(Flex, { sx: { p: '10px', borderRadius: 'normal', background: 'white3', alignItems: 'center', width: '45%' }, children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 20, chain: txChain })) : (jsx(TokenImage, { symbol: getSymbol(inputToken, txChain), size: 20, chain: txChain })), jsx(Flex, { sx: { fontSize: '14px', fontWeight: 600, mx: '5px' }, children: formatNumberSI(inputValue, 4) ?? '0' }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 400 }, children: ["(", inputTokenPrice?.price && inputValue
+                                                        : trueBondPrice?.bonusWithFee?.toFixed(2), ' ', "% Bonus"] })] })] }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:mt-[10px]", children: [jsxs(Flex, { className: "ape:p-[10px] ape:rounded-normal ape:bg-white3 ape:items-center ape:w-[45%]", children: [isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 20, chain: txChain })) : (jsx(TokenImage, { symbol: getSymbol(inputToken, txChain), size: 20, chain: txChain })), jsx(Flex, { className: "ape:text-[14px] ape:font-semibold ape:mx-[5px]", children: formatNumberSI(inputValue, 4) ?? '0' }), jsxs(Flex, { className: "ape:text-[12px] ape:font-normal", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["(", inputTokenPrice?.price && inputValue
                                                         ? `$${formatNumberSI(inputTokenPrice?.price * parseFloat(inputValue))}`
-                                                        : '0.00', ")"] })] }), jsx(Arrow, { direction: 'right', width: '10px' }), jsxs(Flex, { sx: { p: '10px', borderRadius: 'normal', background: 'white3', alignItems: 'center', width: '45%' }, children: [jsx(TokenImage, { symbol: getSymbol(bondData.earnToken, txChain), chain: txChain, size: 20 }), jsx(Flex, { sx: { fontSize: '14px', fontWeight: 600, mx: '5px' }, children: formatNumberSI(estimatedOutputAmount, 4) }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 400 }, children: ["($", formatNumberSI(estimatedOutputUSD), ")"] })] })] })] })), jsx(Flex, { sx: { mt: '20px' }, children: hasToSwitchChain ? (jsxs(Button, { load: loadingSwitchChain, disabled: loadingSwitchChain, onClick: handleSwitchChain, fullWidth: true, children: ["switch to ", NETWORK_LABEL[txChain]] })) : !hasToApprove ? (jsx(Button, { load: loadingTx || verifyingTx, disabled: loadingTx || verifyingTx, onClick: txCallback, fullWidth: true, children: "buy" })) : (jsx(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING || approveLoading, disabled: approvalState === ApprovalState.PENDING || approveLoading, onClick: handleApprove, fullWidth: true, children: "Approve" })) })] })] }));
+                                                        : '0.00', ")"] })] }), jsx(Arrow, { direction: 'right', width: '10px' }), jsxs(Flex, { className: "ape:p-[10px] ape:rounded-normal ape:bg-white3 ape:items-center ape:w-[45%]", children: [jsx(TokenImage, { symbol: getSymbol(bondData.earnToken, txChain), chain: txChain, size: 20 }), jsx(Flex, { className: "ape:text-[14px] ape:font-semibold ape:mx-[5px]", children: formatNumberSI(estimatedOutputAmount, 4) }), jsxs(Flex, { className: "ape:text-[12px] ape:font-normal", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["($", formatNumberSI(estimatedOutputUSD), ")"] })] })] })] })), jsx(Flex, { className: "ape:mt-[20px]", children: hasToSwitchChain ? (jsxs(Button, { load: loadingSwitchChain, disabled: loadingSwitchChain, onClick: handleSwitchChain, fullWidth: true, children: ["switch to ", NETWORK_LABEL[txChain]] })) : !hasToApprove ? (jsx(Button, { load: loadingTx || verifyingTx, disabled: loadingTx || verifyingTx, onClick: txCallback, fullWidth: true, children: "buy" })) : (jsx(Button, { className: "action-button", load: approvalState === ApprovalState.PENDING || approveLoading, disabled: approvalState === ApprovalState.PENDING || approveLoading, onClick: handleApprove, fullWidth: true, children: "Approve" })) })] })] }));
 };
 
 export { TransactionModal as default };