2022-11-18 11:11:06 -08:00
|
|
|
import { useEffect, useMemo, useState } from 'react'
|
2022-07-10 19:01:16 -07:00
|
|
|
import dayjs from 'dayjs'
|
|
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
2022-07-12 20:58:13 -07:00
|
|
|
import {
|
|
|
|
AreaChart,
|
|
|
|
Area,
|
|
|
|
XAxis,
|
|
|
|
YAxis,
|
2023-04-13 22:22:39 -07:00
|
|
|
Tooltip as RechartsTooltip,
|
2022-07-12 20:58:13 -07:00
|
|
|
ResponsiveContainer,
|
2022-09-14 12:38:43 -07:00
|
|
|
Text,
|
2023-04-13 22:22:39 -07:00
|
|
|
ReferenceDot,
|
2022-07-12 20:58:13 -07:00
|
|
|
} from 'recharts'
|
2022-07-22 10:07:55 -07:00
|
|
|
import FlipNumbers from 'react-flip-numbers'
|
2022-07-10 19:01:16 -07:00
|
|
|
import ContentBox from '../shared/ContentBox'
|
2023-01-24 16:54:24 -08:00
|
|
|
import { formatNumericValue } from '../../utils/numbers'
|
2022-07-23 21:27:54 -07:00
|
|
|
import SheenLoader from '../shared/SheenLoader'
|
2022-08-02 17:17:42 -07:00
|
|
|
import { COLORS } from '../../styles/colors'
|
|
|
|
import { useTheme } from 'next-themes'
|
2022-10-05 22:11:28 -07:00
|
|
|
import Change from '../shared/Change'
|
2022-09-07 23:25:32 -07:00
|
|
|
import ChartRangeButtons from '../shared/ChartRangeButtons'
|
2022-09-14 12:38:43 -07:00
|
|
|
import { useViewport } from 'hooks/useViewport'
|
2022-10-05 19:23:31 -07:00
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
2022-10-07 16:39:06 -07:00
|
|
|
import { useQuery } from '@tanstack/react-query'
|
2023-02-23 09:28:09 -08:00
|
|
|
import { ChartDataItem, fetchChartData } from 'apis/coingecko'
|
2022-10-10 10:28:53 -07:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2022-11-18 11:11:06 -08:00
|
|
|
import useJupiterSwapData from './useJupiterSwapData'
|
2022-11-23 18:30:20 -08:00
|
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
|
|
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
|
2022-11-24 18:39:14 -08:00
|
|
|
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
|
2022-12-11 15:21:40 -08:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-04-13 22:22:39 -07:00
|
|
|
import {
|
|
|
|
ArrowsRightLeftIcon,
|
|
|
|
EyeIcon,
|
|
|
|
EyeSlashIcon,
|
|
|
|
NoSymbolIcon,
|
|
|
|
} from '@heroicons/react/20/solid'
|
2023-01-24 16:54:24 -08:00
|
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
2023-02-23 09:28:09 -08:00
|
|
|
import { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
|
2023-04-13 22:22:39 -07:00
|
|
|
import { interpolateNumber } from 'd3-interpolate'
|
|
|
|
import { IconButton } from '@components/shared/Button'
|
|
|
|
import Tooltip from '@components/shared/Tooltip'
|
2022-07-10 19:01:16 -07:00
|
|
|
|
|
|
|
dayjs.extend(relativeTime)
|
|
|
|
|
2022-09-14 12:38:43 -07:00
|
|
|
const CustomizedLabel = ({
|
|
|
|
chartData,
|
|
|
|
x,
|
|
|
|
y,
|
|
|
|
value,
|
2023-01-05 20:38:13 -08:00
|
|
|
index,
|
2022-09-14 12:38:43 -07:00
|
|
|
}: {
|
2023-02-23 09:28:09 -08:00
|
|
|
chartData: ChartDataItem[]
|
2022-09-14 12:38:43 -07:00
|
|
|
x?: number
|
|
|
|
y?: string | number
|
|
|
|
value?: number
|
2023-01-05 20:38:13 -08:00
|
|
|
index?: number
|
2022-09-14 12:38:43 -07:00
|
|
|
}) => {
|
|
|
|
const { width } = useViewport()
|
|
|
|
const [min, max] = useMemo(() => {
|
|
|
|
if (chartData.length) {
|
2023-02-23 09:28:09 -08:00
|
|
|
const prices = chartData.map((d) => d.price)
|
2022-09-14 12:38:43 -07:00
|
|
|
return [Math.min(...prices), Math.max(...prices)]
|
|
|
|
}
|
|
|
|
return ['', '']
|
|
|
|
}, [chartData])
|
|
|
|
|
2023-01-05 20:38:13 -08:00
|
|
|
const [minIndex, maxIndex] = useMemo(() => {
|
|
|
|
const minIndex = chartData.findIndex((d) => d.price === min)
|
|
|
|
const maxIndex = chartData.findIndex((d) => d.price === max)
|
|
|
|
return [minIndex, maxIndex]
|
|
|
|
}, [min, max, chartData])
|
|
|
|
|
|
|
|
if (value && (minIndex === index || maxIndex === index)) {
|
2022-09-14 12:38:43 -07:00
|
|
|
return (
|
|
|
|
<Text
|
|
|
|
x={x}
|
|
|
|
y={y}
|
|
|
|
dy={value === min ? 16 : -8}
|
2022-12-04 01:21:32 -08:00
|
|
|
fill="var(--fgd-4)"
|
2022-09-14 12:38:43 -07:00
|
|
|
fontSize={10}
|
|
|
|
textAnchor={x && y && x > width / 3 ? 'end' : 'start'}
|
2022-09-22 22:09:38 -07:00
|
|
|
className="font-mono"
|
2022-09-14 12:38:43 -07:00
|
|
|
>
|
2023-01-24 16:54:24 -08:00
|
|
|
{formatNumericValue(value)}
|
2022-09-14 12:38:43 -07:00
|
|
|
</Text>
|
|
|
|
)
|
|
|
|
} else return <div />
|
|
|
|
}
|
|
|
|
|
2022-11-18 11:11:06 -08:00
|
|
|
const SwapTokenChart = () => {
|
2022-12-11 15:21:40 -08:00
|
|
|
const { t } = useTranslation('common')
|
2023-01-12 12:46:30 -08:00
|
|
|
const inputBank = mangoStore((s) => s.swap.inputBank)
|
|
|
|
const outputBank = mangoStore((s) => s.swap.outputBank)
|
2022-11-18 11:11:06 -08:00
|
|
|
const { inputCoingeckoId, outputCoingeckoId } = useJupiterSwapData()
|
|
|
|
const [baseTokenId, setBaseTokenId] = useState(inputCoingeckoId)
|
|
|
|
const [quoteTokenId, setQuoteTokenId] = useState(outputCoingeckoId)
|
2023-02-23 09:28:09 -08:00
|
|
|
const [mouseData, setMouseData] = useState<ChartDataItem>()
|
2022-11-29 21:30:18 -08:00
|
|
|
const [daysToShow, setDaysToShow] = useState('1')
|
2023-01-12 20:26:07 -08:00
|
|
|
const [flipPrices, setFlipPrices] = useState(false)
|
2022-08-02 17:17:42 -07:00
|
|
|
const { theme } = useTheme()
|
2022-11-23 18:30:20 -08:00
|
|
|
const [animationSettings] = useLocalStorageState(
|
|
|
|
ANIMATION_SETTINGS_KEY,
|
|
|
|
INITIAL_ANIMATION_SETTINGS
|
|
|
|
)
|
2023-04-13 22:22:39 -07:00
|
|
|
const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data)
|
|
|
|
const loadSwapHistory = mangoStore((s) => s.mangoAccount.swapHistory.loading)
|
|
|
|
const [showSwaps, setShowSwaps] = useState(false)
|
2022-11-18 11:11:06 -08:00
|
|
|
|
2022-10-07 16:39:06 -07:00
|
|
|
const chartDataQuery = useQuery(
|
2022-11-18 08:29:37 -08:00
|
|
|
['chart-data', baseTokenId, quoteTokenId, daysToShow],
|
|
|
|
() => fetchChartData(baseTokenId, quoteTokenId, daysToShow),
|
2022-11-18 20:59:06 -08:00
|
|
|
{
|
2022-12-15 12:43:20 -08:00
|
|
|
cacheTime: 1000 * 60 * 15,
|
2022-11-18 20:59:06 -08:00
|
|
|
staleTime: 1000 * 60 * 1,
|
|
|
|
enabled: !!baseTokenId && !!quoteTokenId,
|
2023-01-20 08:13:03 -08:00
|
|
|
refetchOnWindowFocus: false,
|
2022-11-18 20:59:06 -08:00
|
|
|
}
|
2022-10-07 16:39:06 -07:00
|
|
|
)
|
2023-01-12 20:26:07 -08:00
|
|
|
|
|
|
|
const chartData = useMemo(() => {
|
|
|
|
if (!chartDataQuery?.data?.length) return []
|
|
|
|
if (!flipPrices) {
|
|
|
|
return chartDataQuery.data
|
|
|
|
} else {
|
|
|
|
return chartDataQuery.data.map((d: ChartDataItem) => {
|
2023-02-23 09:28:09 -08:00
|
|
|
const price =
|
|
|
|
d.inputTokenPrice / d.outputTokenPrice === d.price
|
|
|
|
? d.outputTokenPrice / d.inputTokenPrice
|
|
|
|
: d.inputTokenPrice / d.outputTokenPrice
|
2023-01-12 20:26:07 -08:00
|
|
|
return { ...d, price: price }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}, [flipPrices, chartDataQuery])
|
2022-07-10 19:01:16 -07:00
|
|
|
|
2023-04-13 22:22:39 -07:00
|
|
|
const chartSwapTimes = useMemo(() => {
|
|
|
|
if (loadSwapHistory || !swapHistory.length || !inputBank || !outputBank)
|
|
|
|
return []
|
|
|
|
const chartSymbols = [inputBank.name, outputBank.name]
|
|
|
|
return swapHistory
|
|
|
|
.filter(
|
|
|
|
(swap) =>
|
|
|
|
chartSymbols.includes(swap.swap_in_symbol) &&
|
|
|
|
chartSymbols.includes(swap.swap_out_symbol)
|
|
|
|
)
|
|
|
|
.map((val) => dayjs(val.block_datetime).unix() * 1000)
|
|
|
|
}, [swapHistory, loadSwapHistory, inputBank, outputBank])
|
|
|
|
|
|
|
|
const highlightPoints = useMemo(() => {
|
|
|
|
if (!chartData.length || !chartSwapTimes.length) return []
|
|
|
|
return chartSwapTimes.map((x) => {
|
|
|
|
const makeChartDataItem = { inputTokenPrice: 1, outputTokenPrice: 1 }
|
|
|
|
const index = chartData.findIndex((d) => d.time > x) // find index of data point with x value greater than highlight x
|
|
|
|
if (index === 0) {
|
|
|
|
return { time: x, price: chartData[0].price, ...makeChartDataItem } // return first data point y value if highlight x is less than first data point x
|
|
|
|
} else if (index === -1) {
|
|
|
|
return {
|
|
|
|
time: x,
|
|
|
|
price: chartData[chartData.length - 1].price,
|
|
|
|
...makeChartDataItem,
|
|
|
|
} // return last data point y value if highlight x is greater than last data point x
|
|
|
|
} else {
|
|
|
|
const x0 = chartData[index - 1].time
|
|
|
|
const x1 = chartData[index].time
|
|
|
|
const y0 = chartData[index - 1].price
|
|
|
|
const y1 = chartData[index].price
|
|
|
|
const interpolateY = interpolateNumber(y0, y1) // create interpolate function for y values
|
|
|
|
const y = interpolateY((x - x0) / (x1 - x0)) // estimate y value at highlight x using interpolate function
|
|
|
|
return { time: x, price: y, ...makeChartDataItem }
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}, [chartData, chartSwapTimes])
|
|
|
|
|
|
|
|
const charty = useMemo(() => {
|
|
|
|
if (!chartData.length) return []
|
|
|
|
const minTime = chartData[0].time
|
|
|
|
const maxTime = chartData[chartData.length - 1].time
|
|
|
|
if (highlightPoints.length) {
|
|
|
|
const swapPoints = highlightPoints.filter(
|
|
|
|
(point) => point.time >= minTime && point.time <= maxTime
|
|
|
|
)
|
|
|
|
return chartData.concat(swapPoints).sort((a, b) => a.time - b.time)
|
|
|
|
} else return chartData
|
|
|
|
}, [chartData, highlightPoints])
|
|
|
|
|
2023-02-23 09:28:09 -08:00
|
|
|
const handleMouseMove: CategoricalChartFunc = (coords) => {
|
2022-07-10 19:01:16 -07:00
|
|
|
if (coords.activePayload) {
|
|
|
|
setMouseData(coords.activePayload[0].payload)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleMouseLeave = () => {
|
2023-02-23 09:28:09 -08:00
|
|
|
setMouseData(undefined)
|
2022-07-10 19:01:16 -07:00
|
|
|
}
|
|
|
|
|
2022-11-18 08:29:37 -08:00
|
|
|
useEffect(() => {
|
2022-11-18 11:11:06 -08:00
|
|
|
if (!inputCoingeckoId || !outputCoingeckoId) return
|
2022-11-18 08:29:37 -08:00
|
|
|
|
2022-11-18 11:11:06 -08:00
|
|
|
if (['usd-coin', 'tether'].includes(outputCoingeckoId)) {
|
|
|
|
setBaseTokenId(inputCoingeckoId)
|
|
|
|
setQuoteTokenId(outputCoingeckoId)
|
2022-11-18 08:29:37 -08:00
|
|
|
} else {
|
2022-11-18 11:11:06 -08:00
|
|
|
setBaseTokenId(outputCoingeckoId)
|
|
|
|
setQuoteTokenId(inputCoingeckoId)
|
2022-11-18 08:29:37 -08:00
|
|
|
}
|
2022-11-18 11:11:06 -08:00
|
|
|
}, [inputCoingeckoId, outputCoingeckoId])
|
2022-11-18 08:29:37 -08:00
|
|
|
|
2022-07-19 20:49:33 -07:00
|
|
|
const calculateChartChange = () => {
|
2023-04-13 22:22:39 -07:00
|
|
|
if (charty?.length) {
|
2022-07-26 04:15:07 -07:00
|
|
|
if (mouseData) {
|
2023-04-13 22:22:39 -07:00
|
|
|
const index = charty.findIndex((d) => d.time === mouseData.time)
|
2022-07-26 04:15:07 -07:00
|
|
|
return (
|
2023-04-13 22:22:39 -07:00
|
|
|
((charty[index]['price'] - charty[0]['price']) / charty[0]['price']) *
|
2022-07-26 04:15:07 -07:00
|
|
|
100
|
|
|
|
)
|
|
|
|
} else
|
|
|
|
return (
|
2023-04-13 22:22:39 -07:00
|
|
|
((charty[charty.length - 1]['price'] - charty[0]['price']) /
|
|
|
|
charty[0]['price']) *
|
2022-07-26 04:15:07 -07:00
|
|
|
100
|
|
|
|
)
|
2022-07-19 20:49:33 -07:00
|
|
|
}
|
|
|
|
return 0
|
|
|
|
}
|
2022-07-10 19:01:16 -07:00
|
|
|
|
2023-01-12 20:26:07 -08:00
|
|
|
const swapMarketName = useMemo(() => {
|
|
|
|
if (!inputBank || !outputBank) return ''
|
|
|
|
const inputSymbol = formatTokenSymbol(inputBank.name?.toUpperCase())
|
|
|
|
const outputSymbol = formatTokenSymbol(outputBank.name?.toUpperCase())
|
|
|
|
return ['usd-coin', 'tether'].includes(inputCoingeckoId || '')
|
|
|
|
? !flipPrices
|
|
|
|
? `${outputSymbol}/${inputSymbol}`
|
|
|
|
: `${inputSymbol}/${outputSymbol}`
|
|
|
|
: !flipPrices
|
|
|
|
? `${inputSymbol}/${outputSymbol}`
|
|
|
|
: `${outputSymbol}/${inputSymbol}`
|
|
|
|
}, [flipPrices, inputBank, inputCoingeckoId, outputBank])
|
|
|
|
|
2023-04-13 22:22:39 -07:00
|
|
|
const getSwapFillColor = (x: number) => {
|
|
|
|
const swapDetails = swapHistory.find(
|
|
|
|
(swap) => dayjs(swap.block_datetime).unix() * 1000 === x
|
|
|
|
)
|
|
|
|
const side =
|
|
|
|
swapDetails?.swap_in_symbol === inputBank?.name ? 'sell' : 'buy'
|
|
|
|
return side === 'buy'
|
|
|
|
? !flipPrices
|
|
|
|
? COLORS.UP[theme]
|
|
|
|
: COLORS.DOWN[theme]
|
|
|
|
: !flipPrices
|
|
|
|
? COLORS.DOWN[theme]
|
|
|
|
: COLORS.UP[theme]
|
|
|
|
}
|
|
|
|
|
2022-07-10 19:01:16 -07:00
|
|
|
return (
|
2022-10-05 19:23:31 -07:00
|
|
|
<ContentBox hideBorder hidePadding className="h-full px-6 py-3">
|
2022-11-18 11:11:06 -08:00
|
|
|
{chartDataQuery?.isLoading || chartDataQuery.isFetching ? (
|
2022-08-17 13:05:38 -07:00
|
|
|
<>
|
|
|
|
<SheenLoader className="w-[148px] rounded-md">
|
|
|
|
<div className="h-[18px] bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
<SheenLoader className="mt-2 w-[148px] rounded-md">
|
|
|
|
<div className="h-[48px] bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
<SheenLoader className="mt-2 w-[148px] rounded-md">
|
|
|
|
<div className="h-[18px] bg-th-bkg-2" />
|
|
|
|
</SheenLoader>
|
|
|
|
</>
|
2023-04-13 22:22:39 -07:00
|
|
|
) : charty?.length && baseTokenId && quoteTokenId ? (
|
2022-09-19 18:09:34 -07:00
|
|
|
<div className="relative">
|
2022-07-10 19:01:16 -07:00
|
|
|
<div className="flex items-start justify-between">
|
|
|
|
<div>
|
2022-10-10 10:28:53 -07:00
|
|
|
{inputBank && outputBank ? (
|
2022-08-18 06:59:36 -07:00
|
|
|
<div className="mb-0.5 flex items-center">
|
2023-01-12 20:26:07 -08:00
|
|
|
<p className="text-base text-th-fgd-3">{swapMarketName}</p>
|
2023-04-13 22:22:39 -07:00
|
|
|
<IconButton
|
|
|
|
className="px-2 text-th-fgd-3"
|
2023-01-12 20:26:07 -08:00
|
|
|
onClick={() => setFlipPrices(!flipPrices)}
|
2023-04-13 22:22:39 -07:00
|
|
|
hideBg
|
2022-11-18 08:29:37 -08:00
|
|
|
>
|
2023-04-13 22:22:39 -07:00
|
|
|
<ArrowsRightLeftIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
2022-08-18 06:59:36 -07:00
|
|
|
</div>
|
2022-07-10 19:01:16 -07:00
|
|
|
) : null}
|
|
|
|
{mouseData ? (
|
|
|
|
<>
|
2022-12-13 15:16:50 -08:00
|
|
|
<div className="mb-1 flex flex-col font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
|
2022-11-23 18:30:20 -08:00
|
|
|
{animationSettings['number-scroll'] ? (
|
|
|
|
<FlipNumbers
|
|
|
|
height={48}
|
2022-12-13 15:16:50 -08:00
|
|
|
width={35}
|
2022-11-23 18:30:20 -08:00
|
|
|
play
|
2023-02-23 09:28:09 -08:00
|
|
|
numbers={formatNumericValue(mouseData.price)}
|
2022-11-23 18:30:20 -08:00
|
|
|
/>
|
|
|
|
) : (
|
2023-02-23 09:28:09 -08:00
|
|
|
<FormatNumericValue value={mouseData.price} />
|
2022-11-23 18:30:20 -08:00
|
|
|
)}
|
2022-07-10 19:01:16 -07:00
|
|
|
<span
|
2022-09-07 18:52:47 -07:00
|
|
|
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
2022-07-10 19:01:16 -07:00
|
|
|
>
|
2022-12-06 03:58:22 -08:00
|
|
|
<Change change={calculateChartChange()} suffix="%" />
|
2022-07-10 19:01:16 -07:00
|
|
|
</span>
|
|
|
|
</div>
|
2022-07-24 18:47:12 -07:00
|
|
|
<p className="text-sm text-th-fgd-4">
|
2023-02-23 09:28:09 -08:00
|
|
|
{dayjs(mouseData.time).format('DD MMM YY, h:mma')}
|
2022-07-15 05:50:29 -07:00
|
|
|
</p>
|
2022-07-10 19:01:16 -07:00
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<>
|
2022-12-13 02:49:56 -08:00
|
|
|
<div className="mb-1 flex flex-col font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
|
2022-11-23 18:30:20 -08:00
|
|
|
{animationSettings['number-scroll'] ? (
|
|
|
|
<FlipNumbers
|
|
|
|
height={48}
|
2022-12-13 15:16:50 -08:00
|
|
|
width={35}
|
2022-11-23 18:30:20 -08:00
|
|
|
play
|
2023-01-24 16:54:24 -08:00
|
|
|
numbers={formatNumericValue(
|
2023-04-13 22:22:39 -07:00
|
|
|
charty[charty.length - 1].price
|
2022-11-23 18:30:20 -08:00
|
|
|
)}
|
|
|
|
/>
|
|
|
|
) : (
|
2023-01-24 16:54:24 -08:00
|
|
|
<FormatNumericValue
|
2023-04-13 22:22:39 -07:00
|
|
|
value={charty[charty.length - 1].price}
|
2023-01-24 16:54:24 -08:00
|
|
|
/>
|
2022-11-23 18:30:20 -08:00
|
|
|
)}
|
2022-07-10 19:01:16 -07:00
|
|
|
<span
|
2022-09-07 18:52:47 -07:00
|
|
|
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
2022-07-10 19:01:16 -07:00
|
|
|
>
|
2022-12-06 03:58:22 -08:00
|
|
|
<Change change={calculateChartChange()} suffix="%" />
|
2022-07-10 19:01:16 -07:00
|
|
|
</span>
|
|
|
|
</div>
|
2022-07-24 18:47:12 -07:00
|
|
|
<p className="text-sm text-th-fgd-4">
|
2023-04-13 22:22:39 -07:00
|
|
|
{dayjs(charty[charty.length - 1].time).format(
|
2022-11-18 08:29:37 -08:00
|
|
|
'DD MMM YY, h:mma'
|
|
|
|
)}
|
2022-07-15 05:50:29 -07:00
|
|
|
</p>
|
2022-07-10 19:01:16 -07:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-07-19 20:33:30 -07:00
|
|
|
</div>
|
2023-01-11 15:21:01 -08:00
|
|
|
<div className="mt-2 h-40 w-auto md:h-72">
|
2023-04-13 22:22:39 -07:00
|
|
|
<div className="absolute top-[2px] right-0 -mb-2 flex items-center justify-end space-x-4">
|
|
|
|
<Tooltip
|
|
|
|
content={
|
|
|
|
showSwaps
|
|
|
|
? t('swap:hide-swap-history')
|
|
|
|
: t('swap:show-swap-history')
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
className="text-th-fgd-3"
|
|
|
|
hideBg
|
|
|
|
onClick={() => setShowSwaps(!showSwaps)}
|
|
|
|
>
|
|
|
|
{showSwaps ? (
|
|
|
|
<EyeIcon className="h-5 w-5" />
|
|
|
|
) : (
|
|
|
|
<EyeSlashIcon className="h-5 w-5" />
|
|
|
|
)}
|
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
2022-09-07 23:25:32 -07:00
|
|
|
<ChartRangeButtons
|
|
|
|
activeValue={daysToShow}
|
|
|
|
names={['24H', '7D', '30D']}
|
2022-11-29 21:30:18 -08:00
|
|
|
values={['1', '7', '30']}
|
2022-09-07 23:25:32 -07:00
|
|
|
onChange={(v) => setDaysToShow(v)}
|
|
|
|
/>
|
2022-07-10 19:01:16 -07:00
|
|
|
</div>
|
2022-09-14 14:57:12 -07:00
|
|
|
<div className="h-full md:-mx-2 md:mt-4">
|
2022-09-14 12:38:43 -07:00
|
|
|
<ResponsiveContainer>
|
2022-07-12 20:58:13 -07:00
|
|
|
<AreaChart
|
2023-04-13 22:22:39 -07:00
|
|
|
data={charty}
|
2022-07-12 20:58:13 -07:00
|
|
|
onMouseMove={handleMouseMove}
|
|
|
|
onMouseLeave={handleMouseLeave}
|
2022-09-14 14:57:12 -07:00
|
|
|
// margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
|
2022-07-12 20:58:13 -07:00
|
|
|
>
|
2023-04-13 22:22:39 -07:00
|
|
|
<RechartsTooltip
|
2022-07-12 20:58:13 -07:00
|
|
|
cursor={{
|
|
|
|
strokeOpacity: 0.09,
|
|
|
|
}}
|
|
|
|
content={<></>}
|
|
|
|
/>
|
2022-07-14 12:33:11 -07:00
|
|
|
<defs>
|
|
|
|
<linearGradient
|
|
|
|
id="gradientArea"
|
|
|
|
x1="0"
|
|
|
|
y1="0"
|
|
|
|
x2="0"
|
|
|
|
y2="1"
|
|
|
|
>
|
2022-07-15 13:26:29 -07:00
|
|
|
<stop
|
|
|
|
offset="0%"
|
2022-08-02 17:17:42 -07:00
|
|
|
stopColor={
|
|
|
|
calculateChartChange() >= 0
|
2022-11-30 19:32:32 -08:00
|
|
|
? COLORS.UP[theme]
|
|
|
|
: COLORS.DOWN[theme]
|
2022-08-02 17:17:42 -07:00
|
|
|
}
|
2022-09-14 12:38:43 -07:00
|
|
|
stopOpacity={0.25}
|
2022-07-15 13:26:29 -07:00
|
|
|
/>
|
|
|
|
<stop
|
|
|
|
offset="99%"
|
2022-08-02 17:17:42 -07:00
|
|
|
stopColor={
|
|
|
|
calculateChartChange() >= 0
|
2022-11-30 19:32:32 -08:00
|
|
|
? COLORS.UP[theme]
|
|
|
|
: COLORS.DOWN[theme]
|
2022-08-02 17:17:42 -07:00
|
|
|
}
|
2022-07-15 13:26:29 -07:00
|
|
|
stopOpacity={0}
|
|
|
|
/>
|
2022-07-14 12:33:11 -07:00
|
|
|
</linearGradient>
|
|
|
|
</defs>
|
2022-07-12 20:58:13 -07:00
|
|
|
<Area
|
2022-08-01 08:53:09 -07:00
|
|
|
isAnimationActive={false}
|
2022-07-12 20:58:13 -07:00
|
|
|
type="monotone"
|
|
|
|
dataKey="price"
|
2022-08-02 17:17:42 -07:00
|
|
|
stroke={
|
|
|
|
calculateChartChange() >= 0
|
2022-11-30 19:32:32 -08:00
|
|
|
? COLORS.UP[theme]
|
|
|
|
: COLORS.DOWN[theme]
|
2022-08-02 17:17:42 -07:00
|
|
|
}
|
2022-07-18 20:58:21 -07:00
|
|
|
strokeWidth={1.5}
|
2022-07-12 20:58:13 -07:00
|
|
|
fill="url(#gradientArea)"
|
2023-04-13 22:22:39 -07:00
|
|
|
label={<CustomizedLabel chartData={charty} />}
|
2022-07-12 20:58:13 -07:00
|
|
|
/>
|
2022-09-14 12:38:43 -07:00
|
|
|
<XAxis dataKey="time" hide padding={{ left: 0, right: 0 }} />
|
2022-07-12 20:58:13 -07:00
|
|
|
<YAxis
|
|
|
|
dataKey="price"
|
|
|
|
type="number"
|
|
|
|
domain={['dataMin', 'dataMax']}
|
|
|
|
hide
|
|
|
|
padding={{ top: 20, bottom: 20 }}
|
|
|
|
/>
|
2023-04-13 22:22:39 -07:00
|
|
|
{showSwaps
|
|
|
|
? highlightPoints.map((point, index) => (
|
|
|
|
<ReferenceDot
|
|
|
|
key={index}
|
|
|
|
x={point.time}
|
|
|
|
y={point.price}
|
|
|
|
r={4}
|
|
|
|
fill={getSwapFillColor(point.time)}
|
|
|
|
stroke={'white'}
|
|
|
|
isFront={true}
|
|
|
|
/>
|
|
|
|
))
|
|
|
|
: null}
|
2022-07-12 20:58:13 -07:00
|
|
|
</AreaChart>
|
|
|
|
</ResponsiveContainer>
|
2022-07-10 19:01:16 -07:00
|
|
|
</div>
|
2022-07-19 20:33:30 -07:00
|
|
|
</div>
|
2022-07-10 19:01:16 -07:00
|
|
|
</div>
|
|
|
|
) : (
|
2022-12-11 15:21:40 -08:00
|
|
|
<div className="mt-4 flex h-full items-center justify-center p-4 text-th-fgd-3 md:mt-0">
|
2022-07-22 10:07:55 -07:00
|
|
|
<div className="">
|
2022-12-11 15:21:40 -08:00
|
|
|
<NoSymbolIcon className="mx-auto mb-1 h-6 w-6 text-th-fgd-4" />
|
|
|
|
<p className="text-th-fgd-4">{t('chart-unavailable')}</p>
|
2022-07-22 10:07:55 -07:00
|
|
|
</div>
|
2022-07-10 19:01:16 -07:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</ContentBox>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SwapTokenChart
|