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

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":";;;;;;;;;;;;AAaA,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAuB,KAAI;IACpD,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ;;IAEzD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAC7BA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EAC9F,IAAI,EACJ,IAAI,EACJ,CAAA,aAAA,EAAgB,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAE,CACzE;IAED,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,YAAY,EAAE;AACd,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,IAAI,CAAC,OAAO;AACnB,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,UAAU;AACf,gBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC5B,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,QAAQ;AACrB,aAAA;SACF,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,eAAe,YAC9EC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,MAAM;iBACZ,EAAA,QAAA,EAAA,CAEDD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,QAAA,EACxGA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAAA,CAC/B,EACPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,KAAK,EAAE,OAAO;yBACf,EAAA,QAAA,EAEDA,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,EAAA,CAClD,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC1EA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CAAA,GAAA,EAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA,EAAA,CAAQ,EAClFA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACjEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACzDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpF,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,EAAA,IAAA,CAAA,EAAA,CACzC,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAClG,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,CAC5ED,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,QAAA,EAC/DA,GAAA,CAAC,cAAc,EAAA,EAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,EAAA,IAAA,EAAA,CAAG,EAAA,CAC9D,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAClG,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACF;AAEX;;;;"}
+{"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,48 +1,14 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { useState } from 'react';
-import { styles } from './styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import HotBondCard from './HotBondCard.js';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import useSwiper from '../../../../hooks/useSwiper.js';
-import { getDotPos } from '../../../../utils/getDotPos.js';
 import useHotBonds from '../../../../state/hotBonds/useHotBonds.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
-import SwiperDots from '../../../../components/uikit-sdk/SwiperDots/index.js';
+import Carousel from '../../../../components/Carousel/index.js';
 
 const HotBondCards = () => {
     const { data: hotBonds } = useHotBonds();
-    const [activeSlide, setActiveSlide] = useState(0);
-    const { swiper, setSwiper } = useSwiper();
-    const handleSlide = (event) => {
-        const slideNumber = getDotPos(event.activeIndex, hotBonds?.length);
-        setActiveSlide(slideNumber);
-    };
-    const slideTo = (index) => {
-        setActiveSlide(index);
-        swiper?.slideTo(index);
-    };
-    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}`);
-                }) }), jsxs(Flex, { sx: {
-                    flexDirection: 'column',
-                    width: '100%',
-                    alignItems: 'center',
-                    mb: '15px',
-                    overflow: 'hidden',
-                    display: 'flex',
-                    '@media screen and (min-width: 1000px)': {
-                        display: 'none',
-                    },
-                }, children: [jsx(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, onSlideChange: handleSlide, style: { width: '100%', paddingBottom: '15px', overflow: 'visible' }, children: hotBonds?.map((bond, index) => {
-                            return (jsx(SwiperSlide, { style: {
-                                    width: '100%',
-                                    padding: '1px',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                }, children: jsx(HotBondCard, { bond: bond }, `${bond?.contractAddress?.[bond?.chainId]}-${index}`) }, index));
-                        }) }), jsx(Flex, { children: [...Array(hotBonds?.length)].map((_, i) => {
-                            return jsx(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
-                        }) })] })] }));
+                }) }), 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, { useState } from 'react'\nimport { styles } from './styles'\nimport HotBondCard from './HotBondCard'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport SwiperCore from 'swiper'\nimport useSwiper from '../../../../hooks/useSwiper'\nimport { getDotPos } from '../../../../utils/getDotPos'\nimport useHotBonds from '../../../../state/hotBonds/useHotBonds'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport SwiperDots from '../../../../components/uikit-sdk/SwiperDots'\n\nconst HotBondCards = () => {\n  const { data: hotBonds } = useHotBonds()\n\n  const [activeSlide, setActiveSlide] = useState(0)\n  const { swiper, setSwiper } = useSwiper()\n\n  const handleSlide = (event: SwiperCore) => {\n    const slideNumber = getDotPos(event.activeIndex, hotBonds?.length)\n    setActiveSlide(slideNumber)\n  }\n\n  const slideTo = (index: number) => {\n    setActiveSlide(index)\n    swiper?.slideTo(index)\n  }\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 SWIPER */}\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        <Swiper\n          id=\"hotbondsSweper\"\n          onSwiper={setSwiper}\n          slidesPerView=\"auto\"\n          centeredSlides\n          onSlideChange={handleSlide}\n          style={{ width: '100%', paddingBottom: '15px', overflow: 'visible' }}\n        >\n          {hotBonds?.map((bond, index) => {\n            return (\n              <SwiperSlide\n                style={{\n                  width: '100%',\n                  padding: '1px',\n                  display: 'flex',\n                  justifyContent: 'center',\n                }}\n                key={index}\n              >\n                <HotBondCard bond={bond} key={`${bond?.contractAddress?.[bond?.chainId]}-${index}`} />\n              </SwiperSlide>\n            )\n          })}\n        </Swiper>\n        <Flex>\n          {[...Array(hotBonds?.length)].map((_, i) => {\n            return <SwiperDots isActive={i === activeSlide} onClick={() => slideTo(i)} key={i} />\n          })}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default HotBondCards\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAY,GAAG,MAAK;IACxB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE;IAExC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE;AAEzC,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACxC,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;QAClE,cAAc,CAAC,WAAW,CAAC;AAC7B,IAAA,CAAC;AAED,IAAA,MAAM,OAAO,GAAG,CAAC,KAAa,KAAI;QAChC,cAAc,CAAC,KAAK,CAAC;AACrB,QAAA,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC;AAED,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,EAEPD,KAAC,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,EAAA,CAEDC,GAAA,CAAC,MAAM,EAAA,EACL,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAC,MAAM,EACpB,cAAc,QACd,aAAa,EAAE,WAAW,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAA,QAAA,EAEnE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAC7B,4BAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EAAE;AACL,oCAAA,KAAK,EAAE,MAAM;AACb,oCAAA,OAAO,EAAE,KAAK;AACd,oCAAA,OAAO,EAAE,MAAM;AACf,oCAAA,cAAc,EAAE,QAAQ;iCACzB,EAAA,QAAA,EAGDA,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,EAAA,EAFjF,KAAK,CAGE;wBAElB,CAAC,CAAC,GACK,EACTA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACF,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;4BACzC,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,CAAC,KAAK,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAA,EAAO,CAAC,CAAI;AACvF,wBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACF,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';
@@ -9,17 +9,17 @@ import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 import useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations.js';
 import useHotBonds from '../../../../state/hotBonds/useHotBonds.js';
 import { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers.js';
-import useEVMAccount from '../../../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../../../state/chainAccount/useChainAccount.js';
 
 const RecommendationCards = () => {
     const topTags = useTopTags();
-    const { address: account } = useEVMAccount();
+    const { address: account } = useChainAccount('evm');
     const options = account ? ['For You', 'Hot', ...topTags] : ['Hot', ...topTags];
     const [activeOption, setActiveOption] = useState(options[0]);
     const { data: hotRecommendations } = useHotBonds();
     const { data: bonds } = useBondsData();
     const SDKConfig = useSDKConfig();
-    const { data: forYouRecommendations } = useGetBondRecommendations(account, undefined, '3');
+    const { data: forYouRecommendations } = useGetBondRecommendations(account ?? undefined, undefined, '3');
     const sortedBonds = bonds && bonds?.length > 0
         ? [...bonds].sort((a, b) => (findHighestTrueBondPrice('0', b?.trueBondPrices)?.bonusWithFee ?? 0) -
             (findHighestTrueBondPrice('0', a?.trueBondPrices)?.bonusWithFee ?? 0))
@@ -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 useChainAccount from '../../../../state/chainAccount/useChainAccount'\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 } = useChainAccount('evm')\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, 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/Bonds/utils.js

@@ -1,6 +1,6 @@
 import { getTimePeriods } from '../../utils/getTimePeriods.js';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
-import { TIERS_WEIGHT } from '../../state/tiers/useTierPoints.js';
+import { TIERS_WEIGHT } from '../../state/tiers/tiers.js';
 import { remainingPercentage } from '../../utils/displayHelpers.js';
 import { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers.js';
 
@@ -72,7 +72,7 @@ const sortBonds = (sortConfig, bonds) => {
 const getDiscountColor = (discount) => {
     if (!discount)
         return '';
-    return discount < 0 ? 'discount-negative' : 'discount-positive';
+    return discount > 0 ? 'var(--ape-color-success) !important' : 'var(--ape-color-error)';
 };
 const isBondSupported = (SDKVersion, bondVersion) => {
     // Split the versions into major, minor, and patch parts

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/views/Bonds/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { SortOptions } from './Bonds'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { TIERS_WEIGHT } from '../../state/tiers/useTierPoints'\nimport { remainingPercentage } from '../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\n\nexport const isBondSoldOut = (bill: BondsData, showLowValueBonds?: boolean): boolean => {\n  if (bill.soldOut) return true\n  if (bill.hide) return true\n  if (bill.billType === 'fcfs') {\n    const now = new Date().getTime()\n    const saleFinishTime = (bill?.finishTime ?? 0) * 1000\n    const saleHasFinished = now > saleFinishTime || bill.finalized\n    if (saleHasFinished) return true\n    return false\n  }\n  const { tokensRemaining, payoutTokenPrice } = bill\n  if (!tokensRemaining) return false\n  if (showLowValueBonds) return false\n  const thresholdToHide = 100 / Number(payoutTokenPrice ?? 0)\n\n  if ((findHighestTrueBondPrice('0', bill?.trueBondPrices)?.bonusWithFee ?? 0) > 50) {\n    if (bill.earnToken.symbol === 'sGOO') return false\n    //if bonus is higher than 50% for regular bonds, hide them\n    return true\n  }\n  if (Number(tokensRemaining) <= thresholdToHide) {\n    // If there's less than 100 usd bond will be hidden\n    return true\n  } else return false\n}\n\nexport const sortBonds = (sortConfig?: SortOptions, bonds?: BondsData[]) => {\n  const bondsToSort = bonds ?? []\n\n  if (!sortConfig) {\n    return bondsToSort\n  }\n\n  return [...bondsToSort].sort((a, b) => {\n    let aValue: number\n    let bValue: number\n\n    if (sortConfig?.key === 'arr') {\n      aValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonusWithFee ?? 0\n      bValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonusWithFee ?? 0\n    } else if (sortConfig.key === 'tokensRemaining') {\n      aValue = remainingPercentage(a)\n      bValue = remainingPercentage(b)\n    } else if (sortConfig.key === 'terms') {\n      aValue = getTimePeriods(a.vestingTerm, true).days\n      bValue = getTimePeriods(b.vestingTerm, true).days\n    } else {\n      aValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonusWithFee ?? 0\n      bValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonusWithFee ?? 0\n    }\n\n    if (aValue < bValue) {\n      return sortConfig.direction === 'asc' ? -1 : 1\n    }\n    if (aValue > bValue) {\n      return sortConfig.direction === 'asc' ? 1 : -1\n    }\n    return 0\n  })\n}\n\nexport const getDiscountColor = (discount?: number): string => {\n  if (!discount) return ''\n  return discount < 0 ? 'discount-negative' : 'discount-positive'\n}\n\nexport const isBondSupported = (SDKVersion: string, bondVersion: string) => {\n  // Split the versions into major, minor, and patch parts\n  const [major1, minor1, patch1] = SDKVersion.split('.').map(Number) ?? []\n  const [major2, minor2, patch2] = bondVersion?.split('.').map(Number) ?? []\n\n  // Compare major versions\n  if (major1 > major2) return true\n  if (major1 < major2) return false\n\n  // Compare minor versions\n  if (minor1 > minor2) return true\n  if (minor1 < minor2) return false\n\n  // Compare patch versions\n  if (patch1 >= patch2) return true\n\n  // If none of the above conditions are met, version1 is less\n  return false\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/views/Bonds/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { SortOptions } from './Bonds'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { TIERS_WEIGHT } from '../../state/tiers/tiers'\nimport { remainingPercentage } from '../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\n\nexport const isBondSoldOut = (bill: BondsData, showLowValueBonds?: boolean): boolean => {\n  if (bill.soldOut) return true\n  if (bill.hide) return true\n  if (bill.billType === 'fcfs') {\n    const now = new Date().getTime()\n    const saleFinishTime = (bill?.finishTime ?? 0) * 1000\n    const saleHasFinished = now > saleFinishTime || bill.finalized\n    if (saleHasFinished) return true\n    return false\n  }\n  const { tokensRemaining, payoutTokenPrice } = bill\n  if (!tokensRemaining) return false\n  if (showLowValueBonds) return false\n  const thresholdToHide = 100 / Number(payoutTokenPrice ?? 0)\n\n  if ((findHighestTrueBondPrice('0', bill?.trueBondPrices)?.bonusWithFee ?? 0) > 50) {\n    if (bill.earnToken.symbol === 'sGOO') return false\n    //if bonus is higher than 50% for regular bonds, hide them\n    return true\n  }\n  if (Number(tokensRemaining) <= thresholdToHide) {\n    // If there's less than 100 usd bond will be hidden\n    return true\n  } else return false\n}\n\nexport const sortBonds = (sortConfig?: SortOptions, bonds?: BondsData[]) => {\n  const bondsToSort = bonds ?? []\n\n  if (!sortConfig) {\n    return bondsToSort\n  }\n\n  return [...bondsToSort].sort((a, b) => {\n    let aValue: number\n    let bValue: number\n\n    if (sortConfig?.key === 'arr') {\n      aValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonusWithFee ?? 0\n      bValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonusWithFee ?? 0\n    } else if (sortConfig.key === 'tokensRemaining') {\n      aValue = remainingPercentage(a)\n      bValue = remainingPercentage(b)\n    } else if (sortConfig.key === 'terms') {\n      aValue = getTimePeriods(a.vestingTerm, true).days\n      bValue = getTimePeriods(b.vestingTerm, true).days\n    } else {\n      aValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonusWithFee ?? 0\n      bValue = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], b?.trueBondPrices)?.bonusWithFee ?? 0\n    }\n\n    if (aValue < bValue) {\n      return sortConfig.direction === 'asc' ? -1 : 1\n    }\n    if (aValue > bValue) {\n      return sortConfig.direction === 'asc' ? 1 : -1\n    }\n    return 0\n  })\n}\n\nexport const getDiscountColor = (discount?: number): string => {\n  if (!discount) return ''\n  return discount > 0 ? 'var(--ape-color-success) !important' : 'var(--ape-color-error)'\n}\n\nexport const isBondSupported = (SDKVersion: string, bondVersion: string) => {\n  // Split the versions into major, minor, and patch parts\n  const [major1, minor1, patch1] = SDKVersion.split('.').map(Number) ?? []\n  const [major2, minor2, patch2] = bondVersion?.split('.').map(Number) ?? []\n\n  // Compare major versions\n  if (major1 > major2) return true\n  if (major1 < major2) return false\n\n  // Compare minor versions\n  if (minor1 > minor2) return true\n  if (minor1 < minor2) return false\n\n  // Compare patch versions\n  if (patch1 >= patch2) return true\n\n  // If none of the above conditions are met, version1 is less\n  return false\n}\n"],"names":[],"mappings":"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"}

package/dist/views/BuyBond/BuyBondModal.js

@@ -1,15 +1,10 @@
-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';
-import BuyComponentSolana from './BuyComponentSolana.js';
-import BuyComponentAptos from './BuyComponentAptos.js';
-import BuyComponentSui from './BuyComponentSui.js';
-import { ChainId } from '@ape.swap/apeswap-lists';
+import ChainBuyComponent from './ChainBuyComponent.js';
 
 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
-        , { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: handlePurchasedBond })) }));
+    return (jsx(Modal, { className: "modal ape:w-85 ape:md:w-175 ape:p-0! ", onDismiss: onDismiss, children: jsx(ChainBuyComponent, { onDismiss: onDismiss, bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: handlePurchasedBond, setBillId: setBillId }) }));
 };
 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 ChainBuyComponent from './ChainBuyComponent'\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      <ChainBuyComponent\n        onDismiss={onDismiss}\n        bondAddress={bondAddress}\n        bondChain={bondChain}\n        handlePurchasedBond={handlePurchasedBond}\n        setBillId={setBillId}\n      />\n    </Modal>\n  )\n}\n\nexport default React.memo(BuyBondModal)\n"],"names":["_jsx"],"mappings":";;;;;AAkBA,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,uCAAuC,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAC3EA,GAAA,CAAC,iBAAiB,EAAA,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,SAAS,EAAA,CACpB,EAAA,CACI;AAEZ,CAAC;AAED,qBAAe,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;;;;"}

package/dist/views/BuyBond/ChainBuyComponent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ChainBuyComponentProps } from '../../adapters/types';
+/** The buy component of the bond chain's adapter. Chains without a registered adapter are unsupported. */
+declare const ChainBuyComponent: React.FC<ChainBuyComponentProps>;
+export default ChainBuyComponent;

package/dist/views/BuyBond/ChainBuyComponent.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { getAdapterForChain } from '../../adapters/registry.js';
+
+/** The buy component of the bond chain's adapter. Chains without a registered adapter are unsupported. */
+const ChainBuyComponent = (props) => {
+    const adapter = props.bondChain ? getAdapterForChain(props.bondChain) : undefined;
+    return adapter ? jsx(adapter.BuyComponent, { ...props }) : null;
+};
+
+export { ChainBuyComponent as default };
+//# sourceMappingURL=ChainBuyComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChainBuyComponent.js","sources":["../../../src/views/BuyBond/ChainBuyComponent.tsx"],"sourcesContent":["import React from 'react'\nimport { getAdapterForChain } from '../../adapters/registry'\nimport type { ChainBuyComponentProps } from '../../adapters/types'\n\n/** The buy component of the bond chain's adapter. Chains without a registered adapter are unsupported. */\nconst ChainBuyComponent: React.FC<ChainBuyComponentProps> = (props) => {\n  const adapter = props.bondChain ? getAdapterForChain(props.bondChain) : undefined\n  return adapter ? <adapter.BuyComponent {...props} /> : null\n}\n\nexport default ChainBuyComponent\n"],"names":["_jsx"],"mappings":";;;AAIA;AACA,MAAM,iBAAiB,GAAqC,CAAC,KAAK,KAAI;AACpE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS;AACjF,IAAA,OAAO,OAAO,GAAGA,IAAC,OAAO,CAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,GAAG,IAAI;AAC7D;;;;"}

package/dist/views/BuyBond/ParticipationSuccessful.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { BondsData } from '../../types/bonds';
 declare const ParticipationSuccessful: ({ onDismiss, bond, inputAmount, }: {
     onDismiss?: () => void;
     bond: BondsData;
     inputAmount?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ParticipationSuccessful;

package/dist/views/BuyBond/ParticipationSuccessful.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import useTokenPrices from '../../state/tokenPrices/useTokenPrices.js';
 import Button from '../../components/uikit-sdk/Button/Button.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
@@ -12,6 +12,10 @@ import useActiveView from '../../state/activeView/index.js';
 import { formatNumberSI } from '../../utils/formatNumber.js';
 import QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle.js';
 
+const rowClasses = 'ape:w-full ape:justify-between ape:mt-[5px]';
+const labelClasses = 'ape:text-[12px] ape:font-normal';
+const valueClasses = 'ape:text-[12px] ape:font-medium';
+const subValueClasses = 'ape:text-text-disabled-button ape:ml-[5px]';
 const ParticipationSuccessful = ({ onDismiss, bond, inputAmount, }) => {
     const { handleToogle } = useActiveView();
     const { data: tokenPrices } = useTokenPrices();
@@ -46,33 +50,11 @@ const ParticipationSuccessful = ({ onDismiss, bond, inputAmount, }) => {
     const initialReleaseUsd = initialReleaseAmount * (bond?.initPrice ?? 0);
     const vestedAmount = userAllocation * (1 - initialRelease);
     const vestedAmountUsd = vestedAmount * (bond?.initPrice ?? 0);
-    return (jsxs(Modal, { children: [jsx(ModalHeader, { hideDivider: true }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '15px' }, children: jsx(Text, { sx: { fontSize: '22px', fontWeight: 700 }, children: "Participation Successful" }) }), jsxs(Flex, { sx: {
-                            fontSize: '14px',
-                            fontWeight: 400,
-                            flexDirection: 'column',
-                        }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Your Deposit" }), jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: [formatNumberSI(inputValue), " ", bond?.lpToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", formatNumberSI(depositAmountUsd), ")"] })] })] }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: bond.yieldBond ? 'Initial Release' : 'Your Allocation' }), bond.yieldBond ? (jsx(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["$", formatNumberSI(userAllocationUsd), " in ", bond?.underlyingEarnToken?.symbol] }) })) : (jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [formatNumberSI(userAllocation), " ", bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", userAllocationUsd.toFixed(2), ")"] })] }))] }), bond.yieldBond && (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsx(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: "Yield Bonus" }), jsx(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["$", formatNumberSI(userYield), " in ", bond?.underlyingEarnToken?.symbol, " (over", ' ', getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "days)"] }) })] })), !bond.yieldBond && (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Initial Release", jsx(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx(Flex, { sx: { justifyContent: 'center' }, children: `You'll be able to claim an initial release of ${initialRelease * 100}% 
-                    of your allocation on ${formattedFinishDate}` }), children: jsx(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [getFirstNonZeroDigits(initialReleaseAmount, 2), ' ', bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol, jsxs(Flex, { sx: {
-                                                    color: 'textDisabledButton',
-                                                    ml: '5px',
-                                                }, children: ["($", initialReleaseUsd.toFixed(2), ")"] })] })] })), initialRelease !== 1 && (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mt: '5px' }, children: [jsxs(Flex, { sx: { fontSize: '12px', fontWeight: 400 }, children: ["Vested Tokens", jsx(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx(Flex, { sx: { justifyContent: 'center' }, children: `Remaining tokens will vest linearly over ${getTimePeriods(bond.vestingTerm).months} months after claiming the initial release.` }), children: jsx(Flex, { sx: { alignItems: 'center', height: '100%', ml: '5px' }, children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: {
-                                            fontSize: '12px',
-                                            fontWeight: 500,
-                                        }, children: [getFirstNonZeroDigits(vestedAmount, 2), " ", bond?.earnToken.symbol, jsxs(Flex, { sx: { color: 'textDisabledButton', ml: '5px' }, children: ["($", vestedAmountUsd.toFixed(2), ")"] })] })] })), jsx(Flex, { sx: { mt: '10px' }, children: `Your purchased bond can be found under the "Your Bonds" tab.` })] }), jsx(Button, { onClick: () => {
+    return (jsxs(Modal, { children: [jsx(ModalHeader, { hideDivider: true }), jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[15px]", children: jsx(Text, { size: "22px", weight: 700, children: "Participation Successful" }) }), jsxs(Flex, { className: "ape:text-[14px] ape:font-normal ape:flex-col", children: [jsxs(Flex, { className: "ape:w-full ape:justify-between", children: [jsx(Flex, { className: labelClasses, children: "Your Deposit" }), jsxs(Flex, { className: labelClasses, children: [formatNumberSI(inputValue), " ", bond?.lpToken.symbol, jsxs(Flex, { className: subValueClasses, children: ["($", formatNumberSI(depositAmountUsd), ")"] })] })] }), jsxs(Flex, { className: rowClasses, children: [jsx(Flex, { className: labelClasses, children: bond.yieldBond ? 'Initial Release' : 'Your Allocation' }), bond.yieldBond ? (jsx(Flex, { className: valueClasses, children: jsxs(Flex, { className: subValueClasses, children: ["$", formatNumberSI(userAllocationUsd), " in ", bond?.underlyingEarnToken?.symbol] }) })) : (jsxs(Flex, { className: valueClasses, children: [formatNumberSI(userAllocation), " ", bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol, jsxs(Flex, { className: subValueClasses, children: ["($", userAllocationUsd.toFixed(2), ")"] })] }))] }), bond.yieldBond && (jsxs(Flex, { className: rowClasses, children: [jsx(Flex, { className: labelClasses, children: "Yield Bonus" }), jsx(Flex, { className: valueClasses, children: jsxs(Flex, { className: subValueClasses, children: ["$", formatNumberSI(userYield), " in ", bond?.underlyingEarnToken?.symbol, " (over", ' ', getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "days)"] }) })] })), !bond.yieldBond && (jsxs(Flex, { className: rowClasses, children: [jsxs(Flex, { className: labelClasses, children: ["Initial Release", jsx(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx(Flex, { className: "ape:justify-center", children: `You'll be able to claim an initial release of ${initialRelease * 100}%
+                    of your allocation on ${formattedFinishDate}` }), children: jsx(Flex, { className: "ape:items-center ape:h-full ape:ml-[5px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: valueClasses, children: [getFirstNonZeroDigits(initialReleaseAmount, 2), ' ', bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol, jsxs(Flex, { className: subValueClasses, children: ["($", initialReleaseUsd.toFixed(2), ")"] })] })] })), initialRelease !== 1 && (jsxs(Flex, { className: rowClasses, children: [jsxs(Flex, { className: labelClasses, children: ["Vested Tokens", jsx(TooltipBubble, { placement: 'bottomLeft', transformTip: 'translate(-6%, 0%)', width: "250px", body: jsx(Flex, { className: "ape:justify-center", children: `Remaining tokens will vest linearly over ${getTimePeriods(bond.vestingTerm).months} months after claiming the initial release.` }), children: jsx(Flex, { className: "ape:items-center ape:h-full ape:ml-[5px]", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: valueClasses, children: [getFirstNonZeroDigits(vestedAmount, 2), " ", bond?.earnToken.symbol, jsxs(Flex, { className: subValueClasses, children: ["($", vestedAmountUsd.toFixed(2), ")"] })] })] })), jsx(Flex, { className: "ape:mt-[10px]", children: `Your purchased bond can be found under the "Your Bonds" tab.` })] }), jsx(Button, { onClick: () => {
                             handleToogle('Your Bonds');
                             onDismiss?.();
-                        }, sx: { fontSize: '14px', width: '100%', mt: '15px', height: '35px' }, children: "see your Bonds" })] })] }));
+                        }, className: "ape:text-[14px]! ape:w-full ape:mt-[15px] ape:h-[35px]", children: "see your Bonds" })] })] }));
 };
 
 export { ParticipationSuccessful as default };