@ape.swap/bonds-sdk 6.2.13-test.3 → 6.2.14

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

@@ -1,8 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import useTierPoints, { getUserTier, TIERS_COLORS } from '../../../../state/tiers/useTierPoints.js';
-import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
+import { LaunchBondTiers, BillVersion } from '@ape.swap/apeswap-lists';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice.js';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -16,9 +16,6 @@ const getUpgradeNowAmountUsd = (amountUsd) => {
     const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'));
     return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'));
 };
-// always a separate flex item (not inline text) so it stays pinned to the row's right edge
-// via the row's `justify-between`, instead of trailing wherever the sentence happens to end
-const upgradeNowClasses = 'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:flex ape:shrink-0 ape:whitespace-nowrap';
 const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDecimals, inputTokenPrice, }) => {
     const [isOpen, setIsOpen] = useState(false);
     // Hooks & Data
@@ -33,7 +30,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
     // const feeToBeCollected = inputAmountUSD * fee
     // const feeInAbond = feeToBeCollected / abondPrice!
     // const pointsToBeEarned = feeInAbond * 4
-    const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints, bond, inputTokenPrice, Number(abondPrice));
+    const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints, bond, inputTokenPrice, abondPrice);
     const nextTierData = optimizationData?.data?.[0];
     const highestProfitableTier = optimizationData?.highestProfitableTier;
     const shouldRenderNextTierRow = Boolean((userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen));
@@ -57,17 +54,101 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
             return;
         handleTierSelection(nextTierData.minBreakevenWithFeeUSD);
     };
-    return (jsxs(Flex, { className: "ape:w-full ape:text-[12px] ape:font-normal ape:flex-col ape:relative", style: { cursor: !highestProfitableTier ? 'pointer' : undefined }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier ? (jsxs(Flex, { className: "ape:border ape:border-solid ape:rounded-normal ape:relative ape:overflow-hidden ape:px-2.5 ape:lg:pr-[20px] ape:py-[6px] ape:min-h-[27px] ape:items-center ape:gap-[5px] ape:flex-wrap", style: {
-                    borderColor: 'rgba(22, 101, 52, 0.53)',
-                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%)',
+    return (userTier !== LaunchBondTiers.Legend &&
+        bond.billVersion === BillVersion.V4 && (jsxs(Flex, { sx: {
+            width: '100%',
+            mt: '10px',
+            fontSize: '12px',
+            fontWeight: 400,
+            flexDirection: 'column',
+            position: 'relative',
+            cursor: !highestProfitableTier && 'pointer',
+        }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier && (jsxs(Flex, { sx: {
+                    border: '1px solid rgba(22, 101, 52, 0.53)',
+                    borderRadius: 'normal',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    pl: '10px',
+                    pr: ['10px', '10px', '10px', '20px'],
+                    py: '6px',
+                    background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',
                     color: 'rgba(134, 237, 171, 0.70)',
-                }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-sub ape:mr-[4px]", children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { className: "ape:font-bold", children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { className: "ape:font-bold", style: { color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { className: "ape:font-bold", children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })) : shouldRenderNextTierRow ? (jsxs(Flex, { onClick: handleToggleOpen, className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[15px] ape:py-[2px] ape:items-center ape:justify-between ape:min-w-[120px]", style: { background: '#312341', marginTop: highestProfitableTier ? '3px' : '0px' }, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-middle", children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[nextTierData?.tier] }, children: nextTierData?.tierName }), "Tier."] }), jsx("span", { className: upgradeNowClasses, onClick: (e) => handleUpgradeNowClick(e), children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { className: "ape:inline-flex ape:items-center", onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })) : null, jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, className: "ape:overflow-hidden ape:w-full ape:mt-[3px] ape:cursor-pointer", children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
-                        return (jsxs(Flex, { className: "ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[23px] ape:py-[2px] ape:items-center ape:justify-between", style: { background: '#312341', marginTop: index === 0 ? '0px' : '3px' }, onClick: handleToggleOpen, children: [jsxs("span", { className: "ape:flex-1", children: [jsx("span", { className: "ape:inline-flex ape:align-middle", children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { className: "ape:px-[3px] ape:font-semibold", style: { color: TIERS_COLORS[data?.tier] }, children: data?.tierName }), "Tier."] }), jsx("span", { className: upgradeNowClasses, onClick: (e) => {
+                    minHeight: '27px',
+                    alignItems: 'center',
+                    gap: '5px',
+                    flexWrap: 'wrap',
+                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }, children: jsx(Discount, { width: 14, color: '#4AD980' }) }), jsx("span", { sx: { fontWeight: 700 }, children: "Congratulations!" }), " With your purchase you will accumulate points to upgrade to ", jsx("span", { sx: { fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }, children: highestProfitableTier.tierName }), ' ', jsx("span", { sx: { fontWeight: 700 }, children: "Tier!" })] }), !highestProfitableTier && jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 10 })] })), shouldRenderNextTierRow && !highestProfitableTier && (jsxs(Flex, { onClick: handleToggleOpen, sx: {
+                    border: '1px solid #9960C5',
+                    borderRadius: 'normal',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    pl: '10px',
+                    pr: '15px',
+                    py: '2px',
+                    mt: highestProfitableTier ? '3px' : '0px',
+                    alignItems: 'center',
+                    background: '#312341',
+                    justifyContent: 'space-between',
+                    minWidth: '120px',
+                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(nextTierData?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }, children: nextTierData?.tierName }), "Tier.", jsx("span", { sx: {
+                                    ml: '5px',
+                                    mr: '5px',
+                                    color: 'primaryButton',
+                                    fontWeight: 500,
+                                    cursor: 'pointer',
+                                    ':hover': { textDecoration: 'underline' },
+                                    display: ['inline', 'inline', 'inline', 'none'],
+                                }, onClick: (e) => {
+                                    handleUpgradeNowClick(e);
+                                }, children: `Upgrade now >` })] }), jsx("span", { sx: {
+                            ml: '5px',
+                            mr: '5px',
+                            color: 'primaryButton',
+                            fontWeight: 500,
+                            cursor: 'pointer',
+                            ':hover': { textDecoration: 'underline' },
+                            display: ['none', 'none', 'none', 'flex'],
+                        }, onClick: (e) => {
+                            handleUpgradeNowClick(e);
+                        }, children: `Upgrade now >` }), shouldShowNextTierRowCaret && (jsx("span", { sx: { display: 'inline-flex', alignItems: 'center' }, onClick: handleToggleOpen, role: "button", "aria-label": isOpen ? 'Collapse tier list' : 'Expand tier list', children: jsx(Caret, { direction: isOpen ? 'up' : 'down', width: 8 }) }))] })), jsx(AnimatePresence, { children: isOpen && optimizationData && !highestProfitableTier && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }, children: optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {
+                        return (jsxs(Flex, { sx: {
+                                border: '1px solid #9960C5',
+                                borderRadius: 'normal',
+                                position: 'relative',
+                                overflow: 'hidden',
+                                pl: '10px',
+                                pr: '20px',
+                                py: '2px',
+                                mt: index === 0 ? '0px' : '3px',
+                                alignItems: 'center',
+                                background: '#312341',
+                                justifyContent: 'space-between',
+                            }, onClick: handleToggleOpen, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'bottom' }, children: jsx("img", { src: `https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`, alt: "minTier", style: { width: '21px', height: '21px', marginRight: '3px', zIndex: 1 } }) }), "Doing a $", formatNumberSI(data?.minBreakevenWithFeeUSD), " purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }, children: data?.tierName }), "Tier.", jsx("span", { sx: {
+                                                ml: '5px',
+                                                mr: '15px',
+                                                color: 'primaryButton',
+                                                fontWeight: 500,
+                                                cursor: 'pointer',
+                                                ':hover': { textDecoration: 'underline' },
+                                                display: ['inline', 'inline', 'inline', 'none'],
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
+                                                setIsOpen(false);
+                                            }, children: `Upgrade now >` })] }), jsx("span", { sx: {
+                                        ml: '5px',
+                                        color: 'primaryButton',
+                                        fontWeight: 500,
+                                        cursor: 'pointer',
+                                        ':hover': { textDecoration: 'underline' },
+                                        display: ['none', 'none', 'none', 'flex'],
+                                        minWidth: '100px',
+                                    }, onClick: (e) => {
                                         e.stopPropagation();
                                         handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));
                                         setIsOpen(false);
                                     }, children: `Upgrade now >` })] }, data.tierName));
-                    }) })) })] }));
+                    }) })) })] })));
 };
 
 export { PointsLeftForNextTier as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\n// import { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\nimport Discount from '../../../../components/uikit-sdk/Svg/Icons/Discount'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport { toFixedString } from '../../../../utils/fixedPoint'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) => {\n  const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'))\n  return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'))\n}\n\n// const getNextTierInfo = (userPoints: string) => {\n//   const tiers = [\n//     { tier: LaunchBondTiers.Silver, threshold: TIERS_WEIGHT[LaunchBondTiers.Silver] },\n//     { tier: LaunchBondTiers.Gold, threshold: TIERS_WEIGHT[LaunchBondTiers.Gold] },\n//     { tier: LaunchBondTiers.Diamond, threshold: TIERS_WEIGHT[LaunchBondTiers.Diamond] },\n//     { tier: LaunchBondTiers.Legend, threshold: TIERS_WEIGHT[LaunchBondTiers.Legend] },\n//     { tier: LaunchBondTiers.Mythical, threshold: TIERS_WEIGHT[LaunchBondTiers.Mythical] },\n//   ]\n//\n//   const userPointsBN = getBalanceNumber(userPoints)\n//\n//   for (const { tier, threshold } of tiers) {\n//     const thresholdNumber = getBalanceNumber(threshold)\n//     if (userPointsBN < thresholdNumber) {\n//       const pointsNeeded = thresholdNumber - userPointsBN\n//       return { nextTier: tier, pointsNeeded }\n//     }\n//   }\n//\n//   return null // User is at max tier (Mythical)\n// }\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  inputAmount: string\n  setInputValue: (value: string) => void\n  inputTokenDecimals: number\n  inputTokenPrice?: number\n}\n\n// always a separate flex item (not inline text) so it stays pinned to the row's right edge\n// via the row's `justify-between`, instead of trailing wherever the sentence happens to end\nconst upgradeNowClasses =\n  'ape:ml-[5px] ape:mr-[5px] ape:text-primary-button ape:font-medium ape:cursor-pointer ape:hover:underline ape:flex ape:shrink-0 ape:whitespace-nowrap'\n\nconst PointsLeftForNextTier: React.FC<GetUpToComponentProps> = ({\n  bond,\n  inputAmount,\n  setInputValue,\n  inputTokenDecimals,\n  inputTokenPrice,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const abondPrice = useAbondPrice()\n  const userTier = getUserTier(promotionalPoints)\n  // const nextTierInfo = getNextTierInfo(promotionalPoints || '0')\n  // const inputAmountUSD = parseFloat(inputAmount) * (inputTokenPrice ?? 0)\n  // const necessaryUSDAmount = (nextTierInfo?.pointsNeeded! / 4) * abondPrice!\n  // const fee = ((bond.tierBoostRate ?? 0) + 100) / 100 - 1\n  // const feeToBeCollected = inputAmountUSD * fee\n  // const feeInAbond = feeToBeCollected / abondPrice!\n  // const pointsToBeEarned = feeInAbond * 4\n\n  const optimizationData = calculateOptimizationData(\n    inputAmount,\n    promotionalPoints!,\n    bond,\n    inputTokenPrice,\n    Number(abondPrice),\n  )\n  const nextTierData = optimizationData?.data?.[0]\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n  const shouldRenderNextTierRow = Boolean(\n    (userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen),\n  )\n  const shouldShowNextTierRowCaret = !highestProfitableTier\n\n  const handleSetNextTierAmount = (amount: number) => {\n    const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n    const roundedInputValue = toFixedString(inputValueInSelectedToken, inputTokenDecimals, 'ceil')\n    setInputValue(roundedInputValue)\n  }\n\n  const handleTierSelection = (amount: number) => {\n    handleSetNextTierAmount(getUpgradeNowAmountUsd(amount))\n    setIsOpen(false)\n  }\n\n  const handleToggleOpen = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIsOpen((prev) => !prev)\n  }\n\n  const handleUpgradeNowClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!nextTierData) return\n    handleTierSelection(nextTierData.minBreakevenWithFeeUSD)\n  }\n\n  return (\n    <Flex\n      className=\"ape:w-full ape:text-[12px] ape:font-normal ape:flex-col ape:relative\"\n      style={{ cursor: !highestProfitableTier ? 'pointer' : undefined }}\n      onClick={() => setIsOpen(!isOpen)}\n    >\n      {highestProfitableTier ? (\n        <Flex\n          className=\"ape:border ape:border-solid ape:rounded-normal ape:relative ape:overflow-hidden ape:px-2.5 ape:lg:pr-[20px] ape:py-[6px] ape:min-h-[27px] ape:items-center ape:gap-[5px] ape:flex-wrap\"\n          style={{\n            borderColor: 'rgba(22, 101, 52, 0.53)',\n            background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%)',\n            color: 'rgba(134, 237, 171, 0.70)',\n          }}\n        >\n          <span className=\"ape:flex-1\">\n            <span className=\"ape:inline-flex ape:align-sub ape:mr-[4px]\">\n              <Discount width={14} color={'#4AD980'} />\n            </span>\n            <span className=\"ape:font-bold\">Congratulations!</span> With your purchase you will accumulate points to\n            upgrade to {/*@ts-ignore*/}\n            <span className=\"ape:font-bold\" style={{ color: TIERS_COLORS[highestProfitableTier?.tier] }}>\n              {highestProfitableTier.tierName}\n            </span>{' '}\n            <span className=\"ape:font-bold\">Tier!</span>\n          </span>\n          {!highestProfitableTier && <Caret direction={isOpen ? 'up' : 'down'} width={10} />}\n        </Flex>\n      ) : shouldRenderNextTierRow ? (\n        <Flex\n          onClick={handleToggleOpen}\n          className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[15px] ape:py-[2px] ape:items-center ape:justify-between ape:min-w-[120px]\"\n          style={{ background: '#312341', marginTop: highestProfitableTier ? '3px' : '0px' }}\n        >\n          <span className=\"ape:flex-1\">\n            <span className=\"ape:inline-flex ape:align-middle\">\n              <img\n                src={`https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`}\n                alt=\"minTier\"\n                style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n              />\n            </span>\n            Doing a ${formatNumberSI(nextTierData?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n            <span className=\"ape:px-[3px] ape:font-semibold\" style={{ color: TIERS_COLORS[nextTierData?.tier] }}>\n              {nextTierData?.tierName}\n            </span>\n            Tier.\n          </span>\n          <span className={upgradeNowClasses} onClick={(e) => handleUpgradeNowClick(e)}>\n            {`Upgrade now >`}\n          </span>\n          {shouldShowNextTierRowCaret && (\n            <span\n              className=\"ape:inline-flex ape:items-center\"\n              onClick={handleToggleOpen}\n              role=\"button\"\n              aria-label={isOpen ? 'Collapse tier list' : 'Expand tier list'}\n            >\n              <Caret direction={isOpen ? 'up' : 'down'} width={8} />\n            </span>\n          )}\n        </Flex>\n      ) : null}\n      <AnimatePresence>\n        {isOpen && optimizationData && !highestProfitableTier && (\n          <motion.div\n            initial={{ height: 0 }}\n            animate={{ height: 'fit-content' }}\n            transition={{ opacity: { duration: 0.2 } }}\n            exit={{ height: 0 }}\n            className=\"ape:overflow-hidden ape:w-full ape:mt-[3px] ape:cursor-pointer\"\n          >\n            {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {\n              return (\n                <Flex\n                  className=\"ape:border ape:border-solid ape:border-[#9960C5] ape:rounded-normal ape:relative ape:overflow-hidden ape:pl-[10px] ape:pr-[23px] ape:py-[2px] ape:items-center ape:justify-between\"\n                  style={{ background: '#312341', marginTop: index === 0 ? '0px' : '3px' }}\n                  onClick={handleToggleOpen}\n                  key={data.tierName}\n                >\n                  <span className=\"ape:flex-1\">\n                    <span className=\"ape:inline-flex ape:align-middle\">\n                      <img\n                        src={`https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`}\n                        alt=\"minTier\"\n                        style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                      />\n                    </span>\n                    Doing a ${formatNumberSI(data?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n                    <span className=\"ape:px-[3px] ape:font-semibold\" style={{ color: TIERS_COLORS[data?.tier] }}>\n                      {data?.tierName}\n                    </span>\n                    Tier.\n                  </span>\n                  <span\n                    className={upgradeNowClasses}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                      setIsOpen(false)\n                    }}\n                  >\n                    {`Upgrade now >`}\n                  </span>\n                </Flex>\n              )\n            })}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </Flex>\n  )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n  getUserTier,\n  TIERS_COLORS,\n  // TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\n// import { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport { useAbondPrice } from '../../../../state/tokenPrices/useAbondPrice'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\nimport Discount from '../../../../components/uikit-sdk/Svg/Icons/Discount'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport { toFixedString } from '../../../../utils/fixedPoint'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) => {\n  const roundedUp = Number(toFixedString(amountUsd, 2, 'halfUp'))\n  return Number(toFixedString(roundedUp + UPGRADE_NOW_USD_BUFFER, 2, 'ceil'))\n}\n\n// const getNextTierInfo = (userPoints: string) => {\n//   const tiers = [\n//     { tier: LaunchBondTiers.Silver, threshold: TIERS_WEIGHT[LaunchBondTiers.Silver] },\n//     { tier: LaunchBondTiers.Gold, threshold: TIERS_WEIGHT[LaunchBondTiers.Gold] },\n//     { tier: LaunchBondTiers.Diamond, threshold: TIERS_WEIGHT[LaunchBondTiers.Diamond] },\n//     { tier: LaunchBondTiers.Legend, threshold: TIERS_WEIGHT[LaunchBondTiers.Legend] },\n//     { tier: LaunchBondTiers.Mythical, threshold: TIERS_WEIGHT[LaunchBondTiers.Mythical] },\n//   ]\n//\n//   const userPointsBN = getBalanceNumber(userPoints)\n//\n//   for (const { tier, threshold } of tiers) {\n//     const thresholdNumber = getBalanceNumber(threshold)\n//     if (userPointsBN < thresholdNumber) {\n//       const pointsNeeded = thresholdNumber - userPointsBN\n//       return { nextTier: tier, pointsNeeded }\n//     }\n//   }\n//\n//   return null // User is at max tier (Mythical)\n// }\n\ninterface GetUpToComponentProps {\n  bond: BondsData\n  inputAmount: string\n  setInputValue: (value: string) => void\n  inputTokenDecimals: number\n  inputTokenPrice?: number\n}\n\nconst PointsLeftForNextTier: React.FC<GetUpToComponentProps> = ({\n  bond,\n  inputAmount,\n  setInputValue,\n  inputTokenDecimals,\n  inputTokenPrice,\n}) => {\n  const [isOpen, setIsOpen] = useState(false)\n  // Hooks & Data\n  const { data: tierState } = useTierPoints()\n  const { promotionalPoints } = tierState || {}\n  const abondPrice = useAbondPrice()\n  const userTier = getUserTier(promotionalPoints)\n  // const nextTierInfo = getNextTierInfo(promotionalPoints || '0')\n  // const inputAmountUSD = parseFloat(inputAmount) * (inputTokenPrice ?? 0)\n  // const necessaryUSDAmount = (nextTierInfo?.pointsNeeded! / 4) * abondPrice!\n  // const fee = ((bond.tierBoostRate ?? 0) + 100) / 100 - 1\n  // const feeToBeCollected = inputAmountUSD * fee\n  // const feeInAbond = feeToBeCollected / abondPrice!\n  // const pointsToBeEarned = feeInAbond * 4\n\n  const optimizationData = calculateOptimizationData(inputAmount, promotionalPoints!, bond, inputTokenPrice, abondPrice)\n  const nextTierData = optimizationData?.data?.[0]\n  const highestProfitableTier = optimizationData?.highestProfitableTier\n  const shouldRenderNextTierRow = Boolean(\n    (userTier ?? 0) < LaunchBondTiers.Mythical && nextTierData && (!highestProfitableTier || isOpen),\n  )\n  const shouldShowNextTierRowCaret = !highestProfitableTier\n\n  const handleSetNextTierAmount = (amount: number) => {\n    const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n    const roundedInputValue = toFixedString(inputValueInSelectedToken, inputTokenDecimals, 'ceil')\n    setInputValue(roundedInputValue)\n  }\n\n  const handleTierSelection = (amount: number) => {\n    handleSetNextTierAmount(getUpgradeNowAmountUsd(amount))\n    setIsOpen(false)\n  }\n\n  const handleToggleOpen = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setIsOpen((prev) => !prev)\n  }\n\n  const handleUpgradeNowClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!nextTierData) return\n    handleTierSelection(nextTierData.minBreakevenWithFeeUSD)\n  }\n\n  return (\n    userTier !== LaunchBondTiers.Legend &&\n    bond.billVersion === BillVersion.V4 && (\n      <Flex\n        sx={{\n          width: '100%',\n          mt: '10px',\n          fontSize: '12px',\n          fontWeight: 400,\n          flexDirection: 'column',\n          position: 'relative',\n          cursor: !highestProfitableTier && 'pointer',\n        }}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        {highestProfitableTier && (\n          <Flex\n            sx={{\n              border: '1px solid rgba(22, 101, 52, 0.53)',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: ['10px', '10px', '10px', '20px'],\n              py: '6px',\n              background: 'linear-gradient(90deg, #0A2A1A 0%, #1A2A28 100%) !important',\n              color: 'rgba(134, 237, 171, 0.70)',\n              minHeight: '27px',\n              alignItems: 'center',\n              gap: '5px',\n              flexWrap: 'wrap',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }}>\n                <Discount width={14} color={'#4AD980'} />\n              </span>\n              <span sx={{ fontWeight: 700 }}>Congratulations!</span> With your purchase you will accumulate points to\n              upgrade to {/*@ts-ignore*/}\n              <span sx={{ fontWeight: 700, color: TIERS_COLORS[highestProfitableTier?.tier] }}>\n                {highestProfitableTier.tierName}\n              </span>{' '}\n              <span sx={{ fontWeight: 700 }}>Tier!</span>\n            </span>\n            {!highestProfitableTier && <Caret direction={isOpen ? 'up' : 'down'} width={10} />}\n          </Flex>\n        )}\n        {shouldRenderNextTierRow && !highestProfitableTier && (\n          <Flex\n            onClick={handleToggleOpen}\n            sx={{\n              border: '1px solid #9960C5',\n              borderRadius: 'normal',\n              position: 'relative',\n              overflow: 'hidden',\n              pl: '10px',\n              pr: '15px',\n              py: '2px',\n              mt: highestProfitableTier ? '3px' : '0px',\n              alignItems: 'center',\n              background: '#312341',\n              justifyContent: 'space-between',\n              minWidth: '120px',\n            }}\n          >\n            <span sx={{ flex: 1 }}>\n              <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                <img\n                  src={`https://ape.bond/images/launch/${nextTierData?.tierName?.toLowerCase()}.png`}\n                  alt=\"minTier\"\n                  style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                />\n              </span>\n              Doing a ${formatNumberSI(nextTierData?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n              <span sx={{ color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }}>\n                {nextTierData?.tierName}\n              </span>\n              Tier.\n              <span\n                sx={{\n                  ml: '5px',\n                  mr: '5px',\n                  color: 'primaryButton',\n                  fontWeight: 500,\n                  cursor: 'pointer',\n                  ':hover': { textDecoration: 'underline' },\n                  display: ['inline', 'inline', 'inline', 'none'],\n                }}\n                onClick={(e) => {\n                  handleUpgradeNowClick(e)\n                }}\n              >\n                {`Upgrade now >`}\n              </span>\n            </span>\n            <span\n              sx={{\n                ml: '5px',\n                mr: '5px',\n                color: 'primaryButton',\n                fontWeight: 500,\n                cursor: 'pointer',\n                ':hover': { textDecoration: 'underline' },\n                display: ['none', 'none', 'none', 'flex'],\n              }}\n              onClick={(e) => {\n                handleUpgradeNowClick(e)\n              }}\n            >\n              {`Upgrade now >`}\n            </span>\n            {shouldShowNextTierRowCaret && (\n              <span\n                sx={{ display: 'inline-flex', alignItems: 'center' }}\n                onClick={handleToggleOpen}\n                role=\"button\"\n                aria-label={isOpen ? 'Collapse tier list' : 'Expand tier list'}\n              >\n                <Caret direction={isOpen ? 'up' : 'down'} width={8} />\n              </span>\n            )}\n          </Flex>\n        )}\n        <AnimatePresence>\n          {isOpen && optimizationData && !highestProfitableTier && (\n            <motion.div\n              initial={{ height: 0 }}\n              animate={{ height: 'fit-content' }}\n              transition={{ opacity: { duration: 0.2 } }}\n              exit={{ height: 0 }}\n              sx={{ overflow: 'hidden', width: '100%', marginTop: '3px', cursor: 'pointer' }}\n            >\n              {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data, index) => {\n                return (\n                  <Flex\n                    sx={{\n                      border: '1px solid #9960C5',\n                      borderRadius: 'normal',\n                      position: 'relative',\n                      overflow: 'hidden',\n                      pl: '10px',\n                      pr: '20px',\n                      py: '2px',\n                      mt: index === 0 ? '0px' : '3px',\n                      alignItems: 'center',\n                      background: '#312341',\n                      justifyContent: 'space-between',\n                    }}\n                    onClick={handleToggleOpen}\n                    key={data.tierName}\n                  >\n                    <span sx={{ flex: 1 }}>\n                      <span sx={{ display: 'inline-flex', verticalAlign: 'bottom' }}>\n                        <img\n                          src={`https://ape.bond/images/launch/${data?.tierName?.toLowerCase()}.png`}\n                          alt=\"minTier\"\n                          style={{ width: '21px', height: '21px', marginRight: '3px', zIndex: 1 }}\n                        />\n                      </span>\n                      Doing a ${formatNumberSI(data?.minBreakevenWithFeeUSD!)} purchase will grant you a{/*@ts-ignore*/}\n                      <span sx={{ color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }}>{data?.tierName}</span>\n                      Tier.\n                      <span\n                        sx={{\n                          ml: '5px',\n                          mr: '15px',\n                          color: 'primaryButton',\n                          fontWeight: 500,\n                          cursor: 'pointer',\n                          ':hover': { textDecoration: 'underline' },\n                          display: ['inline', 'inline', 'inline', 'none'],\n                        }}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                          setIsOpen(false)\n                        }}\n                      >\n                        {`Upgrade now >`}\n                      </span>\n                    </span>\n                    <span\n                      sx={{\n                        ml: '5px',\n                        color: 'primaryButton',\n                        fontWeight: 500,\n                        cursor: 'pointer',\n                        ':hover': { textDecoration: 'underline' },\n                        display: ['none', 'none', 'none', 'flex'],\n                        minWidth: '100px',\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD))\n                        setIsOpen(false)\n                      }}\n                    >\n                      {`Upgrade now >`}\n                    </span>\n                  </Flex>\n                )\n              })}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </Flex>\n    )\n  )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,sBAAsB,GAAG,GAAG;AAElC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,KAAI;AACnD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC/D,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC,SAAS,GAAG,sBAAsB,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAC7E,CAAC;AAgCD,MAAM,qBAAqB,GAAoC,CAAC,EAC9D,IAAI,EACJ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,eAAe,GAChB,KAAI;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAE3C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE;AAC3C,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,SAAS,IAAI,EAAE;AAC7C,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,iBAAiB,CAAC;;;;;;;;AAS/C,IAAA,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,WAAW,EAAE,iBAAkB,EAAE,IAAI,EAAE,eAAe,EAAE,UAAU,CAAC;IACtH,MAAM,YAAY,GAAG,gBAAgB,EAAE,IAAI,GAAG,CAAC,CAAC;AAChD,IAAA,MAAM,qBAAqB,GAAG,gBAAgB,EAAE,qBAAqB;IACrE,MAAM,uBAAuB,GAAG,OAAO,CACrC,CAAC,QAAQ,IAAI,CAAC,IAAI,eAAe,CAAC,QAAQ,IAAI,YAAY,KAAK,CAAC,qBAAqB,IAAI,MAAM,CAAC,CACjG;AACD,IAAA,MAAM,0BAA0B,GAAG,CAAC,qBAAqB;AAEzD,IAAA,MAAM,uBAAuB,GAAG,CAAC,MAAc,KAAI;QACjD,MAAM,yBAAyB,GAAG,MAAM,IAAI,eAAe,IAAI,CAAC,CAAC;QACjE,MAAM,iBAAiB,GAAG,aAAa,CAAC,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,CAAC;QAC9F,aAAa,CAAC,iBAAiB,CAAC;AAClC,IAAA,CAAC;AAED,IAAA,MAAM,mBAAmB,GAAG,CAAC,MAAc,KAAI;AAC7C,QAAA,uBAAuB,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC;AAClB,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAmB,KAAI;QAC/C,CAAC,CAAC,eAAe,EAAE;QACnB,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;AAC5B,IAAA,CAAC;AAED,IAAA,MAAM,qBAAqB,GAAG,CAAC,CAAmB,KAAI;QACpD,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,YAAY;YAAE;AACnB,QAAA,mBAAmB,CAAC,YAAY,CAAC,sBAAsB,CAAC;AAC1D,IAAA,CAAC;AAED,IAAA,QACE,QAAQ,KAAK,eAAe,CAAC,MAAM;AACnC,QAAA,IAAI,CAAC,WAAW,KAAK,WAAW,CAAC,EAAE,KACjCA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,CAAC,qBAAqB,IAAI,SAAS;AAC5C,SAAA,EACD,OAAO,EAAE,MAAM,SAAS,CAAC,CAAC,MAAM,CAAC,EAAA,QAAA,EAAA,CAEhC,qBAAqB,KACpBA,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,MAAM,EAAE,mCAAmC;AAC3C,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,EAAE,EAAE,MAAM;oBACV,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACpC,oBAAA,EAAE,EAAE,KAAK;AACT,oBAAA,UAAU,EAAE,6DAA6D;AACzE,oBAAA,KAAK,EAAE,2BAA2B;AAClC,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,QAAQ,EAAE,MAAM;AACjB,iBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EACnEA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,EAAA,CACpC,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAyB,EAAA,+DAAA,EAEtDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,CAAC,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAA,QAAA,EAC5E,qBAAqB,CAAC,QAAQ,EAAA,CAC1B,EAAC,GAAG,EACXA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CACtC,EACN,CAAC,qBAAqB,IAAIA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,CAAA,EAAA,CAC7E,CACR,EACA,uBAAuB,IAAI,CAAC,qBAAqB,KAChDD,IAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,gBAAgB,EACzB,EAAE,EAAE;AACF,oBAAA,MAAM,EAAE,mBAAmB;AAC3B,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,EAAE,EAAE,MAAM;AACV,oBAAA,EAAE,EAAE,KAAK;oBACT,EAAE,EAAE,qBAAqB,GAAG,KAAK,GAAG,KAAK;AACzC,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,UAAU,EAAE,SAAS;AACrB,oBAAA,cAAc,EAAE,eAAe;AAC/B,oBAAA,QAAQ,EAAE,OAAO;iBAClB,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC3DA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,CAAA,+BAAA,EAAkC,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAClF,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,GACvE,EAAA,CACG,EAAA,WAAA,EACG,cAAc,CAAC,YAAY,EAAE,sBAAuB,CAAC,gCAC/DA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,YAC9E,YAAY,EAAE,QAAQ,EAAA,CAClB,EAAA,OAAA,EAEPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,oCAAA,EAAE,EAAE,KAAK;AACT,oCAAA,EAAE,EAAE,KAAK;AACT,oCAAA,KAAK,EAAE,eAAe;AACtB,oCAAA,UAAU,EAAE,GAAG;AACf,oCAAA,MAAM,EAAE,SAAS;AACjB,oCAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;oCACzC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;AAChD,iCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;oCACb,qBAAqB,CAAC,CAAC,CAAC;AAC1B,gCAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,IACF,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,4BAAA,EAAE,EAAE,KAAK;AACT,4BAAA,EAAE,EAAE,KAAK;AACT,4BAAA,KAAK,EAAE,eAAe;AACtB,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,MAAM,EAAE,SAAS;AACjB,4BAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;4BACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC1C,yBAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;4BACb,qBAAqB,CAAC,CAAC,CAAC;AAC1B,wBAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,EACN,0BAA0B,KACzBA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,EACpD,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,MAAM,GAAG,oBAAoB,GAAG,kBAAkB,EAAA,QAAA,EAE9DA,GAAA,CAAC,KAAK,IAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,CAAC,EAAA,CAAI,EAAA,CACjD,CACR,CAAA,EAAA,CACI,CACR,EACDA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,MAAM,IAAI,gBAAgB,IAAI,CAAC,qBAAqB,KACnDA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EAClC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAC1C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAA,QAAA,EAE7E,gBAAgB,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpF,wBAAA,QACED,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,MAAM,EAAE,mBAAmB;AAC3B,gCAAA,YAAY,EAAE,QAAQ;AACtB,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,QAAQ,EAAE,QAAQ;AAClB,gCAAA,EAAE,EAAE,MAAM;AACV,gCAAA,EAAE,EAAE,MAAM;AACV,gCAAA,EAAE,EAAE,KAAK;gCACT,EAAE,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK;AAC/B,gCAAA,UAAU,EAAE,QAAQ;AACpB,gCAAA,UAAU,EAAE,SAAS;AACrB,gCAAA,cAAc,EAAE,eAAe;6BAChC,EACD,OAAO,EAAE,gBAAgB,EAAA,QAAA,EAAA,CAGzBA,eAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC3DA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,CAAA,+BAAA,EAAkC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA,IAAA,CAAM,EAC1E,GAAG,EAAC,SAAS,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,EAAA,CACvE,EAAA,CACG,eACG,cAAc,CAAC,IAAI,EAAE,sBAAuB,CAAC,EAAA,4BAAA,EACvDA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,EAAE,QAAQ,EAAA,CAAQ,EAAA,OAAA,EAElGA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,gDAAA,EAAE,EAAE,KAAK;AACT,gDAAA,EAAE,EAAE,MAAM;AACV,gDAAA,KAAK,EAAE,eAAe;AACtB,gDAAA,UAAU,EAAE,GAAG;AACf,gDAAA,MAAM,EAAE,SAAS;AACjB,gDAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;gDACzC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;AAChD,6CAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;gDACb,CAAC,CAAC,eAAe,EAAE;gDACnB,uBAAuB,CAAC,sBAAsB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;gDAC5E,SAAS,CAAC,KAAK,CAAC;AAClB,4CAAA,CAAC,YAEA,CAAA,aAAA,CAAe,EAAA,CACX,IACF,EACPA,GAAA,CAAA,MAAA,EAAA,EACE,EAAE,EAAE;AACF,wCAAA,EAAE,EAAE,KAAK;AACT,wCAAA,KAAK,EAAE,eAAe;AACtB,wCAAA,UAAU,EAAE,GAAG;AACf,wCAAA,MAAM,EAAE,SAAS;AACjB,wCAAA,QAAQ,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;wCACzC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AACzC,wCAAA,QAAQ,EAAE,OAAO;AAClB,qCAAA,EACD,OAAO,EAAE,CAAC,CAAC,KAAI;wCACb,CAAC,CAAC,eAAe,EAAE;wCACnB,uBAAuB,CAAC,sBAAsB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;wCAC5E,SAAS,CAAC,KAAK,CAAC;oCAClB,CAAC,EAAA,QAAA,EAEA,eAAe,EAAA,CACX,CAAA,EAAA,EAjDF,IAAI,CAAC,QAAQ,CAkDb;AAEX,oBAAA,CAAC,CAAC,EAAA,CACS,CACd,GACe,CAAA,EAAA,CACb,CACR;AAEL;;;;"}

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

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

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import SafeHTMLComponent from '../../../components/SafeHTMLComponent/index.js';
 import Flex from '../../../components/uikit-sdk/Flex/index.js';
@@ -6,7 +6,20 @@ import Text from '../../../components/uikit-sdk/Text/index.js';
 
 const ProjectDescription = ({ description, isProjectView }) => {
     const [isOpen, setIsOpen] = useState(false);
-    return (jsx(Flex, { className: "description-container ape:flex ape:items-start ape:font-normal ape:text-[14px] ape:leading-[21px]", children: isProjectView && (jsxs(Fragment, { children: [jsxs(Flex, { className: "ape:flex ape:md:hidden ape:flex-col", children: [jsx(Text, { as: "div", size: "12px", className: "ape:md:text-[14px]! ape:font-normal ape:overflow-hidden ape:leading-[18px]! ape:md:leading-[21px]!", style: { maxHeight: isOpen ? 'unset' : '54px' }, children: description && jsx(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { size: "12px", className: "ape:font-normal ape:cursor-pointer", style: { color: 'var(--ape-color-primary-button)', lineHeight: '18px' }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx(Flex, { className: "ape:hidden ape:md:flex", children: jsx(SafeHTMLComponent, { html: description ?? '' }) })] })) }));
+    return (jsx(Flex, { className: "description-container", children: isProjectView && (jsxs(Fragment, { children: [jsxs(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }, children: [jsx(Text, { sx: {
+                                fontSize: ['12px', '12px', '12px', '14px'],
+                                mt: '10px',
+                                lineHeight: ['18px', '18px', '18px', '21px'],
+                                fontWeight: 400,
+                                overflow: 'hidden',
+                                maxHeight: isOpen ? 'unset' : '54px',
+                            }, children: description && jsx(SafeHTMLComponent, { html: description }) }), !isOpen && (jsxs(Text, { sx: {
+                                color: 'primaryButton',
+                                fontSize: '12px',
+                                lineHeight: '18px',
+                                fontWeight: 400,
+                                cursor: 'pointer',
+                            }, onClick: () => setIsOpen(true), children: ["View More ", '>'] }))] }), jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'] }, children: jsx(SafeHTMLComponent, { html: description ?? '' }) })] })) }));
 };
 
 export { ProjectDescription as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ProjectDescription.js","sources":["../../../../src/views/BuyBond/components/ProjectDescription.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport SafeHTMLComponent from '../../../components/SafeHTMLComponent'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Text from '../../../components/uikit-sdk/Text'\n\nconst ProjectDescription = ({ description, isProjectView }: { description?: string; isProjectView?: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  return (\n    <Flex className=\"description-container ape:flex ape:items-start ape:font-normal ape:text-[14px] ape:leading-[21px]\">\n      {isProjectView && (\n        <>\n          <Flex className=\"ape:flex ape:md:hidden ape:flex-col\">\n            <Text\n              as=\"div\"\n              size=\"12px\"\n              className=\"ape:md:text-[14px]! ape:font-normal ape:overflow-hidden ape:leading-[18px]! ape:md:leading-[21px]!\"\n              style={{ maxHeight: isOpen ? 'unset' : '54px' }}\n            >\n              {description && <SafeHTMLComponent html={description} />}\n            </Text>\n            {!isOpen && (\n              <Text\n                size=\"12px\"\n                className=\"ape:font-normal ape:cursor-pointer\"\n                style={{ color: 'var(--ape-color-primary-button)', lineHeight: '18px' }}\n                onClick={() => setIsOpen(true)}\n              >\n                View More {'>'}\n              </Text>\n            )}\n          </Flex>\n          <Flex className=\"ape:hidden ape:md:flex\">\n            <SafeHTMLComponent html={description ?? ''} />\n          </Flex>\n        </>\n      )}\n    </Flex>\n  )\n}\n\nexport default ProjectDescription\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAqD,KAAI;IAC/G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mGAAmG,EAAA,QAAA,EAChH,aAAa,KACZC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oGAAoG,EAC9G,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,QAAA,EAE9C,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,EAAA,CACnD,EACN,CAAC,MAAM,KACNC,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,KAAK,EAAE,iCAAiC,EAAE,UAAU,EAAE,MAAM,EAAE,EACvE,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,EAEnB,GAAG,CAAA,EAAA,CACT,CACR,CAAA,EAAA,CACI,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACtCA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,IAAI,EAAE,EAAA,CAAI,EAAA,CACzC,CAAA,EAAA,CACN,CACJ,EAAA,CACI;AAEX;;;;"}
+{"version":3,"file":"ProjectDescription.js","sources":["../../../../src/views/BuyBond/components/ProjectDescription.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport SafeHTMLComponent from '../../../components/SafeHTMLComponent'\nimport Flex from '../../../components/uikit-sdk/Flex'\nimport Text from '../../../components/uikit-sdk/Text'\n\nconst ProjectDescription = ({ description, isProjectView }: { description?: string; isProjectView?: boolean }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false)\n\n  return (\n    <Flex className=\"description-container\">\n      {isProjectView && (\n        <>\n          <Flex sx={{ display: ['flex', 'flex', 'flex', 'none'], flexDirection: 'column' }}>\n            <Text\n              sx={{\n                fontSize: ['12px', '12px', '12px', '14px'],\n                mt: '10px',\n                lineHeight: ['18px', '18px', '18px', '21px'],\n                fontWeight: 400,\n                overflow: 'hidden',\n                maxHeight: isOpen ? 'unset' : '54px',\n              }}\n            >\n              {description && <SafeHTMLComponent html={description} />}\n            </Text>\n            {!isOpen && (\n              <Text\n                sx={{\n                  color: 'primaryButton',\n                  fontSize: '12px',\n                  lineHeight: '18px',\n                  fontWeight: 400,\n                  cursor: 'pointer',\n                }}\n                onClick={() => setIsOpen(true)}\n              >\n                View More {'>'}\n              </Text>\n            )}\n          </Flex>\n          <Flex sx={{ display: ['none', 'none', 'none', 'flex'] }}>\n            <SafeHTMLComponent html={description ?? ''} />\n          </Flex>\n        </>\n      )}\n    </Flex>\n  )\n}\n\nexport default ProjectDescription\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAqD,KAAI;IAC/G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;AAEpD,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EACpC,aAAa,KACZC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAC9ED,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;gCACF,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC1C,gCAAA,EAAE,EAAE,MAAM;gCACV,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC5C,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,QAAQ,EAAE,QAAQ;gCAClB,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;AACrC,6BAAA,EAAA,QAAA,EAEA,WAAW,IAAIA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,EAAA,CAAI,GACnD,EACN,CAAC,MAAM,KACNC,KAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,KAAK,EAAE,eAAe;AACtB,gCAAA,QAAQ,EAAE,MAAM;AAChB,gCAAA,UAAU,EAAE,MAAM;AAClB,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,MAAM,EAAE,SAAS;6BAClB,EACD,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,EAEnB,GAAG,IACT,CACR,CAAA,EAAA,CACI,EACPD,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EACrDA,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,WAAW,IAAI,EAAE,EAAA,CAAI,GACzC,CAAA,EAAA,CACN,CACJ,EAAA,CACI;AAEX;;;;"}

package/dist/views/BuyBond/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Providers from '../../providers/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import BuyBondModal from './BuyBondModal.js';
 
 const BuyBondModalWithProviders = (props) => {
     useSDKConfig(props);
-    return (jsx(Providers, { children: jsx(BuyBondModal, { ...props }) }));
+    return (jsx(Providers, { theme: props.theme, children: jsx(BuyBondModal, { ...props }) }));
 };
 
 export { BuyBondModalWithProviders as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/views/BuyBond/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport { BuyComponentProps } from './BuyComponent'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\nimport BuyBondModal from './BuyBondModal'\n\ninterface Props extends SDKPropsDTO, BuyComponentProps {}\n\nconst BuyBondModalWithProviders: React.FC<Props> = (props) => {\n  useSDKConfig(props)\n\n  return (\n    <Providers>\n      <BuyBondModal {...props} />\n    </Providers>\n  )\n}\n\nexport default BuyBondModalWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,yBAAyB,GAAoB,CAAC,KAAK,KAAI;IAC3D,YAAY,CAAC,KAAK,CAAC;IAEnB,QACEA,GAAA,CAAC,SAAS,EAAA,EAAA,QAAA,EACRA,GAAA,CAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,EAAA,CACjB;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/views/BuyBond/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport { BuyComponentProps } from './BuyComponent'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\nimport BuyBondModal from './BuyBondModal'\n\ninterface Props extends SDKPropsDTO, BuyComponentProps {}\n\nconst BuyBondModalWithProviders: React.FC<Props> = (props) => {\n  useSDKConfig(props)\n\n  return (\n    <Providers theme={props.theme}>\n      <BuyBondModal {...props} />\n    </Providers>\n  )\n}\n\nexport default BuyBondModalWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,yBAAyB,GAAoB,CAAC,KAAK,KAAI;IAC3D,YAAY,CAAC,KAAK,CAAC;AAEnB,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,QAAA,EAC3BA,IAAC,YAAY,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI,EAAA,CACjB;AAEhB;;;;"}

package/dist/views/BuyBond/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'buyContainer' | 'cardContainer' | 'infoRowsContainer' | 'infoRow' | 'infoTitle' | 'infoData', ThemeUIStyleObject>;

package/dist/views/BuyBond/styles.js

@@ -0,0 +1,33 @@
+const styles = {
+    buyContainer: {
+        width: '100%',
+        mb: ['30px', '30px', '30px', '0px'],
+        flexDirection: 'column',
+    },
+    cardContainer: {
+        width: '100%',
+        background: 'white2',
+        borderRadius: 'normal',
+        flexDirection: 'column',
+    },
+    infoRowsContainer: {
+        width: '100%',
+        flexDirection: 'column',
+        mb: '10px',
+    },
+    infoRow: {
+        width: '100%',
+        justifyContent: 'space-between',
+    },
+    infoTitle: {
+        fontSize: '12px',
+        fontWeight: 400,
+    },
+    infoData: {
+        fontSize: '12px',
+        fontWeight: 700,
+    },
+};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/views/BuyBond/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  'buyContainer' | 'cardContainer' | 'infoRowsContainer' | 'infoRow' | 'infoTitle' | 'infoData',\n  ThemeUIStyleObject\n> = {\n  buyContainer: {\n    width: '100%',\n    mb: ['30px', '30px', '30px', '0px'],\n    flexDirection: 'column',\n  },\n  cardContainer: {\n    width: '100%',\n    background: 'white2',\n    borderRadius: 'normal',\n    flexDirection: 'column',\n  },\n  infoRowsContainer: {\n    width: '100%',\n    flexDirection: 'column',\n    mb: '10px',\n  },\n  infoRow: {\n    width: '100%',\n    justifyContent: 'space-between',\n  },\n  infoTitle: {\n    fontSize: '12px',\n    fontWeight: 400,\n  },\n  infoData: {\n    fontSize: '12px',\n    fontWeight: 700,\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAGf;AACF,IAAA,YAAY,EAAE;AACZ,QAAA,KAAK,EAAE,MAAM;QACb,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;AACnC,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,aAAa,EAAE,QAAQ;AACxB,KAAA;AACD,IAAA,iBAAiB,EAAE;AACjB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;;;;;"}

package/dist/views/BuyBond/utils.js

@@ -20,7 +20,6 @@ function calculateOptimizationData(inputAmount, userPoints = '0', bond, inputTok
     }
     const currentTierData = findHighestTrueBondPrice(userPoints, trueBondPrices);
     const currentTier = getUserTier(userPoints);
-    console.log(currentTier);
     // const bonus_curr = 1 + currentTierData?.bonusWithFee! / 100
     const currentPoints = BigInt(userPoints);
     const inputAmountUSD = parseFloat(inputAmount || '0') * inputTokenPriceUsd;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/views/BuyBond/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\nimport { getUserTier, NewTiers, TIERS_NAMES } from '../../state/tiers/useTierPoints'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport function calculateOptimizationData(\n  inputAmount: string,\n  userPoints = '0',\n  bond: BondsData,\n  inputTokenPriceUsd = 0,\n  abondPriceUsd?: number,\n) {\n  if (bond.chainId === ChainId.SUI || bond.chainId === ChainId.APTOS || bond.chainId === ChainId.SOL) return null\n\n  const { trueBondPrices } = bond\n\n  if (!trueBondPrices) {\n    console.log('no truebondprices')\n    return null\n  }\n  if (!abondPriceUsd) {\n    console.log('No Abond Price')\n    return null\n  }\n\n  if (inputTokenPriceUsd <= 0) {\n    console.log('missing token price')\n    return null\n  }\n\n  const currentTierData = findHighestTrueBondPrice(userPoints, trueBondPrices)\n  const currentTier = getUserTier(userPoints)!\n  console.log(currentTier)\n\n  // const bonus_curr = 1 + currentTierData?.bonusWithFee! / 100\n  const currentPoints = BigInt(userPoints)\n\n  const inputAmountUSD = parseFloat(inputAmount || '0') * inputTokenPriceUsd\n\n  const tierBoostRate = (bond.tierBoostRate ?? 0) / 100\n  const tierBoostUsd = inputAmountUSD * tierBoostRate\n  const feeInAbond = tierBoostUsd / abondPriceUsd\n  const tierBoostPoints = feeInAbond * 4\n  const currentPrice = parseFloat(currentTierData?.trueBondPrice!)\n\n  const dataToReturn: Record<\n    number,\n    {\n      tier: number\n      tierName: string\n      isProfitable: boolean\n      tierCostUSD: number\n      minBreakevenWithFeeUSD: number\n      necessaryPointsToUpgrade: number\n    }\n  > = {}\n\n  for (const tierData of trueBondPrices) {\n    if (tierData.boost <= currentTier) continue\n    // @ts-ignore\n    const tierName = TIERS_NAMES[tierData.boost]\n\n    const pointsNeededWei = BigInt(tierData.points) - currentPoints\n    const abondNeededRaw = Math.ceil(Number(pointsNeededWei) / 1e18 / 4)\n\n    const tierCostUsd = abondNeededRaw * abondPriceUsd\n    const newPrice = parseFloat(tierData.trueBondPrice)\n    const priceDiff = (currentPrice - newPrice) / currentPrice\n\n    // const newBonusWithThisTier = tierData.bonusWithFee\n\n    // const bonus_new = 1 + newBonusWithThisTier / 100\n\n    // const denominator = bonus_new - bonus_curr + tierBoostRate\n    const denominator = (1 - tierBoostRate) * priceDiff + tierBoostRate\n    const minBreakeven = denominator > 0 ? tierCostUsd / denominator : Infinity\n    const minBreakevenWithFee = minBreakeven * 1.05 + 0.1\n\n    // for debugging purposes this two should match\n    // const originalOutputUsd = minBreakeven * bonus_curr\n    // const outputAfterUpgrade = (minBreakeven - (tierCostUsd - minBreakeven * tierBoostRate)) * bonus_new\n\n    const isProfitable = inputAmountUSD > (minBreakevenWithFee ?? 0)\n\n    dataToReturn[tierData.boost] = {\n      tier: tierData.boost as NewTiers,\n      tierName,\n      isProfitable,\n      tierCostUSD: tierCostUsd,\n      minBreakevenWithFeeUSD: minBreakevenWithFee,\n      necessaryPointsToUpgrade: abondNeededRaw * 4,\n    }\n  }\n\n  const profitableTiers = Object.values(dataToReturn).filter((item) => item.isProfitable)\n  const highestProfitableTier = profitableTiers[profitableTiers.length - 1]\n\n  return { tierBoostPoints, highestProfitableTier, data: Object.values(dataToReturn) }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../src/views/BuyBond/utils.ts"],"sourcesContent":["import { BondsData } from '../../types/bonds'\nimport { findHighestTrueBondPrice } from '../../utils/bondPriceHelpers'\nimport { getUserTier, NewTiers, TIERS_NAMES } from '../../state/tiers/useTierPoints'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nexport function calculateOptimizationData(\n  inputAmount: string,\n  userPoints = '0',\n  bond: BondsData,\n  inputTokenPriceUsd = 0,\n  abondPriceUsd?: number,\n) {\n  if (bond.chainId === ChainId.SUI || bond.chainId === ChainId.APTOS || bond.chainId === ChainId.SOL) return null\n\n  const { trueBondPrices } = bond\n\n  if (!trueBondPrices) {\n    console.log('no truebondprices')\n    return null\n  }\n  if (!abondPriceUsd) {\n    console.log('No Abond Price')\n    return null\n  }\n\n  if (inputTokenPriceUsd <= 0) {\n    console.log('missing token price')\n    return null\n  }\n\n  const currentTierData = findHighestTrueBondPrice(userPoints, trueBondPrices)\n  const currentTier = getUserTier(userPoints)!\n\n  // const bonus_curr = 1 + currentTierData?.bonusWithFee! / 100\n  const currentPoints = BigInt(userPoints)\n\n  const inputAmountUSD = parseFloat(inputAmount || '0') * inputTokenPriceUsd\n\n  const tierBoostRate = (bond.tierBoostRate ?? 0) / 100\n  const tierBoostUsd = inputAmountUSD * tierBoostRate\n  const feeInAbond = tierBoostUsd / abondPriceUsd\n  const tierBoostPoints = feeInAbond * 4\n  const currentPrice = parseFloat(currentTierData?.trueBondPrice!)\n\n  const dataToReturn: Record<\n    number,\n    {\n      tier: number\n      tierName: string\n      isProfitable: boolean\n      tierCostUSD: number\n      minBreakevenWithFeeUSD: number\n      necessaryPointsToUpgrade: number\n    }\n  > = {}\n\n  for (const tierData of trueBondPrices) {\n    if (tierData.boost <= currentTier) continue\n    // @ts-ignore\n    const tierName = TIERS_NAMES[tierData.boost]\n\n    const pointsNeededWei = BigInt(tierData.points) - currentPoints\n    const abondNeededRaw = Math.ceil(Number(pointsNeededWei) / 1e18 / 4)\n\n    const tierCostUsd = abondNeededRaw * abondPriceUsd\n    const newPrice = parseFloat(tierData.trueBondPrice)\n    const priceDiff = (currentPrice - newPrice) / currentPrice\n\n    // const newBonusWithThisTier = tierData.bonusWithFee\n\n    // const bonus_new = 1 + newBonusWithThisTier / 100\n\n    // const denominator = bonus_new - bonus_curr + tierBoostRate\n    const denominator = (1 - tierBoostRate) * priceDiff + tierBoostRate\n    const minBreakeven = denominator > 0 ? tierCostUsd / denominator : Infinity\n    const minBreakevenWithFee = minBreakeven * 1.05 + 0.1\n\n    // for debugging purposes this two should match\n    // const originalOutputUsd = minBreakeven * bonus_curr\n    // const outputAfterUpgrade = (minBreakeven - (tierCostUsd - minBreakeven * tierBoostRate)) * bonus_new\n\n    const isProfitable = inputAmountUSD > (minBreakevenWithFee ?? 0)\n\n    dataToReturn[tierData.boost] = {\n      tier: tierData.boost as NewTiers,\n      tierName,\n      isProfitable,\n      tierCostUSD: tierCostUsd,\n      minBreakevenWithFeeUSD: minBreakevenWithFee,\n      necessaryPointsToUpgrade: abondNeededRaw * 4,\n    }\n  }\n\n  const profitableTiers = Object.values(dataToReturn).filter((item) => item.isProfitable)\n  const highestProfitableTier = profitableTiers[profitableTiers.length - 1]\n\n  return { tierBoostPoints, highestProfitableTier, data: Object.values(dataToReturn) }\n}\n"],"names":[],"mappings":"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"}

package/dist/views/FullBondsView/FullBondsView.d.ts

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

package/dist/views/FullBondsView/FullBondsView.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
 import YourBonds from '../YourBonds/YourBonds.js';
 import Bonds from '../Bonds/Bonds.js';
@@ -9,7 +9,7 @@ import Toggle from '../../components/uikit-sdk/Toggle/index.js';
 const FullBondsView = () => {
     const { activeView, handleToogle } = useActiveView();
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "full-bonds-view-container ape:w-full ape:flex ape:flex-col ape:relative", children: [(SDKConfig.solAddress || SDKConfig.evmAddress) && (jsxs(Flex, { className: "ape:justify-center ape:my-[20px]", children: ["Debugger mode for address: ", SDKConfig.solAddress || SDKConfig.evmAddress] })), jsx("div", { className: "toggle-container ape:w-full ape:p-[10px] ape:min-[1000px]:p-0 ape:min-[1000px]:w-[300px] ape:min-[1000px]:absolute ape:min-[1000px]:left-[10px]", children: jsx(Toggle, { options: [BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS], activeOption: activeView, handleToggle: handleToogle }) }), jsx(Flex, { className: "ape:w-full", children: activeView === BondsViewOptions.BONDSMARKET ? jsx(Bonds, {}) : jsx(YourBonds, {}) })] }));
+    return (jsxs("div", { className: "full-bonds-view-container", children: [(SDKConfig.solAddress || SDKConfig.evmAddress) && (jsxs(Flex, { sx: { justifyContent: 'center', my: '20px' }, children: ["Debugger mode for address: ", SDKConfig.solAddress || SDKConfig.evmAddress] })), jsx("div", { className: "toggle-container", children: jsx(Toggle, { options: [BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS], activeOption: activeView, handleToggle: handleToogle }) }), jsx(Flex, { sx: { width: '100%' }, children: activeView === BondsViewOptions.BONDSMARKET ? jsx(Bonds, {}) : jsx(YourBonds, {}) })] }));
 };
 
 export { FullBondsView as default };

package/dist/views/FullBondsView/FullBondsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullBondsView.js","sources":["../../../src/views/FullBondsView/FullBondsView.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport YourBonds from '../YourBonds/YourBonds'\nimport Bonds from '../Bonds/Bonds'\nimport useActiveView, { BondsViewOptions } from '../../state/activeView'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Toggle from '../../components/uikit-sdk/Toggle'\n\nconst FullBondsView = () => {\n  const { activeView, handleToogle } = useActiveView()\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"full-bonds-view-container ape:w-full ape:flex ape:flex-col ape:relative\">\n      {(SDKConfig.solAddress || SDKConfig.evmAddress) && (\n        <Flex className=\"ape:justify-center ape:my-[20px]\">\n          Debugger mode for address: {SDKConfig.solAddress || SDKConfig.evmAddress}\n        </Flex>\n      )}\n      <div className=\"toggle-container ape:w-full ape:p-[10px] ape:min-[1000px]:p-0 ape:min-[1000px]:w-[300px] ape:min-[1000px]:absolute ape:min-[1000px]:left-[10px]\">\n        <Toggle\n          options={[BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS]}\n          activeOption={activeView}\n          handleToggle={handleToogle}\n        />\n      </div>\n      <Flex className=\"ape:w-full\">{activeView === BondsViewOptions.BONDSMARKET ? <Bonds /> : <YourBonds />}</Flex>\n    </div>\n  )\n}\n\nexport default FullBondsView\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA,MAAM,aAAa,GAAG,MAAK;IACzB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE;AACpD,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAEhC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yEAAyE,EAAA,QAAA,EAAA,CACrF,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,MAC5CA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAAA,6BAAA,EACpB,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,CAAA,EAAA,CACnE,CACR,EACDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iJAAiJ,EAAA,QAAA,EAC9JA,IAAC,MAAM,EAAA,EACL,OAAO,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,SAAS,CAAC,EACnE,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAAA,CAC1B,EAAA,CACE,EACNA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAAE,UAAU,KAAK,gBAAgB,CAAC,WAAW,GAAGA,GAAA,CAAC,KAAK,KAAG,GAAGA,GAAA,CAAC,SAAS,KAAG,EAAA,CAAQ,CAAA,EAAA,CACzG;AAEV;;;;"}
+{"version":3,"file":"FullBondsView.js","sources":["../../../src/views/FullBondsView/FullBondsView.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport YourBonds from '../YourBonds/YourBonds'\nimport Bonds from '../Bonds/Bonds'\nimport useActiveView, { BondsViewOptions } from '../../state/activeView'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport Toggle from '../../components/uikit-sdk/Toggle'\n\nconst FullBondsView = () => {\n  const { activeView, handleToogle } = useActiveView()\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"full-bonds-view-container\">\n      {(SDKConfig.solAddress || SDKConfig.evmAddress) && (\n        <Flex sx={{ justifyContent: 'center', my: '20px' }}>\n          Debugger mode for address: {SDKConfig.solAddress || SDKConfig.evmAddress}\n        </Flex>\n      )}\n      <div className=\"toggle-container\">\n        <Toggle\n          options={[BondsViewOptions.BONDSMARKET, BondsViewOptions.YOURBONDS]}\n          activeOption={activeView}\n          handleToggle={handleToogle}\n        />\n      </div>\n      <Flex sx={{ width: '100%' }}>{activeView === BondsViewOptions.BONDSMARKET ? <Bonds /> : <YourBonds />}</Flex>\n    </div>\n  )\n}\n\nexport default FullBondsView\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA,MAAM,aAAa,GAAG,MAAK;IACzB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE;AACpD,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;IAEhC,QACEA,cAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAA,CACvC,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,MAC5CA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAAA,6BAAA,EACpB,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,UAAU,CAAA,EAAA,CACnE,CACR,EACDC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAC/BA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC,SAAS,CAAC,EACnE,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,YAAY,EAAA,CAC1B,EAAA,CACE,EACNA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,UAAU,KAAK,gBAAgB,CAAC,WAAW,GAAGA,IAAC,KAAK,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,SAAS,EAAA,EAAA,CAAG,EAAA,CAAQ,CAAA,EAAA,CACzG;AAEV;;;;"}

package/dist/views/FullBondsView/index.js

@@ -1,11 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx } from 'theme-ui/jsx-runtime';
 import Providers from '../../providers/index.js';
 import FullBondsView from './FullBondsView.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 
 const FullBondsViewWithProviders = (props) => {
     useSDKConfig(props);
-    return (jsx(Providers, { children: jsx(FullBondsView, {}) }));
+    return (jsx(Providers, { theme: props?.theme, children: jsx(FullBondsView, {}) }));
 };
 
 export { FullBondsViewWithProviders as default };

package/dist/views/FullBondsView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/views/FullBondsView/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport FullBondsView from './FullBondsView'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst FullBondsViewWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers>\n      <FullBondsView />\n    </Providers>\n  )\n}\n\nexport default FullBondsViewWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,0BAA0B,GAA0B,CAAC,KAAK,KAAI;IAClE,YAAY,CAAC,KAAK,CAAC;IACnB,QACEA,IAAC,SAAS,EAAA,EAAA,QAAA,EACRA,IAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACP;AAEhB;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/views/FullBondsView/index.tsx"],"sourcesContent":["import React from 'react'\nimport Providers from '../../providers'\nimport FullBondsView from './FullBondsView'\nimport { SDKPropsDTO, useSDKConfig } from '../../state/useSDKConfig'\n\nconst FullBondsViewWithProviders: React.FC<SDKPropsDTO> = (props) => {\n  useSDKConfig(props)\n  return (\n    <Providers theme={props?.theme}>\n      <FullBondsView />\n    </Providers>\n  )\n}\n\nexport default FullBondsViewWithProviders\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,0BAA0B,GAA0B,CAAC,KAAK,KAAI;IAClE,YAAY,CAAC,KAAK,CAAC;AACnB,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,YAC5BA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACP;AAEhB;;;;"}

package/dist/views/LifiModal/LifiModal.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 declare const LifiModal: ({ bondChain, principalToken, onDismiss, }: {
     bondChain?: number;
     principalToken?: string;
     onDismiss?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default LifiModal;

package/dist/views/LifiModal/LifiModal.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { LiFiWidget } from '@lifi/widget';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader.js';
@@ -61,7 +61,7 @@ const LifiModal = ({ bondChain, principalToken, onDismiss, }) => {
             },
         },
     };
-    return (jsxs(Modal, { className: "ape:min-w-[450px] ape:justify-center ape:items-center ape:p-0", children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true, className: "ape:p-[20px_20px_0_20px]", children: jsx(Text, { size: "22px", weight: 700, style: { lineHeight: '33px' }, children: "Swap & Bridge with LIFI" }) }), jsx(LiFiWidget, { ...config })] }));
+    return (jsxs(Modal, { sx: { minWidth: '450px', justifyContent: 'center', alignItems: 'center', p: '0px' }, children: [jsx(ModalHeader, { onDismiss: onDismiss, hideDivider: true, sx: { p: '20px 20px 0 20px' }, children: jsx(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '33px' }, children: "Swap & Bridge with LIFI" }) }), jsx(LiFiWidget, { ...config })] }));
 };
 
 export { LifiModal as default };

package/dist/views/LifiModal/LifiModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"LifiModal.js","sources":["../../../src/views/LifiModal/LifiModal.tsx"],"sourcesContent":["import React from 'react'\nimport { LiFiWidget } from '@lifi/widget'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst getFees = async (fromTokenSymbol: string, toTokenSymbol: string): Promise<number> => {\n  const stableCoins = ['FRAX', 'USDC', 'USDT', 'DAI', 'BUSD', 'TUSD', 'USDD', 'FDUSD']\n  const isFromStable = stableCoins.includes(fromTokenSymbol)\n  const isToStable = stableCoins.includes(toTokenSymbol)\n  if (toTokenSymbol.toLowerCase() === 'abond') {\n    return 0\n  }\n  return isFromStable && isToStable ? 0.001 : 0.003\n}\n\nconst LifiModal = ({\n  bondChain,\n  principalToken,\n  onDismiss,\n}: {\n  bondChain?: number\n  principalToken?: string\n  onDismiss?: () => void\n}) => {\n  const config = {\n    appearance: 'dark' as const,\n    loadFonts: false,\n    theme: {\n      typography: {\n        fontFamily: 'Poppins',\n      },\n      colorSchemes: {\n        dark: {\n          palette: {\n            background: {\n              default: '#161420',\n              paper: '#1F1D29',\n            },\n            primary: {\n              main: '#6560C5',\n            },\n            secondary: {\n              main: '#6560C5',\n            },\n          },\n        },\n      },\n      container: {\n        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',\n        borderRadius: '16px',\n      },\n    },\n    // fromToken: 'BNB',\n    // fromChain: ChainId.BSC,\n    toChain: bondChain,\n    toToken: principalToken,\n    sdkConfig: {\n      rpcUrls: {\n        [1151111081099710]: [\n          'https://ancient-cold-sailboat.solana-mainnet.quiknode.pro/da13400ad8d0035313f3e71c6a37c107d0d0334b',\n        ],\n      },\n    },\n    variant: 'wide' as const,\n    integrator: 'apeswap',\n    feeConfig: {\n      calculateFee: async (params: any) => {\n        return getFees(params.fromToken.symbol, params.toToken.symbol)\n      },\n    },\n  }\n\n  return (\n    <Modal className=\"ape:min-w-[450px] ape:justify-center ape:items-center ape:p-0\">\n      <ModalHeader onDismiss={onDismiss} hideDivider className=\"ape:p-[20px_20px_0_20px]\">\n        <Text size=\"22px\" weight={700} style={{ lineHeight: '33px' }}>\n          Swap & Bridge with LIFI\n        </Text>\n      </ModalHeader>\n      <LiFiWidget {...config} />\n    </Modal>\n  )\n}\n\nexport default LifiModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,OAAO,eAAuB,EAAE,aAAqB,KAAqB;AACxF,IAAA,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;IACpF,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC;IAC1D,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;AACtD,IAAA,IAAI,aAAa,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;AAC3C,QAAA,OAAO,CAAC;IACV;IACA,OAAO,YAAY,IAAI,UAAU,GAAG,KAAK,GAAG,KAAK;AACnD,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,cAAc,EACd,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,UAAU,EAAE,MAAe;AAC3B,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE;AACV,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE;AACP,wBAAA,UAAU,EAAE;AACV,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,KAAK,EAAE,SAAS;AACjB,yBAAA;AACD,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACD,wBAAA,SAAS,EAAE;AACT,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,SAAS,EAAE;AACT,gBAAA,SAAS,EAAE,kCAAkC;AAC7C,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;;;AAGD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE;AACT,YAAA,OAAO,EAAE;gBACP,CAAC,gBAAgB,GAAG;oBAClB,oGAAoG;AACrG,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,OAAO,EAAE,MAAe;AACxB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,YAAY,EAAE,OAAO,MAAW,KAAI;AAClC,gBAAA,OAAO,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAChE,CAAC;AACF,SAAA;KACF;IAED,QACEA,KAAC,KAAK,EAAA,EAAC,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAA,CAC9EC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAA,IAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EACjFA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,yBAAA,EAAA,CAErD,EAAA,CACK,EACdA,GAAA,CAAC,UAAU,OAAK,MAAM,EAAA,CAAI,CAAA,EAAA,CACpB;AAEZ;;;;"}
+{"version":3,"file":"LifiModal.js","sources":["../../../src/views/LifiModal/LifiModal.tsx"],"sourcesContent":["import React from 'react'\nimport { LiFiWidget } from '@lifi/widget'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst getFees = async (fromTokenSymbol: string, toTokenSymbol: string): Promise<number> => {\n  const stableCoins = ['FRAX', 'USDC', 'USDT', 'DAI', 'BUSD', 'TUSD', 'USDD', 'FDUSD']\n  const isFromStable = stableCoins.includes(fromTokenSymbol)\n  const isToStable = stableCoins.includes(toTokenSymbol)\n  if (toTokenSymbol.toLowerCase() === 'abond') {\n    return 0\n  }\n  return isFromStable && isToStable ? 0.001 : 0.003\n}\n\nconst LifiModal = ({\n  bondChain,\n  principalToken,\n  onDismiss,\n}: {\n  bondChain?: number\n  principalToken?: string\n  onDismiss?: () => void\n}) => {\n  const config = {\n    appearance: 'dark' as const,\n    loadFonts: false,\n    theme: {\n      typography: {\n        fontFamily: 'Poppins',\n      },\n      colorSchemes: {\n        dark: {\n          palette: {\n            background: {\n              default: '#161420',\n              paper: '#1F1D29',\n            },\n            primary: {\n              main: '#6560C5',\n            },\n            secondary: {\n              main: '#6560C5',\n            },\n          },\n        },\n      },\n      container: {\n        boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',\n        borderRadius: '16px',\n      },\n    },\n    // fromToken: 'BNB',\n    // fromChain: ChainId.BSC,\n    toChain: bondChain,\n    toToken: principalToken,\n    sdkConfig: {\n      rpcUrls: {\n        [1151111081099710]: [\n          'https://ancient-cold-sailboat.solana-mainnet.quiknode.pro/da13400ad8d0035313f3e71c6a37c107d0d0334b',\n        ],\n      },\n    },\n    variant: 'wide' as const,\n    integrator: 'apeswap',\n    feeConfig: {\n      calculateFee: async (params: any) => {\n        return getFees(params.fromToken.symbol, params.toToken.symbol)\n      },\n    },\n  }\n\n  return (\n    <Modal sx={{ minWidth: '450px', justifyContent: 'center', alignItems: 'center', p: '0px' }}>\n      <ModalHeader onDismiss={onDismiss} hideDivider sx={{ p: '20px 20px 0 20px' }}>\n        <Text sx={{ fontSize: '22px', fontWeight: 700, lineHeight: '33px' }}>Swap & Bridge with LIFI</Text>\n      </ModalHeader>\n      <LiFiWidget {...config} />\n    </Modal>\n  )\n}\n\nexport default LifiModal\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMA,MAAM,OAAO,GAAG,OAAO,eAAuB,EAAE,aAAqB,KAAqB;AACxF,IAAA,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;IACpF,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,eAAe,CAAC;IAC1D,MAAM,UAAU,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC;AACtD,IAAA,IAAI,aAAa,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;AAC3C,QAAA,OAAO,CAAC;IACV;IACA,OAAO,YAAY,IAAI,UAAU,GAAG,KAAK,GAAG,KAAK;AACnD,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,cAAc,EACd,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,UAAU,EAAE,MAAe;AAC3B,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,KAAK,EAAE;AACL,YAAA,UAAU,EAAE;AACV,gBAAA,UAAU,EAAE,SAAS;AACtB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,IAAI,EAAE;AACJ,oBAAA,OAAO,EAAE;AACP,wBAAA,UAAU,EAAE;AACV,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,KAAK,EAAE,SAAS;AACjB,yBAAA;AACD,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACD,wBAAA,SAAS,EAAE;AACT,4BAAA,IAAI,EAAE,SAAS;AAChB,yBAAA;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,SAAS,EAAE;AACT,gBAAA,SAAS,EAAE,kCAAkC;AAC7C,gBAAA,YAAY,EAAE,MAAM;AACrB,aAAA;AACF,SAAA;;;AAGD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,SAAS,EAAE;AACT,YAAA,OAAO,EAAE;gBACP,CAAC,gBAAgB,GAAG;oBAClB,oGAAoG;AACrG,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA,OAAO,EAAE,MAAe;AACxB,QAAA,UAAU,EAAE,SAAS;AACrB,QAAA,SAAS,EAAE;AACT,YAAA,YAAY,EAAE,OAAO,MAAW,KAAI;AAClC,gBAAA,OAAO,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC;YAChE,CAAC;AACF,SAAA;KACF;AAED,IAAA,QACEA,IAAA,CAAC,KAAK,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CACxFC,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAA,IAAA,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,kBAAkB,EAAE,YAC1EA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,yBAAA,EAAA,CAAgC,EAAA,CACvF,EACdA,GAAA,CAAC,UAAU,EAAA,EAAA,GAAK,MAAM,EAAA,CAAI,CAAA,EAAA,CACpB;AAEZ;;;;"}

package/dist/views/ProjectView/ProjectView.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
 import { useEffect } from 'react';
 import useBondsData from '../../state/bonds/useBondsData.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
+import { styles } from './styles.js';
 import RecommendationCards from './components/RecommendationCards/index.js';
 import NavPanel from './components/NavPanel/index.js';
 import BondCards from '../BuyBond/components/BondCards/BondCards.js';
@@ -32,7 +33,19 @@ const ProjectView = ({ bondAddress, bondChain }) => {
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch]);
-    return (jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[15px] ape:max-w-[1150px]", children: [jsx(RecommendationCards, {}), jsx(NavPanel, { contractAddress: bondData?.contractAddress?.[bondData.chainId] }), bondData && (jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:hidden ape:md:block ape:[&>div>div]:bg-white2", children: jsx(BondCards, { bondData: bondData }) })), bondData ? (jsx(Fragment, { children: jsxs(Flex, { className: "ape:w-full ape:flex-col ape:mt-[10px]", children: [jsxs(Flex, { className: "ape:w-full ape:flex-col ape:md:flex-row ape:items-stretch", children: [jsx(Flex, { className: "ape:bg-white2 ape:rounded-normal ape:w-full ape:md:w-1/2 ape:mt-[5px]", children: jsx(BuyBond, { bondAddress: bondData?.contractAddress?.[bondData.chainId], bondChain: bondData.chainId, isProjectView: true }) }), jsx(PriceChart, { selectedBond: bondData, historicalPrices: historicalPrices })] }), jsx(Flex, { className: "ape:w-full ape:mt-[10px]", children: jsx(ProjectInfo, { selectedBond: bondData }) }), jsx(Flex, { className: "ape:w-full ape:mt-[10px]", children: jsx(BondStats, { selectedBond: bondData }) }), jsx(Flex, { className: "ape:w-full ape:mt-[10px] ape:mb-[50px]", children: jsx(BondLeaderboard, { selectedBond: bondData }) })] }) })) : (jsx(Flex, { className: "ape:w-full ape:justify-center ape:text-[12px] ape:font-medium", children: "Loading..." }))] }));
+    return (jsxs(Flex, { sx: styles.mainViewContainer, children: [jsx(RecommendationCards, {}), jsx(NavPanel, { contractAddress: bondData?.contractAddress?.[bondData.chainId] }), bondData && (jsx(Flex, { sx: {
+                    width: '100%',
+                    mt: '10px',
+                    display: ['none', 'none', 'none', 'block'],
+                    '&& > div > div': {
+                        background: 'white2',
+                    },
+                }, children: jsx(BondCards, { bondData: bondData }) })), bondData ? (jsx(Fragment, { children: jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '10px' }, children: [jsxs(Flex, { sx: { width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }, children: [jsx(Flex, { sx: {
+                                        background: 'white2',
+                                        borderRadius: 'normal',
+                                        width: ['100%', '100%', '100%', '50%'],
+                                        mt: '5px',
+                                    }, children: jsx(BuyBond, { bondAddress: bondData?.contractAddress?.[bondData.chainId], bondChain: bondData.chainId, isProjectView: true }) }), jsx(PriceChart, { selectedBond: bondData, historicalPrices: historicalPrices })] }), jsx(Flex, { sx: { width: '100%', mt: '10px' }, children: jsx(ProjectInfo, { selectedBond: bondData }) }), jsx(Flex, { sx: { width: '100%', mt: '10px' }, children: jsx(BondStats, { selectedBond: bondData }) }), jsx(Flex, { sx: { width: '100%', mt: '10px', mb: '50px' }, children: jsx(BondLeaderboard, { selectedBond: bondData }) })] }) })) : (jsx(Flex, { sx: { width: '100%', justifyContent: 'center', fontSize: '12px', fontWeight: 500 }, children: "Loading..." }))] }));
 };
 
 export { ProjectView as default };