- \n {!filteredList ? (\n
\n
\n )\n })\n )}\n {children}
\n {open ? (\n {children}
\n \n
\n )\n })\n\n return (\n - {!positionsSorted ?
setPage(page === 1 ? page : page - 1)}>\n ← \n
\n setPage(page === maxPage ? page : page + 1)}>\n → \n
\n \n
\n )\n })\n\n return (\n - {!miningPositionsSorted ?
setPage(page === 1 ? page : page - 1)}>\n ← \n
\n setPage(page === maxPage ? page : page + 1)}>\n → \n
\n \n \n \n {pairData.token0.symbol + '/' + pairData.token1.symbol} \n \n\n \n \n Volume \n Price change \n \n \n {`${formatAmount(+Number(pairData.volumeUSD).toFixed(1))}$`} \n \n {`${formatAmount(+pairData.liquidityChangeUSD.toFixed(2), 2, 2)}%`}\n \n \n \n\n \n */}\n {/* 24H Volume */}\n {/* */}\n {/* {formattedNum(pairData.oneDayVolumeUSD.toFixed(0), true)} */}\n {/* */}\n {/* */}\n {/* \n TVL \n \n {formattedNum(pairData.reserveUSD || pairData.trackedReserveUSD, true)}\n \n \n \n\n \n Provide liquidity \n \n
\n \n \n <img style={{ marginLeft: '20px' }} width={'120px'} src={LogoDark} alt=\"logo\" />\n \n \n \n
\n \n Go to IXSwap Prime\n
\n\n Go to IXSwap Prime\n
\n\n \n Security pools\n \n \n Security Pools are decentralized financial mechanisms in the realm of cryptocurrencies designed to\n enhance the security and stability of digital asset transactions. These pools serve as a\n collective resource where participants contribute their funds to mitigate risks associated with\n various crypto-related activities.\n \n
\n\n In Maintainance mode
\n {/*{cell}
\n ))}\n \n \n {`$${formatAmount(Number(volumeUSD), 1, 1)}`}\n \n
\n \n 0 ? 'green' : liquidityChangeUSD < 0 ? 'red' : 'green' }}\n fontSize={13}\n lineHeight=\"30px\"\n >\n {`${formatAmount(liquidityChangeUSD, 2, 2)}%`}\n \n
\n \n \n {`$${formatAmount(oneDayVolumeUSD, 0, 0)}`}\n \n
\n \n \n {`${formattedNum(reserveUSD || trackedReserveUSD, true)}`}\n \n
\n \n {/* */}\n \n Details\n \n {/* */}\n
\n \n {cell}\n
\n ))}\n \n \n {getTransactionType(__typename, token0Symbol, token1Symbol)}\n \n
\n \n \n {`${formattedNum(amountUSD, true)}`}\n \n
\n \n \n {' '}\n {`${formattedNum(token0Amount)} ${token0Symbol}`}\n \n
\n \n \n {`${formattedNum(token1Amount)} ${token1Symbol}`}\n \n
\n \n {/* */}\n \n {sender && sender.slice(0, 6) + '...' + sender.slice(38, 42)}\n {to && to.slice(0, 6) + '...' + to.slice(38, 42)}\n \n {/* */}\n
\n \n \n {`${formatTime(+transaction.timestamp)}`}\n \n
\n {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 \n Anyone can create and name any ERC20 token on Ethereum, 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 Etherscan, this site automatically tracks analytics for all ERC20 tokens independent of token\n integrity. Please do your own research before interacting with any ERC20 token.\n \n
\n ) : (\n \n \n \n View {type === 'token' ? 'token' : 'pair'} contract on Etherscan\n \n \n \n \n setShow(false)}>\n I understand\n \n \n
\n ) : (\n Loading...
\n )}\n{value}
\n {index}
}\n \n
\n )\n )\n })\n\n return (\n - {!pairList ?
` + 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'\nimport { flip } from '@popperjs/core'\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, price }) => {\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.WEEK)\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 setChartFilter(CHART_VIEW.LIQUIDITY)}\n style={{ marginRight: '6px' }}\n >\n Liquidity\n \n setChartFilter(CHART_VIEW.VOLUME)}\n style={{ marginRight: '6px' }}\n >\n Volume\n \n {\n setChartFilter(CHART_VIEW.PRICE)\n }}\n >\n Price\n \n
\n {chartFilter === CHART_VIEW.PRICE && (\n \n {' '}\n {formattedSymbol ? `${formattedSymbol}` : ''}\n
\n \n