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

package/dist/views/BuyBond/ParticipationSuccessful.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipationSuccessful.js","sources":["../../../src/views/BuyBond/ParticipationSuccessful.tsx"],"sourcesContent":["import React from 'react'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport { getFirstNonZeroDigits } from '../../utils/roundNumber'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport { BondsData } from '../../types/bonds'\nimport useActiveView from '../../state/activeView'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst ParticipationSuccessful = ({\n  onDismiss,\n  bond,\n  inputAmount,\n}: {\n  onDismiss?: () => void\n  bond: BondsData\n  inputAmount?: string\n}) => {\n  const { handleToogle } = useActiveView()\n  const { data: tokenPrices } = useTokenPrices()\n  const principalTokenPrice = tokenPrices?.[bond?.chainId]?.find(\n    (token) => token?.tokenAddress?.toLowerCase() === bond?.lpToken?.address[bond?.chainId]?.toLowerCase(),\n  )?.price\n  const inputValue = parseFloat(inputAmount ?? '0')\n  const depositAmountUsd = inputValue * (principalTokenPrice ?? 0)\n  const initPrice = bond?.initPrice ?? 0\n  const initialRelease = bond?.initialRelease ?? 0\n\n  const userAllocation = depositAmountUsd / initPrice\n  const userAllocationUsd = userAllocation * initPrice\n  const userYield = userAllocationUsd * ((bond.yieldData?.apr ?? 0) / 100)\n\n  const finishTime = (bond?.redeemTime ?? 0) * 1000\n  const finishDate = new Date(finishTime)\n  const month = finishDate.toLocaleDateString('en-US', { month: 'short' })\n  const getDayWithSuffix = (day: number) => {\n    if (day > 3 && day < 21) return `${day}th`\n    switch (day % 10) {\n      case 1:\n        return `${day}st`\n      case 2:\n        return `${day}nd`\n      case 3:\n        return `${day}rd`\n      default:\n        return `${day}th`\n    }\n  }\n  const day = finishDate.getDate()\n  const formattedFinishDate = `${month} ${getDayWithSuffix(day)} at 13 UTC.` //TODO fix this\n  const initialReleaseAmount = userAllocation * initialRelease\n  const initialReleaseUsd = initialReleaseAmount * (bond?.initPrice ?? 0)\n\n  const vestedAmount = userAllocation * (1 - initialRelease)\n  const vestedAmountUsd = vestedAmount * (bond?.initPrice ?? 0)\n\n  return (\n    <Modal>\n      <ModalHeader hideDivider />\n      <Flex sx={{ flexDirection: 'column' }}>\n        <Flex sx={{ width: '100%', justifyContent: 'center', mb: '15px' }}>\n          <Text sx={{ fontSize: '22px', fontWeight: 700 }}>Participation Successful</Text>\n        </Flex>\n        <Flex\n          sx={{\n            fontSize: '14px',\n            fontWeight: 400,\n            flexDirection: 'column',\n          }}\n        >\n          <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n            <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>Your Deposit</Flex>\n            <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>\n              {formatNumberSI(inputValue)} {bond?.lpToken.symbol}\n              <Flex sx={{ color: 'textDisabledButton', ml: '5px' }}>(${formatNumberSI(depositAmountUsd)})</Flex>\n            </Flex>\n          </Flex>\n          <Flex sx={{ width: '100%', justifyContent: 'space-between', mt: '5px' }}>\n            <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>\n              {bond.yieldBond ? 'Initial Release' : 'Your Allocation'}\n            </Flex>\n            {bond.yieldBond ? (\n              <Flex\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 500,\n                }}\n              >\n                <Flex sx={{ color: 'textDisabledButton', ml: '5px' }}>\n                  ${formatNumberSI(userAllocationUsd)} in {bond?.underlyingEarnToken?.symbol}\n                </Flex>\n              </Flex>\n            ) : (\n              <Flex\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 500,\n                }}\n              >\n                {formatNumberSI(userAllocation)} {bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol}\n                <Flex sx={{ color: 'textDisabledButton', ml: '5px' }}>(${userAllocationUsd.toFixed(2)})</Flex>\n              </Flex>\n            )}\n          </Flex>\n          {bond.yieldBond && (\n            <Flex sx={{ width: '100%', justifyContent: 'space-between', mt: '5px' }}>\n              <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>Yield Bonus</Flex>\n              <Flex\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 500,\n                }}\n              >\n                <Flex sx={{ color: 'textDisabledButton', ml: '5px' }}>\n                  ${formatNumberSI(userYield)} in {bond?.underlyingEarnToken?.symbol} (over{' '}\n                  {\n                    getTimePeriods(\n                      (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                      true,\n                    ).days\n                  }{' '}\n                  days)\n                </Flex>\n              </Flex>\n            </Flex>\n          )}\n          {!bond.yieldBond && (\n            <Flex sx={{ width: '100%', justifyContent: 'space-between', mt: '5px' }}>\n              <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>\n                Initial Release\n                <TooltipBubble\n                  placement={'bottomLeft'}\n                  transformTip={'translate(-6%, 0%)'}\n                  width=\"250px\"\n                  body={\n                    <Flex sx={{ justifyContent: 'center' }}>\n                      {`You'll be able to claim an initial release of ${initialRelease * 100}% \n                    of your allocation on ${formattedFinishDate}`}\n                    </Flex>\n                  }\n                >\n                  <Flex sx={{ alignItems: 'center', height: '100%', ml: '5px' }}>\n                    <QuestionCircle width=\"12px\" />\n                  </Flex>\n                </TooltipBubble>\n              </Flex>\n              <Flex\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 500,\n                }}\n              >\n                {getFirstNonZeroDigits(initialReleaseAmount, 2)}{' '}\n                {bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol}\n                <Flex\n                  sx={{\n                    color: 'textDisabledButton',\n                    ml: '5px',\n                  }}\n                >\n                  (${initialReleaseUsd.toFixed(2)})\n                </Flex>\n              </Flex>\n            </Flex>\n          )}\n          {initialRelease !== 1 && (\n            <Flex sx={{ width: '100%', justifyContent: 'space-between', mt: '5px' }}>\n              <Flex sx={{ fontSize: '12px', fontWeight: 400 }}>\n                Vested Tokens\n                <TooltipBubble\n                  placement={'bottomLeft'}\n                  transformTip={'translate(-6%, 0%)'}\n                  width=\"250px\"\n                  body={\n                    <Flex sx={{ justifyContent: 'center' }}>\n                      {`Remaining tokens will vest linearly over ${getTimePeriods(bond.vestingTerm).months} months after claiming the initial release.`}\n                    </Flex>\n                  }\n                >\n                  <Flex sx={{ alignItems: 'center', height: '100%', ml: '5px' }}>\n                    <QuestionCircle width=\"12px\" />\n                  </Flex>\n                </TooltipBubble>\n              </Flex>\n              <Flex\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 500,\n                }}\n              >\n                {getFirstNonZeroDigits(vestedAmount, 2)} {bond?.earnToken.symbol}\n                <Flex sx={{ color: 'textDisabledButton', ml: '5px' }}>(${vestedAmountUsd.toFixed(2)})</Flex>\n              </Flex>\n            </Flex>\n          )}\n          <Flex sx={{ mt: '10px' }}>{`Your purchased bond can be found under the \"Your Bonds\" tab.`}</Flex>\n        </Flex>\n        <Button\n          onClick={() => {\n            handleToogle('Your Bonds')\n            onDismiss?.()\n          }}\n          sx={{ fontSize: '14px', width: '100%', mt: '15px', height: '35px' }}\n        >\n          see your Bonds\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default ParticipationSuccessful\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ParticipationSuccessful.js","sources":["../../../src/views/BuyBond/ParticipationSuccessful.tsx"],"sourcesContent":["import React from 'react'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport { getFirstNonZeroDigits } from '../../utils/roundNumber'\nimport { getTimePeriods } from '../../utils/getTimePeriods'\nimport { BondsData } from '../../types/bonds'\nimport useActiveView from '../../state/activeView'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst rowClasses = 'ape:w-full ape:justify-between ape:mt-[5px]'\nconst labelClasses = 'ape:text-[12px] ape:font-normal'\nconst valueClasses = 'ape:text-[12px] ape:font-medium'\nconst subValueClasses = 'ape:text-text-disabled-button ape:ml-[5px]'\n\nconst ParticipationSuccessful = ({\n  onDismiss,\n  bond,\n  inputAmount,\n}: {\n  onDismiss?: () => void\n  bond: BondsData\n  inputAmount?: string\n}) => {\n  const { handleToogle } = useActiveView()\n  const { data: tokenPrices } = useTokenPrices()\n  const principalTokenPrice = tokenPrices?.[bond?.chainId]?.find(\n    (token) => token?.tokenAddress?.toLowerCase() === bond?.lpToken?.address[bond?.chainId]?.toLowerCase(),\n  )?.price\n  const inputValue = parseFloat(inputAmount ?? '0')\n  const depositAmountUsd = inputValue * (principalTokenPrice ?? 0)\n  const initPrice = bond?.initPrice ?? 0\n  const initialRelease = bond?.initialRelease ?? 0\n\n  const userAllocation = depositAmountUsd / initPrice\n  const userAllocationUsd = userAllocation * initPrice\n  const userYield = userAllocationUsd * ((bond.yieldData?.apr ?? 0) / 100)\n\n  const finishTime = (bond?.redeemTime ?? 0) * 1000\n  const finishDate = new Date(finishTime)\n  const month = finishDate.toLocaleDateString('en-US', { month: 'short' })\n  const getDayWithSuffix = (day: number) => {\n    if (day > 3 && day < 21) return `${day}th`\n    switch (day % 10) {\n      case 1:\n        return `${day}st`\n      case 2:\n        return `${day}nd`\n      case 3:\n        return `${day}rd`\n      default:\n        return `${day}th`\n    }\n  }\n  const day = finishDate.getDate()\n  const formattedFinishDate = `${month} ${getDayWithSuffix(day)} at 13 UTC.` //TODO fix this\n  const initialReleaseAmount = userAllocation * initialRelease\n  const initialReleaseUsd = initialReleaseAmount * (bond?.initPrice ?? 0)\n\n  const vestedAmount = userAllocation * (1 - initialRelease)\n  const vestedAmountUsd = vestedAmount * (bond?.initPrice ?? 0)\n\n  return (\n    <Modal>\n      <ModalHeader hideDivider />\n      <Flex className=\"ape:flex-col\">\n        <Flex className=\"ape:w-full ape:justify-center ape:mb-[15px]\">\n          <Text size=\"22px\" weight={700}>\n            Participation Successful\n          </Text>\n        </Flex>\n        <Flex className=\"ape:text-[14px] ape:font-normal ape:flex-col\">\n          <Flex className=\"ape:w-full ape:justify-between\">\n            <Flex className={labelClasses}>Your Deposit</Flex>\n            <Flex className={labelClasses}>\n              {formatNumberSI(inputValue)} {bond?.lpToken.symbol}\n              <Flex className={subValueClasses}>(${formatNumberSI(depositAmountUsd)})</Flex>\n            </Flex>\n          </Flex>\n          <Flex className={rowClasses}>\n            <Flex className={labelClasses}>{bond.yieldBond ? 'Initial Release' : 'Your Allocation'}</Flex>\n            {bond.yieldBond ? (\n              <Flex className={valueClasses}>\n                <Flex className={subValueClasses}>\n                  ${formatNumberSI(userAllocationUsd)} in {bond?.underlyingEarnToken?.symbol}\n                </Flex>\n              </Flex>\n            ) : (\n              <Flex className={valueClasses}>\n                {formatNumberSI(userAllocation)} {bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol}\n                <Flex className={subValueClasses}>(${userAllocationUsd.toFixed(2)})</Flex>\n              </Flex>\n            )}\n          </Flex>\n          {bond.yieldBond && (\n            <Flex className={rowClasses}>\n              <Flex className={labelClasses}>Yield Bonus</Flex>\n              <Flex className={valueClasses}>\n                <Flex className={subValueClasses}>\n                  ${formatNumberSI(userYield)} in {bond?.underlyingEarnToken?.symbol} (over{' '}\n                  {\n                    getTimePeriods(\n                      (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                      true,\n                    ).days\n                  }{' '}\n                  days)\n                </Flex>\n              </Flex>\n            </Flex>\n          )}\n          {!bond.yieldBond && (\n            <Flex className={rowClasses}>\n              <Flex className={labelClasses}>\n                Initial Release\n                <TooltipBubble\n                  placement={'bottomLeft'}\n                  transformTip={'translate(-6%, 0%)'}\n                  width=\"250px\"\n                  body={\n                    <Flex className=\"ape:justify-center\">\n                      {`You'll be able to claim an initial release of ${initialRelease * 100}%\n                    of your allocation on ${formattedFinishDate}`}\n                    </Flex>\n                  }\n                >\n                  <Flex className=\"ape:items-center ape:h-full ape:ml-[5px]\">\n                    <QuestionCircle width=\"12px\" />\n                  </Flex>\n                </TooltipBubble>\n              </Flex>\n              <Flex className={valueClasses}>\n                {getFirstNonZeroDigits(initialReleaseAmount, 2)}{' '}\n                {bond?.underlyingEarnToken?.symbol || bond?.earnToken.symbol}\n                <Flex className={subValueClasses}>(${initialReleaseUsd.toFixed(2)})</Flex>\n              </Flex>\n            </Flex>\n          )}\n          {initialRelease !== 1 && (\n            <Flex className={rowClasses}>\n              <Flex className={labelClasses}>\n                Vested Tokens\n                <TooltipBubble\n                  placement={'bottomLeft'}\n                  transformTip={'translate(-6%, 0%)'}\n                  width=\"250px\"\n                  body={\n                    <Flex className=\"ape:justify-center\">\n                      {`Remaining tokens will vest linearly over ${getTimePeriods(bond.vestingTerm).months} months after claiming the initial release.`}\n                    </Flex>\n                  }\n                >\n                  <Flex className=\"ape:items-center ape:h-full ape:ml-[5px]\">\n                    <QuestionCircle width=\"12px\" />\n                  </Flex>\n                </TooltipBubble>\n              </Flex>\n              <Flex className={valueClasses}>\n                {getFirstNonZeroDigits(vestedAmount, 2)} {bond?.earnToken.symbol}\n                <Flex className={subValueClasses}>(${vestedAmountUsd.toFixed(2)})</Flex>\n              </Flex>\n            </Flex>\n          )}\n          <Flex className=\"ape:mt-[10px]\">{`Your purchased bond can be found under the \"Your Bonds\" tab.`}</Flex>\n        </Flex>\n        <Button\n          onClick={() => {\n            handleToogle('Your Bonds')\n            onDismiss?.()\n          }}\n          className=\"ape:text-[14px]! ape:w-full ape:mt-[15px] ape:h-[35px]\"\n        >\n          see your Bonds\n        </Button>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default ParticipationSuccessful\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import { BondsData } from '../../../../types/bonds';
 declare const BondCards: ({ bondData, isDoingMaxBuy }: {
     bondData: BondsData;
     isDoingMaxBuy?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BondCards;

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

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { TooltipText } from '../../../../config/constants/tooltips.js';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
 import { getVestingTermsString, getVestingTermsTooltipString, getMaxBuy, getRemainingTokensString, remainingPercentage } from '../../../../utils/displayHelpers.js';
@@ -14,63 +15,35 @@ import TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble/index.
 import QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle.js';
 import Success from '../../../../components/uikit-sdk/Svg/Icons/Success.js';
 
+const blockClasses = 'bond-card-block ' +
+    'ape:flex ' +
+    'ape:p-[6px_12px] ' +
+    'ape:w-full ' +
+    'ape:items-center ' +
+    'ape:justify-between ' +
+    'ape:border-b ' +
+    'ape:border-white2 ' +
+    'ape:bg-white3 ' +
+    'ape:md:w-87.5 ' +
+    'ape:md:flex-col ' +
+    'ape:md:p-3 ' +
+    'ape:rounded-none ' +
+    'ape:md:rounded-normal ' +
+    'ape:first:rounded-t-normal ' +
+    'ape:last:rounded-b-normal';
 const BondCards = ({ bondData, isDoingMaxBuy }) => {
     const isMobile = useIsMobile();
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                    background: MCColorMapping.white3[bondData.marketingCampaign],
-                }, children: [jsxs(Flex, { className: "bond-card-title", children: [SDKConfig.namingPreference, jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(BonusComponent, { trueBondPrices: SDKConfig.namingPreference !== 'Discount' ? bondData.trueBondPrices : undefined, minTier: bondData.minTier, tooltipPosition: isMobile ? 'bottomRight' : 'bottomLeft', bonus: SDKConfig.namingPreference === 'Discount'
+    const blockBg = { background: MCColorMapping.white3[bondData.marketingCampaign] };
+    return (jsxs("div", { className: "bonds-cards ape:flex ape:w-full ape:flex-col ape:min-md:flex-row ape:min-md:gap-[5px]", children: [jsxs("div", { className: blockClasses, style: blockBg, children: [jsxs(Flex, { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-md:pb-[5px] ape:items-center", children: [SDKConfig.namingPreference, jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(BonusComponent, { trueBondPrices: SDKConfig.namingPreference !== 'Discount' ? bondData.trueBondPrices : undefined, minTier: bondData.minTier, tooltipPosition: isMobile ? 'bottomRight' : 'bottomLeft', bonus: SDKConfig.namingPreference === 'Discount'
                             ? `${bondData?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`
-                            : undefined })] }), jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                    background: MCColorMapping.white3[bondData.marketingCampaign],
-                }, children: [jsxs("div", { className: "bond-card-title", children: ["Terms", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content", children: [getVestingTermsString(bondData), bondData.vestingCliff && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: getVestingTermsTooltipString(bondData) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx(QuestionCircle, { width: "12px" }) }) }))] })] }), jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                    background: MCColorMapping.white3[bondData.marketingCampaign],
-                    border: isDoingMaxBuy && '2px solid green !important',
-                    position: 'relative',
-                }, children: [isDoingMaxBuy && (jsx(Flex, { sx: {
-                            position: 'absolute',
-                            top: '0px',
-                            right: '0px',
-                            transform: ['translate(50%,-50%)', 'translate(50%,-50%)', 'translate(50%,-50%)', 'translate(-50%,-50%)'],
-                        }, children: jsx(Success, { width: isMobile ? 16 : 20 }) })), jsxs("div", { className: "bond-card-title", children: ["Max Buy", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.MaxBuy(bondData?.earnToken?.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "bond-card-content", sx: { alignItems: 'center' }, children: [jsx("div", { style: { paddingRight: '3px' }, children: jsx(TokenImage, { symbol: bondData.showcaseTokenName ?? bondData.earnToken.symbol, size: 22, chain: bondData.chainId }) }), formatNumberSI(getMaxBuy(bondData, SDKConfig.showLowValueBonds).toString(), 0)] })] }), jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                    background: MCColorMapping.white3[bondData.marketingCampaign],
-                }, children: [jsxs(Flex, { className: "bond-card-title", children: ["Tokens Remaining", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: remainingPercentage(bondData) }), style: {
+                            : undefined })] }), jsxs("div", { className: blockClasses, style: blockBg, children: [jsxs("div", { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:md:pb-1.25 ape:items-center", children: ["Terms", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs("div", { className: "bond-card-content ape:flex ape:text-[12px] ape:font-bold ape:min-md:text-[16px] ape:items-center", children: [getVestingTermsString(bondData), bondData.vestingCliff && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: getVestingTermsTooltipString(bondData) }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { className: "ape:opacity-60 ape:ml-[6px]", children: jsx(QuestionCircle, { width: "12px" }) }) }))] })] }), jsxs("div", { className: clsx(blockClasses, 'ape:relative'), style: { ...blockBg, border: isDoingMaxBuy ? '2px solid green' : undefined }, children: [isDoingMaxBuy && (jsx(Flex, { className: "ape:absolute ape:top-0 ape:right-0 ape:translate-x-1/2 ape:-translate-y-1/2 ape:md:-translate-x-1/2", children: jsx(Success, { width: isMobile ? 16 : 20 }) })), jsxs("div", { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:md:pb-1.25 ape:items-center", children: ["Max Buy", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.MaxBuy(bondData?.earnToken?.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-1.25 ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "bond-card-content ape:flex ape:text-[12px] ape:font-bold ape:min-md:text-[16px] ape:items-center", children: [jsx("div", { style: { paddingRight: '3px' }, children: jsx(TokenImage, { symbol: bondData.showcaseTokenName ?? bondData.earnToken.symbol, size: 22, chain: bondData.chainId }) }), formatNumberSI(getMaxBuy(bondData, SDKConfig.showLowValueBonds).toString(), 0)] })] }), jsxs("div", { className: blockClasses, style: blockBg, children: [jsxs(Flex, { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-md:pb-[5px] ape:items-center", children: ["Tokens Remaining", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: isMobile ? 'bottomLeft' : 'bottomRight', transformTip: isMobile ? 'translate(-5%, -5%)' : 'translate(11%, -2%)', children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar
+                        //TODO: remove this custom request once bond ends
+                        , { 
+                            //TODO: remove this custom request once bond ends
+                            value: bondData?.earnToken?.symbol === 'HAR'
+                                ? Math.max(remainingPercentage(bondData) - 33, 0)
+                                : remainingPercentage(bondData) }), style: {
                             width: '127px',
                             height: '25px',
                             flexDirection: 'column',

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

@@ -1 +1 @@
-{"version":3,"file":"BondCards.js","sources":["../../../../../src/views/BuyBond/components/BondCards/BondCards.tsx"],"sourcesContent":["import React from 'react'\nimport { TooltipText } from '../../../../config/constants/tooltips'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport {\n  getMaxBuy,\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { BondsData } from '../../../../types/bonds'\nimport BonusComponent from '../../../Bonds/components/BonusComponents/BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { MCColorMapping } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Success from '../../../../components/uikit-sdk/Svg/Icons/Success'\n\nconst BondCards = ({ bondData, isDoingMaxBuy }: { bondData: BondsData; isDoingMaxBuy?: boolean }) => {\n  const isMobile = useIsMobile()\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"bonds-cards\">\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n          background: MCColorMapping.white3[bondData.marketingCampaign!],\n        }}\n      >\n        <Flex className=\"bond-card-title\">\n          {SDKConfig.namingPreference}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.Discount}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        <BonusComponent\n          trueBondPrices={SDKConfig.namingPreference !== 'Discount' ? bondData.trueBondPrices : undefined}\n          minTier={bondData.minTier}\n          tooltipPosition={isMobile ? 'bottomRight' : 'bottomLeft'}\n          bonus={\n            SDKConfig.namingPreference === 'Discount'\n              ? `${bondData?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n              : undefined\n          }\n        />\n      </div>\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n          background: MCColorMapping.white3[bondData.marketingCampaign!],\n        }}\n      >\n        <div className=\"bond-card-title\">\n          Terms\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.Terms}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </div>\n        <div className=\"bond-card-content\">\n          {getVestingTermsString(bondData)}\n          {bondData.vestingCliff && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{getVestingTermsTooltipString(bondData)}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex sx={{ opacity: 0.6, ml: '6px' }}>\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n          background: MCColorMapping.white3[bondData.marketingCampaign!],\n          border: isDoingMaxBuy && '2px solid green !important',\n          position: 'relative',\n        }}\n      >\n        {isDoingMaxBuy && (\n          <Flex\n            sx={{\n              position: 'absolute',\n              top: '0px',\n              right: '0px',\n              transform: ['translate(50%,-50%)', 'translate(50%,-50%)', 'translate(50%,-50%)', 'translate(-50%,-50%)'],\n            }}\n          >\n            <Success width={isMobile ? 16 : 20} />\n          </Flex>\n        )}\n        <div className=\"bond-card-title\">\n          Max Buy\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.MaxBuy(bondData?.earnToken?.symbol)}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </div>\n        <Flex className=\"bond-card-content\" sx={{ alignItems: 'center' }}>\n          <div style={{ paddingRight: '3px' }}>\n            <TokenImage\n              symbol={bondData.showcaseTokenName ?? bondData.earnToken.symbol}\n              size={22}\n              chain={bondData.chainId}\n            />\n          </div>\n          {formatNumberSI(getMaxBuy(bondData, SDKConfig.showLowValueBonds).toString(), 0)}\n        </Flex>\n      </div>\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n          background: MCColorMapping.white3[bondData.marketingCampaign!],\n        }}\n      >\n        <Flex className=\"bond-card-title\">\n          Tokens Remaining\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.TokensRemaining}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        <ProgressBarWrapper\n          title={''}\n          value={<ProgressBar value={remainingPercentage(bondData)} />}\n          style={{\n            width: '127px',\n            height: '25px',\n            flexDirection: 'column',\n            justifyContent: 'center',\n          }}\n          showTooltip={true}\n          toolTip={getRemainingTokensString(bondData, SDKConfig.showLowValueBonds)}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default BondCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"BondCards.js","sources":["../../../../../src/views/BuyBond/components/BondCards/BondCards.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { TooltipText } from '../../../../config/constants/tooltips'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport {\n  getMaxBuy,\n  getRemainingTokensString,\n  getVestingTermsString,\n  getVestingTermsTooltipString,\n  remainingPercentage,\n} from '../../../../utils/displayHelpers'\nimport { BondsData } from '../../../../types/bonds'\nimport BonusComponent from '../../../Bonds/components/BonusComponents/BonusComponent'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { MCColorMapping } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Success from '../../../../components/uikit-sdk/Svg/Icons/Success'\n\nconst blockClasses =\n  'bond-card-block ' +\n  'ape:flex ' +\n  'ape:p-[6px_12px] ' +\n  'ape:w-full ' +\n  'ape:items-center ' +\n  'ape:justify-between ' +\n  'ape:border-b ' +\n  'ape:border-white2 ' +\n  'ape:bg-white3 ' +\n  'ape:md:w-87.5 ' +\n  'ape:md:flex-col ' +\n  'ape:md:p-3 ' +\n  'ape:rounded-none ' +\n  'ape:md:rounded-normal ' +\n  'ape:first:rounded-t-normal ' +\n  'ape:last:rounded-b-normal'\n\nconst BondCards = ({ bondData, isDoingMaxBuy }: { bondData: BondsData; isDoingMaxBuy?: boolean }) => {\n  const isMobile = useIsMobile()\n  const SDKConfig = useSDKConfig()\n  const blockBg = { background: MCColorMapping.white3[bondData.marketingCampaign!] }\n\n  return (\n    <div className=\"bonds-cards ape:flex ape:w-full ape:flex-col ape:min-md:flex-row ape:min-md:gap-[5px]\">\n      <div className={blockClasses} style={blockBg}>\n        <Flex className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-md:pb-[5px] ape:items-center\">\n          {SDKConfig.namingPreference}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.Discount}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        <BonusComponent\n          trueBondPrices={SDKConfig.namingPreference !== 'Discount' ? bondData.trueBondPrices : undefined}\n          minTier={bondData.minTier}\n          tooltipPosition={isMobile ? 'bottomRight' : 'bottomLeft'}\n          bonus={\n            SDKConfig.namingPreference === 'Discount'\n              ? `${bondData?.trueBondPrices?.[0]?.discountWithFee?.toFixed(2)}%`\n              : undefined\n          }\n        />\n      </div>\n      <div className={blockClasses} style={blockBg}>\n        <div className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:md:pb-1.25 ape:items-center\">\n          Terms\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.Terms}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </div>\n        <div className=\"bond-card-content ape:flex ape:text-[12px] ape:font-bold ape:min-md:text-[16px] ape:items-center\">\n          {getVestingTermsString(bondData)}\n          {bondData.vestingCliff && (\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>{getVestingTermsTooltipString(bondData)}</Flex>}\n              width=\"180px\"\n              placement=\"bottomRight\"\n              transformTip=\"translate(13%, 0%)\"\n            >\n              <Flex className=\"ape:opacity-60 ape:ml-[6px]\">\n                <QuestionCircle width=\"12px\" />\n              </Flex>\n            </TooltipBubble>\n          )}\n        </div>\n      </div>\n      <div\n        className={clsx(blockClasses, 'ape:relative')}\n        style={{ ...blockBg, border: isDoingMaxBuy ? '2px solid green' : undefined }}\n      >\n        {isDoingMaxBuy && (\n          <Flex className=\"ape:absolute ape:top-0 ape:right-0 ape:translate-x-1/2 ape:-translate-y-1/2 ape:md:-translate-x-1/2\">\n            <Success width={isMobile ? 16 : 20} />\n          </Flex>\n        )}\n        <div className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:md:pb-1.25 ape:items-center\">\n          Max Buy\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.MaxBuy(bondData?.earnToken?.symbol)}</Flex>}\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip ape:pl-1.25 ape:items-start ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </div>\n        <Flex className=\"bond-card-content ape:flex ape:text-[12px] ape:font-bold ape:min-md:text-[16px] ape:items-center\">\n          <div style={{ paddingRight: '3px' }}>\n            <TokenImage\n              symbol={bondData.showcaseTokenName ?? bondData.earnToken.symbol}\n              size={22}\n              chain={bondData.chainId}\n            />\n          </div>\n          {formatNumberSI(getMaxBuy(bondData, SDKConfig.showLowValueBonds).toString(), 0)}\n        </Flex>\n      </div>\n      <div className={blockClasses} style={blockBg}>\n        <Flex className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-md:pb-[5px] ape:items-center\">\n          Tokens Remaining\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={<Flex>{TooltipText.TokensRemaining}</Flex>}\n            width=\"230px\"\n            placement={isMobile ? 'bottomLeft' : 'bottomRight'}\n            transformTip={isMobile ? 'translate(-5%, -5%)' : 'translate(11%, -2%)'}\n          >\n            <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        <ProgressBarWrapper\n          title={''}\n          value={\n            <ProgressBar\n              //TODO: remove this custom request once bond ends\n              value={\n                bondData?.earnToken?.symbol === 'HAR'\n                  ? Math.max(remainingPercentage(bondData) - 33, 0)\n                  : remainingPercentage(bondData)\n              }\n            />\n          }\n          style={{\n            width: '127px',\n            height: '25px',\n            flexDirection: 'column',\n            justifyContent: 'center',\n          }}\n          showTooltip={true}\n          toolTip={getRemainingTokensString(bondData, SDKConfig.showLowValueBonds)}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default BondCards\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/BuyBond/components/BondCards/BondCardsPreTGE.d.ts

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

package/dist/views/BuyBond/components/BondCards/BondCardsPreTGE.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { getTimePeriods } from '../../../../utils/getTimePeriods.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
@@ -14,62 +14,9 @@ const BondCardsPreTGE = ({ bond }) => {
     const airdropBonus = bond.airdropBonus ?? 0;
     const bonusToUse = bonus + airdropBonus;
     const initialRelease = (bond?.initialRelease ?? 0) * 100;
-    return (jsxs("div", { className: "bonds-cards", children: [jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs(Flex, { className: "bond-card-title", sx: { alignItems: 'center' }, children: [bond.yieldBond ? 'APR' : 'Bonus', jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: bond.yieldBond
+    return (jsxs("div", { className: "bonds-cards ape:flex ape:w-full ape:flex-col ape:min-[800px]:flex-row ape:min-[800px]:gap-[5px]", children: [jsxs("div", { className: "bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal", children: [jsxs(Flex, { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px] ape:items-center", children: [bond.yieldBond ? 'APR' : 'Bonus', jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: bond.yieldBond
                                         ? 'This is the bonus yield to be distributed over the pool duration. The APR increases over time until the sale ends, following a Dutch Auction format.'
-                                        : 'This is the percentage of additional tokens you’ll get compared to buying at market price.' }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), bond.yieldBond ? (jsxs(Flex, { sx: { color: 'success' }, children: [bond.yieldData?.apr.toFixed(), "%"] })) : (jsxs(Flex, { sx: { color: 'success', alignItems: 'center' }, children: [bonusToUse?.toFixed(0), "%", bond.airdropTooltip && (jsx(TooltipBubble, { body: jsx(Fragment, { children: bond.airdropTooltip }), width: "230px", placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)', children: jsx(Flex, { sx: { width: '20px', height: '20px', alignItems: 'center', ml: '5px' }, children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png", alt: "airdrop-img", style: { width: '20px', height: '20px' } }) }) }))] }))] }), bond.yieldBond ? (jsxs("div", { className: "bond-card-block", sx: {
-                    fontSize: '13px !important',
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    cursor: 'pointer',
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, onClick: () => setShowLocalTime((prev) => !prev), children: [jsxs(Flex, { className: "bond-card-title", children: ["Sale Ends", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["This is the date and time when the sale ends. Initial tokens will be distributed", ' ', getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "days afterwards, followed by the yield rewards over the pool duration."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), formatUTCDate(new Date((bond.finishTime ?? 0) * 1000), false, showLocalTime), ' ', showLocalTime ? 'Local' : 'UTC'] })) : (jsxs("div", { className: "bond-card-block", sx: {
-                    fontSize: '13px !important',
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs(Flex, { className: "bond-card-title", children: ["TGE", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: "This is the date and time when this token will become officially live on-chain." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), bond.tgeString] })), jsx("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: bond.yieldBond ? (jsxs(Fragment, { children: [jsxs("div", { className: "bond-card-title", children: ["Pool Duration", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: "This is the duration over which the bonus yield will be distributed while your initial tokens remain staked." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { color: 'text' }, children: [getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "Days"] })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "bond-card-title", children: ["Initial Release", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["This is the percentage of tokens you can claim immediately on ", bond.tgeString, ". The rest follows the vesting schedule."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), initialRelease, "%"] })) }), !bond.yieldBond && (jsxs("div", { className: "bond-card-block", sx: {
-                    borderRadius: ['0px', '0px', '0px', 'normal'],
-                    '&:first-of-type': {
-                        borderTopRightRadius: 'normal',
-                        borderTopLeftRadius: 'normal',
-                    },
-                    '&:last-of-type': {
-                        borderBottomRightRadius: 'normal',
-                        borderBottomLeftRadius: 'normal',
-                    },
-                }, children: [jsxs("div", { className: "bond-card-title", children: ["Vesting Terms", initialRelease !== 100 && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["Remaining tokens will vest linearly over ", getTimePeriods(bond?.vestingTerm).months, " months after", ' ', formatUTCDate(new Date(parseInt(bond.startVestingTimestamp ?? '0') * 1000)), " UTC."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip", children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), initialRelease === 100 ? `0 D` : `${getTimePeriods(bond?.vestingTerm)?.months} Mo`] }))] }));
+                                        : 'This is the percentage of additional tokens you’ll get compared to buying at market price.' }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), bond.yieldBond ? (jsxs(Flex, { className: "ape:text-success", children: [bond.yieldData?.apr.toFixed(), "%"] })) : (jsxs(Flex, { className: "ape:text-success ape:items-center", children: [bonusToUse?.toFixed(0), "%", bond.airdropTooltip && (jsx(TooltipBubble, { body: jsx(Fragment, { children: bond.airdropTooltip }), width: "230px", placement: isMobile ? 'bottomRight' : 'bottomLeft', transformTip: isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)', children: jsx(Flex, { className: "ape:w-[20px] ape:h-[20px] ape:items-center ape:ml-[5px]", children: jsx("img", { src: "https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png", alt: "airdrop-img", style: { width: '20px', height: '20px' } }) }) }))] }))] }), bond.yieldBond ? (jsxs("div", { className: "bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:text-[13px]! ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal ape:cursor-pointer", onClick: () => setShowLocalTime((prev) => !prev), children: [jsxs(Flex, { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]", children: ["Sale Ends", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["This is the date and time when the sale ends. Initial tokens will be distributed", ' ', getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "days afterwards, followed by the yield rewards over the pool duration."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), formatUTCDate(new Date((bond.finishTime ?? 0) * 1000), false, showLocalTime), ' ', showLocalTime ? 'Local' : 'UTC'] })) : (jsxs("div", { className: "bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:text-[13px]! ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal", children: [jsxs(Flex, { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]", children: ["TGE", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: "This is the date and time when this token will become officially live on-chain." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), bond.tgeString] })), jsx("div", { className: "bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal", children: bond.yieldBond ? (jsxs(Fragment, { children: [jsxs("div", { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]", children: ["Pool Duration", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: "This is the duration over which the bonus yield will be distributed while your initial tokens remain staked." }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { className: "ape:text-text", children: [getTimePeriods((bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'), true).days, ' ', "Days"] })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]", children: ["Initial Release", jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["This is the percentage of tokens you can claim immediately on ", bond.tgeString, ". The rest follows the vesting schedule."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), initialRelease, "%"] })) }), !bond.yieldBond && (jsxs("div", { className: "bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal", children: [jsxs("div", { className: "bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]", children: ["Vesting Terms", initialRelease !== 100 && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex, { children: ["Remaining tokens will vest linearly over ", getTimePeriods(bond?.vestingTerm).months, " months after", ' ', formatUTCDate(new Date(parseInt(bond.startVestingTimestamp ?? '0') * 1000)), " UTC."] }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: jsx("div", { className: "bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer", children: jsx(QuestionCircle, { width: "12px" }) }) }))] }), initialRelease === 100 ? `0 D` : `${getTimePeriods(bond?.vestingTerm)?.months} Mo`] }))] }));
 };
 
 export { BondCardsPreTGE as default };

package/dist/views/BuyBond/components/BondCards/BondCardsPreTGE.js.map

@@ -1 +1 @@
-{"version":3,"file":"BondCardsPreTGE.js","sources":["../../../../../src/views/BuyBond/components/BondCards/BondCardsPreTGE.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { BondsData } from '../../../../types/bonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { formatUTCDate } from '../../../../utils/dates/formatDate'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst BondCardsPreTGE = ({ bond }: { bond: BondsData }) => {\n  const isMobile = useIsMobile()\n  const [showLocalTime, setShowLocalTime] = useState(false)\n  const bonus = bond?.trueBondPrices?.[0].bonus ?? 0\n  const airdropBonus = bond.airdropBonus ?? 0\n  const bonusToUse = bonus + airdropBonus\n  const initialRelease = (bond?.initialRelease ?? 0) * 100\n  return (\n    <div className=\"bonds-cards\">\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n        }}\n      >\n        <Flex className=\"bond-card-title\" sx={{ alignItems: 'center' }}>\n          {bond.yieldBond ? 'APR' : 'Bonus'}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Flex>\n                {bond.yieldBond\n                  ? 'This is the bonus yield to be distributed over the pool duration. The APR increases over time until the sale ends, following a Dutch Auction format.'\n                  : 'This is the percentage of additional tokens you’ll get compared to buying at market price.'}\n              </Flex>\n            }\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        {bond.yieldBond ? (\n          <Flex sx={{ color: 'success' }}>{bond.yieldData?.apr.toFixed()}%</Flex>\n        ) : (\n          <Flex sx={{ color: 'success', alignItems: 'center' }}>\n            {bonusToUse?.toFixed(0)}%\n            {bond.airdropTooltip && (\n              <TooltipBubble\n                body={<>{bond.airdropTooltip}</>}\n                width=\"230px\"\n                placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n                transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n              >\n                <Flex sx={{ width: '20px', height: '20px', alignItems: 'center', ml: '5px' }}>\n                  <img\n                    src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n                    alt=\"airdrop-img\"\n                    style={{ width: '20px', height: '20px' }}\n                  />\n                </Flex>\n              </TooltipBubble>\n            )}\n          </Flex>\n        )}\n      </div>\n      {bond.yieldBond ? (\n        <div\n          className=\"bond-card-block\"\n          sx={{\n            fontSize: '13px !important',\n            borderRadius: ['0px', '0px', '0px', 'normal'],\n            cursor: 'pointer',\n            '&:first-of-type': {\n              borderTopRightRadius: 'normal',\n              borderTopLeftRadius: 'normal',\n            },\n\n            '&:last-of-type': {\n              borderBottomRightRadius: 'normal',\n              borderBottomLeftRadius: 'normal',\n            },\n          }}\n          onClick={() => setShowLocalTime((prev) => !prev)}\n        >\n          <Flex className=\"bond-card-title\">\n            Sale Ends\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Flex>\n                  This is the date and time when the sale ends. Initial tokens will be distributed{' '}\n                  {\n                    getTimePeriods(\n                      (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                      true,\n                    ).days\n                  }{' '}\n                  days afterwards, followed by the yield rewards over the pool duration.\n                </Flex>\n              }\n              width=\"230px\"\n              placement=\"bottomLeft\"\n              transformTip=\"translate(-5%, -5%)\"\n            >\n              <div className=\"bond-card-tooltip\">\n                <QuestionCircle width=\"12px\" />\n              </div>\n            </TooltipBubble>\n          </Flex>\n          {formatUTCDate(new Date((bond.finishTime ?? 0) * 1000), false, showLocalTime)}{' '}\n          {showLocalTime ? 'Local' : 'UTC'}\n        </div>\n      ) : (\n        <div\n          className=\"bond-card-block\"\n          sx={{\n            fontSize: '13px !important',\n            borderRadius: ['0px', '0px', '0px', 'normal'],\n            '&:first-of-type': {\n              borderTopRightRadius: 'normal',\n              borderTopLeftRadius: 'normal',\n            },\n\n            '&:last-of-type': {\n              borderBottomRightRadius: 'normal',\n              borderBottomLeftRadius: 'normal',\n            },\n          }}\n        >\n          <Flex className=\"bond-card-title\">\n            TGE\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>This is the date and time when this token will become officially live on-chain.</Flex>}\n              width=\"230px\"\n              placement=\"bottomLeft\"\n              transformTip=\"translate(-5%, -5%)\"\n            >\n              <div className=\"bond-card-tooltip\">\n                <QuestionCircle width=\"12px\" />\n              </div>\n            </TooltipBubble>\n          </Flex>\n          {bond.tgeString}\n        </div>\n      )}\n      <div\n        className=\"bond-card-block\"\n        sx={{\n          borderRadius: ['0px', '0px', '0px', 'normal'],\n          '&:first-of-type': {\n            borderTopRightRadius: 'normal',\n            borderTopLeftRadius: 'normal',\n          },\n\n          '&:last-of-type': {\n            borderBottomRightRadius: 'normal',\n            borderBottomLeftRadius: 'normal',\n          },\n        }}\n      >\n        {bond.yieldBond ? (\n          <>\n            <div className=\"bond-card-title\">\n              Pool Duration\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    This is the duration over which the bonus yield will be distributed while your initial tokens remain\n                    staked.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            </div>\n            <Flex sx={{ color: 'text' }}>\n              {\n                getTimePeriods(\n                  (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                  true,\n                ).days\n              }{' '}\n              Days\n            </Flex>\n          </>\n        ) : (\n          <>\n            <div className=\"bond-card-title\">\n              Initial Release\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    This is the percentage of tokens you can claim immediately on {bond.tgeString}. The rest follows the\n                    vesting schedule.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            </div>\n            {initialRelease}%\n          </>\n        )}\n      </div>\n      {!bond.yieldBond && (\n        <div\n          className=\"bond-card-block\"\n          sx={{\n            borderRadius: ['0px', '0px', '0px', 'normal'],\n            '&:first-of-type': {\n              borderTopRightRadius: 'normal',\n              borderTopLeftRadius: 'normal',\n            },\n\n            '&:last-of-type': {\n              borderBottomRightRadius: 'normal',\n              borderBottomLeftRadius: 'normal',\n            },\n          }}\n        >\n          <div className=\"bond-card-title\">\n            Vesting Terms\n            {initialRelease !== 100 && (\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    Remaining tokens will vest linearly over {getTimePeriods(bond?.vestingTerm).months} months after{' '}\n                    {formatUTCDate(new Date(parseInt(bond.startVestingTimestamp ?? '0') * 1000))} UTC.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            )}\n          </div>\n          {initialRelease === 100 ? `0 D` : `${getTimePeriods(bond?.vestingTerm)?.months} Mo`}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default BondCardsPreTGE\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"BondCardsPreTGE.js","sources":["../../../../../src/views/BuyBond/components/BondCards/BondCardsPreTGE.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { BondsData } from '../../../../types/bonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport { formatUTCDate } from '../../../../utils/dates/formatDate'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport QuestionCircle from '../../../../components/uikit-sdk/Svg/Icons/QuestionCircle'\n\nconst BondCardsPreTGE = ({ bond }: { bond: BondsData }) => {\n  const isMobile = useIsMobile()\n  const [showLocalTime, setShowLocalTime] = useState(false)\n  const bonus = bond?.trueBondPrices?.[0].bonus ?? 0\n  const airdropBonus = bond.airdropBonus ?? 0\n  const bonusToUse = bonus + airdropBonus\n  const initialRelease = (bond?.initialRelease ?? 0) * 100\n  return (\n    <div className=\"bonds-cards ape:flex ape:w-full ape:flex-col ape:min-[800px]:flex-row ape:min-[800px]:gap-[5px]\">\n      <div className=\"bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal\">\n        <Flex className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px] ape:items-center\">\n          {bond.yieldBond ? 'APR' : 'Bonus'}\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Flex>\n                {bond.yieldBond\n                  ? 'This is the bonus yield to be distributed over the pool duration. The APR increases over time until the sale ends, following a Dutch Auction format.'\n                  : 'This is the percentage of additional tokens you’ll get compared to buying at market price.'}\n              </Flex>\n            }\n            width=\"230px\"\n            placement=\"bottomLeft\"\n            transformTip=\"translate(-5%, -5%)\"\n          >\n            <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n              <QuestionCircle width=\"12px\" />\n            </div>\n          </TooltipBubble>\n        </Flex>\n        {bond.yieldBond ? (\n          <Flex className=\"ape:text-success\">{bond.yieldData?.apr.toFixed()}%</Flex>\n        ) : (\n          <Flex className=\"ape:text-success ape:items-center\">\n            {bonusToUse?.toFixed(0)}%\n            {bond.airdropTooltip && (\n              <TooltipBubble\n                body={<>{bond.airdropTooltip}</>}\n                width=\"230px\"\n                placement={isMobile ? 'bottomRight' : 'bottomLeft'}\n                transformTip={isMobile ? 'translate(9%, 6%)' : 'translate(-3%, 6%)'}\n              >\n                <Flex className=\"ape:w-[20px] ape:h-[20px] ape:items-center ape:ml-[5px]\">\n                  <img\n                    src=\"https://res.cloudinary.com/dswmrqgwy/image/upload/v1750345773/airdrop_qvh4ow.png\"\n                    alt=\"airdrop-img\"\n                    style={{ width: '20px', height: '20px' }}\n                  />\n                </Flex>\n              </TooltipBubble>\n            )}\n          </Flex>\n        )}\n      </div>\n      {bond.yieldBond ? (\n        <div\n          className=\"bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:text-[13px]! ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal ape:cursor-pointer\"\n          onClick={() => setShowLocalTime((prev) => !prev)}\n        >\n          <Flex className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]\">\n            Sale Ends\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={\n                <Flex>\n                  This is the date and time when the sale ends. Initial tokens will be distributed{' '}\n                  {\n                    getTimePeriods(\n                      (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                      true,\n                    ).days\n                  }{' '}\n                  days afterwards, followed by the yield rewards over the pool duration.\n                </Flex>\n              }\n              width=\"230px\"\n              placement=\"bottomLeft\"\n              transformTip=\"translate(-5%, -5%)\"\n            >\n              <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n                <QuestionCircle width=\"12px\" />\n              </div>\n            </TooltipBubble>\n          </Flex>\n          {formatUTCDate(new Date((bond.finishTime ?? 0) * 1000), false, showLocalTime)}{' '}\n          {showLocalTime ? 'Local' : 'UTC'}\n        </div>\n      ) : (\n        <div className=\"bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:text-[13px]! ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal\">\n          <Flex className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]\">\n            TGE\n            <TooltipBubble\n              className=\"tooltip-bubble\"\n              body={<Flex>This is the date and time when this token will become officially live on-chain.</Flex>}\n              width=\"230px\"\n              placement=\"bottomLeft\"\n              transformTip=\"translate(-5%, -5%)\"\n            >\n              <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n                <QuestionCircle width=\"12px\" />\n              </div>\n            </TooltipBubble>\n          </Flex>\n          {bond.tgeString}\n        </div>\n      )}\n      <div className=\"bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal\">\n        {bond.yieldBond ? (\n          <>\n            <div className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]\">\n              Pool Duration\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    This is the duration over which the bonus yield will be distributed while your initial tokens remain\n                    staked.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            </div>\n            <Flex className=\"ape:text-text\">\n              {\n                getTimePeriods(\n                  (bond?.yieldData?.rewardDistributionEnd ?? 0) - parseInt(bond.startVestingTimestamp ?? '0'),\n                  true,\n                ).days\n              }{' '}\n              Days\n            </Flex>\n          </>\n        ) : (\n          <>\n            <div className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]\">\n              Initial Release\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    This is the percentage of tokens you can claim immediately on {bond.tgeString}. The rest follows the\n                    vesting schedule.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            </div>\n            {initialRelease}%\n          </>\n        )}\n      </div>\n      {!bond.yieldBond && (\n        <div className=\"bond-card-block ape:flex ape:p-[6px_12px] ape:w-full ape:items-center ape:justify-between ape:border-b ape:border-white2 ape:max-h-[32px] ape:min-[800px]:w-[350px] ape:min-[800px]:flex-col ape:min-[800px]:p-[12px] ape:min-[800px]:max-h-none ape:rounded-none ape:lg:rounded-normal ape:first:rounded-t-normal ape:last:rounded-b-normal\">\n          <div className=\"bond-card-title ape:flex ape:font-normal ape:text-[12px] ape:min-[800px]:pb-[5px]\">\n            Vesting Terms\n            {initialRelease !== 100 && (\n              <TooltipBubble\n                className=\"tooltip-bubble\"\n                body={\n                  <Flex>\n                    Remaining tokens will vest linearly over {getTimePeriods(bond?.vestingTerm).months} months after{' '}\n                    {formatUTCDate(new Date(parseInt(bond.startVestingTimestamp ?? '0') * 1000))} UTC.\n                  </Flex>\n                }\n                width=\"230px\"\n                placement=\"bottomLeft\"\n                transformTip=\"translate(-5%, -5%)\"\n              >\n                <div className=\"bond-card-tooltip ape:pl-[5px] ape:items-start ape:cursor-pointer\">\n                  <QuestionCircle width=\"12px\" />\n                </div>\n              </TooltipBubble>\n            )}\n          </div>\n          {initialRelease === 100 ? `0 D` : `${getTimePeriods(bond?.vestingTerm)?.months} Mo`}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default BondCardsPreTGE\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -1,9 +1,8 @@
-import React from 'react';
 import { BondsData } from '../../../types/bonds';
 declare const BondModalHeader: ({ bondData, onDismiss, showProjectInfoButton, hidePromotionUi, }: {
     bondData: BondsData;
     onDismiss?: () => void;
     showProjectInfoButton?: boolean;
     hidePromotionUi?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default BondModalHeader;

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

@@ -1,4 +1,5 @@
-import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import TokenImage from '../../../components/uikit-sdk/TokenImage/index.js';
 import { discountEarnTokenPrice } from '../../../utils/displayHelpers.js';
 import useModal from '../../../hooks/useModal.js';
@@ -6,7 +7,8 @@ import SlippageModal from '../../../components/SlippageModal/index.js';
 import ExpandedViewButton from './ExpandedViewButton.js';
 import track from '../../../utils/track.js';
 import BondModalMinTierHeader from './BondModalMinTierHeader.js';
-import useTierPoints, { TIERS_WEIGHT, promotionDataMapping } from '../../../state/tiers/useTierPoints.js';
+import useTierPoints from '../../../state/tiers/useTierPoints.js';
+import { TIERS_WEIGHT, promotionDataMapping } from '../../../state/tiers/tiers.js';
 import { LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
 import { useSDKConfig } from '../../../state/useSDKConfig.js';
 import { findHighestTrueBondPrice } from '../../../utils/bondPriceHelpers.js';
@@ -48,54 +50,9 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, hidePromo
             },
         });
     };
-    return (jsxs(Flex, { className: "modaltable-container title-container", sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'start' }, children: [jsxs(Flex, { sx: {
-                    width: '100%',
-                    height: '30px',
-                    mb: ['10px', '10px', '10px', '0px'],
-                    justifyContent: ['space-between', 'space-between', 'space-between', 'flex-end'],
-                }, children: [jsx(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'] }, children: jsx(BondModalMinTierHeader, { minTier: minTier }) }), jsx(Flex, { sx: { cursor: 'pointer' }, children: onDismiss ? (jsxs(Fragment, { children: [showProjectInfoButton && jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx(Flex, { sx: { mx: '25px' }, onClick: onOpenSlippageModal, children: jsx(Cog, { width: isMobile ? '16px' : '20px' }) }), jsx(Flex, { onClick: handleClose, children: jsx(Close, { color: "text", width: isMobile ? '12px' : '18px' }) })] })) : (jsx(Flex, { sx: { py: '3px', mt: '10px' }, onClick: onOpenSlippageModal, children: jsx(Cog, { width: isMobile ? '16px' : '20px' }) })) })] }), jsxs(Flex, { sx: { width: '100%', position: 'relative' }, children: [jsxs(Flex, { className: "title-container bondicon", children: [jsx(Flex, { sx: MCTokenIconStyles[bondData.marketingCampaign] }), jsx(TokenImage, { symbol: bondData.showcaseTokenName ?? bondData.earnToken.symbol, size: 50, chain: bondData.chainId })] }), jsxs(Flex, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            pl: ['10px', '10px', '10px', '20px'],
-                            fontSize: ['20px', '20px', '20px', '24px'],
-                            fontWeight: 700,
-                        }, children: [bondData?.showcaseTokenName, jsx(ListTag, { text: bondData?.tags?.[0] })] }), jsxs(Flex, { className: "title-container price-container", sx: { flexDirection: 'column', pl: ['10px', '10px', '10px', '20px'] }, children: [jsxs(Flex, { className: "price-container price", sx: { fontSize: ['12px', '12px', '12px', '14px'] }, children: ["$", formatNumberSI(bondData.payoutTokenPrice, bondData.earnToken.symbol.toLowerCase() === 'ireet' ? 6 : 2)] }), SDKConfig.useTiers &&
+    return (jsxs(Flex, { className: "modaltable-container title-container ape:w-full ape:flex ape:relative ape:flex-col ape:justify-center ape:items-start", children: [jsxs(Flex, { className: "ape:w-full ape:h-[30px] ape:max-md:mb-[10px] ape:md:mb-0 ape:justify-between ape:md:justify-end", children: [jsx(Flex, { className: "ape:flex ape:md:hidden", children: jsx(BondModalMinTierHeader, { minTier: minTier }) }), jsx(Flex, { className: "ape:cursor-pointer", children: onDismiss ? (jsxs(Fragment, { children: [showProjectInfoButton && jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation }), jsx(Flex, { className: "ape:mx-[25px]", onClick: onOpenSlippageModal, children: jsx(Cog, { width: isMobile ? '16px' : '20px' }) }), jsx(Flex, { onClick: handleClose, children: jsx(Close, { color: "text", width: isMobile ? '12px' : '18px' }) })] })) : (jsx(Flex, { className: "ape:py-[3px] ape:mt-[10px]", onClick: onOpenSlippageModal, children: jsx(Cog, { width: isMobile ? '16px' : '20px' }) })) })] }), jsxs(Flex, { className: "ape:w-full ape:relative", children: [jsxs(Flex, { className: "title-container bondicon ape:flex ape:flex-row ape:items-center ape:relative", children: [jsx(Flex, { style: MCTokenIconStyles[bondData.marketingCampaign] }), jsx(TokenImage, { symbol: bondData.showcaseTokenName ?? bondData.earnToken.symbol, size: 50, chain: bondData.chainId })] }), jsxs(Flex, { className: "ape:flex ape:flex-col ape:pl-[10px] ape:md:pl-[20px] ape:text-[20px] ape:md:text-[24px] ape:font-bold", children: [bondData?.showcaseTokenName, jsx(ListTag, { text: bondData?.tags?.[0] })] }), jsxs(Flex, { className: "title-container price-container ape:flex-col ape:pl-[10px] ape:md:pl-[20px]", children: [jsxs(Flex, { className: "price-container price ape:line-through ape:opacity-50 ape:font-normal ape:text-[12px] ape:md:text-[14px]", children: ["$", formatNumberSI(bondData.payoutTokenPrice, 2)] }), SDKConfig.useTiers &&
                                 bondData.billVersion === BillVersion.V4 &&
-                                (bondData?.trueBondPrices?.length ?? 0) > 1 ? (jsxs(Flex, { sx: {
-                                    p: '3px 6px',
-                                    border: '1px solid #9960C5',
-                                    borderRadius: 'normal',
-                                    background: 'transparent',
-                                    position: 'relative',
-                                    overflow: 'hidden',
-                                }, children: [jsx(Flex, { sx: {
-                                            position: 'absolute',
-                                            width: '100%',
-                                            height: '100%',
-                                            top: 0,
-                                            left: 0,
-                                            zIndex: 1,
-                                            background: '#9960C5',
-                                            opacity: 0.2,
-                                        } }), jsxs(Flex, { sx: { width: '100%', zIndex: 2, alignItems: 'center' }, children: [jsx("img", { src: `https://ape.bond/images/launch/mythical.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }), jsx(Flex, { sx: { fontSize: ['12px', '12px', '12px', '14px'], mr: '3px' }, children: "Up to" }), jsxs(Flex, { sx: {
-                                                    color: bonusWithFee && bonusWithFee > 0 ? 'success' : 'error',
-                                                    fontSize: ['12px', '12px', '12px', '14px'],
-                                                }, children: ["$", discountEarnTokenPrice(bondData, true)] })] })] })) : (jsxs(Flex, { sx: { fontSize: '24px', fontWeight: 700 }, children: ["$", discountEarnTokenPrice(bondData)] }))] }), jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], ml: '10px' }, children: jsx(BondModalMinTierHeader, { minTier: minTier }) }), !hidePromotionUi && isBondEligibleForPromotion && promotion && (jsx(Flex, { sx: {
-                            position: 'absolute',
-                            right: '0',
-                            top: ['unset', 'unset', 'unset', '20px'],
-                            bottom: ['3px', '3px', '3px', 'unset'],
-                        }, children: jsx(TooltipBubble, { body: promotionDataMapping[promotion]?.tooltip, width: "205px", placement: "bottomRight", transformTip: ['translate(5%, 0%)', 'translate(5%, 0%)', 'translate(5%, 0%)', 'translate(0%, 0%)'], children: jsxs(Flex, { sx: {
-                                    border: '1px solid var(--theme-ui-colors-primaryButton)',
-                                    borderRadius: ['10px', '10px', '10px', '20px'],
-                                    p: ['4px 2px', '4px 2px', '4px 2px', '4px 10px'],
-                                    alignItems: 'center',
-                                    fontSize: '12px',
-                                    fontWeight: 400,
-                                    color: 'textDisabledButton',
-                                    boxShadow: '0px 0px 30px -10px rgba(222, 98, 243, 0.5)',
-                                    cursor: 'pointer',
-                                }, children: [jsx(Flex, { sx: { mt: '-15px' }, children: jsx(GiftBox, { width: 30, color: 'textDisabledButton' }) }), jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], textTransform: 'capitalize' }, children: promotion })] }) }) }))] })] }));
+                                (bondData?.trueBondPrices?.length ?? 0) > 1 ? (jsxs(Flex, { className: "ape:p-[3px_6px] ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:bg-transparent ape:relative ape:overflow-hidden", children: [jsx(Flex, { className: "ape:absolute ape:w-full ape:h-full ape:top-0 ape:left-0 ape:z-[1] ape:bg-[#9960C5] ape:opacity-20" }), jsxs(Flex, { className: "ape:w-full ape:z-[2] 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 } }), jsx(Flex, { className: "ape:text-[12px] ape:md:text-[14px] ape:mr-[3px]", children: "Up to" }), jsxs(Flex, { className: clsx('ape:text-[12px] ape:md:text-[14px]', bonusWithFee && bonusWithFee > 0 ? 'ape:text-success' : 'ape:text-error'), children: ["$", discountEarnTokenPrice(bondData, true)] })] })] })) : (jsxs(Flex, { className: "ape:text-[24px] ape:font-bold", children: ["$", discountEarnTokenPrice(bondData)] }))] }), jsx(Flex, { className: "ape:hidden ape:md:flex ape:ml-[10px]", children: jsx(BondModalMinTierHeader, { minTier: minTier }) }), !hidePromotionUi && isBondEligibleForPromotion && promotion && (jsx(Flex, { className: "ape:absolute ape:right-0 ape:md:top-[20px] ape:bottom-[3px] ape:md:bottom-[unset]", children: jsx(TooltipBubble, { body: promotionDataMapping[promotion]?.tooltip, width: "205px", placement: "bottomRight", transformTip: isMobile ? 'translate(5%, 0%)' : 'translate(0%, 0%)', children: jsxs(Flex, { className: "ape:border ape:border-solid ape:border-primary-button ape:rounded-[10px] ape:md:rounded-[20px] ape:p-[4px_2px] ape:md:p-[4px_10px] ape:items-center ape:text-[12px] ape:font-normal ape:text-text-disabled-button ape:cursor-pointer", style: { boxShadow: '0px 0px 30px -10px rgba(222, 98, 243, 0.5)' }, children: [jsx(Flex, { className: "ape:mt-[-15px]", children: jsx(GiftBox, { width: 30, color: 'textDisabledButton' }) }), jsx(Flex, { className: "ape:hidden ape:md:flex ape:capitalize", children: promotion })] }) }) }))] })] }));
 };
 
 export { BondModalHeader as default };