@ape.swap/bonds-sdk 6.2.13 → 6.2.15

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

@@ -0,0 +1,38 @@
+const styles = {
+    mainComponent: {
+        width: '100%',
+        flexDirection: 'column',
+        overflow: ['hidden', 'hidden', 'hidden', 'visible'],
+        pt: '10px',
+        pb: ['10px', '10px', '10px', '20px'],
+    },
+    hotBondTitle: {
+        pt: '15px',
+        color: 'textDisabledButton',
+        fontSize: '13px',
+        fontWeight: 500,
+        cursor: 'pointer',
+        textTransform: 'uppercase',
+    },
+    desktopCards: {
+        width: '100%',
+        gap: '15px',
+        justifyContent: 'space-between',
+        flexDirection: ['column', 'column', 'column', 'row'],
+        display: 'none',
+        '@media screen and (min-width: 1000px)': {
+            display: 'flex',
+        },
+    },
+    desktopCard: {
+        backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)',
+        backgroundSize: 'cover',
+        width: '100%',
+        borderRadius: 'normal',
+        cursor: 'pointer',
+        height: '125px',
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/styles.ts"],"sourcesContent":["export const styles = {\n  mainComponent: {\n    width: '100%',\n    flexDirection: 'column',\n    overflow: ['hidden', 'hidden', 'hidden', 'visible'],\n    pt: '10px',\n    pb: ['10px', '10px', '10px', '20px'],\n  },\n  hotBondTitle: {\n    pt: '15px',\n    color: 'textDisabledButton',\n    fontSize: '13px',\n    fontWeight: 500,\n    cursor: 'pointer',\n    textTransform: 'uppercase',\n  },\n  desktopCards: {\n    width: '100%',\n    gap: '15px',\n    justifyContent: 'space-between',\n    flexDirection: ['column', 'column', 'column', 'row'],\n    display: 'none',\n    '@media screen and (min-width: 1000px)': {\n      display: 'flex',\n    },\n  },\n  desktopCard: {\n    backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)',\n    backgroundSize: 'cover',\n    width: '100%',\n    borderRadius: 'normal',\n    cursor: 'pointer',\n    height: '125px',\n  },\n}\n"],"names":[],"mappings":"AAAO,MAAM,MAAM,GAAG;AACpB,IAAA,aAAa,EAAE;AACb,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;AACnD,QAAA,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACrC,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,KAAK,EAAE,oBAAoB;AAC3B,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,aAAa,EAAE,WAAW;AAC3B,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,GAAG,EAAE,MAAM;AACX,QAAA,cAAc,EAAE,eAAe;QAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;AACpD,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,uCAAuC,EAAE;AACvC,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACF,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,eAAe,EAAE,4CAA4C;AAC7D,QAAA,cAAc,EAAE,OAAO;AACvB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,OAAO;AAChB,KAAA;;;;;"}

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

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

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

@@ -1,9 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/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, { 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}`))) })] }));
+    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}`))) })] }));
 };
 
 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 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;;;;"}
+{"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;;;;"}

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

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

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

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/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, { 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), "%"] })] })] }));
+    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), "%"] })] })] }));
 };
 
 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'\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;;;;"}
+{"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;;;;"}

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useTopTags } from '../../../../hooks/useTopTags.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
@@ -46,7 +46,17 @@ const RecommendationCards = () => {
             setActiveOption('Hot');
         }
     }, [account]);
-    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 &&
+    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 &&
                     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 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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"}
+{"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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"}

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'smallCardContainer' | 'subTitle', ThemeUIStyleObject>;

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

@@ -0,0 +1,24 @@
+const styles = {
+    smallCardContainer: {
+        width: '100%',
+        p: '6px 12px',
+        background: 'white2',
+        borderRadius: 'normal',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        cursor: 'pointer',
+        mr: '10px',
+        ':last-of-type': {
+            mr: '0px',
+        },
+    },
+    subTitle: {
+        color: 'textDisabledButton',
+        fontSize: '12px',
+        fontWeight: 400,
+        lineHeight: '16px',
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/views/Bonds/components/RecommendationCards/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<'smallCardContainer' | 'subTitle', ThemeUIStyleObject> = {\n  smallCardContainer: {\n    width: '100%',\n    p: '6px 12px',\n    background: 'white2',\n    borderRadius: 'normal',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    cursor: 'pointer',\n    mr: '10px',\n    ':last-of-type': {\n      mr: '0px',\n    },\n  },\n  subTitle: {\n    color: 'textDisabledButton',\n    fontSize: '12px',\n    fontWeight: 400,\n    lineHeight: '16px',\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAAkE;AACnF,IAAA,kBAAkB,EAAE;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,CAAC,EAAE,UAAU;AACb,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,cAAc,EAAE,eAAe;AAC/B,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,eAAe,EAAE;AACf,YAAA,EAAE,EAAE,KAAK;AACV,SAAA;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,oBAAoB;AAC3B,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AACf,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;;;;;"}

package/dist/views/Bonds/index.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/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 'react/jsx-runtime';
+import { jsx } from 'theme-ui/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 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
+    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 })) }));
 };
 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\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;;;;"}
+{"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;;;;"}

package/dist/views/BuyBond/BuyComponent.js

@@ -1,13 +1,12 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
-import clsx from 'clsx';
 import { convertToBigish } from '../../utils/convertToBigish.js';
 import { toFixedString, mulDivRound } from '../../utils/fixedPoint.js';
 import ABI_DEPOSIT from '../../config/abi/deposit.json.js';
 import ABI_DEPOSIT_SIG from '../../config/abi/depositSig.json.js';
 import { useChainId, useWriteContract, useSendTransaction } from 'wagmi';
 import useModal from '../../hooks/useModal.js';
-import { LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
+import { ChainId, LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
 import TokenSelectorPanel from '../../components/TokenSelectorPanel/index.js';
 import { useApproval } from '../../state/allowance/useAllowance.js';
 import { SoulZapTokenManager } from '../../config/constants/addresses.js';
@@ -50,6 +49,7 @@ import { formatNumberSI } from '../../utils/formatNumber.js';
 import TooltipBubble from '../../components/uikit-sdk/TooltipBubble/index.js';
 import GetUpToComponent from './components/GetUpToComponent/GetUpToComponent.js';
 import QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle.js';
+import L1XIframe from './components/L1xIframe/L1xIframe.js';
 
 const PROMOTION_TRACKING_SUFFIXES = {
     [Promotions.WelcomeBonus]: 'welcome-bonus',
@@ -347,6 +347,7 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
         }
     };
     // Modals
+    const [onOpenl1xIframe] = useModal(jsx(L1XIframe, {}));
     const [onOpenLifiModal] = useModal(jsx(LifiModal, { bondChain: bondChain, principalToken: isPrincipalTokenLP ? 'ETH' : bondData?.lpToken?.address?.[bondData?.chainId] }));
     const [openNewRateModal] = useModal(jsx(NewRateModal, { bond: bondData, zapTrueBondPrice: zapTrueBondPrice, depositAmount: depositAmount, youSpendString: youSpendString, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), true, false, 'newRateModal');
     const [openTxModal] = useModal(jsx(TransactionModal, { txChain: bondChain, approvalState: approvalState, approveCallback: handleApprove, loadingTx: loadingTx, txCallback: handleBothPurchases, bondData: bondData, inputToken: inputToken, inputValue: inputValue, depositAmount: depositAmount, buyTxHash: buyTxHash, rateChanged: rateChanged }), false, true, 'transactionModal');
@@ -377,11 +378,37 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [rateChanged]);
-    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 &&
+    return bondData ? (jsx(Flex, { className: "modal-content", sx: { ...MCBuyComponentStyles[bondData?.marketingCampaign] }, children: jsxs(Flex, { className: "modaltable-container", children: [jsx(BondModalHeader, { bondData: bondData, onDismiss: onDismiss, showProjectInfoButton: SDKConfig?.referenceId === 'apebond' }), jsx(ProjectDescription, { description: bondData.shortDescription, isProjectView: true }), jsx(Flex, { sx: { width: '100%', display: isProjectView ? ['flex', 'flex', 'flex', 'none'] : 'flex' }, children: jsx(BondCards, { bondData: bondData, isDoingMaxBuy: exceedsSafeMaxBuy && !exceedsRealMaxBuy }) }), jsx(Estimations, { depositAmount: depositAmount, inputValue: inputValue, inputTokenPrice: inputTokenPrice, bondData: bondData, youSpendString: youSpendString, isZap: isZapSupported, fetchingZapQuote: fetchingZapQuote, zapError: zapError }), jsx(TokenSelectorPanel, { typedValue: inputValue, setTypedValue: setInputValue, selectedToken: inputToken, handleValueBtn: handleMaxButton, handleCurrencySelect: handleCurrencySelect, bondChainId: bondData?.chainId, enableZap: isZapSupported, bondPrincipalToken: bondData?.lpToken, tokenBalance: inputCurrencyBalance, selectedTokenPrice: inputTokenPrice, inputDisabled: isUserRestricted, marketingCampaign: bondData?.marketingCampaign, isConnected: !!account }), SDKConfig.useTiers && (jsx(Fragment, { children: (bondData?.trueBondPrices?.length ?? 0) > 1 &&
                         bondData.earnToken.symbol.toLowerCase() !== 'ireet' &&
-                        tierOptimizerUIEnabled ? (jsx(PointsLeftForNextTier, { bond: bondData, inputAmount: inputValue, setInputValue: setInputValue, inputTokenPrice: inputTokenPrice, inputTokenDecimals: inputToken === 'NATIVE' ? 18 : (inputToken?.decimals?.[bondData?.chainId] ?? 18) })) : (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)
+                        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()
+                                        : bondChain === ChainId.L1X
+                                            ? onOpenl1xIframe()
+                                            : openExternal(), sx: { width: ['100%', '100%', '100%', '35%'], fontSize: ['14px', '14px', '14px', '16px'] }, children: LifiSupported.includes(bondChain)
                                         ? `Bridge to ${SHORT_NETWORK_LABEL[bondData?.chainId]}`
-                                        : `Get ${getSymbol(bondData?.lpToken, bondData?.chainId)}` }), isUserRestricted ? (jsx(Button, { className: "action-button 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 ||
+                                        : `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 ||
                                         bondData?.soldOut ||
                                         !account ||
                                         !inputValue ||
@@ -391,7 +418,7 @@ const BuyComponent = ({ onDismiss, bondAddress, bondChain, handlePurchasedBond,
                                         exceedsRealMaxBuy ||
                                         exceedsBalance ||
                                         (isZapSupported && !zapData) ||
-                                        SDKConfig.blockSales, onClick: handleOpenModal, children: SDKConfig.blockSales
+                                        SDKConfig.blockSales, onClick: handleOpenModal, sx: { fontSize: ['14px', '14px', '14px', '16px'] }, children: SDKConfig.blockSales
                                         ? 'Complete KYC to Buy'
                                         : exceedsRealMaxBuy
                                             ? 'Exceeds Max Buy. Reduce amount'