npm - @ape.swap/bonds-sdk - Versions diffs - 6.0.2 → 6.0.4 - Mend

@ape.swap/bonds-sdk 6.0.2 → 6.0.4

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

package/dist/components/uikit-sdk/Tag/ListTag.js CHANGED Viewed

@@ -5,10 +5,10 @@ import Svg from '../Svg/index.js';
 import { icons } from '../Svg/types.js';
 const bg = {
-    ['Selling Fast']: 'transparent',
-    ['Short Supply']: 'transparent',
-    ['New Offer']: 'transparent',
-    ['Whale Activity']: 'transparent',
+    ['Selling Fast']: '#14121D',
+    ['Short Supply']: '#14121D',
+    ['New Offer']: '#14121D',
+    ['Whale Activity']: '#14121D',
 };
 const colorMap = {
     ['Selling Fast']: '#EA901B',
@@ -17,7 +17,7 @@ const colorMap = {
     ['Whale Activity']: '#8EE3FF',
 };
 const ListTag = ({ text = '', marketingCampaign }) => {
-    return (jsxs(Flex, { sx: {
+    return (jsxs(Flex, { className: "list-tag", sx: {
             //@ts-ignore
             background: bg[text] || '#3C6AB530',
             //@ts-ignore
@@ -32,6 +32,9 @@ const ListTag = ({ text = '', marketingCampaign }) => {
             zIndex: 2,
             gap: '5px',
             ...MCTagStyles[marketingCampaign],
+            '&:hover': {
+                background: 'rgb(20 18 29 / 0.36)',
+            },
         }, children: [text === 'Selling Fast' && jsx(Svg, { icon: 'SellingFast', width: 20 }), text === 'Short Supply' && jsx(Svg, { icon: icons.SHORT_SUPPLY, width: 20 }), text === 'New Offer' && jsx(Svg, { icon: 'NewOffer', width: 20 }), text === 'Whale Activity' && jsx(Svg, { icon: 'WhaleActivity', width: 20 }), text.toUpperCase()] }));
 };

package/dist/components/uikit-sdk/Tag/ListTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListTag.js","sources":["../../../../src/components/uikit-sdk/Tag/ListTag.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\nimport { MCTagStyles } from '../../../utils/campaignStyles'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport Svg from '../Svg'\nimport { icons } from '../Svg/types'\n\nconst bg = {\n ['Selling Fast']: '~~transparent~~',\n ['Short Supply']: '~~transparent~~',\n ['New Offer']: '~~transparent~~',\n ['Whale Activity']: '~~transparent~~',\n}\n\nconst colorMap = {\n ['Selling Fast']: '#EA901B',\n ['Short Supply']: '#FCA384',\n ['New Offer']: '#AA80F9',\n ['Whale Activity']: '#8EE3FF',\n}\n\nconst ListTag = ({ text = '', marketingCampaign }: { text?: string; marketingCampaign?: MarketingCampaign }) => {\n return (\n <Flex\n sx={{\n //@ts-ignore\n background: bg[text] \|\| '#3C6AB530',\n //@ts-ignore\n color: colorMap[text] \|\| '#3b78d3',\n fontSize: '10px',\n fontWeight: 600,\n alignItems: 'center',\n lineHeight: '15px',\n p: '2px 6px',\n borderRadius: '5px',\n width: 'fit-content',\n zIndex: 2,\n gap: '5px',\n ...MCTagStyles[marketingCampaign!],\n }}\n >\n {text === 'Selling Fast' && <Svg icon={'SellingFast'} width={20} />}\n {text === 'Short Supply' && <Svg icon={icons.SHORT_SUPPLY} width={20} />}\n {text === 'New Offer' && <Svg icon={'NewOffer'} width={20} />}\n {text === 'Whale Activity' && <Svg icon={'WhaleActivity'} width={20} />}\n {text.toUpperCase()}\n </Flex>\n )\n}\n\nexport default ListTag\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,EAAE,GAAG;IACT,CAAC,cAAc,GAAG,~~aAAa~~;~~IAC/B~~,CAAC,cAAc,GAAG,~~aAAa~~;~~IAC/B~~,CAAC,WAAW,GAAG,~~aAAa~~;~~IAC5B~~,CAAC,gBAAgB,GAAG,~~aAAa~~;~~CAClC~~;AAED,MAAM,QAAQ,GAAG;IACf,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;CAC9B;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,iBAAiB,EAA4D,KAAI;~~AAC7G~~,~~IAAA,~~QACEA,~~IAAA~~,~~CAAC,~~IAAI,EAAA,EACH,EAAE,EAAE;;AAEF,YAAA,UAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,WAAW;;AAEnC,YAAA,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,SAAS;AAClC,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,CAAC,EAAE,SAAS;AACZ,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,GAAG,EAAE,KAAK;YACV,GAAG,WAAW,CAAC,iBAAkB,CAAC;AACnC,SAAA,EAAA,QAAA,EAAA,CAEA,IAAI,KAAK,cAAc,IAAIC,IAAC,GAAG,EAAA,EAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,GAAI,EAClE,IAAI,KAAK,cAAc,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EACvE,IAAI,KAAK,WAAW,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EAC5D,IAAI,KAAK,gBAAgB,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EACtE,IAAI,CAAC,WAAW,EAAE,CAAA,EAAA,CACd;AAEX;;;;"}
1	+ {"version":3,"file":"ListTag.js","sources":["../../../../src/components/uikit-sdk/Tag/ListTag.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../Flex'\nimport { MCTagStyles } from '../../../utils/campaignStyles'\nimport { MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport Svg from '../Svg'\nimport { icons } from '../Svg/types'\n\nconst bg = {\n ['Selling Fast']: '#14121D',\n ['Short Supply']: '#14121D',\n ['New Offer']: '#14121D',\n ['Whale Activity']: '#14121D',\n}\n\nconst colorMap = {\n ['Selling Fast']: '#EA901B',\n ['Short Supply']: '#FCA384',\n ['New Offer']: '#AA80F9',\n ['Whale Activity']: '#8EE3FF',\n}\n\nconst ListTag = ({ text = '', marketingCampaign }: { text?: string; marketingCampaign?: MarketingCampaign }) => {\n return (\n <Flex\n className=\"list-tag\"\n sx={{\n //@ts-ignore\n background: bg[text] \|\| '#3C6AB530',\n //@ts-ignore\n color: colorMap[text] \|\| '#3b78d3',\n fontSize: '10px',\n fontWeight: 600,\n alignItems: 'center',\n lineHeight: '15px',\n p: '2px 6px',\n borderRadius: '5px',\n width: 'fit-content',\n zIndex: 2,\n gap: '5px',\n ...MCTagStyles[marketingCampaign!],\n '&:hover': {\n background: 'rgb(20 18 29 / 0.36)',\n },\n }}\n >\n {text === 'Selling Fast' && <Svg icon={'SellingFast'} width={20} />}\n {text === 'Short Supply' && <Svg icon={icons.SHORT_SUPPLY} width={20} />}\n {text === 'New Offer' && <Svg icon={'NewOffer'} width={20} />}\n {text === 'Whale Activity' && <Svg icon={'WhaleActivity'} width={20} />}\n {text.toUpperCase()}\n </Flex>\n )\n}\n\nexport default ListTag\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAOA,MAAM,EAAE,GAAG;IACT,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;CAC9B;AAED,MAAM,QAAQ,GAAG;IACf,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,cAAc,GAAG,SAAS;IAC3B,CAAC,WAAW,GAAG,SAAS;IACxB,CAAC,gBAAgB,GAAG,SAAS;CAC9B;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,iBAAiB,EAA4D,KAAI;IAC7G,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE;;AAEF,YAAA,UAAU,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,WAAW;;AAEnC,YAAA,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,SAAS;AAClC,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,CAAC,EAAE,SAAS;AACZ,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,aAAa;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,GAAG,EAAE,KAAK;YACV,GAAG,WAAW,CAAC,iBAAkB,CAAC;AAClC,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,sBAAsB;AACnC,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,CAEA,IAAI,KAAK,cAAc,IAAIC,IAAC,GAAG,EAAA,EAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,GAAI,EAClE,IAAI,KAAK,cAAc,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,KAAK,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EACvE,IAAI,KAAK,WAAW,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EAC5D,IAAI,KAAK,gBAAgB,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAA,CAAI,EACtE,IAAI,CAAC,WAAW,EAAE,CAAA,EAAA,CACd;AAEX;;;;"}

package/dist/views/Bonds/components/BondRows/BondRow.js CHANGED Viewed

@@ -48,6 +48,9 @@ const BondRow = ({ bondAddress, bondChain, marketingCampaign, payoutToken, billT
             // Insert special campaign styles here
             ...MCBondRowStyles[marketingCampaign],
             cursor: !bondSoldOut || (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',
+            '&:hover .list-tag': {
+                background: 'rgb(20 18 29 / 0.25)',
+            },
         }, children: [jsx("div", { className: "token-info-container", sx: { width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }, children: jsx(TokenInfoAndName, { tokenSymbol: payoutToken?.symbol, chain: bondChain, tag: tag, marketingCampaign: marketingCampaign }) }), SDKConfig.useCardsView && shortDescription && (jsx("div", { className: "short-description", children: jsx(SafeHTMLComponent, { html: shortDescription }) })), jsxs("div", { className: "bond-info-columns", sx: { width: ['55%', '55%', '55%', '70%'] }, children: [!SDKConfig.useCardsView && jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsx(BonusContainer, { trueBondPrices: trueBondPrices, minTier: minTier, bonus: bonus, airdropTooltip: airdropTooltip, isIREET: payoutToken.symbol.toLowerCase() === 'ireet' }), jsxs("div", { className: "terms-column", children: [vestingTermString, vestingCliffString && (jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: vestingCliffString }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx(Flex, { sx: { opacity: 0.6, ml: '6px' }, children: jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }), jsx("div", { className: "tokens-remaining-column", children: bondSoldOut ? ('-') : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: percentageAvailable }), style: {
                                 width: '127px',
                                 height: '25px',

package/dist/views/Bonds/components/BondRows/BondRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Svg from '../../../../components/uikit-sdk/Svg'\n\ninterface BondRowProps {\n bondAddress: string\n bondChain: ChainId\n marketingCampaign?: MarketingCampaign\n payoutToken: Token\n billType: string\n tag?: string\n bondSoldOut?: boolean\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n vestingTermString: string\n vestingCliffString?: string\n percentageAvailable: number\n remainingTokensString: string\n projectURL?: string\n twitterURL?: string\n shortDescription?: string\n soldoutBondsCount?: number\n isOpen?: boolean\n cgId?: string\n dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n bondAddress,\n bondChain,\n marketingCampaign,\n payoutToken,\n billType,\n tag,\n bondSoldOut,\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n vestingTermString,\n vestingCliffString,\n percentageAvailable,\n remainingTokensString,\n projectURL,\n twitterURL,\n shortDescription,\n soldoutBondsCount,\n isOpen,\n cgId,\n dexscreener,\n}) => {\n const SDKConfig = useSDKConfig()\n\n // Modal\n const [openBuyModal] = useModal(\n <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n true,\n true,\n `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n )\n\n const [openPreTGEBondModal] = useModal(\n <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n true,\n true,\n `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n\n const handleOpenModal = () => {\n if (bondSoldOut) return\n if (billType === 'fcfs') {\n openPreTGEBondModal()\n } else {\n openBuyModal()\n }\n if (typeof window !== 'undefined') {\n const locationPath = window.location.pathname.replace('/', '')\n window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'Row',\n bond: payoutToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n\n return (\n <div\n className=\"bond-row\"\n onClick={handleOpenModal}\n key={`${bondAddress}-${bondChain}`}\n sx={{\n borderRadius: 'normal',\n // Insert special campaign styles here\n ...MCBondRowStyles[marketingCampaign!],\n cursor: !bondSoldOut \|\| (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n }}\n >\n <div\n className=\"token-info-container\"\n sx={{ width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }}\n >\n <TokenInfoAndName\n tokenSymbol={payoutToken?.symbol}\n chain={bondChain}\n tag={tag}\n marketingCampaign={marketingCampaign}\n />\n </div>\n {SDKConfig.useCardsView && shortDescription && (\n <div className=\"short-description\">\n <SafeHTMLComponent html={shortDescription} />\n </div>\n )}\n <div className=\"bond-info-columns\" sx={{ width: ['55%', '55%', '55%', '70%'] }}>\n {!SDKConfig.useCardsView && <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />}\n <BonusContainer\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n isIREET={payoutToken.symbol.toLowerCase() === 'ireet'}\n />\n <div className=\"terms-column\">\n {vestingTermString}\n {vestingCliffString && (\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{vestingCliffString}</Flex>}\n width=\"180px\"\n placement=\"bottomRight\"\n transformTip=\"translate(13%, 0%)\"\n >\n <Flex sx={{ opacity: 0.6, ml: '6px' }}>\n <Svg icon=\"questionCircle\" width=\"12px\" />\n </Flex>\n </TooltipBubble>\n )}\n </div>\n <div className=\"tokens-remaining-column\">\n {bondSoldOut ? (\n '-'\n ) : (\n <ProgressBarWrapper\n title={''}\n value={<ProgressBar value={percentageAvailable} />}\n style={{\n width: '127px',\n height: '25px',\n flexDirection: 'column',\n justifyContent: 'center',\n display: ['none', 'none', 'none', 'flex'],\n }}\n showTooltip={true}\n toolTip={remainingTokensString}\n />\n )}\n </div>\n <div className=\"tooltip-column\">\n {soldoutBondsCount ? (\n <Flex sx={{ gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }}>\n ({soldoutBondsCount})\n <Svg icon=\"caret\" direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n </Flex>\n ) : (\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={\n <Tooltip\n earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n earnTokenSymbol={payoutToken?.symbol ?? ''}\n bondContract={bondAddress ?? ''}\n projectLink={projectURL}\n twitter={twitterURL}\n chain={bondChain}\n isSoldOut={bondSoldOut}\n billType={billType}\n cgId={cgId}\n dexscreener={dexscreener}\n />\n }\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(7%, -2%)\"\n >\n <Flex className=\"more-icon\" sx={{ opacity: 0.8 }}>\n <Svg icon=\"more\" width=\"25px\" />\n </Flex>\n </TooltipBubble>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nexport default BondRow\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}
1	+ {"version":3,"file":"BondRow.js","sources":["../../../../../src/views/Bonds/components/BondRows/BondRow.tsx"],"sourcesContent":["import React from 'react'\nimport { TrueBondPrices } from '../../../../types/bonds'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport { ChainId, LaunchBondTiers, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../../../hooks/useModal'\nimport ModalHandler from './ModalHandler'\nimport track from '../../../../utils/track'\nimport BonusContainer from '../BonusComponents/BonusContainer'\nimport ModalHandlerPreTGE from './ModalHandlerPreTGE'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport SafeHTMLComponent from '../../../../components/SafeHTMLComponent'\nimport { MCBondRowStyles } from '../../../../utils/campaignStyles'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport Svg from '../../../../components/uikit-sdk/Svg'\n\ninterface BondRowProps {\n bondAddress: string\n bondChain: ChainId\n marketingCampaign?: MarketingCampaign\n payoutToken: Token\n billType: string\n tag?: string\n bondSoldOut?: boolean\n trueBondPrices?: TrueBondPrices[]\n minTier?: LaunchBondTiers\n bonus?: string\n airdropTooltip?: string\n vestingTermString: string\n vestingCliffString?: string\n percentageAvailable: number\n remainingTokensString: string\n projectURL?: string\n twitterURL?: string\n shortDescription?: string\n soldoutBondsCount?: number\n isOpen?: boolean\n cgId?: string\n dexscreener?: string\n}\n\nconst BondRow: React.FC<BondRowProps> = ({\n bondAddress,\n bondChain,\n marketingCampaign,\n payoutToken,\n billType,\n tag,\n bondSoldOut,\n trueBondPrices,\n minTier,\n bonus,\n airdropTooltip,\n vestingTermString,\n vestingCliffString,\n percentageAvailable,\n remainingTokensString,\n projectURL,\n twitterURL,\n shortDescription,\n soldoutBondsCount,\n isOpen,\n cgId,\n dexscreener,\n}) => {\n const SDKConfig = useSDKConfig()\n\n // Modal\n const [openBuyModal] = useModal(\n <ModalHandler bondAddress={bondAddress} bondChain={bondChain} />,\n true,\n true,\n `buyBondModal-${bondAddress.toLowerCase()}-${bondChain}`,\n )\n\n const [openPreTGEBondModal] = useModal(\n <ModalHandlerPreTGE bondAddress={bondAddress} bondChain={bondChain} />,\n true,\n true,\n `preTGEBuyBondModal:${bondAddress.toLowerCase()}-${bondChain}}`,\n )\n\n const handleOpenModal = () => {\n if (bondSoldOut) return\n if (billType === 'fcfs') {\n openPreTGEBondModal()\n } else {\n openBuyModal()\n }\n if (typeof window !== 'undefined') {\n const locationPath = window.location.pathname.replace('/', '')\n window.history.pushState({}, '', `${locationPath}?bondAddress=${bondAddress}&bondChain=${bondChain}`)\n }\n track({\n event: 'buyModalOpen',\n chain: bondChain,\n data: {\n cat: 'Row',\n bond: payoutToken.symbol,\n bondChain: bondChain,\n },\n })\n }\n\n return (\n <div\n className=\"bond-row\"\n onClick={handleOpenModal}\n key={`${bondAddress}-${bondChain}`}\n sx={{\n borderRadius: 'normal',\n // Insert special campaign styles here\n ...MCBondRowStyles[marketingCampaign!],\n cursor: !bondSoldOut \|\| (soldoutBondsCount && !isOpen) ? 'pointer' : 'default',\n '&:hover .list-tag': {\n background: 'rgb(20 18 29 / 0.25)',\n },\n }}\n >\n <div\n className=\"token-info-container\"\n sx={{ width: ['45%', '45%', '45%', '30%'], minWidth: ['unset', 'unset', 'unset', '400px'] }}\n >\n <TokenInfoAndName\n tokenSymbol={payoutToken?.symbol}\n chain={bondChain}\n tag={tag}\n marketingCampaign={marketingCampaign}\n />\n </div>\n {SDKConfig.useCardsView && shortDescription && (\n <div className=\"short-description\">\n <SafeHTMLComponent html={shortDescription} />\n </div>\n )}\n <div className=\"bond-info-columns\" sx={{ width: ['55%', '55%', '55%', '70%'] }}>\n {!SDKConfig.useCardsView && <Flex sx={{ display: ['none', 'none', 'none', 'flex'], width: '125px' }} />}\n <BonusContainer\n trueBondPrices={trueBondPrices}\n minTier={minTier}\n bonus={bonus}\n airdropTooltip={airdropTooltip}\n isIREET={payoutToken.symbol.toLowerCase() === 'ireet'}\n />\n <div className=\"terms-column\">\n {vestingTermString}\n {vestingCliffString && (\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={<Flex>{vestingCliffString}</Flex>}\n width=\"180px\"\n placement=\"bottomRight\"\n transformTip=\"translate(13%, 0%)\"\n >\n <Flex sx={{ opacity: 0.6, ml: '6px' }}>\n <Svg icon=\"questionCircle\" width=\"12px\" />\n </Flex>\n </TooltipBubble>\n )}\n </div>\n <div className=\"tokens-remaining-column\">\n {bondSoldOut ? (\n '-'\n ) : (\n <ProgressBarWrapper\n title={''}\n value={<ProgressBar value={percentageAvailable} />}\n style={{\n width: '127px',\n height: '25px',\n flexDirection: 'column',\n justifyContent: 'center',\n display: ['none', 'none', 'none', 'flex'],\n }}\n showTooltip={true}\n toolTip={remainingTokensString}\n />\n )}\n </div>\n <div className=\"tooltip-column\">\n {soldoutBondsCount ? (\n <Flex sx={{ gap: '5px', fontSize: '13px', fontWeight: 500, opacity: 0.5 }}>\n ({soldoutBondsCount})\n <Svg icon=\"caret\" direction={isOpen ? 'up' : 'down'} width=\"8px\" />\n </Flex>\n ) : (\n <TooltipBubble\n className=\"tooltip-bubble\"\n body={\n <Tooltip\n earnTokenContract={payoutToken?.address?.[bondChain] ?? ''}\n earnTokenSymbol={payoutToken?.symbol ?? ''}\n bondContract={bondAddress ?? ''}\n projectLink={projectURL}\n twitter={twitterURL}\n chain={bondChain}\n isSoldOut={bondSoldOut}\n billType={billType}\n cgId={cgId}\n dexscreener={dexscreener}\n />\n }\n width=\"205px\"\n placement=\"bottomRight\"\n transformTip=\"translate(7%, -2%)\"\n >\n <Flex className=\"more-icon\" sx={{ opacity: 0.8 }}>\n <Svg icon=\"more\" width=\"25px\" />\n </Flex>\n </TooltipBubble>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nexport default BondRow\n"],"names":["_jsx","_jsxs","Tooltip"],"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":";;;;;;AAMA,MAAM,SAAS,GAAG,CAAC,EACjB,gBAAgB,EAChB,WAAW,EACX,SAAS,EACT,UAAU,GAMX,KAAI;IACH,MAAM,gBAAgB,GAAG,oBAAoB;AAC7C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAwC,IAAI,CAAC;AAEpE,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,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,EAAE,IAAI,CAAC;AAE9D,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;QACjC,MAAM,MAAM,GACV,gBAAgB,EAAE,GAAG,CAAC,CAAC,KAAK,MAAM;AAChC,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,CAAC,CAAC,IAAI,EAAE;AACX,QAAA,MAAM,CAAC,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;AAC7F,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAElC,SAAS,CAAC,MAAK;QACb,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC;AAChE,QAAA,IAAI,CAAC,cAAc,IAAI,QAAQ,CAAC,OAAO;YAAE;AAEzC,QAAA,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,eAAe,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;AAEnE,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,cAAc,EAAE;AACxC,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE;gBACN,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE;AAC3D,gBAAA,SAAS,EAAE,SAAS;AACrB,aAAA;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;AAC/B,gBAAA,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;AAChC,aAAA;AACD,YAAA,SAAS,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE;AACzC,YAAA,eAAe,EAAE;AACf,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,OAAO,EAAE,IAAI;gBACb,YAAY,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,iBAAiB,EAAE;AACvD,aAAA;AACD,YAAA,SAAS,EAAE;AACT,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,YAAY,EAAE,IAAI;AACnB,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,gBAAgB,EAAE,KAAK;AACvB,gBAAA,aAAa,EAAE,KAAK;AACpB,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA;AACD,YAAA,WAAW,EAAE;AACX,gBAAA,oBAAoB,EAAE,KAAK;AAC3B,gBAAA,UAAU,EAAE,KAAK;AACjB,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACD,YAAA,YAAY,EAAE;AACZ,gBAAA,cAAc,EAAE,CAAC,GAAW,KAAK,CAAA,CAAA,EAAI,qBAAqB,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;AACjF,aAAA;AACF,SAAA,CAAC;AAEF,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;AACrC,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,SAAS,CAAC,MAAM;AAChC,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,WAAW,EAAE;gBACX,SAAS;gBACT,OAAO;AACP,gBAAA,SAAS,EAAE,CAAC,GAAW,KAAK,qBAAqB,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACtE,aAAA;AACF,SAAA,CAAC;;AAGF,QAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;QAEjC,UAAU,CAAC,eAAe,CAAC;AACzB,YAAA,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC;YAC5B,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1C,YAAA,SAAS,EAAE,CAAC;YACZ,SAAS,EAAE,SAAS,CAAC,MAAM;AAC3B,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,KAAK,EAAE,YAAY;AACpB,SAAA,CAAC;AAEF,QAAA,KAAK,CAAC,SAAS,EAAE,CAAC,UAAU,EAAE;AAC9B,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK;AAExB,QAAA,OAAO,MAAK;YACV,KAAK,CAAC,MAAM,EAAE;AACd,YAAA,QAAQ,CAAC,OAAO,GAAG,IAAI;AACzB,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;AAE9D,IAAA,OAAOA,aAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAQ;AACpF;;;;"}

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.2",
+  "version": "6.0.4",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",