@ape.swap/bonds-sdk 6.2.13 → 6.2.14

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import { getTimePeriods } from '../../../../utils/getTimePeriods.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
@@ -14,9 +14,62 @@ const BondCardsPreTGE = ({ bond }) => {
     const airdropBonus = bond.airdropBonus ?? 0;
     const bonusToUse = bonus + airdropBonus;
     const initialRelease = (bond?.initialRelease ?? 0) * 100;
-    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
+    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
                                         ? '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 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`] }))] }));
+                                        : '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`] }))] }));
 };
 
 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 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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"}
+{"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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"}

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

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

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

@@ -1,5 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import TokenImage from '../../../components/uikit-sdk/TokenImage/index.js';
 import { discountEarnTokenPrice } from '../../../utils/displayHelpers.js';
 import useModal from '../../../hooks/useModal.js';
@@ -49,9 +48,54 @@ const BondModalHeader = ({ bondData, onDismiss, showProjectInfoButton, hidePromo
             },
         });
     };
-    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:mb-[10px] ape:lg:mb-0 ape:justify-between ape:lg:justify-end", children: [jsx(Flex, { className: "ape:flex ape:lg: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:lg:pl-[20px] ape:text-[20px] ape:lg: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:lg:pl-[20px]", children: [jsxs(Flex, { className: "price-container price ape:line-through ape:opacity-50 ape:font-normal ape:text-[12px] ape:lg:text-[14px]", children: ["$", formatNumberSI(bondData.payoutTokenPrice, bondData.earnToken.symbol.toLowerCase() === 'ireet' ? 6 : 2)] }), SDKConfig.useTiers &&
+    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 &&
                                 bondData.billVersion === BillVersion.V4 &&
-                                (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:lg:text-[14px] ape:mr-[3px]", children: "Up to" }), jsxs(Flex, { className: clsx('ape:text-[12px] ape:lg: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:lg:flex ape:ml-[10px]", children: jsx(BondModalMinTierHeader, { minTier: minTier }) }), !hidePromotionUi && isBondEligibleForPromotion && promotion && (jsx(Flex, { className: "ape:absolute ape:right-0 ape:lg:top-[20px] ape:bottom-[3px] ape:lg: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:lg:rounded-[20px] ape:p-[4px_2px] ape:lg: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:lg:flex ape:capitalize", children: promotion })] }) }) }))] })] }));
+                                (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 })] }) }) }))] })] }));
 };
 
 export { BondModalHeader as default };

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

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

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

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

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

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

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

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

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

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

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

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