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

package/dist/views/BuyBond/components/BondModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondModalHeader.js","sources":["../../../../src/views/BuyBond/components/BondModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport TokenImage from '../../../components/uikit-sdk/TokenImage'\nimport { discountEarnTokenPrice } from '../../../utils/displayHelpers'\nimport useModal from '../../../hooks/useModal'\nimport SlippageModal from '../../../components/SlippageModal'\nimport { BondsData } from '../../../types/bonds'\nimport ExpandedViewButton from './ExpandedViewButton'\nimport track from '../../../utils/track'\nimport BondModalMinTierHeader from './BondModalMinTierHeader'\nimport useTierPoints, { promotionDataMapping, TIERS_WEIGHT } from '../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useSDKConfig } from '../../../state/useSDKConfig'\nimport { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers'\nimport { MCTokenIconStyles } from '../../../utils/campaignStyles'\nimport { useIsMobile } from '../../../hooks/useIsMobile'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport ListTag from '../../../components/uikit-sdk/Tag/ListTag'\nimport { formatNumberSI } from '../../../utils/formatNumber'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport Cog from '../../../components/uikit-sdk/Svg/Icons/Cog'\nimport Close from '../../../components/uikit-sdk/Svg/Icons/Close'\nimport GiftBox from '../../../components/uikit-sdk/Svg/Icons/GiftBox'\n\nconst BondModalHeader = ({\n  bondData,\n  onDismiss,\n  showProjectInfoButton,\n  hidePromotionUi = false,\n}: {\n  bondData: BondsData\n  onDismiss?: () => void\n  showProjectInfoButton?: boolean\n  hidePromotionUi?: boolean\n}) => {\n  const isMobile = useIsMobile()\n  const SDKConfig = useSDKConfig()\n  const { data: tierPointsState } = useTierPoints()\n  const { promotion, eligibleChains } = tierPointsState || {}\n  // if promotion comes with eligibleChains undefined means it should be used for every chain\n  const isBondEligibleForPromotion = eligibleChains === undefined || eligibleChains?.includes(bondData.chainId)\n  const [onOpenSlippageModal] = useModal(<SlippageModal chainId={bondData.chainId} />)\n  const minTier = bondData.minTier !== undefined ? bondData.minTier : null\n  const bonusWithFee = findHighestTrueBondPrice(\n    TIERS_WEIGHT[LaunchBondTiers.Legend],\n    bondData?.trueBondPrices,\n  )?.bonusWithFee\n\n  const handleClose = () => {\n    if (typeof window !== 'undefined') {\n      window.history.pushState({}, '', `/bonds`)\n    }\n    onDismiss?.()\n  }\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondData?.contractAddress?.[bondData?.chainId]}/${bondData?.chainId}`\n    track({\n      event: 'projectInfoClick',\n      chain: bondData.chainId,\n      data: {\n        cat: 'Modal',\n        bond: bondData.earnToken.symbol,\n        bondChain: bondData.chainId,\n      },\n    })\n  }\n\n  return (\n    <Flex\n      className=\"modaltable-container title-container\"\n      sx={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }}\n    >\n      <Flex\n        sx={{\n          width: '100%',\n          height: '30px',\n          mb: ['10px', '10px', '10px', '0px'],\n          justifyContent: ['space-between', 'space-between', 'space-between', 'flex-end'],\n        }}\n      >\n        <Flex sx={{ display: ['flex', 'flex', 'flex', 'none'] }}>\n          <BondModalMinTierHeader minTier={minTier} />\n        </Flex>\n        <Flex sx={{ cursor: 'pointer' }}>\n          {onDismiss ? (\n            <>\n              {showProjectInfoButton && <ExpandedViewButton handleNavigation={handleProjectViewNavigation} />}\n              <Flex sx={{ mx: '25px' }} onClick={onOpenSlippageModal}>\n                <Cog width={isMobile ? '16px' : '20px'} />\n              </Flex>\n              <Flex onClick={handleClose}>\n                <Close color=\"text\" width={isMobile ? '12px' : '18px'} />\n              </Flex>\n            </>\n          ) : (\n            <Flex sx={{ py: '3px', mt: '10px' }} onClick={onOpenSlippageModal}>\n              <Cog width={isMobile ? '16px' : '20px'} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex sx={{ width: '100%', position: 'relative' }}>\n        <Flex className=\"title-container bondicon\">\n          <Flex sx={MCTokenIconStyles[bondData.marketingCampaign!]} />\n          <TokenImage\n            symbol={bondData.showcaseTokenName ?? bondData.earnToken.symbol}\n            size={50}\n            chain={bondData.chainId}\n          />\n        </Flex>\n        <Flex\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            pl: ['10px', '10px', '10px', '20px'],\n            fontSize: ['20px', '20px', '20px', '24px'],\n            fontWeight: 700,\n          }}\n        >\n          {bondData?.showcaseTokenName}\n          <ListTag text={bondData?.tags?.[0]} />\n        </Flex>\n        <Flex\n          className=\"title-container price-container\"\n          sx={{ flexDirection: 'column', pl: ['10px', '10px', '10px', '20px'] }}\n        >\n          <Flex className=\"price-container price\" sx={{ fontSize: ['12px', '12px', '12px', '14px'] }}>\n            ${formatNumberSI(bondData.payoutTokenPrice, bondData.earnToken.symbol.toLowerCase() === 'ireet' ? 6 : 2)}\n          </Flex>\n          {SDKConfig.useTiers &&\n          bondData.billVersion === BillVersion.V4 &&\n          (bondData?.trueBondPrices?.length ?? 0) > 1 ? (\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              }}\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' }}>\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', '12px', '14px'], mr: '3px' }}>Up to</Flex>\n                <Flex\n                  sx={{\n                    color: bonusWithFee && bonusWithFee > 0 ? 'success' : 'error',\n                    fontSize: ['12px', '12px', '12px', '14px'],\n                  }}\n                >\n                  ${discountEarnTokenPrice(bondData, true)}\n                </Flex>\n              </Flex>\n            </Flex>\n          ) : (\n            <Flex sx={{ fontSize: '24px', fontWeight: 700 }}>${discountEarnTokenPrice(bondData)}</Flex>\n          )}\n        </Flex>\n        <Flex sx={{ display: ['none', 'none', 'none', 'flex'], ml: '10px' }}>\n          <BondModalMinTierHeader minTier={minTier} />\n        </Flex>\n        {!hidePromotionUi && isBondEligibleForPromotion && promotion && (\n          <Flex\n            sx={{\n              position: 'absolute',\n              right: '0',\n              top: ['unset', 'unset', 'unset', '20px'],\n              bottom: ['3px', '3px', '3px', 'unset'],\n            }}\n          >\n            <TooltipBubble\n              body={promotionDataMapping[promotion]?.tooltip}\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip={['translate(5%, 0%)', 'translate(5%, 0%)', 'translate(5%, 0%)', 'translate(0%, 0%)']}\n            >\n              <Flex\n                sx={{\n                  border: '1px solid var(--theme-ui-colors-primaryButton)',\n                  borderRadius: ['10px', '10px', '10px', '20px'],\n                  p: ['4px 2px', '4px 2px', '4px 2px', '4px 10px'],\n                  alignItems: 'center',\n                  fontSize: '12px',\n                  fontWeight: 400,\n                  color: 'textDisabledButton',\n                  boxShadow: '0px 0px 30px -10px rgba(222, 98, 243, 0.5)',\n                  cursor: 'pointer',\n                }}\n              >\n                <Flex sx={{ mt: '-15px' }}>\n                  <GiftBox width={30} color={'textDisabledButton'} />\n                </Flex>\n                <Flex sx={{ display: ['none', 'none', 'none', 'flex'], textTransform: 'capitalize' }}>{promotion}</Flex>\n              </Flex>\n            </TooltipBubble>\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondModalHeader\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"BondModalHeader.js","sources":["../../../../src/views/BuyBond/components/BondModalHeader.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport TokenImage from '../../../components/uikit-sdk/TokenImage'\nimport { discountEarnTokenPrice } from '../../../utils/displayHelpers'\nimport useModal from '../../../hooks/useModal'\nimport SlippageModal from '../../../components/SlippageModal'\nimport { BondsData } from '../../../types/bonds'\nimport ExpandedViewButton from './ExpandedViewButton'\nimport track from '../../../utils/track'\nimport BondModalMinTierHeader from './BondModalMinTierHeader'\nimport useTierPoints from '../../../state/tiers/useTierPoints'\nimport { promotionDataMapping, TIERS_WEIGHT } from '../../../state/tiers/tiers'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { useSDKConfig } from '../../../state/useSDKConfig'\nimport { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers'\nimport { MCTokenIconStyles } from '../../../utils/campaignStyles'\nimport { useIsMobile } from '../../../hooks/useIsMobile'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport ListTag from '../../../components/uikit-sdk/Tag/ListTag'\nimport { formatNumberSI } from '../../../utils/formatNumber'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport Cog from '../../../components/uikit-sdk/Svg/Icons/Cog'\nimport Close from '../../../components/uikit-sdk/Svg/Icons/Close'\nimport GiftBox from '../../../components/uikit-sdk/Svg/Icons/GiftBox'\n\nconst BondModalHeader = ({\n  bondData,\n  onDismiss,\n  showProjectInfoButton,\n  hidePromotionUi = false,\n}: {\n  bondData: BondsData\n  onDismiss?: () => void\n  showProjectInfoButton?: boolean\n  hidePromotionUi?: boolean\n}) => {\n  const isMobile = useIsMobile()\n  const SDKConfig = useSDKConfig()\n  const { data: tierPointsState } = useTierPoints()\n  const { promotion, eligibleChains } = tierPointsState || {}\n  // if promotion comes with eligibleChains undefined means it should be used for every chain\n  const isBondEligibleForPromotion = eligibleChains === undefined || eligibleChains?.includes(bondData.chainId)\n  const [onOpenSlippageModal] = useModal(<SlippageModal chainId={bondData.chainId} />)\n  const minTier = bondData.minTier !== undefined ? bondData.minTier : null\n  const bonusWithFee = findHighestTrueBondPrice(\n    TIERS_WEIGHT[LaunchBondTiers.Legend],\n    bondData?.trueBondPrices,\n  )?.bonusWithFee\n\n  const handleClose = () => {\n    if (typeof window !== 'undefined') {\n      window.history.pushState({}, '', `/bonds`)\n    }\n    onDismiss?.()\n  }\n\n  const handleProjectViewNavigation = () => {\n    window.location.href = `/bonds/${bondData?.contractAddress?.[bondData?.chainId]}/${bondData?.chainId}`\n    track({\n      event: 'projectInfoClick',\n      chain: bondData.chainId,\n      data: {\n        cat: 'Modal',\n        bond: bondData.earnToken.symbol,\n        bondChain: bondData.chainId,\n      },\n    })\n  }\n\n  return (\n    <Flex className=\"modaltable-container title-container ape:w-full ape:flex ape:relative ape:flex-col ape:justify-center ape:items-start\">\n      <Flex className=\"ape:w-full ape:h-[30px] ape:max-md:mb-[10px] ape:md:mb-0 ape:justify-between ape:md:justify-end\">\n        <Flex className=\"ape:flex ape:md:hidden\">\n          <BondModalMinTierHeader minTier={minTier} />\n        </Flex>\n        <Flex className=\"ape:cursor-pointer\">\n          {onDismiss ? (\n            <>\n              {showProjectInfoButton && <ExpandedViewButton handleNavigation={handleProjectViewNavigation} />}\n              <Flex className=\"ape:mx-[25px]\" onClick={onOpenSlippageModal}>\n                <Cog width={isMobile ? '16px' : '20px'} />\n              </Flex>\n              <Flex onClick={handleClose}>\n                <Close color=\"text\" width={isMobile ? '12px' : '18px'} />\n              </Flex>\n            </>\n          ) : (\n            <Flex className=\"ape:py-[3px] ape:mt-[10px]\" onClick={onOpenSlippageModal}>\n              <Cog width={isMobile ? '16px' : '20px'} />\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:w-full ape:relative\">\n        <Flex className=\"title-container bondicon ape:flex ape:flex-row ape:items-center ape:relative\">\n          <Flex style={MCTokenIconStyles[bondData.marketingCampaign!]} />\n          <TokenImage\n            symbol={bondData.showcaseTokenName ?? bondData.earnToken.symbol}\n            size={50}\n            chain={bondData.chainId}\n          />\n        </Flex>\n        <Flex className=\"ape:flex ape:flex-col ape:pl-[10px] ape:md:pl-[20px] ape:text-[20px] ape:md:text-[24px] ape:font-bold\">\n          {bondData?.showcaseTokenName}\n          <ListTag text={bondData?.tags?.[0]} />\n        </Flex>\n        <Flex className=\"title-container price-container ape:flex-col ape:pl-[10px] ape:md:pl-[20px]\">\n          <Flex className=\"price-container price ape:line-through ape:opacity-50 ape:font-normal ape:text-[12px] ape:md:text-[14px]\">\n            ${formatNumberSI(bondData.payoutTokenPrice, 2)}\n          </Flex>\n          {SDKConfig.useTiers &&\n          bondData.billVersion === BillVersion.V4 &&\n          (bondData?.trueBondPrices?.length ?? 0) > 1 ? (\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\">\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\">\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:md:text-[14px] ape:mr-[3px]\">Up to</Flex>\n                <Flex\n                  className={clsx(\n                    'ape:text-[12px] ape:md:text-[14px]',\n                    bonusWithFee && bonusWithFee > 0 ? 'ape:text-success' : 'ape:text-error',\n                  )}\n                >\n                  ${discountEarnTokenPrice(bondData, true)}\n                </Flex>\n              </Flex>\n            </Flex>\n          ) : (\n            <Flex className=\"ape:text-[24px] ape:font-bold\">${discountEarnTokenPrice(bondData)}</Flex>\n          )}\n        </Flex>\n        <Flex className=\"ape:hidden ape:md:flex ape:ml-[10px]\">\n          <BondModalMinTierHeader minTier={minTier} />\n        </Flex>\n        {!hidePromotionUi && isBondEligibleForPromotion && promotion && (\n          <Flex className=\"ape:absolute ape:right-0 ape:md:top-[20px] ape:bottom-[3px] ape:md:bottom-[unset]\">\n            <TooltipBubble\n              body={promotionDataMapping[promotion]?.tooltip}\n              width=\"205px\"\n              placement=\"bottomRight\"\n              transformTip={isMobile ? 'translate(5%, 0%)' : 'translate(0%, 0%)'}\n            >\n              <Flex\n                className=\"ape:border ape:border-solid ape:border-primary-button ape:rounded-[10px] ape:md:rounded-[20px] ape:p-[4px_2px] ape:md:p-[4px_10px] ape:items-center ape:text-[12px] ape:font-normal ape:text-text-disabled-button ape:cursor-pointer\"\n                style={{ boxShadow: '0px 0px 30px -10px rgba(222, 98, 243, 0.5)' }}\n              >\n                <Flex className=\"ape:mt-[-15px]\">\n                  <GiftBox width={30} color={'textDisabledButton'} />\n                </Flex>\n                <Flex className=\"ape:hidden ape:md:flex ape:capitalize\">{promotion}</Flex>\n              </Flex>\n            </TooltipBubble>\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default BondModalHeader\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/views/BuyBond/components/BondModalMinTierHeader.d.ts

@@ -1,5 +1,5 @@
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 declare const BondModalMinTierHeader: ({ minTier }: {
     minTier: LaunchBondTiers | null;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BondModalMinTierHeader;

package/dist/views/BuyBond/components/BondModalMinTierHeader.js

@@ -1,19 +1,14 @@
-import { jsx, Fragment } from 'theme-ui/jsx-runtime';
-import { TIERS_NAMES } from '../../../state/tiers/useTierPoints.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { TIERS_NAMES } from '../../../state/tiers/tiers.js';
 import TooltipBubble from '../../../components/uikit-sdk/TooltipBubble/index.js';
 import Flex from '../../../components/uikit-sdk/Flex/index.js';
 
 const BondModalMinTierHeader = ({ minTier }) => {
-    return (jsx(Fragment, { children: minTier !== null && minTier !== undefined && (jsx(Flex, { sx: {
-                justifyContent: 'start',
-                alignItems: 'center',
-                flexDirection: 'row-reverse',
-                width: ['100%', '100%', '100%', 'auto', 'auto'],
-            }, children: Object.values(TIERS_NAMES)
+    return (jsx(Fragment, { children: minTier !== null && minTier !== undefined && (jsx(Flex, { className: "ape:justify-start ape:items-center ape:flex-row-reverse ape:w-full ape:lg:w-auto", children: Object.values(TIERS_NAMES)
                 .filter((tier) => tier !== 'No Tier')
                 .map((tier, index) => {
                 if (index + 1 >= minTier) {
-                    return (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { sx: { justifyContent: 'center' }, children: tier }), width: "100px", placement: "bottomLeft", transformTip: "translate(1%, -5%)", children: jsx("img", { src: `https://ape.bond/images/launch/${tier.toLowerCase()}.png`, alt: "minTier", style: { width: '25px', height: '25px', marginLeft: '3px', zIndex: 1 } }, `tier-logo-${index}`) }, tier));
+                    return (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { className: "ape:justify-center", children: tier }), width: "100px", placement: "bottomLeft", transformTip: "translate(1%, -5%)", children: jsx("img", { src: `https://ape.bond/images/launch/${tier.toLowerCase()}.png`, alt: "minTier", style: { width: '25px', height: '25px', marginLeft: '3px', zIndex: 1 } }, `tier-logo-${index}`) }, tier));
                 }
             }) })) }));
 };

package/dist/views/BuyBond/components/BondModalMinTierHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondModalMinTierHeader.js","sources":["../../../../src/views/BuyBond/components/BondModalMinTierHeader.tsx"],"sourcesContent":["import { TIERS_NAMES } from '../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport Flex from '../../../components/uikit-sdk/Flex'\n\nconst BondModalMinTierHeader = ({ minTier }: { minTier: LaunchBondTiers | null }) => {\n  return (\n    <>\n      {minTier !== null && minTier !== undefined && (\n        <Flex\n          sx={{\n            justifyContent: 'start',\n            alignItems: 'center',\n            flexDirection: 'row-reverse',\n            width: ['100%', '100%', '100%', 'auto', 'auto'],\n          }}\n        >\n          {Object.values(TIERS_NAMES)\n            .filter((tier) => tier !== 'No Tier')\n            .map((tier, index) => {\n              if (index + 1 >= minTier) {\n                return (\n                  <TooltipBubble\n                    className=\"tooltip-bubble\"\n                    body={<Flex sx={{ justifyContent: 'center' }}>{tier}</Flex>}\n                    width=\"100px\"\n                    placement=\"bottomLeft\"\n                    transformTip=\"translate(1%, -5%)\"\n                    key={tier}\n                  >\n                    <img\n                      key={`tier-logo-${index}`}\n                      src={`https://ape.bond/images/launch/${tier.toLowerCase()}.png`}\n                      alt=\"minTier\"\n                      style={{ width: '25px', height: '25px', marginLeft: '3px', zIndex: 1 }}\n                    />\n                  </TooltipBubble>\n                )\n              }\n            })}\n        </Flex>\n      )}\n    </>\n  )\n}\n\nexport default BondModalMinTierHeader\n"],"names":["_jsx","_Fragment"],"mappings":";;;;;AAKA,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAuC,KAAI;AAClF,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,KACxCD,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,cAAc,EAAE,OAAO;AACvB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,aAAa,EAAE,aAAa;gBAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAChD,aAAA,EAAA,QAAA,EAEA,MAAM,CAAC,MAAM,CAAC,WAAW;iBACvB,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,SAAS;AACnC,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACnB,gBAAA,IAAI,KAAK,GAAG,CAAC,IAAI,OAAO,EAAE;AACxB,oBAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAEA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAG,IAAI,EAAA,CAAQ,EAC3D,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,YAAY,EACtB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAGjCA,aAEE,GAAG,EAAE,CAAA,+BAAA,EAAkC,IAAI,CAAC,WAAW,EAAE,CAAA,IAAA,CAAM,EAC/D,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA,EAHjE,CAAA,UAAA,EAAa,KAAK,CAAA,CAAE,CAIzB,IAPG,IAAI,CAQK;gBAEpB;AACF,YAAA,CAAC,CAAC,EAAA,CACC,CACR,EAAA,CACA;AAEP;;;;"}
+{"version":3,"file":"BondModalMinTierHeader.js","sources":["../../../../src/views/BuyBond/components/BondModalMinTierHeader.tsx"],"sourcesContent":["import { TIERS_NAMES } from '../../../state/tiers/tiers'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport Flex from '../../../components/uikit-sdk/Flex'\n\nconst BondModalMinTierHeader = ({ minTier }: { minTier: LaunchBondTiers | null }) => {\n  return (\n    <>\n      {minTier !== null && minTier !== undefined && (\n        <Flex className=\"ape:justify-start ape:items-center ape:flex-row-reverse ape:w-full ape:lg:w-auto\">\n          {Object.values(TIERS_NAMES)\n            .filter((tier) => tier !== 'No Tier')\n            .map((tier, index) => {\n              if (index + 1 >= minTier) {\n                return (\n                  <TooltipBubble\n                    className=\"tooltip-bubble\"\n                    body={<Flex className=\"ape:justify-center\">{tier}</Flex>}\n                    width=\"100px\"\n                    placement=\"bottomLeft\"\n                    transformTip=\"translate(1%, -5%)\"\n                    key={tier}\n                  >\n                    <img\n                      key={`tier-logo-${index}`}\n                      src={`https://ape.bond/images/launch/${tier.toLowerCase()}.png`}\n                      alt=\"minTier\"\n                      style={{ width: '25px', height: '25px', marginLeft: '3px', zIndex: 1 }}\n                    />\n                  </TooltipBubble>\n                )\n              }\n            })}\n        </Flex>\n      )}\n    </>\n  )\n}\n\nexport default BondModalMinTierHeader\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAuC,KAAI;IAClF,QACEA,0BACG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,KACxCA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kFAAkF,EAAA,QAAA,EAC/F,MAAM,CAAC,MAAM,CAAC,WAAW;iBACvB,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,SAAS;AACnC,iBAAA,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACnB,gBAAA,IAAI,KAAK,GAAG,CAAC,IAAI,OAAO,EAAE;AACxB,oBAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAC,gBAAgB,EAC1B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EACxD,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,YAAY,EACtB,YAAY,EAAC,oBAAoB,EAAA,QAAA,EAGjCA,GAAA,CAAA,KAAA,EAAA,EAEE,GAAG,EAAE,CAAA,+BAAA,EAAkC,IAAI,CAAC,WAAW,EAAE,CAAA,IAAA,CAAM,EAC/D,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA,EAHjE,CAAA,UAAA,EAAa,KAAK,EAAE,CAIzB,EAAA,EAPG,IAAI,CAQK;gBAEpB;AACF,YAAA,CAAC,CAAC,EAAA,CACC,CACR,EAAA,CACA;AAEP;;;;"}

package/dist/views/BuyBond/components/Estimations.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BondsData } from '../../../types/bonds';
 declare const Estimations: ({ depositAmount, inputValue, inputTokenPrice, bondData, youSpendString, isZap, fetchingZapQuote, zapError, hidePromotionUi, }: {
     depositAmount: string;
@@ -10,5 +9,5 @@ declare const Estimations: ({ depositAmount, inputValue, inputTokenPrice, bondDa
     fetchingZapQuote?: boolean;
     zapError?: boolean;
     hidePromotionUi?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Estimations;

package/dist/views/BuyBond/components/Estimations.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { getRawBonus, getPayoutAmount, getBonusColor } from '../../../utils/displayHelpers.js';
 import { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers.js';
-import useTierPoints, { getUserTier, promotionDataMapping, TIERS_NAMES, TIERS_COLORS, TIERS_BG } from '../../../state/tiers/useTierPoints.js';
+import useTierPoints from '../../../state/tiers/useTierPoints.js';
+import { getUserTier, promotionDataMapping, TIERS_NAMES, TIERS_COLORS, TIERS_BG } from '../../../state/tiers/tiers.js';
 import { useSDKConfig } from '../../../state/useSDKConfig.js';
 import { formatNumberSI } from '../../../utils/formatNumber.js';
 import { BillVersion } from '@ape.swap/apeswap-lists';
@@ -12,13 +13,13 @@ import Dots from '../../../components/uikit-sdk/LoadingDots/index.js';
 import { calculateOptimizationData } from '../utils.js';
 import { useAbondPrice } from '../../../state/tokenPrices/useAbondPrice.js';
 import TokenImage from '../../../components/uikit-sdk/TokenImage/index.js';
-import { tierOptimizerUIEnabled } from '../../../config/constants/variables.js';
 import { TooltipText } from '../../../config/constants/tooltips.js';
 import { NETWORK_LABEL } from '../../../config/constants/chains.js';
-import { Box } from 'theme-ui';
 import QuestionCircle from '../../../components/uikit-sdk/Svg/Icons/QuestionCircle.js';
+import { useIsMobile } from '../../../hooks/useIsMobile.js';
 
 const Estimations = ({ depositAmount, inputValue, inputTokenPrice, bondData, youSpendString, isZap, fetchingZapQuote, zapError, hidePromotionUi = false, }) => {
+    const isMobile = useIsMobile();
     const { data: tierPointsState } = useTierPoints();
     const { promotionalPoints, promotion, eligibleChains, onChainPoints } = tierPointsState || {};
     // if promotion comes with eligibleChains undefined means it should be used for every chain
@@ -40,7 +41,7 @@ const Estimations = ({ depositAmount, inputValue, inputTokenPrice, bondData, you
     const boostAmount = parseFloat(getRawBonus(bondData, depositAmount, tierPointsToUse ?? '0')) - parseFloat(noTierAmount);
     const optimizationData = calculateOptimizationData(inputValue ?? '', tierPointsToUse, bondData, inputTokenPrice, abondPrice);
     const highestProfitableTier = optimizationData?.highestProfitableTier;
-    return (jsxs(Flex, { className: "modaltable-container text-container", children: [jsxs(Flex, { className: "text-container row", children: [jsx(Flex, { className: "row-container spend", children: "You Spend:" }), jsx(Flex, { className: "row-container spend-val", children: youSpendString })] }), jsxs(Flex, { className: "text-container row", children: [jsxs(Flex, { className: "row-container premium", children: [!!userTier &&
+    return (jsxs(Flex, { className: "modaltable-container text-container ape:w-full ape:flex ape:relative ape:flex-col ape:justify-center ape:text-[12px]", children: [jsxs(Flex, { className: "text-container row ape:pt-[2px] ape:pb-[2px] ape:flex ape:flex-row ape:justify-between", children: [jsx(Flex, { className: "row-container spend ape:flex ape:font-normal ape:items-center", children: "You Spend:" }), jsx(Flex, { className: "row-container spend-val ape:flex ape:font-normal ape:items-center", children: youSpendString })] }), jsxs(Flex, { className: "text-container row ape:pt-[2px] ape:pb-[2px] ape:flex ape:flex-row ape:justify-between", children: [jsxs(Flex, { className: "row-container premium ape:flex ape:font-normal ape:items-center", children: [!!userTier &&
                                 !!tierPointsToUse &&
                                 SDKConfig.useTiers &&
                                 bondData.billVersion === BillVersion.V4 &&
@@ -52,45 +53,15 @@ const Estimations = ({ depositAmount, inputValue, inputTokenPrice, bondData, you
                                     ? 'Discount:'
                                     : 'Bonus:', jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: (bondData?.feeInPayout || 0) > 0
                                         ? `This is the dollar value of the bonus tokens you’ll receive at current market price, already accounting for the protocol fee (${bondData.feeInPayout}%)`
-                                        : 'This is the dollar value of the bonus tokens you’ll receive at current market price.' }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "row-container premium-icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ${getBonusColor(bonusString)}`, children: ["$ ", formatNumberSI(bonusString)] }))] }), !hidePromotionUi && trueBondPrice?.points !== '0' && userTier && tierPointsToUse && SDKConfig.useTiers && (jsxs(Flex, { sx: {
-                    borderRadius: 'normal',
-                    mx: '-8px',
-                    px: '8px',
-                    py: '2px',
-                    position: 'relative',
-                    justifyContent: 'space-between',
-                }, children: [jsx(Flex, { className: "row-container premium", sx: { position: 'relative', zIndex: 2 }, children: activePromotion ? (jsxs(Flex, { sx: { gap: '3px', alignItems: 'center' }, children: [(() => {
+                                        : 'This is the dollar value of the bonus tokens you’ll receive at current market price.' }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "row-container premium-icon ape:flex ape:font-normal ape:items-start ape:pl-[5px] ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val ape:flex ape:font-normal ape:items-center ${getBonusColor(bonusString)}`, children: ["$ ", formatNumberSI(bonusString)] }))] }), !hidePromotionUi && trueBondPrice?.points !== '0' && userTier && tierPointsToUse && SDKConfig.useTiers && (jsxs(Flex, { className: "ape:rounded-normal ape:mx-[-8px] ape:px-[8px] ape:py-[2px] ape:relative ape:justify-between", children: [jsx(Flex, { className: "row-container premium ape:flex ape:font-normal ape:items-center ape:relative ape:z-[2]", children: activePromotion ? (jsxs(Flex, { className: "ape:gap-[3px] ape:items-center", children: [(() => {
                                     const PromotionIcon = promotionDataMapping[activePromotion].icon;
                                     return jsx(PromotionIcon, { width: 15 });
-                                })(), jsx(Flex, { sx: { textTransform: 'capitalize' }, children: activePromotion }), jsx(Flex, { sx: { color: 'success', mx: '3px', fontWeight: 700 }, children: `+${trueBondPrice?.boost ?? 0}%` }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Box, { children: [jsx("span", { sx: { textTransform: 'capitalize' }, children: activePromotion }), " successfully applied! Bonds on", ' ', NETWORK_LABEL[bondData.chainId], " Chain now have an extra 5% Bonus."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-7%, 0%)", children: jsx(QuestionCircle, { width: "12px" }) })] })) : (jsxs(Flex, { sx: { gap: '3px', alignItems: 'center' }, children: [jsx("img", { src: `https://ape.bond/images/launch/${tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px' } }), "Boost", jsx(Flex, { sx: { color: 'success', mx: '3px', fontWeight: 700 }, children: `+${trueBondPrice?.boost ?? 0}%` }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Boost }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(QuestionCircle, { width: "12px" }) })] })) }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: `row-container premium-val premium-positive`, children: ["$ ", formatNumberSI(boostAmount)] }))] })), jsxs(Flex, { sx: {
-                    border: '1px solid #9960C5',
-                    borderRadius: 'normal',
-                    mx: '-5px',
-                    px: '5px',
-                    py: '2px',
-                    my: '2px',
-                    position: 'relative',
-                }, children: [jsx(Flex, { sx: {
-                            position: 'absolute',
-                            width: '100%',
-                            height: '100%',
-                            top: 0,
-                            left: 0,
-                            zIndex: 0,
-                            background: '#9960C5',
-                            opacity: 0.2,
-                            borderRadius: 'normal',
-                        } }), jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', height: '21px' }, children: [jsxs(Flex, { className: "row-container get", sx: { zIndex: 1 }, children: ["You Get (over ", getTimePeriods(bondData?.vestingTerm, true).days, " days):"] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val", sx: { zIndex: 1 }, children: [formatNumberSI(estimatedOutputAmount, 4), " ", bondData?.showcaseTokenName, " = $", ' ', formatNumberSI(estimatedOutputUSD, 2)] }))] })] }), (bondData.tierBoostRate || highestProfitableTier) && SDKConfig.useTiers && (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', height: '21px' }, children: [jsxs(Flex, { className: "row-container get", children: ["Ape Points Earned:", jsx(Flex, { sx: { ml: '5px' }, children: jsx(TooltipBubble, { body: 'This purchase will earn you Ape Points. Ape Points provide a weekly yield in USDT and count toward your Ape Tier progression. Unlock higher Ape Tiers to get extra discounts on all Bonds.', width: ['200px', '200px', '200px', '250px'], placement: "bottomLeft", transformTip: ['translate(-8%, 0%)', 'translate(-8%, 0%)', 'translate(-8%, 0%)', 'translate(-7%, 0%)'], children: jsx(QuestionCircle, { width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsx(Flex, { className: "row-container get-val", children: jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [highestProfitableTier || optimizationData?.tierBoostPoints ? (jsxs(Fragment, { children: [jsx(TokenImage, { symbol: 'veABOND', size: 15 }), formatNumberSI(highestProfitableTier && tierOptimizerUIEnabled
+                                })(), jsx(Flex, { className: "ape:capitalize", children: activePromotion }), jsx(Flex, { className: "ape:text-success ape:mx-[3px] ape:font-bold", children: `+${trueBondPrice?.boost ?? 0}%` }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs("div", { children: [jsx("span", { className: "ape:capitalize", children: activePromotion }), " successfully applied! Bonds on", ' ', NETWORK_LABEL[bondData.chainId], " Chain now have an extra 5% Bonus."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-7%, 0%)", children: jsx(QuestionCircle, { width: "12px" }) })] })) : (jsxs(Flex, { className: "ape:gap-[3px] ape:items-center", children: [jsx("img", { src: `https://ape.bond/images/launch/${tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px' } }), "Boost", jsx(Flex, { className: "ape:text-success ape:mx-[3px] ape:font-bold", children: `+${trueBondPrice?.boost ?? 0}%` }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Boost }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(QuestionCircle, { width: "12px" }) })] })) }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container premium-val premium-positive ape:flex ape:font-normal ape:items-center ape:text-success", children: ["$ ", formatNumberSI(boostAmount)] }))] })), jsxs(Flex, { className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:mx-[-5px] ape:px-[5px] ape:py-[2px] ape:my-[2px] ape:relative", children: [jsx(Flex, { className: "ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-0 ape:bg-[#9960C5] ape:opacity-20 ape:rounded-normal" }), jsxs(Flex, { className: "ape:w-full ape:justify-between ape:h-[21px]", children: [jsxs(Flex, { className: "row-container get ape:flex ape:font-normal ape:items-center ape:z-[1]", children: ["You Get (over ", getTimePeriods(bondData?.vestingTerm, true).days, " days):"] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsxs(Flex, { className: "row-container get-val ape:flex ape:font-normal ape:items-center ape:z-[1]", children: [formatNumberSI(estimatedOutputAmount, 4), " ", bondData?.showcaseTokenName, " = $", ' ', formatNumberSI(estimatedOutputUSD, 2)] }))] })] }), (bondData.tierBoostRate || highestProfitableTier) && SDKConfig.useTiers && (jsxs(Flex, { className: "ape:w-full ape:justify-between ape:h-[21px]", children: [jsxs(Flex, { className: "row-container get ape:flex ape:font-normal ape:items-center", children: ["Ape Points Earned:", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(TooltipBubble, { body: 'This purchase will earn you Ape Points. Ape Points provide a weekly yield in USDT and count toward your Ape Tier progression. Unlock higher Ape Tiers to get extra discounts on all Bonds.', width: isMobile ? '200px' : '250px', placement: "bottomLeft", transformTip: isMobile ? 'translate(-8%, 0%)' : 'translate(-7%, 0%)', children: jsx(QuestionCircle, { width: "12px" }) }) })] }), isZap && fetchingZapQuote ? (jsx(Dots, {})) : isZap && zapError ? ('-') : (jsx(Flex, { className: "row-container get-val ape:flex ape:font-normal ape:items-center", children: jsxs(Flex, { className: "ape:items-center ape:gap-[5px]", children: [highestProfitableTier || optimizationData?.tierBoostPoints ? (jsxs(Fragment, { children: [jsx(TokenImage, { symbol: 'veABOND', size: 15 }), formatNumberSI(highestProfitableTier
                                             ? highestProfitableTier.necessaryPointsToUpgrade
-                                            : optimizationData?.tierBoostPoints, 2, true), jsx(Flex, { children: "points" })] })) : ('-'), highestProfitableTier && tierOptimizerUIEnabled && (jsxs(Fragment, { children: ["+", jsxs(Flex, { sx: {
-                                                px: '3px',
-                                                height: '24px',
+                                            : optimizationData?.tierBoostPoints, 2, true), jsx(Flex, { children: "points" })] })) : ('-'), highestProfitableTier && (jsxs(Fragment, { children: ["+", jsxs(Flex, { className: "ape:px-[3px] ape:h-[24px] ape:rounded-[5px] ape:font-bold ape:items-center", style: {
                                                 background: TIERS_BG[highestProfitableTier.tier],
                                                 border: `2px solid ${TIERS_COLORS[highestProfitableTier.tier]}`,
-                                                borderRadius: '5px',
-                                                fontWeight: 700,
-                                                alignItems: 'center',
-                                                minWidth: highestProfitableTier.tier > 2 && '118px',
+                                                minWidth: highestProfitableTier.tier > 2 ? '118px' : undefined,
                                             }, children: [jsx("img", { src: `https://ape.bond/images/launch/${highestProfitableTier?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), highestProfitableTier.tierName, " Tier"] })] }))] }) }))] }))] }));
 };
 

package/dist/views/BuyBond/components/Estimations.js.map

@@ -1 +1 @@
-{"version":3,"file":"Estimations.js","sources":["../../../../src/views/BuyBond/components/Estimations.tsx"],"sourcesContent":["import React from 'react'\nimport { getBonusColor, getPayoutAmount, getRawBonus } from '../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers'\nimport { BondsData } from '../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  NewTiers,\n  promotionDataMapping,\n  TIERS_BG,\n  TIERS_COLORS,\n  TIERS_NAMES,\n} from '../../../state/tiers/useTierPoints'\nimport { useSDKConfig } from '../../../state/useSDKConfig'\nimport { formatNumberSI } from '../../../utils/formatNumber'\nimport { BillVersion } from '@ape.swap/apeswap-lists'\nimport { getTimePeriods } from '../../../utils/getTimePeriods'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport LoadingDots from '../../../components/uikit-sdk/LoadingDots'\nimport { calculateOptimizationData } from '../utils'\nimport { useAbondPrice } from '../../../state/tokenPrices/useAbondPrice'\nimport TokenImage from '../../../components/uikit-sdk/TokenImage'\nimport { tierOptimizerUIEnabled } from '../../../config/constants/variables'\nimport { TooltipText } from '../../../config/constants/tooltips'\nimport { NETWORK_LABEL } from '../../../config/constants/chains'\nimport { Box } from 'theme-ui'\nimport QuestionCircle from '../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst Estimations = ({\n  depositAmount,\n  inputValue,\n  inputTokenPrice,\n  bondData,\n  youSpendString,\n  isZap,\n  fetchingZapQuote,\n  zapError,\n  hidePromotionUi = false,\n}: {\n  depositAmount: string // actually deposited (after zap fees and estimations)\n  inputValue?: string // input amount selected on the UI\n  inputTokenPrice?: number\n  bondData: BondsData\n  youSpendString?: string\n  isZap?: boolean\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  hidePromotionUi?: boolean\n}) => {\n  const { data: tierPointsState } = useTierPoints()\n  const { promotionalPoints, promotion, eligibleChains, onChainPoints } = tierPointsState || {}\n  // if promotion comes with eligibleChains undefined means it should be used for every chain\n  const isBondEligibleForPromotion = eligibleChains === undefined || eligibleChains?.includes(bondData.chainId)\n  const tierPointsToUse =\n    !isBondEligibleForPromotion || hidePromotionUi ? (onChainPoints ?? '0') : (promotionalPoints ?? '0')\n  const activePromotion = hidePromotionUi || !isBondEligibleForPromotion ? null : promotion\n\n  const abondPrice = useAbondPrice()\n  const trueBondPrice = findHighestTrueBondPrice(tierPointsToUse, bondData?.trueBondPrices)\n  const SDKConfig = useSDKConfig()\n  const userTier = getUserTier(tierPointsToUse)\n  const tierName = userTier ? TIERS_NAMES[userTier] : ''\n\n  // Estimations\n  const bonusString = getRawBonus(bondData, depositAmount, '0')\n  // const fee = getFeeAmount(bondData, depositAmount, userPoints ?? '0')\n  // const feeUSD = fee * parseFloat(bondData?.payoutTokenPrice ?? '0')\n\n  const estimatedOutputAmount = getPayoutAmount(bondData, depositAmount, tierPointsToUse)\n  const estimatedOutputUSD = estimatedOutputAmount * parseFloat(bondData?.payoutTokenPrice ?? '0')\n\n  const noTierAmount = getRawBonus(bondData, depositAmount, '0')\n  const boostAmount =\n    parseFloat(getRawBonus(bondData, depositAmount, tierPointsToUse ?? '0')) - parseFloat(noTierAmount)\n\n  const optimizationData = calculateOptimizationData(\n    inputValue ?? '',\n    tierPointsToUse!,\n    bondData,\n    inputTokenPrice,\n    abondPrice,\n  )\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n\n  return (\n    <Flex className=\"modaltable-container text-container\">\n      {/* ----------- YOU SPEND ROW -----------*/}\n\n      <Flex className=\"text-container row\">\n        <Flex className=\"row-container spend\">You Spend:</Flex>\n        <Flex className=\"row-container spend-val\">{youSpendString}</Flex>\n      </Flex>\n\n      {/* ----------- BONUS ROW -----------*/}\n\n      <Flex className=\"text-container row\">\n        <Flex className=\"row-container premium\">\n          {!!userTier &&\n          !!tierPointsToUse &&\n          SDKConfig.useTiers &&\n          bondData.billVersion === BillVersion.V4 &&\n          !hidePromotionUi\n            ? SDKConfig.namingPreference === 'Discount'\n              ? 'Base Discount:'\n              : 'Base Bonus:'\n            : SDKConfig.namingPreference === 'Discount'\n              ? 'Discount:'\n              : 'Bonus:'}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Flex>\n                {(bondData?.feeInPayout || 0) > 0\n                  ? `This is the dollar value of the bonus tokens you’ll receive at current market price, already accounting for the protocol fee (${bondData.feeInPayout}%)`\n                  : 'This is the dollar value of the bonus tokens you’ll receive at current market price.'}\n              </Flex>\n            }\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, 0%)\"\n          >\n            <Flex className=\"row-container premium-icon\">\n              <QuestionCircle width=\"12px\" />\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n        {isZap && fetchingZapQuote ? (\n          <LoadingDots />\n        ) : isZap && zapError ? (\n          '-'\n        ) : (\n          <Flex className={`row-container premium-val ${getBonusColor(bonusString)}`}>\n            $ {formatNumberSI(bonusString)}\n          </Flex>\n        )}\n      </Flex>\n\n      {/* ----------- BOOST ROW -----------*/}\n\n      {!hidePromotionUi && trueBondPrice?.points !== '0' && userTier && tierPointsToUse && SDKConfig.useTiers && (\n        <Flex\n          sx={{\n            borderRadius: 'normal',\n            mx: '-8px',\n            px: '8px',\n            py: '2px',\n            position: 'relative',\n            justifyContent: 'space-between',\n          }}\n        >\n          <Flex className=\"row-container premium\" sx={{ position: 'relative', zIndex: 2 }}>\n            {activePromotion ? (\n              <Flex sx={{ gap: '3px', alignItems: 'center' }}>\n                {(() => {\n                  const PromotionIcon = promotionDataMapping[activePromotion].icon\n                  return <PromotionIcon width={15} />\n                })()}\n                <Flex sx={{ textTransform: 'capitalize' }}>{activePromotion}</Flex>\n                <Flex sx={{ color: 'success', mx: '3px', fontWeight: 700 }}>{`+${trueBondPrice?.boost ?? 0}%`}</Flex>\n                <TooltipBubble\n                  className=\"tooltip-bubble\"\n                  body={\n                    <Box>\n                      <span sx={{ textTransform: 'capitalize' }}>{activePromotion}</span> successfully applied! Bonds on{' '}\n                      {NETWORK_LABEL[bondData.chainId]} Chain now have an extra 5% Bonus.\n                    </Box>\n                  }\n                  width=\"230px\"\n                  placement=\"bottomLeft\"\n                  transformTip=\"translate(-7%, 0%)\"\n                >\n                  <QuestionCircle width=\"12px\" />\n                </TooltipBubble>\n              </Flex>\n            ) : (\n              <Flex sx={{ gap: '3px', alignItems: 'center' }}>\n                <img\n                  src={`https://ape.bond/images/launch/${tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px' }}\n                />\n                Boost\n                <Flex sx={{ color: 'success', mx: '3px', fontWeight: 700 }}>{`+${trueBondPrice?.boost ?? 0}%`}</Flex>\n                <TooltipBubble\n                  className=\"tooltip-bubble\"\n                  body={<Flex>{TooltipText.Boost}</Flex>}\n                  width=\"230px\"\n                  placement=\"bottomLeft\"\n                  transformTip=\"translate(-5%, 0%)\"\n                >\n                  <QuestionCircle width=\"12px\" />\n                </TooltipBubble>\n              </Flex>\n            )}\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className={`row-container premium-val premium-positive`}>$ {formatNumberSI(boostAmount)}</Flex>\n          )}\n        </Flex>\n      )}\n\n      {/* ----------- YOU GET ROW -----------*/}\n\n      <Flex\n        sx={{\n          border: '1px solid #9960C5',\n          borderRadius: 'normal',\n          mx: '-5px',\n          px: '5px',\n          py: '2px',\n          my: '2px',\n          position: 'relative',\n        }}\n      >\n        <Flex\n          sx={{\n            position: 'absolute',\n            width: '100%',\n            height: '100%',\n            top: 0,\n            left: 0,\n            zIndex: 0,\n            background: '#9960C5',\n            opacity: 0.2,\n            borderRadius: 'normal',\n          }}\n        />\n        <Flex sx={{ width: '100%', justifyContent: 'space-between', height: '21px' }}>\n          <Flex className=\"row-container get\" sx={{ zIndex: 1 }}>\n            You Get (over {getTimePeriods(bondData?.vestingTerm, true).days} days):\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className=\"row-container get-val\" sx={{ zIndex: 1 }}>\n              {formatNumberSI(estimatedOutputAmount, 4)} {bondData?.showcaseTokenName} = ${' '}\n              {formatNumberSI(estimatedOutputUSD, 2)}\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n\n      {/* ----------- APE POINTS EARNED ROW ----------- */}\n\n      {(bondData.tierBoostRate || highestProfitableTier) && SDKConfig.useTiers && (\n        <Flex sx={{ width: '100%', justifyContent: 'space-between', height: '21px' }}>\n          <Flex className=\"row-container get\">\n            Ape Points Earned:\n            <Flex sx={{ ml: '5px' }}>\n              <TooltipBubble\n                body={\n                  'This purchase will earn you Ape Points. Ape Points provide a weekly yield in USDT and count toward your Ape Tier progression. Unlock higher Ape Tiers to get extra discounts on all Bonds.'\n                }\n                width={['200px', '200px', '200px', '250px']}\n                placement=\"bottomLeft\"\n                transformTip={['translate(-8%, 0%)', 'translate(-8%, 0%)', 'translate(-8%, 0%)', 'translate(-7%, 0%)']}\n              >\n                <QuestionCircle width=\"12px\" />\n              </TooltipBubble>\n            </Flex>\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className=\"row-container get-val\">\n              <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                {highestProfitableTier || optimizationData?.tierBoostPoints ? (\n                  <>\n                    <TokenImage symbol={'veABOND'} size={15} />\n                    {formatNumberSI(\n                      highestProfitableTier && tierOptimizerUIEnabled\n                        ? highestProfitableTier.necessaryPointsToUpgrade\n                        : optimizationData?.tierBoostPoints,\n                      2,\n                      true,\n                    )}\n                    <Flex>points</Flex>\n                  </>\n                ) : (\n                  '-'\n                )}\n                {highestProfitableTier && tierOptimizerUIEnabled && (\n                  <>\n                    +\n                    <Flex\n                      sx={{\n                        px: '3px',\n                        height: '24px',\n                        background: TIERS_BG[highestProfitableTier.tier as NewTiers],\n                        border: `2px solid ${TIERS_COLORS[highestProfitableTier.tier as NewTiers]}`,\n                        borderRadius: '5px',\n                        fontWeight: 700,\n                        alignItems: 'center',\n                        minWidth: highestProfitableTier.tier > 2 && '118px',\n                      }}\n                    >\n                      <img\n                        src={`https://ape.bond/images/launch/${highestProfitableTier?.tierName?.toLowerCase()}.png`}\n                        alt=\"minTier\"\n                        style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                      />\n                      {highestProfitableTier.tierName} Tier\n                    </Flex>\n                  </>\n                )}\n              </Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Estimations\n"],"names":["_jsxs","_jsx","LoadingDots","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Estimations.js","sources":["../../../../src/views/BuyBond/components/Estimations.tsx"],"sourcesContent":["import React from 'react'\nimport { getBonusColor, getPayoutAmount, getRawBonus } from '../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers'\nimport { BondsData } from '../../../types/bonds'\nimport useTierPoints from '../../../state/tiers/useTierPoints'\nimport {\n  getUserTier,\n  NewTiers,\n  promotionDataMapping,\n  TIERS_BG,\n  TIERS_COLORS,\n  TIERS_NAMES,\n} from '../../../state/tiers/tiers'\nimport { useSDKConfig } from '../../../state/useSDKConfig'\nimport { formatNumberSI } from '../../../utils/formatNumber'\nimport { BillVersion } from '@ape.swap/apeswap-lists'\nimport { getTimePeriods } from '../../../utils/getTimePeriods'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../components/uikit-sdk/TooltipBubble'\nimport LoadingDots from '../../../components/uikit-sdk/LoadingDots'\nimport { calculateOptimizationData } from '../utils'\nimport { useAbondPrice } from '../../../state/tokenPrices/useAbondPrice'\nimport TokenImage from '../../../components/uikit-sdk/TokenImage'\nimport { TooltipText } from '../../../config/constants/tooltips'\nimport { NETWORK_LABEL } from '../../../config/constants/chains'\nimport QuestionCircle from '../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport { useIsMobile } from '../../../hooks/useIsMobile'\n\nconst Estimations = ({\n  depositAmount,\n  inputValue,\n  inputTokenPrice,\n  bondData,\n  youSpendString,\n  isZap,\n  fetchingZapQuote,\n  zapError,\n  hidePromotionUi = false,\n}: {\n  depositAmount: string // actually deposited (after zap fees and estimations)\n  inputValue?: string // input amount selected on the UI\n  inputTokenPrice?: number\n  bondData: BondsData\n  youSpendString?: string\n  isZap?: boolean\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  hidePromotionUi?: boolean\n}) => {\n  const isMobile = useIsMobile()\n  const { data: tierPointsState } = useTierPoints()\n  const { promotionalPoints, promotion, eligibleChains, onChainPoints } = tierPointsState || {}\n  // if promotion comes with eligibleChains undefined means it should be used for every chain\n  const isBondEligibleForPromotion = eligibleChains === undefined || eligibleChains?.includes(bondData.chainId)\n  const tierPointsToUse =\n    !isBondEligibleForPromotion || hidePromotionUi ? (onChainPoints ?? '0') : (promotionalPoints ?? '0')\n  const activePromotion = hidePromotionUi || !isBondEligibleForPromotion ? null : promotion\n\n  const abondPrice = useAbondPrice()\n  const trueBondPrice = findHighestTrueBondPrice(tierPointsToUse, bondData?.trueBondPrices)\n  const SDKConfig = useSDKConfig()\n  const userTier = getUserTier(tierPointsToUse)\n  const tierName = userTier ? TIERS_NAMES[userTier] : ''\n\n  // Estimations\n  const bonusString = getRawBonus(bondData, depositAmount, '0')\n  // const fee = getFeeAmount(bondData, depositAmount, userPoints ?? '0')\n  // const feeUSD = fee * parseFloat(bondData?.payoutTokenPrice ?? '0')\n\n  const estimatedOutputAmount = getPayoutAmount(bondData, depositAmount, tierPointsToUse)\n  const estimatedOutputUSD = estimatedOutputAmount * parseFloat(bondData?.payoutTokenPrice ?? '0')\n\n  const noTierAmount = getRawBonus(bondData, depositAmount, '0')\n  const boostAmount =\n    parseFloat(getRawBonus(bondData, depositAmount, tierPointsToUse ?? '0')) - parseFloat(noTierAmount)\n\n  const optimizationData = calculateOptimizationData(\n    inputValue ?? '',\n    tierPointsToUse!,\n    bondData,\n    inputTokenPrice,\n    abondPrice,\n  )\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n\n  return (\n    <Flex className=\"modaltable-container text-container ape:w-full ape:flex ape:relative ape:flex-col ape:justify-center ape:text-[12px]\">\n      {/* ----------- YOU SPEND ROW -----------*/}\n\n      <Flex className=\"text-container row ape:pt-[2px] ape:pb-[2px] ape:flex ape:flex-row ape:justify-between\">\n        <Flex className=\"row-container spend ape:flex ape:font-normal ape:items-center\">You Spend:</Flex>\n        <Flex className=\"row-container spend-val ape:flex ape:font-normal ape:items-center\">{youSpendString}</Flex>\n      </Flex>\n\n      {/* ----------- BONUS ROW -----------*/}\n\n      <Flex className=\"text-container row ape:pt-[2px] ape:pb-[2px] ape:flex ape:flex-row ape:justify-between\">\n        <Flex className=\"row-container premium ape:flex ape:font-normal ape:items-center\">\n          {!!userTier &&\n          !!tierPointsToUse &&\n          SDKConfig.useTiers &&\n          bondData.billVersion === BillVersion.V4 &&\n          !hidePromotionUi\n            ? SDKConfig.namingPreference === 'Discount'\n              ? 'Base Discount:'\n              : 'Base Bonus:'\n            : SDKConfig.namingPreference === 'Discount'\n              ? 'Discount:'\n              : 'Bonus:'}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Flex>\n                {(bondData?.feeInPayout || 0) > 0\n                  ? `This is the dollar value of the bonus tokens you’ll receive at current market price, already accounting for the protocol fee (${bondData.feeInPayout}%)`\n                  : 'This is the dollar value of the bonus tokens you’ll receive at current market price.'}\n              </Flex>\n            }\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, 0%)\"\n          >\n            <Flex className=\"row-container premium-icon ape:flex ape:font-normal ape:items-start ape:pl-[5px] ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n        {isZap && fetchingZapQuote ? (\n          <LoadingDots />\n        ) : isZap && zapError ? (\n          '-'\n        ) : (\n          <Flex\n            className={`row-container premium-val ape:flex ape:font-normal ape:items-center ${getBonusColor(bonusString)}`}\n          >\n            $ {formatNumberSI(bonusString)}\n          </Flex>\n        )}\n      </Flex>\n\n      {/* ----------- BOOST ROW -----------*/}\n\n      {!hidePromotionUi && trueBondPrice?.points !== '0' && userTier && tierPointsToUse && SDKConfig.useTiers && (\n        <Flex className=\"ape:rounded-normal ape:mx-[-8px] ape:px-[8px] ape:py-[2px] ape:relative ape:justify-between\">\n          <Flex className=\"row-container premium ape:flex ape:font-normal ape:items-center ape:relative ape:z-[2]\">\n            {activePromotion ? (\n              <Flex className=\"ape:gap-[3px] ape:items-center\">\n                {(() => {\n                  const PromotionIcon = promotionDataMapping[activePromotion].icon\n                  return <PromotionIcon width={15} />\n                })()}\n                <Flex className=\"ape:capitalize\">{activePromotion}</Flex>\n                <Flex className=\"ape:text-success ape:mx-[3px] ape:font-bold\">{`+${trueBondPrice?.boost ?? 0}%`}</Flex>\n                <TooltipBubble\n                  className=\"tooltip-bubble\"\n                  body={\n                    <div>\n                      <span className=\"ape:capitalize\">{activePromotion}</span> successfully applied! Bonds on{' '}\n                      {NETWORK_LABEL[bondData.chainId]} Chain now have an extra 5% Bonus.\n                    </div>\n                  }\n                  width=\"230px\"\n                  placement=\"bottomLeft\"\n                  transformTip=\"translate(-7%, 0%)\"\n                >\n                  <QuestionCircle width=\"12px\" />\n                </TooltipBubble>\n              </Flex>\n            ) : (\n              <Flex className=\"ape:gap-[3px] ape:items-center\">\n                <img\n                  src={`https://ape.bond/images/launch/${tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px' }}\n                />\n                Boost\n                <Flex className=\"ape:text-success ape:mx-[3px] ape:font-bold\">{`+${trueBondPrice?.boost ?? 0}%`}</Flex>\n                <TooltipBubble\n                  className=\"tooltip-bubble\"\n                  body={<Flex>{TooltipText.Boost}</Flex>}\n                  width=\"230px\"\n                  placement=\"bottomLeft\"\n                  transformTip=\"translate(-5%, 0%)\"\n                >\n                  <QuestionCircle width=\"12px\" />\n                </TooltipBubble>\n              </Flex>\n            )}\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className=\"row-container premium-val premium-positive ape:flex ape:font-normal ape:items-center ape:text-success\">\n              $ {formatNumberSI(boostAmount)}\n            </Flex>\n          )}\n        </Flex>\n      )}\n\n      {/* ----------- YOU GET ROW -----------*/}\n\n      <Flex className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:mx-[-5px] ape:px-[5px] ape:py-[2px] ape:my-[2px] ape:relative\">\n        <Flex className=\"ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-0 ape:bg-[#9960C5] ape:opacity-20 ape:rounded-normal\" />\n        <Flex className=\"ape:w-full ape:justify-between ape:h-[21px]\">\n          <Flex className=\"row-container get ape:flex ape:font-normal ape:items-center ape:z-[1]\">\n            You Get (over {getTimePeriods(bondData?.vestingTerm, true).days} days):\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className=\"row-container get-val ape:flex ape:font-normal ape:items-center ape:z-[1]\">\n              {formatNumberSI(estimatedOutputAmount, 4)} {bondData?.showcaseTokenName} = ${' '}\n              {formatNumberSI(estimatedOutputUSD, 2)}\n            </Flex>\n          )}\n        </Flex>\n      </Flex>\n\n      {/* ----------- APE POINTS EARNED ROW ----------- */}\n\n      {(bondData.tierBoostRate || highestProfitableTier) && SDKConfig.useTiers && (\n        <Flex className=\"ape:w-full ape:justify-between ape:h-[21px]\">\n          <Flex className=\"row-container get ape:flex ape:font-normal ape:items-center\">\n            Ape Points Earned:\n            <Flex className=\"ape:ml-[5px]\">\n              <TooltipBubble\n                body={\n                  'This purchase will earn you Ape Points. Ape Points provide a weekly yield in USDT and count toward your Ape Tier progression. Unlock higher Ape Tiers to get extra discounts on all Bonds.'\n                }\n                width={isMobile ? '200px' : '250px'}\n                placement=\"bottomLeft\"\n                transformTip={isMobile ? 'translate(-8%, 0%)' : 'translate(-7%, 0%)'}\n              >\n                <QuestionCircle width=\"12px\" />\n              </TooltipBubble>\n            </Flex>\n          </Flex>\n          {isZap && fetchingZapQuote ? (\n            <LoadingDots />\n          ) : isZap && zapError ? (\n            '-'\n          ) : (\n            <Flex className=\"row-container get-val ape:flex ape:font-normal ape:items-center\">\n              <Flex className=\"ape:items-center ape:gap-[5px]\">\n                {highestProfitableTier || optimizationData?.tierBoostPoints ? (\n                  <>\n                    <TokenImage symbol={'veABOND'} size={15} />\n                    {formatNumberSI(\n                      highestProfitableTier\n                        ? highestProfitableTier.necessaryPointsToUpgrade\n                        : optimizationData?.tierBoostPoints,\n                      2,\n                      true,\n                    )}\n                    <Flex>points</Flex>\n                  </>\n                ) : (\n                  '-'\n                )}\n                {highestProfitableTier && (\n                  <>\n                    +\n                    <Flex\n                      className=\"ape:px-[3px] ape:h-[24px] ape:rounded-[5px] ape:font-bold ape:items-center\"\n                      style={{\n                        background: TIERS_BG[highestProfitableTier.tier as NewTiers],\n                        border: `2px solid ${TIERS_COLORS[highestProfitableTier.tier as NewTiers]}`,\n                        minWidth: highestProfitableTier.tier > 2 ? '118px' : undefined,\n                      }}\n                    >\n                      <img\n                        src={`https://ape.bond/images/launch/${highestProfitableTier?.tierName?.toLowerCase()}.png`}\n                        alt=\"minTier\"\n                        style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                      />\n                      {highestProfitableTier.tierName} Tier\n                    </Flex>\n                  </>\n                )}\n              </Flex>\n            </Flex>\n          )}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default Estimations\n"],"names":["_jsxs","_jsx","LoadingDots","_Fragment"],"mappings":"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"}

package/dist/views/BuyBond/components/ExpandedViewButton.d.ts

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

package/dist/views/BuyBond/components/ExpandedViewButton.js

@@ -1,22 +1,9 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Flex from '../../../components/uikit-sdk/Flex/index.js';
 import Expand from '../../../components/uikit-sdk/Svg/Icons/Expand.js';
 
 const ExpandedViewButton = ({ handleNavigation, rightPos }) => {
-    return (jsx(Flex, { sx: { justifyContent: 'flex-end', position: 'absolute', top: '5px', right: rightPos ?? '65px', width: '122px' }, children: jsxs(Flex, { sx: {
-                fontSize: '12px',
-                fontWeight: 500,
-                mr: '15px',
-                background: 'primaryButton',
-                pl: '10px',
-                pr: '4px',
-                borderRadius: 'normal',
-                alignItems: 'center',
-                position: 'relative',
-                cursor: 'pointer',
-                width: '100%',
-                display: 'flex',
-            }, onClick: handleNavigation, children: ["Project Info", jsx(Flex, { sx: { ml: '4px' }, children: jsx(Expand, { width: 20, color: "white" }) })] }) }));
+    return (jsx(Flex, { className: "ape:justify-end ape:absolute ape:top-[5px] ape:w-[122px]", style: { right: rightPos ?? '65px' }, children: jsxs(Flex, { className: "ape:text-[12px] ape:font-medium ape:mr-[15px] ape:bg-primary-button ape:pl-[10px] ape:pr-[4px] ape:rounded-normal ape:items-center ape:relative ape:cursor-pointer ape:w-full ape:flex", onClick: handleNavigation, children: ["Project Info", jsx(Flex, { className: "ape:ml-[4px]", children: jsx(Expand, { width: 20, color: "white" }) })] }) }));
 };
 
 export { ExpandedViewButton as default };

package/dist/views/BuyBond/components/ExpandedViewButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandedViewButton.js","sources":["../../../../src/views/BuyBond/components/ExpandedViewButton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Expand from '../../../components/uikit-sdk/Svg/Icons/Expand'\n\nconst ExpandedViewButton = ({ handleNavigation, rightPos }: { handleNavigation: () => void; rightPos?: string }) => {\n  return (\n    <Flex\n      sx={{ justifyContent: 'flex-end', position: 'absolute', top: '5px', right: rightPos ?? '65px', width: '122px' }}\n    >\n      <Flex\n        sx={{\n          fontSize: '12px',\n          fontWeight: 500,\n          mr: '15px',\n          background: 'primaryButton',\n          pl: '10px',\n          pr: '4px',\n          borderRadius: 'normal',\n          alignItems: 'center',\n          position: 'relative',\n          cursor: 'pointer',\n          width: '100%',\n          display: 'flex',\n        }}\n        onClick={handleNavigation}\n      >\n        Project Info\n        <Flex sx={{ ml: '4px' }}>\n          <Expand width={20} color=\"white\" />\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default ExpandedViewButton\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAuD,KAAI;AACjH,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,IAAI,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EAE/GC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,UAAU,EAAE,eAAe;AAC3B,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,EAAE,EAAE,KAAK;AACT,gBAAA,YAAY,EAAE,QAAQ;AACtB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,OAAO,EAAE,MAAM;AAChB,aAAA,EACD,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAAA,cAAA,EAGzBD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACrBA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,EAAA,CAAG,EAAA,CAC9B,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}
+{"version":3,"file":"ExpandedViewButton.js","sources":["../../../../src/views/BuyBond/components/ExpandedViewButton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Expand from '../../../components/uikit-sdk/Svg/Icons/Expand'\n\nconst ExpandedViewButton = ({ handleNavigation, rightPos }: { handleNavigation: () => void; rightPos?: string }) => {\n  return (\n    <Flex className=\"ape:justify-end ape:absolute ape:top-[5px] ape:w-[122px]\" style={{ right: rightPos ?? '65px' }}>\n      <Flex\n        className=\"ape:text-[12px] ape:font-medium ape:mr-[15px] ape:bg-primary-button ape:pl-[10px] ape:pr-[4px] ape:rounded-normal ape:items-center ape:relative ape:cursor-pointer ape:w-full ape:flex\"\n        onClick={handleNavigation}\n      >\n        Project Info\n        <Flex className=\"ape:ml-[4px]\">\n          <Expand width={20} color=\"white\" />\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default ExpandedViewButton\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAuD,KAAI;IACjH,QACEA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,IAAI,MAAM,EAAE,EAAA,QAAA,EAC7GC,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,wLAAwL,EAClM,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAAA,cAAA,EAGzBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAC5BA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG,EAAA,CAC9B,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}

package/dist/views/BuyBond/components/L1xIframe/L1xIframe.d.ts

@@ -0,0 +1,4 @@
+declare const L1XIframe: ({ onDismiss }: {
+    onDismiss?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default L1XIframe;

package/dist/views/BuyBond/components/L1xIframe/L1xIframe.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Modal from '../../../../components/uikit-sdk/Modal/index.js';
+import ModalHeader from '../../../../components/uikit-sdk/Modal/ModalHeader.js';
+import IconButton from '../../../../components/uikit-sdk/Button/IconButton.js';
+import Close from '../../../../components/uikit-sdk/Svg/Icons/Close.js';
+
+const L1XIframe = ({ onDismiss }) => {
+    return (jsxs(Modal, { className: "ape:h-[725px] ape:w-[500px] ape:p-0!", sx: { height: '725px', width: '500px', p: '0px' }, children: [jsxs(ModalHeader, { className: "ape:p-[15px_20px_5px_20px] ape:text-[22px]", children: [`Bridge to Layer One X`, jsx(IconButton, { icon: Close, color: "text", variant: "transparent", onClick: onDismiss })] }), jsx("iframe", { src: "https://www.qd.finance/swap", style: { width: '100%', height: '725px', border: 'none', borderRadius: 'normal' } })] }));
+};
+
+export { L1XIframe as default };
+//# sourceMappingURL=L1xIframe.js.map

package/dist/views/BuyBond/components/L1xIframe/L1xIframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"L1xIframe.js","sources":["../../../../../src/views/BuyBond/components/L1xIframe/L1xIframe.tsx"],"sourcesContent":["import React from 'react'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport ModalHeader from '../../../../components/uikit-sdk/Modal/ModalHeader'\nimport IconButton from '../../../../components/uikit-sdk/Button/IconButton'\nimport Close from '../../../../components/uikit-sdk/Svg/Icons/Close'\n\nconst L1XIframe = ({ onDismiss }: { onDismiss?: () => void }) => {\n  return (\n    <Modal className=\"ape:h-[725px] ape:w-[500px] ape:p-0!\" sx={{ height: '725px', width: '500px', p: '0px' }}>\n      <ModalHeader className=\"ape:p-[15px_20px_5px_20px] ape:text-[22px]\">\n        {`Bridge to Layer One X`}\n        <IconButton icon={Close} color=\"text\" variant=\"transparent\" onClick={onDismiss} />\n      </ModalHeader>\n      <iframe\n        src=\"https://www.qd.finance/swap\"\n        style={{ width: '100%', height: '725px', border: 'none', borderRadius: 'normal' }}\n      />\n    </Modal>\n  )\n}\n\nexport default L1XIframe\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAA8B,KAAI;AAC9D,IAAA,QACEA,IAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,sCAAsC,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACvGA,IAAA,CAAC,WAAW,IAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAChE,uBAAuB,EACxBC,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,EAAA,CAAI,IACtE,EACdA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAC,6BAA6B,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAA,CACjF,CAAA,EAAA,CACI;AAEZ;;;;"}

package/dist/views/BuyBond/components/NewRateModal/NewRateModal.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 declare const NewRateModal: ({ bond, zapTrueBondPrice, depositAmount, youSpendString, fetchingZapQuote, zapError, onDismiss, }: {
     bond?: BondsData;
@@ -8,5 +7,5 @@ declare const NewRateModal: ({ bond, zapTrueBondPrice, depositAmount, youSpendSt
     fetchingZapQuote?: boolean;
     zapError?: boolean;
     onDismiss?: () => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NewRateModal;

package/dist/views/BuyBond/components/NewRateModal/NewRateModal.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 import Modal from '../../../../components/uikit-sdk/Modal/index.js';
@@ -24,19 +24,7 @@ const NewRateModal = ({ bond, zapTrueBondPrice, depositAmount, youSpendString, f
     const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice;
     const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100;
     const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0;
-    return (jsx(Modal, { title: "Bonus update", sx: { width: '380px' }, children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', flexDirection: 'column', mt: '10px' }, children: [jsxs(Flex, { sx: { display: 'block', fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }, children: ["The bonus for the bond you are purchasing has been adjusted by", ' ', jsxs(Text, { sx: { color: 'error' }, children: [(zapBonusWithFee - oldBonus).toFixed(2), "%"] }), "."] }), jsxs(Flex, { sx: {
-                        p: '8px 4px 4px 4px',
-                        borderRadius: '8px',
-                        width: '100%',
-                        alignItems: 'center',
-                    }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '10px' }, children: [jsx(Text, { sx: { fontSize: '12px', fontWeight: '300', lineHeight: '14px' }, children: "Old Bonus:" }), jsxs(Text, { sx: { fontSize: '12px', fontWeight: 400 }, children: [oldBonus?.toFixed(2), "% ", tokenSymbol] })] })] }), jsx(Flex, { sx: { width: '15px', height: '15px', ml: '20px', mr: '10px', alignItems: 'center' }, children: jsx(Arrow, { direction: "right" }) }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '10px' }, children: [jsx(Text, { sx: { fontSize: '12px', fontWeight: '300', lineHeight: '14px' }, children: "New Bonus:" }), jsxs(Text, { sx: { fontSize: '12px', fontWeight: 400 }, children: [zapBonusWithFee.toFixed(2), "% ", tokenSymbol] })] })] })] }), jsx(Estimations, { depositAmount: depositAmount, inputValue: depositAmount, inputTokenPrice: 1, bondData: { ...bond, trueBillPrice: zapTrueBondPrice }, youSpendString: youSpendString, fetchingZapQuote: fetchingZapQuote, zapError: zapError, isZap: true }), jsx(Flex, { sx: {
-                        width: '100%',
-                        fontSize: '14px',
-                        fontWeight: 500,
-                        color: 'textDisabledButton',
-                        justifyContent: 'flex-start',
-                        mb: '10px',
-                    }, children: "Would you like to confirm the new rate?" }), jsx(Button, { fullWidth: true, onClick: onDismiss, disabled: fetchingZapQuote, load: fetchingZapQuote, children: fetchingZapQuote ? 'Loading' : 'Confirm' })] }) }));
+    return (jsx(Modal, { title: "Bonus update", className: "ape:w-[380px]!", children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:flex-col ape:mt-[10px]", children: [jsxs(Flex, { className: "ape:block ape:text-[14px] ape:font-medium", style: { color: 'var(--ape-color-text-disabled-button)' }, children: ["The bonus for the bond you are purchasing has been adjusted by", ' ', jsxs(Text, { style: { color: 'var(--ape-color-error)' }, children: [(zapBonusWithFee - oldBonus).toFixed(2), "%"] }), "."] }), jsxs(Flex, { className: "ape:p-[8px_4px_4px_4px] ape:rounded-[8px] ape:w-full ape:items-center", children: [jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { className: "ape:flex-col ape:ml-[10px]", children: [jsx(Text, { size: "12px", style: { fontWeight: 300, lineHeight: '14px' }, children: "Old Bonus:" }), jsxs(Text, { size: "12px", weight: 400, children: [oldBonus?.toFixed(2), "% ", tokenSymbol] })] })] }), jsx(Flex, { className: "ape:w-[15px] ape:h-[15px] ape:ml-[20px] ape:mr-[10px] ape:items-center", children: jsx(Arrow, { direction: "right" }) }), jsxs(Flex, { className: "ape:items-center", children: [jsx(TokenImage, { size: 30, symbol: tokenSymbol }), jsxs(Flex, { className: "ape:flex-col ape:ml-[10px]", children: [jsx(Text, { size: "12px", style: { fontWeight: 300, lineHeight: '14px' }, children: "New Bonus:" }), jsxs(Text, { size: "12px", weight: 400, children: [zapBonusWithFee.toFixed(2), "% ", tokenSymbol] })] })] })] }), jsx(Estimations, { depositAmount: depositAmount, inputValue: depositAmount, inputTokenPrice: 1, bondData: { ...bond, trueBillPrice: zapTrueBondPrice }, youSpendString: youSpendString, fetchingZapQuote: fetchingZapQuote, zapError: zapError, isZap: true }), jsx(Flex, { className: "ape:w-full ape:text-[14px] ape:font-medium ape:justify-start ape:mb-[10px]", style: { color: 'var(--ape-color-text-disabled-button)' }, children: "Would you like to confirm the new rate?" }), jsx(Button, { fullWidth: true, onClick: onDismiss, disabled: fetchingZapQuote, load: fetchingZapQuote, children: fetchingZapQuote ? 'Loading' : 'Confirm' })] }) }));
 };
 
 export { NewRateModal as default };

package/dist/views/BuyBond/components/NewRateModal/NewRateModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewRateModal.js","sources":["../../../../../src/views/BuyBond/components/NewRateModal/NewRateModal.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondsData } from '../../../../types/bonds'\nimport Estimations from '../Estimations'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { mulDivRound, parseUnits } from '../../../../utils/fixedPoint'\nimport useTierPoints from '../../../../state/tiers/useTierPoints'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport Arrow from '../../../../components/uikit-sdk/Svg/Icons/Arrow'\n\nconst NewRateModal = ({\n  bond,\n  zapTrueBondPrice,\n  depositAmount,\n  youSpendString,\n  fetchingZapQuote,\n  zapError,\n  onDismiss,\n}: {\n  bond?: BondsData\n  zapTrueBondPrice?: string\n  depositAmount: string\n  youSpendString?: string\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  onDismiss?: () => void\n}) => {\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const trueBondPrice = findHighestTrueBondPrice(promotionalPoints, bond?.trueBondPrices)\n\n  const tokenSymbol = bond?.earnToken?.symbol\n  const oldBonus = trueBondPrice?.bonusWithFee ?? 0\n  const fee = bond?.feeInPayout ?? 0\n  const earnTokenPrice = parseFloat(bond?.payoutTokenPrice ?? '0')\n  const lpPrice = parseFloat(bond?.principalTokenPrice ?? '0')\n  const trueBillPriceMinusFee = mulDivRound(\n    BigInt(zapTrueBondPrice ?? '0'),\n    parseUnits(String(100 + fee), 6),\n    parseUnits('100', 6),\n    'halfUp',\n  )\n  const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice\n  const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100\n  const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0\n\n  return (\n    <Modal title=\"Bonus update\" sx={{ width: '380px' }}>\n      <Flex sx={{ width: '100%', alignItems: 'center', flexDirection: 'column', mt: '10px' }}>\n        <Flex sx={{ display: 'block', fontSize: '14px', fontWeight: 500, color: 'textDisabledButton' }}>\n          The bonus for the bond you are purchasing has been adjusted by{' '}\n          <Text sx={{ color: 'error' }}>{(zapBonusWithFee - oldBonus).toFixed(2)}%</Text>.\n        </Flex>\n        <Flex\n          sx={{\n            p: '8px 4px 4px 4px',\n            borderRadius: '8px',\n            width: '100%',\n            alignItems: 'center',\n          }}\n        >\n          <Flex sx={{ alignItems: 'center' }}>\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex sx={{ flexDirection: 'column', ml: '10px' }}>\n              <Text sx={{ fontSize: '12px', fontWeight: '300', lineHeight: '14px' }}>Old Bonus:</Text>\n              <Text sx={{ fontSize: '12px', fontWeight: 400 }}>\n                {oldBonus?.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n          <Flex sx={{ width: '15px', height: '15px', ml: '20px', mr: '10px', alignItems: 'center' }}>\n            <Arrow direction=\"right\" />\n          </Flex>\n          <Flex sx={{ alignItems: 'center' }}>\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex sx={{ flexDirection: 'column', ml: '10px' }}>\n              <Text sx={{ fontSize: '12px', fontWeight: '300', lineHeight: '14px' }}>New Bonus:</Text>\n              <Text sx={{ fontSize: '12px', fontWeight: 400 }}>\n                {zapBonusWithFee.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n        </Flex>\n        <Estimations\n          depositAmount={depositAmount}\n          inputValue={depositAmount} // placeholder value\n          inputTokenPrice={1} // placeholder value\n          bondData={{ ...bond, trueBillPrice: zapTrueBondPrice } as BondsData}\n          youSpendString={youSpendString}\n          fetchingZapQuote={fetchingZapQuote}\n          zapError={zapError}\n          isZap\n        />\n        <Flex\n          sx={{\n            width: '100%',\n            fontSize: '14px',\n            fontWeight: 500,\n            color: 'textDisabledButton',\n            justifyContent: 'flex-start',\n            mb: '10px',\n          }}\n        >\n          Would you like to confirm the new rate?\n        </Flex>\n        <Button fullWidth onClick={onDismiss} disabled={fetchingZapQuote} load={fetchingZapQuote}>\n          {fetchingZapQuote ? 'Loading' : 'Confirm'}\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default NewRateModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"NewRateModal.js","sources":["../../../../../src/views/BuyBond/components/NewRateModal/NewRateModal.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondsData } from '../../../../types/bonds'\nimport Estimations from '../Estimations'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { mulDivRound, parseUnits } from '../../../../utils/fixedPoint'\nimport useTierPoints from '../../../../state/tiers/useTierPoints'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\nimport Arrow from '../../../../components/uikit-sdk/Svg/Icons/Arrow'\n\nconst NewRateModal = ({\n  bond,\n  zapTrueBondPrice,\n  depositAmount,\n  youSpendString,\n  fetchingZapQuote,\n  zapError,\n  onDismiss,\n}: {\n  bond?: BondsData\n  zapTrueBondPrice?: string\n  depositAmount: string\n  youSpendString?: string\n  fetchingZapQuote?: boolean\n  zapError?: boolean\n  onDismiss?: () => void\n}) => {\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const trueBondPrice = findHighestTrueBondPrice(promotionalPoints, bond?.trueBondPrices)\n\n  const tokenSymbol = bond?.earnToken?.symbol\n  const oldBonus = trueBondPrice?.bonusWithFee ?? 0\n  const fee = bond?.feeInPayout ?? 0\n  const earnTokenPrice = parseFloat(bond?.payoutTokenPrice ?? '0')\n  const lpPrice = parseFloat(bond?.principalTokenPrice ?? '0')\n  const trueBillPriceMinusFee = mulDivRound(\n    BigInt(zapTrueBondPrice ?? '0'),\n    parseUnits(String(100 + fee), 6),\n    parseUnits('100', 6),\n    'halfUp',\n  )\n  const priceUSDMinusFee = getBalanceNumber(trueBillPriceMinusFee) * lpPrice\n  const discountWithoutFee = ((earnTokenPrice - priceUSDMinusFee) / earnTokenPrice) * 100\n  const zapBonusWithFee = discountWithoutFee > 0 ? (discountWithoutFee / (100 - discountWithoutFee)) * 100 : 0\n\n  return (\n    <Modal title=\"Bonus update\" className=\"ape:w-[380px]!\">\n      <Flex className=\"ape:w-full ape:items-center ape:flex-col ape:mt-[10px]\">\n        <Flex className=\"ape:block ape:text-[14px] ape:font-medium\" style={{ color: 'var(--ape-color-text-disabled-button)' }}>\n          The bonus for the bond you are purchasing has been adjusted by{' '}\n          <Text style={{ color: 'var(--ape-color-error)' }}>{(zapBonusWithFee - oldBonus).toFixed(2)}%</Text>.\n        </Flex>\n        <Flex className=\"ape:p-[8px_4px_4px_4px] ape:rounded-[8px] ape:w-full ape:items-center\">\n          <Flex className=\"ape:items-center\">\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex className=\"ape:flex-col ape:ml-[10px]\">\n              <Text size=\"12px\" style={{ fontWeight: 300, lineHeight: '14px' }}>\n                Old Bonus:\n              </Text>\n              <Text size=\"12px\" weight={400}>\n                {oldBonus?.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n          <Flex className=\"ape:w-[15px] ape:h-[15px] ape:ml-[20px] ape:mr-[10px] ape:items-center\">\n            <Arrow direction=\"right\" />\n          </Flex>\n          <Flex className=\"ape:items-center\">\n            <TokenImage size={30} symbol={tokenSymbol} />\n            <Flex className=\"ape:flex-col ape:ml-[10px]\">\n              <Text size=\"12px\" style={{ fontWeight: 300, lineHeight: '14px' }}>\n                New Bonus:\n              </Text>\n              <Text size=\"12px\" weight={400}>\n                {zapBonusWithFee.toFixed(2)}% {tokenSymbol}\n              </Text>\n            </Flex>\n          </Flex>\n        </Flex>\n        <Estimations\n          depositAmount={depositAmount}\n          inputValue={depositAmount} // placeholder value\n          inputTokenPrice={1} // placeholder value\n          bondData={{ ...bond, trueBillPrice: zapTrueBondPrice } as BondsData}\n          youSpendString={youSpendString}\n          fetchingZapQuote={fetchingZapQuote}\n          zapError={zapError}\n          isZap\n        />\n        <Flex\n          className=\"ape:w-full ape:text-[14px] ape:font-medium ape:justify-start ape:mb-[10px]\"\n          style={{ color: 'var(--ape-color-text-disabled-button)' }}\n        >\n          Would you like to confirm the new rate?\n        </Flex>\n        <Button fullWidth onClick={onDismiss} disabled={fetchingZapQuote} load={fetchingZapQuote}>\n          {fetchingZapQuote ? 'Loading' : 'Confirm'}\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default NewRateModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,SAAS,GASV,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE;AAC3C,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,IAAI,EAAE;IAC7C,MAAM,aAAa,GAAG,wBAAwB,CAAC,iBAAiB,EAAE,IAAI,EAAE,cAAc,CAAC;AAEvF,IAAA,MAAM,WAAW,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM;AAC3C,IAAA,MAAM,QAAQ,GAAG,aAAa,EAAE,YAAY,IAAI,CAAC;AACjD,IAAA,MAAM,GAAG,GAAG,IAAI,EAAE,WAAW,IAAI,CAAC;IAClC,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,EAAE,gBAAgB,IAAI,GAAG,CAAC;IAChE,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,EAAE,mBAAmB,IAAI,GAAG,CAAC;AAC5D,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,MAAM,CAAC,gBAAgB,IAAI,GAAG,CAAC,EAC/B,UAAU,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,EAChC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,EACpB,QAAQ,CACT;IACD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,GAAG,OAAO;AAC1E,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,cAAc,GAAG,gBAAgB,IAAI,cAAc,IAAI,GAAG;IACvF,MAAM,eAAe,GAAG,kBAAkB,GAAG,CAAC,GAAG,CAAC,kBAAkB,IAAI,GAAG,GAAG,kBAAkB,CAAC,IAAI,GAAG,GAAG,CAAC;AAE5G,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,KAAK,EAAC,cAAc,EAAC,SAAS,EAAC,gBAAgB,EAAA,QAAA,EACpDC,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,wDAAwD,EAAA,QAAA,EAAA,CACtEA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2CAA2C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uCAAuC,EAAE,EAAA,QAAA,EAAA,CAAA,gEAAA,EACpD,GAAG,EAClEA,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAA,QAAA,EAAA,CAAG,CAAC,eAAe,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CAAS,SAC9F,EACPA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EAAA,CACrFA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,aAChCD,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAA,CAAI,EAC7CC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,aAC1CD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAEzD,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAA,QAAA,EAAA,CAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,IAAA,EAAI,WAAW,CAAA,EAAA,CAC/B,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPD,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,EAAA,QAAA,EACtFA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,OAAO,EAAA,CAAG,EAAA,CACtB,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAA,CAAI,EAC7CC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAC1CD,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAEzD,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAA,QAAA,EAAA,CAC1B,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,IAAA,EAAI,WAAW,CAAA,EAAA,CACrC,CAAA,EAAA,CACF,IACF,CAAA,EAAA,CACF,EACPD,GAAA,CAAC,WAAW,IACV,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,aAAa,EACzB,eAAe,EAAE,CAAC,EAClB,QAAQ,EAAE,EAAE,GAAG,IAAI,EAAE,aAAa,EAAE,gBAAgB,EAAe,EACnE,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAA,IAAA,EAAA,CACL,EACFA,IAAC,IAAI,EAAA,EACH,SAAS,EAAC,4EAA4E,EACtF,KAAK,EAAE,EAAE,KAAK,EAAE,uCAAuC,EAAE,EAAA,QAAA,EAAA,yCAAA,EAAA,CAGpD,EACPA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,QAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB,EAAA,QAAA,EACrF,gBAAgB,GAAG,SAAS,GAAG,SAAS,EAAA,CAClC,CAAA,EAAA,CACJ,EAAA,CACD;AAEZ;;;;"}

package/dist/views/BuyBond/components/NoBonusModal/NoBonusModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Modal from '../../../../components/uikit-sdk/Modal/index.js';
@@ -18,7 +18,7 @@ const NoBonusModal = ({ onAcknowledge, showcaseTokenName }) => {
     const handleCheckboxChange = () => {
         setIsChecked(!isChecked);
     };
-    return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row", sx: { flexDirection: 'row', gap: '8px', pb: '20px', cursor: 'pointer' }, onClick: handleCheckboxChange, children: [jsx(Flex, { className: "nobonus-checkbox", children: jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange }) }), jsx(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions", sx: { flexDirection: 'row', gap: '8px' }, children: [jsx(Button, { className: "nobonus-cancel", onClick: handleCancel, sx: { width: '100%', justifyContent: 'center' }, variant: "secondary", children: "Cancel" }), jsx(Button, { className: "nobonus-buy", onClick: handleAcknowledge, disabled: !isChecked, sx: { width: '100%', justifyContent: 'center' }, children: "Buy" })] })] })));
+    return (isOpen && (jsxs(Modal, { className: "nobonus-modal", title: "Warning", onClose: handleAcknowledge, children: [jsxs("p", { children: ["You're buying ", showcaseTokenName, " at a higher price than the market, which will result in receiving fewer tokens compared to swapping via an exchange."] }), jsx("p", { children: "You will not receive any bonus tokens when buying this bond." }), jsxs(Flex, { className: "nobonus-checkbox-row ape:flex-row ape:gap-[8px] ape:pb-[20px] ape:cursor-pointer", onClick: handleCheckboxChange, children: [jsx(Flex, { className: "nobonus-checkbox", children: jsx(Checkbox, { checked: isChecked, onChange: handleCheckboxChange }) }), jsx(Flex, { className: "nobonus-checkbox-text", children: "I understand and want to proceed." })] }), jsxs(Flex, { className: "nobonus-actions ape:flex-row ape:gap-[8px]", children: [jsx(Button, { className: "nobonus-cancel ape:w-full ape:justify-center", onClick: handleCancel, variant: "secondary", children: "Cancel" }), jsx(Button, { className: "nobonus-buy ape:w-full ape:justify-center", onClick: handleAcknowledge, disabled: !isChecked, children: "Buy" })] })] })));
 };
 
 export { NoBonusModal as default };