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

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

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

Files changed (995) hide show

package/dist/views/YourBondsModal/components/NFTImage/NFTImage.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import { useAnimation, AnimatePresence, motion } from 'framer-motion';
 import LinkShare from '../LinkShare/LinkShare.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
@@ -37,15 +38,7 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
         setShowNFTImg(false);
         setIsOpenTraits(false);
     };
-    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: showNFTImg && (jsx(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, sx: {
-                        position: 'absolute',
-                        display: ['flex'],
-                        top: ['-180px', '-180px', '-240px'],
-                        right: ['50%', '50%', '50%', '-13%'],
-                        transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],
-                        opacity: 0,
-                        zIndex: 5000,
-                    }, children: jsx(LinkShare, { userBill: userBill }) })) }), jsx(AnimatePresence, { children: bondNFTData?.image && (jsxs(motion.div, { animate: controls, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: showNFTImg && (jsx(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, className: "ape:absolute ape:flex ape:top-[-180px] ape:sm:top-[-240px] ape:right-[50%] ape:md:right-[-13%] ape:translate-x-[50%] ape:md:translate-x-0 ape:opacity-0 ape:z-[5000]", children: jsx(LinkShare, { userBill: userBill }) })) }), jsx(AnimatePresence, { children: bondNFTData?.image && (jsxs(motion.div, { animate: controls, onClick: () => {
                         if (showNFTImg) {
                             closeAnimation();
                         }
@@ -54,87 +47,16 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
                         }
                     }, onAnimationStart: () => {
                         setShowNFTImg(true);
-                    }, sx: {
-                        display: 'flex',
-                        zIndex: -1,
-                        position: showNFTImg ? 'fixed' : 'absolute',
-                        bottom: 'calc(100% - 10px)',
-                        left: '25%',
-                        width: '50%',
-                        aspectRatio: '1 / 0.56',
-                        cursor: 'pointer',
-                        borderRadius: 'normal',
-                        flexDirection: 'column',
-                        '&: hover': {
-                            zIndex: [1000, 1000, 1000, '1000 !important'],
-                        },
-                    }, children: [jsxs(Flex, { sx: {
-                                display: showNFTImg ? 'none' : 'flex',
-                                position: 'absolute',
-                                zIndex: 121,
-                                width: '100%',
-                                height: '100%',
-                                opacity: 0,
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontWeight: 700,
-                                borderRadius: 'normal',
-                                '&: hover': {
-                                    zIndex: 1000,
-                                    opacity: 0.8,
-                                    background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',
-                                    backdropFilter: ' blur(2px)',
-                                },
-                            }, children: ["View NFT ", '>'] }), showNFTImg && (jsx(Flex, { sx: {
-                                position: 'absolute',
-                                top: '5px',
-                                right: '5px',
-                                background: 'grey',
-                                opacity: 0.9,
-                                p: '2px',
-                                borderRadius: '50%',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }, children: jsx(Flex, { sx: { width: '6px' }, children: jsx(Close, {}) }) })), jsx(ProgressiveImage, { src: `${bondNFTData?.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx(Flex, { sx: {
-                                position: 'absolute',
-                                bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],
-                                width: '100%',
-                                justifyContent: 'center',
-                            }, children: jsxs(Flex, { sx: {
-                                    flexDirection: 'column',
-                                    width: '100%',
-                                    minWidth: '250px',
-                                    pb: '10px',
-                                    alignItems: 'center',
-                                    transform: [
-                                        'scale(0.5) translateY(-50%)',
-                                        'scale(0.5) translateY(-50%)',
-                                        'scale(0.5) translateY(-50%)',
-                                        'scale(0.4) translateY(-75%)',
-                                    ],
-                                }, children: [jsxs(Flex, { sx: {
-                                            justifyContent: 'space-between',
-                                            height: '24px',
-                                            backgroundColor: 'white3',
-                                            px: '15px',
-                                            width: '100%',
-                                            borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
-                                        }, onClick: (event) => {
+                    }, className: clsx('ape:flex ape:-z-[1] ape:bottom-[calc(100%-10px)] ape:left-[25%] ape:w-1/2 ape:aspect-[1/0.56] ape:cursor-pointer ape:rounded-normal ape:flex-col ape:hover:z-[1000] ape:md:hover:z-[1000]!', showNFTImg ? 'ape:fixed' : 'ape:absolute'), children: [jsxs(Flex, { className: clsx(showNFTImg ? 'ape:hidden' : 'ape:flex', 'ape:absolute ape:z-[121] ape:w-full ape:h-full ape:opacity-0 ape:items-center ape:justify-center ape:font-bold ape:rounded-normal ape:hover:z-[1000] ape:hover:opacity-80 ape:hover:[background:linear-gradient(90deg,rgba(49,46,122,0.70)_0%,rgba(92,79,174,0.70)_100%)] ape:hover:[backdrop-filter:blur(2px)]'), children: ["View NFT ", '>'] }), showNFTImg && (jsx(Flex, { className: "ape:absolute ape:top-[5px] ape:right-[5px] ape:bg-[grey] ape:opacity-90 ape:p-[2px] ape:rounded-[50%] ape:items-center ape:justify-center", children: jsx(Flex, { className: "ape:w-[6px]", children: jsx(Close, {}) }) })), jsx(ProgressiveImage, { src: `${bondNFTData?.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx(Flex, { className: "ape:absolute ape:bottom-[-43px] ape:md:-bottom-12.5 ape:w-full ape:justify-center", children: jsxs(Flex, { className: "ape:flex-col ape:w-full ape:min-w-[250px] ape:pb-[10px] ape:items-center ape:scale-[0.5] ape:-translate-y-1/2 ape:md:scale-[0.4] ape:md:-translate-y-3/4", children: [jsxs(Flex, { className: clsx('ape:justify-between ape:h-[24px] ape:bg-white3 ape:px-[15px] ape:w-full', isOpenTraits ? 'ape:rounded-[6px_6px_0px_0px]' : 'ape:rounded-normal'), onClick: (event) => {
                                             event.stopPropagation();
                                             setIsOpenTraits(!isOpenTraits);
-                                        }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx(Tag, { direction: "down" }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx(Caret, { direction: isOpenTraits ? 'up' : 'down' })] }), jsx(AnimatePresence, { children: isOpenTraits && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
-                                                overflow: 'hidden',
-                                                width: '100%',
-                                                position: 'absolute',
-                                                top: '24px',
-                                                borderRadius: '0 0 10px 10px',
-                                            }, onClick: (event) => {
+                                        }, children: [jsxs(Flex, { className: "ape:gap-[10px] ape:items-center", children: [jsx(Tag, { direction: "down" }), jsx(Text, { size: "12px", weight: 400, className: "ape:opacity-60", children: "Traits" })] }), jsx(Caret, { direction: isOpenTraits ? 'up' : 'down' })] }), jsx(AnimatePresence, { children: isOpenTraits && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, className: "ape:overflow-hidden ape:w-full ape:absolute ape:top-[24px] ape:rounded-[0_0_10px_10px]", onClick: (event) => {
                                                 event.stopPropagation();
                                                 setIsOpenTraits(!isOpenTraits);
-                                            }, children: jsx(Flex, { sx: { flexDirection: 'column' }, children: attributes
-                                                    ? attributes.map((a, index) => (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsxs(Text, { sx: { fontSize: '10px', fontWeight: 500, mr: '3px' }, children: [a?.trait_type, " -"] }), jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a?.value })] }, `${a.value}-${index}`)))
+                                            }, children: jsx(Flex, { className: "ape:flex-col", children: attributes
+                                                    ? attributes.map((a, index) => (jsxs(Flex, { className: "ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]", children: [jsxs(Text, { size: "10px", weight: 500, className: "ape:mr-[3px]", children: [a?.trait_type, " -"] }), jsx(Text, { size: "10px", weight: 500, children: a?.value })] }, `${a.value}-${index}`)))
                                                     : BILL_ATTRIBUTES.map((attrib, index) => {
-                                                        return (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx(Skeleton, { width: "150px" })] }, `${attrib}-${index}`));
+                                                        return (jsxs(Flex, { className: "ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]", children: [jsx(Text, { size: "10px", weight: 500, children: attrib }), jsx(Skeleton, { width: "150px" })] }, `${attrib}-${index}`));
                                                     }) }) })) })] }) }))] })) })] }));
 };

package/dist/views/YourBondsModal/components/NFTImage/NFTImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { AnimatePresence, motion, useAnimation } from 'framer-motion'\nimport LinkShare from '../LinkShare/LinkShare'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport ProgressiveImage from '../../../../components/ProgressiveImage'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\nimport Close from '../../../../components/uikit-sdk/Svg/Icons/Close'\nimport Tag from '../../../../components/uikit-sdk/Svg/Icons/Tag'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\n\nconst NftImage = ({\n userBill,\n showNFTImg,\n setShowNFTImg,\n}: {\n userBill?: UserBill\n showNFTImg: boolean\n setShowNFTImg: (value: boolean) => void\n}) => {\n // Hooks\n const controls = useAnimation()\n const isMobile = useIsMobile()\n\n // State\n const [isOpenTraits, setIsOpenTraits] = useState<boolean>(false)\n\n //Static Data\n const bondNFTData = userBill?.nftData\n const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation']\n const attributes = bondNFTData?.attributes?.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type))\n\n const openAnimation = () => {\n controls.start({\n scale: isMobile ? [1, 2] : [1, 3],\n zIndex: 1000,\n transition: { duration: 0.2 },\n })\n }\n\n const closeAnimation = () => {\n controls.start({\n scale: isMobile ? [2, 1] : [2, 1],\n zIndex: -1,\n transition: { duration: 0.3 },\n })\n setShowNFTImg(false)\n setIsOpenTraits(false)\n }\n return (\n <>\n <AnimatePresence>\n {showNFTImg && (\n <motion.div\n animate={{ opacity: 1 }}\n transition={{ duration: 1, delay: 0.3 }}\n sx={{\n position: 'absolute',\n display: ['flex'],\n top: ['-180px', '-180px', '-240px'],\n right: ['50%', '50%', '50%', '-13%'],\n transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],\n opacity: 0,\n zIndex: 5000,\n }}\n >\n <LinkShare userBill={userBill} />\n </motion.div>\n )}\n </AnimatePresence>\n <AnimatePresence>\n {bondNFTData?.image && (\n <motion.div\n animate={controls}\n onClick={() => {\n if (showNFTImg) {\n closeAnimation()\n } else {\n openAnimation()\n }\n }}\n onAnimationStart={() => {\n setShowNFTImg(true)\n }}\n sx={{\n display: 'flex',\n zIndex: -1,\n position: showNFTImg ? 'fixed' : 'absolute',\n bottom: 'calc(100% - 10px)',\n left: '25%',\n width: '50%',\n aspectRatio: '1 / 0.56',\n cursor: 'pointer',\n borderRadius: 'normal',\n flexDirection: 'column',\n '&: hover': {\n zIndex: [1000, 1000, 1000, '1000 !important'],\n },\n }}\n >\n <Flex\n sx={{\n display: showNFTImg ? 'none' : 'flex',\n position: 'absolute',\n zIndex: 121,\n width: '100%',\n height: '100%',\n opacity: 0,\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: 700,\n borderRadius: 'normal',\n '&: hover': {\n zIndex: 1000,\n opacity: 0.8,\n background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',\n backdropFilter: ' blur(2px)',\n },\n }}\n >\n View NFT {'>'}\n </Flex>\n {showNFTImg && (\n <Flex\n sx={{\n position: 'absolute',\n top: '5px',\n right: '5px',\n background: 'grey',\n opacity: 0.9,\n p: '2px',\n borderRadius: '50%',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <Flex sx={{ width: '6px' }}>\n <Close />\n </Flex>\n </Flex>\n )}\n <ProgressiveImage src={`${bondNFTData?.image}`} blurSrc={`https://ape.bond/images/bills/bluredNFT.png`} />\n {showNFTImg && (\n <Flex\n sx={{\n position: 'absolute',\n bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],\n width: '100%',\n justifyContent: 'center',\n }}\n >\n <Flex\n sx={{\n flexDirection: 'column',\n width: '100%',\n minWidth: '250px',\n pb: '10px',\n alignItems: 'center',\n transform: [\n 'scale(0.5) translateY(-50%)',\n 'scale(0.5) translateY(-50%)',\n 'scale(0.5) translateY(-50%)',\n 'scale(0.4) translateY(-75%)',\n ],\n }}\n >\n <Flex\n sx={{\n justifyContent: 'space-between',\n height: '24px',\n backgroundColor: 'white3',\n px: '15px',\n width: '100%',\n borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,\n }}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n setIsOpenTraits(!isOpenTraits)\n }}\n >\n <Flex sx={{ gap: '10px', alignItems: 'center' }}>\n <Tag direction=\"down\" />\n <Text sx={{ fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }}>Traits</Text>\n </Flex>\n <Caret direction={isOpenTraits ? 'up' : 'down'} />\n </Flex>\n <AnimatePresence>\n {isOpenTraits && (\n <motion.div\n initial={{ height: 0 }}\n animate={{ height: 'fit-content' }}\n transition={{ opacity: { duration: 0.2 } }}\n exit={{ height: 0 }}\n sx={{\n overflow: 'hidden',\n width: '100%',\n position: 'absolute',\n top: '24px',\n borderRadius: '0 0 10px 10px',\n }}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n setIsOpenTraits(!isOpenTraits)\n }}\n >\n <Flex sx={{ flexDirection: 'column' }}>\n {attributes\n ? attributes.map((a, index) => (\n <Flex\n key={`${a.value}-${index}`}\n sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n >\n <Text sx={{ fontSize: '10px', fontWeight: 500, mr: '3px' }}>{a?.trait_type} -</Text>\n <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{a?.value}</Text>\n </Flex>\n ))\n : BILL_ATTRIBUTES.map((attrib, index) => {\n return (\n <Flex\n key={`${attrib}-${index}`}\n sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n >\n <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{attrib}</Text>\n <Skeleton width=\"150px\" />\n </Flex>\n )\n })}\n </Flex>\n </motion.div>\n )}\n </AnimatePresence>\n </Flex>\n </Flex>\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </>\n )\n}\n\nexport default NftImage\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { AnimatePresence, motion, useAnimation } from 'framer-motion'\nimport LinkShare from '../LinkShare/LinkShare'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport ProgressiveImage from '../../../../components/ProgressiveImage'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\nimport Close from '../../../../components/uikit-sdk/Svg/Icons/Close'\nimport Tag from '../../../../components/uikit-sdk/Svg/Icons/Tag'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\n\nconst NftImage = ({\n userBill,\n showNFTImg,\n setShowNFTImg,\n}: {\n userBill?: UserBill\n showNFTImg: boolean\n setShowNFTImg: (value: boolean) => void\n}) => {\n // Hooks\n const controls = useAnimation()\n const isMobile = useIsMobile()\n\n // State\n const [isOpenTraits, setIsOpenTraits] = useState<boolean>(false)\n\n //Static Data\n const bondNFTData = userBill?.nftData\n const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation']\n const attributes = bondNFTData?.attributes?.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type))\n\n const openAnimation = () => {\n controls.start({\n scale: isMobile ? [1, 2] : [1, 3],\n zIndex: 1000,\n transition: { duration: 0.2 },\n })\n }\n\n const closeAnimation = () => {\n controls.start({\n scale: isMobile ? [2, 1] : [2, 1],\n zIndex: -1,\n transition: { duration: 0.3 },\n })\n setShowNFTImg(false)\n setIsOpenTraits(false)\n }\n return (\n <>\n <AnimatePresence>\n {showNFTImg && (\n <motion.div\n animate={{ opacity: 1 }}\n transition={{ duration: 1, delay: 0.3 }}\n className=\"ape:absolute ape:flex ape:top-[-180px] ape:sm:top-[-240px] ape:right-[50%] ape:md:right-[-13%] ape:translate-x-[50%] ape:md:translate-x-0 ape:opacity-0 ape:z-[5000]\"\n >\n <LinkShare userBill={userBill} />\n </motion.div>\n )}\n </AnimatePresence>\n <AnimatePresence>\n {bondNFTData?.image && (\n <motion.div\n animate={controls}\n onClick={() => {\n if (showNFTImg) {\n closeAnimation()\n } else {\n openAnimation()\n }\n }}\n onAnimationStart={() => {\n setShowNFTImg(true)\n }}\n className={clsx(\n 'ape:flex ape:-z-[1] ape:bottom-[calc(100%-10px)] ape:left-[25%] ape:w-1/2 ape:aspect-[1/0.56] ape:cursor-pointer ape:rounded-normal ape:flex-col ape:hover:z-[1000] ape:md:hover:z-[1000]!',\n showNFTImg ? 'ape:fixed' : 'ape:absolute',\n )}\n >\n <Flex\n className={clsx(\n showNFTImg ? 'ape:hidden' : 'ape:flex',\n 'ape:absolute ape:z-[121] ape:w-full ape:h-full ape:opacity-0 ape:items-center ape:justify-center ape:font-bold ape:rounded-normal ape:hover:z-[1000] ape:hover:opacity-80 ape:hover:[background:linear-gradient(90deg,rgba(49,46,122,0.70)_0%,rgba(92,79,174,0.70)_100%)] ape:hover:[backdrop-filter:blur(2px)]',\n )}\n >\n View NFT {'>'}\n </Flex>\n {showNFTImg && (\n <Flex className=\"ape:absolute ape:top-[5px] ape:right-[5px] ape:bg-[grey] ape:opacity-90 ape:p-[2px] ape:rounded-[50%] ape:items-center ape:justify-center\">\n <Flex className=\"ape:w-[6px]\">\n <Close />\n </Flex>\n </Flex>\n )}\n <ProgressiveImage src={`${bondNFTData?.image}`} blurSrc={`https://ape.bond/images/bills/bluredNFT.png`} />\n {showNFTImg && (\n <Flex className=\"ape:absolute ape:bottom-[-43px] ape:md:-bottom-12.5 ape:w-full ape:justify-center\">\n <Flex className=\"ape:flex-col ape:w-full ape:min-w-[250px] ape:pb-[10px] ape:items-center ape:scale-[0.5] ape:-translate-y-1/2 ape:md:scale-[0.4] ape:md:-translate-y-3/4\">\n <Flex\n className={clsx(\n 'ape:justify-between ape:h-[24px] ape:bg-white3 ape:px-[15px] ape:w-full',\n isOpenTraits ? 'ape:rounded-[6px_6px_0px_0px]' : 'ape:rounded-normal',\n )}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n setIsOpenTraits(!isOpenTraits)\n }}\n >\n <Flex className=\"ape:gap-[10px] ape:items-center\">\n <Tag direction=\"down\" />\n <Text size=\"12px\" weight={400} className=\"ape:opacity-60\">\n Traits\n </Text>\n </Flex>\n <Caret direction={isOpenTraits ? 'up' : 'down'} />\n </Flex>\n <AnimatePresence>\n {isOpenTraits && (\n <motion.div\n initial={{ height: 0 }}\n animate={{ height: 'fit-content' }}\n transition={{ opacity: { duration: 0.2 } }}\n exit={{ height: 0 }}\n className=\"ape:overflow-hidden ape:w-full ape:absolute ape:top-[24px] ape:rounded-[0_0_10px_10px]\"\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n setIsOpenTraits(!isOpenTraits)\n }}\n >\n <Flex className=\"ape:flex-col\">\n {attributes\n ? attributes.map((a, index) => (\n <Flex\n key={`${a.value}-${index}`}\n className=\"ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]\"\n >\n <Text size=\"10px\" weight={500} className=\"ape:mr-[3px]\">\n {a?.trait_type} -\n </Text>\n <Text size=\"10px\" weight={500}>\n {a?.value}\n </Text>\n </Flex>\n ))\n : BILL_ATTRIBUTES.map((attrib, index) => {\n return (\n <Flex\n key={`${attrib}-${index}`}\n className=\"ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]\"\n >\n <Text size=\"10px\" weight={500}>\n {attrib}\n </Text>\n <Skeleton width=\"150px\" />\n </Flex>\n )\n })}\n </Flex>\n </motion.div>\n )}\n </AnimatePresence>\n </Flex>\n </Flex>\n )}\n </motion.div>\n )}\n </AnimatePresence>\n </>\n )\n}\n\nexport default NftImage\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/views/YourBondsModal/components/Recommendations/CardRecommendation.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ declare const CardRecommendation: ({ cardIndex, bond, handleBuyBondClick, }: {
     cardIndex: number;
     bond: BondRecommendation;
     handleBuyBondClick: (chain: number, bondAddress: string, cardIndex: number) => void;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default CardRecommendation;

package/dist/views/YourBondsModal/components/Recommendations/CardRecommendation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
 import { getVestingTermsString } from '../../../../utils/displayHelpers.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
@@ -6,20 +6,7 @@ import Button from '../../../../components/uikit-sdk/Button/Button.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 const CardRecommendation = ({ cardIndex, bond, handleBuyBondClick, }) => {
-    return (jsxs(Flex, { sx: {
-            flexDirection: 'column',
-            width: ['100%', '100%', '100%', '50%'],
-            gap: '10px',
-            background: 'white3',
-            p: '10px',
-            borderRadius: '10px',
-        }, children: [jsx(Flex, { sx: {
-                    flexDirection: 'column',
-                    width: '100%',
-                    borderRadius: '10px',
-                    justifyContent: 'space-between',
-                    gap: '14px',
-                }, children: jsxs(Flex, { sx: { alignItems: 'center', justifyContent: 'space-between', gap: '10px' }, children: [jsxs(Flex, { sx: { gap: '5px', justifyContent: 'center', alignItems: 'center' }, children: [jsx(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx(Text, { sx: { fontSize: '14px' }, children: bond.payoutTokenName }), jsx(Text, { sx: { fontSize: '14px', fontWeight: 400, opacity: 0.6 }, children: getVestingTermsString(bond) })] }), jsx(Flex, { sx: { flexDirection: 'column', gap: '1px', alignItems: 'end' }, children: jsxs(Text, { sx: { color: 'success', fontSize: '12px', fontWeight: 700 }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), sx: { width: '100%', lineHeight: '20px', height: '30px', fontSize: '14px' }, children: "Buy" })] }));
+    return (jsxs(Flex, { className: "ape:flex-col ape:w-full ape:lg:w-1/2 ape:gap-[10px] ape:bg-white3 ape:p-[10px] ape:rounded-[10px]", children: [jsx(Flex, { className: "ape:flex-col ape:w-full ape:rounded-[10px] ape:justify-between ape:gap-[14px]", children: jsxs(Flex, { className: "ape:items-center ape:justify-between ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:gap-[5px] ape:justify-center ape:items-center", children: [jsx(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx(Text, { size: "14px", children: bond.payoutTokenName }), jsx(Text, { size: "14px", weight: 400, className: "ape:opacity-60", children: getVestingTermsString(bond) })] }), jsx(Flex, { className: "ape:flex-col ape:gap-[1px] ape:items-end", children: jsxs(Text, { size: "12px", weight: 700, style: { color: 'var(--ape-color-success)' }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), className: "ape:w-full ape:h-[30px] ape:text-[14px]!", style: { lineHeight: '20px' }, children: "Buy" })] }));
 };
 export { CardRecommendation as default };

package/dist/views/YourBondsModal/components/Recommendations/CardRecommendation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardRecommendation.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendation.tsx"],"sourcesContent":["import TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondRecommendation } from '../../../../state/recommendations/useGetBondRecommendations'\nimport { getVestingTermsString } from '../../../../utils/displayHelpers'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst CardRecommendation = ({\n cardIndex,\n bond,\n handleBuyBondClick,\n}: {\n cardIndex: number\n bond: BondRecommendation\n handleBuyBondClick: (chain: number, bondAddress: string, cardIndex: number) => void\n}) => {\n return (\n <Flex~~\n sx={{\n flexDirection~~: ~~'column',\n width~~: [~~'100%',~~ ~~'100%', '100%', '50%'],\n gap~~: ~~'10px',\n background~~: ~~'white3',\n~~ p: ~~'10px',\n borderRadius~~: '10px~~',\n }}~~\n >\n <Flex~~\n sx={{\n flexDirection~~: ~~'column',\n width~~: ~~'100%',\n borderRadius~~: ~~'10px',\n justifyContent~~: ~~'space~~-between~~',\n~~ gap~~: '~~14px~~',\n }}~~\n >\n <Flex ~~sx={{ alignItems~~: 'center', ~~justifyContent~~: ~~'space~~-between', gap~~: '~~10px~~' }}~~>\n <Flex ~~sx={{~~ gap~~: '~~5px', ~~justifyContent~~: 'center', ~~alignItems~~: 'center~~' }}~~>\n <TokenImage symbol={bond.payoutTokenName} chain={bond.chainId} size={25} />\n <Text ~~sx={{ fontSize: '~~14px~~' }}~~>{bond.payoutTokenName}</Text>\n <Text sx={{ ~~fontSize~~: ~~'14px', fontWeight: 400,~~ opacity~~: 0.6 }}>~~{getVestingTermsString(bond as any)}</Text>\n </Flex>\n <Flex ~~sx={{~~ ~~flexDirection~~: ~~'column',~~ gap~~: '~~1px', ~~alignItems~~: 'end~~' }}~~>\n <Text sx={{ color: 'success', ~~fontSize: '12px', fontWeight: 700~~ }}>{bond.bonus.toFixed(2)}~~%</~~Text>\n </Flex>\n </Flex>\n </Flex>\n <Button\n onClick={() => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex)}\n sx={{ ~~width: '100%',~~ lineHeight: '20px', ~~height: '30px', fontSize: '14px'~~ }}\n >\n Buy\n </Button>\n </Flex>\n )\n}\n\nexport default CardRecommendation\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAOA,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,kBAAkB,GAKnB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,~~EACH~~,~~EAAE~~,~~EAAE;AACF~~,~~YAAA~~,~~aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;AACtC,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA,~~EAAA,QAAA,EAAA,~~CAEDC~~,GAAA,CAAC,IAAI,~~EAAA~~,~~EACH~~,~~EAAE~~,~~EAAE;AACF,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,YAAY,EAAE,MAAM;AACpB,oBAAA,cAAc,EAAE,eAAe;AAC/B,oBAAA,GAAG,EAAE,MAAM;iBACZ,~~EAAA,QAAA,~~EAEDD~~,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,~~CAC9EA~~,~~KAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACtEC,~~GAAA,CAAC,UAAU,~~IAAC~~,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,~~GAAI~~,EAC3EA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE,QAAQ,EAAE,~~MAAM,~~EAAE~~,~~EAAA,QAAA,EAAG,~~IAAI,CAAC,eAAe,~~GAAQ~~,~~EAC7DA~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,~~EAAE,~~MAAM,EAAE,~~UAAU,EAAE,~~GAAG,EAAE,~~OAAO~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~EAAA,QAAA,EAAG,~~qBAAqB,CAAC,IAAW,CAAC,~~GAAQ~~,CAAA,EAAA,~~CACrG~~,EACPA,~~IAAC~~,IAAI,~~EAAA~~,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~KAAK,~~EAAE,~~YAClED~~,~~IAAA,CAAC,IAAI,IAAC,~~EAAE,~~EAAE,EAAE,~~KAAK,EAAE,~~SAAS,~~EAAE,~~QAAQ~~,EAAE,~~MAAM~~,EAAE,~~UAAU,EAAE,GAAG,EAAE,~~EAAA,QAAA,EAAA,~~CAAG~~,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,~~SAAS~~,EAAA,~~CAC7F~~,CAAA,EAAA,CACF,GACF,EACPC,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,MAAM,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC5E,~~EAAE~~,~~EAAE~~,~~EAAE~~,KAAK,EAAE,~~MAAM,~~EAAE,UAAU,EAAE,MAAM,EAAE,~~MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,KAAA,EAAA,~~CAGpE~~,CAAA,EAAA,CACJ;AAEX;;;;"}
1	+ {"version":3,"file":"CardRecommendation.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendation.tsx"],"sourcesContent":["import TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondRecommendation } from '../../../../state/recommendations/useGetBondRecommendations'\nimport { getVestingTermsString } from '../../../../utils/displayHelpers'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst CardRecommendation = ({\n cardIndex,\n bond,\n handleBuyBondClick,\n}: {\n cardIndex: number\n bond: BondRecommendation\n handleBuyBondClick: (chain: number, bondAddress: string, cardIndex: number) => void\n}) => {\n return (\n <Flex className=\"ape:flex-col ape:w-full ape:lg:w-1/2 ape:gap-[10px] ape:bg-white3 ape:p-[10px] ape:rounded-[10px]\">\n <Flex className=\"ape:flex-col ape:w-full ape:rounded-[10px] ape:justify-between ape:gap-[14px]\">\n <Flex className=\"ape:items-center ape:justify-between ape:gap-[10px]\">\n <Flex className=\"ape:gap-[5px] ape:justify-center ape:items-center\">\n <TokenImage symbol={bond.payoutTokenName} chain={bond.chainId} size={25} />\n <Text size=\"14px\">{bond.payoutTokenName}</Text>\n <Text size=\"14px\" weight={400} className=\"ape:opacity-60\">\n {getVestingTermsString(bond as any)}\n </Text>\n </Flex>\n <Flex className=\"ape:flex-col ape:gap-[1px] ape:items-end\">\n <Text size=\"12px\" weight={700} style={{ color: 'var(--ape-color-success)' }}>\n {bond.bonus.toFixed(2)}%\n </Text>\n </Flex>\n </Flex>\n </Flex>\n <Button\n onClick={() => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex)}\n className=\"ape:w-full ape:h-[30px] ape:text-[14px]!\"\n style={{ lineHeight: '20px' }}\n >\n Buy\n </Button>\n </Flex>\n )\n}\n\nexport default CardRecommendation\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAOA,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,kBAAkB,GAKnB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mGAAmG,EAAA,QAAA,EAAA,CACjHC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,+EAA+E,EAAA,QAAA,EAC7FD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,CACnEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,EAC3EA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,YAAE,IAAI,CAAC,eAAe,EAAA,CAAQ,EAC/CA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAC,gBAAgB,YACtD,qBAAqB,CAAC,IAAW,CAAC,GAC9B,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACxDD,KAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAA,QAAA,EAAA,CACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CACjB,EAAA,CACF,CAAA,EAAA,CACF,GACF,EACPC,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,MAAM,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC5E,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGtB,CAAA,EAAA,CACJ;AAEX;;;;"}

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.d.ts CHANGED Viewed

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

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.js CHANGED Viewed

@@ -1,19 +1,9 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.js';
 const RecSkeleton = () => {
-    return (jsxs(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'], height: '84px' }, children: [jsx(Skeleton, { animation: "waves", sx: {
-                    width: '100%',
-                    height: '70px',
-                    borderRadius: 'normal',
-                    mb: '5px',
-                } }), jsx(Skeleton, { animation: "waves", sx: {
-                    width: '100%',
-                    height: '70px',
-                    borderRadius: 'normal',
-                    mb: '5px',
-                } })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:gap-[10px] ape:lg:gap-[15px] ape:h-[84px]", children: [jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } }), jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } })] }));
 };
 export { RecSkeleton as default };

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RecSkeleton.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/RecSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\n\nconst RecSkeleton = () => {\n return (\n <Flex ~~sx={{~~ ~~width~~: ~~'100%',~~ gap: ['10px', ~~'10px', '10px', '~~15px'], ~~height~~: '84px~~' }}~~>\n <Skeleton\n animation=\"waves\"~~\n sx~~={{\n width: '100%'~~,\n~~ height: '70px'~~,\n~~ borderRadius: 'normal'~~,\n mb~~: '5px'~~,\n~~ }}\n />\n <Skeleton\n animation=\"waves\"~~\n sx~~={{\n width: '100%'~~,\n~~ height: '70px'~~,\n~~ borderRadius: 'normal'~~,\n mb~~: '5px'~~,\n~~ }}\n />\n </Flex>\n )\n}\n\nexport default RecSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,WAAW,GAAG,MAAK;AACvB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,~~CAChFC~~,GAAA,CAAC,QAAQ,~~IACP~~,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,~~CACD~~,~~EACFA~~,~~IAAC~~,QAAQ,EAAA,~~EACP~~,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,~~CACD~~,CAAA,EAAA,~~CACG~~;AAEX;;;;"}
1	+ {"version":3,"file":"RecSkeleton.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/RecSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\n\nconst RecSkeleton = () => {\n return (\n <Flex className=\"ape:w-full ape:gap-[10px] ape:lg:gap-[15px] ape:h-[84px]\">\n <Skeleton animation=\"waves\" style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }} />\n <Skeleton animation=\"waves\" style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }} />\n </Flex>\n )\n}\n\nexport default RecSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,WAAW,GAAG,MAAK;AACvB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAA,QAAA,EAAA,CACxEC,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,CAAI,EACvIA,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,CAAI,CAAA,EAAA,CAClI;AAEX;;;;"}

package/dist/views/YourBondsModal/components/Recommendations/Recommendations.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const Recommendations: ({ billAddress }: {
     billAddress?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Recommendations;

package/dist/views/YourBondsModal/components/Recommendations/Recommendations.js CHANGED Viewed

@@ -1,23 +1,19 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import CardRecommendation from './CardRecommendation.js';
 import track from '../../../../utils/track.js';
 import useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations.js';
-import useEVMAccount from '../../../../hooks/accounts/useEVMAccount.js';
+import useChainAccount from '../../../../state/chainAccount/useChainAccount.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import RecSkeleton from './RecSkeleton.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 const Recommendations = ({ billAddress }) => {
-    const { address } = useEVMAccount();
+    const { address } = useChainAccount('evm');
     const isMobile = useIsMobile();
-    const { data = [] } = useGetBondRecommendations(address, billAddress, '2');
+    const { data = [] } = useGetBondRecommendations(address ?? undefined, billAddress, '2');
     const recommendations = isMobile ? data?.slice(0, 1) : data;
-    return (jsxs(Fragment, { children: [jsx(Flex, { sx: {
-                    justifyContent: 'space-between',
-                    flexDirection: ['column', 'column', 'column', 'row'],
-                    alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],
-                }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Text, { sx: { fontSize: '13px', fontWeight: 600 }, children: "You might also be interested in: " }), jsx(Text, { sx: { fontSize: '11px', fontWeight: 400, color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'] }, children: recommendations?.length > 0 ? (recommendations.map((bond, index) => (jsx(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
+    return (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:justify-between ape:flex-col ape:lg:flex-row ape:items-start ape:lg:items-center", children: jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "13px", weight: 600, children: ["You might also be interested in:", ' '] }), jsx(Text, { size: "11px", weight: 400, style: { color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx(Flex, { className: "ape:w-full ape:gap-[10px] ape:lg:gap-[15px]", children: recommendations?.length > 0 ? (recommendations.map((bond, index) => (jsx(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
                         window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer');
                         track({
                             event: 'recClick',

package/dist/views/YourBondsModal/components/Recommendations/Recommendations.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Recommendations.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/Recommendations.tsx"],"sourcesContent":["import React from 'react'\nimport CardRecommendation from './CardRecommendation'\nimport track from '../../../../utils/track'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport ~~useEVMAccount~~ from '../../../../~~hooks~~/~~accounts~~/~~useEVMAccount~~'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport RecSkeleton from './RecSkeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst Recommendations = ({ billAddress }: { billAddress?: string }) => {\n const { address } = ~~useEVMAccount~~()\n const isMobile = useIsMobile()\n const { data = [] } = useGetBondRecommendations(address, billAddress, '2')\n const recommendations = isMobile ? data?.slice(0, 1) : data\n\n return (\n <>\n <Flex~~\n sx={{\n justifyContent~~: ~~'space~~-between~~',\n flexDirection:~~ ~~['column', 'column', 'column', 'row'],\n alignItems~~: ['flex-~~start',~~ 'flex-~~start',~~ ~~'flex~~-start', 'center~~'],\n }}~~\n >\n <Flex ~~sx={{ flexDirection~~: ~~'column' }}~~>\n <Text sx={~~{ fontSize: '13px', fontWeight:~~ 600 }}>You might also be interested in: </Text>\n <Text sx={{ ~~fontSize: '11px', fontWeight: 400,~~ color: '#BEBEBE', lineHeight: '18px' }}>\n Based on yours and others users purchases.\n </Text>\n </Flex>\n </Flex>\n <Flex ~~sx={{~~ ~~width~~: ~~'100%',~~ gap: ['10px', ~~'10px', '10px', '~~15px'] }}>\n {recommendations?.length > 0 ? (\n recommendations.map((bond, index) => (\n <CardRecommendation\n key={`${bond.billAddress}-${index}`}\n cardIndex={index}\n bond={bond}\n handleBuyBondClick={() => {\n window.open(\n `https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`,\n '_blank',\n 'noreferrer',\n )\n track({\n event: 'recClick',\n chain: bond?.chainId,\n data: {\n bond: bond.payoutTokenName,\n position: index,\n },\n })\n }}\n />\n ))\n ) : (\n <RecSkeleton />\n )}\n </Flex>\n </>\n )\n}\n\nexport default Recommendations\n"],"names":["_jsxs","~~_Fragment","~~_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAA4B,KAAI;~~AACpE~~,~~IAAA,~~MAAM,EAAE,OAAO,EAAE,GAAG,~~aAAa~~,~~EAAE~~;~~AACnC~~,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,CAAC;~~AAC1E~~,IAAA,MAAM,eAAe,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI;~~AAE3D~~,~~IAAA,~~QACEA,~~IAAA~~,~~CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,~~GAAA,CAAC,IAAI,~~EAAA~~,~~EACH~~,~~EAAE~~,~~EAAE;AACF~~,~~oBAAA,cAAc,EAAE,eAAe;oBAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;oBACpD,UAAU,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,CAAC;iBACjE,~~EAAA,QAAA,~~EAEDF~~,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa,EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,~~CACnCE~~,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,~~EAAE,~~MAAM,EAAE,~~UAAU~~,~~EAAE~~,GAAG,~~EAAE~~,EAAA,~~QAAA~~,~~EAAA~~,~~mCAAA,EAAA,CAA0C,EACzFA,~~GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,~~EAAE,~~MAAM,EAAE,~~UAAU~~,EAAE,~~GAAG~~,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA,EAAA,4CAAA,EAAA,CAE9E,~~CAAA,EAAA,CACF,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,~~EAAA,QAAA,~~EAC/D~~,eAAe,EAAE,MAAM,GAAG,CAAC,IAC1B,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC9BA,GAAA,CAAC,kBAAkB,EAAA,EAEjB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,MAAK;AACvB,wBAAA,MAAM,CAAC,IAAI,CACT,CAAA,mCAAA,EAAsC,IAAI,CAAC,WAAW,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,EAClF,QAAQ,EACR,YAAY,CACb;AACD,wBAAA,KAAK,CAAC;AACJ,4BAAA,KAAK,EAAE,UAAU;4BACjB,KAAK,EAAE,IAAI,EAAE,OAAO;AACpB,4BAAA,IAAI,EAAE;gCACJ,IAAI,EAAE,IAAI,CAAC,eAAe;AAC1B,gCAAA,QAAQ,EAAE,KAAK;AAChB,6BAAA;AACF,yBAAA,CAAC;oBACJ,CAAC,EAAA,EAjBI,GAAG,IAAI,CAAC,WAAW,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAkBnC,CACH,CAAC,KAEFA,GAAA,CAAC,WAAW,KAAG,CAChB,EAAA,CACI,CAAA,EAAA,CACN;AAEP;;;;"}
1	+ {"version":3,"file":"Recommendations.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/Recommendations.tsx"],"sourcesContent":["import React from 'react'\nimport CardRecommendation from './CardRecommendation'\nimport track from '../../../../utils/track'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport useChainAccount from '../../../../state/chainAccount/useChainAccount'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport RecSkeleton from './RecSkeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst Recommendations = ({ billAddress }: { billAddress?: string }) => {\n const { address } = useChainAccount('evm')\n const isMobile = useIsMobile()\n const { data = [] } = useGetBondRecommendations(address ?? undefined, billAddress, '2')\n const recommendations = isMobile ? data?.slice(0, 1) : data\n\n return (\n <>\n <Flex className=\"ape:justify-between ape:flex-col ape:lg:flex-row ape:items-start ape:lg:items-center\">\n <Flex className=\"ape:flex-col\">\n <Text size=\"13px\" weight={600}>\n You might also be interested in:{' '}\n </Text>\n <Text size=\"11px\" weight={400} style={{ color: '#BEBEBE', lineHeight: '18px' }}>\n Based on yours and others users purchases.\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:w-full ape:gap-[10px] ape:lg:gap-[15px]\">\n {recommendations?.length > 0 ? (\n recommendations.map((bond, index) => (\n <CardRecommendation\n key={`${bond.billAddress}-${index}`}\n cardIndex={index}\n bond={bond}\n handleBuyBondClick={() => {\n window.open(\n `https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`,\n '_blank',\n 'noreferrer',\n )\n track({\n event: 'recClick',\n chain: bond?.chainId,\n data: {\n bond: bond.payoutTokenName,\n position: index,\n },\n })\n }}\n />\n ))\n ) : (\n <RecSkeleton />\n )}\n </Flex>\n </>\n )\n}\n\nexport default Recommendations\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAA4B,KAAI;IACpE,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC;AAC1C,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,yBAAyB,CAAC,OAAO,IAAI,SAAS,EAAE,WAAW,EAAE,GAAG,CAAC;AACvF,IAAA,MAAM,eAAe,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI;IAE3D,QACEA,4BACEC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,sFAAsF,EAAA,QAAA,EACpGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,KAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,iDACM,GAAG,CAAA,EAAA,CAC/B,EACPC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,2DAEvE,CAAA,EAAA,CACF,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1D,eAAe,EAAE,MAAM,GAAG,CAAC,IAC1B,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC9BA,GAAA,CAAC,kBAAkB,EAAA,EAEjB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,MAAK;AACvB,wBAAA,MAAM,CAAC,IAAI,CACT,CAAA,mCAAA,EAAsC,IAAI,CAAC,WAAW,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,EAClF,QAAQ,EACR,YAAY,CACb;AACD,wBAAA,KAAK,CAAC;AACJ,4BAAA,KAAK,EAAE,UAAU;4BACjB,KAAK,EAAE,IAAI,EAAE,OAAO;AACpB,4BAAA,IAAI,EAAE;gCACJ,IAAI,EAAE,IAAI,CAAC,eAAe;AAC1B,gCAAA,QAAQ,EAAE,KAAK;AAChB,6BAAA;AACF,yBAAA,CAAC;oBACJ,CAAC,EAAA,EAjBI,GAAG,IAAI,CAAC,WAAW,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAkBnC,CACH,CAAC,KAEFA,GAAA,CAAC,WAAW,KAAG,CAChB,EAAA,CACI,CAAA,EAAA,CACN;AAEP;;;;"}

package/dist/views/YourBondsModal/components/TransferBondModal/index.js CHANGED Viewed

@@ -1,18 +1,13 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Modal from '../../../../components/uikit-sdk/Modal/index.js';
-import Text from '../../../../components/uikit-sdk/Text/index.js';
 import Checkbox from '../../../../components/uikit-sdk/Checkbox/index.js';
 import { getBalanceNumber } from '../../../../utils/getBalanceNumber.js';
-import { ChainId } from '@ape.swap/apeswap-lists';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
 import Input from '../../../../components/uikit-sdk/Input/Input.js';
-import TransferAction$1 from './TransferAction.js';
 import { getTimeLeftForFullyVested, getPendingVestingString } from '../../../../utils/displayHelpers.js';
-import TransferAction from './TransferActionSolana.js';
-import TransferActionAptos from './TransferActionAptos.js';
-import TransferActionSui from './TransferActionSui.js';
+import { getAdapterForChain } from '../../../../adapters/registry.js';
 const TransferModal = ({ onDismiss, userBill }) => {
     // State
@@ -21,12 +16,13 @@ const TransferModal = ({ onDismiss, userBill }) => {
     // Data
     const bond = userBill?.bond;
     const chainId = bond?.chainId;
+    const transferAdapter = chainId ? getAdapterForChain(chainId) : undefined;
     const pending = chainId &&
         getBalanceNumber(userBill?.payout ?? 0, bond?.earnToken?.decimals?.[chainId] ?? 18)?.toFixed(4);
-    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", sx: { width: '450px' }, children: [jsx(Flex, { sx: { mt: '20px' }, children: jsxs(Flex, { sx: { fontWeight: 700, justifyContent: 'space-between', width: '100%' }, children: ["Transferring:", jsxs("span", { sx: { fontSize: '14px', color: 'textDisabledButton', fontWeight: 400 }, children: [bond?.earnToken?.symbol, " Bond # ", userBill?.id] })] }) }), jsx(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '10px', mr: '10px' }, children: jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Tokens" }), jsxs(Flex, { children: [jsx(TokenImage, { symbol: userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol, size: 20, chain: userBill?.bond?.chainId }), jsx(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '100%', border: 'none' } })] }), jsx(Flex, { sx: { width: '100%', fontWeight: 700, fontSize: '13px', color: 'error', mt: '15px', ml: '30px' }, children: "WARNING" }), jsxs(Flex, { onClick: () => setConfirmSend(!confirmSend), sx: { cursor: 'pointer', alignItems: 'center' }, children: [jsx(Checkbox, { checked: confirmSend, onChange: (event) => {
+    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", className: "ape:w-[380px]! ape:pt-3!", children: [jsx(Flex, { className: "ape:mt-[20px]", children: jsxs(Flex, { className: "ape:justify-between ape:w-full", children: [jsx("div", { className: "ape:text-sm", children: "Transferring:" }), jsxs("span", { className: "ape:text-[14px] ape:font-normal", style: { color: 'var(--ape-color-text-disabled-button)' }, children: [bond?.earnToken?.symbol, " Bond # ", userBill?.id] })] }) }), jsx(Flex, { className: "ape:flex-col ape:items-center ape:mt-[10px] ape:mr-[10px]", children: jsxs(Flex, { className: "ape:mt-[5px]", children: [jsxs(Flex, { className: "ape:flex-col ape:ml-5 ape:gap-1", children: [jsx("div", { className: "ape:text-center ape:opacity-60 ape:text-[12px] ape:font-normal", children: "Vesting time" }), getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`] }), jsxs(Flex, { className: "ape:flex-col ape:ml-5 ape:gap-1", children: [jsx("div", { className: "ape:text-center ape:opacity-60 ape:text-[12px] ape:font-normal", children: "Tokens" }), jsxs(Flex, { className: "ape:gap-1", children: [jsx(TokenImage, { symbol: userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol, size: 20, chain: userBill?.bond?.chainId }), jsx("div", { className: "ape:ml-[5px]", children: pending })] })] })] }) }), jsxs(Flex, { className: "ape:flex-col ape:mt-[30px]", children: [jsx("div", { className: "ape:text-sm", children: "Receiving Address:" }), jsx(Input, { placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), className: "ape:bg-white3 ape:mt-2 ape:h-8 ape:font-normal" })] }), jsx(Flex, { className: "ape:w-full ape:font-bold ape:text-[13px] ape:mt-[15px] ape:ml-[30px]", style: { color: 'var(--ape-color-error)' }, children: "WARNING" }), jsxs(Flex, { onClick: () => setConfirmSend(!confirmSend), className: "ape:cursor-pointer ape:items-center", children: [jsx(Checkbox, { checked: confirmSend, onChange: (event) => {
                             setConfirmSend(!confirmSend);
                             event.stopPropagation();
-                        } }), jsx(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px', color: 'error' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: chainId === ChainId.SOL ? (jsx(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) : chainId === ChainId.APTOS ? (jsx(TransferActionAptos, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) : chainId === ChainId.SUI ? (jsx(TransferActionSui, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress, onDismiss: onDismiss })) : (jsx(TransferAction$1, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) })] }));
+                        }, className: "ape:w-7!" }), jsx("div", { className: "ape:ml-[10px] ape:text-[12px] ape:font-medium", style: { lineHeight: '18px', color: 'var(--ape-color-error)' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx(Flex, { className: "ape:justify-center ape:mt-[15px]", children: transferAdapter && (jsx(transferAdapter.TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress, onDismiss: onDismiss })) })] }));
 };
 var TransferBondModal = React.memo(TransferModal);

package/dist/views/YourBondsModal/components/TransferBondModal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/YourBondsModal/components/TransferBondModal/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport ~~Text from '../../../../components/uikit-sdk/Text'\nimport~~ Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport Input from '../../../../components/uikit-sdk/Input/Input'\nimport ~~TransferAction from './TransferAction'\nimport~~ { getPendingVestingString, getTimeLeftForFullyVested } from '../../../../utils/displayHelpers'\nimport ~~TransferActionSolana~~ ~~from~~ ~~'./TransferActionSolana'\nimport~~ ~~TransferActionAptos~~ from '~~./TransferActionAptos~~'\~~nimport TransferActionSui from './TransferActionSui'\~~n\ninterface TransferBillModalProps {\n onDismiss?: () => void\n userBill?: UserBill\n}\n\nconst TransferModal: React.FC<TransferBillModalProps> = ({ onDismiss, userBill }) => {\n // State\n const [confirmSend, setConfirmSend] = useState(false)\n const [toAddress, setToAddress] = useState('')\n\n // Data\n const bond = userBill?.bond\n const chainId = bond?.chainId\n const pending =\n chainId &&\n getBalanceNumber(userBill?.payout ?? 0, bond?.earnToken?.decimals?.[chainId as ChainId] ?? 18)?.toFixed(4)\n\n return (\n <Modal onDismiss={onDismiss} title=\"Transfer Bond\" ~~sx={{~~ ~~width~~: ~~'450px' }}~~>\n <Flex ~~sx={{~~ mt~~: '~~20px~~' }}~~>\n <Flex ~~sx={{ fontWeight~~: ~~700, justifyContent: 'space~~-between', ~~width~~: ~~'100%' }}~~>\n Transferring:\n <span sx={{ ~~fontSize~~: '~~14px',~~ color: '~~textDisabledButton',~~ ~~fontWeight: 400~~ }}>\n {bond?.earnToken?.symbol} Bond # {userBill?.id}\n </span>\n </Flex>\n </Flex>\n <Flex ~~sx={{ flexDirection~~: ~~'column', alignItems~~: 'center', mt~~: '~~10px', mr~~: '~~10px~~' }}~~>\n <Flex ~~sx={{~~ mt~~: '~~5px~~' }}~~>\n <Flex ~~sx={{~~ ~~flexDirection~~: ~~'column', mr~~: ~~'20px' }}~~>\n <~~Text~~ ~~sx={{ textAlign~~: 'center', ~~width~~: ~~'100%', fontSize~~: '12px', ~~opacity~~: ~~0.6 }}~~>Vesting time</~~Text~~>\n {getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`}\n </Flex>\n <Flex ~~sx={{~~ ~~flexDirection~~: ~~'column', ml~~: ~~'20px' }}~~>\n <~~Text~~ ~~sx={{ textAlign~~: 'center', ~~width~~: ~~'100%', fontSize~~: '12px', ~~opacity~~: ~~0.6 }}~~>Tokens</~~Text~~>\n <Flex>\n <TokenImage\n symbol={userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol}\n size={20}\n chain={userBill?.bond?.chainId}\n />\n <~~Text~~ ~~sx={{ fontWeight~~: ~~700,~~ ml~~: '~~5px~~' }}~~>{pending}</~~Text~~>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n <Flex ~~sx={{~~ ~~flexDirection~~: ~~'column',~~ mt~~: '~~30px~~' }}~~>\n <~~Text~~ ~~sx={{ fontWeight~~: ~~700 }}~~>Receiving Address:</~~Text~~>\n <Input\n ~~mt=\"10px\"\n size=\"lg\"\n~~ placeholder={'Paste the address here'}\n value={toAddress}\n onChange={(e: any) => setToAddress(e.target.value)}\n ~~style={{~~ ~~width~~: ~~'100%',~~ ~~border~~: ~~'none' }}~~\n />\n </Flex>\n <Flex ~~sx={{ width~~: ~~'100%', fontWeight~~: ~~700, fontSize~~: '13px', ~~color~~: ~~'error',~~ mt~~: '~~15px', ml: '~~30px~~' }}>\n WARNING\n </Flex>\n <Flex onClick={() => setConfirmSend(!confirmSend)} ~~sx={{~~ cursor~~: '~~pointer', ~~alignItems~~: 'center~~' }}~~>\n <Checkbox\n checked={confirmSend}\n onChange={(event: React.MouseEvent) => {\n setConfirmSend(!confirmSend)\n event.stopPropagation()\n }}\n />\n <~~Text sx={{~~ ml~~: '~~10px', ~~fontSize~~: '12px', ~~fontWeight~~: ~~500,~~ lineHeight: '18px', color: 'error' }}>\n I understand the new wallet gains ownership of all unclaimed assets.\n </~~Text~~>\n </Flex>\n <Flex ~~sx={{ justifyContent~~: 'center', mt~~: '~~15px~~' }}~~>\n {~~chainId~~ ~~===~~ ~~ChainId.SOL ?~~ (\n <~~TransferActionSolana userBill={userBill} toAddress={toAddress} disabled={!confirmSend \|\| !toAddress} />\n ) : chainId === ChainId~~.~~APTOS ? (~~\n ~~<TransferActionAptos userBill={userBill} toAddress={toAddress} disabled={!confirmSend \|\| !toAddress} />\n ) : chainId === ChainId.SUI ? (\n <TransferActionSui\n~~ userBill={userBill}\n toAddress={toAddress}\n disabled={!confirmSend \|\| !toAddress}\n onDismiss={onDismiss}\n />\n ) ~~: (\n <TransferAction userBill={userBill~~} ~~toAddress={toAddress} disabled={!confirmSend \|\| !toAddress} />\n )}~~\n </Flex>\n </Modal>\n )\n}\n\nexport default React.memo(TransferModal)\n"],"names":["_jsxs","_jsx"~~,"TransferActionSolana","TransferAction"~~],"mappings":"~~;;;;;;;;;;;;;;;;AAqBA~~,MAAM,aAAa,GAAqC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAI;;IAElF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;;AAG9C,IAAA,MAAM,IAAI,GAAG,QAAQ,EAAE,IAAI;AAC3B,IAAA,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO;~~IAC7B~~,MAAM,OAAO,GACX,OAAO;QACP,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,GAAG,OAAkB,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;~~IAE5G~~,QACEA,~~KAAC~~,KAAK,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,eAAe,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,OAAO,EAAE,~~EAAA,QAAA,EAAA,~~CACvEC~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE,YACtBD,~~IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~cAAc~~,~~EAAE~~,~~eAAe~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,EAAA,QAAA,EAAA,CAAA,~~eAAA~~,~~EAE3EA~~,~~eAAM~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,EAAE,~~MAAM,~~EAAE,KAAK,EAAE,~~oBAAoB~~,EAAE,~~UAAU~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~aACzE,~~IAAI,EAAE,SAAS,EAAE,MAAM,EAAA,UAAA,EAAU,QAAQ,EAAE,EAAE,~~IACzC~~,CAAA,EAAA,CACF,EAAA,CACF,EACPC,~~GAAA~~,~~CAAC,~~IAAI,~~IAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa~~,~~EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,~~EACjFD~~,~~KAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE,EAAE,KAAK,EAAE,~~EAAA,QAAA,EAAA,~~CACrBA~~,IAAA,CAAC,IAAI,~~IAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa~~,~~EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,CAC/CC,~~IAAC~~,~~IAAI~~,EAAA,~~EAAC~~,~~EAAE,EAAE,EAAE,~~SAAS,~~EAAE~~,~~QAAQ~~,~~EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,~~EAAA,QAAA,EAAA,cAAA,EAAA,~~CAAqB~~,~~EACpG~~,yBAAyB,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAA,QAAA,EAAW,uBAAuB,CAAC,QAAQ,CAAC,CAAA,CAAE,GAAG,~~cAAc~~,CAAA,EAAA,CACrG,EACPD,~~KAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,CAC/CC,GAAA,~~CAAC~~,~~IAAI~~,EAAA,~~EAAC~~,~~EAAE,EAAE,EAAE,~~SAAS,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~KAAK~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~OAAO~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~uBAAe~~,~~EAC/FD~~,~~IAAA,CAAC,IAAI,~~EAAA,~~EAAA,~~QAAA,EAAA,~~CACHC~~,~~GAAA~~,~~CAAC,~~UAAU,EAAA,EACT,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,IAAI,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAC9E,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAA,CAC9B,EACFA,GAAA,~~CAAC~~,~~IAAI~~,~~IAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,~~EAAE~~,~~GAAG~~,EAAE,~~EAAE~~,~~EAAE,KAAK,EAAE,~~EAAA,~~QAAA~~,~~EAAG~~,~~OAAO,~~EAAA,~~CAAQ~~,CAAA,EAAA,~~CACrD~~,~~IACF,~~CAAA,EAAA,CACF,EAAA,CACF,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~EAAE,EAAE,MAAM,EAAE,~~EAAA,~~QAAA~~,~~EAAA~~,~~CAC/CC,GAAA,CAAC,IAAI,EAAA,~~EAAC,~~EAAE~~,~~EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,~~EAAA,QAAA,EAAA,oBAAA,EAAA,~~CAA2B~~,~~EACxDA~~,GAAA,CAAC,KAAK,~~IACJ~~,~~EAAE~~,~~EAAC,MAAM,EACT,IAAI,EAAC,IAAI,EACT,~~WAAW,EAAE,wBAAwB,EACrC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAM,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAClD,~~KAAK~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,~~EAAA,~~CACxC~~,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE,~~KAAK,EAAE,~~MAAM,~~EAAE,~~UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,~~KAAK,EAAE,~~OAAO~~,EAAE,~~EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,SAAA,EAAA,~~CAE/F~~,EACPD,~~KAAC~~,IAAI,EAAA,EAAC,OAAO,EAAE,MAAM,cAAc,CAAC,CAAC,WAAW,CAAC,EAAE,~~EAAE,EAAE,EAAE,MAAM,EAAE,~~SAAS,~~EAAE~~,~~UAAU~~,~~EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,CAChGC,~~IAAC~~,QAAQ,EAAA,EACP,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,KAAuB,KAAI;AACpC,4BAAA,cAAc,CAAC,CAAC,WAAW,CAAC;4BAC5B,KAAK,CAAC,eAAe,EAAE;AACzB,wBAAA,CAAC,~~GACD~~,~~EACFA~~,~~GAAA~~,~~CAAC~~,~~IAAI,~~EAAA,~~EAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~MAAM~~,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~MAAM~~,EAAE,~~UAAU,~~EAAE,~~GAAG,EAAE,~~UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,~~OAAO~~,EAAE,EAAA,QAAA,EAAA,sEAAA,EAAA,~~CAExF~~,CAAA,EAAA,~~CACF~~,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAC/C,~~OAAO~~,~~KAAK~~,~~OAAO,CAAC,GAAG,IACtBA,~~GAAA,~~CAACC,cAAoB,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,~~CAAC,~~WAAW~~,~~IAAI,~~CAAC,~~SAAS~~,EAAA,~~CAAI~~,~~IACtG,OAAO,KAAK,OAAO,CAAC,KAAK,IAC3BD,IAAC,mBAAmB,EAAA,EAAC,~~QAAQ,EAAE,QAAQ,~~EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,WAAW,IAAI,CAAC,SAAS,EAAA,CAAI,IACrG,OAAO,KAAK,OAAO,CAAC,GAAG,IACzBA,IAAC,iBAAiB,EAAA,EAChB,QAAQ,EAAE,QAAQ,~~EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,WAAW,IAAI,CAAC,SAAS,EACpC,SAAS,EAAE,SAAS,~~GACpB,KAEFA,IAACE,gBAAc,~~EAAA,~~EAAC~~,~~QAAQ~~,~~EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,WAAW,IAAI,CAAC,SAAS,~~EAAA,~~CAAI,CACnG,EAAA,~~CACI,CAAA,EAAA,CACD;AAEZ,CAAC;AAED,wBAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/YourBondsModal/components/TransferBondModal/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport Input from '../../../../components/uikit-sdk/Input/Input'\nimport { getPendingVestingString, getTimeLeftForFullyVested } from '../../../../utils/displayHelpers'\nimport { getAdapterForChain } from '../../../../adapters/registry'\n\ninterface TransferBillModalProps {\n onDismiss?: () => void\n userBill?: UserBill\n}\n\nconst TransferModal: React.FC<TransferBillModalProps> = ({ onDismiss, userBill }) => {\n // State\n const [confirmSend, setConfirmSend] = useState(false)\n const [toAddress, setToAddress] = useState('')\n\n // Data\n const bond = userBill?.bond\n const chainId = bond?.chainId\n const transferAdapter = chainId ? getAdapterForChain(chainId) : undefined\n const pending =\n chainId &&\n getBalanceNumber(userBill?.payout ?? 0, bond?.earnToken?.decimals?.[chainId as ChainId] ?? 18)?.toFixed(4)\n\n return (\n <Modal onDismiss={onDismiss} title=\"Transfer Bond\" className=\"ape:w-[380px]! ape:pt-3!\">\n <Flex className=\"ape:mt-[20px]\">\n <Flex className=\"ape:justify-between ape:w-full\">\n <div className=\"ape:text-sm\">Transferring:</div>\n <span className=\"ape:text-[14px] ape:font-normal\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n {bond?.earnToken?.symbol} Bond # {userBill?.id}\n </span>\n </Flex>\n </Flex>\n <Flex className=\"ape:flex-col ape:items-center ape:mt-[10px] ape:mr-[10px]\">\n <Flex className=\"ape:mt-[5px]\">\n <Flex className=\"ape:flex-col ape:ml-5 ape:gap-1\">\n <div className=\"ape:text-center ape:opacity-60 ape:text-[12px] ape:font-normal\">Vesting time</div>\n {getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`}\n </Flex>\n <Flex className=\"ape:flex-col ape:ml-5 ape:gap-1\">\n <div className=\"ape:text-center ape:opacity-60 ape:text-[12px] ape:font-normal\">Tokens</div>\n <Flex className=\"ape:gap-1\">\n <TokenImage\n symbol={userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol}\n size={20}\n chain={userBill?.bond?.chainId}\n />\n <div className=\"ape:ml-[5px]\">{pending}</div>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n <Flex className=\"ape:flex-col ape:mt-[30px]\">\n <div className=\"ape:text-sm\">Receiving Address:</div>\n <Input\n placeholder={'Paste the address here'}\n value={toAddress}\n onChange={(e: any) => setToAddress(e.target.value)}\n className=\"ape:bg-white3 ape:mt-2 ape:h-8 ape:font-normal\"\n />\n </Flex>\n <Flex\n className=\"ape:w-full ape:font-bold ape:text-[13px] ape:mt-[15px] ape:ml-[30px]\"\n style={{ color: 'var(--ape-color-error)' }}\n >\n WARNING\n </Flex>\n <Flex onClick={() => setConfirmSend(!confirmSend)} className=\"ape:cursor-pointer ape:items-center\">\n <Checkbox\n checked={confirmSend}\n onChange={(event: React.MouseEvent) => {\n setConfirmSend(!confirmSend)\n event.stopPropagation()\n }}\n className=\"ape:w-7!\"\n />\n <div\n className=\"ape:ml-[10px] ape:text-[12px] ape:font-medium\"\n style={{ lineHeight: '18px', color: 'var(--ape-color-error)' }}\n >\n I understand the new wallet gains ownership of all unclaimed assets.\n </div>\n </Flex>\n <Flex className=\"ape:justify-center ape:mt-[15px]\">\n {transferAdapter && (\n <transferAdapter.TransferAction\n userBill={userBill}\n toAddress={toAddress}\n disabled={!confirmSend \|\| !toAddress}\n onDismiss={onDismiss}\n />\n )}\n </Flex>\n </Modal>\n )\n}\n\nexport default React.memo(TransferModal)\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/YourBondsModal/components/YourBondModalHeader/YourBondModalHeader.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import React from 'react';
 import { UserBill } from '../../../../types/yourbonds';
 declare const YourBondModalHeader: ({ userBill, onDismiss }: {
     userBill?: UserBill;
     onDismiss?: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default YourBondModalHeader;

package/dist/views/YourBondsModal/components/YourBondModalHeader/YourBondModalHeader.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
-import { Box } from 'theme-ui';
 import ProfitCard from '../../../YourBonds/components/ProfitCard/ProfitCard.js';
 import useModal from '../../../../hooks/useModal.js';
 import TransferBondModal from '../TransferBondModal/index.js';
@@ -18,28 +17,7 @@ const YourBondModalHeader = ({ userBill, onDismiss }) => {
     const payoutTokenSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol;
     // Modals
     const [onTransferBondModal] = useModal(jsx(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill?.id}}`);
-    return (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '7px' }, children: [payoutTokenSymbol ? (jsxs(Fragment, { children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 30, chain: userBill?.bond?.chainId }), jsx(Box, { sx: {
-                                    fontSize: ['16px', '16px', '16px', '18px'],
-                                    fontWeight: 700,
-                                    opacity: 0.7,
-                                    overflow: 'hidden',
-                                    whiteSpace: 'nowrap',
-                                    textOverflow: 'ellipsis',
-                                    maxWidth: '100px',
-                                }, children: payoutTokenSymbol })] })) : (jsxs(Fragment, { children: [jsx(Skeleton, { animation: "waves", sx: {
-                                    width: '30px',
-                                    height: '30px',
-                                    borderRadius: '55px',
-                                    mr: '10px',
-                                } }), jsx(Skeleton, { animation: "waves", sx: {
-                                    width: '100px',
-                                    borderRadius: 'normal',
-                                } })] })), jsx(ProfitCard, { userBond: userBill }), jsx(Text, { sx: {
-                            color: 'text',
-                            opacity: '0.6',
-                            fontSize: ['11px', '11px', '11px', '14px'],
-                            display: ['none', 'none', 'none', 'flex'],
-                        }, children: userBill?.id && `#${userBill.id}` })] }), jsxs(Flex, { sx: { gap: '7px' }, children: [jsx(Button, { onClick: onTransferBondModal, disabled: !userBill, sx: { height: '22px', fontSize: '12px', fontWeight: 600, p: '2px 6px' }, children: "TRANSFER" }), jsx(Flex, { className: "svg-close", onClick: onDismiss, sx: { cursor: 'pointer', p: '2px 5px' }, children: jsx(Close, { width: isMobile ? '12px' : '18px' }) })] })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:justify-between ape:items-center", children: [jsxs(Flex, { className: "ape:items-center ape:gap-[7px]", children: [payoutTokenSymbol ? (jsxs(Fragment, { children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 30, chain: userBill?.bond?.chainId }), jsx("div", { className: "ape:text-[16px] ape:md:text-[18px] ape:font-bold ape:opacity-70 ape:overflow-hidden ape:whitespace-nowrap ape:text-ellipsis ape:max-w-[100px]", children: payoutTokenSymbol })] })) : (jsxs(Fragment, { children: [jsx(Skeleton, { animation: "waves", style: { width: '30px', height: '30px', borderRadius: '55px', marginRight: '10px' } }), jsx(Skeleton, { animation: "waves", style: { width: '100px', borderRadius: 'var(--ape-radius-normal)' } })] })), jsx(ProfitCard, { userBond: userBill }), jsx(Text, { className: "ape:opacity-60 ape:text-[11px] ape:md:text-[14px] ape:hidden ape:md:flex", children: userBill?.id && `#${userBill.id}` })] }), jsxs(Flex, { className: "ape:gap-[7px]", children: [jsx(Button, { onClick: onTransferBondModal, disabled: !userBill, className: "ape:h-[22px] ape:text-[12px]! ape:font-semibold ape:p-[2px_6px]", children: "TRANSFER" }), jsx(Flex, { className: "svg-close ape:cursor-pointer ape:p-[2px_5px]", onClick: onDismiss, children: jsx(Close, { width: isMobile ? '12px' : '18px' }) })] })] }));
 };
 export { YourBondModalHeader as default };