npm - @ape.swap/bonds-sdk - Versions diffs - 6.0.3 → 6.0.5 - Mend

@ape.swap/bonds-sdk 6.0.3 → 6.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -64,7 +64,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
             fontWeight: 400,
             flexDirection: 'column',
             position: 'relative',
-            cursor: 'pointer',
+            cursor: !highestProfitableTier && 'pointer',
         }, onClick: () => setIsOpen(!isOpen), children: [highestProfitableTier && (jsxs(Flex, { sx: {
                     border: '1px solid rgba(22, 101, 52, 0.53)',
                     borderRadius: 'normal',
@@ -79,21 +79,22 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
                     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(Svg, { icon: "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!" })] }), jsx(Svg, { icon: 'caret', direction: isOpen ? 'up' : 'down', width: 10 })] })), shouldRenderNextTierRow && (jsxs(Flex, { onClick: handleToggleOpen, sx: {
+                }, children: [jsxs("span", { sx: { flex: 1 }, children: [jsx("span", { sx: { display: 'inline-flex', verticalAlign: 'sub', mr: '4px' }, children: jsx(Svg, { icon: "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(Svg, { icon: '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: '20px',
+                    pr: '15px',
                     py: '2px',
                     mt: highestProfitableTier ? '3px' : '0px',
                     alignItems: 'center',
                     background: '#312341',
                     justifyContent: 'space-between',
-                }, 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), " bond purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[nextTierData?.tier], px: '3px', fontWeight: 600 }, children: nextTierData?.tierName }), "Tier.", jsx("span", { sx: {
+                    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: '15px',
+                                    mr: '5px',
                                     color: 'primaryButton',
                                     fontWeight: 500,
                                     cursor: 'pointer',
@@ -103,7 +104,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
                                     handleUpgradeNowClick(e);
                                 }, children: `Upgrade now >` })] }), jsx("span", { sx: {
                             ml: '5px',
-                            mr: '15px',
+                            mr: '5px',
                             color: 'primaryButton',
                             fontWeight: 500,
                             cursor: 'pointer',
@@ -111,7 +112,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
                             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(Svg, { icon: 'caret', direction: isOpen ? 'up' : 'down', width: 10 }) }))] })), jsx(AnimatePresence, { children: isOpen && optimizationData && (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) => {
+                        }, 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(Svg, { icon: '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',
@@ -124,7 +125,7 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
                                 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), " bond purchase will grant you a", jsx("span", { sx: { color: TIERS_COLORS[data?.tier], px: '3px', fontWeight: 600 }, children: data?.tierName }), "Tier.", jsx("span", { sx: {
+                            }, 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',
@@ -138,12 +139,12 @@ const PointsLeftForNextTier = ({ bond, inputAmount, setInputValue, inputTokenDec
                                                 setIsOpen(false);
                                             }, children: `Upgrade now >` })] }), jsx("span", { sx: {
                                         ml: '5px',
-                                        mr: '15px',
                                         color: 'primaryButton',
                                         fontWeight: 500,
                                         cursor: 'pointer',
                                         ':hover': { textDecoration: 'underline' },
                                         display: ['none', 'none', 'none', 'flex'],
+                                        minWidth: '100px',
                                     }, onClick: (e) => {
                                         e.stopPropagation();
                                         handleSetNextTierAmount(getUpgradeNowAmountUsd(data.minBreakevenWithFeeUSD));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport BigNumber from 'bignumber.js'\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 Svg from '../../../../components/uikit-sdk/Svg'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) =>\n new BigNumber(amountUsd)\n .decimalPlaces(2, BigNumber.ROUND_HALF_UP)\n .plus(UPGRADE_NOW_USD_BUFFER)\n .decimalPlaces(2, BigNumber.ROUND_CEIL)\n .toNumber()\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 = new BigNumber(inputValueInSelectedToken)\n .decimalPlaces(inputTokenDecimals, BigNumber.ROUND_CEIL)\n .toFixed(inputTokenDecimals)\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: '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 <Svg icon=\"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 <Svg icon={'caret'} direction={isOpen ? 'up' : 'down'} width={10} />\n </Flex>\n )}\n {shouldRenderNextTierRow && (\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: '20px',\n py: '2px',\n mt: highestProfitableTier ? '3px' : '0px',\n alignItems: 'center',\n background: '#312341',\n justifyContent: 'space-between',\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!)} bond purchase will grant you a\n {/@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: '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 handleUpgradeNowClick(e)\n }}\n >\n {`Upgrade now >`}\n </span>\n </span>\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: ['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 <Svg icon={'caret'} direction={isOpen ? 'up' : 'down'} width={10} />\n </span>\n )}\n </Flex>\n )}\n <AnimatePresence>\n {isOpen && optimizationData && (\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!)} bond purchase will grant you a\n {/@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 mr: '15px',\n color: 'primaryButton',\n fontWeight: 500,\n cursor: 'pointer',\n ':hover': { textDecoration: 'underline' },\n display: ['none', 'none', 'none', 'flex'],\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 {/TODO: delete this debugging table once we are sure all is ok/}\n {/<Flex sx={{ mt: '15px' }}>Debbuging table</Flex>/}\n {/<Flex/}\n {/* sx={{/}\n {/ width: '100%',/}\n {/ mt: '10px',/}\n {/ fontSize: '12px',/}\n {/ fontWeight: 400,/}\n {/ flexDirection: 'column',/}\n {/ position: 'relative',/}\n {/ '& > :nth-of-type(even)': {/}\n {/ background: 'white3',/}\n {/ },/}\n {/ '& > :nth-of-type(odd)': {/}\n {/ background: 'white4',/}\n {/ },/}\n {/ }}/}\n {/>/}\n {/ <Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>User Points</Flex>/}\n {/ <Flex>{formatNumberSI(getBalanceNumber(promotionalPoints!))}</Flex>/}\n {/ </Flex>/}\n {/ <Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ /!@ts-ignore!//}\n {/ <Flex>Points needed for {TIERS_NAMES[nextTierInfo?.nextTier]}</Flex>/}\n {/ <Flex>{formatNumberSI(nextTierInfo?.pointsNeeded)}</Flex>/}\n {/ </Flex>/}\n {/ <Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>usd Abond necessary for next tier</Flex>/}\n {/ <Flex>${formatNumberSI(necessaryUSDAmount)}</Flex>/}\n {/ </Flex>/}\n {/ <Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Fee percentage</Flex>/}\n {/ <Flex>/}\n {/ {bond.tierBoostRate}% (${formatNumberSI(feeToBeCollected)})/}\n {/ </Flex>/}\n {/ </Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Input Amount USD</Flex>/}\n {/ <Flex>${formatNumberSI(inputAmountUSD)}</Flex>/}\n {/</Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>USD Fee to be collected</Flex>/}\n {/ <Flex>${formatNumberSI(feeToBeCollected)}</Flex>/}\n {/</Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Fee in ABOND</Flex>/}\n {/ <Flex>{formatNumberSI(feeInAbond)} ABOND</Flex>/}\n {/</Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Points To Be Earned through tierBoostRate</Flex>/}\n {/ <Flex>{formatNumberSI(pointsToBeEarned, 0)}</Flex>/}\n {/</Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Enough points to upgrade?</Flex>/}\n {/ <Flex>{arePointsEnough ? 'Yes 🔥' : 'No :('}</Flex>/}\n {/</Flex>/}\n {/<Flex sx={{ width: '100%', justifyContent: 'space-between', p: '3px' }}>/}\n {/ <Flex>Fee in ABOND</Flex>/}\n {/ <Flex>{formatNumberSI(feeInAbond)} ABOND</Flex>/}\n {/</Flex>/}\n {/</Flex>*/}\n </Flex>\n )\n )\n}\n\nexport default PointsLeftForNextTier\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"PointsLeftForNextTier.js","sources":["../../../../../src/views/BuyBond/components/PointsLeftForNextTier/PointsLeftForNextTier.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport BigNumber from 'bignumber.js'\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 Svg from '../../../../components/uikit-sdk/Svg'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { calculateOptimizationData } from '../../utils'\n\nconst UPGRADE_NOW_USD_BUFFER = 0.1\n\nconst getUpgradeNowAmountUsd = (amountUsd: number) =>\n new BigNumber(amountUsd)\n .decimalPlaces(2, BigNumber.ROUND_HALF_UP)\n .plus(UPGRADE_NOW_USD_BUFFER)\n .decimalPlaces(2, BigNumber.ROUND_CEIL)\n .toNumber()\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 = new BigNumber(inputValueInSelectedToken)\n .decimalPlaces(inputTokenDecimals, BigNumber.ROUND_CEIL)\n .toFixed(inputTokenDecimals)\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 <Svg icon=\"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 && <Svg icon={'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 <Svg icon={'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":"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"}

package/dist/views/ProjectView/components/PriceChart/components/LineChart.js CHANGED Viewed

@@ -1,98 +1,95 @@
 import { jsx } from 'theme-ui/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 import { createChart, CrosshairMode, ColorType, LineStyle } from 'lightweight-charts';
 import { getFirstNonZeroDigits } from '../../../../../utils/roundNumber.js';
 import { determineValues } from './utils.js';
 const LineChart = ({ historicalPrices, hasDiscount, bondPrice, tokenPrice, }) => {
-    // reference for DOM element to create with chart
-    const data = historicalPrices;
     const chartContainerId = 'lineChartContainer';
-    const formattedData = data?.map((entry) => {
-        return {
-            time: parseInt(entry.timestamp),
-            value: parseFloat(getFirstNonZeroDigits(entry.close, 4)),
-        };
-    });
-    // pointer to the chart object
-    const [chartCreated, setChartCreated] = useState();
-    const chartInitiatedRef = useRef(false);
+    const chartRef = useRef(null);
     const discount = 1 - parseFloat(bondPrice ?? '0') / parseFloat(tokenPrice ?? '0');
     const discountToUse = discount > 0 ? discount : 0;
-    const bottomScaleMargin = discountToUse + 0.15;
+    const bottomScaleMargin = Math.min(discountToUse + 0.15, 0.85);
+    const formattedData = useMemo(() => {
+        const mapped = historicalPrices?.map((entry) => ({
+            time: parseInt(entry.timestamp),
+            value: parseFloat(getFirstNonZeroDigits(entry.close, 4)),
+        })) ?? [];
+        mapped.push({ time: Math.floor(new Date().getTime() / 1000), value: parseFloat(tokenPrice) });
+        return mapped;
+    }, [historicalPrices, tokenPrice]);
     useEffect(() => {
         const chartContainer = document.getElementById(chartContainerId);
-        if (chartContainer && !chartCreated && !chartInitiatedRef.current) {
-            console.log('creating chart');
-            const chart = createChart(chartContainer, {
-                width: 0,
-                height: 0,
-                layout: {
-                    background: {
-                        type: ColorType.Solid,
-                        color: 'transparent',
-                    },
-                    textColor: '#73728E',
-                },
-                grid: {
-                    vertLines: {
-                        color: '#73728E',
-                    },
-                    horzLines: {
-                        color: '#73728E',
-                    },
-                },
-                crosshair: {
-                    mode: CrosshairMode.Magnet,
-                },
-                rightPriceScale: {
-                    borderColor: '#73728E',
-                    visible: true,
-                    scaleMargins: {
-                        top: 0.12,
-                        bottom: bottomScaleMargin,
-                    },
-                },
-                timeScale: {
-                    borderColor: '#73728E',
-                },
-                localization: {
-                    priceFormatter: (val) => {
-                        return `$${getFirstNonZeroDigits(parseFloat(val), 3)}`;
-                    },
-                },
-            });
-            const [precision, minMove] = determineValues(parseFloat(bondPrice));
-            const areaSeries = chart.addAreaSeries({
-                lineColor: '#5E59B5',
-                topColor: '#5E59B5',
-                bottomColor: '#514CA133',
-                priceLineWidth: 2,
-                priceLineStyle: LineStyle.Dashed,
-                priceLineVisible: true,
-                priceFormat: {
-                    precision,
-                    minMove,
-                    formatter: (val) => getFirstNonZeroDigits(parseFloat(val), 3),
-                },
-            });
-            formattedData?.push({ time: Math.floor(new Date().getTime() / 1000), value: parseFloat(tokenPrice) });
-            //@ts-ignore
-            areaSeries.setData(formattedData);
-            areaSeries.createPriceLine({
-                price: parseFloat(bondPrice),
-                color: hasDiscount ? '#38A611' : '#DF4141',
-                lineWidth: 2,
-                lineStyle: LineStyle.Dashed,
-                axisLabelVisible: true,
-                title: `Bond Price`,
-            });
-            chart.timeScale().fitContent();
-            //@ts-ignore
-            setChartCreated(chart);
-            chartInitiatedRef.current = true;
-        }
-    }, [bondPrice, bottomScaleMargin, chartCreated, formattedData, hasDiscount, tokenPrice]);
+        if (!chartContainer || chartRef.current)
+            return;
+        const [precision, minMove] = determineValues(parseFloat(bondPrice));
+        const chart = createChart(chartContainer, {
+            width: 0,
+            height: 0,
+            layout: {
+                background: { type: ColorType.Solid, color: 'transparent' },
+                textColor: '#73728E',
+            },
+            grid: {
+                vertLines: { color: '#73728E' },
+                horzLines: { color: '#73728E' },
+            },
+            crosshair: { mode: CrosshairMode.Magnet },
+            rightPriceScale: {
+                borderColor: '#73728E',
+                visible: true,
+                scaleMargins: { top: 0.12, bottom: bottomScaleMargin },
+            },
+            timeScale: {
+                borderColor: '#73728E',
+                fixLeftEdge: true,
+                fixRightEdge: true,
+            },
+            handleScroll: {
+                mouseWheel: false,
+                pressedMouseMove: false,
+                horzTouchDrag: false,
+                vertTouchDrag: false,
+            },
+            handleScale: {
+                axisPressedMouseMove: false,
+                mouseWheel: false,
+                pinch: false,
+            },
+            localization: {
+                priceFormatter: (val) => `$${getFirstNonZeroDigits(parseFloat(val), 3)}`,
+            },
+        });
+        const areaSeries = chart.addAreaSeries({
+            lineColor: '#5E59B5',
+            topColor: '#5E59B5',
+            bottomColor: '#514CA133',
+            priceLineWidth: 2,
+            priceLineStyle: LineStyle.Dashed,
+            priceLineVisible: true,
+            priceFormat: {
+                precision,
+                minMove,
+                formatter: (val) => getFirstNonZeroDigits(parseFloat(val), 3),
+            },
+        });
+        //@ts-ignore
+        areaSeries.setData(formattedData);
+        areaSeries.createPriceLine({
+            price: parseFloat(bondPrice),
+            color: hasDiscount ? '#38A611' : '#DF4141',
+            lineWidth: 2,
+            lineStyle: LineStyle.Dashed,
+            axisLabelVisible: true,
+            title: 'Bond Price',
+        });
+        chart.timeScale().fitContent();
+        chartRef.current = chart;
+        return () => {
+            chart.remove();
+            chartRef.current = null;
+        };
+    }, [bondPrice, bottomScaleMargin, formattedData, hasDiscount]);
     return jsx("div", { id: chartContainerId, style: { width: '100%', height: '100%' } });
 };

package/dist/views/ProjectView/components/PriceChart/components/LineChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/LineChart.tsx"],"sourcesContent":["import React, { ~~useState,~~ useEffect, useRef } from 'react'\nimport { ColorType, createChart, CrosshairMode, LineStyle } from 'lightweight-charts'\nimport { HistoricalPrices } from '../../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../../utils/roundNumber'\nimport { determineValues } from './utils'\n\nconst LineChart = ({\n historicalPrices,\n hasDiscount,\n bondPrice,\n tokenPrice,\n}: {\n historicalPrices?: HistoricalPrices[] \| null\n hasDiscount: boolean\n bondPrice: string\n tokenPrice: string\n}) => {\n // ~~reference~~ ~~for~~ ~~DOM~~ ~~element~~ to ~~create~~ ~~with~~ ~~chart~~\n const ~~data~~ = ~~historicalPrices~~\n const ~~chartContainerId~~ = ~~'lineChartContainer'~~\n\n const formattedData = ~~data?.map~~((~~entry~~) => {\n ~~return~~ {\n time: parseInt(entry.timestamp),\n value: parseFloat(getFirstNonZeroDigits(entry.close, 4)),\n }~~\n }~~)~~\n\n //~~ ~~pointer~~ ~~to the chart object\n const~~ [~~chartCreated, setChartCreated~~] ~~= useState()~~\n ~~const~~ ~~chartInitiatedRef~~ = ~~useRef~~(~~false~~)~~\n\n const discount = 1 - parseFloat~~(~~bondPrice~~ ?? ~~'0'~~) / parseFloat(tokenPrice ~~?? '0'~~)\n ~~const~~ ~~discountToUse = discount > 0 ? discount : 0~~\n ~~const~~ ~~bottomScaleMargin~~ ~~= discountToUse + 0.15~~\n\n useEffect(() => {\n const chartContainer = document.getElementById(chartContainerId)\n if (chartContainer && ~~!chartCreated && !chartInitiatedRef~~.current) {\n ~~console.log~~(~~'creating chart'~~)\n const chart = createChart(chartContainer, {\n width: 0,\n height: 0,\n layout: {\n background: {\n type: ColorType.Solid~~,\n~~ color: 'transparent'~~,\n~~ },\n textColor: '#73728E',\n },\n grid: {\n vertLines: {\n color: '#73728E'~~,\n~~ },\n horzLines: {\n color: '#73728E'~~,\n~~ },\n },\n crosshair: {\n mode: CrosshairMode.Magnet~~,\n~~ },\n rightPriceScale: {\n borderColor: '#73728E',\n visible: true,\n scaleMargins: {\n top: 0.12~~,\n~~ bottom: bottomScaleMargin~~,\n~~ },\n },\n timeScale: {\n borderColor: '#73728E',\n },\n\n localization: {\n priceFormatter: (val: string) => ~~{\n return~~ `$${getFirstNonZeroDigits(parseFloat(val), 3)}`\n },\n }~~,\n }~~)\n ~~const [precision, minMove] = determineValues(parseFloat(bondPrice))~~\n\n const areaSeries = chart.addAreaSeries({\n lineColor: '#5E59B5',\n topColor: '#5E59B5',\n bottomColor: '#514CA133',\n priceLineWidth: 2,\n priceLineStyle: LineStyle.Dashed,\n priceLineVisible: true,\n priceFormat: {\n precision,\n minMove,\n formatter: (val: string) => getFirstNonZeroDigits(parseFloat(val), 3),\n },\n })\n\n ~~formattedData?.push({ time: Math.floor(new Date().getTime() / 1000), value: parseFloat(tokenPrice) })\n~~ //@ts-ignore\n areaSeries.setData(formattedData)\n\n areaSeries.createPriceLine({\n price: parseFloat(bondPrice),\n color: hasDiscount ? '#38A611' : '#DF4141',\n lineWidth: 2,\n lineStyle: LineStyle.Dashed,\n axisLabelVisible: true,\n title: `Bond Price~~`,\~~n })\n\n chart.timeScale().fitContent()\n ~~//@ts-ignore~~\n ~~setChartCreated~~(~~chart~~)\n ~~chartInitiatedRef~~.current = ~~true~~\n }\n }, [bondPrice, bottomScaleMargin, ~~chartCreated,~~ formattedData, hasDiscount~~, tokenPrice~~])\n\n return <div id={chartContainerId} style={{ width: '100%', height: '100%' }}></div>\n}\n\nexport default LineChart\n"],"names":["_jsx"],"mappings":";;;;;;AAMA,MAAM,SAAS,GAAG,CAAC,EACjB,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,UAAU,GAMX,KAAI~~;;IAEH~~,MAAM,IAAI,GAAG,~~gBAAgB~~;~~IAC7B~~,MAAM,~~gBAAgB~~,GAAG,~~oBAAoB~~;~~IAE7C~~,MAAM,aAAa,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,KAAK,~~KAAI~~;~~QACxC~~,~~OAAO;AACL,~~YAAA,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC;YAC/B,KAAK,EAAE,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SACzD~~;AACH~~,~~IAAA,~~CAAC,CAAC~~;;IAGF~~,~~MAAM~~,~~CAAC~~,~~YAAY~~,~~EAAE~~,~~eAAe,~~CAAC,~~GAAG~~,~~QAAQ~~,EAAE~~;AAClD~~,~~IAAA~~,~~MAAM~~,~~iBAAiB~~,~~GAAG,MAAM,~~CAAC,KAAK,CAAC~~;AAEvC~~,~~IAAA~~,~~MAAM~~,~~QAAQ~~,~~GAAG,~~CAAC,GAAG,~~UAAU~~,CAAC,~~SAAS~~,~~IAAI~~,~~GAAG~~,~~CAAC,GAAG,~~UAAU,CAAC,UAAU,~~IAAI~~,~~GAAG~~,CAAC;~~AACjF~~,~~IAAA~~,MAAM,~~aAAa~~,~~GAAG~~,~~QAAQ~~,~~GAAG,~~CAAC,~~GAAG~~,~~QAAQ~~,~~GAAG~~,CAAC~~;AACjD~~,~~IAAA,MAAM,iBAAiB,GAAG,aAAa,GAAG,IAAI~~;~~IAE9C~~,SAAS,CAAC,MAAK;QACb,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC;~~QAChE~~,IAAI,cAAc,IAAI,CAAC,~~YAAY~~,~~IAAI~~,~~CAAC~~,~~iBAAiB,~~CAAC,~~OAAO~~,EAAE~~;AACjE~~,~~YAAA,~~OAAO,CAAC,GAAG,CAAC,~~gBAAgB~~,CAAC;~~AAC7B~~,~~YAAA~~,MAAM,KAAK,GAAG,WAAW,CAAC,cAAc,EAAE;AACxC,~~gBAAA~~,KAAK,EAAE,CAAC;AACR,~~gBAAA~~,MAAM,EAAE,CAAC;AACT,~~gBAAA~~,MAAM,EAAE;~~AACN~~,~~oBAAA,~~UAAU,EAAE~~;wBACV~~,IAAI,EAAE,SAAS,CAAC,KAAK~~;AACrB~~,~~wBAAA~~,KAAK,EAAE,aAAa~~;AACrB~~,~~qBAAA~~;~~AACD~~,~~oBAAA~~,SAAS,EAAE,SAAS;AACrB,~~iBAAA~~;AACD,~~gBAAA~~,IAAI,EAAE;AACJ,~~oBAAA~~,SAAS,EAAE~~;AACT~~,~~wBAAA~~,KAAK,EAAE,SAAS~~;AACjB~~,~~qBAAA~~;~~AACD~~,~~oBAAA~~,SAAS,EAAE~~;AACT~~,~~wBAAA~~,KAAK,EAAE,SAAS~~;AACjB~~,~~qBAAA~~;~~AACF~~,~~iBAAA~~;AACD,~~gBAAA~~,SAAS,EAAE~~;oBACT~~,IAAI,EAAE,aAAa,CAAC,MAAM~~;AAC3B~~,~~iBAAA~~;~~AACD~~,~~gBAAA~~,eAAe,EAAE;AACf,~~oBAAA~~,WAAW,EAAE,SAAS;AACtB,~~oBAAA~~,OAAO,EAAE,IAAI;~~AACb~~,~~oBAAA,~~YAAY,EAAE~~;AACZ~~,~~wBAAA~~,GAAG,EAAE,IAAI~~;AACT~~,~~wBAAA~~,MAAM,EAAE,iBAAiB~~;AAC1B~~,~~qBAAA~~;~~AACF~~,~~iBAAA~~;AACD,~~gBAAA~~,SAAS,EAAE;AACT,~~oBAAA~~,WAAW,EAAE,SAAS;~~AACvB~~,~~iBAAA~~;~~AAED~~,gBAAA,YAAY,EAAE;AACZ,~~oBAAA~~,~~cAAc~~,EAAE,~~CAAC~~,~~GAAW~~,~~KAAI~~;~~wBAC9B~~,~~OAAO~~,~~CAAA~~,~~CAAA~~,~~EAAI~~,~~qBAAqB~~,~~CAAC~~,~~UAAU~~,~~CAAC~~,~~GAAG~~,~~CAAC~~,EAAE,~~CAAC~~,~~CAAC~~,~~CAAA~~,~~CAAE~~;~~oBACxD~~,~~CAAC~~;~~AACF~~,~~iBAAA~~;~~AACF~~,aAAA~~,CAAC~~;~~AACF~~,YAAA,~~MAAM~~,~~CAAC~~,~~SAAS~~,EAAE,~~OAAO,~~CAAC,~~GAAG~~,~~eAAe~~,CAAC,UAAU,CAAC,~~SAAS~~,CAAC,CAAC;~~AAEnE~~,~~YAAA~~,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;AACrC,~~gBAAA~~,SAAS,EAAE,SAAS;AACpB,~~gBAAA~~,QAAQ,EAAE,SAAS;AACnB,~~gBAAA~~,WAAW,EAAE,WAAW;AACxB,~~gBAAA~~,cAAc,EAAE,CAAC;~~gBACjB~~,cAAc,EAAE,SAAS,CAAC,MAAM;AAChC,~~gBAAA~~,gBAAgB,EAAE,IAAI;AACtB,~~gBAAA~~,WAAW,EAAE;~~oBACX~~,SAAS;~~oBACT~~,OAAO;AACP,~~oBAAA~~,SAAS,EAAE,CAAC,GAAW,KAAK,qBAAqB,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACtE,~~iBAAA~~;AACF,~~aAAA~~,CAAC~~;AAEF,YAAA,aAAa,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC~~;;~~AAErG~~,~~YAAA~~,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;~~YAEjC~~,UAAU,CAAC,eAAe,CAAC;AACzB,~~gBAAA~~,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC;~~gBAC5B~~,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1C,~~gBAAA~~,SAAS,EAAE,CAAC;~~gBACZ~~,SAAS,EAAE,SAAS,CAAC,MAAM;AAC3B,~~gBAAA~~,gBAAgB,EAAE,IAAI;AACtB,~~gBAAA~~,KAAK,EAAE,~~CAAA,UAAA,CAAY~~;AACpB,~~aAAA~~,CAAC;AAEF,~~YAAA~~,KAAK,CAAC,SAAS,EAAE,CAAC,UAAU,EAAE~~;;YAE9B~~,~~eAAe~~,CAAC,KAAK,CAAC;~~AACtB~~,YAAA,~~iBAAiB~~,CAAC,OAAO,GAAG,IAAI;~~QAClC;AACF~~,~~IAAA~~,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,~~YAAY,EAAE,~~aAAa,EAAE,WAAW,~~EAAE,UAAU,~~CAAC,CAAC;~~AAExF~~,IAAA,OAAOA,aAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAQ;AACpF;;;;"}
1	+ {"version":3,"file":"LineChart.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/LineChart.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from 'react'\nimport { ColorType, createChart, CrosshairMode, LineStyle } from 'lightweight-charts'\nimport { HistoricalPrices } from '../../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../../utils/roundNumber'\nimport { determineValues } from './utils'\n\nconst LineChart = ({\n historicalPrices,\n hasDiscount,\n bondPrice,\n tokenPrice,\n}: {\n historicalPrices?: HistoricalPrices[] \| null\n hasDiscount: boolean\n bondPrice: string\n tokenPrice: string\n}) => {\n const chartContainerId = 'lineChartContainer'\n const chartRef = useRef<ReturnType<typeof createChart> \| null>(null)\n\n const discount = 1 - parseFloat(bondPrice ?? '0') / parseFloat(tokenPrice ?? '0')\n const discountToUse = discount > 0 ? discount : 0\n const bottomScaleMargin = Math.min(discountToUse + 0.15, 0.85)\n\n const formattedData = useMemo(() => {\n const mapped =\n historicalPrices?.map((entry) => ({\n time: parseInt(entry.timestamp),\n value: parseFloat(getFirstNonZeroDigits(entry.close, 4)),\n })) ?? []\n mapped.push({ time: Math.floor(new Date().getTime() / 1000), value: parseFloat(tokenPrice) })\n return mapped\n }, [historicalPrices, tokenPrice])\n\n useEffect(() => {\n const chartContainer = document.getElementById(chartContainerId)\n if (!chartContainer \|\| chartRef.current) return\n\n const [precision, minMove] = determineValues(parseFloat(bondPrice))\n\n const chart = createChart(chartContainer, {\n width: 0,\n height: 0,\n layout: {\n background: { type: ColorType.Solid, color: 'transparent' },\n textColor: '#73728E',\n },\n grid: {\n vertLines: { color: '#73728E' },\n horzLines: { color: '#73728E' },\n },\n crosshair: { mode: CrosshairMode.Magnet },\n rightPriceScale: {\n borderColor: '#73728E',\n visible: true,\n scaleMargins: { top: 0.12, bottom: bottomScaleMargin },\n },\n timeScale: {\n borderColor: '#73728E',\n fixLeftEdge: true,\n fixRightEdge: true,\n },\n handleScroll: {\n mouseWheel: false,\n pressedMouseMove: false,\n horzTouchDrag: false,\n vertTouchDrag: false,\n },\n handleScale: {\n axisPressedMouseMove: false,\n mouseWheel: false,\n pinch: false,\n },\n localization: {\n priceFormatter: (val: string) => `$${getFirstNonZeroDigits(parseFloat(val), 3)}`,\n },\n })\n\n const areaSeries = chart.addAreaSeries({\n lineColor: '#5E59B5',\n topColor: '#5E59B5',\n bottomColor: '#514CA133',\n priceLineWidth: 2,\n priceLineStyle: LineStyle.Dashed,\n priceLineVisible: true,\n priceFormat: {\n precision,\n minMove,\n formatter: (val: string) => getFirstNonZeroDigits(parseFloat(val), 3),\n },\n })\n\n //@ts-ignore\n areaSeries.setData(formattedData)\n\n areaSeries.createPriceLine({\n price: parseFloat(bondPrice),\n color: hasDiscount ? '#38A611' : '#DF4141',\n lineWidth: 2,\n lineStyle: LineStyle.Dashed,\n axisLabelVisible: true,\n title: 'Bond Price',\n })\n\n chart.timeScale().fitContent()\n chartRef.current = chart\n\n return () => {\n chart.remove()\n chartRef.current = null\n }\n }, [bondPrice, bottomScaleMargin, formattedData, hasDiscount])\n\n return <div id={chartContainerId} style={{ width: '100%', height: '100%' }}></div>\n}\n\nexport default LineChart\n"],"names":["_jsx"],"mappings":"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"}

package/dist/views/ProjectView/components/PriceChart/components/utils.js CHANGED Viewed

@@ -1,11 +1,11 @@
 const determineValues = (input) => {
-    // if input is larger than 1 return [2, 0.01]
-    if (input > 1) {
+    if (input > 1)
         return [2, 0.01];
-    }
-    // loop that starts handling the cases smaller than or equal to 1
-    let index = 2; // Index to get next value to consider. Start from 1 since we handled the "greater than 1" case.
-    let check = 1; // Start with 0.1 as the value to compare with. If input is smaller, increase index and decrease check by a factor of 10.
+    // Guard: 0, NaN, Infinity all cause the while loop to run forever
+    if (!input || !isFinite(input))
+        return [2, 0.01];
+    let index = 2;
+    let check = 1;
     while (input <= check) {
         index += 1;
         check *= 0.1;

package/dist/views/ProjectView/components/PriceChart/components/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/utils.ts"],"sourcesContent":["export const determineValues = (input: number): [number, number] => {\n // if input is ~~larger than~~ 1 return [2, 0.01]\n if (input > 1) ~~{\n~~ return [2, 0.01]\n }\n ~~// loop that starts handling the cases smaller than or equal to 1\n~~ let index = 2 ~~// Index to get next value to consider. Start from 1 since we handled the~~ \~~"greater than 1\" case.\~~n let check = 1 ~~// Start with 0.1 as the value to compare with. If input is smaller, increase index and decrease check by a factor of 10.\~~n while (input <= check) {\n index += 1\n check *= 0.1\n }\n const decimalString = '0.' + Array(index).join('0') + '1'\n // Convert string back to number\n const decimalNumber = Number(decimalString)\n return [index, decimalNumber]\n}\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,GAAG,CAAC,KAAa,KAAsB~~;;AAEjE~~,~~IAAA,~~IAAI,KAAK,GAAG,CAAC~~,EAAE~~;~~AACb~~,QAAA,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC~~;IAClB~~;;~~AAEA~~,IAAA,IAAI,KAAK,~~GAAG~~,CAAC,~~CAAA~~;~~AACb~~,~~IAAA~~,IAAI,KAAK,GAAG,CAAC,~~CAAA~~;AACb,IAAA,OAAO,KAAK,IAAI,KAAK,EAAE;QACrB,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,GAAG;IACd;AACA,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;;AAEzD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AAC3C,IAAA,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC;AAC/B;;;;"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/utils.ts"],"sourcesContent":["export const determineValues = (input: number): [number, number] => {\n if (input > 1) return [2, 0.01]\n // Guard: 0, NaN, Infinity all cause the while loop to run forever\n if (!input \|\| !isFinite(input)) return [2, 0.01]\n\n let index = 2\n let check = 1\n while (input <= check) {\n index += 1\n check *= 0.1\n }\n const decimalString = '0.' + Array(index).join('0') + '1'\n // Convert string back to number\n const decimalNumber = Number(decimalString)\n return [index, decimalNumber]\n}\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,GAAG,CAAC,KAAa,KAAsB;IACjE,IAAI,KAAK,GAAG,CAAC;AAAE,QAAA,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC;;AAE/B,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC;IAEhD,IAAI,KAAK,GAAG,CAAC;IACb,IAAI,KAAK,GAAG,CAAC;AACb,IAAA,OAAO,KAAK,IAAI,KAAK,EAAE;QACrB,KAAK,IAAI,CAAC;QACV,KAAK,IAAI,GAAG;IACd;AACA,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;;AAEzD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AAC3C,IAAA,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC;AAC/B;;;;"}

package/dist/views/ProjectView/components/PriceChart/index.js CHANGED Viewed

@@ -18,6 +18,7 @@ const PriceChart = ({ selectedBond, historicalPrices, }) => {
     const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0;
     const contractAddress = selectedBond.contractAddress[selectedBond.chainId];
     const [show, setShow] = useState(false);
+    const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6;
     const [chartOption, setChartOption] = useState('line');
     useEffect(() => {
         // This effect is to ensure that the charts are only rendered on the client
@@ -31,7 +32,7 @@ const PriceChart = ({ selectedBond, historicalPrices, }) => {
         }, 50);
         return () => clearTimeout(timer);
     }, [contractAddress]);
-    return (jsxs(Flex, { sx: styles.priceContainer, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mb: '15px', pr: '20px' }, children: [jsx(Flex, { children: "Prices" }), jsxs(Flex, { children: [jsxs(Flex, { sx: { color: hasDiscount ? 'success' : 'error', fontSize: '12px', fontWeight: 500, mr: '15px' }, children: ["Bond Price: $", bondPrice] }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 500 }, children: ["Market Price: $", getFirstNonZeroDigits(earnTokenPrice ?? 0)] })] })] }), show && (jsxs(Flex, { sx: styles.container, children: [jsxs(Flex, { sx: styles.buttonsContainer, children: [jsx(Flex, { sx: { ...styles.button, mr: '15px' }, onClick: () => setChartOption('line'), children: jsx(Svg, { icon: "lineChart", width: 20 }) }), jsx(Flex, { sx: styles.button, onClick: () => setChartOption('candleStick'), children: "D" })] }), historicalPrices && historicalPrices.length > 0 ? (chartOption === 'line' ? (jsx(LineChart, { historicalPrices: historicalPrices, hasDiscount: hasDiscount, bondPrice: bondPrice ?? '0', tokenPrice: selectedBond.payoutTokenPrice ?? '0' })) : (jsx(CandleStickChart, { historicalPrices: historicalPrices, hasDiscount: hasDiscount, bondPrice: bondPrice ?? '0', tokenPrice: selectedBond.payoutTokenPrice ?? '0' }))) : (jsxs(Flex, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }, children: [jsx(Svg, { icon: "placeholderMonkey" }), jsx(Flex, { sx: { mt: '15px' }, children: "No Historical Price for this Token" })] }))] }))] }));
+    return (jsxs(Flex, { sx: styles.priceContainer, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', mb: '15px', pr: '20px' }, children: [jsx(Flex, { children: "Prices" }), jsxs(Flex, { children: [jsxs(Flex, { sx: { color: hasDiscount ? 'success' : 'error', fontSize: '12px', fontWeight: 500, mr: '15px' }, children: ["Bond Price: $", bondPrice] }), jsxs(Flex, { sx: { color: 'textDisabledButton', fontSize: '12px', fontWeight: 500 }, children: ["Market Price: $", getFirstNonZeroDigits(earnTokenPrice ?? 0)] })] })] }), show && (jsxs(Flex, { sx: styles.container, children: [jsxs(Flex, { sx: styles.buttonsContainer, children: [jsx(Flex, { sx: { ...styles.button, mr: '15px' }, onClick: () => setChartOption('line'), children: jsx(Svg, { icon: "lineChart", width: 20 }) }), jsx(Flex, { sx: styles.button, onClick: () => setChartOption('candleStick'), children: "D" })] }), historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (chartOption === 'line' ? (jsx(LineChart, { historicalPrices: historicalPrices, hasDiscount: hasDiscount, bondPrice: bondPrice ?? '0', tokenPrice: selectedBond.payoutTokenPrice ?? '0' })) : (jsx(CandleStickChart, { historicalPrices: historicalPrices, hasDiscount: hasDiscount, bondPrice: bondPrice ?? '0', tokenPrice: selectedBond.payoutTokenPrice ?? '0' }))) : (jsxs(Flex, { sx: { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }, children: [jsx(Svg, { icon: "placeholderMonkey" }), jsx(Flex, { sx: { mt: '15px' }, children: "No Historical Price for this Token" })] }))] }))] }));
 };
 export { PriceChart as default };

package/dist/views/ProjectView/components/PriceChart/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst PriceChart = ({\n selectedBond,\n historicalPrices,\n}: {\n selectedBond: BondsData\n historicalPrices?: HistoricalPrices[] \| null\n}) => {\n const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n const bondPrice = discountEarnTokenPrice(selectedBond, true)\n const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n const [show, setShow] = useState<boolean>(false)\n const [chartOption, setChartOption] = useState<'line' \| 'candleStick'>('line')\n\n useEffect(() => {\n // This effect is to ensure that the charts are only rendered on the client\n setShow(true)\n }, [])\n\n useEffect(() => {\n // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n setShow(false)\n const timer = setTimeout(() => {\n setShow(true)\n }, 50)\n return () => clearTimeout(timer)\n }, [contractAddress])\n\n return (\n <Flex sx={styles.priceContainer}>\n <Flex sx={{ width: '100%', justifyContent: 'space-between', mb: '15px', pr: '20px' }}>\n <Flex>Prices</Flex>\n <Flex>\n <Flex sx={{ color: hasDiscount ? 'success' : 'error', fontSize: '12px', fontWeight: 500, mr: '15px' }}>\n Bond Price: ${bondPrice}\n </Flex>\n <Flex sx={{ color: 'textDisabledButton', fontSize: '12px', fontWeight: 500 }}>\n Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n </Flex>\n </Flex>\n </Flex>\n {show && (\n <Flex sx={styles.container}>\n <Flex sx={styles.buttonsContainer}>\n <Flex sx={{ ...styles.button, mr: '15px' }} onClick={() => setChartOption('line')}>\n <Svg icon=\"lineChart\" width={20} />\n </Flex>\n <Flex sx={styles.button} onClick={() => setChartOption('candleStick')}>\n D\n </Flex>\n </Flex>\n {historicalPrices && historicalPrices.length > 0 ? (\n chartOption === 'line' ? (\n <LineChart\n historicalPrices={historicalPrices}\n hasDiscount={hasDiscount}\n bondPrice={bondPrice ?? '0'}\n tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n />\n ) : (\n <CandleStickChart\n historicalPrices={historicalPrices}\n hasDiscount={hasDiscount}\n bondPrice={bondPrice ?? '0'}\n tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n />\n )\n ) : (\n <Flex sx={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }}>\n <Svg icon=\"placeholderMonkey\" />\n <Flex sx={{ mt: '15px' }}>No Historical Price for this Token</Flex>\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,UAAU,GAAG,CAAC,EAClB,YAAY,EACZ,gBAAgB,GAIjB,KAAI;IACH,MAAM,cAAc,GAAG,UAAU,CAAC,YAAY,EAAE,gBAAgB,IAAI,GAAG,CAAC;AACxE,IAAA,MAAM,aAAa,GAAG,wBAAwB,CAAC,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,YAAY,EAAE,cAAc,CAAC;IAClH,MAAM,SAAS,GAAG,sBAAsB,CAAC,YAAY,EAAE,IAAI,CAAC;IAC5D,MAAM,WAAW,GAAG,CAAC,aAAa,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;IACnD,MAAM,eAAe,GAAG,YAAY,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC;IAE1E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAyB,MAAM,CAAC;IAE9E,SAAS,CAAC,MAAK;;QAEb,OAAO,CAAC,IAAI,CAAC;IACf,CAAC,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;;QAEb,OAAO,CAAC,KAAK,CAAC;AACd,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;YAC5B,OAAO,CAAC,IAAI,CAAC;QACf,CAAC,EAAE,EAAE,CAAC;AACN,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;AAClC,IAAA,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;AAErB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,cAAc,aAC7BA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAClFC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EACnBD,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAA,QAAA,EAAA,CACHA,~~IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAAA,eAAA,EACrF,SAAS,CAAA,EAAA,CAClB,EACPA,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,~~gCAC1D~~,qBAAqB,CAAC,cAAc,IAAI,CAAC,CAAC,~~CAAA~~,~~EAAA,CACrD,~~CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACN,IAAI,KACHA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,SAAS,~~EAAA~~,~~QAAA,EAAA,CACxBA,~~IAAA,CAAC,IAAI,~~IAAC~~,EAAE,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAAA,CAC/BC,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC,MAAM,CAAC,~~EAAA,QAAA,EAC~~/EA,GAAA,CAAC,GAAG,~~IAAC~~,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,~~GAC9B~~,EACPA,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC,aAAa,CAAC,~~kBAE9D~~,CAAA,EAAA,CACF,EACN,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,~~IAC9C~~,WAAW,KAAK,MAAM,IACpBA,GAAA,CAAC,SAAS,EAAA,EACR,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,GAAG,EAC3B,UAAU,EAAE,YAAY,CAAC,gBAAgB,IAAI,GAAG,~~GAChD~~,KAEFA,GAAA,CAAC,gBAAgB,EAAA,EACf,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAAI,GAAG,EAC3B,UAAU,EAAE,YAAY,CAAC,gBAAgB,IAAI,GAAG,EAAA,CAChD,CACH,KAEDD,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,aAClGC,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAC,mBAAmB,EAAA,CAAG,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,oCAAA,EAAA,CAA2C,IAC9D,CACR,CAAA,EAAA,CACI,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport CandleStickChart from './components/CandleStickChart'\nimport LineChart from './components/LineChart'\nimport { styles } from './styles'\nimport { BondsData } from '../../../../types/bonds'\nimport { HistoricalPrices } from '../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../utils/roundNumber'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints'\nimport { LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { discountEarnTokenPrice } from '../../../../utils/displayHelpers'\nimport { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers'\n\nconst PriceChart = ({\n selectedBond,\n historicalPrices,\n}: {\n selectedBond: BondsData\n historicalPrices?: HistoricalPrices[] \| null\n}) => {\n const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0')\n const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices)\n const bondPrice = discountEarnTokenPrice(selectedBond, true)\n const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0\n const contractAddress = selectedBond.contractAddress[selectedBond.chainId]\n\n const [show, setShow] = useState<boolean>(false)\n const priceBelowChartPrecision = earnTokenPrice > 0 && earnTokenPrice < 1e-6\n const [chartOption, setChartOption] = useState<'line' \| 'candleStick'>('line')\n\n useEffect(() => {\n // This effect is to ensure that the charts are only rendered on the client\n setShow(true)\n }, [])\n\n useEffect(() => {\n // This effect is to ensure the charts are re-rendered everytime the selectedBond changes\n setShow(false)\n const timer = setTimeout(() => {\n setShow(true)\n }, 50)\n return () => clearTimeout(timer)\n }, [contractAddress])\n\n return (\n <Flex sx={styles.priceContainer}>\n <Flex sx={{ width: '100%', justifyContent: 'space-between', mb: '15px', pr: '20px' }}>\n <Flex>Prices</Flex>\n <Flex>\n <Flex sx={{ color: hasDiscount ? 'success' : 'error', fontSize: '12px', fontWeight: 500, mr: '15px' }}>\n Bond Price: ${bondPrice}\n </Flex>\n <Flex sx={{ color: 'textDisabledButton', fontSize: '12px', fontWeight: 500 }}>\n Market Price: ${getFirstNonZeroDigits(earnTokenPrice ?? 0)}\n </Flex>\n </Flex>\n </Flex>\n {show && (\n <Flex sx={styles.container}>\n <Flex sx={styles.buttonsContainer}>\n <Flex sx={{ ...styles.button, mr: '15px' }} onClick={() => setChartOption('line')}>\n <Svg icon=\"lineChart\" width={20} />\n </Flex>\n <Flex sx={styles.button} onClick={() => setChartOption('candleStick')}>\n D\n </Flex>\n </Flex>\n {historicalPrices && historicalPrices.length > 0 && !priceBelowChartPrecision ? (\n chartOption === 'line' ? (\n <LineChart\n historicalPrices={historicalPrices}\n hasDiscount={hasDiscount}\n bondPrice={bondPrice ?? '0'}\n tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n />\n ) : (\n <CandleStickChart\n historicalPrices={historicalPrices}\n hasDiscount={hasDiscount}\n bondPrice={bondPrice ?? '0'}\n tokenPrice={selectedBond.payoutTokenPrice ?? '0'}\n />\n )\n ) : (\n <Flex sx={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%' }}>\n <Svg icon=\"placeholderMonkey\" />\n <Flex sx={{ mt: '15px' }}>No Historical Price for this Token</Flex>\n </Flex>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default PriceChart\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",