@ape.swap/bonds-sdk 6.0.3 → 6.0.4

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

@@ -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

@@ -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":"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"}
+{"version":3,"file":"LineChart.js","sources":["../../../../../../src/views/ProjectView/components/PriceChart/components/LineChart.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from 'react'\nimport { ColorType, createChart, CrosshairMode, LineStyle } from 'lightweight-charts'\nimport { HistoricalPrices } from '../../../ProjectView'\nimport { getFirstNonZeroDigits } from '../../../../../utils/roundNumber'\nimport { determineValues } from './utils'\n\nconst LineChart = ({\n  historicalPrices,\n  hasDiscount,\n  bondPrice,\n  tokenPrice,\n}: {\n  historicalPrices?: HistoricalPrices[] | null\n  hasDiscount: boolean\n  bondPrice: string\n  tokenPrice: string\n}) => {\n  const chartContainerId = 'lineChartContainer'\n  const chartRef = useRef<ReturnType<typeof createChart> | null>(null)\n\n  const discount = 1 - parseFloat(bondPrice ?? '0') / parseFloat(tokenPrice ?? '0')\n  const discountToUse = discount > 0 ? discount : 0\n  const bottomScaleMargin = Math.min(discountToUse + 0.15, 0.85)\n\n  const formattedData = useMemo(() => {\n    const mapped =\n      historicalPrices?.map((entry) => ({\n        time: parseInt(entry.timestamp),\n        value: parseFloat(getFirstNonZeroDigits(entry.close, 4)),\n      })) ?? []\n    mapped.push({ time: Math.floor(new Date().getTime() / 1000), value: parseFloat(tokenPrice) })\n    return mapped\n  }, [historicalPrices, tokenPrice])\n\n  useEffect(() => {\n    const chartContainer = document.getElementById(chartContainerId)\n    if (!chartContainer || chartRef.current) return\n\n    const [precision, minMove] = determineValues(parseFloat(bondPrice))\n\n    const chart = createChart(chartContainer, {\n      width: 0,\n      height: 0,\n      layout: {\n        background: { type: ColorType.Solid, color: 'transparent' },\n        textColor: '#73728E',\n      },\n      grid: {\n        vertLines: { color: '#73728E' },\n        horzLines: { color: '#73728E' },\n      },\n      crosshair: { mode: CrosshairMode.Magnet },\n      rightPriceScale: {\n        borderColor: '#73728E',\n        visible: true,\n        scaleMargins: { top: 0.12, bottom: bottomScaleMargin },\n      },\n      timeScale: {\n        borderColor: '#73728E',\n        fixLeftEdge: true,\n        fixRightEdge: true,\n      },\n      handleScroll: {\n        mouseWheel: false,\n        pressedMouseMove: false,\n        horzTouchDrag: false,\n        vertTouchDrag: false,\n      },\n      handleScale: {\n        axisPressedMouseMove: false,\n        mouseWheel: false,\n        pinch: false,\n      },\n      localization: {\n        priceFormatter: (val: string) => `$${getFirstNonZeroDigits(parseFloat(val), 3)}`,\n      },\n    })\n\n    const areaSeries = chart.addAreaSeries({\n      lineColor: '#5E59B5',\n      topColor: '#5E59B5',\n      bottomColor: '#514CA133',\n      priceLineWidth: 2,\n      priceLineStyle: LineStyle.Dashed,\n      priceLineVisible: true,\n      priceFormat: {\n        precision,\n        minMove,\n        formatter: (val: string) => getFirstNonZeroDigits(parseFloat(val), 3),\n      },\n    })\n\n    //@ts-ignore\n    areaSeries.setData(formattedData)\n\n    areaSeries.createPriceLine({\n      price: parseFloat(bondPrice),\n      color: hasDiscount ? '#38A611' : '#DF4141',\n      lineWidth: 2,\n      lineStyle: LineStyle.Dashed,\n      axisLabelVisible: true,\n      title: 'Bond Price',\n    })\n\n    chart.timeScale().fitContent()\n    chartRef.current = chart\n\n    return () => {\n      chart.remove()\n      chartRef.current = null\n    }\n  }, [bondPrice, bottomScaleMargin, formattedData, hasDiscount])\n\n  return <div id={chartContainerId} style={{ width: '100%', height: '100%' }}></div>\n}\n\nexport default LineChart\n"],"names":["_jsx"],"mappings":"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"}

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

@@ -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

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

@@ -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

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

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