npm - @ape.swap/bonds-sdk - Versions diffs - 6.3.0-test.69 → 7.0.0-test.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (995) hide show

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

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

package/dist/views/Bonds/components/BonusComponents/BonusComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusComponent.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusComponent.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport BonusTable from './BonusTable'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { getDiscountColor } from '../../utils'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Timer from '../../../../components/uikit-sdk/Svg/Icons/Timer'\n\nconst BonusComponent = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition,\n hideTooltip,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n hideTooltip?: boolean\n}) => {\n const SDKConfig = useSDKConfig()\n const isMobile = useIsMobile()\n const highestPointsElement = trueBondPrices?.reduce((max, current) => {\n return BigInt(current.points) > BigInt(max.points) ? current : max\n }, trueBondPrices[0])\n\n const baseTrueBondPrice = findHighestTrueBondPrice('0', trueBondPrices)\n\n return (\n <Flex>\n {trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (\n <Flex sx={{ alignItems: 'center', minWidth: '20px' }}>\n {highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (\n <TooltipBubble\n width=\"280px\"\n placement={tooltipPosition}\n transformTip={tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)'}\n body={<BonusTable trueBondPrices={trueBondPrices} minTier={minTier} />}\n sx={{ display: hideTooltip ? 'none' : 'block' }}\n >\n <Flex\n sx={{\n p: '3px 6px',\n border: '1px solid #9960C5',\n borderRadius: 'normal',\n background: 'transparent',\n position: 'relative',\n overflow: 'hidden',\n cursor: 'pointer',\n width: ['130px', '130px', '150px', '150px'],\n }}\n >\n <Flex\n sx={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n zIndex: 1,\n background: '#9960C5',\n opacity: 0.2,\n }}\n />\n <Flex sx={{ width: '100%', zIndex: 2, alignItems: 'center', justifyContent: 'center' }}>\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n <Flex sx={{ fontSize: ['12px', '12px', '14px', '14px'], mr: '3px' }}>Up to</Flex>\n <Flex\n sx={{\n color:\n highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0\n ? 'success'\n : 'error',\n fontSize: ['14px', '14px', '16px', '16px'],\n }}\n >\n {highestPointsElement?.bonusWithFee?.toFixed(2)}%\n </Flex>\n </Flex>\n </Flex>\n </TooltipBubble>\n ) : (\n <Flex sx={{ height: '20px', width: '20px' }}>\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : baseTrueBondPrice ? (\n <Flex\n sx={{ alignItems: 'center', minWidth: '20px' }}\n className={`${getDiscountColor(+baseTrueBondPrice?.bonusWithFee)}`}\n >\n {baseTrueBondPrice?.bonusWithFee > 0 ? (\n `${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`\n ) : (\n <Flex sx={{ height: '20px', width: '20px' }}>\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : (\n <Flex sx={{ color: bonus && 'success', alignItems: 'center', minWidth: '20px' }}>\n {bonus \|\| '-'}\n {airdropTooltip && (\n <TooltipBubble\n body={<>{airdropTooltip}</>}\n width=\"230px\"\n placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n >\n <Flex sx={{ width: '20px', height: '20px', alignItems: 'center', ml: '5px' }}>\n <img\n src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n alt=\"airdrop-img\"\n style={{ width: '20px', height: '20px' }}\n />\n </Flex>\n </TooltipBubble>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BonusComponent\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"BonusComponent.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusComponent.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport BonusTable from './BonusTable'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { getDiscountColor } from '../../utils'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Timer from '../../../../components/uikit-sdk/Svg/Icons/Timer'\n\nconst BonusComponent = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition,\n hideTooltip,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n hideTooltip?: boolean\n}) => {\n const SDKConfig = useSDKConfig()\n const isMobile = useIsMobile()\n const highestPointsElement = trueBondPrices?.reduce((max, current) => {\n return BigInt(current.points) > BigInt(max.points) ? current : max\n }, trueBondPrices[0])\n\n const baseTrueBondPrice = findHighestTrueBondPrice('0', trueBondPrices)\n\n return (\n <Flex>\n {trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (\n <Flex className=\"ape:items-center ape:min-w-[20px]\">\n {highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (\n <TooltipBubble\n width=\"280px\"\n placement={tooltipPosition}\n transformTip={tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)'}\n body={<BonusTable trueBondPrices={trueBondPrices} minTier={minTier} />}\n hideTooltip={hideTooltip}\n >\n <Flex className=\"ape:p-[3px_6px] ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:bg-transparent ape:relative ape:overflow-hidden ape:cursor-pointer ape:w-[130px] ape:md:w-[150px]\">\n <Flex className=\"ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-[1] ape:bg-[#9960C5] ape:opacity-20\" />\n <Flex className=\"ape:w-full ape:z-[2] ape:items-center ape:justify-center\">\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n <Flex className=\"ape:text-[12px] ape:md:text-[14px] ape:mr-[3px]\">Up to</Flex>\n <Flex\n className={clsx(\n 'ape:text-[14px] ape:md:text-[16px]',\n highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0\n ? 'ape:text-success'\n : 'ape:text-error',\n )}\n >\n {highestPointsElement?.bonusWithFee?.toFixed(2)}%\n </Flex>\n </Flex>\n </Flex>\n </TooltipBubble>\n ) : (\n <Flex className=\"ape:h-[20px] ape:w-[20px]\">\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : baseTrueBondPrice ? (\n <Flex\n className={clsx('ape:items-center ape:min-w-[20px]')}\n style={{ color: getDiscountColor(+baseTrueBondPrice?.bonusWithFee) }}\n >\n {baseTrueBondPrice?.bonusWithFee > 0 ? (\n `${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`\n ) : (\n <Flex className=\"ape:h-[20px] ape:w-[20px]\">\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : (\n <Flex\n className=\"ape:items-center ape:min-w-[20px]\"\n style={{ color: bonus ? 'var(--ape-color-success)' : undefined }}\n >\n {bonus \|\| '-'}\n {airdropTooltip && (\n <TooltipBubble\n body={<>{airdropTooltip}</>}\n width=\"230px\"\n placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n >\n <Flex className=\"ape:w-[20px] ape:h-[20px] ape:items-center ape:ml-[5px]\">\n <img\n src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n alt=\"airdrop-img\"\n style={{ width: '20px', height: '20px' }}\n />\n </Flex>\n </TooltipBubble>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BonusComponent\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/views/Bonds/components/BonusComponents/BonusContainer.d.ts CHANGED Viewed

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

package/dist/views/Bonds/components/BonusComponents/BonusContainer.js CHANGED Viewed

@@ -1,10 +1,13 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import BonusComponent from './BonusComponent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
-const BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition = 'bottomRight', }) => {
+const BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition = 'bottomRight', cardsView, }) => {
     const isMobile = useIsMobile();
-    return (jsx("div", { className: `discount-column`, children: jsx(BonusComponent, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' }) }));
+    return (jsxs("div", { className: clsx('discount-column ape:flex', cardsView
+            ? 'ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[100px]'
+            : 'ape:w-[170px] ape:items-end ape:justify-center'), children: [cardsView && (jsx("span", { className: "ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]", children: "Bonus" })), jsx(BonusComponent, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' })] }));
 };
 export { BonusContainer as default };

package/dist/views/Bonds/components/BonusComponents/BonusContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusContainer.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusContainer.tsx"],"sourcesContent":["import React from 'react'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport BonusComponent from './BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { TrueBondPrices } from '../../../../types/bonds'\n\nconst BonusContainer = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition = 'bottomRight',\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n}) => {\n const isMobile = useIsMobile()\n return (\n <div className={`discount-column`}>\n <BonusComponent\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n tooltipPosition={isMobile ? tooltipPosition : 'bottomLeft'}\n />\n </div>\n )\n}\n\nexport default BonusContainer\n"],"names":["_jsx"],"mappings":"~~;;;;AAMA~~,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,GAAG,aAAa,~~GAOhC~~,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;~~AAC9B~~,~~IAAA,~~QACEA,~~GAAA~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAK~~,SAAS,~~EAAE~~,~~CAAA~~,~~eAAA~~,~~CAAiB~~,~~YAC/BA~~,GAAA,CAAC,cAAc,~~EAAA~~,~~EACb,~~cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,QAAQ,GAAG,eAAe,GAAG,YAAY,EAAA,CAC1D,EAAA,CACE;AAEV;;;;"}
1	+ {"version":3,"file":"BonusContainer.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusContainer.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport BonusComponent from './BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { TrueBondPrices } from '../../../../types/bonds'\n\nconst BonusContainer = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition = 'bottomRight',\n cardsView,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n cardsView?: boolean\n}) => {\n const isMobile = useIsMobile()\n return (\n <div\n className={clsx(\n 'discount-column ape:flex',\n cardsView\n ? 'ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[100px]'\n : 'ape:w-[170px] ape:items-end ape:justify-center',\n )}\n >\n {cardsView && (\n <span className=\"ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]\">Bonus</span>\n )}\n <BonusComponent\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n tooltipPosition={isMobile ? tooltipPosition : 'bottomLeft'}\n />\n </div>\n )\n}\n\nexport default BonusContainer\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAOA,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,GAAG,aAAa,EAC/B,SAAS,GAQV,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAC9B,QACEA,cACE,SAAS,EAAE,IAAI,CACb,0BAA0B,EAC1B;AACE,cAAE;cACA,gDAAgD,CACrD,EAAA,QAAA,EAAA,CAEA,SAAS,KACRC,cAAM,SAAS,EAAC,8EAA8E,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAC5G,EACDA,GAAA,CAAC,cAAc,IACb,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,QAAQ,GAAG,eAAe,GAAG,YAAY,EAAA,CAC1D,CAAA,EAAA,CACE;AAEV;;;;"}

package/dist/views/Bonds/components/BonusComponents/BonusTable.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
-import React from 'react';
 import { TrueBondPrices } from '../../../../types/bonds';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 declare const BonusTable: ({ trueBondPrices, minTier, hideTitle, }: {
     trueBondPrices?: TrueBondPrices[];
     minTier?: LaunchBondTiers;
     hideTitle?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BonusTable;

package/dist/views/Bonds/components/BonusComponents/BonusTable.js CHANGED Viewed

@@ -1,7 +1,9 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Button from '../../../../components/uikit-sdk/Button/Button.js';
-import useTierPoints, { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/useTierPoints.js';
+import useTierPoints from '../../../../state/tiers/useTierPoints.js';
+import { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/tiers.js';
 import YouTooltip from '../../../../components/YouTooltip/YouTooltip.js';
 import { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers.js';
@@ -9,7 +11,7 @@ const BonusTable = ({ trueBondPrices, minTier, hideTitle, }) => {
     const { data: tierPointsState } = useTierPoints();
     const { onChainPoints } = tierPointsState || {};
     const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices);
-    return (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: [!hideTitle && jsx(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '10px' }, children: "Ape Tier Bonuses" }), trueBondPrices
+    return (jsxs(Flex, { className: "ape:w-full ape:flex-col", children: [!hideTitle && (jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[10px] ape:mt-[-5px]", children: "Ape Tier Bonuses" })), trueBondPrices
                 ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))
                 .map((tier) => {
                 const tierToUse = getUserTier(tier.points);
@@ -18,26 +20,12 @@ const BonusTable = ({ trueBondPrices, minTier, hideTitle, }) => {
                 const you = tier.points === usersTrueBondPrices?.points;
                 // @ts-ignore
                 const isUnavailable = minTier ? minTier > tierToUse || (minTier === 0 && tier.points === '0') : false;
-                return (jsxs(Flex, { sx: {
-                        width: '100%',
-                        justifyContent: 'space-between',
-                        height: '30px',
-                        //@ts-ignore
-                        background: TIERS_BG[tierToUse] ?? 'white3',
-                        borderRadius: 'normal',
-                        alignItems: 'center',
-                        px: '8px',
-                        mb: '1px',
-                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [tier.points !== '0' && (jsx("img", {
+                return (jsxs(Flex, { className: "ape:w-full ape:justify-between ape:h-[30px] ape:rounded-normal ape:items-center ape:px-[8px] ape:mb-[1px]",
+                    //@ts-ignore
+                    style: { background: TIERS_BG[tierToUse] ?? 'var(--ape-color-white3)' }, children: [jsxs(Flex, { className: "ape:items-center", children: [tier.points !== '0' && (jsx("img", {
                                     //@ts-ignore
-                                    src: `https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx(YouTooltip, {})] }), isUnavailable ? (jsx(Flex, { sx: { fontWeight: 600, opacity: 0.8 }, children: "UNAVAILABLE" })) : (jsxs(Flex, { sx: { color: tier.bonusWithFee > 0 ? 'success' : 'text', fontWeight: 700, alignItems: 'center' }, children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx(Flex, { sx: {
-                                        borderRadius: 'normal',
-                                        border: '1px solid var(--theme-ui-colors-success)',
-                                        px: '4px',
-                                        ml: '3px',
-                                        color: 'success',
-                                    }, children: `+${tier?.boost ?? 0}%` }))] }))] }, tier.points));
-            }), !hideTitle && (jsx(Button, { variant: "secondary", sx: { width: '100%', mt: '10px' }, onClick: () => window.open('https://www.ape.bond/true-yield?createPosition', '_blank'), children: "get tier" }))] }));
+                                    src: `https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx(YouTooltip, {})] }), isUnavailable ? (jsx(Flex, { className: "ape:font-semibold ape:opacity-80", children: "UNAVAILABLE" })) : (jsxs(Flex, { className: clsx('ape:font-bold ape:items-center', tier.bonusWithFee > 0 ? 'ape:text-success' : 'ape:text-text'), children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx(Flex, { className: "ape:rounded-normal ape:border ape:border-solid ape:border-success ape:px-[4px] ape:ml-[3px] ape:text-success", children: `+${tier?.boost ?? 0}%` }))] }))] }, tier.points));
+            }), !hideTitle && (jsx(Button, { variant: "secondary", className: "ape:w-full ape:mt-[10px] ape:h-8 ape:text-sm!", onClick: () => window.open('https://www.ape.bond/true-yield?createPosition', '_blank'), children: "get tier" }))] }));
 };
 export { BonusTable as default };

package/dist/views/Bonds/components/BonusComponents/BonusTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusTable.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusTable.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport useTierPoints, { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/~~useTierPoints~~'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport YouTooltip from '../../../../components/YouTooltip/YouTooltip'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst BonusTable = ({\n trueBondPrices,\n minTier,\n hideTitle,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n hideTitle?: boolean\n}) => {\n const { data: tierPointsState } = useTierPoints()\n const { onChainPoints } = tierPointsState \|\| {}\n const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices)\n\n return (\n <Flex ~~sx={{ width~~: ~~'100%', flexDirection~~: ~~'column' }}~~>\n {!hideTitle && <Flex ~~sx={{ width~~: ~~'100%', justifyContent~~: 'center', mb~~: '~~10px' }}>Ape Tier Bonuses</Flex>}\n {trueBondPrices\n ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))\n .map((tier) => {\n const tierToUse = getUserTier(tier.points) as LaunchBondTiers\n //@ts-ignore\n const tierName = `${TIERS_NAMES[tierToUse!]}`\n const you = tier.points === usersTrueBondPrices?.points\n // @ts-ignore\n const isUnavailable = minTier ? minTier > tierToUse \|\| (minTier === 0 && tier.points === '0') : false\n return (\n <Flex\n ~~sx={{\n width~~: ~~'100%',\n justifyContent~~: ~~'space~~-between~~',\n height~~: ~~'30px',\~~n //@ts-ignore\n background: TIERS_BG[tierToUse] ?? 'white3'~~,\n borderRadius:~~ ~~'normal',\n alignItems: 'center',\n px: '8px',\n mb: '1px',\n~~ }}\n key={tier.points}\n >\n <Flex ~~sx={{ alignItems~~: 'center~~' }}~~>\n {tier.points !== '0' && (\n <img\n //@ts-ignore\n src={`https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n )}\n <Flex>{tier.points === '0' ? 'No Tier' : tierName}</Flex>\n {you && <YouTooltip />}\n </Flex>\n {isUnavailable ? (\n <Flex ~~sx={{~~ ~~fontWeight~~: ~~600,~~ opacity~~: 0.8 }}~~>UNAVAILABLE</Flex>\n ) : (\n <Flex sx={{ ~~color~~: tier.bonusWithFee > 0 ? 'success' : 'text'~~, fontWeight: 700, alignItems: 'center'~~ }}>\n {tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0'}%\n {tier.points !== '0' && (\n <Flex~~\n sx={{\n borderRadius~~: ~~'normal',\n~~ border: ~~'1px~~ solid ~~var(--theme~~-~~ui-colors-~~success~~)',\n~~ px: ~~'4px',\n~~ ml: ~~'3px',\n color~~: 'success~~',\n }}~~\n >\n {`+${tier?.boost ?? 0}%`}\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n })}\n {!hideTitle && (\n <Button\n variant=\"secondary\"\n ~~sx={{~~ ~~width~~: ~~'100%',~~ mt: ~~'10px' }}~~\n onClick={() => window.open('https://www.ape.bond/true-yield?createPosition', '_blank')}\n >\n get tier\n </Button>\n )}\n </Flex>\n )\n}\n\nexport default BonusTable\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;AASA~~,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,OAAO,EACP,SAAS,GAKV,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE;AACjD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,IAAI,EAAE;IAC/C,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,aAAa,EAAE,cAAc,CAAC;~~AAEnF~~,~~IAAA,~~QACEA,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACjD,~~CAAC,SAAS,~~IAAIC~~,GAAA,CAAC,IAAI,~~IAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,kBAAA,EAAA,~~CAAyB~~,~~EACxG~~;kBACG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACxG,iBAAA,GAAG,CAAC,CAAC,IAAI,KAAI;gBACZ,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAoB;;gBAE7D,MAAM,QAAQ,GAAG,CAAA,EAAG,WAAW,CAAC,SAAU,CAAC,EAAE;gBAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,mBAAmB,EAAE,MAAM;;gBAEvD,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,KAAK,OAAO,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK;AACrG,gBAAA,QACED,IAAA,CAAC,IAAI,EAAA,EACH,~~EAAE~~,~~EAAE;AACF~~,~~wBAAA~~,KAAK,EAAE,~~MAAM;AACb,wBAAA,cAAc,~~EAAE,~~eAAe;AAC/B,wBAAA,MAAM,EAAE,MAAM;;AAEd,wBAAA,~~UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,~~QAAQ;AAC3C~~,~~wBAAA,YAAY,~~EAAE,~~QAAQ;AACtB,wBAAA,UAAU,EAAE,QAAQ;AACpB,wBAAA,EAAE,EAAE,KAAK;AACT,wBAAA,EAAE,EAAE,KAAK;AACV,qBAAA,~~EAAA,QAAA,EAAA,~~CAGDA~~,KAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~QAAQ~~,~~EAAE,aAC~~/B,IAAI,CAAC,MAAM,KAAK,GAAG,KAClBC,GAAA,CAAA,KAAA,EAAA;;AAEE,oCAAA,GAAG,EAAE,CAAA,+BAAA,EAAkC,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAClF,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,~~EAAA~~,~~CACvE,~~CACH,EACDA,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAA,QAAA,EAAE,~~IAAI,CAAC,MAAM,KAAK,GAAG,GAAG,SAAS,GAAG,QAAQ,EAAA,CAAQ,EACxD,GAAG,IAAIA,~~IAAC~~,UAAU,~~EAAA~~,~~EAAA,CAAG,~~CAAA,EAAA,CACjB,EACN,aAAa,IACZA,~~IAAC~~,IAAI,~~EAAA~~,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~GAAG,EAAE,4BAAoB,KAE/DD,IAAA,CAAC,~~IAAI,EAAA,~~EAAC~~,~~EAAE~~,EAAE,~~EAAE~~,~~KAAK~~,~~EAAE~~,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,~~SAAS~~,GAAG,~~MAAM~~,~~EAAE~~,~~UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,~~CACnG~~,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,EAAA,GAAA,EAC1D,IAAI,CAAC,MAAM,KAAK,GAAG,KAClBC,GAAA,CAAC,IAAI,EAAA,~~EACH~~,~~EAAE~~,~~EAAE;AACF~~,~~wCAAA~~,~~YAAY~~,~~EAAE~~,~~QAAQ;AACtB~~,~~wCAAA~~,~~MAAM~~,~~EAAE~~,~~0CAA0C;AAClD,wCAAA,EAAE,EAAE,KAAK;AACT,wCAAA,EAAE,EAAE,KAAK;AACT,wCAAA,KAAK,EAAE,SAAS;AACjB,qCAAA,EAAA,QAAA,EAEA,~~IAAI,~~IAAI,~~EAAE,KAAK,IAAI,CAAC,~~CAAA~~,~~CAAA,CAAG,~~EAAA,CACnB,CACR,CAAA,EAAA,CACI,CACR,~~CAAA~~,~~EAAA,EAjCI,~~IAAI,CAAC,MAAM,~~CAkCX~~;AAEX,YAAA,CAAC,CAAC,EACH,CAAC,SAAS,KACTA,~~IAAC~~,MAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EACjC,~~OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,gDAAgD,EAAE,QAAQ,CAAC,~~yBAG~~/E,CACV,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"BonusTable.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusTable.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport useTierPoints from '../../../../state/tiers/useTierPoints'\nimport { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/tiers'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport YouTooltip from '../../../../components/YouTooltip/YouTooltip'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst BonusTable = ({\n trueBondPrices,\n minTier,\n hideTitle,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n hideTitle?: boolean\n}) => {\n const { data: tierPointsState } = useTierPoints()\n const { onChainPoints } = tierPointsState \|\| {}\n const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices)\n\n return (\n <Flex className=\"ape:w-full ape:flex-col\">\n {!hideTitle && (\n <Flex className=\"ape:w-full ape:justify-center ape:mb-[10px] ape:mt-[-5px]\">Ape Tier Bonuses</Flex>\n )}\n {trueBondPrices\n ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))\n .map((tier) => {\n const tierToUse = getUserTier(tier.points) as LaunchBondTiers\n //@ts-ignore\n const tierName = `${TIERS_NAMES[tierToUse!]}`\n const you = tier.points === usersTrueBondPrices?.points\n // @ts-ignore\n const isUnavailable = minTier ? minTier > tierToUse \|\| (minTier === 0 && tier.points === '0') : false\n return (\n <Flex\n className=\"ape:w-full ape:justify-between ape:h-[30px] ape:rounded-normal ape:items-center ape:px-[8px] ape:mb-[1px]\"\n //@ts-ignore\n style={{ background: TIERS_BG[tierToUse] ?? 'var(--ape-color-white3)' }}\n key={tier.points}\n >\n <Flex className=\"ape:items-center\">\n {tier.points !== '0' && (\n <img\n //@ts-ignore\n src={`https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n )}\n <Flex>{tier.points === '0' ? 'No Tier' : tierName}</Flex>\n {you && <YouTooltip />}\n </Flex>\n {isUnavailable ? (\n <Flex className=\"ape:font-semibold ape:opacity-80\">UNAVAILABLE</Flex>\n ) : (\n <Flex\n className={clsx(\n 'ape:font-bold ape:items-center',\n tier.bonusWithFee > 0 ? 'ape:text-success' : 'ape:text-text',\n )}\n >\n {tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0'}%\n {tier.points !== '0' && (\n <Flex className=\"ape:rounded-normal ape:border ape:border-solid ape:border-success ape:px-[4px] ape:ml-[3px] ape:text-success\">\n {`+${tier?.boost ?? 0}%`}\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n })}\n {!hideTitle && (\n <Button\n variant=\"secondary\"\n className=\"ape:w-full ape:mt-[10px] ape:h-8 ape:text-sm!\"\n onClick={() => window.open('https://www.ape.bond/true-yield?createPosition', '_blank')}\n >\n get tier\n </Button>\n )}\n </Flex>\n )\n}\n\nexport default BonusTable\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/BuyAgainRow/index.d.ts CHANGED Viewed

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

package/dist/views/Bonds/components/BuyAgainRow/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { isBondSoldOut } from '../../utils.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
@@ -31,26 +31,7 @@ const BuyAgainRow = () => {
     const remainingTokensString = bond
         ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`
         : '';
-    return bond ? (jsxs(Flex, { sx: {
-            position: 'relative',
-            width: '100%',
-            mb: '10px',
-        }, children: [jsx(Flex, { sx: {
-                    p: '0 1px',
-                    width: '100%',
-                    pt: '5px',
-                    background: 'primaryButton',
-                    borderRadius: 'normal',
-                    flexDirection: 'column',
-                    opacity: 0.5,
-                }, children: jsx(Flex, { className: "buy-again-header", sx: {
-                        width: '100%',
-                        fontSize: '12px',
-                        fontWeight: 500,
-                        pl: '26px',
-                        color: 'primaryBright',
-                        height: '91px',
-                    }, children: "BOND SPOTLIGHT" }) }), jsx(Flex, { onClick: () => {
+    return bond ? (jsxs(Flex, { className: "ape:relative ape:w-full ape:mb-[10px]", children: [jsx(Flex, { className: "ape:p-[0_1px] ape:w-full ape:pt-[5px] ape:bg-primary-button ape:rounded-normal ape:flex-col ape:opacity-50", children: jsx(Flex, { className: "buy-again-header ape:w-full ape:text-[12px] ape:font-medium ape:pl-[26px] ape:text-primary-bright ape:h-[91px]", children: "BOND SPOTLIGHT" }) }), jsx(Flex, { onClick: () => {
                     track({
                         event: 'buyAgainClick',
                         chain: bond.chainId,
@@ -58,7 +39,7 @@ const BuyAgainRow = () => {
                             bond: bond.earnToken.symbol,
                         },
                     });
-                }, sx: { position: 'absolute', top: '25px', left: '1px', width: 'calc(100% - 2px)' }, children: jsx(BondRow, { bondAddress: bond?.contractAddress?.[bond?.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: bond.tags?.[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond?.trueBondPrices, minTier: bond?.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] })) : null;
+                }, className: "ape:absolute ape:top-[25px] ape:left-[1px] ape:w-[calc(100%-2px)]", children: jsx(BondRow, { bondAddress: bond?.contractAddress?.[bond?.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: bond.tags?.[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond?.trueBondPrices, minTier: bond?.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] })) : null;
 };
 export { BuyAgainRow as default };

package/dist/views/Bonds/components/BuyAgainRow/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/BuyAgainRow/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { isBondSoldOut } from '../../utils'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport BondRow from '../BondRows/BondRow'\nimport track from '../../../../utils/track'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { BondsData } from '../../../../types/bonds'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport {\n getVestingTermsString,\n getVestingTermsTooltipString,\n remainingPercentage,\n} from '../../../../utils/displayHelpers'\n\nconst BuyAgainRow = () => {\n const { data: bills } = useBondsData()\n const SDKConfig = useSDKConfig()\n const highlightedBond = SDKConfig.highlightedBond\n const chains = SDKConfig?.chains as number[]\n\n const bond = useMemo(\n () =>\n bills?.find(\n (bill) =>\n bill.earnToken.symbol.toLowerCase() === highlightedBond?.toLowerCase() &&\n !bill.soldOut &&\n !bill.hide &&\n chains.includes(bill.chainId),\n ),\n [bills, chains, highlightedBond],\n )\n\n const bondAddress = bond?.contractAddress?.[bond.chainId]\n\n const remainingTokensFormat = (bond: BondsData \| BillsConfig) => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n return formatNumberSI(parseFloat(tokensRemaining ?? '0'), 0)\n }\n\n const remainingTokensUsd = (bond: BondsData \| BillsConfig): number => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0\n return Number(tokensRemaining ?? '0') * Number(payoutTokenPrice ?? '0')\n }\n\n const remainingTokensString = bond\n ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`\n : ''\n\n return bond ? (\n <Flex~~\n sx={{\n position~~: ~~'relative',\n width~~: ~~'100%',\n~~ mb~~: '~~10px~~',\n }}~~\n >\n <Flex~~\n sx={{\n~~ p: ~~'0 1px',\n width~~: ~~'100%',\n pt~~: ~~'5px',\n background~~: ~~'primaryButton',\n borderRadius~~: ~~'normal',\n flexDirection~~: ~~'column',\n~~ opacity~~: 0.5,\n }}~~\n >\n <Flex\n className=\"buy-again-header~~\"\n sx={{\n width~~: ~~'100%',\n fontSize~~: ~~'12px',\n fontWeight~~: ~~500,\n~~ pl: ~~'26px',\n color~~: ~~'primaryBright',\n height~~: '91px~~',\n }}~~\n >\n BOND SPOTLIGHT\n </Flex>\n </Flex>\n <Flex\n onClick={() => {\n track({\n event: 'buyAgainClick',\n chain: bond.chainId,\n data: {\n bond: bond.earnToken.symbol,\n },\n })\n }}\n ~~sx={{ position~~: 'absolute', top~~: '~~25px', left~~: '~~1px', ~~width~~: 'calc(100~~% -~~ 2px)~~' }}~~\n >\n <BondRow\n key={`${bondAddress}-${bond.chainId}`}\n bondAddress={bond?.contractAddress?.[bond?.chainId] as string}\n bondChain={bond.chainId}\n billType={bond.billType}\n payoutToken={bond.earnToken}\n tag={bond.tags?.[0]}\n bondSoldOut={isBondSoldOut(bond, SDKConfig.showLowValueBonds)}\n trueBondPrices={bond?.trueBondPrices}\n minTier={bond?.minTier}\n vestingTermString={getVestingTermsString(bond)}\n vestingCliffString={getVestingTermsTooltipString(bond)}\n percentageAvailable={remainingPercentage(bond)}\n remainingTokensString={remainingTokensString}\n />\n </Flex>\n </Flex>\n ) : null\n}\n\nexport default BuyAgainRow\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAgBA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE;AACtC,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,eAAe,GAAG,SAAS,CAAC,eAAe;AACjD,IAAA,MAAM,MAAM,GAAG,SAAS,EAAE,MAAkB;AAE5C,IAAA,MAAM,IAAI,GAAG,OAAO,CAClB,MACE,KAAK,EAAE,IAAI,CACT,CAAC,IAAI,KACH,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE,WAAW,EAAE;QACtE,CAAC,IAAI,CAAC,OAAO;QACb,CAAC,IAAI,CAAC,IAAI;AACV,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAChC,EACH,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,CACjC;IAED,MAAM,WAAW,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;AAEzD,IAAA,MAAM,qBAAqB,GAAG,CAAC,IAA6B,KAAI;AAC9D,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,GAAG;QAC9E,OAAO,cAAc,CAAC,UAAU,CAAC,eAAe,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AAC9D,IAAA,CAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAA6B,KAAY;AACnE,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,GAAG;AAC9E,QAAA,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,IAAI,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC;AAC/E,QAAA,OAAO,MAAM,CAAC,eAAe,IAAI,GAAG,CAAC,GAAG,MAAM,CAAC,gBAAgB,IAAI,GAAG,CAAC;AACzE,IAAA,CAAC;IAED,MAAM,qBAAqB,GAAG;UAC1B,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA,GAAA,EAAM,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAA,CAAA;UACrG,EAAE;~~IAEN~~,OAAO,IAAI,IACTA,IAAA,CAAC,IAAI,EAAA,~~EACH~~,~~EAAE~~,~~EAAE;AACF~~,~~YAAA~~,~~QAAQ,EAAE,UAAU;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,EAAE,EAAE,MAAM;AACX,SAAA,~~EAAA,QAAA,EAAA,~~CAEDC~~,GAAA,CAAC,IAAI,~~EAAA~~,~~EACH~~,~~EAAE~~,~~EAAE;AACF~~,~~oBAAA,CAAC,EAAE,OAAO;AACV,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,EAAE,EAAE,KAAK;AACT,oBAAA,UAAU,EAAE,eAAe;AAC3B,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,OAAO,EAAE,GAAG;iBACb,~~EAAA,QAAA,~~EAEDA~~,GAAA,CAAC,IAAI,EAAA,~~EACH~~,SAAS,EAAC,~~kBAAkB~~,~~EAC5B,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,QAAQ,EAAE,MAAM;AAChB,wBAAA,UAAU,EAAE,GAAG;AACf,wBAAA,EAAE,EAAE,MAAM;AACV,wBAAA,KAAK,EAAE,eAAe;AACtB,wBAAA,MAAM,EAAE,MAAM;qBACf,~~EAAA,QAAA,EAAA,gBAAA,EAAA,~~CAGI~~,EAAA,CACF,EACPA,~~GAAA~~,~~CAAC,~~IAAI,~~IACH~~,OAAO,EAAE,MAAK;AACZ,oBAAA,KAAK,CAAC;AACJ,wBAAA,KAAK,EAAE,eAAe;wBACtB,KAAK,EAAE,IAAI,CAAC,OAAO;AACnB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC5B,yBAAA;AACF,qBAAA,CAAC;~~AACJ~~,~~gBAAA,~~CAAC,EACD,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,kBAAkB,EAAE,~~EAAA,QAAA,~~EAEjFA~~,~~GAAA~~,~~CAAC,~~OAAO,EAAA,EAEN,WAAW,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAW,EAC7D,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,SAAS,EAC3B,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,EACnB,WAAW,EAAE,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAC7D,cAAc,EAAE,IAAI,EAAE,cAAc,EACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EACtB,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,EAC9C,kBAAkB,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtD,mBAAmB,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAC9C,qBAAqB,EAAE,qBAAqB,EAAA,EAZvC,CAAA,EAAG,WAAW,~~CAAA~~,~~CAAA,EAAI,~~IAAI,CAAC,OAAO,CAAA,CAAE,CAarC,EAAA,CACG,CAAA,EAAA,CACF,IACL,IAAI;AACV;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/BuyAgainRow/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { isBondSoldOut } from '../../utils'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport BondRow from '../BondRows/BondRow'\nimport track from '../../../../utils/track'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { BondsData } from '../../../../types/bonds'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport {\n getVestingTermsString,\n getVestingTermsTooltipString,\n remainingPercentage,\n} from '../../../../utils/displayHelpers'\n\nconst BuyAgainRow = () => {\n const { data: bills } = useBondsData()\n const SDKConfig = useSDKConfig()\n const highlightedBond = SDKConfig.highlightedBond\n const chains = SDKConfig?.chains as number[]\n\n const bond = useMemo(\n () =>\n bills?.find(\n (bill) =>\n bill.earnToken.symbol.toLowerCase() === highlightedBond?.toLowerCase() &&\n !bill.soldOut &&\n !bill.hide &&\n chains.includes(bill.chainId),\n ),\n [bills, chains, highlightedBond],\n )\n\n const bondAddress = bond?.contractAddress?.[bond.chainId]\n\n const remainingTokensFormat = (bond: BondsData \| BillsConfig) => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n return formatNumberSI(parseFloat(tokensRemaining ?? '0'), 0)\n }\n\n const remainingTokensUsd = (bond: BondsData \| BillsConfig): number => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0\n return Number(tokensRemaining ?? '0') * Number(payoutTokenPrice ?? '0')\n }\n\n const remainingTokensString = bond\n ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`\n : ''\n\n return bond ? (\n <Flex className=\"ape:relative ape:w-full ape:mb-[10px]\">\n <Flex className=\"ape:p-[0_1px] ape:w-full ape:pt-[5px] ape:bg-primary-button ape:rounded-normal ape:flex-col ape:opacity-50\">\n <Flex className=\"buy-again-header ape:w-full ape:text-[12px] ape:font-medium ape:pl-[26px] ape:text-primary-bright ape:h-[91px]\">\n BOND SPOTLIGHT\n </Flex>\n </Flex>\n <Flex\n onClick={() => {\n track({\n event: 'buyAgainClick',\n chain: bond.chainId,\n data: {\n bond: bond.earnToken.symbol,\n },\n })\n }}\n className=\"ape:absolute ape:top-[25px] ape:left-[1px] ape:w-[calc(100%-2px)]\"\n >\n <BondRow\n key={`${bondAddress}-${bond.chainId}`}\n bondAddress={bond?.contractAddress?.[bond?.chainId] as string}\n bondChain={bond.chainId}\n billType={bond.billType}\n payoutToken={bond.earnToken}\n tag={bond.tags?.[0]}\n bondSoldOut={isBondSoldOut(bond, SDKConfig.showLowValueBonds)}\n trueBondPrices={bond?.trueBondPrices}\n minTier={bond?.minTier}\n vestingTermString={getVestingTermsString(bond)}\n vestingCliffString={getVestingTermsTooltipString(bond)}\n percentageAvailable={remainingPercentage(bond)}\n remainingTokensString={remainingTokensString}\n />\n </Flex>\n </Flex>\n ) : null\n}\n\nexport default BuyAgainRow\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/ChainBanner/ChainBanner.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 declare const ChainBanner: ({ chainId }: {
     chainId: ChainId;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ChainBanner;

package/dist/views/Bonds/components/ChainBanner/ChainBanner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Button from '../../../../components/uikit-sdk/Button/Button.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import { variants } from '../../../../components/uikit-sdk/Button/types.js';
@@ -68,16 +68,10 @@ const ChainBanner = ({ chainId }) => {
         // Fallback for non-Next.js environments
         window.history.pushState({}, '', bannerCTA);
     };
-    return (jsxs("div", { className: "banner-container", sx: {
-            backgroundImage: [
-                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
-                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
-                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
-                `url(${BANNER_INFO[chainId]?.background})`,
-                `url(${BANNER_INFO[chainId]?.background})`,
-            ],
-            cursor: bannerCTA ? 'pointer' : 'unset',
-        }, onClick: handleClickOnBanner, children: [jsx("div", { className: "banner-title", children: BANNER_INFO[chainId]?.title }), jsx("div", { className: "banner-subtitle", children: BANNER_INFO[chainId]?.subtitle }), jsx("div", { className: "banner-actions", children: BANNER_INFO[chainId]?.buttons?.map((button, index) => (jsx(Button, { className: "action-button", onClick: () => window.open(button.cta, '_blank'), variant: button.variant || variants.PRIMARY, children: button.label }, `banner-button-${index}`))) })] }, `banner-container-${chainId}`));
+    return (jsxs("div", { className: `banner-container ape:w-full ape:min-h-[160px] ape:rounded-[8px] ape:flex ape:flex-col ape:items-center ape:justify-center ape:mb-[10px] ape:gap-[5px] ape:bg-cover ape:bg-no-repeat ape:p-[15px] ape:min-[800px]:max-[1000px]:bg-bottom ape:bg-[image:var(--banner-bg-mobile)] ape:lg:bg-[image:var(--banner-bg-desktop)] ${bannerCTA ? 'ape:cursor-pointer' : 'ape:cursor-[unset]'}`, style: {
+            '--banner-bg-mobile': `url('${BANNER_INFO[chainId]?.backgroundMobile}')`,
+            '--banner-bg-desktop': `url('${BANNER_INFO[chainId]?.background}')`,
+        }, onClick: handleClickOnBanner, children: [jsx("div", { className: "banner-title ape:font-bold ape:text-[25.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:mt-[10px] ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-1/2 ape:max-sm:text-[18px] ape:max-sm:leading-[21px]", children: BANNER_INFO[chainId]?.title }), jsx("div", { className: "banner-subtitle ape:font-normal ape:text-[14.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-[55%] ape:max-sm:text-[12px] ape:max-sm:leading-[14px] ape:max-sm:mb-[10px]", children: BANNER_INFO[chainId]?.subtitle }), jsx("div", { className: "banner-actions ape:flex ape:items-center ape:justify-center ape:gap-[10px]", children: BANNER_INFO[chainId]?.buttons?.map((button, index) => (jsx(Button, { className: "action-button ape:h-[35px] ape:text-[12px]! ape:font-bold", onClick: () => window.open(button.cta, '_blank'), variant: button.variant || variants.PRIMARY, children: button.label }, `banner-button-${index}`))) })] }, `banner-container-${chainId}`));
 };
 export { ChainBanner as default };

package/dist/views/Bonds/components/ChainBanner/ChainBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainBanner.js","sources":["../../../../../src/views/Bonds/components/ChainBanner/ChainBanner.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { variants } from '../../../../components/uikit-sdk/Button/types'\n\ninterface ButtonInfo {\n label: string\n cta?: string\n variant?: variants\n background?: string\n}\n\ninterface BannerInfo {\n title?: string\n subtitle?: string\n buttons?: ButtonInfo[]\n background: string\n backgroundMobile: string\n cta?: string\n}\n\nconst BANNER_INFO: Partial<Record<ChainId, BannerInfo>> = {\n // MONAD IS BROKEN, TODO fix it!\n [ChainId.MONAD]: {\n title: 'Monad Mainnet Bonds',\n subtitle: 'Launch Coming Soon.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://x.com/ApeBond/status/1995538519536578880?s=20',\n variant: variants.SECONDARY,\n },\n { label: 'Launch Yours', cta: 'https://forms.clickup.com/3080492/f/2y09c-6585/O175DYTK4PMR6P4CZA' },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner_jpkg38.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner-mobile_y6xveu.png',\n },\n [ChainId.SOL]: {\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440199/desktopBanner_fse6ls.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440198/mobileBanner_x9tii9.png',\n cta: '?modal=rakurai',\n },\n // TODO(APTOS): replace placeholder images and \"LEARN MORE\" cta with final Aptos assets.\n // Currently reuses Solana background images.\n [ChainId.APTOS]: {\n title: 'Bonds are now Live on Aptos',\n subtitle: 'Get tokens at a discount on Aptos. Move-powered, sub-second finality.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://aptoslabs.com',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n // TODO(SUI): replace placeholder images and CTA with final Sui assets.\n [ChainId.SUI]: {\n title: 'Bonds are now Live on Sui',\n subtitle: 'Get tokens at a discount on Sui. Move-powered, parallel execution.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://sui.io',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n}\n\nconst ChainBanner = ({ chainId }: { chainId: ChainId }) => {\n const bannerCTA = BANNER_INFO[chainId]?.cta\n\n const handleClickOnBanner = () => {\n if (!bannerCTA) return\n // Next.js exposes the router singleton on window.next.router (Pages Router, dev + prod)\n const nextRouter = typeof window !== 'undefined' && (window as any).__NEXT_DATA__ && (window as any).next?.router\n if (nextRouter) {\n nextRouter.push(bannerCTA)\n return\n }\n // Fallback for non-Next.js environments\n window.history.pushState({}, '', bannerCTA)\n }\n\n return (\n <div\n key={`banner-container-${chainId}`}\n className~~=\"~~banner-container~~\"\n sx={{\n backgroundImage~~: [~~\n `url(${BANNER_INFO~~[~~chainId~~]~~?.backgroundMobile})`,\n `url(${BANNER_INFO~~[~~chainId~~]~~?.backgroundMobile}~~)~~`,\n `url~~(${~~BANNER_INFO~~[~~chainId~~]~~?.backgroundMobile~~}~~)`,\~~n `url(${BANNER_INFO[chainId]?.~~background~~})`,\n `url(${BANNER_INFO[chainId]?.background})`,\n ~~],\n cursor:~~ ~~bannerCTA~~ ~~? 'pointer' : 'unset',\~~n }}\n onClick={handleClickOnBanner}\n >\n <div className=\"banner-title\">{BANNER_INFO[chainId]?.title}</div>\n <div className=\"banner-subtitle\">{BANNER_INFO[chainId]?.subtitle}</div>\n <div className=\"banner-actions\">\n {BANNER_INFO[chainId]?.buttons?.map((button, index) => (\n <Button\n key={`banner-button-${index}`}\n className=\"action-button\"\n onClick={() => window.open(button.cta, '_blank')}\n variant={button.variant \|\| variants.PRIMARY}\n >\n {button.label}\n </Button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ChainBanner\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAqBA,MAAM,WAAW,GAAyC;;AAExD,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,uDAAuD;gBAC5D,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACD,YAAA,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,mEAAmE,EAAE;AACpG,SAAA;AACD,QAAA,UAAU,EAAE,wEAAwE;AACpF,QAAA,gBAAgB,EAAE,+EAA+E;AAClG,KAAA;AACD,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG;AACb,QAAA,UAAU,EAAE,wFAAwF;AACpG,QAAA,gBAAgB,EAAE,uFAAuF;AACzG,QAAA,GAAG,EAAE,gBAAgB;AACtB,KAAA;;;AAGD,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG;AACf,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,QAAQ,EAAE,uEAAuE;AACjF,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,uBAAuB;gBAC5B,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE,qFAAqF;AACjG,QAAA,gBAAgB,EAAE,2FAA2F;AAC9G,KAAA;;AAED,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG;AACb,QAAA,KAAK,EAAE,2BAA2B;AAClC,QAAA,QAAQ,EAAE,oEAAoE;AAC9E,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,gBAAgB;gBACrB,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE,qFAAqF;AACjG,QAAA,gBAAgB,EAAE,2FAA2F;AAC9G,KAAA;CACF;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAwB,KAAI;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,EAAE,GAAG;IAE3C,MAAM,mBAAmB,GAAG,MAAK;AAC/B,QAAA,IAAI,CAAC,SAAS;YAAE;;AAEhB,QAAA,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,aAAa,IAAK,MAAc,CAAC,IAAI,EAAE,MAAM;QACjH,IAAI,UAAU,EAAE;AACd,YAAA,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;YAC1B;QACF;;QAEA,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,SAAS,CAAC;AAC7C,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAEE,SAAS,~~EAAC,kBAAkB,EAC5B,~~EAAE,~~EAAE;AACF,YAAA,eAAe,EAAE;AACf,gBAAA,~~CAAA,~~IAAA~~,~~EAAO~~,~~WAAW~~,~~CAAC~~,~~OAAO~~,~~CAAC~~,~~EAAE~~,~~gBAAgB,~~CAAA,~~CAAA~~,~~CAAG;AAChD~~,~~gBAAA~~,~~CAAA~~,~~IAAA~~,~~EAAO,WAAW,CAAC,OAAO,CAAC,~~EAAE,~~gBAAgB~~,~~CAAA,CAAA,CAAG;AAChD,gBAAA,CAAA,IAAA,EAAO,~~WAAW,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAA,~~CAAA~~,~~CAAG~~;~~AAChD~~,~~gBAAA~~,~~CAAA,IAAA,EAAO,WAAW,CAAC,OAAO,CAAC,~~EAAE,~~UAAU~~,~~CAAA,CAAA,CAAG;AAC1C,gBAAA,CAAA,IAAA,EAAO,~~WAAW,CAAC,OAAO,CAAC,EAAE,UAAU,CAAA,~~CAAA~~,~~CAAG~~;~~AAC3C~~,~~aAAA;YACD~~,~~MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,~~OAAO~~;SACxC~~,~~EACD,OAAO,~~EAAE,mBAAmB,EAAA,QAAA,EAAA,CAE5BC,aAAK,SAAS,EAAC,~~cAAc~~,EAAA,QAAA,~~EAAE~~,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAA,~~CAAO~~,~~EACjEA~~,aAAK,SAAS,EAAC,~~iBAAiB,~~EAAA,QAAA,~~EAAE~~,WAAW,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAA,~~CAAO~~,~~EACvEA~~,aAAK,SAAS,EAAC,~~gBAAgB~~,EAAA,QAAA,~~EAC5B~~,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAChDA,GAAA,CAAC,MAAM,IAEL,SAAS,EAAC,~~eAAe~~,~~EACzB~~,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,EAChD,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAA,QAAA,EAE1C,MAAM,CAAC,KAAK,EAAA,EALR,CAAA,cAAA,EAAiB,KAAK,CAAA,CAAE,CAMtB,CACV,CAAC,EAAA,CACE,CAAA,EAAA,EA3BD,oBAAoB,OAAO,CAAA,CAAE,CA4B9B;AAEV;;;;"}
1	+ {"version":3,"file":"ChainBanner.js","sources":["../../../../../src/views/Bonds/components/ChainBanner/ChainBanner.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { variants } from '../../../../components/uikit-sdk/Button/types'\n\ninterface ButtonInfo {\n label: string\n cta?: string\n variant?: variants\n background?: string\n}\n\ninterface BannerInfo {\n title?: string\n subtitle?: string\n buttons?: ButtonInfo[]\n background: string\n backgroundMobile: string\n cta?: string\n}\n\nconst BANNER_INFO: Partial<Record<ChainId, BannerInfo>> = {\n // MONAD IS BROKEN, TODO fix it!\n [ChainId.MONAD]: {\n title: 'Monad Mainnet Bonds',\n subtitle: 'Launch Coming Soon.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://x.com/ApeBond/status/1995538519536578880?s=20',\n variant: variants.SECONDARY,\n },\n { label: 'Launch Yours', cta: 'https://forms.clickup.com/3080492/f/2y09c-6585/O175DYTK4PMR6P4CZA' },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner_jpkg38.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner-mobile_y6xveu.png',\n },\n [ChainId.SOL]: {\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440199/desktopBanner_fse6ls.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440198/mobileBanner_x9tii9.png',\n cta: '?modal=rakurai',\n },\n // TODO(APTOS): replace placeholder images and \"LEARN MORE\" cta with final Aptos assets.\n // Currently reuses Solana background images.\n [ChainId.APTOS]: {\n title: 'Bonds are now Live on Aptos',\n subtitle: 'Get tokens at a discount on Aptos. Move-powered, sub-second finality.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://aptoslabs.com',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n // TODO(SUI): replace placeholder images and CTA with final Sui assets.\n [ChainId.SUI]: {\n title: 'Bonds are now Live on Sui',\n subtitle: 'Get tokens at a discount on Sui. Move-powered, parallel execution.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://sui.io',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n}\n\nconst ChainBanner = ({ chainId }: { chainId: ChainId }) => {\n const bannerCTA = BANNER_INFO[chainId]?.cta\n\n const handleClickOnBanner = () => {\n if (!bannerCTA) return\n // Next.js exposes the router singleton on window.next.router (Pages Router, dev + prod)\n const nextRouter = typeof window !== 'undefined' && (window as any).__NEXT_DATA__ && (window as any).next?.router\n if (nextRouter) {\n nextRouter.push(bannerCTA)\n return\n }\n // Fallback for non-Next.js environments\n window.history.pushState({}, '', bannerCTA)\n }\n\n return (\n <div\n key={`banner-container-${chainId}`}\n className={`banner-container ape:w-full ape:min-h-[160px] ape:rounded-[8px] ape:flex ape:flex-col ape:items-center ape:justify-center ape:mb-[10px] ape:gap-[5px] ape:bg-cover ape:bg-no-repeat ape:p-[15px] ape:min-[800px]:max-[1000px]:bg-bottom ape:bg-[image:var(--banner-bg-mobile)] ape:lg:bg-[image:var(--banner-bg-desktop)] ${bannerCTA ? 'ape:cursor-pointer' : 'ape:cursor-[unset]'}`}\n style={\n {\n '--banner-bg-mobile': `url('${BANNER_INFO[chainId]?.backgroundMobile}')`,\n '--banner-bg-desktop': `url('${BANNER_INFO[chainId]?.background}')`,\n } as React.CSSProperties\n }\n onClick={handleClickOnBanner}\n >\n <div className=\"banner-title ape:font-bold ape:text-[25.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:mt-[10px] ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-1/2 ape:max-sm:text-[18px] ape:max-sm:leading-[21px]\">\n {BANNER_INFO[chainId]?.title}\n </div>\n <div className=\"banner-subtitle ape:font-normal ape:text-[14.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-[55%] ape:max-sm:text-[12px] ape:max-sm:leading-[14px] ape:max-sm:mb-[10px]\">\n {BANNER_INFO[chainId]?.subtitle}\n </div>\n <div className=\"banner-actions ape:flex ape:items-center ape:justify-center ape:gap-[10px]\">\n {BANNER_INFO[chainId]?.buttons?.map((button, index) => (\n <Button\n key={`banner-button-${index}`}\n className=\"action-button ape:h-[35px] ape:text-[12px]! ape:font-bold\"\n onClick={() => window.open(button.cta, '_blank')}\n variant={button.variant \|\| variants.PRIMARY}\n >\n {button.label}\n </Button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ChainBanner\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/CheckURL/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 /** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
-declare const CheckUrl: () => React.JSX.Element;
+declare const CheckUrl: () => import("react/jsx-runtime").JSX.Element;
 export default CheckUrl;

package/dist/views/Bonds/components/CheckURL/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import useModal from '../../../../hooks/useModal.js';
 import ModalHandler from '../BondRows/ModalHandler.js';
 import track from '../../../../utils/track.js';
-import ModalHandlerPreTGE from '../BondRows/ModalHandlerPreTGE.js';
+import { getAdapterForChain } from '../../../../adapters/registry.js';
 /** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
 const CheckUrl = () => {
@@ -16,7 +16,9 @@ const CheckUrl = () => {
     const bondChain = urlParams?.get('bondChain') ?? '';
     const c = Boolean(urlParams?.get('c'));
     const [onPresentBuyBillsModal] = useModal(jsx(ModalHandler, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }), true, true, `buyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
-    const [onPresentPreTGEBondModal] = useModal(jsx(ModalHandlerPreTGE, { bondAddress: bondAddress, bondChain: parseInt(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 = bondChain ? getAdapterForChain(parseInt(bondChain))?.preTGE : undefined;
+    const [onPresentPreTGEBondModal] = useModal(preTGE ? jsx(preTGE.ModalHandler, { bondAddress: bondAddress, bondChain: parseInt(bondChain) }) : null, true, true, `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`);
     useEffect(() => {
         // This useEffect triggers only once bonds data is loaded and if there is bond data on the URL params the buy modal would open.
         if (!hasRun.current && bonds && bonds?.length > 0) {
@@ -25,7 +27,8 @@ const CheckUrl = () => {
                 Number(bondChain) === bond.chainId);
             if (bond) {
                 if (bond.billType === 'fcfs') {
-                    onPresentPreTGEBondModal();
+                    if (preTGE)
+                        onPresentPreTGEBondModal();
                 }
                 else {
                     onPresentBuyBillsModal();
@@ -50,7 +53,8 @@ const CheckUrl = () => {
                 Number(bondChain) === bond.chainId);
             if (bond) {
                 if (bond.billType === 'fcfs') {
-                    onPresentPreTGEBondModal();
+                    if (preTGE)
+                        onPresentPreTGEBondModal();
                 }
                 else {
                     onPresentBuyBillsModal();

package/dist/views/Bonds/components/CheckURL/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/CheckURL/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from '../BondRows/ModalHandler'\nimport track from '../../../../utils/track'\nimport ~~ModalHandlerPreTGE~~ from '~~../BondRows~~/~~ModalHandlerPreTGE~~'\n\n/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL /\n\nconst CheckUrl = () => {\n const hasRun = useRef(false)\n const { data: bonds } = useBondsData()\n\n const asPath = typeof window !== 'undefined' ? window.location.search : ''\n const urlParams =\n typeof window !== 'undefined' ? new URLSearchParams(new URL(asPath, window.location.origin).search) : undefined\n\n const bondAddress = urlParams?.get('bondAddress') ?? ''\n const bondChain = urlParams?.get('bondChain') ?? ''\n const c = Boolean(urlParams?.get('c'))\n\n const [onPresentBuyBillsModal] = useModal(\n <ModalHandler bondAddress={bondAddress} bondChain={parseInt(bondChain)} />,\n true,\n true,\n `buyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n const [onPresentPreTGEBondModal] = useModal(\n <~~ModalHandlerPreTGE~~ bondAddress={bondAddress} bondChain={parseInt(bondChain)} ~~/>,\~~n true,\n true,\n `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n\n useEffect(() => {\n // This useEffect triggers only once bonds data is loaded and if there is bond data on the URL params the buy modal would open.\n if (!hasRun.current && bonds && bonds?.length > 0) {\n hasRun.current = true\n const bond = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond?.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&\n Number(bondChain) === bond.chainId,\n )\n if (bond) {\n if (bond.billType === 'fcfs') {\n onPresentPreTGEBondModal()\n } else {\n onPresentBuyBillsModal()\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'customURL',\n bond: bond.earnToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n }\n / eslint-disable react-hooks/exhaustive-deps /\n }, [bonds?.length])\n\n useEffect(() => {\n // This useEffect triggers only if the \"c\" flag is passed on the URL. The \"c\" flag stands for Custom behavior on opening the buy modal\n if (c && bonds && bonds?.length > 0) {\n const bond = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond?.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&\n Number(bondChain) === bond.chainId,\n )\n if (bond) {\n if (bond.billType === 'fcfs') {\n onPresentPreTGEBondModal()\n } else {\n onPresentBuyBillsModal()\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'customURL',\n bond: bond.earnToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n }\n / eslint-disable react-hooks/exhaustive-deps */\n }, [c])\n\n return <></>\n}\n\nexport default CheckUrl\n"],"names":["_jsx"],"mappings":";;;;;;;;AAOA;AAEA,MAAM,QAAQ,GAAG,MAAK;AACpB,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;IAC5B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE;AAEtC,IAAA,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE;AAC1E,IAAA,MAAM,SAAS,GACb,OAAO,MAAM,KAAK,WAAW,GAAG,IAAI,eAAe,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS;IAEjH,MAAM,WAAW,GAAG,SAAS,EAAE,GAAG,CAAC,aAAa,CAAC,IAAI,EAAE;IACvD,MAAM,SAAS,GAAG,SAAS,EAAE,GAAG,CAAC,WAAW,CAAC,IAAI,EAAE;IACnD,MAAM,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtC,IAAA,MAAM,CAAC,sBAAsB,CAAC,GAAG,QAAQ,CACvCA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAA,CAAI,EAC1E,IAAI,EACJ,IAAI,EACJ,CAAA,aAAA,EAAgB,WAAW,CAAC,WAAW,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,CAC1D~~;AACD~~,IAAA,MAAM,CAAC,wBAAwB,CAAC,GAAG,QAAQ,~~CACzCA~~,~~GAAA~~,CAAC,~~kBAAkB~~,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,~~EAAA~~,~~CAAI~~,~~EAChF~~,IAAI,EACJ,IAAI,EACJ,CAAA,mBAAA,EAAsB,WAAW,CAAC,WAAW,EAAE,~~CAAA~~,~~CAAA,EAAI,~~SAAS,CAAA,CAAA,CAAG,CAChE;IAED,SAAS,CAAC,MAAK;;AAEb,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK,IAAI,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE;AACjD,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;YACrB,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CACtB,CAAC,IAAI,KACH,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,WAAW,EAAE;gBACpF,MAAM,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,OAAO,CACrC;YACD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE;AAC5B,oBAAA,wBAAwB,EAAE;~~gBAC5B~~;qBAAO;AACL,oBAAA,sBAAsB,EAAE;gBAC1B;AACA,gBAAA,KAAK,CAAC;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,KAAK,EAAE,SAAS;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,GAAG,EAAE,WAAW;AAChB,wBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC3B,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA,CAAC;YACJ;QACF;;AAEF,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAEnB,SAAS,CAAC,MAAK;;QAEb,IAAI,CAAC,IAAI,KAAK,IAAI,KAAK,EAAE,MAAM,GAAG,CAAC,EAAE;YACnC,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CACtB,CAAC,IAAI,KACH,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,WAAW,EAAE;gBACpF,MAAM,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,OAAO,CACrC;YACD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE;AAC5B,oBAAA,wBAAwB,EAAE;~~gBAC5B~~;qBAAO;AACL,oBAAA,sBAAsB,EAAE;gBAC1B;AACA,gBAAA,KAAK,CAAC;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,KAAK,EAAE,SAAS;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,GAAG,EAAE,WAAW;AAChB,wBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC3B,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA,CAAC;YACJ;QACF;;AAEF,IAAA,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEP,IAAA,OAAOA,iBAAK;AACd;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/CheckURL/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from '../BondRows/ModalHandler'\nimport track from '../../../../utils/track'\nimport { getAdapterForChain } from '../../../../adapters/registry'\n\n/** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL /\n\nconst CheckUrl = () => {\n const hasRun = useRef(false)\n const { data: bonds } = useBondsData()\n\n const asPath = typeof window !== 'undefined' ? window.location.search : ''\n const urlParams =\n typeof window !== 'undefined' ? new URLSearchParams(new URL(asPath, window.location.origin).search) : undefined\n\n const bondAddress = urlParams?.get('bondAddress') ?? ''\n const bondChain = urlParams?.get('bondChain') ?? ''\n const c = Boolean(urlParams?.get('c'))\n\n const [onPresentBuyBillsModal] = useModal(\n <ModalHandler bondAddress={bondAddress} bondChain={parseInt(bondChain)} />,\n true,\n true,\n `buyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n // PreTGE / launch bonds ('fcfs') have their own buy flow, provided by the chain's adapter (EVM only today)\n const preTGE = bondChain ? getAdapterForChain(parseInt(bondChain))?.preTGE : undefined\n const [onPresentPreTGEBondModal] = useModal(\n preTGE ? <preTGE.ModalHandler bondAddress={bondAddress} bondChain={parseInt(bondChain)} /> : null,\n true,\n true,\n `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n\n useEffect(() => {\n // This useEffect triggers only once bonds data is loaded and if there is bond data on the URL params the buy modal would open.\n if (!hasRun.current && bonds && bonds?.length > 0) {\n hasRun.current = true\n const bond = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond?.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&\n Number(bondChain) === bond.chainId,\n )\n if (bond) {\n if (bond.billType === 'fcfs') {\n if (preTGE) onPresentPreTGEBondModal()\n } else {\n onPresentBuyBillsModal()\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'customURL',\n bond: bond.earnToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n }\n / eslint-disable react-hooks/exhaustive-deps /\n }, [bonds?.length])\n\n useEffect(() => {\n // This useEffect triggers only if the \"c\" flag is passed on the URL. The \"c\" flag stands for Custom behavior on opening the buy modal\n if (c && bonds && bonds?.length > 0) {\n const bond = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond?.chainId]?.toLowerCase() === bondAddress?.toLowerCase() &&\n Number(bondChain) === bond.chainId,\n )\n if (bond) {\n if (bond.billType === 'fcfs') {\n if (preTGE) onPresentPreTGEBondModal()\n } else {\n onPresentBuyBillsModal()\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'customURL',\n bond: bond.earnToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n }\n / eslint-disable react-hooks/exhaustive-deps */\n }, [c])\n\n return <></>\n}\n\nexport default CheckUrl\n"],"names":["_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/HotBondCards/HotBondCard.d.ts CHANGED Viewed

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

package/dist/views/Bonds/components/HotBondCards/HotBondCard.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import useModal from '../../../../hooks/useModal.js';
 import BuyBondModal from '../../../BuyBond/BuyBondModal.js';
 import track from '../../../../utils/track.js';
@@ -25,23 +24,7 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx(Flex, { sx: {
-            background: 'white2',
-            width: '100%',
-            borderRadius: 'normal',
-            mt: '10px',
-            '&:hover': {
-                background: 'white3',
-            },
-        }, children: jsx(Flex, { sx: styles.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: {
-                    width: '100%',
-                    position: 'relative',
-                    gap: '10px',
-                }, children: [jsx(Flex, { sx: { position: 'absolute', top: 0, left: 0, borderRadius: '10px 0px 10px 0px', overflow: 'hidden' }, children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsx(Flex, { sx: {
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: '100px',
-                        }, children: jsx(TokenImage, { symbol: bond.earnToken.symbol, size: 80 }) }), jsxs(Flex, { sx: { flexDirection: 'column', justifyContent: 'center', gap: '10px' }, children: [jsxs(Flex, { sx: { fontWeight: 700, fontSize: ['14px'] }, children: ["$", bond.earnToken.symbol] }), jsxs(Flex, { sx: { gap: ['20px', '20px', '20px', '20px', '10px', '30px'] }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: { fontWeight: 700, fontSize: ['16px'], height: '30px', alignItems: 'center' }, children: [getTimePeriods(bond?.vestingTerm, true)?.days, " D"] }), jsx(Flex, { sx: { fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }, children: "Terms" })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', minWidth: '148px' }, children: [jsx(Flex, { sx: { fontWeight: 700, fontSize: ['16px'], height: '30px' }, children: jsx(BonusComponent, { trueBondPrices: bond.trueBondPrices, hideTooltip: true }) }), jsx(Flex, { sx: { fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }, children: "Bonus" })] })] })] })] }) }) }));
+    return (jsx(Flex, { className: "ape:bg-white2 ape:w-full ape:rounded-normal ape:mt-[10px] ape:hover:bg-white3", children: jsx(Flex, { className: "hot-bond-card ape:w-full ape:rounded-normal ape:cursor-pointer ape:h-[125px] ape:bg-cover", style: { backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)' }, onClick: handleOpenModal, children: jsxs(Flex, { className: "ape:w-full ape:relative ape:gap-[10px]", children: [jsx(Flex, { className: "ape:absolute ape:top-0 ape:left-0 ape:rounded-[10px_0px_10px_0px] ape:overflow-hidden", children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsx(Flex, { className: "ape:items-center ape:justify-center ape:w-[100px]", children: jsx(TokenImage, { symbol: bond.earnToken.symbol, size: 80 }) }), jsxs(Flex, { className: "ape:flex-col ape:justify-center ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:font-bold ape:text-[14px]", children: ["$", bond.earnToken.symbol] }), jsxs(Flex, { className: "ape:gap-[20px] ape:lg:gap-[10px] ape:xl:gap-[30px]", children: [jsxs(Flex, { className: "ape:flex-col ape:items-center", children: [jsxs(Flex, { className: "ape:font-bold ape:text-[16px] ape:h-[30px] ape:items-center", children: [getTimePeriods(bond?.vestingTerm, true)?.days, " D"] }), jsx(Flex, { className: "ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]", children: "Terms" })] }), jsxs(Flex, { className: "ape:flex-col ape:items-center ape:min-w-[148px]", children: [jsx(Flex, { className: "ape:font-bold ape:text-[16px] ape:h-[30px]", children: jsx(BonusComponent, { trueBondPrices: bond.trueBondPrices, hideTooltip: true }) }), jsx(Flex, { className: "ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]", children: "Bonus" })] })] })] })] }) }) }));
 };
 export { HotBondCard as default };