npm - @ape.swap/bonds-sdk - Versions diffs - 6.2.13 → 6.2.14 - Mend

@ape.swap/bonds-sdk 6.2.13 → 6.2.14

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 (594) hide show

package/dist/views/Bonds/components/BonusComponents/BonusComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusComponent.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusComponent.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport BonusTable from './BonusTable'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { getDiscountColor } from '../../utils'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Timer from '../../../../components/uikit-sdk/Svg/Icons/Timer'\n\nconst BonusComponent = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition,\n hideTooltip,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n hideTooltip?: boolean\n}) => {\n const SDKConfig = useSDKConfig()\n const isMobile = useIsMobile()\n const highestPointsElement = trueBondPrices?.reduce((max, current) => {\n return BigInt(current.points) > BigInt(max.points) ? current : max\n }, trueBondPrices[0])\n\n const baseTrueBondPrice = findHighestTrueBondPrice('0', trueBondPrices)\n\n return (\n <Flex>\n {trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (\n <Flex className=\"ape:items-center ape:min-w-[20px]\">\n {highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (\n <TooltipBubble\n width=\"280px\"\n placement={tooltipPosition}\n transformTip={tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)'}\n body={<BonusTable trueBondPrices={trueBondPrices} minTier={minTier} />}\n hideTooltip={hideTooltip}\n >\n <Flex className=\"ape:p-[3px_6px] ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:bg-transparent ape:relative ape:overflow-hidden ape:cursor-pointer ape:w-[130px] ape:md:w-[150px]\">\n <Flex className=\"ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-[1] ape:bg-[#9960C5] ape:opacity-20\" />\n <Flex className=\"ape:w-full ape:z-[2] ape:items-center ape:justify-center\">\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n <Flex className=\"ape:text-[12px] ape:lg:text-[14px] ape:mr-[3px]\">Up to</Flex>\n <Flex\n className={clsx(\n 'ape:text-[14px] ape:lg:text-[16px]',\n highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0\n ? 'ape:text-success'\n : 'ape:text-error',\n )}\n >\n {highestPointsElement?.bonusWithFee?.toFixed(2)}%\n </Flex>\n </Flex>\n </Flex>\n </TooltipBubble>\n ) : (\n <Flex className=\"ape:h-[20px] ape:w-[20px]\">\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : baseTrueBondPrice ? (\n <Flex className={clsx('ape:items-center ape:min-w-[20px]', getDiscountColor(+baseTrueBondPrice?.bonusWithFee))}>\n {baseTrueBondPrice?.bonusWithFee > 0 ? (\n `${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`\n ) : (\n <Flex className=\"ape:h-[20px] ape:w-[20px]\">\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : (\n <Flex className=\"ape:items-center ape:min-w-[20px]\" style={{ color: bonus ? 'var(--ape-color-success)' : undefined }}>\n {bonus \|\| '-'}\n {airdropTooltip && (\n <TooltipBubble\n body={<>{airdropTooltip}</>}\n width=\"230px\"\n placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n >\n <Flex className=\"ape:w-[20px] ape:h-[20px] ape:items-center ape:ml-[5px]\">\n <img\n src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n alt=\"airdrop-img\"\n style={{ width: '20px', height: '20px' }}\n />\n </Flex>\n </TooltipBubble>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BonusComponent\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;AAaA,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,EACf,WAAW,GAQZ,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAC9B,MAAM,oBAAoB,GAAG,cAAc,EAAE,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;QACnE,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,GAAG,GAAG;AACpE,IAAA,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAErB,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,GAAG,EAAE,cAAc,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACF,cAAc,IAAI,cAAc,EAAE,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,IACjEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mCAAmC,YAChD,oBAAoB,EAAE,YAAY,IAAI,oBAAoB,EAAE,YAAY,GAAG,CAAC,IAC3EA,GAAA,CAAC,aAAa,EAAA,EACZ,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,eAAe,EAC1B,YAAY,EAAE,eAAe,KAAK,YAAY,GAAG,mBAAmB,GAAG,mBAAmB,EAC1F,IAAI,EAAEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,GAAI,EACtE,WAAW,EAAE,WAAW,YAExBC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2LAA2L,EAAA,QAAA,EAAA,CACzMD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mGAAmG,EAAA,CAAG,EACtHC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAA,QAAA,EAAA,CACxED,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,CAAA,2CAAA,CAA6C,EAClD,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GACvE,EACFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,EAC9EC,KAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,oCAAoC,EACpC,oBAAoB,EAAE,YAAY,IAAI,oBAAoB,EAAE,YAAY,GAAG;AACzE,0CAAE;AACF,0CAAE,gBAAgB,CACrB,EAAA,QAAA,EAAA,CAEA,oBAAoB,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACO,KAEhBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACzCA,IAAC,aAAa,EAAA,EACZ,IAAI,EAAE,8EAA8E,EACpF,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAEjCA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,EAAA,CACX,CACR,GACI,IACL,iBAAiB,IACnBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,mCAAmC,EAAE,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,EAAA,QAAA,EAC3G,iBAAiB,EAAE,YAAY,GAAG,CAAC,IAClC,CAAA,EAAG,iBAAiB,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG,KAEjDA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACzCA,GAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAE,8EAA8E,EACpF,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAEjCA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,EAAA,CACX,CACR,EAAA,CACI,KAEPC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mCAAmC,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,GAAG,0BAA0B,GAAG,SAAS,EAAE,EAAA,QAAA,EAAA,CACjH,KAAK,IAAI,GAAG,EACZ,cAAc,KACbD,GAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAEA,GAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAG,cAAc,EAAA,CAAI,EAC3B,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,mBAAmB,GAAG,oBAAoB,EAAA,QAAA,EAEnEF,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,yDAAyD,EAAA,QAAA,EACvEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kFAAkF,EACtF,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,CACxC,EAAA,CACG,EAAA,CACO,CACjB,CAAA,EAAA,CACI,CACR,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"BonusComponent.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusComponent.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport BonusTable from './BonusTable'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { getDiscountColor } from '../../utils'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Timer from '../../../../components/uikit-sdk/Svg/Icons/Timer'\n\nconst BonusComponent = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition,\n hideTooltip,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n hideTooltip?: boolean\n}) => {\n const SDKConfig = useSDKConfig()\n const isMobile = useIsMobile()\n const highestPointsElement = trueBondPrices?.reduce((max, current) => {\n return BigInt(current.points) > BigInt(max.points) ? current : max\n }, trueBondPrices[0])\n\n const baseTrueBondPrice = findHighestTrueBondPrice('0', trueBondPrices)\n\n return (\n <Flex>\n {trueBondPrices && trueBondPrices?.length > 1 && SDKConfig.useTiers ? (\n <Flex sx={{ alignItems: 'center', minWidth: '20px' }}>\n {highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0 ? (\n <TooltipBubble\n width=\"280px\"\n placement={tooltipPosition}\n transformTip={tooltipPosition === 'bottomLeft' ? 'translate(0%, 0%)' : 'translate(0%, 0%)'}\n body={<BonusTable trueBondPrices={trueBondPrices} minTier={minTier} />}\n sx={{ display: hideTooltip ? 'none' : 'block' }}\n >\n <Flex\n sx={{\n p: '3px 6px',\n border: '1px solid #9960C5',\n borderRadius: 'normal',\n background: 'transparent',\n position: 'relative',\n overflow: 'hidden',\n cursor: 'pointer',\n width: ['130px', '130px', '150px', '150px'],\n }}\n >\n <Flex\n sx={{\n position: 'absolute',\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n zIndex: 1,\n background: '#9960C5',\n opacity: 0.2,\n }}\n />\n <Flex sx={{ width: '100%', zIndex: 2, alignItems: 'center', justifyContent: 'center' }}>\n <img\n src={`https://ape.bond/images/launch/mythical.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n <Flex sx={{ fontSize: ['12px', '12px', '14px', '14px'], mr: '3px' }}>Up to</Flex>\n <Flex\n sx={{\n color:\n highestPointsElement?.bonusWithFee && highestPointsElement?.bonusWithFee > 0\n ? 'success'\n : 'error',\n fontSize: ['14px', '14px', '16px', '16px'],\n }}\n >\n {highestPointsElement?.bonusWithFee?.toFixed(2)}%\n </Flex>\n </Flex>\n </Flex>\n </TooltipBubble>\n ) : (\n <Flex sx={{ height: '20px', width: '20px' }}>\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : baseTrueBondPrice ? (\n <Flex\n sx={{ alignItems: 'center', minWidth: '20px' }}\n className={`${getDiscountColor(+baseTrueBondPrice?.bonusWithFee)}`}\n >\n {baseTrueBondPrice?.bonusWithFee > 0 ? (\n `${baseTrueBondPrice?.bonusWithFee?.toFixed(2)}%`\n ) : (\n <Flex sx={{ height: '20px', width: '20px' }}>\n <TooltipBubble\n body={'This bond is currently on cooldown and has no bonus. Please check back soon.'}\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(10%, 0%)\"\n >\n <Timer width=\"20px\" color=\"#81CFEA\" />\n </TooltipBubble>\n </Flex>\n )}\n </Flex>\n ) : (\n <Flex sx={{ color: bonus && 'success', alignItems: 'center', minWidth: '20px' }}>\n {bonus \|\| '-'}\n {airdropTooltip && (\n <TooltipBubble\n body={<>{airdropTooltip}</>}\n width=\"230px\"\n placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n >\n <Flex sx={{ width: '20px', height: '20px', alignItems: 'center', ml: '5px' }}>\n <img\n src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n alt=\"airdrop-img\"\n style={{ width: '20px', height: '20px' }}\n />\n </Flex>\n </TooltipBubble>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default BonusComponent\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAYA,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,EACf,WAAW,GAQZ,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;IAC9B,MAAM,oBAAoB,GAAG,cAAc,EAAE,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;QACnE,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,GAAG,GAAG;AACpE,IAAA,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAErB,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,GAAG,EAAE,cAAc,CAAC;IAEvE,QACEA,IAAC,IAAI,EAAA,EAAA,QAAA,EACF,cAAc,IAAI,cAAc,EAAE,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,IACjEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EACjD,oBAAoB,EAAE,YAAY,IAAI,oBAAoB,EAAE,YAAY,GAAG,CAAC,IAC3EA,GAAA,CAAC,aAAa,EAAA,EACZ,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,eAAe,EAC1B,YAAY,EAAE,eAAe,KAAK,YAAY,GAAG,mBAAmB,GAAG,mBAAmB,EAC1F,IAAI,EAAEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,EACtE,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,OAAO,EAAE,YAE/CC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wBAAA,CAAC,EAAE,SAAS;AACZ,wBAAA,MAAM,EAAE,mBAAmB;AAC3B,wBAAA,YAAY,EAAE,QAAQ;AACtB,wBAAA,UAAU,EAAE,aAAa;AACzB,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,QAAQ,EAAE,QAAQ;AAClB,wBAAA,MAAM,EAAE,SAAS;wBACjB,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;AAC5C,qBAAA,EAAA,QAAA,EAAA,CAEDD,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,KAAK,EAAE,MAAM;AACb,gCAAA,MAAM,EAAE,MAAM;AACd,gCAAA,GAAG,EAAE,CAAC;AACN,gCAAA,IAAI,EAAE,CAAC;AACP,gCAAA,MAAM,EAAE,CAAC;AACT,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,OAAO,EAAE,GAAG;AACb,6BAAA,EAAA,CACD,EACFC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpFD,aACE,GAAG,EAAE,6CAA6C,EAClD,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA,CACvE,EACFA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,EACjFC,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;wCACF,KAAK,EACH,oBAAoB,EAAE,YAAY,IAAI,oBAAoB,EAAE,YAAY,GAAG;AACzE,8CAAE;AACF,8CAAE,OAAO;wCACb,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC3C,qCAAA,EAAA,QAAA,EAAA,CAEA,oBAAoB,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CAC1C,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACO,KAEhBD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EACzCA,IAAC,aAAa,EAAA,EACZ,IAAI,EAAE,8EAA8E,EACpF,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAEjCA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,EAAA,CACX,CACR,GACI,IACL,iBAAiB,IACnBA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAC9C,SAAS,EAAE,CAAA,EAAG,gBAAgB,CAAC,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAA,CAAE,EAAA,QAAA,EAEjE,iBAAiB,EAAE,YAAY,GAAG,CAAC,IAClC,CAAA,EAAG,iBAAiB,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,CAAG,KAEjDA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YACzCA,GAAA,CAAC,aAAa,EAAA,EACZ,IAAI,EAAE,8EAA8E,EACpF,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAEjCA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAA,CAAG,EAAA,CACxB,GACX,CACR,EAAA,CACI,KAEPC,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC5E,KAAK,IAAI,GAAG,EACZ,cAAc,KACbD,GAAA,CAAC,aAAa,IACZ,IAAI,EAAEA,GAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAG,cAAc,GAAI,EAC3B,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,GAAG,aAAa,GAAG,YAAY,EAClD,YAAY,EAAE,QAAQ,GAAG,mBAAmB,GAAG,oBAAoB,EAAA,QAAA,EAEnEF,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAC1EA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kFAAkF,EACtF,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,CACxC,EAAA,CACG,GACO,CACjB,CAAA,EAAA,CACI,CACR,EAAA,CACI;AAEX;;;;"}

package/dist/views/Bonds/components/BonusComponents/BonusContainer.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
+import React from 'react';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 import { TrueBondPrices } from '../../../../types/bonds';
-declare const BonusContainer: ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition, cardsView, }: {
+declare const BonusContainer: ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition, }: {
     trueBondPrices?: TrueBondPrices[];
     minTier?: LaunchBondTiers;
     bonus?: string;
     airdropTooltip?: string;
     tooltipPosition?: "bottomRight" | "bottomLeft";
-    cardsView?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default BonusContainer;

package/dist/views/Bonds/components/BonusComponents/BonusContainer.js CHANGED Viewed

@@ -1,13 +1,10 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx } from 'theme-ui/jsx-runtime';
 import BonusComponent from './BonusComponent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
-const BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition = 'bottomRight', cardsView, }) => {
+const BonusContainer = ({ trueBondPrices, minTier, bonus, airdropTooltip, tooltipPosition = 'bottomRight', }) => {
     const isMobile = useIsMobile();
-    return (jsxs("div", { className: clsx('discount-column ape:flex', cardsView
-            ? 'ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[100px]'
-            : 'ape:w-[170px] ape:items-end ape:justify-center'), children: [cardsView && (jsx("span", { className: "ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]", children: "Bonus" })), jsx(BonusComponent, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' })] }));
+    return (jsx("div", { className: `discount-column`, children: jsx(BonusComponent, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, tooltipPosition: isMobile ? tooltipPosition : 'bottomLeft' }) }));
 };
 export { BonusContainer as default };

package/dist/views/Bonds/components/BonusComponents/BonusContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusContainer.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusContainer.tsx"],"sourcesContent":["import React from 'react'\nimport ~~clsx from 'clsx'\nimport~~ { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport BonusComponent from './BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { TrueBondPrices } from '../../../../types/bonds'\n\nconst BonusContainer = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition = 'bottomRight',\n ~~cardsView,\n~~}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n ~~cardsView?: boolean\n~~}) => {\n const isMobile = useIsMobile()\n return (\n <div\n className={~~clsx(\n '~~discount-column ~~ape:flex',\n cardsView\n ? 'ape:flex-col ape:justify-start ape:items-start ape:relative ape:w-[100px]'\n : 'ape:w-[170px] ape:items-end ape:justify-center',\n )~~}\n >\n ~~{cardsView && (\n~~ <~~span className=\"ape:text-[12px] ape:font-normal ape:text-[#777] ape:absolute ape:-top-[15px]\">Bonus</span>\n )}\n <~~BonusComponent\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n tooltipPosition={isMobile ? tooltipPosition : 'bottomLeft'}\n />\n </div>\n )\n}\n\nexport default BonusContainer\n"],"names":["~~_jsxs","~~_jsx"],"mappings":"~~;;;;;AAOA~~,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,GAAG,aAAa,~~EAC/B~~,~~SAAS,GAQV,~~KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;~~IAC9B~~,QACEA,~~cACE~~,~~SAAS~~,~~EAAE~~,~~IAAI,CACb,0BAA0B,EAC1B;AACE,cAAE;cACA,gDAAgD,CACrD,~~EAAA,~~QAAA~~,~~EAAA,CAEA,~~SAAS,~~KACRC~~,~~cAAM~~,~~SAAS~~,~~EAAC~~,~~8EAA8E~~,~~EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAC5G,EACDA,~~GAAA,CAAC,cAAc,~~IACb~~,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,QAAQ,GAAG,eAAe,GAAG,YAAY,EAAA,CAC1D,~~CAAA,~~EAAA,CACE;AAEV;;;;"}
1	+ {"version":3,"file":"BonusContainer.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusContainer.tsx"],"sourcesContent":["import React from 'react'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport BonusComponent from './BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { TrueBondPrices } from '../../../../types/bonds'\n\nconst BonusContainer = ({\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n tooltipPosition = 'bottomRight',\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n tooltipPosition?: 'bottomRight' \| 'bottomLeft'\n}) => {\n const isMobile = useIsMobile()\n return (\n <div className={`discount-column`}>\n <BonusComponent\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n tooltipPosition={isMobile ? tooltipPosition : 'bottomLeft'}\n />\n </div>\n )\n}\n\nexport default BonusContainer\n"],"names":["_jsx"],"mappings":";;;;AAMA,MAAM,cAAc,GAAG,CAAC,EACtB,cAAc,EACd,OAAO,EACP,KAAK,EACL,cAAc,EACd,eAAe,GAAG,aAAa,GAOhC,KAAI;AACH,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,eAAA,CAAiB,YAC/BA,GAAA,CAAC,cAAc,EAAA,EACb,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,QAAQ,GAAG,eAAe,GAAG,YAAY,EAAA,CAC1D,EAAA,CACE;AAEV;;;;"}

package/dist/views/Bonds/components/BonusComponents/BonusTable.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
+import React from 'react';
 import { TrueBondPrices } from '../../../../types/bonds';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 declare const BonusTable: ({ trueBondPrices, minTier, hideTitle, }: {
     trueBondPrices?: TrueBondPrices[];
     minTier?: LaunchBondTiers;
     hideTitle?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default BonusTable;

package/dist/views/Bonds/components/BonusComponents/BonusTable.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Button from '../../../../components/uikit-sdk/Button/Button.js';
 import useTierPoints, { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/useTierPoints.js';
@@ -10,7 +9,7 @@ const BonusTable = ({ trueBondPrices, minTier, hideTitle, }) => {
     const { data: tierPointsState } = useTierPoints();
     const { onChainPoints } = tierPointsState || {};
     const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices);
-    return (jsxs(Flex, { className: "ape:w-full ape:flex-col", children: [!hideTitle && jsx(Flex, { className: "ape:w-full ape:justify-center ape:mb-[10px]", children: "Ape Tier Bonuses" }), trueBondPrices
+    return (jsxs(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: [!hideTitle && jsx(Flex, { sx: { width: '100%', justifyContent: 'center', mb: '10px' }, children: "Ape Tier Bonuses" }), trueBondPrices
                 ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))
                 .map((tier) => {
                 const tierToUse = getUserTier(tier.points);
@@ -19,12 +18,26 @@ const BonusTable = ({ trueBondPrices, minTier, hideTitle, }) => {
                 const you = tier.points === usersTrueBondPrices?.points;
                 // @ts-ignore
                 const isUnavailable = minTier ? minTier > tierToUse || (minTier === 0 && tier.points === '0') : false;
-                return (jsxs(Flex, { className: "ape:w-full ape:justify-between ape:h-[30px] ape:rounded-normal ape:items-center ape:px-[8px] ape:mb-[1px]",
-                    //@ts-ignore
-                    style: { background: TIERS_BG[tierToUse] ?? 'var(--ape-color-white3)' }, children: [jsxs(Flex, { className: "ape:items-center", children: [tier.points !== '0' && (jsx("img", {
+                return (jsxs(Flex, { sx: {
+                        width: '100%',
+                        justifyContent: 'space-between',
+                        height: '30px',
+                        //@ts-ignore
+                        background: TIERS_BG[tierToUse] ?? 'white3',
+                        borderRadius: 'normal',
+                        alignItems: 'center',
+                        px: '8px',
+                        mb: '1px',
+                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [tier.points !== '0' && (jsx("img", {
                                     //@ts-ignore
-                                    src: `https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx(YouTooltip, {})] }), isUnavailable ? (jsx(Flex, { className: "ape:font-semibold ape:opacity-80", children: "UNAVAILABLE" })) : (jsxs(Flex, { className: clsx('ape:font-bold ape:items-center', tier.bonusWithFee > 0 ? 'ape:text-success' : 'ape:text-text'), children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx(Flex, { className: "ape:rounded-normal ape:border ape:border-solid ape:border-success ape:px-[4px] ape:ml-[3px] ape:text-success", children: `+${tier?.boost ?? 0}%` }))] }))] }, tier.points));
-            }), !hideTitle && (jsx(Button, { variant: "secondary", className: "ape:w-full ape:mt-[10px]", onClick: () => window.open('https://www.ape.bond/true-yield?createPosition', '_blank'), children: "get tier" }))] }));
+                                    src: `https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } })), jsx(Flex, { children: tier.points === '0' ? 'No Tier' : tierName }), you && jsx(YouTooltip, {})] }), isUnavailable ? (jsx(Flex, { sx: { fontWeight: 600, opacity: 0.8 }, children: "UNAVAILABLE" })) : (jsxs(Flex, { sx: { color: tier.bonusWithFee > 0 ? 'success' : 'text', fontWeight: 700, alignItems: 'center' }, children: [tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0', "%", tier.points !== '0' && (jsx(Flex, { sx: {
+                                        borderRadius: 'normal',
+                                        border: '1px solid var(--theme-ui-colors-success)',
+                                        px: '4px',
+                                        ml: '3px',
+                                        color: 'success',
+                                    }, children: `+${tier?.boost ?? 0}%` }))] }))] }, tier.points));
+            }), !hideTitle && (jsx(Button, { variant: "secondary", sx: { width: '100%', mt: '10px' }, onClick: () => window.open('https://www.ape.bond/true-yield?createPosition', '_blank'), children: "get tier" }))] }));
 };
 export { BonusTable as default };

package/dist/views/Bonds/components/BonusComponents/BonusTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BonusTable.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusTable.tsx"],"sourcesContent":["import React from 'react'\nimport ~~clsx from 'clsx'\nimport~~ Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport useTierPoints, { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/useTierPoints'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport YouTooltip from '../../../../components/YouTooltip/YouTooltip'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst BonusTable = ({\n trueBondPrices,\n minTier,\n hideTitle,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n hideTitle?: boolean\n}) => {\n const { data: tierPointsState } = useTierPoints()\n const { onChainPoints } = tierPointsState \|\| {}\n const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices)\n\n return (\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~flex-col\"~~>\n {!hideTitle && <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify-~~center ~~ape~~:~~mb-[~~10px~~]\"~~>Ape Tier Bonuses</Flex>}\n {trueBondPrices\n ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))\n .map((tier) => {\n const tierToUse = getUserTier(tier.points) as LaunchBondTiers\n //@ts-ignore\n const tierName = `${TIERS_NAMES[tierToUse!]}`\n const you = tier.points === usersTrueBondPrices?.points\n // @ts-ignore\n const isUnavailable = minTier ? minTier > tierToUse \|\| (minTier === 0 && tier.points === '0') : false\n return (\n <Flex\n ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~justify~~-between ~~ape:h-[~~30px~~] ape:rounded-normal ape:items-center ape:px-[8px] ape:mb-[1px]\"\~~n //@ts-ignore\n ~~style={{~~ background: TIERS_BG[tierToUse] ?? '~~var(--ape-color-~~white3)' }}\n key={tier.points}\n >\n <Flex ~~className=\"ape~~:~~items-~~center\">\n {tier.points !== '0' && (\n <img\n //@ts-ignore\n src={`https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n )}\n <Flex>{tier.points === '0' ? 'No Tier' : tierName}</Flex>\n {you && <YouTooltip />}\n </Flex>\n {isUnavailable ? (\n <Flex ~~className=\"ape~~:~~font-semibold~~ ~~ape~~:~~opacity-80\"~~>UNAVAILABLE</Flex>\n ) : (\n <Flex~~\n className~~={~~clsx(\n 'ape~~:~~font-bold~~ ~~ape:items-center',\n~~ tier.bonusWithFee > 0 ? '~~ape:text-~~success' : '~~ape:~~text~~-text~~'~~,\n )~~}\n >\n {tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0'}%\n {tier.points !== '0' && (\n <Flex ~~className=\"ape:rounded-~~normal ~~ape~~:~~border~~ ~~ape:border-~~solid ~~ape:border~~-success ~~ape~~:~~px-[4px]~~ ~~ape~~:~~ml-[3px]~~ ~~ape:text-~~success\">\n {`+${tier?.boost ?? 0}%`}\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n })}\n {!hideTitle && (\n <Button\n variant=\"secondary\"\n ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~mt-[~~10px]\"\n onClick={() => window.open('https://www.ape.bond/true-yield?createPosition', '_blank')}\n >\n get tier\n </Button>\n )}\n </Flex>\n )\n}\n\nexport default BonusTable\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;AAUA~~,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,OAAO,EACP,SAAS,GAKV,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE;AACjD,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,IAAI,EAAE;IAC/C,MAAM,mBAAmB,GAAG,wBAAwB,CAAC,aAAa,EAAE,cAAc,CAAC;AAEnF,IAAA,QACEA,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~yBAAyB~~,EAAA,QAAA,EAAA,~~CACtC~~,CAAC,SAAS,IAAIC,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~6CAA6C~~,EAAA,QAAA,EAAA,kBAAA,EAAA,~~CAAwB~~,~~EACnG~~;kBACG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACxG,iBAAA,GAAG,CAAC,CAAC,IAAI,KAAI;gBACZ,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAoB;;gBAE7D,MAAM,QAAQ,GAAG,CAAA,EAAG,WAAW,CAAC,SAAU,CAAC,EAAE;gBAC7C,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,KAAK,mBAAmB,EAAE,MAAM;;gBAEvD,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,KAAK,OAAO,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK;AACrG,gBAAA,QACED,IAAA,CAAC,IAAI,EAAA,EACH,~~SAAS~~,~~EAAC~~,~~2GAA2G;;oBAErH~~,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC,IAAI,~~yBAAyB~~,EAAE,EAAA,QAAA,EAAA,~~CAGvEA~~,KAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~kBAAkB~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~CAC~~/B,IAAI,CAAC,MAAM,KAAK,GAAG,KAClBC,GAAA,CAAA,KAAA,EAAA;;AAEE,oCAAA,GAAG,EAAE,CAAA,+BAAA,EAAkC,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAClF,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,~~GACvE~~,CACH,EACDA,GAAA,CAAC,IAAI,~~cAAE~~,IAAI,CAAC,MAAM,KAAK,GAAG,GAAG,SAAS,GAAG,QAAQ,EAAA,CAAQ,EACxD,GAAG,IAAIA,~~GAAA~~,~~CAAC,~~UAAU,~~KAAG~~,CAAA,EAAA,CACjB,EACN,aAAa,IACZA,~~GAAA~~,~~CAAC,~~IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~kCAAkC~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~aAAA~~,~~EAAA~~,~~CAAmB~~,~~KAErED~~,~~KAAC~~,IAAI,EAAA,~~EACH~~,~~SAAS~~,EAAE,~~IAAI~~,~~CACb~~,~~gCAAgC~~,~~EAChC,~~IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,~~kBAAkB~~,GAAG,~~eAAe~~,~~CAC7D~~,EAAA,QAAA,EAAA,~~CAEA~~,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,EAAA,GAAA,EAC1D,IAAI,CAAC,MAAM,KAAK,GAAG,KAClBC,GAAA,CAAC,IAAI,EAAA,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~8GAA8G~~,~~EAAA~~,~~QAAA~~,~~EAC3H~~,~~CAAA~~,~~CAAA~~,~~EAAI~~,IAAI,EAAE,KAAK,IAAI,CAAC,~~GAAG~~,EAAA,CACnB,CACR,CAAA,EAAA,CACI,CACR,~~KA9BI~~,IAAI,CAAC,MAAM,~~CA+BX~~;AAEX,YAAA,CAAC,CAAC,EACH,CAAC,SAAS,KACTA,~~GAAA~~,~~CAAC,~~MAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,~~SAAS~~,~~EAAC~~,~~0BAA0B~~,~~EACpC~~,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,gDAAgD,EAAE,QAAQ,CAAC,~~EAAA,QAAA,EAAA,UAAA,EAAA,CAG~~/E,CACV,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"BonusTable.js","sources":["../../../../../src/views/Bonds/components/BonusComponents/BonusTable.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport useTierPoints, { getUserTier, TIERS_BG, TIERS_NAMES } from '../../../../state/tiers/useTierPoints'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport YouTooltip from '../../../../components/YouTooltip/YouTooltip'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst BonusTable = ({\n trueBondPrices,\n minTier,\n hideTitle,\n}: {\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n hideTitle?: boolean\n}) => {\n const { data: tierPointsState } = useTierPoints()\n const { onChainPoints } = tierPointsState \|\| {}\n const usersTrueBondPrices = findHighestTrueBondPrice(onChainPoints, trueBondPrices)\n\n return (\n <Flex sx={{ width: '100%', flexDirection: 'column' }}>\n {!hideTitle && <Flex sx={{ width: '100%', justifyContent: 'center', mb: '10px' }}>Ape Tier Bonuses</Flex>}\n {trueBondPrices\n ?.sort((a, b) => (BigInt(b.points) > BigInt(a.points) ? 1 : BigInt(b.points) < BigInt(a.points) ? -1 : 0))\n .map((tier) => {\n const tierToUse = getUserTier(tier.points) as LaunchBondTiers\n //@ts-ignore\n const tierName = `${TIERS_NAMES[tierToUse!]}`\n const you = tier.points === usersTrueBondPrices?.points\n // @ts-ignore\n const isUnavailable = minTier ? minTier > tierToUse \|\| (minTier === 0 && tier.points === '0') : false\n return (\n <Flex\n sx={{\n width: '100%',\n justifyContent: 'space-between',\n height: '30px',\n //@ts-ignore\n background: TIERS_BG[tierToUse] ?? 'white3',\n borderRadius: 'normal',\n alignItems: 'center',\n px: '8px',\n mb: '1px',\n }}\n key={tier.points}\n >\n <Flex sx={{ alignItems: 'center' }}>\n {tier.points !== '0' && (\n <img\n //@ts-ignore\n src={`https://ape.bond/images/launch/${TIERS_NAMES[tierToUse]?.toLowerCase()}.png`}\n alt=\"minTier\"\n style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n />\n )}\n <Flex>{tier.points === '0' ? 'No Tier' : tierName}</Flex>\n {you && <YouTooltip />}\n </Flex>\n {isUnavailable ? (\n <Flex sx={{ fontWeight: 600, opacity: 0.8 }}>UNAVAILABLE</Flex>\n ) : (\n <Flex sx={{ color: tier.bonusWithFee > 0 ? 'success' : 'text', fontWeight: 700, alignItems: 'center' }}>\n {tier.bonusWithFee > 0 ? tier.bonusWithFee.toFixed(2) : '0'}%\n {tier.points !== '0' && (\n <Flex\n sx={{\n borderRadius: 'normal',\n border: '1px solid var(--theme-ui-colors-success)',\n px: '4px',\n ml: '3px',\n color: 'success',\n }}\n >\n {`+${tier?.boost ?? 0}%`}\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n })}\n {!hideTitle && (\n <Button\n variant=\"secondary\"\n sx={{ width: '100%', mt: '10px' }}\n onClick={() => window.open('https://www.ape.bond/true-yield?createPosition', '_blank')}\n >\n get tier\n </Button>\n )}\n </Flex>\n )\n}\n\nexport default BonusTable\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/BuyAgainRow/index.d.ts CHANGED Viewed

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

package/dist/views/Bonds/components/BuyAgainRow/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useMemo } from 'react';
 import { isBondSoldOut } from '../../utils.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
@@ -31,7 +31,26 @@ const BuyAgainRow = () => {
     const remainingTokensString = bond
         ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`
         : '';
-    return bond ? (jsxs(Flex, { className: "ape:relative ape:w-full ape:mb-[10px]", children: [jsx(Flex, { className: "ape:p-[0_1px] ape:w-full ape:pt-[5px] ape:bg-primary-button ape:rounded-normal ape:flex-col ape:opacity-50", children: jsx(Flex, { className: "buy-again-header ape:w-full ape:text-[12px] ape:font-medium ape:pl-[26px] ape:text-primary-bright ape:h-[91px]", children: "BOND SPOTLIGHT" }) }), jsx(Flex, { onClick: () => {
+    return bond ? (jsxs(Flex, { sx: {
+            position: 'relative',
+            width: '100%',
+            mb: '10px',
+        }, children: [jsx(Flex, { sx: {
+                    p: '0 1px',
+                    width: '100%',
+                    pt: '5px',
+                    background: 'primaryButton',
+                    borderRadius: 'normal',
+                    flexDirection: 'column',
+                    opacity: 0.5,
+                }, children: jsx(Flex, { className: "buy-again-header", sx: {
+                        width: '100%',
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        pl: '26px',
+                        color: 'primaryBright',
+                        height: '91px',
+                    }, children: "BOND SPOTLIGHT" }) }), jsx(Flex, { onClick: () => {
                     track({
                         event: 'buyAgainClick',
                         chain: bond.chainId,
@@ -39,7 +58,7 @@ const BuyAgainRow = () => {
                             bond: bond.earnToken.symbol,
                         },
                     });
-                }, className: "ape:absolute ape:top-[25px] ape:left-[1px] ape:w-[calc(100%-2px)]", children: jsx(BondRow, { bondAddress: bond?.contractAddress?.[bond?.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: bond.tags?.[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond?.trueBondPrices, minTier: bond?.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] })) : null;
+                }, sx: { position: 'absolute', top: '25px', left: '1px', width: 'calc(100% - 2px)' }, children: jsx(BondRow, { bondAddress: bond?.contractAddress?.[bond?.chainId], bondChain: bond.chainId, billType: bond.billType, payoutToken: bond.earnToken, tag: bond.tags?.[0], bondSoldOut: isBondSoldOut(bond, SDKConfig.showLowValueBonds), trueBondPrices: bond?.trueBondPrices, minTier: bond?.minTier, vestingTermString: getVestingTermsString(bond), vestingCliffString: getVestingTermsTooltipString(bond), percentageAvailable: remainingPercentage(bond), remainingTokensString: remainingTokensString }, `${bondAddress}-${bond.chainId}`) })] })) : null;
 };
 export { BuyAgainRow as default };

package/dist/views/Bonds/components/BuyAgainRow/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/BuyAgainRow/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { isBondSoldOut } from '../../utils'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport BondRow from '../BondRows/BondRow'\nimport track from '../../../../utils/track'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { BondsData } from '../../../../types/bonds'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport {\n getVestingTermsString,\n getVestingTermsTooltipString,\n remainingPercentage,\n} from '../../../../utils/displayHelpers'\n\nconst BuyAgainRow = () => {\n const { data: bills } = useBondsData()\n const SDKConfig = useSDKConfig()\n const highlightedBond = SDKConfig.highlightedBond\n const chains = SDKConfig?.chains as number[]\n\n const bond = useMemo(\n () =>\n bills?.find(\n (bill) =>\n bill.earnToken.symbol.toLowerCase() === highlightedBond?.toLowerCase() &&\n !bill.soldOut &&\n !bill.hide &&\n chains.includes(bill.chainId),\n ),\n [bills, chains, highlightedBond],\n )\n\n const bondAddress = bond?.contractAddress?.[bond.chainId]\n\n const remainingTokensFormat = (bond: BondsData \| BillsConfig) => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n return formatNumberSI(parseFloat(tokensRemaining ?? '0'), 0)\n }\n\n const remainingTokensUsd = (bond: BondsData \| BillsConfig): number => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0\n return Number(tokensRemaining ?? '0') * Number(payoutTokenPrice ?? '0')\n }\n\n const remainingTokensString = bond\n ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`\n : ''\n\n return bond ? (\n <Flex ~~className=\"ape~~:~~relative~~ ~~ape~~:~~w-full~~ ~~ape:mb-[~~10px]\">\n <Flex ~~className=\"ape~~:~~p-[0_1px]~~ ~~ape~~:~~w-full~~ ~~ape~~:~~pt-[5px]~~ ~~ape~~:~~bg-primary-button~~ ~~ape~~:~~rounded-normal~~ ~~ape~~:~~flex-col~~ ~~ape:opacity-50~~\">\n <Flex className=\"buy-again-header ~~ape~~:~~w-full~~ ~~ape~~:~~text-[12px]~~ ~~ape~~:~~font-medium~~ ~~ape~~:~~pl-[26px]~~ ~~ape~~:~~text-primary-bright~~ ~~ape:h-[~~91px]\">\n BOND SPOTLIGHT\n </Flex>\n </Flex>\n <Flex\n onClick={() => {\n track({\n event: 'buyAgainClick',\n chain: bond.chainId,\n data: {\n bond: bond.earnToken.symbol,\n },\n })\n }}\n ~~className=\"ape~~:absolute ~~ape~~:~~top-[~~25px] ~~ape~~:~~left-[~~1px] ~~ape~~:~~w-[~~calc(100%-2px)]\"\n >\n <BondRow\n key={`${bondAddress}-${bond.chainId}`}\n bondAddress={bond?.contractAddress?.[bond?.chainId] as string}\n bondChain={bond.chainId}\n billType={bond.billType}\n payoutToken={bond.earnToken}\n tag={bond.tags?.[0]}\n bondSoldOut={isBondSoldOut(bond, SDKConfig.showLowValueBonds)}\n trueBondPrices={bond?.trueBondPrices}\n minTier={bond?.minTier}\n vestingTermString={getVestingTermsString(bond)}\n vestingCliffString={getVestingTermsTooltipString(bond)}\n percentageAvailable={remainingPercentage(bond)}\n remainingTokensString={remainingTokensString}\n />\n </Flex>\n </Flex>\n ) : null\n}\n\nexport default BuyAgainRow\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAgBA,MAAM,WAAW,GAAG,MAAK;IACvB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE;AACtC,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,eAAe,GAAG,SAAS,CAAC,eAAe;AACjD,IAAA,MAAM,MAAM,GAAG,SAAS,EAAE,MAAkB;AAE5C,IAAA,MAAM,IAAI,GAAG,OAAO,CAClB,MACE,KAAK,EAAE,IAAI,CACT,CAAC,IAAI,KACH,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE,WAAW,EAAE;QACtE,CAAC,IAAI,CAAC,OAAO;QACb,CAAC,IAAI,CAAC,IAAI;AACV,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAChC,EACH,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,CAAC,CACjC;IAED,MAAM,WAAW,GAAG,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;AAEzD,IAAA,MAAM,qBAAqB,GAAG,CAAC,IAA6B,KAAI;AAC9D,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,GAAG;QAC9E,OAAO,cAAc,CAAC,UAAU,CAAC,eAAe,IAAI,GAAG,CAAC,EAAE,CAAC,CAAC;AAC9D,IAAA,CAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAA6B,KAAY;AACnE,QAAA,MAAM,eAAe,GAAG,iBAAiB,IAAI,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,GAAG;AAC9E,QAAA,MAAM,gBAAgB,GAAG,kBAAkB,IAAI,IAAI,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC;AAC/E,QAAA,OAAO,MAAM,CAAC,eAAe,IAAI,GAAG,CAAC,GAAG,MAAM,CAAC,gBAAgB,IAAI,GAAG,CAAC;AACzE,IAAA,CAAC;IAED,MAAM,qBAAqB,GAAG;UAC1B,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA,GAAA,EAAM,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAA,CAAA;UACrG,EAAE;~~AAEN~~,~~IAAA,~~OAAO,IAAI,IACTA,IAAA,CAAC,IAAI,EAAA,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~uCAAuC~~,EAAA,QAAA,EAAA,~~CACrDC~~,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~4GAA4G~~,EAAA,QAAA,~~EAC1HA~~,GAAA,CAAC,IAAI,EAAA,~~EAAC~~,SAAS,EAAC,~~gHAAgH~~,EAAA,QAAA,EAAA,gBAAA,EAAA,~~CAEzH~~,EAAA,CACF,EACPA,~~IAAC~~,IAAI,~~EAAA~~,~~EACH,~~OAAO,EAAE,MAAK;AACZ,oBAAA,KAAK,CAAC;AACJ,wBAAA,KAAK,EAAE,eAAe;wBACtB,KAAK,EAAE,IAAI,CAAC,OAAO;AACnB,wBAAA,IAAI,EAAE;AACJ,4BAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC5B,yBAAA;AACF,qBAAA,CAAC;~~gBACJ~~,CAAC,EACD,~~SAAS~~,~~EAAC~~,~~mEAAmE~~,EAAA,QAAA,~~EAE7EA~~,~~IAAC~~,OAAO,EAAA,EAEN,WAAW,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAW,EAC7D,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,SAAS,EAC3B,GAAG,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,EACnB,WAAW,EAAE,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAC7D,cAAc,EAAE,IAAI,EAAE,cAAc,EACpC,OAAO,EAAE,IAAI,EAAE,OAAO,EACtB,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,EAC9C,kBAAkB,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtD,mBAAmB,EAAE,mBAAmB,CAAC,IAAI,CAAC,EAC9C,qBAAqB,EAAE,qBAAqB,EAAA,EAZvC,CAAA,EAAG,WAAW,~~IAAI~~,IAAI,CAAC,OAAO,CAAA,CAAE,CAarC,EAAA,CACG,CAAA,EAAA,CACF,IACL,IAAI;AACV;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/Bonds/components/BuyAgainRow/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { isBondSoldOut } from '../../utils'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport BondRow from '../BondRows/BondRow'\nimport track from '../../../../utils/track'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { BondsData } from '../../../../types/bonds'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport {\n getVestingTermsString,\n getVestingTermsTooltipString,\n remainingPercentage,\n} from '../../../../utils/displayHelpers'\n\nconst BuyAgainRow = () => {\n const { data: bills } = useBondsData()\n const SDKConfig = useSDKConfig()\n const highlightedBond = SDKConfig.highlightedBond\n const chains = SDKConfig?.chains as number[]\n\n const bond = useMemo(\n () =>\n bills?.find(\n (bill) =>\n bill.earnToken.symbol.toLowerCase() === highlightedBond?.toLowerCase() &&\n !bill.soldOut &&\n !bill.hide &&\n chains.includes(bill.chainId),\n ),\n [bills, chains, highlightedBond],\n )\n\n const bondAddress = bond?.contractAddress?.[bond.chainId]\n\n const remainingTokensFormat = (bond: BondsData \| BillsConfig) => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n return formatNumberSI(parseFloat(tokensRemaining ?? '0'), 0)\n }\n\n const remainingTokensUsd = (bond: BondsData \| BillsConfig): number => {\n const tokensRemaining = 'tokensRemaining' in bond ? bond.tokensRemaining : '0'\n const payoutTokenPrice = 'payoutTokenPrice' in bond ? bond.payoutTokenPrice : 0\n return Number(tokensRemaining ?? '0') * Number(payoutTokenPrice ?? '0')\n }\n\n const remainingTokensString = bond\n ? `${remainingTokensFormat(bond)} ${bond.earnToken.symbol} ($${formatNumberSI(remainingTokensUsd(bond))})`\n : ''\n\n return bond ? (\n <Flex\n sx={{\n position: 'relative',\n width: '100%',\n mb: '10px',\n }}\n >\n <Flex\n sx={{\n p: '0 1px',\n width: '100%',\n pt: '5px',\n background: 'primaryButton',\n borderRadius: 'normal',\n flexDirection: 'column',\n opacity: 0.5,\n }}\n >\n <Flex\n className=\"buy-again-header\"\n sx={{\n width: '100%',\n fontSize: '12px',\n fontWeight: 500,\n pl: '26px',\n color: 'primaryBright',\n height: '91px',\n }}\n >\n BOND SPOTLIGHT\n </Flex>\n </Flex>\n <Flex\n onClick={() => {\n track({\n event: 'buyAgainClick',\n chain: bond.chainId,\n data: {\n bond: bond.earnToken.symbol,\n },\n })\n }}\n sx={{ position: 'absolute', top: '25px', left: '1px', width: 'calc(100% - 2px)' }}\n >\n <BondRow\n key={`${bondAddress}-${bond.chainId}`}\n bondAddress={bond?.contractAddress?.[bond?.chainId] as string}\n bondChain={bond.chainId}\n billType={bond.billType}\n payoutToken={bond.earnToken}\n tag={bond.tags?.[0]}\n bondSoldOut={isBondSoldOut(bond, SDKConfig.showLowValueBonds)}\n trueBondPrices={bond?.trueBondPrices}\n minTier={bond?.minTier}\n vestingTermString={getVestingTermsString(bond)}\n vestingCliffString={getVestingTermsTooltipString(bond)}\n percentageAvailable={remainingPercentage(bond)}\n remainingTokensString={remainingTokensString}\n />\n </Flex>\n </Flex>\n ) : null\n}\n\nexport default BuyAgainRow\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/Bonds/components/ChainBanner/ChainBanner.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import React from 'react';
 import { ChainId } from '@ape.swap/apeswap-lists';
 declare const ChainBanner: ({ chainId }: {
     chainId: ChainId;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default ChainBanner;

package/dist/views/Bonds/components/ChainBanner/ChainBanner.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Button from '../../../../components/uikit-sdk/Button/Button.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import { variants } from '../../../../components/uikit-sdk/Button/types.js';
@@ -68,12 +68,16 @@ const ChainBanner = ({ chainId }) => {
         // Fallback for non-Next.js environments
         window.history.pushState({}, '', bannerCTA);
     };
-    return (jsxs("div", {
-        // Both breakpoints must be classes, not inline style + a class — an
-        // inline `backgroundImage` would always win over the `lg:` media-query
-        // class regardless of viewport width, so the desktop image would never
-        // show.
-        className: `banner-container ape:w-full ape:min-h-[160px] ape:rounded-[8px] ape:flex ape:flex-col ape:items-center ape:justify-center ape:mb-[10px] ape:gap-[5px] ape:bg-cover ape:bg-no-repeat ape:p-[15px] ape:min-[800px]:max-[1000px]:bg-bottom ape:bg-[image:url('${BANNER_INFO[chainId]?.backgroundMobile}')] ape:lg:bg-[image:url('${BANNER_INFO[chainId]?.background}')] ${bannerCTA ? 'ape:cursor-pointer' : 'ape:cursor-[unset]'}`, onClick: handleClickOnBanner, children: [jsx("div", { className: "banner-title ape:font-bold ape:text-[25.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:mt-[10px] ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-1/2 ape:max-sm:text-[18px] ape:max-sm:leading-[21px]", children: BANNER_INFO[chainId]?.title }), jsx("div", { className: "banner-subtitle ape:font-normal ape:text-[14.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-[55%] ape:max-sm:text-[12px] ape:max-sm:leading-[14px] ape:max-sm:mb-[10px]", children: BANNER_INFO[chainId]?.subtitle }), jsx("div", { className: "banner-actions ape:flex ape:items-center ape:justify-center ape:gap-[10px]", children: BANNER_INFO[chainId]?.buttons?.map((button, index) => (jsx(Button, { className: "action-button ape:h-[35px] ape:text-[12px]! ape:font-bold", onClick: () => window.open(button.cta, '_blank'), variant: button.variant || variants.PRIMARY, children: button.label }, `banner-button-${index}`))) })] }, `banner-container-${chainId}`));
+    return (jsxs("div", { className: "banner-container", sx: {
+            backgroundImage: [
+                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
+                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
+                `url(${BANNER_INFO[chainId]?.backgroundMobile})`,
+                `url(${BANNER_INFO[chainId]?.background})`,
+                `url(${BANNER_INFO[chainId]?.background})`,
+            ],
+            cursor: bannerCTA ? 'pointer' : 'unset',
+        }, onClick: handleClickOnBanner, children: [jsx("div", { className: "banner-title", children: BANNER_INFO[chainId]?.title }), jsx("div", { className: "banner-subtitle", children: BANNER_INFO[chainId]?.subtitle }), jsx("div", { className: "banner-actions", children: BANNER_INFO[chainId]?.buttons?.map((button, index) => (jsx(Button, { className: "action-button", onClick: () => window.open(button.cta, '_blank'), variant: button.variant || variants.PRIMARY, children: button.label }, `banner-button-${index}`))) })] }, `banner-container-${chainId}`));
 };
 export { ChainBanner as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainBanner.js","sources":["../../../../../src/views/Bonds/components/ChainBanner/ChainBanner.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { variants } from '../../../../components/uikit-sdk/Button/types'\n\ninterface ButtonInfo {\n label: string\n cta?: string\n variant?: variants\n background?: string\n}\n\ninterface BannerInfo {\n title?: string\n subtitle?: string\n buttons?: ButtonInfo[]\n background: string\n backgroundMobile: string\n cta?: string\n}\n\nconst BANNER_INFO: Partial<Record<ChainId, BannerInfo>> = {\n // MONAD IS BROKEN, TODO fix it!\n [ChainId.MONAD]: {\n title: 'Monad Mainnet Bonds',\n subtitle: 'Launch Coming Soon.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://x.com/ApeBond/status/1995538519536578880?s=20',\n variant: variants.SECONDARY,\n },\n { label: 'Launch Yours', cta: 'https://forms.clickup.com/3080492/f/2y09c-6585/O175DYTK4PMR6P4CZA' },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner_jpkg38.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner-mobile_y6xveu.png',\n },\n [ChainId.SOL]: {\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440199/desktopBanner_fse6ls.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440198/mobileBanner_x9tii9.png',\n cta: '?modal=rakurai',\n },\n // TODO(APTOS): replace placeholder images and \"LEARN MORE\" cta with final Aptos assets.\n // Currently reuses Solana background images.\n [ChainId.APTOS]: {\n title: 'Bonds are now Live on Aptos',\n subtitle: 'Get tokens at a discount on Aptos. Move-powered, sub-second finality.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://aptoslabs.com',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n // TODO(SUI): replace placeholder images and CTA with final Sui assets.\n [ChainId.SUI]: {\n title: 'Bonds are now Live on Sui',\n subtitle: 'Get tokens at a discount on Sui. Move-powered, parallel execution.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://sui.io',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n}\n\nconst ChainBanner = ({ chainId }: { chainId: ChainId }) => {\n const bannerCTA = BANNER_INFO[chainId]?.cta\n\n const handleClickOnBanner = () => {\n if (!bannerCTA) return\n // Next.js exposes the router singleton on window.next.router (Pages Router, dev + prod)\n const nextRouter = typeof window !== 'undefined' && (window as any).__NEXT_DATA__ && (window as any).next?.router\n if (nextRouter) {\n nextRouter.push(bannerCTA)\n return\n }\n // Fallback for non-Next.js environments\n window.history.pushState({}, '', bannerCTA)\n }\n\n return (\n <div\n key={`banner-container-${chainId}`}\n ~~// Both breakpoints must be classes, not inline style + a class — an\n // inline `backgroundImage` would always win over the `lg:` media~~-~~query~~\~~n // class regardless of viewport width, so the desktop image would never~~\n ~~// show.\n className~~={~~`banner-container ape~~:~~w-full~~ ~~ape:min-h-~~[~~160px] ape:rounded-~~[~~8px~~] ~~ape:flex ape:flex-col ape:items-center ape:justify-center ape:mb-~~[~~10px~~] ~~ape:gap-~~[~~5px~~] ~~ape:bg-cover ape:bg-no-repeat ape:p-[15px] ape:min-[800px]:max-[1000px]:bg-bottom ape:bg-[image:~~url('${BANNER_INFO[chainId]?.~~backgroundMobile~~}')~~] ape:lg:bg-[image:~~url('${BANNER_INFO[chainId]?.background}')] ${bannerCTA ? '~~ape:cursor-~~pointer' : '~~ape:cursor-[~~unset]'}`}\n onClick={handleClickOnBanner}\n >\n <div className=\"banner-title ape:font-bold ape:text-[25.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:mt-[10px] ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-1/2 ape:max-sm:text-[18px] ape:max-sm:leading-[21px]\"~~>\n~~ {BANNER_INFO[chainId]?.title}\n </div>\n <div className=\"banner-subtitle ape:font-normal ape:text-[14.26px] ape:leading-[30.26px] ape:tracking-[0] ape:text-center ape:align-middle ape:bg-clip-text ape:text-transparent ape:[-webkit-text-fill-color:transparent] ape:bg-[linear-gradient(180deg,#FFFFFF_50%,#666666_100%)] ape:max-sm:w-[55%] ape:max-sm:text-[12px] ape:max-sm:leading-[14px] ape:max-sm:mb-[10px]\"~~>\n~~ {BANNER_INFO[chainId]?.subtitle}\n </div>\n <div className=\"banner-actions ~~ape:flex ape:items-center ape:justify-center ape:gap-[10px]~~\">\n {BANNER_INFO[chainId]?.buttons?.map((button, index) => (\n <Button\n key={`banner-button-${index}`}\n className=\"action-button ~~ape:h-[35px] ape:text-[12px]! ape:font-bold~~\"\n onClick={() => window.open(button.cta, '_blank')}\n variant={button.variant \|\| variants.PRIMARY}\n >\n {button.label}\n </Button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ChainBanner\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAqBA,MAAM,WAAW,GAAyC;;AAExD,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,uDAAuD;gBAC5D,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACD,YAAA,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,mEAAmE,EAAE;AACpG,SAAA;AACD,QAAA,UAAU,EAAE,wEAAwE;AACpF,QAAA,gBAAgB,EAAE,+EAA+E;AAClG,KAAA;AACD,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG;AACb,QAAA,UAAU,EAAE,wFAAwF;AACpG,QAAA,gBAAgB,EAAE,uFAAuF;AACzG,QAAA,GAAG,EAAE,gBAAgB;AACtB,KAAA;;;AAGD,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG;AACf,QAAA,KAAK,EAAE,6BAA6B;AACpC,QAAA,QAAQ,EAAE,uEAAuE;AACjF,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,uBAAuB;gBAC5B,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE,qFAAqF;AACjG,QAAA,gBAAgB,EAAE,2FAA2F;AAC9G,KAAA;;AAED,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG;AACb,QAAA,KAAK,EAAE,2BAA2B;AAClC,QAAA,QAAQ,EAAE,oEAAoE;AAC9E,QAAA,OAAO,EAAE;AACP,YAAA;AACE,gBAAA,KAAK,EAAE,YAAY;AACnB,gBAAA,GAAG,EAAE,gBAAgB;gBACrB,OAAO,EAAE,QAAQ,CAAC,SAAS;AAC5B,aAAA;AACF,SAAA;AACD,QAAA,UAAU,EAAE,qFAAqF;AACjG,QAAA,gBAAgB,EAAE,2FAA2F;AAC9G,KAAA;CACF;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAwB,KAAI;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,EAAE,GAAG;IAE3C,MAAM,mBAAmB,GAAG,MAAK;AAC/B,QAAA,IAAI,CAAC,SAAS;YAAE;;AAEhB,QAAA,MAAM,UAAU,GAAG,OAAO,MAAM,KAAK,WAAW,IAAK,MAAc,CAAC,aAAa,IAAK,MAAc,CAAC,IAAI,EAAE,MAAM;QACjH,IAAI,UAAU,EAAE;AACd,YAAA,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;YAC1B;QACF;;QAEA,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,SAAS,CAAC;AAC7C,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA~~;;;;;AAME~~,~~QAAA~~,SAAS,EAAE,CAAA,~~2PAAA~~,~~EAA8P~~,WAAW,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAA,~~0BAAA~~,~~EAA6B~~,WAAW,CAAC,OAAO,CAAC,EAAE,UAAU,CAAA,IAAA,EAAO,~~SAAS~~,~~GAAG~~,~~oBAAoB~~,~~GAAG~~,~~oBAAoB~~,CAAA,~~CAAE~~,~~EAC5a~~,OAAO,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAE5BC,~~GAAA~~,~~CAAA,KAAA,EAAA,EAAK,~~SAAS,EAAC,~~iVAAiV~~,EAAA,QAAA,~~EAC7V~~,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAA,~~CACxB~~,~~EACNA~~,~~GAAA~~,~~CAAA,KAAA,EAAA,EAAK,~~SAAS,EAAC~~,+VAA+V~~,EAAA,QAAA,~~EAC3W~~,WAAW,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAA,~~CAC3B~~,~~EACNA~~,~~GAAA~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAK~~,~~SAAS~~,~~EAAC,4EAA4E,YACxF,~~WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MAChDA,GAAA,CAAC,MAAM,~~EAAA~~,~~EAEL,~~SAAS,EAAC,~~2DAA2D~~,~~EACrE~~,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC,EAChD,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,~~YAE1C~~,MAAM,CAAC,KAAK,EAAA,EALR,CAAA,cAAA,EAAiB,KAAK,CAAA,CAAE,CAMtB,CACV,CAAC,EAAA,CACE,CAAA,EAAA,~~EAzBD~~,~~CAAA~~,~~iBAAA,EAAoB,~~OAAO,CAAA,CAAE,~~CA0B9B~~;AAEV;;;;"}
1	+ {"version":3,"file":"ChainBanner.js","sources":["../../../../../src/views/Bonds/components/ChainBanner/ChainBanner.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { variants } from '../../../../components/uikit-sdk/Button/types'\n\ninterface ButtonInfo {\n label: string\n cta?: string\n variant?: variants\n background?: string\n}\n\ninterface BannerInfo {\n title?: string\n subtitle?: string\n buttons?: ButtonInfo[]\n background: string\n backgroundMobile: string\n cta?: string\n}\n\nconst BANNER_INFO: Partial<Record<ChainId, BannerInfo>> = {\n // MONAD IS BROKEN, TODO fix it!\n [ChainId.MONAD]: {\n title: 'Monad Mainnet Bonds',\n subtitle: 'Launch Coming Soon.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://x.com/ApeBond/status/1995538519536578880?s=20',\n variant: variants.SECONDARY,\n },\n { label: 'Launch Yours', cta: 'https://forms.clickup.com/3080492/f/2y09c-6585/O175DYTK4PMR6P4CZA' },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner_jpkg38.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1/banner-mobile_y6xveu.png',\n },\n [ChainId.SOL]: {\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440199/desktopBanner_fse6ls.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1776440198/mobileBanner_x9tii9.png',\n cta: '?modal=rakurai',\n },\n // TODO(APTOS): replace placeholder images and \"LEARN MORE\" cta with final Aptos assets.\n // Currently reuses Solana background images.\n [ChainId.APTOS]: {\n title: 'Bonds are now Live on Aptos',\n subtitle: 'Get tokens at a discount on Aptos. Move-powered, sub-second finality.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://aptoslabs.com',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n // TODO(SUI): replace placeholder images and CTA with final Sui assets.\n [ChainId.SUI]: {\n title: 'Bonds are now Live on Sui',\n subtitle: 'Get tokens at a discount on Sui. Move-powered, parallel execution.',\n buttons: [\n {\n label: 'LEARN MORE',\n cta: 'https://sui.io',\n variant: variants.SECONDARY,\n },\n ],\n background: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751667949/background_ldg88q.png',\n backgroundMobile: 'https://res.cloudinary.com/dswmrqgwy/image/upload/v1751668240/backgroundMobile_lht5tu.png',\n },\n}\n\nconst ChainBanner = ({ chainId }: { chainId: ChainId }) => {\n const bannerCTA = BANNER_INFO[chainId]?.cta\n\n const handleClickOnBanner = () => {\n if (!bannerCTA) return\n // Next.js exposes the router singleton on window.next.router (Pages Router, dev + prod)\n const nextRouter = typeof window !== 'undefined' && (window as any).__NEXT_DATA__ && (window as any).next?.router\n if (nextRouter) {\n nextRouter.push(bannerCTA)\n return\n }\n // Fallback for non-Next.js environments\n window.history.pushState({}, '', bannerCTA)\n }\n\n return (\n <div\n key={`banner-container-${chainId}`}\n className=\"banner-container\"\n sx={{\n backgroundImage: [\n `url(${BANNER_INFO[chainId]?.backgroundMobile})`,\n `url(${BANNER_INFO[chainId]?.backgroundMobile})`,\n `url(${BANNER_INFO[chainId]?.backgroundMobile})`,\n `url(${BANNER_INFO[chainId]?.background})`,\n `url(${BANNER_INFO[chainId]?.background})`,\n ],\n cursor: bannerCTA ? 'pointer' : 'unset',\n }}\n onClick={handleClickOnBanner}\n >\n <div className=\"banner-title\">{BANNER_INFO[chainId]?.title}</div>\n <div className=\"banner-subtitle\">{BANNER_INFO[chainId]?.subtitle}</div>\n <div className=\"banner-actions\">\n {BANNER_INFO[chainId]?.buttons?.map((button, index) => (\n <Button\n key={`banner-button-${index}`}\n className=\"action-button\"\n onClick={() => window.open(button.cta, '_blank')}\n variant={button.variant \|\| variants.PRIMARY}\n >\n {button.label}\n </Button>\n ))}\n </div>\n </div>\n )\n}\n\nexport default ChainBanner\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /** CheckURL purpose is to open the buy bond modal ONLY IF a user has opened the site with a custom URL  */
-declare const CheckUrl: () => import("react/jsx-runtime").JSX.Element;
+declare const CheckUrl: () => React.JSX.Element;
 export default CheckUrl;

package/dist/views/Bonds/components/CheckURL/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'theme-ui/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import useModal from '../../../../hooks/useModal.js';

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 declare const HotBondCard: ({ bond }: {
     bond: BondsData;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default HotBondCard;

package/dist/views/Bonds/components/HotBondCards/HotBondCard.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { styles } from './styles.js';
 import useModal from '../../../../hooks/useModal.js';
 import BuyBondModal from '../../../BuyBond/BuyBondModal.js';
 import track from '../../../../utils/track.js';
@@ -24,7 +25,23 @@ const HotBondCard = ({ bond }) => {
             },
         });
     };
-    return (jsx(Flex, { className: "ape:bg-white2 ape:w-full ape:rounded-normal ape:mt-[10px] ape:hover:bg-white3", children: jsx(Flex, { className: "hot-bond-card ape:w-full ape:rounded-normal ape:cursor-pointer ape:h-[125px] ape:bg-cover", style: { backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)' }, onClick: handleOpenModal, children: jsxs(Flex, { className: "ape:w-full ape:relative ape:gap-[10px]", children: [jsx(Flex, { className: "ape:absolute ape:top-0 ape:left-0 ape:rounded-[10px_0px_10px_0px] ape:overflow-hidden", children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsx(Flex, { className: "ape:items-center ape:justify-center ape:w-[100px]", children: jsx(TokenImage, { symbol: bond.earnToken.symbol, size: 80 }) }), jsxs(Flex, { className: "ape:flex-col ape:justify-center ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:font-bold ape:text-[14px]", children: ["$", bond.earnToken.symbol] }), jsxs(Flex, { className: "ape:gap-[20px] ape:lg:gap-[10px] ape:xl:gap-[30px]", children: [jsxs(Flex, { className: "ape:flex-col ape:items-center", children: [jsxs(Flex, { className: "ape:font-bold ape:text-[16px] ape:h-[30px] ape:items-center", children: [getTimePeriods(bond?.vestingTerm, true)?.days, " D"] }), jsx(Flex, { className: "ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]", children: "Terms" })] }), jsxs(Flex, { className: "ape:flex-col ape:items-center ape:min-w-[148px]", children: [jsx(Flex, { className: "ape:font-bold ape:text-[16px] ape:h-[30px]", children: jsx(BonusComponent, { trueBondPrices: bond.trueBondPrices, hideTooltip: true }) }), jsx(Flex, { className: "ape:font-normal ape:text-[11px] ape:text-text-disabled-button ape:mt-[5px]", children: "Bonus" })] })] })] })] }) }) }));
+    return (jsx(Flex, { sx: {
+            background: 'white2',
+            width: '100%',
+            borderRadius: 'normal',
+            mt: '10px',
+            '&:hover': {
+                background: 'white3',
+            },
+        }, children: jsx(Flex, { sx: styles.desktopCard, className: "hot-bond-card", onClick: handleOpenModal, children: jsxs(Flex, { sx: {
+                    width: '100%',
+                    position: 'relative',
+                    gap: '10px',
+                }, children: [jsx(Flex, { sx: { position: 'absolute', top: 0, left: 0, borderRadius: '10px 0px 10px 0px', overflow: 'hidden' }, children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsx(Flex, { sx: {
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100px',
+                        }, children: jsx(TokenImage, { symbol: bond.earnToken.symbol, size: 80 }) }), jsxs(Flex, { sx: { flexDirection: 'column', justifyContent: 'center', gap: '10px' }, children: [jsxs(Flex, { sx: { fontWeight: 700, fontSize: ['14px'] }, children: ["$", bond.earnToken.symbol] }), jsxs(Flex, { sx: { gap: ['20px', '20px', '20px', '20px', '10px', '30px'] }, children: [jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center' }, children: [jsxs(Flex, { sx: { fontWeight: 700, fontSize: ['16px'], height: '30px', alignItems: 'center' }, children: [getTimePeriods(bond?.vestingTerm, true)?.days, " D"] }), jsx(Flex, { sx: { fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }, children: "Terms" })] }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', minWidth: '148px' }, children: [jsx(Flex, { sx: { fontWeight: 700, fontSize: ['16px'], height: '30px' }, children: jsx(BonusComponent, { trueBondPrices: bond.trueBondPrices, hideTooltip: true }) }), jsx(Flex, { sx: { fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }, children: "Bonus" })] })] })] })] }) }) }));
 };
 export { HotBondCard as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HotBondCard.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/HotBondCard.tsx"],"sourcesContent":["import React from 'react'\nimport { BondsData } from '../../../../types/bonds'\nimport useModal from '../../../../hooks/useModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport track from '../../../../utils/track'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_ICONS } from '../../../../config/constants/chains'\nimport Question from '../../../../components/uikit-sdk/Svg/Icons/Question'\nimport BonusComponent from '../BonusComponents/BonusComponent'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\n\nconst HotBondCard = ({ bond }: { bond: BondsData }) => {\n const ChainIcon = NETWORK_ICONS[bond.chainId] ?? Question\n // Modal\n const [openBuyModal] = useModal(\n <BuyBondModal bondAddress={bond?.contractAddress?.[bond?.chainId]} bondChain={bond.chainId} />,\n true,\n true,\n `buyBondModal-${bond?.contractAddress?.[bond?.chainId]}-${bond.chainId}`,\n )\n\n const handleOpenModal = () => {\n openBuyModal()\n track({\n event: 'hotClick',\n chain: bond.chainId,\n data: {\n cat: 'hotClick',\n bond: bond.earnToken.symbol,\n },\n })\n }\n\n return (\n <Flex ~~className=\"ape~~:~~bg-white2~~ ~~ape~~:~~w-full~~ ~~ape~~:~~rounded-normal~~ ~~ape~~:~~mt-[10px]~~ ~~ape~~:~~hover:bg-~~white3\">\n <Flex\n className=\"hot-bond-card ~~ape:w-full ape:rounded-normal ape:cursor-pointer ape:h-[125px] ape:bg-cover~~\"~~\n style={{~~ ~~backgroundImage: 'url(https://ape.bond/images/mc/fireBG.png)' }}\n~~ onClick={handleOpenModal}\n >\n <Flex ~~className=\"ape~~:~~w-full~~ ~~ape~~:~~relative~~ ~~ape:gap-[~~10px]\">\n <Flex ~~className=\"ape~~:absolute ~~ape~~:~~top-~~0 ~~ape~~:~~left-~~0 ~~ape~~:~~rounded-[10px_0px_10px_0px]~~ ~~ape~~:~~overflow-~~hidden\">\n <ChainIcon width={20} height={20} />\n </Flex>\n <Flex ~~className=\"ape~~:~~items-~~center ~~ape~~:~~justify-center~~ ~~ape:w-[~~100px]\">\n <TokenImage symbol={bond.earnToken.symbol} size={80} />\n </Flex>\n <Flex ~~className=\"ape~~:~~flex-col~~ ~~ape~~:~~justify-~~center ~~ape~~:~~gap-[~~10px~~]\"~~>\n <Flex ~~className=\"ape~~:~~font-bold~~ ~~ape~~:~~text-~~[14px]\">${bond.earnToken.symbol}</Flex>\n <Flex ~~className=\"ape~~:~~gap-~~[20px] ~~ape:lg:gap-[~~10px] ~~ape:xl:gap-[~~30px]\">\n <Flex ~~className=\"ape~~:~~flex-col~~ ~~ape~~:~~items-~~center\">\n <Flex ~~className=\"ape~~:~~font-bold~~ ~~ape~~:~~text-~~[16px] ~~ape~~:~~h-[~~30px] ~~ape~~:~~items-~~center\">\n {getTimePeriods(bond?.vestingTerm, true)?.days} D\n </Flex>\n <Flex ~~className=\"ape~~:~~font-normal~~ ~~ape~~:~~text-~~[11px] ~~ape~~:~~text-text-disabled-button~~ ~~ape~~:~~mt-[~~5px~~]\">\n~~ Terms\n </Flex>\n </Flex>\n <Flex ~~className=\"ape~~:~~flex-col~~ ~~ape~~:~~items-~~center ~~ape~~:~~min-w-[~~148px~~]\"~~>\n <Flex ~~className=\"ape~~:~~font-bold~~ ~~ape~~:~~text-~~[16px] ~~ape~~:~~h-[~~30px~~]\"~~>\n <BonusComponent trueBondPrices={bond.trueBondPrices} hideTooltip />\n </Flex>\n <Flex ~~className=\"ape~~:~~font-normal~~ ~~ape~~:~~text-~~[11px] ~~ape~~:~~text-text-disabled-button~~ ~~ape~~:~~mt-[~~5px~~]\">\n~~ Bonus\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default HotBondCard\n"],"names":["_jsx","_jsxs"],"mappings":"~~;;;;;;;;;;;AAYA~~,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAuB,KAAI;IACpD,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ;;IAEzD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAC7BA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EAC9F,IAAI,EACJ,IAAI,EACJ,CAAA,aAAA,EAAgB,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAE,CACzE;IAED,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,YAAY,EAAE;AACd,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,IAAI,CAAC,OAAO;AACnB,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,UAAU;AACf,gBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC5B,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,~~IAAC~~,SAAS,~~EAAC,+EAA+E~~,EAAA,QAAA,~~EAC7FA~~,GAAA,CAAC,IAAI,EAAA,~~EACH~~,~~SAAS~~,~~EAAC~~,~~2FAA2F~~,~~EACrG~~,~~KAAK~~,EAAE,~~EAAE~~,eAAe,~~EAAE~~,~~4CAA4C,EAAE,EACxE,~~OAAO,EAAE,eAAe,~~YAExBC~~,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS~~,~~EAAC~~,~~wCAAwC~~,EAAA,QAAA,EAAA,~~CACtDD~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~uFAAuF~~,EAAA,QAAA,~~EACrGA~~,~~IAAC~~,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,~~CAAI,GAC~~/B,EACPA,~~GAAA~~,~~CAAC,~~IAAI,EAAA,~~EAAC~~,~~SAAS~~,~~EAAC~~,~~mDAAmD~~,EAAA,QAAA,~~EACjEA~~,~~IAAC~~,UAAU,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,~~GAClD~~,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~gDAAgD~~,EAAA,QAAA,EAAA,~~CAC9DA~~,~~KAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC,+BAA+B~~,EAAA,QAAA,EAAA,CAAA,GAAA,~~EAAG~~,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA,EAAA,CAAQ,~~EAC/EA~~,KAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~oDAAoD~~,~~aAClEA~~,IAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC~~,+BAA+B~~,EAAA,QAAA,EAAA,~~CAC7CA~~,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~6DAA6D~~,~~aAC1E~~,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,EAAA,IAAA,CAAA,EAAA,CACzC,EACPD,GAAA,CAAC,IAAI,~~IAAC~~,~~SAAS,~~EAAC,~~4EAA4E~~,EAAA,QAAA,EAAA,OAAA,EAAA,~~CAErF~~,~~IACF~~,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~iDAAiD~~,EAAA,QAAA,EAAA,~~CAC/DD~~,~~IAAC~~,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~4CAA4C~~,~~YAC1DA~~,GAAA,CAAC,cAAc,~~IAAC~~,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,EAAA,IAAA,EAAA,CAAG,~~GAC9D~~,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,~~SAAS~~,~~EAAC~~,~~4EAA4E~~,EAAA,QAAA,EAAA,OAAA,EAAA,~~CAErF~~,~~IACF~~,CAAA,EAAA,CACF,CAAA,EAAA,CACF,~~IACF~~,EAAA,CACF,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"HotBondCard.js","sources":["../../../../../src/views/Bonds/components/HotBondCards/HotBondCard.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport useModal from '../../../../hooks/useModal'\nimport BuyBondModal from '../../../BuyBond/BuyBondModal'\nimport track from '../../../../utils/track'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_ICONS } from '../../../../config/constants/chains'\nimport Question from '../../../../components/uikit-sdk/Svg/Icons/Question'\nimport BonusComponent from '../BonusComponents/BonusComponent'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\n\nconst HotBondCard = ({ bond }: { bond: BondsData }) => {\n const ChainIcon = NETWORK_ICONS[bond.chainId] ?? Question\n // Modal\n const [openBuyModal] = useModal(\n <BuyBondModal bondAddress={bond?.contractAddress?.[bond?.chainId]} bondChain={bond.chainId} />,\n true,\n true,\n `buyBondModal-${bond?.contractAddress?.[bond?.chainId]}-${bond.chainId}`,\n )\n\n const handleOpenModal = () => {\n openBuyModal()\n track({\n event: 'hotClick',\n chain: bond.chainId,\n data: {\n cat: 'hotClick',\n bond: bond.earnToken.symbol,\n },\n })\n }\n\n return (\n <Flex\n sx={{\n background: 'white2',\n width: '100%',\n borderRadius: 'normal',\n mt: '10px',\n '&:hover': {\n background: 'white3',\n },\n }}\n >\n <Flex sx={styles.desktopCard} className=\"hot-bond-card\" onClick={handleOpenModal}>\n <Flex\n sx={{\n width: '100%',\n position: 'relative',\n gap: '10px',\n }}\n >\n <Flex sx={{ position: 'absolute', top: 0, left: 0, borderRadius: '10px 0px 10px 0px', overflow: 'hidden' }}>\n <ChainIcon width={20} height={20} />\n </Flex>\n <Flex\n sx={{\n alignItems: 'center',\n justifyContent: 'center',\n width: '100px',\n }}\n >\n <TokenImage symbol={bond.earnToken.symbol} size={80} />\n </Flex>\n <Flex sx={{ flexDirection: 'column', justifyContent: 'center', gap: '10px' }}>\n <Flex sx={{ fontWeight: 700, fontSize: ['14px'] }}>${bond.earnToken.symbol}</Flex>\n <Flex sx={{ gap: ['20px', '20px', '20px', '20px', '10px', '30px'] }}>\n <Flex sx={{ flexDirection: 'column', alignItems: 'center' }}>\n <Flex sx={{ fontWeight: 700, fontSize: ['16px'], height: '30px', alignItems: 'center' }}>\n {getTimePeriods(bond?.vestingTerm, true)?.days} D\n </Flex>\n <Flex sx={{ fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }}>Terms</Flex>\n </Flex>\n <Flex sx={{ flexDirection: 'column', alignItems: 'center', minWidth: '148px' }}>\n <Flex sx={{ fontWeight: 700, fontSize: ['16px'], height: '30px' }}>\n <BonusComponent trueBondPrices={bond.trueBondPrices} hideTooltip />\n </Flex>\n <Flex sx={{ fontWeight: 400, fontSize: ['11px'], color: 'textDisabledButton', mt: '5px' }}>Bonus</Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default HotBondCard\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;AAaA,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAuB,KAAI;IACpD,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ;;IAEzD,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAC7BA,GAAA,CAAC,YAAY,EAAA,EAAC,WAAW,EAAE,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,EAC9F,IAAI,EACJ,IAAI,EACJ,CAAA,aAAA,EAAgB,IAAI,EAAE,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAE,CACzE;IAED,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,YAAY,EAAE;AACd,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,IAAI,CAAC,OAAO;AACnB,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,UAAU;AACf,gBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM;AAC5B,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,QAAQ;AACrB,aAAA;SACF,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,eAAe,YAC9EC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,MAAM;iBACZ,EAAA,QAAA,EAAA,CAEDD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,QAAA,EACxGA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAAA,CAC/B,EACPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,KAAK,EAAE,OAAO;yBACf,EAAA,QAAA,EAEDA,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,EAAA,CAClD,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC1EA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CAAA,GAAA,EAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA,EAAA,CAAQ,EAClFA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAAA,CACjEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACzDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACpF,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,EAAA,IAAA,CAAA,EAAA,CACzC,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAClG,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,CAC5ED,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,QAAA,EAC/DA,GAAA,CAAC,cAAc,EAAA,EAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,EAAA,IAAA,EAAA,CAAG,EAAA,CAC9D,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAClG,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACF;AAEX;;;;"}

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

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

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

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

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

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

package/dist/views/Bonds/components/HotBondCards/styles.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+export declare const styles: {
+    mainComponent: {
+        width: string;
+        flexDirection: string;
+        overflow: string[];
+        pt: string;
+        pb: string[];
+    };
+    hotBondTitle: {
+        pt: string;
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        cursor: string;
+        textTransform: string;
+    };
+    desktopCards: {
+        width: string;
+        gap: string;
+        justifyContent: string;
+        flexDirection: string[];
+        display: string;
+        '@media screen and (min-width: 1000px)': {
+            display: string;
+        };
+    };
+    desktopCard: {
+        backgroundImage: string;
+        backgroundSize: string;
+        width: string;
+        borderRadius: string;
+        cursor: string;
+        height: string;
+    };
+};