}){kind=logo}
\n {index}
}\n \n
\n )\n )\n })\n\n return (\n - {!pairList ?
{index}
}\n - \n {filteredList &&\n filteredList.map((item, index) => {\n return (\n
\n
\n )\n })}\n setPage(page === 1 ? page : page - 1)}>\n ← \n
\n setPage(page === maxPage ? page : page + 1)}>\n → \n
\n - \n {!filteredList ? (\n
\n
\n )\n })\n )}\n ${title} ${\n type === CHART_TYPES.BAR && !useWeekly ? '(24hr)' : ''\n }
` +\n `` +\n formattedNum(base ?? 0, true) +\n `${''}` +\n '
'\n }\n setLastBarText()\n\n // update the title when hovering on the chart\n chart.subscribeCrosshairMove(function (param) {\n if (\n param === undefined ||\n param.time === undefined ||\n param.point.x < 0 ||\n param.point.x > width ||\n param.point.y < 0 ||\n param.point.y > HEIGHT\n ) {\n setLastBarText()\n } else {\n let dateStr = useWeekly\n ? dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day)\n .startOf('week')\n .format('MMMM D, YYYY') +\n '-' +\n dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day)\n .endOf('week')\n .format('MMMM D, YYYY')\n : dayjs(param.time.year + '-' + param.time.month + '-' + param.time.day).format('MMMM D, YYYY')\n var price = param.seriesPrices.get(series)\n\n toolTip.innerHTML =\n `${title}
` +\n `` +\n formattedNum(price, true) +\n '
' +\n '' +\n dateStr +\n '
'\n }\n })\n\n chart.timeScale().fitContent()\n\n setChartCreated(chart)\n }\n }, [\n base,\n baseChange,\n chartCreated,\n darkMode,\n data,\n formattedData,\n textColor,\n title,\n topScale,\n type,\n useWeekly,\n width,\n ])\n\n // responsiveness\n useEffect(() => {\n if (width) {\n chartCreated && chartCreated.resize(width, HEIGHT)\n chartCreated && chartCreated.timeScale().scrollToPosition(0)\n }\n }, [chartCreated, width])\n\n return (\n {children}
\n {open ? (\n {children}
\n \n \n {below800 ? 'Analytics' : 'Neverswap Analytics'} \n \n {below800 && ( // mobile card\n \n \n \n \n \n \n Volume (24hrs) \n \n \n \n \n {formattedNum(oneDayVolumeUSD, true)}\n \n {formattedPercent(volumeChangeUSD)} \n \n \n \n \n Total Liquidity \n \n \n \n \n {formattedNum(totalLiquidityUSD, true)}\n \n {formattedPercent(liquidityChangeUSD)} \n \n \n \n \n \n \n )}\n {!below800 && (\n \n \n \n \n \n \n )}\n {below800 && (\n \n \n \n \n )}\n \n \n Top Tokens \n See All \n \n \n \n \n \n \n Top Pairs \n See All \n \n \n \n \n\n \n \n Transactions\n \n \n \n \n
\n ` + valueFormatter(base) + '
'\n : ''\n }\n setLastBarText()\n\n // update the title when hovering on the chart\n chart.subscribeCrosshairMove(function (param) {\n if (\n param === undefined ||\n param.time === undefined ||\n param.point.x < 0 ||\n param.point.x > width ||\n param.point.y < 0 ||\n param.point.y > height\n ) {\n setLastBarText()\n } else {\n var price = param.seriesPrices.get(candleSeries).close\n const time = dayjs.unix(param.time).format('MM/DD h:mm A')\n toolTip.innerHTML =\n `` +\n valueFormatter(price) +\n `` +\n time +\n ' UTC' +\n '' +\n '
'\n }\n })\n\n chart.timeScale().fitContent()\n\n setChartCreated(chart)\n }\n }, [chartCreated, formattedData, width, height, valueFormatter, base, margin, textColor])\n\n // responsiveness\n useEffect(() => {\n if (width) {\n chartCreated && chartCreated.resize(width, height)\n chartCreated && chartCreated.timeScale().scrollToPosition(0)\n }\n }, [chartCreated, height, width])\n\n return (\n \n \n \n {\n chartCreated && chartCreated.timeScale().fitContent()\n }}\n />\n \n
\n )\n}\n\nexport default CandleStickChart\n","import React, { useState, useRef, useEffect } from 'react'\nimport styled from 'styled-components'\nimport { Area, XAxis, YAxis, ResponsiveContainer, Tooltip, AreaChart, BarChart, Bar } from 'recharts'\nimport { AutoRow, RowBetween, RowFixed } from '../Row'\n\nimport { toK, toNiceDate, toNiceDateYear, formattedNum, getTimeframe } from '../../utils'\nimport { OptionButton } from '../ButtonStyled'\nimport { darken } from 'polished'\nimport { useMedia, usePrevious } from 'react-use'\nimport { timeframeOptions } from '../../constants'\nimport { useTokenChartData, useTokenPriceData } from '../../contexts/TokenData'\nimport DropdownSelect from '../DropdownSelect'\nimport CandleStickChart from '../CandleChart'\nimport LocalLoader from '../LocalLoader'\nimport { AutoColumn } from '../Column'\nimport { Activity } from 'react-feather'\nimport { useDarkModeManager } from '../../contexts/LocalStorage'\n\nconst ChartWrapper = styled.div`\n height: 100%;\n min-height: 300px;\n\n @media screen and (max-width: 600px) {\n min-height: 200px;\n }\n`\n\nconst PriceOption = styled(OptionButton)`\n border-radius: 2px;\n`\n\nconst CHART_VIEW = {\n VOLUME: 'Volume',\n LIQUIDITY: 'Liquidity',\n PRICE: 'Price',\n LINE_PRICE: 'Price (Line)',\n}\n\nconst DATA_FREQUENCY = {\n DAY: 'DAY',\n HOUR: 'HOUR',\n LINE: 'LINE',\n}\n\nconst TokenChart = ({ address, color, base }) => {\n // settings for the window and candle width\n const [chartFilter, setChartFilter] = useState(CHART_VIEW.PRICE)\n const [frequency, setFrequency] = useState(DATA_FREQUENCY.HOUR)\n\n const [darkMode] = useDarkModeManager()\n const textColor = darkMode ? 'white' : 'black'\n\n // reset view on new address\n const addressPrev = usePrevious(address)\n useEffect(() => {\n if (address !== addressPrev && addressPrev) {\n setChartFilter(CHART_VIEW.LIQUIDITY)\n }\n }, [address, addressPrev])\n\n let chartData = useTokenChartData(address)\n\n const [timeWindow, setTimeWindow] = useState(timeframeOptions.ALL_TIME)\n const prevWindow = usePrevious(timeWindow)\n\n // hourly and daily price data based on the current time window\n const hourlyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 3600)\n const hourlyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 3600)\n const hourlyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 3600)\n const dailyWeek = useTokenPriceData(address, timeframeOptions.WEEK, 86400)\n const dailyMonth = useTokenPriceData(address, timeframeOptions.MONTH, 86400)\n const dailyAll = useTokenPriceData(address, timeframeOptions.ALL_TIME, 86400)\n\n const priceData =\n timeWindow === timeframeOptions.MONTH\n ? // monthly selected\n frequency === DATA_FREQUENCY.DAY\n ? dailyMonth\n : hourlyMonth\n : // weekly selected\n timeWindow === timeframeOptions.WEEK\n ? frequency === DATA_FREQUENCY.DAY\n ? dailyWeek\n : hourlyWeek\n : // all time selected\n frequency === DATA_FREQUENCY.DAY\n ? dailyAll\n : hourlyAll\n\n // switch to hourly data when switched to week window\n useEffect(() => {\n if (timeWindow === timeframeOptions.WEEK && prevWindow && prevWindow !== timeframeOptions.WEEK) {\n setFrequency(DATA_FREQUENCY.HOUR)\n }\n }, [prevWindow, timeWindow])\n\n // switch to daily data if switche to month or all time view\n useEffect(() => {\n if (timeWindow === timeframeOptions.MONTH && prevWindow && prevWindow !== timeframeOptions.MONTH) {\n setFrequency(DATA_FREQUENCY.DAY)\n }\n if (timeWindow === timeframeOptions.ALL_TIME && prevWindow && prevWindow !== timeframeOptions.ALL_TIME) {\n setFrequency(DATA_FREQUENCY.DAY)\n }\n }, [prevWindow, timeWindow])\n\n const below1080 = useMedia('(max-width: 1080px)')\n const below600 = useMedia('(max-width: 600px)')\n\n let utcStartTime = getTimeframe(timeWindow)\n const domain = [(dataMin) => (dataMin > utcStartTime ? dataMin : utcStartTime), 'dataMax']\n const aspect = below1080 ? 60 / 32 : below600 ? 60 / 42 : 60 / 22\n\n chartData = chartData?.filter((entry) => entry.date >= utcStartTime)\n\n // update the width on a window resize\n const ref = useRef()\n const isClient = typeof window === 'object'\n const [width, setWidth] = useState(ref?.current?.container?.clientWidth)\n useEffect(() => {\n if (!isClient) {\n return false\n }\n function handleResize() {\n setWidth(ref?.current?.container?.clientWidth ?? width)\n }\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [isClient, width]) // Empty array ensures that effect is only run on mount and unmount\n\n return (\n \n \n Anyone can create and name any BEP20 token on BSC, including creating fake versions of existing tokens and\n tokens that claim to represent projects that do not have a token.\n \n \n Similar to bscscan.com, this site automatically tracks analytics for all BEP20 tokens independent of token\n integrity. Please do your own research before interacting with any BEP20 token.\n \n
\n ) : (\n \n \n \n View {type === 'token' ? 'token' : 'pair'} contract on bscscan.com\n \n \n \n \n setShow(false)}>\n I understand\n \n \n
\n ) : (\n \n