@ape.swap/bonds-sdk 6.2.16 → 6.2.18

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

@@ -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":"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"}
+{"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":";;;;;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,EAAE,CAAA,0TAAA,EAA6T,SAAS,GAAG,oBAAoB,GAAG,oBAAoB,CAAA,CAAE,EACjY,KAAK,EACH;YACE,oBAAoB,EAAE,QAAQ,WAAW,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAA,EAAA,CAAI;YACxE,qBAAqB,EAAE,QAAQ,WAAW,CAAC,OAAO,CAAC,EAAE,UAAU,CAAA,EAAA,CAAI;SAC7C,EAE1B,OAAO,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAE5BC,aAAK,SAAS,EAAC,iVAAiV,EAAA,QAAA,EAC7V,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAA,CACxB,EACNA,aAAK,SAAS,EAAC,+VAA+V,EAAA,QAAA,EAC3W,WAAW,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAA,CAC3B,EACNA,aAAK,SAAS,EAAC,4EAA4E,EAAA,QAAA,EACxF,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAChDA,GAAA,CAAC,MAAM,IAEL,SAAS,EAAC,2DAA2D,EACrE,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;;;;"}

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

@@ -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

@@ -1,4 +1,4 @@
-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';

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

@@ -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

@@ -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 };

package/dist/views/Bonds/components/HotBondCards/HotBondCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HotBondCard.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/HotBondCard.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport useModal from '../../../../hooks/useModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport track from '../../../../utils/track'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_ICONS } from '../../../../config/constants/chains'\nimport Question from '../../../../components/uikit-sdk/Svg/Icons/Question'\nimport BonusComponent from '../BonusComponents/BonusComponent'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\n\nconst HotBondCard = ({ bond }: { bond: BondsData }) => {\n  const ChainIcon = NETWORK_ICONS[bond.chainId] ?? Question\n  // Modal\n  const [openBuyModal] = useModal(\n    <BuyBondModal bondAddress={bond?.contractAddress?.[bond?.chainId]} bondChain={bond.chainId} />,\n    true,\n    true,\n    `buyBondModal-${bond?.contractAddress?.[bond?.chainId]}-${bond.chainId}`,\n  )\n\n  const handleOpenModal = () => {\n    openBuyModal()\n    track({\n      event: 'hotClick',\n      chain: bond.chainId,\n      data: {\n        cat: 'hotClick',\n        bond: bond.earnToken.symbol,\n      },\n    })\n  }\n\n  return (\n    <Flex\n      sx={{\n        background: 'white2',\n        width: '100%',\n        borderRadius: 'normal',\n        mt: '10px',\n        '&:hover': {\n          background: 'white3',\n        },\n      }}\n    >\n      <Flex sx={styles.desktopCard} className=\"hot-bond-card\" onClick={handleOpenModal}>\n        <Flex\n          sx={{\n            width: '100%',\n            position: 'relative',\n            gap: '10px',\n          }}\n        >\n          <Flex sx={{ position: 'absolute', top: 0, left: 0, borderRadius: '10px 0px 10px 0px', overflow: 'hidden' }}>\n            <ChainIcon width={20} height={20} />\n          </Flex>\n          <Flex\n            sx={{\n              alignItems: 'center',\n              justifyContent: 'center',\n              width: '100px',\n            }}\n          >\n            <TokenImage symbol={bond.earnToken.symbol} size={80} />\n          </Flex>\n          <Flex sx={{ flexDirection: 'column', justifyContent: 'center', gap: '10px' }}>\n            <Flex sx={{ fontWeight: 700, fontSize: ['14px'] }}>${bond.earnToken.symbol}</Flex>\n            <Flex sx={{ gap: ['20px', '20px', '20px', '20px', '10px', '30px'] }}>\n              <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>\n                <Flex sx={{ fontWeight: 700, fontSize: ['16px'], height: '30px', alignItems: 'center' }}>\n                  {getTimePeriods(bond?.vestingTerm, true)?.days} D\n                </Flex>\n                <Flex sx={{ fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }}>Terms</Flex>\n              </Flex>\n              <Flex sx={{ flexDirection: 'column', alignItems: 'center', minWidth: '148px' }}>\n                <Flex sx={{ fontWeight: 700, fontSize: ['16px'], height: '30px' }}>\n                  <BonusComponent trueBondPrices={bond.trueBondPrices} hideTooltip />\n                </Flex>\n                <Flex sx={{ fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }}>Bonus</Flex>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default HotBondCard\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"HotBondCard.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/HotBondCard.tsx"],"sourcesContent":["import React from 'react'\nimport { BondsData } from '../../../../types/bonds'\nimport useModal from '../../../../hooks/useModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport track from '../../../../utils/track'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_ICONS } from '../../../../config/constants/chains'\nimport Question from '../../../../components/uikit-sdk/Svg/Icons/Question'\nimport BonusComponent from '../BonusComponents/BonusComponent'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\n\nconst HotBondCard = ({ bond }: { bond: BondsData }) => {\n  const ChainIcon = NETWORK_ICONS[bond.chainId] ?? Question\n  // Modal\n  const [openBuyModal] = useModal(\n    <BuyBondModal bondAddress={bond?.contractAddress?.[bond?.chainId]} bondChain={bond.chainId} />,\n    true,\n    true,\n    `buyBondModal-${bond?.contractAddress?.[bond?.chainId]}-${bond.chainId}`,\n  )\n\n  const handleOpenModal = () => {\n    openBuyModal()\n    track({\n      event: 'hotClick',\n      chain: bond.chainId,\n      data: {\n        cat: 'hotClick',\n        bond: bond.earnToken.symbol,\n      },\n    })\n  }\n\n  return (\n    <Flex className=\"ape:bg-white2 ape:w-full ape:rounded-normal ape:mt-[10px] ape:hover:bg-white3\">\n      <Flex\n        className=\"hot-bond-card ape:w-full ape:rounded-normal ape:cursor-pointer ape:h-[125px] ape:bg-cover\"\n        style={{ backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)' }}\n        onClick={handleOpenModal}\n      >\n        <Flex className=\"ape:w-full ape:relative ape:gap-[10px]\">\n          <Flex className=\"ape:absolute ape:top-0 ape:left-0 ape:rounded-[10px_0px_10px_0px] ape:overflow-hidden\">\n            <ChainIcon width={20} height={20} />\n          </Flex>\n          <Flex className=\"ape:items-center ape:justify-center ape:w-[100px]\">\n            <TokenImage symbol={bond.earnToken.symbol} size={80} />\n          </Flex>\n          <Flex className=\"ape:flex-col ape:justify-center ape:gap-[10px]\">\n            <Flex className=\"ape:font-bold ape:text-[14px]\">${bond.earnToken.symbol}</Flex>\n            <Flex className=\"ape:gap-[20px] ape:lg:gap-[10px] ape:xl:gap-[30px]\">\n              <Flex className=\"ape:flex-col ape:items-center\">\n                <Flex className=\"ape:font-bold ape:text-[16px] ape:h-[30px] ape:items-center\">\n                  {getTimePeriods(bond?.vestingTerm, true)?.days} D\n                </Flex>\n                <Flex className=\"ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]\">\n                  Terms\n                </Flex>\n              </Flex>\n              <Flex className=\"ape:flex-col ape:items-center ape:min-w-[148px]\">\n                <Flex className=\"ape:font-bold ape:text-[16px] ape:h-[30px]\">\n                  <BonusComponent trueBondPrices={bond.trueBondPrices} hideTooltip />\n                </Flex>\n                <Flex className=\"ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]\">\n                  Bonus\n                </Flex>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default HotBondCard\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/views/Bonds/components/HotBondCards/index.d.ts

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

package/dist/views/Bonds/components/HotBondCards/index.js

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import HotBondCard from './HotBondCard.js';
 import useHotBonds from '../../../../state/hotBonds/useHotBonds.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
@@ -7,19 +6,9 @@ import Carousel from '../../../../components/Carousel/index.js';
 
 const HotBondCards = () => {
     const { data: hotBonds } = useHotBonds();
-    return (jsxs(Flex, { sx: styles.mainComponent, children: [jsx(Flex, { sx: styles.hotBondTitle, children: "HOT BONDS" }), jsx(Flex, { sx: styles.desktopCards, children: hotBonds?.map((bond, index) => {
+    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:overflow-hidden ape:lg:overflow-visible ape:pt-[10px] ape:pb-[10px] ape:lg:pb-[20px]", children: [jsx(Flex, { className: "ape:pt-[15px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase", children: "HOT BONDS" }), jsx(Flex, { className: "ape:w-full ape:gap-[15px] ape:justify-between ape:flex-col ape:lg:flex-row ape:hidden ape:min-[1000px]:flex", children: hotBonds?.map((bond, index) => {
                     return jsx(HotBondCard, { bond: bond }, `${bond?.contractAddress?.[bond?.chainId]}-${index}`);
-                }) }), jsx(Flex, { sx: {
-                    flexDirection: 'column',
-                    width: '100%',
-                    alignItems: 'center',
-                    mb: '15px',
-                    overflow: 'hidden',
-                    display: 'flex',
-                    '@media screen and (min-width: 1000px)': {
-                        display: 'none',
-                    },
-                }, children: jsx(Carousel, { slides: hotBonds?.map((bond, index) => (jsx(HotBondCard, { bond: bond }, `${bond?.contractAddress?.[bond?.chainId]}-${index}`))) ?? [] }) })] }));
+                }) }), jsx(Flex, { className: "ape:flex-col ape:w-full ape:items-center ape:mb-[15px] ape:overflow-hidden ape:flex ape:min-[1000px]:hidden", children: jsx(Carousel, { slides: hotBonds?.map((bond, index) => (jsx(HotBondCard, { bond: bond }, `${bond?.contractAddress?.[bond?.chainId]}-${index}`))) ?? [] }) })] }));
 };
 
 export { HotBondCards as default };

package/dist/views/Bonds/components/HotBondCards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/index.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport HotBondCard from './HotBondCard'\nimport useHotBonds from '../../../../state/hotBonds/useHotBonds'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Carousel from '../../../../components/Carousel'\n\nconst HotBondCards = () => {\n  const { data: hotBonds } = useHotBonds()\n\n  return (\n    <Flex sx={styles.mainComponent}>\n      <Flex sx={styles.hotBondTitle}>HOT BONDS</Flex>\n      {/* DESKTOP CARDS */}\n      <Flex sx={styles.desktopCards}>\n        {hotBonds?.map((bond, index) => {\n          return <HotBondCard bond={bond} key={`${bond?.contractAddress?.[bond?.chainId]}-${index}`} />\n        })}\n      </Flex>\n      {/* MOBILE CARDS WITH CAROUSEL */}\n      <Flex\n        sx={{\n          flexDirection: 'column',\n          width: '100%',\n          alignItems: 'center',\n          mb: '15px',\n          overflow: 'hidden',\n          display: 'flex',\n          '@media screen and (min-width: 1000px)': {\n            display: 'none',\n          },\n        }}\n      >\n        <Carousel\n          slides={\n            hotBonds?.map((bond, index) => (\n              <HotBondCard bond={bond} key={`${bond?.contractAddress?.[bond?.chainId]}-${index}`} />\n            )) ?? []\n          }\n        />\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default HotBondCards\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAOA,MAAM,YAAY,GAAG,MAAK;IACxB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE;AAExC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,aAAa,EAAA,QAAA,EAAA,CAC5BC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAAA,WAAA,EAAA,CAAkB,EAE/CA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,YAAY,EAAA,QAAA,EAC1B,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;oBAC7B,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAO,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI;AAC/F,gBAAA,CAAC,CAAC,EAAA,CACG,EAEPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,uCAAuC,EAAE;AACvC,wBAAA,OAAO,EAAE,MAAM;AAChB,qBAAA;iBACF,EAAA,QAAA,EAEDA,GAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EACJ,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACxBA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,IAAO,CAAA,EAAG,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI,CACvF,CAAC,IAAI,EAAE,EAAA,CAEV,EAAA,CACG,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/index.tsx"],"sourcesContent":["import React from 'react'\nimport HotBondCard from './HotBondCard'\nimport useHotBonds from '../../../../state/hotBonds/useHotBonds'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Carousel from '../../../../components/Carousel'\n\nconst HotBondCards = () => {\n  const { data: hotBonds } = useHotBonds()\n\n  return (\n    <Flex className=\"ape:w-full ape:flex-col ape:overflow-hidden ape:lg:overflow-visible ape:pt-[10px] ape:pb-[10px] ape:lg:pb-[20px]\">\n      <Flex className=\"ape:pt-[15px] ape:text-text-disabled-button ape:text-[13px] ape:font-medium ape:cursor-pointer ape:uppercase\">\n        HOT BONDS\n      </Flex>\n      {/* DESKTOP CARDS */}\n      <Flex className=\"ape:w-full ape:gap-[15px] ape:justify-between ape:flex-col ape:lg:flex-row ape:hidden ape:min-[1000px]:flex\">\n        {hotBonds?.map((bond, index) => {\n          return <HotBondCard bond={bond} key={`${bond?.contractAddress?.[bond?.chainId]}-${index}`} />\n        })}\n      </Flex>\n      {/* MOBILE CARDS WITH CAROUSEL */}\n      <Flex className=\"ape:flex-col ape:w-full ape:items-center ape:mb-[15px] ape:overflow-hidden ape:flex ape:min-[1000px]:hidden\">\n        <Carousel\n          slides={\n            hotBonds?.map((bond, index) => (\n              <HotBondCard bond={bond} key={`${bond?.contractAddress?.[bond?.chainId]}-${index}`} />\n            )) ?? []\n          }\n        />\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default HotBondCards\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,YAAY,GAAG,MAAK;IACxB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE;AAExC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kHAAkH,EAAA,QAAA,EAAA,CAChIC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8GAA8G,EAAA,QAAA,EAAA,WAAA,EAAA,CAEvH,EAEPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6GAA6G,YAC1H,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;oBAC7B,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAO,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI;gBAC/F,CAAC,CAAC,EAAA,CACG,EAEPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6GAA6G,EAAA,QAAA,EAC3HA,GAAA,CAAC,QAAQ,EAAA,EACP,MAAM,EACJ,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACxBA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,EAAO,CAAA,EAAG,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI,CACvF,CAAC,IAAI,EAAE,EAAA,CAEV,EAAA,CACG,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/views/Bonds/components/LoadingSkeleton/LoadingSkeleton.d.ts

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

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

@@ -1,24 +1,9 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 
 const LoadingSkeleton = () => {
-    return (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '35px' }, children: [Array.from({ length: 5 }).map((_, index) => (jsx(Skeleton, { animation: "waves", sx: {
-                    width: '100%',
-                    height: '70px',
-                    borderRadius: 'normal',
-                    mb: '5px',
-                } }, `row-shadow-${index}`))), jsx(Flex, { sx: { width: '100%', gap: '15px', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx(Skeleton, { animation: "waves", sx: {
-                        width: '100%',
-                        height: '125px',
-                        borderRadius: 'normal',
-                        mb: '5px',
-                    } }, `hot-card-shadow${index}`))) }), jsx(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '25px' }, children: Array.from({ length: 3 }).map((_, index) => (jsx(Skeleton, { animation: "waves", sx: {
-                        width: '100%',
-                        height: '70px',
-                        borderRadius: 'normal',
-                        mb: '5px',
-                    } }, `second-row-shadow-${index}`))) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[35px]", children: [Array.from({ length: 5 }).map((_, index) => (jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } }, `row-shadow-${index}`))), jsx(Flex, { className: "ape:w-full ape:gap-[15px] ape:mt-[25px]", children: Array.from({ length: 3 }).map((_, index) => (jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '125px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } }, `hot-card-shadow${index}`))) }), jsx(Flex, { className: "ape:w-full ape:flex-col ape:mt-[25px]", children: Array.from({ length: 3 }).map((_, index) => (jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } }, `second-row-shadow-${index}`))) })] }));
 };
 
 export { LoadingSkeleton as default };

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSkeleton.js","sources":["../../../../../src/views/Bonds/components/LoadingSkeleton/LoadingSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\n\nconst LoadingSkeleton = () => {\n  return (\n    <Flex sx={{ width: '100%', flexDirection: 'column', mt: '35px' }}>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <Skeleton\n          key={`row-shadow-${index}`}\n          animation=\"waves\"\n          sx={{\n            width: '100%',\n            height: '70px',\n            borderRadius: 'normal',\n            mb: '5px',\n          }}\n        />\n      ))}\n      <Flex sx={{ width: '100%', gap: '15px', mt: '25px' }}>\n        {Array.from({ length: 3 }).map((_, index) => (\n          <Skeleton\n            key={`hot-card-shadow${index}`}\n            animation=\"waves\"\n            sx={{\n              width: '100%',\n              height: '125px',\n              borderRadius: 'normal',\n              mb: '5px',\n            }}\n          />\n        ))}\n      </Flex>\n      <Flex sx={{ width: '100%', flexDirection: 'column', mt: '25px' }}>\n        {Array.from({ length: 3 }).map((_, index) => (\n          <Skeleton\n            key={`second-row-shadow-${index}`}\n            animation=\"waves\"\n            sx={{\n              width: '100%',\n              height: '70px',\n              borderRadius: 'normal',\n              mb: '5px',\n            }}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default LoadingSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,eAAe,GAAG,MAAK;IAC3B,QACEA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC7D,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCC,GAAA,CAAC,QAAQ,EAAA,EAEP,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,EAAE,EAAE,KAAK;iBACV,EAAA,EAPI,CAAA,WAAA,EAAc,KAAK,CAAA,CAAE,CAQ1B,CACH,CAAC,EACFA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACjD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCA,GAAA,CAAC,QAAQ,EAAA,EAEP,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,OAAO;AACf,wBAAA,YAAY,EAAE,QAAQ;AACtB,wBAAA,EAAE,EAAE,KAAK;qBACV,EAAA,EAPI,CAAA,eAAA,EAAkB,KAAK,CAAA,CAAE,CAQ9B,CACH,CAAC,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAC7D,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCA,GAAA,CAAC,QAAQ,EAAA,EAEP,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,YAAY,EAAE,QAAQ;AACtB,wBAAA,EAAE,EAAE,KAAK;qBACV,EAAA,EAPI,CAAA,kBAAA,EAAqB,KAAK,CAAA,CAAE,CAQjC,CACH,CAAC,EAAA,CACG,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"LoadingSkeleton.js","sources":["../../../../../src/views/Bonds/components/LoadingSkeleton/LoadingSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\n\nconst LoadingSkeleton = () => {\n  return (\n    <Flex className=\"ape:w-full ape:flex-col ape:mt-[35px]\">\n      {Array.from({ length: 5 }).map((_, index) => (\n        <Skeleton\n          key={`row-shadow-${index}`}\n          animation=\"waves\"\n          style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }}\n        />\n      ))}\n      <Flex className=\"ape:w-full ape:gap-[15px] ape:mt-[25px]\">\n        {Array.from({ length: 3 }).map((_, index) => (\n          <Skeleton\n            key={`hot-card-shadow${index}`}\n            animation=\"waves\"\n            style={{ width: '100%', height: '125px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }}\n          />\n        ))}\n      </Flex>\n      <Flex className=\"ape:w-full ape:flex-col ape:mt-[25px]\">\n        {Array.from({ length: 3 }).map((_, index) => (\n          <Skeleton\n            key={`second-row-shadow-${index}`}\n            animation=\"waves\"\n            style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }}\n          />\n        ))}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default LoadingSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,eAAe,GAAG,MAAK;IAC3B,QACEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uCAAuC,aACpD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCC,GAAA,CAAC,QAAQ,IAEP,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,IAFlG,CAAA,WAAA,EAAc,KAAK,EAAE,CAG1B,CACH,CAAC,EACFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACtD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCA,GAAA,CAAC,QAAQ,EAAA,EAEP,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,EAFnG,CAAA,eAAA,EAAkB,KAAK,CAAA,CAAE,CAG9B,CACH,CAAC,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACpD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtCA,GAAA,CAAC,QAAQ,EAAA,EAEP,SAAS,EAAC,OAAO,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,EAFlG,CAAA,kBAAA,EAAqB,KAAK,CAAA,CAAE,CAGjC,CACH,CAAC,EAAA,CACG,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/views/Bonds/components/RecommendationCards/SmallRecommendationCard.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 interface SmallCardBond {
     vestingTerm: number;
@@ -9,5 +8,5 @@ interface SmallCardBond {
 }
 declare const SmallRecommendationCard: ({ recommendation }: {
     recommendation: SmallCardBond;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SmallRecommendationCard;

package/dist/views/Bonds/components/RecommendationCards/SmallRecommendationCard.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTimePeriods } from '../../../../utils/getTimePeriods.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
-import { styles } from './styles.js';
 
+const subTitleClasses = 'ape:text-text-disabled-button ape:text-[12px] ape:font-normal ape:leading-4';
 const SmallRecommendationCard = ({ recommendation }) => {
     const vestingTime = getTimePeriods(recommendation.vestingTerm, true);
-    return (jsxs(Flex, { sx: styles.smallCardContainer, onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { sx: { mx: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { fontSize: '14px', px: '6px' }, children: recommendation.payoutTokenName }), jsxs(Flex, { sx: styles.subTitle, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(Flex, { sx: styles.subTitle, children: "Bonus" }), jsxs(Flex, { sx: { fontSize: '12px', color: recommendation.bonus > 0 ? 'success' : 'error', ml: '6px' }, children: [recommendation.bonus.toFixed(2), "%"] })] })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:p-[6px_12px] ape:bg-white2 ape:rounded-normal ape:justify-between ape:items-center ape:cursor-pointer ape:mr-[10px] ape:last:mr-0", onClick: () => window.open(`${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`, '_self'), children: [jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { symbol: recommendation.payoutTokenName, size: 32, chain: recommendation.chainId }), jsxs(Flex, { className: "ape:mx-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:text-[14px] ape:px-[6px]", children: recommendation.payoutTokenName }), jsxs(Flex, { className: subTitleClasses, children: [vestingTime.days, "D"] })] })] }), jsxs(Flex, { className: "ape:items-center", children: [jsx(Flex, { className: subTitleClasses, children: "Bonus" }), jsxs(Flex, { className: "ape:text-[12px] ape:ml-[6px]", style: { color: recommendation.bonus > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }, children: [recommendation.bonus.toFixed(2), "%"] })] })] }));
 };
 
 export { SmallRecommendationCard as default };

package/dist/views/Bonds/components/RecommendationCards/SmallRecommendationCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmallRecommendationCard.js","sources":["../../../../../src/views/Bonds/components/RecommendationCards/SmallRecommendationCard.tsx"],"sourcesContent":["import React from 'react'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { styles } from './styles'\n\ninterface SmallCardBond {\n  vestingTerm: number\n  payoutTokenName: string\n  contractAddress: string\n  bonus: number\n  chainId: ChainId\n}\n\nconst SmallRecommendationCard = ({ recommendation }: { recommendation: SmallCardBond }) => {\n  const vestingTime = getTimePeriods(recommendation.vestingTerm, true)\n\n  return (\n    <Flex\n      sx={styles.smallCardContainer}\n      onClick={() =>\n        window.open(\n          `${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`,\n          '_self',\n        )\n      }\n    >\n      <Flex sx={{ alignItems: 'center' }}>\n        <TokenImage symbol={recommendation.payoutTokenName} size={32} chain={recommendation.chainId} />\n        <Flex sx={{ mx: '10px', alignItems: 'center' }}>\n          <Flex sx={{ fontSize: '14px', px: '6px' }}>{recommendation.payoutTokenName}</Flex>\n          <Flex sx={styles.subTitle}>{vestingTime.days}D</Flex>\n        </Flex>\n      </Flex>\n      <Flex sx={{ alignItems: 'center' }}>\n        <Flex sx={styles.subTitle}>Bonus</Flex>\n        <Flex sx={{ fontSize: '12px', color: recommendation.bonus > 0 ? 'success' : 'error', ml: '6px' }}>\n          {recommendation.bonus.toFixed(2)}%\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SmallRecommendationCard\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAeA,MAAM,uBAAuB,GAAG,CAAC,EAAE,cAAc,EAAqC,KAAI;IACxF,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC;AAEpE,IAAA,QACEA,IAAA,CAAC,IAAI,IACH,EAAE,EAAE,MAAM,CAAC,kBAAkB,EAC7B,OAAO,EAAE,MACP,MAAM,CAAC,IAAI,CACT,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAA,mBAAA,EAAsB,cAAc,CAAC,eAAe,CAAA,WAAA,EAAc,cAAc,CAAC,OAAO,EAAE,EACnH,OAAO,CACR,EAAA,QAAA,EAAA,CAGHA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAChCC,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,cAAc,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,OAAO,EAAA,CAAI,EAC/FD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC5CC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAG,cAAc,CAAC,eAAe,EAAA,CAAQ,EAClFD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,aAAG,WAAW,CAAC,IAAI,EAAA,GAAA,CAAA,EAAA,CAAS,CAAA,EAAA,CAChD,IACF,EACPA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aAChCC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,EACvCD,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,GAAG,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,aAC7F,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAC3B,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"SmallRecommendationCard.js","sources":["../../../../../src/views/Bonds/components/RecommendationCards/SmallRecommendationCard.tsx"],"sourcesContent":["import React from 'react'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\n\ninterface SmallCardBond {\n  vestingTerm: number\n  payoutTokenName: string\n  contractAddress: string\n  bonus: number\n  chainId: ChainId\n}\n\nconst subTitleClasses = 'ape:text-text-disabled-button ape:text-[12px] ape:font-normal ape:leading-4'\n\nconst SmallRecommendationCard = ({ recommendation }: { recommendation: SmallCardBond }) => {\n  const vestingTime = getTimePeriods(recommendation.vestingTerm, true)\n\n  return (\n    <Flex\n      className=\"ape:w-full ape:p-[6px_12px] ape:bg-white2 ape:rounded-normal ape:justify-between ape:items-center ape:cursor-pointer ape:mr-[10px] ape:last:mr-0\"\n      onClick={() =>\n        window.open(\n          `${window.location.origin}/bonds?bondAddress=${recommendation.contractAddress}&bondChain=${recommendation.chainId}`,\n          '_self',\n        )\n      }\n    >\n      <Flex className=\"ape:items-center\">\n        <TokenImage symbol={recommendation.payoutTokenName} size={32} chain={recommendation.chainId} />\n        <Flex className=\"ape:mx-[10px] ape:items-center\">\n          <Flex className=\"ape:text-[14px] ape:px-[6px]\">{recommendation.payoutTokenName}</Flex>\n          <Flex className={subTitleClasses}>{vestingTime.days}D</Flex>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:items-center\">\n        <Flex className={subTitleClasses}>Bonus</Flex>\n        <Flex\n          className=\"ape:text-[12px] ape:ml-[6px]\"\n          style={{ color: recommendation.bonus > 0 ? 'var(--ape-color-success)' : 'var(--ape-color-error)' }}\n        >\n          {recommendation.bonus.toFixed(2)}%\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SmallRecommendationCard\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAcA,MAAM,eAAe,GAAG,6EAA6E;AAErG,MAAM,uBAAuB,GAAG,CAAC,EAAE,cAAc,EAAqC,KAAI;IACxF,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,WAAW,EAAE,IAAI,CAAC;AAEpE,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kJAAkJ,EAC5J,OAAO,EAAE,MACP,MAAM,CAAC,IAAI,CACT,CAAA,EAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,sBAAsB,cAAc,CAAC,eAAe,CAAA,WAAA,EAAc,cAAc,CAAC,OAAO,CAAA,CAAE,EACnH,OAAO,CACR,EAAA,QAAA,EAAA,CAGHA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,aAChCC,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,cAAc,CAAC,eAAe,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,OAAO,EAAA,CAAI,EAC/FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC9CC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAE,cAAc,CAAC,eAAe,EAAA,CAAQ,EACtFD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CAAG,WAAW,CAAC,IAAI,EAAA,GAAA,CAAA,EAAA,CAAS,CAAA,EAAA,CACvD,CAAA,EAAA,CACF,EACPA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAChCC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,EAC9CD,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,CAAC,GAAG,0BAA0B,GAAG,wBAAwB,EAAE,EAAA,QAAA,EAAA,CAEjG,cAAc,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CAC3B,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 export interface SmallCardBond {
     vestingTerm: number;
@@ -7,5 +6,5 @@ export interface SmallCardBond {
     bonus: number;
     chainId: ChainId;
 }
-declare const RecommendationCards: () => React.JSX.Element;
+declare const RecommendationCards: () => import("react/jsx-runtime").JSX.Element;
 export default RecommendationCards;

package/dist/views/Bonds/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';
@@ -46,17 +46,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'] } })] }), 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:lg:flex", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsxs(Flex, { children: [jsx(Flex, { className: "ape:w-[60px] ape:lg:w-[unset] ape:mr-0 ape:lg: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:lg:flex" })] }), 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/Bonds/components/RecommendationCards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from './SmallRecommendationCard'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport useHotBonds from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\n\nexport interface SmallCardBond {\n  vestingTerm: number\n  payoutTokenName: string\n  contractAddress: string\n  bonus: number\n  chainId: ChainId\n}\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: hotRecommendations } = useHotBonds()\n  const { data: bonds } = useBondsData()\n  const SDKConfig = useSDKConfig()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3')\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice('0', b?.trueBondPrices)?.bonusWithFee ?? 0) -\n            (findHighestTrueBondPrice('0', a?.trueBondPrices)?.bonusWithFee ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) => bond?.tags?.includes(activeOption) && !bond?.soldOut && SDKConfig?.chains?.includes(bond.chainId),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds?.filter((bond) => SDKConfig?.chains?.includes(bond.chainId)).slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    const contractAddress =\n      'billAddress' in bond ? bond.billAddress : (bond?.contractAddress?.[bond?.chainId] as string)\n    const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol\n\n    return {\n      payoutTokenName: payoutTokenName,\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus: 'bonus' in bond ? bond.bonus : (findHighestTrueBondPrice('0', 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      </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/Bonds/components/RecommendationCards/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { useTopTags } from '../../../../hooks/useTopTags'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector'\nimport SmallRecommendationCard from './SmallRecommendationCard'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport useHotBonds from '../../../../state/hotBonds/useHotBonds'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\n\nexport interface SmallCardBond {\n  vestingTerm: number\n  payoutTokenName: string\n  contractAddress: string\n  bonus: number\n  chainId: ChainId\n}\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: hotRecommendations } = useHotBonds()\n  const { data: bonds } = useBondsData()\n  const SDKConfig = useSDKConfig()\n\n  const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3')\n  const sortedBonds =\n    bonds && bonds?.length > 0\n      ? [...bonds].sort(\n          (a, b) =>\n            (findHighestTrueBondPrice('0', b?.trueBondPrices)?.bonusWithFee ?? 0) -\n            (findHighestTrueBondPrice('0', a?.trueBondPrices)?.bonusWithFee ?? 0),\n        )\n      : undefined\n\n  const filteredBonds = sortedBonds?.filter(\n    (bond) => bond?.tags?.includes(activeOption) && !bond?.soldOut && SDKConfig?.chains?.includes(bond.chainId),\n  )\n\n  const selectedBonds =\n    activeOption === 'For You' ? forYouRecommendations : activeOption === 'Hot' ? hotRecommendations : filteredBonds\n\n  const slicedBonds = selectedBonds?.filter((bond) => SDKConfig?.chains?.includes(bond.chainId)).slice(0, 3)\n\n  const parsedBondsToRender: SmallCardBond[] | undefined = slicedBonds?.map((bond) => {\n    const contractAddress =\n      'billAddress' in bond ? bond.billAddress : (bond?.contractAddress?.[bond?.chainId] as string)\n    const payoutTokenName = 'payoutTokenName' in bond ? bond.payoutTokenName : bond.earnToken.symbol\n\n    return {\n      payoutTokenName: payoutTokenName,\n      contractAddress,\n      vestingTerm: bond.vestingTerm ?? 0,\n      bonus: 'bonus' in bond ? bond.bonus : (findHighestTrueBondPrice('0', 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:lg:flex\">\n      <Flex className=\"ape:w-full ape:justify-between\">\n        <Flex>\n          <Flex\n            className=\"ape:w-[60px] ape:lg:w-[unset] ape:mr-0 ape:lg: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:lg: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/Bonds/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Providers from '../../providers/index.js';
 import Bonds from './Bonds.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 
 const BondsWithProviders = (props) => {
     useSDKConfig(props);
-    return (jsx(Providers, { theme: props?.theme, children: jsx(Bonds, {}) }));
+    return (jsx(Providers, { children: jsx(Bonds, {}) }));
 };
 
 export { BondsWithProviders as default };

package/dist/views/Bonds/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/views/Bonds/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport Bonds from './Bonds'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst BondsWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers theme={props?.theme}>\n      <Bonds />\n    </Providers>\n  )\n}\n\nexport default BondsWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,kBAAkB,GAA0B,CAAC,KAAK,KAAI;IAC1D,YAAY,CAAC,KAAK,CAAC;AACnB,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,YAC5BA,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,EAAA,CACC;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/views/Bonds/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport Bonds from './Bonds'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst BondsWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers>\n      <Bonds />\n    </Providers>\n  )\n}\n\nexport default BondsWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,kBAAkB,GAA0B,CAAC,KAAK,KAAI;IAC1D,YAAY,CAAC,KAAK,CAAC;IACnB,QACEA,IAAC,SAAS,EAAA,EAAA,QAAA,EACRA,IAAC,KAAK,EAAA,EAAA,CAAG,EAAA,CACC;AAEhB;;;;"}

package/dist/views/BuyBond/BuyBondModal.js

@@ -1,4 +1,4 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import BuyBond from './BuyComponent.js';
@@ -8,7 +8,7 @@ import BuyComponentSui from './BuyComponentSui.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 
 const BuyBondModal = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond, setBillId, }) => {
-    return (jsx(Modal, { className: "modal", onDismiss: onDismiss, sx: { width: '400px', maxWidth: '700px', mt: '-10px', p: '0px' }, children: bondChain === ChainId.SOL ? (jsx(BuyComponentSolana, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : bondChain === ChainId.APTOS ? (jsx(BuyComponentAptos, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : bondChain === ChainId.SUI ? (jsx(BuyComponentSui, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : (jsx(BuyBond //evm
+    return (jsx(Modal, { className: "modal ape:w-85 ape:md:w-175 ape:p-0! ", onDismiss: onDismiss, children: bondChain === ChainId.SOL ? (jsx(BuyComponentSolana, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : bondChain === ChainId.APTOS ? (jsx(BuyComponentAptos, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : bondChain === ChainId.SUI ? (jsx(BuyComponentSui, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, setBillId: setBillId })) : (jsx(BuyBond //evm
         , { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: handlePurchasedBond })) }));
 };
 var BuyBondModal$1 = React.memo(BuyBondModal);

package/dist/views/BuyBond/BuyBondModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuyBondModal.js","sources":["../../../src/views/BuyBond/BuyBondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport BuyBond from './BuyComponent'\nimport BuyComponentSolana from './BuyComponentSolana'\nimport BuyComponentAptos from './BuyComponentAptos'\nimport BuyComponentSui from './BuyComponentSui'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport interface PurchasedBondData {\n  buyTxHash: string\n  lostProfit?: string\n}\n\ninterface BuyBondProps {\n  onDismiss?: () => void // this is only the modal\n  bondAddress?: string\n  bondChain?: number\n  handlePurchasedBond?: (data: PurchasedBondData) => void\n  setBillId?: (id: string) => void\n  isProjectView?: boolean\n}\n\nconst BuyBondModal: React.FC<BuyBondProps> = ({\n  onDismiss,\n  bondAddress,\n  bondChain,\n  handlePurchasedBond,\n  setBillId,\n}) => {\n  return (\n    <Modal className=\"modal\" onDismiss={onDismiss} sx={{ width: '400px', maxWidth: '700px', mt: '-10px', p: '0px' }}>\n      {bondChain === ChainId.SOL ? (\n        <BuyComponentSolana\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          setBillId={setBillId}\n        />\n      ) : bondChain === ChainId.APTOS ? (\n        <BuyComponentAptos\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          setBillId={setBillId}\n        />\n      ) : bondChain === ChainId.SUI ? (\n        <BuyComponentSui onDismiss={onDismiss} bondAddress={bondAddress} bondChain={bondChain} setBillId={setBillId} />\n      ) : (\n        <BuyBond //evm\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          handlePurchasedBond={handlePurchasedBond}\n        />\n      )}\n    </Modal>\n  )\n}\n\nexport default React.memo(BuyBondModal)\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAsBA,MAAM,YAAY,GAA2B,CAAC,EAC5C,SAAS,EACT,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,SAAS,GACV,KAAI;AACH,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAA,QAAA,EAC5G,SAAS,KAAK,OAAO,CAAC,GAAG,IACxBA,GAAA,CAAC,kBAAkB,EAAA,EACjB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CACpB,IACA,SAAS,KAAK,OAAO,CAAC,KAAK,IAC7BA,GAAA,CAAC,iBAAiB,EAAA,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CACpB,IACA,SAAS,KAAK,OAAO,CAAC,GAAG,IAC3BA,GAAA,CAAC,eAAe,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,KAE/GA,GAAA,CAAC,OAAO;AACN,UAAA,EAAA,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,GACxC,CACH,EAAA,CACK;AAEZ,CAAC;AAED,qBAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;;;"}
+{"version":3,"file":"BuyBondModal.js","sources":["../../../src/views/BuyBond/BuyBondModal.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport BuyBond from './BuyComponent'\nimport BuyComponentSolana from './BuyComponentSolana'\nimport BuyComponentAptos from './BuyComponentAptos'\nimport BuyComponentSui from './BuyComponentSui'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport interface PurchasedBondData {\n  buyTxHash: string\n  lostProfit?: string\n}\n\ninterface BuyBondProps {\n  onDismiss?: () => void // this is only the modal\n  bondAddress?: string\n  bondChain?: number\n  handlePurchasedBond?: (data: PurchasedBondData) => void\n  setBillId?: (id: string) => void\n  isProjectView?: boolean\n}\n\nconst BuyBondModal: React.FC<BuyBondProps> = ({\n  onDismiss,\n  bondAddress,\n  bondChain,\n  handlePurchasedBond,\n  setBillId,\n}) => {\n  return (\n    <Modal className=\"modal ape:w-85 ape:md:w-175 ape:p-0! \" onDismiss={onDismiss}>\n      {bondChain === ChainId.SOL ? (\n        <BuyComponentSolana\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          setBillId={setBillId}\n        />\n      ) : bondChain === ChainId.APTOS ? (\n        <BuyComponentAptos\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          setBillId={setBillId}\n        />\n      ) : bondChain === ChainId.SUI ? (\n        <BuyComponentSui onDismiss={onDismiss} bondAddress={bondAddress} bondChain={bondChain} setBillId={setBillId} />\n      ) : (\n        <BuyBond //evm\n          onDismiss={onDismiss}\n          bondAddress={bondAddress}\n          bondChain={bondChain}\n          handlePurchasedBond={handlePurchasedBond}\n        />\n      )}\n    </Modal>\n  )\n}\n\nexport default React.memo(BuyBondModal)\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAsBA,MAAM,YAAY,GAA2B,CAAC,EAC5C,SAAS,EACT,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,SAAS,GACV,KAAI;IACH,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,uCAAuC,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAC1E,SAAS,KAAK,OAAO,CAAC,GAAG,IACxBA,GAAA,CAAC,kBAAkB,EAAA,EACjB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CACpB,IACA,SAAS,KAAK,OAAO,CAAC,KAAK,IAC7BA,GAAA,CAAC,iBAAiB,EAAA,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EAAA,CACpB,IACA,SAAS,KAAK,OAAO,CAAC,GAAG,IAC3BA,IAAC,eAAe,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,KAE/GA,GAAA,CAAC,OAAO;AACN,UAAA,EAAA,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,GACxC,CACH,EAAA,CACK;AAEZ,CAAC;AAED,qBAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;;;"}

package/dist/views/BuyBond/BuyComponent.js

@@ -1,12 +1,13 @@
-import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
 import { convertToBigish } from '../../utils/convertToBigish.js';
 import { toFixedString, mulDivRound } from '../../utils/fixedPoint.js';
 import ABI_DEPOSIT from '../../config/abi/deposit.json.js';
 import ABI_DEPOSIT_SIG from '../../config/abi/depositSig.json.js';
 import { useChainId, useWriteContract, useSendTransaction } from 'wagmi';
 import useModal from '../../hooks/useModal.js';
-import { ChainId, LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
+import { LaunchBondTiers, BillVersion, ChainId } from '@ape.swap/apeswap-lists';
 import TokenSelectorPanel from '../../components/TokenSelectorPanel/index.js';
 import { useApproval } from '../../state/allowance/useAllowance.js';
 import { SoulZapTokenManager } from '../../config/constants/addresses.js';
@@ -18,7 +19,7 @@ import { useMonitorTx } from '../../hooks/useMonitorTx.js';
 import { usePopups } from '../../state/popups/usePopups.js';
 import { formatUSDNumber, getMaxBuy, getPayoutAmount, getPrincipalAmount, getRawBonus } from '../../utils/displayHelpers.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
-import { zapSupported, tierOptimizerUIEnabled, LifiSupported } from '../../config/constants/variables.js';
+import { zapSupported, LifiSupported } from '../../config/constants/variables.js';
 import { getSymbol } from '../../utils/getNativeTicker.js';
 import { useSendReferenceId } from '../../hooks/useSendReferenceId.js';
 import ConnectButton from '../../components/ConnectButton/index.js';
@@ -46,7 +47,6 @@ import Flex from '../../components/uikit-sdk/Flex/index.js';
 import Text from '../../components/uikit-sdk/Text/index.js';
 import Button from '../../components/uikit-sdk/Button/Button.js';
 import { formatNumberSI } from '../../utils/formatNumber.js';
-import GetUpToComponent from './components/GetUpToComponent/GetUpToComponent.js';
 import L1XIframe from './components/L1xIframe/L1xIframe.js';
 
 const PROMOTION_TRACKING_SUFFIXES = {
@@ -349,12 +349,6 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
     const [onOpenLifiModal] = useModal(jsx(LifiModal, { bondChain: bondChain, principalToken: isPrincipalTokenLP ? 'ETH' : bondData?.lpToken?.address?.[bondData?.chainId] }));
     const [openNewRateModal] = useModal(jsx(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), true, false, 'newRateModal');
     const [openTxModal] = useModal(jsx(TransactionModal, { txChain: bondChain, approvalState: approvalState, approveCallback: handleApprove, loadingTx: loadingTx, txCallback: handleBothPurchases, bondData: bondData, inputToken: inputToken, inputValue: inputValue, depositAmount: depositAmount, buyTxHash: buyTxHash, rateChanged: rateChanged }), false, true, 'transactionModal');
-    // const [onOpenZapModal] = useModal(
-    //   <ZapModal outputToken={bondData?.lpToken as Token} account={account} chainId={bondData?.chainId as ChainId} />,
-    //   true,
-    //   true,
-    //   'zapModal',
-    // )
     const [openNoBonusModal] = useModal(jsx(NoBonusModal, { onAcknowledge: openTxModal, showcaseTokenName: bondData?.showcaseTokenName }), true, true, 'NoBonusModal');
     // Effects
     const [hasChecked, setHasChecked] = useState(false);
@@ -376,21 +370,18 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [rateChanged]);
-    return bondData ? (jsx(Flex, { className: "modal-content", sx: { ...MCBuyComponentStyles[bondData?.marketingCampaign] }, children: jsxs(Flex, { className: "modaltable-container", children: [jsx(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: SDKConfig?.referenceId === 'apebond' }), jsx(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx(BondCards, { bondData: bondData, isDoingMaxBuy: exceedsSafeMaxBuy && !exceedsRealMaxBuy }) }), jsx(Estimations, { depositAmount: depositAmount, inputValue: inputValue, inputTokenPrice: inputTokenPrice, bondData: bondData, youSpendString: youSpendString, isZap: isZapSupported, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: handleMaxButton, handleCurrencySelect: handleCurrencySelect, bondChainId: bondData?.chainId, enableZap: isZapSupported, bondPrincipalToken: bondData?.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice, inputDisabled: isUserRestricted, marketingCampaign: bondData?.marketingCampaign, isConnected: !!account }), SDKConfig.useTiers && (jsx(Fragment, { children: (bondData?.trueBondPrices?.length ?? 0) > 1 &&
-                        bondData.earnToken.symbol.toLowerCase() !== 'ireet' &&
-                        tierOptimizerUIEnabled ? (jsx(PointsLeftForNextTier, { bond: bondData, inputAmount: inputValue, setInputValue: setInputValue, inputTokenPrice: inputTokenPrice, inputTokenDecimals: inputToken === 'NATIVE' ? 18 : (inputToken?.decimals?.[bondData?.chainId] ?? 18) })) : (bondData?.trueBondPrices?.length ?? 0) > 1 ? (jsx(GetUpToComponent, { bond: bondData, depositAmount: depositAmount })) : null })), bondData?.warningCard && (jsx(Flex, { sx: {
-                        width: '100%',
-                        background: '#DE62F366',
-                        mt: '10px',
-                        borderRadius: 'normal',
-                        p: '2px 10px',
-                    }, children: jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, display: 'flex', alignItems: 'center', gap: '10px' }, children: jsx(SafeHTMLComponent, { html: bondData?.warningCard }) }) })), jsx(Flex, { className: "modaltable-container button-container", children: jsx(Flex, { className: "button-container buy", children: !account ? (jsx(ConnectButton, {})) : (jsxs(Flex, { sx: { width: '100%', gap: '10px', flexDirection: ['column', 'column', 'column', 'row'] }, children: [jsx(Button, { variant: "secondary", onClick: () => LifiSupported.includes(bondChain)
+    return bondData ? (jsx(Flex, { className: "modal-content ape:flex ape:flex-col ape:rounded-[10px] ape:bg-white2 ape:w-full ape:p-3.75 ape:md:p-5", style: { ...MCBuyComponentStyles[bondData?.marketingCampaign] }, children: jsxs(Flex, { className: "modaltable-container ape:w-full ape:flex ape:flex-col ape:relative ape:gap-2.5", children: [jsx(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: SDKConfig?.referenceId === 'apebond' }), jsx(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx(Flex, { className: clsx('ape:w-full', isProjectView ? 'ape:flex ape:md:hidden!' : 'ape:flex'), children: jsx(BondCards, { bondData: bondData, isDoingMaxBuy: exceedsSafeMaxBuy && !exceedsRealMaxBuy }) }), jsx(Estimations, { depositAmount: depositAmount, inputValue: inputValue, inputTokenPrice: inputTokenPrice, bondData: bondData, youSpendString: youSpendString, isZap: isZapSupported, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: handleMaxButton, handleCurrencySelect: handleCurrencySelect, bondChainId: bondData?.chainId, enableZap: isZapSupported, bondPrincipalToken: bondData?.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice, inputDisabled: isUserRestricted, marketingCampaign: bondData?.marketingCampaign, isConnected: !!account }), SDKConfig.useTiers &&
+                    userTier !== LaunchBondTiers.Mythical &&
+                    bondData?.billVersion === BillVersion.V4 &&
+                    account && (jsx(PointsLeftForNextTier, { bond: bondData, inputAmount: inputValue, setInputValue: setInputValue, inputTokenPrice: inputTokenPrice, inputTokenDecimals: inputToken === 'NATIVE' ? 18 : (inputToken?.decimals?.[bondData?.chainId] ?? 18) })), bondData?.warningCard && (jsx(Flex, { className: "ape:w-full ape:rounded-normal ape:p-[2px_10px]", style: { background: '#DE62F366' }, children: jsx(Text, { as: "div", size: "12px", className: "ape:font-normal ape:flex ape:items-center ape:leading-5.5!", children: jsx(SafeHTMLComponent, { html: bondData?.warningCard }) }) })), jsx(Flex, { className: "modaltable-container button-container ape:w-full ape:flex ape:relative ape:flex-row ape:justify-between", children: jsx(Flex, { className: "button-container buy ape:justify-center ape:items-center ape:cursor-pointer ape:w-full", children: !account ? (jsx(ConnectButton, {})) : (jsxs(Flex, { className: "ape:w-full ape:gap-[10px] ape:flex-col ape:md:flex-row", children: [jsx(Button, { variant: "secondary", onClick: () => LifiSupported.includes(bondChain)
                                         ? onOpenLifiModal()
                                         : bondChain === ChainId.L1X
                                             ? onOpenl1xIframe()
-                                            : openExternal(), sx: { width: ['100%', '100%', '100%', '35%'], fontSize: ['14px', '14px', '14px', '16px'] }, children: LifiSupported.includes(bondChain)
-                                        ? `Bridge to ${SHORT_NETWORK_LABEL[bondData?.chainId]}`
-                                        : `Get ${getSymbol(bondData?.lpToken, bondData?.chainId)}` }), isUserRestricted ? (jsx(Button, { className: "action-button", disabled: true, children: "INSUFFICIENT TIER" })) : (jsx(Button, { className: "action-button", load: load || fetchingZapQuote, disabled: load ||
+                                            : openExternal(), className: "ape:w-full ape:md:w-[35%] ape:text-[14px]! ape:lg:text-[16px]!", children: LifiSupported.includes(bondChain)
+                                        ? isProjectView
+                                            ? 'Bridge funds'
+                                            : `Bridge to ${SHORT_NETWORK_LABEL[bondData?.chainId]}`
+                                        : `Get ${getSymbol(bondData?.lpToken, bondData?.chainId)}` }), isUserRestricted ? (jsx(Button, { className: "action-button ape:w-full", disabled: true, children: "INSUFFICIENT TIER" })) : (jsx(Button, { className: "action-button ape:w-full ape:text-[14px]! ape:lg:text-[16px]!", load: load || fetchingZapQuote, disabled: load ||
                                         bondData?.soldOut ||
                                         !account ||
                                         !inputValue ||
@@ -400,7 +391,7 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
                                         exceedsRealMaxBuy ||
                                         exceedsBalance ||
                                         (isZapSupported && !zapData) ||
-                                        SDKConfig.blockSales, onClick: handleOpenModal, sx: { fontSize: ['14px', '14px', '14px', '16px'] }, children: SDKConfig.blockSales
+                                        SDKConfig.blockSales, onClick: handleOpenModal, children: SDKConfig.blockSales
                                         ? 'Complete KYC to Buy'
                                         : exceedsRealMaxBuy
                                             ? 'Exceeds Max Buy. Reduce amount'
@@ -410,7 +401,7 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
                                                     ? 'something went wrong'
                                                     : !inputValue || parseFloat(inputValue) === 0
                                                         ? 'Insert amount'
-                                                        : `buy` })), ' '] })) }) })] }) })) : (jsx(Fragment, {}));
+                                                        : `buy` }))] })) }) })] }) })) : (jsx(Fragment, {}));
 };
 var BuyBond = React.memo(BuyComponent);