npm - @ape.swap/bonds-sdk - Versions diffs - 5.1.34 → 5.1.36 - Mend

@ape.swap/bonds-sdk 5.1.34 → 5.1.36

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 (55) hide show

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 Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n getUserTier,\n TIERS_COLORS,\n TIERS_NAMES,\n TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { 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 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: userPoints } = useTierPoints()\n const abondPrice = useAbondPrice()\n const userTier = getUserTier(userPoints)\n const nextTierInfo = getNextTierInfo(userPoints \|\| '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, userPoints!, bond, inputTokenPrice, abondPrice)\n const nextTierData = optimizationData?.data?.[0]\n const highestProfitableTier = optimizationData?.highestProfitableTier\n\n const handleSetNextTierAmount = (amount: number) => {\n const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n setInputValue(inputValueInSelectedToken.toFixed(inputTokenDecimals))\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 (userTier ?? 0) < LaunchBondTiers.Mythical &&\n nextTierData && (\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 alignItems: 'center',\n background: '#312341',\n justifyContent: 'space-between',\n }}\n >\n <Flex sx={{ alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>\n <Flex sx={{ alignItems: 'center' }}>\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 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 </Flex>\n <span\n sx={{\n mx: '5px',\n color: 'primaryButton',\n fontWeight: 500,\n cursor: 'pointer',\n ':hover': { textDecoration: 'underline' },\n }}\n onClick={(e) => {\n e.stopPropagation()\n handleSetNextTierAmount(nextTierData.minBreakevenWithFeeUSD * 1.01)\n }}\n >\n {'Upgrade now >'}\n </span>\n </Flex>\n <Svg icon={'caret'} direction={isOpen ? 'up' : 'down'} width={10} />\n </Flex>\n )\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: '5px', cursor: 'pointer' }}\n >\n {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data) => {\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: '3px',\n alignItems: 'center',\n background: '#312341',\n justifyContent: 'space-between',\n }}\n onClick={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\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={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\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={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\n >\n {`Upgrade now >`}\n </span>\n </Flex>\n )\n })}\n </motion.div>\n )}\n </AnimatePresence>\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(userPoints!))}</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 Flex from '../../../../components/uikit-sdk/Flex'\nimport { BondsData } from '../../../../types/bonds'\nimport useTierPoints, {\n getUserTier,\n TIERS_COLORS,\n TIERS_NAMES,\n TIERS_WEIGHT,\n} from '../../../../state/tiers/useTierPoints'\nimport { BillVersion, LaunchBondTiers } from '@ape.swap/apeswap-lists'\nimport { 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 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\n const handleSetNextTierAmount = (amount: number) => {\n const inputValueInSelectedToken = amount / (inputTokenPrice ?? 0)\n setInputValue(inputValueInSelectedToken.toFixed(inputTokenDecimals))\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 (userTier ?? 0) < LaunchBondTiers.Mythical &&\n nextTierData && (\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 alignItems: 'center',\n background: '#312341',\n justifyContent: 'space-between',\n }}\n >\n <Flex sx={{ alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>\n <Flex sx={{ alignItems: 'center' }}>\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 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 </Flex>\n <span\n sx={{\n mx: '5px',\n color: 'primaryButton',\n fontWeight: 500,\n cursor: 'pointer',\n ':hover': { textDecoration: 'underline' },\n }}\n onClick={(e) => {\n e.stopPropagation()\n handleSetNextTierAmount(nextTierData.minBreakevenWithFeeUSD * 1.01)\n }}\n >\n {'Upgrade now >'}\n </span>\n </Flex>\n <Svg icon={'caret'} direction={isOpen ? 'up' : 'down'} width={10} />\n </Flex>\n )\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: '5px', cursor: 'pointer' }}\n >\n {optimizationData?.data?.slice(1, optimizationData?.data.length)?.map((data) => {\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: '3px',\n alignItems: 'center',\n background: '#312341',\n justifyContent: 'space-between',\n }}\n onClick={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\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={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\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={() => handleSetNextTierAmount(data.minBreakevenWithFeeUSD * 1.01)}\n >\n {`Upgrade now >`}\n </span>\n </Flex>\n )\n })}\n </motion.div>\n )}\n </AnimatePresence>\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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"}

package/dist/views/ProjectView/ProjectView.js CHANGED Viewed

@@ -9,6 +9,7 @@ import BondCards from '../BuyBond/components/BondCards/BondCards.js';
 import ProjectInfo from './components/ProjectInfo/index.js';
 import BondStats from './components/BondStats/index.js';
 import BondLeaderboard from './components/BondLeaderboard/index.js';
+import PriceChart from './components/PriceChart/index.js';
 import BuyComponent from '../BuyBond/BuyComponent.js';
 import useTokenPrices from '../../state/tokenPrices/useTokenPrices.js';
 import useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice.js';
@@ -39,15 +40,12 @@ const ProjectView = ({ bondAddress, bondChain }) => {
                     '&& > div > div': {
                         background: 'white2',
                     },
-                }, children: jsx(BondCards, { bondData: bondData }) })), bondData ? (jsx(Fragment, { children: jsxs(Flex, { sx: { width: '100%', flexDirection: 'column', mt: '10px' }, children: [jsx(Flex, { sx: { width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }, children: jsx(Flex, { sx: {
-                                    background: 'white2',
-                                    borderRadius: 'normal',
-                                    // TODO: uncomment this
-                                    width: ['100%', '100%', '100%', '50%'],
-                                    // width: '100%',
-                                    //
-                                    mt: '5px',
-                                }, children: jsx(BuyComponent, { bondAddress: bondData?.contractAddress?.[bondData.chainId], bondChain: bondData.chainId, isProjectView: true }) }) }), jsx(Flex, { sx: { width: '100%', mt: '10px' }, children: jsx(ProjectInfo, { selectedBond2: 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..." }))] }));
+                }, 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(BuyComponent, { 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, { selectedBond2: 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 };

package/dist/views/ProjectView/ProjectView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProjectView.js","sources":["../../../src/views/ProjectView/ProjectView.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { styles } from './styles'\nimport RecommendationCards from './components/RecommendationCards'\nimport NavPanel from './components/NavPanel'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport ProjectInfo from './components/ProjectInfo'\nimport BondStats from './components/BondStats'\nimport BondLeaderboard from './components/BondLeaderboard'\nimport PriceChart from './components/PriceChart'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice'\n\nexport interface HistoricalPrices {\n timestamp: string\n open: number\n close: number\n}\n\nexport interface ProjectViewProps {\n bondAddress: string\n bondChain: string\n}\n\nconst ProjectView: React.FC<ProjectViewProps> = ({ bondAddress, bondChain }) => {\n // Hooks\n const { data: bonds, refetch } = useBondsData()\n const { data: tokenPrices } = useTokenPrices()\n const bondData = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond.chainId]?.toLowerCase() === (bondAddress as string)?.toLowerCase() &&\n (bondChain as string) === bond.chainId.toString(),\n )\n\n const { data: historicalPrices } = useHistoricalPrice(bondData?.cgId)\n\n useEffect(() => {\n if ((bonds?.length ?? 0) > 0 && !bondData) {\n window.location.href = '/bonds'\n }\n })\n\n useEffect(() => {\n if (Object.keys(tokenPrices ?? {})?.length > 0 && bonds?.length === 0) {\n console.log('Found prices and no bonds, realtimeapi failed. Refetching bonds')\n refetch()\n }\n /* eslint-disable react-hooks/exhaustive-deps /\n }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch])\n\n return (\n <Flex sx={styles.mainViewContainer}>\n <RecommendationCards />\n <NavPanel contractAddress={bondData?.contractAddress?.[bondData.chainId]} />\n {bondData && (\n <Flex\n sx={{\n width: '100%',\n mt: '10px',\n display: ['none', 'none', 'none', 'block'],\n '&& > div > div': {\n background: 'white2',\n },\n }}\n >\n <BondCards bondData={bondData} />\n </Flex>\n )}\n {bondData ? (\n <>\n <Flex sx={{ width: '100%', flexDirection: 'column', mt: '10px' }}>\n <Flex sx={{ width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }}>\n <Flex\n sx={{\n background: 'white2',\n borderRadius: 'normal',\n ~~// TODO: uncomment this\n~~ width: ['100%', '100%', '100%', '50%'],\n ~~// width: '100%',\n //\n~~ mt: '5px',\n }}\n >\n <BuyBond\n bondAddress={bondData?.contractAddress?.[bondData.chainId]}\n bondChain={bondData.chainId}\n isProjectView\n />\n </Flex>\n ~~{/TODO: uncomment this/}\n {/<~~PriceChart selectedBond={bondData} historicalPrices={historicalPrices} ~~/>*/}\~~n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <ProjectInfo selectedBond2={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <BondStats selectedBond={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px', mb: '50px' }}>\n <BondLeaderboard selectedBond={bondData} />\n </Flex>\n </Flex>\n </>\n ) : (\n <Flex sx={{ width: '100%', justifyContent: 'center', fontSize: '12px', fontWeight: 500 }}>Loading...</Flex>\n )}\n </Flex>\n )\n}\n\nexport default ProjectView\n"],"names":["_jsxs","_jsx","_Fragment","BuyBond"],"mappings":"~~;;;;;;;;;;;;;;;~~AA0BA,MAAM,WAAW,GAA+B,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,KAAI;;IAE7E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,EAAE;IAC/C,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;IAC9C,MAAM,QAAQ,GAAG,KAAK,EAAE,IAAI,CAC1B,CAAC,IAAI,KACH,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,EAAE,KAAM,WAAsB,EAAE,WAAW,EAAE;QAC9F,SAAoB,KAAK,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CACpD;AAED,IAAA,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC;IAErE,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACzC,YAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,QAAQ;QACjC;AACF,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE;AACrE,YAAA,OAAO,CAAC,GAAG,CAAC,iEAAiE,CAAC;AAC9E,YAAA,OAAO,EAAE;QACX;;IAEF,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAEpE,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EAAA,CAChCC,IAAC,mBAAmB,EAAA,EAAA,CAAG,EACvBA,GAAA,CAAC,QAAQ,EAAA,EAAC,eAAe,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,EAAA,CAAI,EAC3E,QAAQ,KACPA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,EAAE,EAAE,MAAM;oBACV,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AAC1C,oBAAA,gBAAgB,EAAE;AAChB,wBAAA,UAAU,EAAE,QAAQ;AACrB,qBAAA;AACF,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAA,CAAI,EAAA,CAC5B,CACR,EACA,QAAQ,IACPA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACEF,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,~~CAC9DC~~,~~GAAA~~,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAA,QAAA,~~EACtGA~~,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,~~oCAAA~~,UAAU,EAAE,QAAQ;AACpB,~~oCAAA~~,YAAY,EAAE,QAAQ~~;;oCAEtB~~,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC~~;;;AAGtC~~,~~oCAAA~~,EAAE,EAAE,KAAK;AACV,~~iCAAA~~,EAAA,QAAA,EAEDA,GAAA,CAACE,YAAO,EAAA,EACN,WAAW,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,EAC1D,SAAS,EAAE,QAAQ,CAAC,OAAO,EAC3B,aAAa,EAAA,~~IAAA~~,~~EAAA~~,~~CACb~~,EAAA,~~CACG~~,EAAA,~~CAGF~~,~~EACPF~~,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACrCA,GAAA,CAAC,WAAW,EAAA,EAAC,aAAa,EAAE,QAAQ,EAAA,CAAI,~~EAAA~~,~~CACnC,~~EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,~~YACrCA~~,GAAA,CAAC,SAAS,~~EAAA~~,~~EAAC,~~YAAY,EAAE,QAAQ,EAAA,CAAI,EAAA,CAChC,EACPA,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC,~~EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACjDA,GAAA,CAAC,eAAe,~~EAAA~~,~~EAAC,~~YAAY,EAAE,QAAQ,EAAA,CAAI,EAAA,CACtC,CAAA,EAAA,CACF,EAAA,CACN,KAEHA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,YAAA,EAAA,CAAmB,CAC5G,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"ProjectView.js","sources":["../../../src/views/ProjectView/ProjectView.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport useBondsData from '../../state/bonds/useBondsData'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport { styles } from './styles'\nimport RecommendationCards from './components/RecommendationCards'\nimport NavPanel from './components/NavPanel'\nimport BondCards from '../BuyBond/components/BondCards/BondCards'\nimport ProjectInfo from './components/ProjectInfo'\nimport BondStats from './components/BondStats'\nimport BondLeaderboard from './components/BondLeaderboard'\nimport PriceChart from './components/PriceChart'\nimport BuyBond from '../BuyBond/BuyComponent'\nimport useTokenPrices from '../../state/tokenPrices/useTokenPrices'\nimport useHistoricalPrice from '../../state/historicalPrice/useHistoricalPrice'\n\nexport interface HistoricalPrices {\n timestamp: string\n open: number\n close: number\n}\n\nexport interface ProjectViewProps {\n bondAddress: string\n bondChain: string\n}\n\nconst ProjectView: React.FC<ProjectViewProps> = ({ bondAddress, bondChain }) => {\n // Hooks\n const { data: bonds, refetch } = useBondsData()\n const { data: tokenPrices } = useTokenPrices()\n const bondData = bonds?.find(\n (bond) =>\n bond?.contractAddress?.[bond.chainId]?.toLowerCase() === (bondAddress as string)?.toLowerCase() &&\n (bondChain as string) === bond.chainId.toString(),\n )\n\n const { data: historicalPrices } = useHistoricalPrice(bondData?.cgId)\n\n useEffect(() => {\n if ((bonds?.length ?? 0) > 0 && !bondData) {\n window.location.href = '/bonds'\n }\n })\n\n useEffect(() => {\n if (Object.keys(tokenPrices ?? {})?.length > 0 && bonds?.length === 0) {\n console.log('Found prices and no bonds, realtimeapi failed. Refetching bonds')\n refetch()\n }\n /* eslint-disable react-hooks/exhaustive-deps */\n }, [Object.keys(tokenPrices ?? {})?.length, bonds?.length, refetch])\n\n return (\n <Flex sx={styles.mainViewContainer}>\n <RecommendationCards />\n <NavPanel contractAddress={bondData?.contractAddress?.[bondData.chainId]} />\n {bondData && (\n <Flex\n sx={{\n width: '100%',\n mt: '10px',\n display: ['none', 'none', 'none', 'block'],\n '&& > div > div': {\n background: 'white2',\n },\n }}\n >\n <BondCards bondData={bondData} />\n </Flex>\n )}\n {bondData ? (\n <>\n <Flex sx={{ width: '100%', flexDirection: 'column', mt: '10px' }}>\n <Flex sx={{ width: '100%', flexDirection: ['column', 'column', 'column', 'row'], alignItems: 'stretch' }}>\n <Flex\n sx={{\n background: 'white2',\n borderRadius: 'normal',\n width: ['100%', '100%', '100%', '50%'],\n mt: '5px',\n }}\n >\n <BuyBond\n bondAddress={bondData?.contractAddress?.[bondData.chainId]}\n bondChain={bondData.chainId}\n isProjectView\n />\n </Flex>\n <PriceChart selectedBond={bondData} historicalPrices={historicalPrices} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <ProjectInfo selectedBond2={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px' }}>\n <BondStats selectedBond={bondData} />\n </Flex>\n <Flex sx={{ width: '100%', mt: '10px', mb: '50px' }}>\n <BondLeaderboard selectedBond={bondData} />\n </Flex>\n </Flex>\n </>\n ) : (\n <Flex sx={{ width: '100%', justifyContent: 'center', fontSize: '12px', fontWeight: 500 }}>Loading...</Flex>\n )}\n </Flex>\n )\n}\n\nexport default ProjectView\n"],"names":["_jsxs","_jsx","_Fragment","BuyBond"],"mappings":"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"}

package/dist/views/ProjectView/components/PriceChart/components/CandleStickChart.js ADDED Viewed

@@ -0,0 +1,111 @@
+import { jsx } from 'theme-ui/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { createChart, CrosshairMode, ColorType, LineStyle } from 'lightweight-charts';
+import { determineValues } from './utils.js';
+import { getFirstNonZeroDigits } from '../../../../../utils/roundNumber.js';
+const CandleStickChart = ({ historicalPrices, hasDiscount, bondPrice, tokenPrice, }) => {
+    // reference for DOM element to create with chart
+    const data = historicalPrices;
+    const chartContainerId = 'candleStickChartContainer';
+    const formattedData = data?.map((entry) => {
+        return {
+            time: parseFloat(entry.timestamp),
+            open: entry.open,
+            low: entry.open,
+            close: entry.close,
+            high: entry.close,
+        };
+    });
+    // pointer to the chart object
+    const [chartCreated, setChartCreated] = useState();
+    const chartInitiatedRef = useRef(false);
+    const discount = 1 - parseFloat(bondPrice ?? '0') / parseFloat(tokenPrice ?? '0');
+    const discountToUse = discount > 0 ? discount : 0;
+    const bottomScaleMargin = discountToUse + 0.1;
+    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) => `$${getFirstNonZeroDigits(parseFloat(val), 3)}`,
+                },
+            });
+            const [precision, minMove] = determineValues(parseFloat(bondPrice));
+            const candleSeries = chart.addCandlestickSeries({
+                upColor: '#38A611',
+                downColor: '#DF4141',
+                borderDownColor: '#DF4141',
+                borderUpColor: '#38A611',
+                wickDownColor: '#DF4141',
+                wickUpColor: '#38A611',
+                priceLineWidth: 2,
+                priceLineStyle: LineStyle.Dashed,
+                priceLineVisible: true,
+                priceFormat: {
+                    precision,
+                    minMove,
+                    formatter: (val) => getFirstNonZeroDigits(parseFloat(val), 3),
+                },
+            });
+            const open = formattedData?.[formattedData?.length - 1]?.close ?? 0;
+            formattedData?.push({
+                time: new Date().getTime() / 1000,
+                open: open,
+                low: open,
+                close: parseFloat(tokenPrice),
+                high: parseFloat(tokenPrice),
+            });
+            //@ts-ignore
+            candleSeries.setData(formattedData);
+            candleSeries.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]);
+    return jsx("div", { id: chartContainerId, style: { width: '100%', height: '100%' } });
+};
+export { CandleStickChart as default };
+//# sourceMappingURL=CandleStickChart.js.map

package/dist/views/ProjectView/components/PriceChart/components/CandleStickChart.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CandleStickChart.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/CandleStickChart.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport { ColorType, createChart, CrosshairMode, LineStyle } from 'lightweight-charts'\nimport { determineValues } from './utils'\nimport { HistoricalPrices } from '../../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../../utils/roundNumber'\n\nconst CandleStickChart = ({\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 = 'candleStickChartContainer'\n\n const formattedData = data?.map((entry) => {\n return {\n time: parseFloat(entry.timestamp),\n open: entry.open,\n low: entry.open,\n close: entry.close,\n high: entry.close,\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.1\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 localization: {\n priceFormatter: (val: string) => `$${getFirstNonZeroDigits(parseFloat(val), 3)}`,\n },\n })\n const [precision, minMove] = determineValues(parseFloat(bondPrice))\n\n const candleSeries = chart.addCandlestickSeries({\n upColor: '#38A611',\n downColor: '#DF4141',\n borderDownColor: '#DF4141',\n borderUpColor: '#38A611',\n wickDownColor: '#DF4141',\n wickUpColor: '#38A611',\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 const open = formattedData?.[formattedData?.length - 1]?.close ?? 0\n formattedData?.push({\n time: new Date().getTime() / 1000,\n open: open,\n low: open,\n close: parseFloat(tokenPrice),\n high: parseFloat(tokenPrice),\n })\n //@ts-ignore\n candleSeries.setData(formattedData)\n candleSeries.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 CandleStickChart\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,100 @@
+import { jsx } from 'theme-ui/jsx-runtime';
+import { useState, useRef, 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 discount = 1 - parseFloat(bondPrice ?? '0') / parseFloat(tokenPrice ?? '0');
+    const discountToUse = discount > 0 ? discount : 0;
+    const bottomScaleMargin = discountToUse + 0.15;
+    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]);
+    return jsx("div", { id: chartContainerId, style: { width: '100%', height: '100%' } });
+};
+export { LineChart as default };
+//# sourceMappingURL=LineChart.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,20 @@
+const determineValues = (input) => {
+    // if input is larger than 1 return [2, 0.01]
+    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.
+    while (input <= check) {
+        index += 1;
+        check *= 0.1;
+    }
+    const decimalString = '0.' + Array(index).join('0') + '1';
+    // Convert string back to number
+    const decimalNumber = Number(decimalString);
+    return [index, decimalNumber];
+};
+export { determineValues };
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { useState, useEffect } from 'react';
+import CandleStickChart from './components/CandleStickChart.js';
+import LineChart from './components/LineChart.js';
+import { styles } from './styles.js';
+import { getFirstNonZeroDigits } from '../../../../utils/roundNumber.js';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints.js';
+import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
+import { discountEarnTokenPrice } from '../../../../utils/displayHelpers.js';
+import { findHighestTrueBondPrice } from '../../../../utils/bondPriceHelpers.js';
+const PriceChart = ({ selectedBond, historicalPrices, }) => {
+    const earnTokenPrice = parseFloat(selectedBond?.payoutTokenPrice ?? '0');
+    const trueBondPrice = findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], selectedBond?.trueBondPrices);
+    const bondPrice = discountEarnTokenPrice(selectedBond, true);
+    const hasDiscount = (trueBondPrice?.bonus ?? 0) > 0;
+    const contractAddress = selectedBond.contractAddress[selectedBond.chainId];
+    const [show, setShow] = useState(false);
+    const [chartOption, setChartOption] = useState('line');
+    useEffect(() => {
+        // This effect is to ensure that the charts are only rendered on the client
+        setShow(true);
+    }, []);
+    useEffect(() => {
+        // This effect is to ensure the charts are re-rendered everytime the selectedBond changes
+        setShow(false);
+        const timer = setTimeout(() => {
+            setShow(true);
+        }, 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" })] }))] }))] }));
+};
+export { PriceChart as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":"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"}

package/dist/views/ProjectView/components/PriceChart/styles.js ADDED Viewed

@@ -0,0 +1,44 @@
+const styles = {
+    priceContainer: {
+        width: ['100%', '100%', '100%', '50%'],
+        fontSize: ['12px', '12px', '12px', '16px'],
+        flexDirection: 'column',
+        background: 'white2',
+        borderRadius: 'normal',
+        p: '20px',
+        pr: '0px',
+        alignItems: 'center',
+        mt: ['15px', '15px', '15px', '5px'],
+        minHeight: ['330px', '330px', '330px', '430px'],
+        ml: ['0px', '0px', '0px', '5px'],
+    },
+    container: {
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+    },
+    buttonsContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 20,
+    },
+    button: {
+        width: '35px',
+        height: '35px',
+        fontSize: '12px',
+        borderRadius: 'small',
+        background: 'white3',
+        border: '1px solid grey',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        '&:hover': {
+            background: 'white4',
+        },
+    },
+};
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/views/ProjectView/components/PriceChart/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sources":["../../../../../src/views/ProjectView/components/PriceChart/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<'priceContainer' | 'container' | 'buttonsContainer' | 'button', ThemeUIStyleObject> = {\n priceContainer: {\n width: ['100%', '100%', '100%', '50%'],\n fontSize: ['12px', '12px', '12px', '16px'],\n flexDirection: 'column',\n background: 'white2',\n borderRadius: 'normal',\n p: '20px',\n pr: '0px',\n alignItems: 'center',\n mt: ['15px', '15px', '15px', '5px'],\n minHeight: ['330px', '330px', '330px', '430px'],\n ml: ['0px', '0px', '0px', '5px'],\n },\n container: {\n position: 'relative',\n width: '100%',\n height: '100%',\n },\n buttonsContainer: {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 20,\n },\n button: {\n width: '35px',\n height: '35px',\n fontSize: '12px',\n borderRadius: 'small',\n background: 'white3',\n border: '1px solid grey',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n cursor: 'pointer',\n '&:hover': {\n background: 'white4',\n },\n },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAA+F;AAChH,IAAA,cAAc,EAAE;QACd,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;QACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC1C,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,QAAQ;AACtB,QAAA,CAAC,EAAE,MAAM;AACT,QAAA,EAAE,EAAE,KAAK;AACT,QAAA,UAAU,EAAE,QAAQ;QACpB,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;QACnC,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;QAC/C,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AACjC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,MAAM,EAAE,EAAE;AACX,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,YAAY,EAAE,OAAO;AACrB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,gBAAgB;AACxB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,SAAS,EAAE;AACT,YAAA,UAAU,EAAE,QAAQ;AACrB,SAAA;AACF,KAAA;;;;;"}

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

@@ -4,6 +4,7 @@ import { useTopTags } from '../../../../hooks/useTopTags.js';
 import useBondsData from '../../../../state/bonds/useBondsData.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import RecommendationSelector from '../../../../components/MenuSelect/RecommendationSelector.js';
+import SmallRecommendationCard from '../../../Bonds/components/RecommendationCards/SmallRecommendationCard.js';
 import { TIERS_WEIGHT } from '../../../../state/tiers/useTierPoints.js';
 import { LaunchBondTiers } from '@ape.swap/apeswap-lists';
 import useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations.js';
@@ -37,7 +38,7 @@ const RecommendationCards = () => {
             ? a.discount
             : (findHighestTrueBondPrice(TIERS_WEIGHT[LaunchBondTiers.Legend], a?.trueBondPrices)?.bonus ?? 0)))
         ?.slice(0, 3);
-    slicedBonds?.map((bond) => {
+    const parsedBondsToRender = slicedBonds?.map((bond) => {
         let contractAddress = '';
         if ('contractAddress' in bond) {
             contractAddress = bond.contractAddress;
@@ -77,7 +78,11 @@ const RecommendationCards = () => {
                             }, onClick: () => window.open('/apebond-ai', '_blank') }) })] }), jsx(Flex, { sx: {
                     my: '10px',
                     minHeight: '47.45px',
-                } })] }));
+                }, children: parsedBondsToRender &&
+                    parsedBondsToRender.length > 0 &&
+                    parsedBondsToRender.map((bond, index) => {
+                        return jsx(SmallRecommendationCard, { recommendation: bond }, `${bond.payoutTokenName}-${index}`);
+                    }) })] }));
 };
 export { RecommendationCards as default };