@ape.swap/bonds-sdk 6.2.13 → 6.2.14

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 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] ape:py-[10px]\">\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 className={`row-container premium-val ape:flex ape:font-normal ape:items-center ${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 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\n          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        />\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 && 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                      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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"}
+{"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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"}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import useTierPoints, { getUserTier, TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints.js';
@@ -7,6 +7,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import BonusTable from '../../../Bonds/components/BonusComponents/BonusTable.js';
 import { getRawBonus, formatUSDNumber } from '../../../../utils/displayHelpers.js';
 import { findHighestTrueBondPriceUserAgnostic } from '../../../../utils/bondPriceHelpers.js';
+import { Box } from 'theme-ui';
 import Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret.js';
 
 const GetUpToComponent = ({ bond, depositAmount }) => {
@@ -21,10 +22,36 @@ const GetUpToComponent = ({ bond, depositAmount }) => {
     //State
     const [isOpen, setIsOpen] = useState(false);
     return (userTier !== LaunchBondTiers.Mythical &&
-        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { className: "ape:w-full ape:mt-[10px] ape:text-[12px] ape:font-normal ape:flex-col ape:relative", children: [jsxs(Flex, { onClick: () => setIsOpen(!isOpen), className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[20px] ape:py-[2px] ape:items-center ape:cursor-pointer ape:justify-between", style: { background: '#312341' }, children: [jsxs(Flex, { className: "ape:items-center", children: [jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsxs("div", { children: ["Get up to", jsx("span", { className: "ape:text-success ape:mx-[3px] ape:font-bold", children: `+${trueBondPrice?.boost ?? 0}%` }), "Boost.", jsx("span", { className: "ape:ml-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:hidden ape:lg:inline", onClick: (e) => {
+        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { sx: {
+            width: '100%',
+            mt: '10px',
+            fontSize: '12px',
+            fontWeight: 400,
+            flexDirection: 'column',
+            position: 'relative',
+        }, children: [jsxs(Flex, { onClick: () => setIsOpen(!isOpen), sx: {
+                    border: '1px solid #9960C5',
+                    borderRadius: 'normal',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    pl: '10px',
+                    pr: '20px',
+                    py: '2px',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    justifyContent: 'space-between',
+                    background: '#312341',
+                }, children: [jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsxs(Box, { children: ["Get up to", jsx("span", { sx: { color: 'success', mx: '3px', fontWeight: 700 }, children: `+${trueBondPrice?.boost ?? 0}%` }), "Boost.", jsx("span", { sx: {
+                                            ml: '5px',
+                                            color: 'primaryButton',
+                                            fontWeight: 500,
+                                            cursor: 'pointer',
+                                            ':hover': { textDecoration: 'underline' },
+                                            display: ['none', 'none', 'none', 'inline'],
+                                        }, onClick: (e) => {
                                             e.stopPropagation();
                                             window.open('https://www.ape.bond/true-yield?createPosition', '_blank');
-                                        }, children: 'By locking ABOND >' })] })] }), !!depositAmount && parseFloat(depositAmount) !== 0 && (jsxs(Flex, { className: "ape:text-success ape:font-bold ape:min-w-[65px] ape:justify-end", children: ["$ ", formatUSDNumber(boostAmount.toString())] })), jsx(Flex, { className: "ape:absolute ape:right-[6px]", children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, className: "ape:overflow-hidden ape:w-full ape:mt-[5px] ape:cursor-pointer", onClick: (e) => {
+                                        }, children: 'By locking ABOND >' })] })] }), !!depositAmount && parseFloat(depositAmount) !== 0 && (jsxs(Flex, { sx: { color: 'success', fontWeight: 700, minWidth: '65px', justifyContent: 'flex-end' }, children: ["$ ", formatUSDNumber(boostAmount.toString())] })), jsx(Flex, { sx: { position: 'absolute', right: '6px' }, children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%', marginTop: '5px', cursor: 'pointer' }, onClick: (e) => {
                         e.stopPropagation();
                         window.open('https://www.ape.bond/true-yield?createPosition', '_blank');
                     }, children: jsx(BonusTable, { trueBondPrices: bond?.trueBondPrices, minTier: bond.minTier, hideTitle: true }) })) })] })));

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

@@ -1 +1 @@
-{"version":3,"file":"GetUpToComponent.js","sources":["../../../../../src/views/BuyBond/components/GetUpToComponent/GetUpToComponent.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, { getUserTier, TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport BonusTable from '../../../Bonds/components/BonusComponents/BonusTable'\nimport { formatUSDNumber, getRawBonus } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPriceUserAgnostic } from '../../../../utils/bondPriceHelpers'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  depositAmount: string\n}\n\nconst GetUpToComponent: React.FC<GetUpToComponentProps> = ({ bond, depositAmount }) => {\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints)\n  const bonusString = getRawBonus(bond, depositAmount, TIERS_WEIGHT[LaunchBondTiers.Mythical])\n  const noTierAmount = getRawBonus(bond, depositAmount, '0')\n  const boostAmount = parseFloat(bonusString) - parseFloat(noTierAmount)\n  const trueBondPrice = findHighestTrueBondPriceUserAgnostic(bond)\n\n  //State\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    userTier !== LaunchBondTiers.Mythical &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex className=\"ape:w-full ape:mt-[10px] ape:text-[12px] ape:font-normal ape:flex-col ape:relative\">\n        <Flex\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[20px] ape:py-[2px] ape:items-center ape:cursor-pointer ape:justify-between\"\n          style={{ background: '#312341' }}\n        >\n          <Flex className=\"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            <div>\n              Get up to\n              <span className=\"ape:text-success ape:mx-[3px] ape:font-bold\">{`+${trueBondPrice?.boost ?? 0}%`}</span>\n              Boost.\n              <span\n                className=\"ape:ml-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:hidden ape:lg:inline\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  window.open('https://www.ape.bond/true-yield?createPosition', '_blank')\n                }}\n              >\n                {'By locking ABOND >'}\n              </span>\n            </div>\n          </Flex>\n          {!!depositAmount && parseFloat(depositAmount) !== 0 && (\n            <Flex className=\"ape:text-success ape:font-bold ape:min-w-[65px] ape:justify-end\">\n              $ {formatUSDNumber(boostAmount.toString())}\n            </Flex>\n          )}\n          <Flex className=\"ape:absolute ape:right-[6px]\">\n            <Caret direction={isOpen ? 'up' : 'down'} />\n          </Flex>\n        </Flex>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              className=\"ape:overflow-hidden ape:w-full ape:mt-[5px] ape:cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation()\n                window.open('https://www.ape.bond/true-yield?createPosition', '_blank')\n              }}\n            >\n              <BonusTable trueBondPrices={bond?.trueBondPrices} minTier={bond.minTier} hideTitle />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default GetUpToComponent\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"GetUpToComponent.js","sources":["../../../../../src/views/BuyBond/components/GetUpToComponent/GetUpToComponent.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, { getUserTier, TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport BonusTable from '../../../Bonds/components/BonusComponents/BonusTable'\nimport { formatUSDNumber, getRawBonus } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPriceUserAgnostic } from '../../../../utils/bondPriceHelpers'\nimport { Box } from 'theme-ui'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  depositAmount: string\n}\n\nconst GetUpToComponent: React.FC<GetUpToComponentProps> = ({ bond, depositAmount }) => {\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const userTier = getUserTier(promotionalPoints)\n  const bonusString = getRawBonus(bond, depositAmount, TIERS_WEIGHT[LaunchBondTiers.Mythical])\n  const noTierAmount = getRawBonus(bond, depositAmount, '0')\n  const boostAmount = parseFloat(bonusString) - parseFloat(noTierAmount)\n  const trueBondPrice = findHighestTrueBondPriceUserAgnostic(bond)\n\n  //State\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    userTier !== LaunchBondTiers.Mythical &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex\n        sx={{\n          width: '100%',\n          mt: '10px',\n          fontSize: '12px',\n          fontWeight: 400,\n          flexDirection: 'column',\n          position: 'relative',\n        }}\n      >\n        <Flex\n          onClick={() => setIsOpen(!isOpen)}\n          sx={{\n            border: '1px solid #9960C5',\n            borderRadius: 'normal',\n            position: 'relative',\n            overflow: 'hidden',\n            pl: '10px',\n            pr: '20px',\n            py: '2px',\n            alignItems: 'center',\n            cursor: 'pointer',\n            justifyContent: 'space-between',\n            background: '#312341',\n          }}\n        >\n          <Flex sx={{ 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            <Box>\n              Get up to\n              <span sx={{ color: 'success', mx: '3px', fontWeight: 700 }}>{`+${trueBondPrice?.boost ?? 0}%`}</span>\n              Boost.\n              <span\n                sx={{\n                  ml: '5px',\n                  color: 'primaryButton',\n                  fontWeight: 500,\n                  cursor: 'pointer',\n                  ':hover': { textDecoration: 'underline' },\n                  display: ['none', 'none', 'none', 'inline'],\n                }}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  window.open('https://www.ape.bond/true-yield?createPosition', '_blank')\n                }}\n              >\n                {'By locking ABOND >'}\n              </span>\n            </Box>\n          </Flex>\n          {!!depositAmount && parseFloat(depositAmount) !== 0 && (\n            <Flex sx={{ color: 'success', fontWeight: 700, minWidth: '65px', justifyContent: 'flex-end' }}>\n              $ {formatUSDNumber(boostAmount.toString())}\n            </Flex>\n          )}\n          <Flex sx={{ position: 'absolute', right: '6px' }}>\n            <Caret direction={isOpen ? 'up' : 'down'} />\n          </Flex>\n        </Flex>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              sx={{ overflow: 'hidden', width: '100%', marginTop: '5px', cursor: 'pointer' }}\n              onClick={(e) => {\n                e.stopPropagation()\n                window.open('https://www.ape.bond/true-yield?createPosition', '_blank')\n              }}\n            >\n              <BonusTable trueBondPrices={bond?.trueBondPrices} minTier={bond.minTier} hideTitle />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default GetUpToComponent\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const L1XIframe: ({ onDismiss }: {
+    onDismiss?: () => void;
+}) => React.JSX.Element;
+export default L1XIframe;

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'theme-ui/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, { sx: { height: '580px', width: '500px', p: '0px' }, children: [jsxs(ModalHeader, { sx: { p: '15px 20px 5px 20px', fontSize: '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: 'calc(100% - 66px)', 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 sx={{ height: '580px', width: '500px', p: '0px' }}>\n      <ModalHeader sx={{ p: '15px 20px 5px 20px', fontSize: '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: 'calc(100% - 66px)', 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,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACtDA,IAAA,CAAC,WAAW,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC3D,CAAA,qBAAA,CAAuB,EACxBC,GAAA,CAAC,UAAU,IAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAC,OAAO,EAAE,SAAS,GAAI,CAAA,EAAA,CACtE,EACdA,gBACE,GAAG,EAAC,6BAA6B,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAA,CAC7F,CAAA,EAAA,CACI;AAEZ;;;;"}

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

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

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'theme-ui/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,7 +24,19 @@ 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", 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' })] }) }));
+    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' })] }) }));
 };
 
 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\" 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":"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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\" 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":";;;;;;;;;;;;;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;IAE5G,QACEA,IAAC,KAAK,EAAA,EAAC,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EAChDC,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CACpFA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,oBAAoB,EAAE,+EAC7B,GAAG,EAClEA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,CAAG,CAAC,eAAe,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,EAAA,GAAA,CAAA,EAAA,CAC1E,EACPA,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wBAAA,CAAC,EAAE,iBAAiB;AACpB,wBAAA,YAAY,EAAE,KAAK;AACnB,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,UAAU,EAAE,QAAQ;AACrB,qBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAA,CAAI,EAC7CC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC/CD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAAmB,EACxFC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,CAC5C,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,EAAA,IAAA,EAAI,WAAW,CAAA,EAAA,CAC/B,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACvFA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,OAAO,EAAA,CAAG,EAAA,CACtB,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAA,CAAI,EAC7CC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC/CD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAAmB,EACxFC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,CAC5C,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,IAAA,EAAI,WAAW,CAAA,EAAA,CACrC,CAAA,EAAA,CACF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPD,GAAA,CAAC,WAAW,EAAA,EACV,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,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,QAAQ,EAAE,MAAM;AAChB,wBAAA,UAAU,EAAE,GAAG;AACf,wBAAA,KAAK,EAAE,oBAAoB;AAC3B,wBAAA,cAAc,EAAE,YAAY;AAC5B,wBAAA,EAAE,EAAE,MAAM;AACX,qBAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,CAGI,EACPA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAA,IAAA,EAAC,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 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/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 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" })] })] })));
+    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" })] })] })));
 };
 
 export { NoBonusModal as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NoBonusModal.js","sources":["../../../../../src/views/BuyBond/components/NoBonusModal/NoBonusModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\ninterface NoBonusModalProps {\n  showcaseTokenName?: string\n  onAcknowledge: () => void\n}\n\nconst NoBonusModal: React.FC<NoBonusModalProps> = ({ onAcknowledge, showcaseTokenName }) => {\n  const [isOpen, setIsOpen] = useState(true)\n  const [isChecked, setIsChecked] = useState(false)\n\n  const handleAcknowledge = () => {\n    onAcknowledge()\n    setIsOpen(false)\n  }\n\n  const handleCancel = () => {\n    setIsOpen(false)\n  }\n\n  const handleCheckboxChange = () => {\n    setIsChecked(!isChecked)\n  }\n\n  return (\n    isOpen && (\n      <Modal className=\"nobonus-modal\" title=\"Warning\" onClose={handleAcknowledge}>\n        <p>\n          You&#39;re buying {showcaseTokenName} at a higher price than the market, which will result in receiving fewer\n          tokens compared to swapping via an exchange.\n        </p>\n        <p>You will not receive any bonus tokens when buying this bond.</p>\n        <Flex\n          className=\"nobonus-checkbox-row ape:flex-row ape:gap-[8px] ape:pb-[20px] ape:cursor-pointer\"\n          onClick={handleCheckboxChange}\n        >\n          <Flex className=\"nobonus-checkbox\">\n            <Checkbox checked={isChecked} onChange={handleCheckboxChange} />\n          </Flex>\n          <Flex className=\"nobonus-checkbox-text\">I understand and want to proceed.</Flex>\n        </Flex>\n        <Flex className=\"nobonus-actions ape:flex-row ape:gap-[8px]\">\n          <Button\n            className=\"nobonus-cancel ape:w-full ape:justify-center\"\n            onClick={handleCancel}\n            variant=\"secondary\"\n          >\n            Cancel\n          </Button>\n          <Button\n            className=\"nobonus-buy ape:w-full ape:justify-center\"\n            onClick={handleAcknowledge}\n            disabled={!isChecked}\n          >\n            Buy\n          </Button>\n        </Flex>\n      </Modal>\n    )\n  )\n}\n\nexport default NoBonusModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAgC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAI;IACzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEjD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,aAAa,EAAE;QACf,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACxB,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,oBAAoB,GAAG,MAAK;AAChC,QAAA,YAAY,CAAC,CAAC,SAAS,CAAC;AAC1B,IAAA,CAAC;IAED,QACE,MAAM,KACJA,IAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAAA,CACzEA,yCACqB,iBAAiB,EAAA,uHAAA,CAAA,EAAA,CAElC,EACJC,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,CAAmE,EACnED,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kFAAkF,EAC5F,OAAO,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAE7BC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,GAAA,CAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAA,CAAI,GAC3D,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAyC,CAAA,EAAA,CAC3E,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CAC1DC,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,8CAA8C,EACxD,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,QAAA,EAAA,CAGZ,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,SAAS,oBAGb,CAAA,EAAA,CACJ,CAAA,EAAA,CACD,CACT;AAEL;;;;"}
+{"version":3,"file":"NoBonusModal.js","sources":["../../../../../src/views/BuyBond/components/NoBonusModal/NoBonusModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Checkbox from '../../../../components/uikit-sdk/Checkbox'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\ninterface NoBonusModalProps {\n  showcaseTokenName?: string\n  onAcknowledge: () => void\n}\n\nconst NoBonusModal: React.FC<NoBonusModalProps> = ({ onAcknowledge, showcaseTokenName }) => {\n  const [isOpen, setIsOpen] = useState(true)\n  const [isChecked, setIsChecked] = useState(false)\n\n  const handleAcknowledge = () => {\n    onAcknowledge()\n    setIsOpen(false)\n  }\n\n  const handleCancel = () => {\n    setIsOpen(false)\n  }\n\n  const handleCheckboxChange = () => {\n    setIsChecked(!isChecked)\n  }\n\n  return (\n    isOpen && (\n      <Modal className=\"nobonus-modal\" title=\"Warning\" onClose={handleAcknowledge}>\n        <p>\n          You&#39;re buying {showcaseTokenName} at a higher price than the market, which will result in receiving fewer\n          tokens compared to swapping via an exchange.\n        </p>\n        <p>You will not receive any bonus tokens when buying this bond.</p>\n        <Flex\n          className=\"nobonus-checkbox-row\"\n          sx={{ flexDirection: 'row', gap: '8px', pb: '20px', cursor: 'pointer' }}\n          onClick={handleCheckboxChange}\n        >\n          <Flex className=\"nobonus-checkbox\">\n            <Checkbox checked={isChecked} onChange={handleCheckboxChange} />\n          </Flex>\n          <Flex className=\"nobonus-checkbox-text\">I understand and want to proceed.</Flex>\n        </Flex>\n        <Flex className=\"nobonus-actions\" sx={{ flexDirection: 'row', gap: '8px' }}>\n          <Button\n            className=\"nobonus-cancel\"\n            onClick={handleCancel}\n            sx={{ width: '100%', justifyContent: 'center' }}\n            variant=\"secondary\"\n          >\n            Cancel\n          </Button>\n          <Button\n            className=\"nobonus-buy\"\n            onClick={handleAcknowledge}\n            disabled={!isChecked}\n            sx={{ width: '100%', justifyContent: 'center' }}\n          >\n            Buy\n          </Button>\n        </Flex>\n      </Modal>\n    )\n  )\n}\n\nexport default NoBonusModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,YAAY,GAAgC,CAAC,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAI;IACzF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEjD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,aAAa,EAAE;QACf,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACxB,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;IAED,MAAM,oBAAoB,GAAG,MAAK;AAChC,QAAA,YAAY,CAAC,CAAC,SAAS,CAAC;AAC1B,IAAA,CAAC;AAED,IAAA,QACE,MAAM,KACJA,IAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,iBAAiB,EAAA,QAAA,EAAA,CACzEA,IAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,EACqB,iBAAiB,6HAElC,EACJC,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,8DAAA,EAAA,CAAmE,EACnED,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,sBAAsB,EAChC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EACvE,OAAO,EAAE,oBAAoB,aAE7BC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChCA,IAAC,QAAQ,EAAA,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,GAAI,EAAA,CAC3D,EACPA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,mCAAA,EAAA,CAAyC,CAAA,EAAA,CAC3E,EACPD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACxEC,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,YAAY,EACrB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAC/C,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,QAAA,EAAA,CAGZ,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,SAAS,EACpB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGxC,IACJ,CAAA,EAAA,CACD,CACT;AAEL;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import useTierPoints, { getUserTier, TIERS_COLORS } from '../../../../state/tiers/useTierPoints.js';
@@ -16,10 +16,6 @@ const getUpgradeNowAmountUsd = (amountUsd) => {
     const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'));
     return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'));
 };
-// mobile-only "Upgrade now" link (visible < lg, replaced by the desktop version below)
-const upgradeNowInlineClasses = 'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:inline ape:lg:hidden';
-// desktop-only "Upgrade now" link (visible >= lg)
-const upgradeNowFlexClasses = 'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:hidden ape:lg:flex';
 const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDecimals, inputTokenPrice, }) => {
     const [isOpen, setIsOpen] = useState(false);
     // Hooks & Data
@@ -59,16 +55,95 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
         handleTierSelection(nextTierData.minBreakevenWithFeeUSD);
     };
     return (userTier !== LaunchBondTiers.Legend &&
-        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { className: "ape:w-full ape:mt-[10px] ape:text-[12px] ape:font-normal ape:flex-col ape:relative", style: { cursor: !highestProfitableTier ? 'pointer' : undefined }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier && (jsxs(Flex, { className: "ape:border ape:border-solid ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[10px] ape:lg:pr-[20px] ape:py-[6px] ape:min-h-[27px] ape:items-center ape:gap-[5px] ape:flex-wrap", style: {
-                    borderColor: 'rgba(22, 101, 52, 0.53)',
-                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%)',
+        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { sx: {
+            width: '100%',
+            mt: '10px',
+            fontSize: '12px',
+            fontWeight: 400,
+            flexDirection: 'column',
+            position: 'relative',
+            cursor: !highestProfitableTier && 'pointer',
+        }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier && (jsxs(Flex, { sx: {
+                    border: '1px solid rgba(22, 101, 52, 0.53)',
+                    borderRadius: 'normal',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    pl: '10px',
+                    pr: ['10px', '10px', '10px', '20px'],
+                    py: '6px',
+                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',
                     color: 'rgba(134, 237, 171, 0.70)',
-                }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-sub ape:mr-[4px]", children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { className: "ape:font-bold", children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { className: "ape:font-bold", style: { color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { className: "ape:font-bold", children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })), shouldRenderNextTierRow && !highestProfitableTier && (jsxs(Flex, { onClick: handleToggleOpen, className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[15px] ape:py-[2px] ape:items-center ape:justify-between ape:min-w-[120px]", style: { background: '#312341', marginTop: highestProfitableTier ? '3px' : '0px' }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-bottom", children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[nextTierData?.tier] }, children: nextTierData?.tierName }), "Tier.", jsx("span", { className: upgradeNowInlineClasses, onClick: (e) => handleUpgradeNowClick(e), children: `Upgrade now >` })] }), jsx("span", { className: upgradeNowFlexClasses, onClick: (e) => handleUpgradeNowClick(e), children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { className: "ape:inline-flex ape:items-center", onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })), jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, className: "ape:overflow-hidden ape:w-full ape:mt-[3px] ape:cursor-pointer", children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
-                        return (jsxs(Flex, { className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[20px] ape:py-[2px] ape:items-center ape:justify-between", style: { background: '#312341', marginTop: index === 0 ? '0px' : '3px' }, onClick: handleToggleOpen, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-bottom", children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[data?.tier] }, children: data?.tierName }), "Tier.", jsx("span", { className: `${upgradeNowInlineClasses} ape:mr-[15px]!`, onClick: (e) => {
+                    minHeight: '27px',
+                    alignItems: 'center',
+                    gap: '5px',
+                    flexWrap: 'wrap',
+                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }, children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { sx: { fontWeight: 700 }, children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { sx: { fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { sx: { fontWeight: 700 }, children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })), shouldRenderNextTierRow && !highestProfitableTier && (jsxs(Flex, { onClick: handleToggleOpen, sx: {
+                    border: '1px solid #9960C5',
+                    borderRadius: 'normal',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    pl: '10px',
+                    pr: '15px',
+                    py: '2px',
+                    mt: highestProfitableTier ? '3px' : '0px',
+                    alignItems: 'center',
+                    background: '#312341',
+                    justifyContent: 'space-between',
+                    minWidth: '120px',
+                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }, children: nextTierData?.tierName }), "Tier.", jsx("span", { sx: {
+                                    ml: '5px',
+                                    mr: '5px',
+                                    color: 'primaryButton',
+                                    fontWeight: 500,
+                                    cursor: 'pointer',
+                                    ':hover': { textDecoration: 'underline' },
+                                    display: ['inline', 'inline', 'inline', 'none'],
+                                }, onClick: (e) => {
+                                    handleUpgradeNowClick(e);
+                                }, children: `Upgrade now >` })] }), jsx("span", { sx: {
+                            ml: '5px',
+                            mr: '5px',
+                            color: 'primaryButton',
+                            fontWeight: 500,
+                            cursor: 'pointer',
+                            ':hover': { textDecoration: 'underline' },
+                            display: ['none', 'none', 'none', 'flex'],
+                        }, onClick: (e) => {
+                            handleUpgradeNowClick(e);
+                        }, children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { sx: { display: 'inline-flex', alignItems: 'center' }, onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })), jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }, children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
+                        return (jsxs(Flex, { sx: {
+                                border: '1px solid #9960C5',
+                                borderRadius: 'normal',
+                                position: 'relative',
+                                overflow: 'hidden',
+                                pl: '10px',
+                                pr: '20px',
+                                py: '2px',
+                                mt: index === 0 ? '0px' : '3px',
+                                alignItems: 'center',
+                                background: '#312341',
+                                justifyContent: 'space-between',
+                            }, onClick: handleToggleOpen, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }, children: data?.tierName }), "Tier.", jsx("span", { sx: {
+                                                ml: '5px',
+                                                mr: '15px',
+                                                color: 'primaryButton',
+                                                fontWeight: 500,
+                                                cursor: 'pointer',
+                                                ':hover': { textDecoration: 'underline' },
+                                                display: ['inline', 'inline', 'inline', 'none'],
+                                            }, onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
                                                 setIsOpen(false);
-                                            }, children: `Upgrade now >` })] }), jsx("span", { className: `${upgradeNowFlexClasses} ape:min-w-[100px]`, onClick: (e) => {
+                                            }, children: `Upgrade now >` })] }), jsx("span", { sx: {
+                                        ml: '5px',
+                                        color: 'primaryButton',
+                                        fontWeight: 500,
+                                        cursor: 'pointer',
+                                        ':hover': { textDecoration: 'underline' },
+                                        display: ['none', 'none', 'none', 'flex'],
+                                        minWidth: '100px',
+                                    }, onClick: (e) => {
                                         e.stopPropagation();
                                         handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
                                         setIsOpen(false);