@ape.swap/bonds-sdk 6.2.12 → 6.2.13

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":";;;;;;;;;;;;;AAqBA,MAAM,mBAAmB,GAAG,MAAK;AAC/B,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;IAC5B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;IAC5C,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC;AAC9E,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,GAAG,WAAW,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE;AACtC,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAEhC,IAAA,MAAM,EAAE,IAAI,EAAE,qBAAqB,EAAE,GAAG,yBAAyB,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC;IAC1F,MAAM,WAAW,GACf,KAAK,IAAI,KAAK,EAAE,MAAM,GAAG;AACvB,UAAE,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CACb,CAAC,CAAC,EAAE,CAAC,KACH,CAAC,wBAAwB,CAAC,GAAG,EAAE,CAAC,EAAE,cAAc,CAAC,EAAE,YAAY,IAAI,CAAC;AACpE,aAAC,wBAAwB,CAAC,GAAG,EAAE,CAAC,EAAE,cAAc,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC;UAEzE,SAAS;AAEf,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,MAAM,CACvC,CAAC,IAAI,KAAK,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5G;IAED,MAAM,aAAa,GACjB,YAAY,KAAK,SAAS,GAAG,qBAAqB,GAAG,YAAY,KAAK,KAAK,GAAG,kBAAkB,GAAG,aAAa;AAElH,IAAA,MAAM,WAAW,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1G,MAAM,mBAAmB,GAAgC,WAAW,EAAE,GAAG,CAAC,CAAC,IAAI,KAAI;QACjF,MAAM,eAAe,GACnB,aAAa,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,GAAI,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAY;AAC/F,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM;QAEhG,OAAO;AACL,YAAA,eAAe,EAAE,eAAe;YAChC,eAAe;AACf,YAAA,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,CAAC;YAClC,KAAK,EAAE,OAAO,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,wBAAwB,CAAC,GAAG,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC;YAC9G,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB;AACH,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IAAI,OAAO,EAAE;YACX,eAAe,CAAC,SAAS,CAAC;QAC5B;aAAO;YACL,eAAe,CAAC,KAAK,CAAC;QACxB;AACF,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC9CA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,0GAA0G,EACpH,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,gBAAA,EAAA,CAGnB,EACPA,GAAA,CAAC,sBAAsB,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,GAAI,CAAA,EAAA,CACrG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wBAAwB,GAAG,CAAA,EAAA,CACtC,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mCAAmC,YAChD,mBAAmB;oBAClB,mBAAmB,CAAC,MAAM,GAAG,CAAC;oBAC9B,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACtC,wBAAA,OAAOA,GAAA,CAAC,uBAAuB,EAAA,EAAC,cAAc,EAAE,IAAI,EAAA,EAAO,CAAA,EAAG,IAAI,CAAC,eAAe,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAAI;AACnG,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/views/Bonds/index.js

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

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-[400px]! ape:max-w-[700px]! ape:mt-[-10px] 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\n      className=\"modal ape:w-[400px]! ape:max-w-[700px]! ape:mt-[-10px] ape:p-0!\"\n      onDismiss={onDismiss}\n    >\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,EACJ,SAAS,EAAC,iEAAiE,EAC3E,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,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,5 +1,6 @@
-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';
@@ -376,33 +377,11 @@ 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 &&
+    return bondData ? (jsx(Flex, { className: "modal-content ape:flex ape:flex-col ape:rounded-[10px] ape:bg-white2 ape:w-full ape:p-[15px] ape:min-[800px]:p-[20px]", style: { ...MCBuyComponentStyles[bondData?.marketingCampaign] }, children: jsxs(Flex, { className: "modaltable-container ape:w-full ape:flex ape:flex-col ape:relative", 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:hidden ape:lg:flex' : '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 && (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) })) : (jsx(GetUpToComponent, { bond: bondData, depositAmount: depositAmount })) })), bondData.earnToken.symbol.toLowerCase() === 'ireet' && (jsx(Flex, { sx: {
-                        width: '100%',
-                        background: '#DE62F366',
-                        mt: '10px',
-                        borderRadius: 'normal',
-                        p: '2px 10px',
-                        minHeight: '28px',
-                        alignItems: 'center',
-                    }, children: jsxs("span", { sx: { flex: 1, fontSize: '12px', fontWeight: 400 }, children: ["Extra rewards to be distributed in pmUSD by RAAC at bond maturity.", ' ', jsx("span", { sx: {
-                                    display: ['inline-flex', 'inline-flex', 'inline-flex', 'none'],
-                                    alignItems: 'center',
-                                    verticalAlign: 'middle',
-                                }, children: jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: `If the bond gets filled before April 21st, all buyers get a 2% $pmUSD bonus (5% total bonus). Under the same condition, RAAC Bot NFT holders get an extra 2% on top (7% total bonus).` }), width: '200px', placement: "topRight", transformTip: "translate(12%, -8%)", children: jsx(Flex, { sx: { opacity: 0.6 }, children: jsx(QuestionCircle, { width: "12px" }) }) }) }), jsx("span", { sx: {
-                                    display: ['none', 'none', 'none', 'inline-flex'],
-                                    alignItems: 'center',
-                                    verticalAlign: 'middle',
-                                }, children: jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: `If the bond gets filled before April 21st, all buyers get a 2% $pmUSD bonus (5% total bonus). Under the same condition, RAAC Bot NFT holders get an extra 2% on top (7% total bonus).` }), width: '280px', placement: "topRight", transformTip: "translate(10%, -11%)", children: jsx(Flex, { sx: { opacity: 0.6 }, children: jsx(QuestionCircle, { width: "12px" }) }) }) })] }) })), 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) ? onOpenLifiModal() : openExternal()), sx: { width: ['100%', '100%', '100%', '35%'], fontSize: ['14px', '14px', '14px', '16px'] }, children: LifiSupported.includes(bondChain)
+                        tierOptimizerUIEnabled ? (jsx(PointsLeftForNextTier, { bond: bondData, inputAmount: inputValue, setInputValue: setInputValue, inputTokenPrice: inputTokenPrice, inputTokenDecimals: inputToken === 'NATIVE' ? 18 : (inputToken?.decimals?.[bondData?.chainId] ?? 18) })) : (jsx(GetUpToComponent, { bond: bondData, depositAmount: depositAmount })) })), bondData.earnToken.symbol.toLowerCase() === 'ireet' && (jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:rounded-normal ape:p-[2px_10px] ape:min-h-[28px] ape:items-center", style: { background: '#DE62F366' }, children: jsxs("span", { className: "ape:flex-1 ape:text-[12px] ape:font-normal", children: ["Extra rewards to be distributed in pmUSD by RAAC at bond maturity.", ' ', jsx("span", { className: "ape:inline-flex ape:lg:hidden ape:items-center ape:align-middle", children: jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: `If the bond gets filled before April 21st, all buyers get a 2% $pmUSD bonus (5% total bonus). Under the same condition, RAAC Bot NFT holders get an extra 2% on top (7% total bonus).` }), width: '200px', placement: "topRight", transformTip: "translate(12%, -8%)", children: jsx(Flex, { className: "ape:opacity-60", children: jsx(QuestionCircle, { width: "12px" }) }) }) }), jsx("span", { className: "ape:hidden ape:lg:inline-flex ape:items-center ape:align-middle", children: jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: `If the bond gets filled before April 21st, all buyers get a 2% $pmUSD bonus (5% total bonus). Under the same condition, RAAC Bot NFT holders get an extra 2% on top (7% total bonus).` }), width: '280px', placement: "topRight", transformTip: "translate(10%, -11%)", children: jsx(Flex, { className: "ape:opacity-60", children: jsx(QuestionCircle, { width: "12px" }) }) }) })] }) })), bondData?.warningCard && (jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:rounded-normal ape:p-[2px_10px]", style: { background: '#DE62F366' }, children: jsx(Text, { size: "12px", className: "ape:font-normal ape:flex ape:items-center ape:gap-[10px]", children: jsx(SafeHTMLComponent, { html: bondData?.warningCard }) }) })), jsx(Flex, { className: "modaltable-container button-container ape:w-full ape:flex ape:relative ape:flex-row ape:pt-[10px] 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:lg:flex-row", children: [jsx(Button, { variant: "secondary", onClick: () => (LifiSupported.includes(bondChain) ? onOpenLifiModal() : openExternal()), className: "ape:w-full ape:lg:w-[35%] ape:text-[14px]! ape:lg:text-[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 ||
+                                        : `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 ||
@@ -412,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'