mango-v4-ui/components/swap/SwapTokenChart.tsx

import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip as RechartsTooltip,
  ResponsiveContainer,
  Text,
  ReferenceDot,
  ReferenceDotProps,
} from 'recharts'
import FlipNumbers from 'react-flip-numbers'
import ContentBox from '../shared/ContentBox'
import { formatCurrencyValue, formatNumericValue } from '../../utils/numbers'
import SheenLoader from '../shared/SheenLoader'
import { COLORS } from '../../styles/colors'
import Change from '../shared/Change'
import ChartRangeButtons from '../shared/ChartRangeButtons'
import { useViewport } from 'hooks/useViewport'
import { formatTokenSymbol } from 'utils/tokens'
import { useQuery } from '@tanstack/react-query'
import mangoStore from '@store/mangoStore'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
import { useTranslation } from 'next-i18next'
import {
  ArrowsRightLeftIcon,
  EyeIcon,
  EyeSlashIcon,
  NoSymbolIcon,
} from '@heroicons/react/20/solid'
import FormatNumericValue from '@components/shared/FormatNumericValue'
import { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
import { interpolateNumber } from 'd3-interpolate'
import { IconButton } from '@components/shared/Button'
import Tooltip from '@components/shared/Tooltip'
import { SwapHistoryItem } from 'types'
import useThemeWrapper from 'hooks/useThemeWrapper'
import FavoriteSwapButton from './FavoriteSwapButton'
import { SwapChartDataItem, fetchSwapChartPrices } from 'apis/birdeye/helpers'
import Image from 'next/image'

dayjs.extend(relativeTime)

const set = mangoStore.getState().set

const CustomizedLabel = ({
  chartData,
  x,
  y,
  value,
  index,
}: {
  chartData: SwapChartDataItem[]
  x?: number
  y?: string | number
  value?: number
  index?: number
}) => {
  const { width } = useViewport()
  const [min, max] = useMemo(() => {
    if (chartData.length) {
      const prices = chartData.map((d) => d.price)
      return [Math.min(...prices), Math.max(...prices)]
    }
    return ['', '']
  }, [chartData])

  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)) {
    return (
      <Text
        x={x}
        y={y}
        dy={value === min ? 16 : -8}
        fill="var(--fgd-4)"
        fontSize={10}
        textAnchor={x && y && x > width / 3 ? 'end' : 'start'}
        className="font-mono"
      >
        {formatNumericValue(value)}
      </Text>
    )
  } else return <div />
}

interface ExtendedReferenceDotProps extends ReferenceDotProps {
  swapHistory: SwapHistoryItem[]
  swapMarketName: string
  flipPrices: boolean
  mouseEnter: (
    swap: SwapHistoryItem | undefined,
    birdeyePrice: string | number | undefined,
  ) => void
  mouseLeave: MouseEventHandler
}

const SwapHistoryArrows = (props: ExtendedReferenceDotProps) => {
  const {
    cx,
    cy,
    x,
    y,
    swapHistory,
    swapMarketName,
    flipPrices,
    mouseEnter,
    mouseLeave,
  } = props
  const swapDetails = swapHistory.find(
    (swap) => dayjs(swap.block_datetime).unix() * 1000 === x,
  )
  const side =
    swapDetails?.swap_in_symbol.toLowerCase() ===
    swapMarketName.split('/')[0].toLowerCase()
      ? !flipPrices
        ? 'sell'
        : 'buy'
      : !flipPrices
      ? 'buy'
      : 'sell'

  const buy = {
    pathCoords: 'M11 0.858312L0.857867 15.0004H21.1421L11 0.858312Z',
    fill: 'var(--up)',
    yOffset: 0,
  }

  const sell = {
    pathCoords:
      'M11 14.1427L21.1421 0.000533306L0.857865 0.000529886L11 14.1427Z',
    fill: 'var(--down)',
    yOffset: -15,
  }

  const sideArrowProps =
    side === 'buy' ? (!flipPrices ? buy : sell) : !flipPrices ? sell : buy

  const birdeyePrice = y ? Number(y) : 0
  return cx && cy ? (
    <svg
      className="cursor-pointer"
      width="20"
      height="15"
      viewBox="0 0 20 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      x={cx - 11}
      y={cy + sideArrowProps.yOffset}
      onMouseEnter={() => mouseEnter(swapDetails, birdeyePrice)}
      onMouseLeave={mouseLeave}
    >
      <path
        d={sideArrowProps.pathCoords}
        fill={sideArrowProps.fill}
        stroke={'var(--bkg-1)'}
        strokeWidth={2}
      />
    </svg>
  ) : (
    <div />
  )
}

const SwapTokenChart = () => {
  const { t } = useTranslation('common')
  const {
    amountIn,
    amountOut,
    inputBank,
    outputBank,
    flipPrices,
    swapMode,
    swapOrTrigger,
  } = mangoStore((s) => s.swap)
  const { isDesktop } = useViewport()
  const [mouseData, setMouseData] = useState<SwapChartDataItem>()
  const [daysToShow, setDaysToShow] = useState('1')
  const { theme } = useThemeWrapper()
  const [animationSettings] = useLocalStorageState(
    ANIMATION_SETTINGS_KEY,
    INITIAL_ANIMATION_SETTINGS,
  )
  const swapHistory = mangoStore((s) => s.mangoAccount.swapHistory.data)
  const loadSwapHistory = mangoStore((s) => s.mangoAccount.swapHistory.loading)
  const [showSwaps, setShowSwaps] = useState(true)
  const [swapTooltipData, setSwapTooltipData] =
    useState<SwapHistoryItem | null>(null)
  const [swapTooltipBirdeyePrice, setSwapTooltipBirdeyePrice] = useState<
    string | number | undefined
  >(undefined)

  const [inputBankName, outputBankName] = useMemo(() => {
    if (!inputBank || !outputBank) return ['', '']
    return [inputBank.name, outputBank.name]
  }, [inputBank, outputBank])

  const swapMarketName = useMemo(() => {
    if (!inputBankName || !outputBankName) return ''
    const inputSymbol = formatTokenSymbol(inputBankName)
    const outputSymbol = formatTokenSymbol(outputBankName)
    return flipPrices
      ? `${outputSymbol}/${inputSymbol}`
      : `${inputSymbol}/${outputSymbol}`
  }, [flipPrices, inputBankName, outputBankName])

  const handleSwapMouseEnter = useCallback(
    (
      swap: SwapHistoryItem | undefined,
      birdeyePrice: string | number | undefined,
    ) => {
      if (swap) {
        setSwapTooltipData(swap)
      }
      if (birdeyePrice) {
        setSwapTooltipBirdeyePrice(birdeyePrice)
      }
    },
    [setSwapTooltipData, setSwapTooltipBirdeyePrice],
  )

  const handleSwapMouseLeave = useCallback(() => {
    setSwapTooltipData(null)
  }, [setSwapTooltipData])

  const renderTooltipContent = useCallback(
    (swap: SwapHistoryItem) => {
      const {
        swap_in_amount,
        swap_in_symbol,
        swap_out_price_usd,
        swap_out_amount,
        swap_out_symbol,
      } = swap

      const swapOutValue = swap_out_price_usd * swap_out_amount

      const baseMarketToken = swapMarketName.split('/')[0].toLowerCase()

      const swapSide =
        swap_in_symbol.toLowerCase() === baseMarketToken
          ? !flipPrices
            ? 'sell'
            : 'buy'
          : !flipPrices
          ? 'buy'
          : 'sell'

      const buy = {
        price: swap_in_amount / swap_out_amount,
        priceSymbol: formatTokenSymbol(swap_in_symbol),
        amount: swap_out_amount,
        side: 'buy',
        symbol: formatTokenSymbol(swap_out_symbol),
        value: swapOutValue,
      }

      const sell = {
        price: swap_out_amount / swap_in_amount,
        priceSymbol: formatTokenSymbol(swap_out_symbol),
        amount: swap_in_amount,
        side: 'sell',
        symbol: formatTokenSymbol(swap_in_symbol),
        value: swapOutValue,
      }

      const swapProps =
        swapSide === 'buy'
          ? !flipPrices
            ? buy
            : sell
          : !flipPrices
          ? sell
          : buy

      const { amount, price, priceSymbol, side, symbol, value } = swapProps

      let birdeyePercentageDifference = 0
      if (
        swapTooltipBirdeyePrice &&
        typeof swapTooltipBirdeyePrice === 'number'
      ) {
        const difference = ((price - swapTooltipBirdeyePrice) / price) * 100
        birdeyePercentageDifference = difference
      }

      const betterThanBirdeye =
        swapSide === 'buy'
          ? flipPrices
            ? birdeyePercentageDifference > 0
            : birdeyePercentageDifference < 0
          : flipPrices
          ? birdeyePercentageDifference < 0
          : birdeyePercentageDifference > 0

      return (
        <>
          <p className="text-center text-th-fgd-2">{`${t(
            side,
          )} ${amount} ${symbol} at ${formatNumericValue(
            price,
          )} ${priceSymbol} for ${formatCurrencyValue(value)}`}</p>
          {birdeyePercentageDifference ? (
            <p
              className={`mt-0.5 text-center text-xs ${
                betterThanBirdeye ? 'text-th-up' : 'text-th-down'
              }`}
            >
              <span className="font-mono">
                {birdeyePercentageDifference.toFixed(2)}%
              </span>{' '}
              {betterThanBirdeye ? 'better than' : 'worse than'} Birdeye
            </p>
          ) : null}
        </>
      )
    },
    [flipPrices, swapMarketName, swapTooltipBirdeyePrice],
  )

  const {
    data: birdeyePriceData,
    isLoading: loadingBirdeye,
    isFetching: fetchingBirdeye,
  } = useQuery(
    ['swap-chart-price-data', inputBank?.mint, outputBank?.mint, daysToShow],
    () =>
      fetchSwapChartPrices(
        inputBank?.mint.toString(),
        outputBank?.mint.toString(),
        daysToShow,
      ),
    {
      cacheTime: 1000 * 60 * 15,
      staleTime: 1000 * 60 * 1,
      enabled: !!(inputBank && outputBank),
      refetchOnWindowFocus: false,
    },
  )

  const handleFlippedPriceData = useMemo(() => {
    if (
      !birdeyePriceData ||
      !birdeyePriceData.length ||
      birdeyePriceData.length < 2
    )
      return []
    if (flipPrices) {
      const flippedPrices = []
      for (const item of birdeyePriceData) {
        const flippedPrice = item.outputTokenPrice / item.inputTokenPrice
        flippedPrices.push({ ...item, price: flippedPrice })
      }
      return flippedPrices
    } else {
      return birdeyePriceData
    }
  }, [birdeyePriceData, flipPrices])

  const chartSwapTimes = useMemo(() => {
    if (
      loadSwapHistory ||
      !swapHistory ||
      !swapHistory.length ||
      !inputBankName ||
      !outputBankName
    )
      return []
    const chartSymbols = [
      inputBankName === 'ETH (Portal)' ? 'ETH' : inputBankName,
      outputBankName === 'ETH (Portal)' ? 'ETH' : outputBankName,
    ]
    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, inputBankName, outputBankName])

  const swapHistoryPoints = useMemo(() => {
    if (!handleFlippedPriceData.length || !chartSwapTimes.length) return []
    return chartSwapTimes.map((x) => {
      const makeSwapChartDataItem = { inputTokenPrice: 1, outputTokenPrice: 1 }
      const index = handleFlippedPriceData.findIndex((d) => d.time > x) // find index of data point with x value greater than highlight x
      if (index === 0) {
        return {
          time: x,
          price: handleFlippedPriceData[0].price,
          ...makeSwapChartDataItem,
        } // return first data point y value if highlight x is less than first data point x
      } else if (index === -1) {
        return {
          time: x,
          price:
            handleFlippedPriceData[handleFlippedPriceData.length - 1].price,
          ...makeSwapChartDataItem,
        } // return last data point y value if highlight x is greater than last data point x
      } else {
        const x0 = handleFlippedPriceData[index - 1].time
        const x1 = handleFlippedPriceData[index].time
        const y0 = handleFlippedPriceData[index - 1].price
        const y1 = handleFlippedPriceData[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, ...makeSwapChartDataItem }
      }
    })
  }, [handleFlippedPriceData, chartSwapTimes])

  const chartData = useMemo(() => {
    if (!handleFlippedPriceData.length) return []
    const minTime = handleFlippedPriceData[0].time
    const maxTime =
      handleFlippedPriceData[handleFlippedPriceData.length - 1].time
    let data = handleFlippedPriceData
    if (swapHistoryPoints.length && showSwaps) {
      const swapPoints = swapHistoryPoints.filter(
        (point) => point.time >= minTime && point.time <= maxTime,
      )
      data = handleFlippedPriceData
        .concat(swapPoints)
        .sort((a, b) => a.time - b.time)
    }
    if (amountIn && amountOut && swapOrTrigger === 'swap') {
      const latestPrice = flipPrices
        ? parseFloat(amountIn) / parseFloat(amountOut)
        : parseFloat(amountOut) / parseFloat(amountIn)
      const item: SwapChartDataItem[] = [
        {
          price: latestPrice,
          time: Date.now(),
          inputTokenPrice: 0,
          outputTokenPrice: 0,
        },
      ]
      return data.concat(item)
    } else if (inputBank && outputBank) {
      const latestPrice = flipPrices
        ? outputBank.uiPrice / inputBank.uiPrice
        : inputBank.uiPrice / outputBank.uiPrice
      const item: SwapChartDataItem[] = [
        {
          price: latestPrice,
          time: Date.now(),
          inputTokenPrice: inputBank.uiPrice,
          outputTokenPrice: outputBank.uiPrice,
        },
      ]
      return data.concat(item)
    }
    return data
  }, [
    amountIn,
    amountOut,
    handleFlippedPriceData,
    flipPrices,
    inputBank,
    outputBank,
    showSwaps,
    swapHistoryPoints,
    swapOrTrigger,
  ])

  const handleMouseMove: CategoricalChartFunc = useCallback(
    (coords) => {
      if (coords.activePayload) {
        setMouseData(coords.activePayload[0].payload)
      }
    },
    [setMouseData],
  )

  const handleMouseLeave = useCallback(() => {
    setMouseData(undefined)
  }, [setMouseData])

  const calculateChartChange = useCallback(() => {
    if (!chartData?.length) return 0
    if (mouseData) {
      const index = chartData.findIndex((d) => d.time === mouseData.time)
      if (index === -1) return 0
      return (
        ((chartData[index]['price'] - chartData[0]['price']) /
          chartData[0]['price']) *
        100
      )
    } else {
      return (
        ((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
          chartData[0]['price']) *
        100
      )
    }
  }, [chartData, mouseData])

  const loadingSwapPrice = useMemo(() => {
    return (
      !!(swapMode === 'ExactIn' && Number(amountIn) && !Number(amountOut)) ||
      !!(swapMode === 'ExactOut' && Number(amountOut) && !Number(amountIn))
    )
  }, [amountIn, amountOut, swapMode])

  const chartNumberHeight = isDesktop ? 48 : 40
  const chartNumberWidth = isDesktop ? 35 : 27

  return (
    <ContentBox hideBorder hidePadding className="h-full px-4 py-3 md:px-6">
      {loadingBirdeye || fetchingBirdeye ? (
        <>
          <SheenLoader className="w-[148px] rounded-md">
            <div className="h-[18px] bg-th-bkg-2" />
          </SheenLoader>
          <SheenLoader className="mt-2 w-[180px] rounded-md">
            <div className="h-[40px] bg-th-bkg-2" />
          </SheenLoader>
          <SheenLoader className="mt-2 w-[148px] rounded-md">
            <div className="h-[18px] bg-th-bkg-2" />
          </SheenLoader>
          {!isDesktop ? (
            <SheenLoader className="mt-2 w-full rounded-md">
              <div className="h-44 bg-th-bkg-2 sm:h-52" />
            </SheenLoader>
          ) : null}
        </>
      ) : chartData?.length ? (
        <div className="relative h-full">
          {swapTooltipData ? (
            <div className="absolute bottom-2 left-1/2 z-10 w-full -translate-x-1/2 rounded-md border border-th-bkg-3 bg-th-bkg-1 px-4 py-2">
              {renderTooltipContent(swapTooltipData)}
            </div>
          ) : null}
          <div className="flex items-start justify-between">
            <div>
              {inputBankName && outputBankName ? (
                <div className="mb-0.5 flex items-center">
                  <Tooltip content={t('swap:tooltip-price-chart-source')}>
                    <Image
                      className="mr-1.5 cursor-help"
                      src="/images/birdeye.png"
                      alt="birdeye"
                      height={20}
                      width={20}
                    />
                  </Tooltip>
                  <p className="text-base text-th-fgd-3">{swapMarketName}</p>
                  <IconButton
                    className="px-2 text-th-fgd-3"
                    onClick={() =>
                      set((state) => {
                        state.swap.flipPrices = !flipPrices
                      })
                    }
                    hideBg
                  >
                    <ArrowsRightLeftIcon className="h-5 w-5" />
                  </IconButton>
                </div>
              ) : null}
              {mouseData ? (
                <>
                  <div className="mb-1 flex flex-col font-display text-4xl text-th-fgd-1 md:flex-row md:items-end md:text-5xl">
                    {animationSettings['number-scroll'] ? (
                      <FlipNumbers
                        height={chartNumberHeight}
                        width={chartNumberWidth}
                        play
                        numbers={formatNumericValue(mouseData.price)}
                      />
                    ) : (
                      <span className="tabular-nums">
                        <FormatNumericValue value={mouseData.price} />
                      </span>
                    )}
                  </div>
                  <div className="flex space-x-3">
                    <Change change={calculateChartChange()} suffix="%" />
                    <p className="text-sm text-th-fgd-4">
                      {dayjs(mouseData.time).format('DD MMM YY, h:mma')}
                    </p>
                  </div>
                </>
              ) : (
                <>
                  <div className="mb-1 flex flex-col font-display text-4xl text-th-fgd-1 md:flex-row md:items-end md:text-5xl">
                    {loadingSwapPrice ? (
                      <SheenLoader className="mt-2 w-[180px] rounded-md">
                        <div className="h-9 bg-th-bkg-2 md:h-10" />
                      </SheenLoader>
                    ) : animationSettings['number-scroll'] ? (
                      <FlipNumbers
                        height={chartNumberHeight}
                        width={chartNumberWidth}
                        play
                        numbers={formatNumericValue(
                          chartData[chartData.length - 1].price,
                        )}
                      />
                    ) : (
                      <span className="tabular-nums">
                        <FormatNumericValue
                          value={chartData[chartData.length - 1].price}
                        />
                      </span>
                    )}
                  </div>
                  <div className="flex space-x-3">
                    <Change change={calculateChartChange()} suffix="%" />
                    <p className="text-sm text-th-fgd-4">
                      {dayjs(chartData[chartData.length - 1].time).format(
                        'DD MMM YY, h:mma',
                      )}
                    </p>
                  </div>
                </>
              )}
            </div>
          </div>
          <div className="mt-2 h-44 w-auto sm:h-52 md:h-96">
            <div className="absolute right-0 top-[2px] -mb-2 flex items-center justify-end space-x-4">
              <FavoriteSwapButton
                inputToken={inputBank!.name}
                outputToken={outputBank!.name}
              />
              <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>
              <ChartRangeButtons
                activeValue={daysToShow}
                names={['24H', '7D', '30D']}
                values={['1', '7', '30']}
                onChange={(v) => setDaysToShow(v)}
              />
            </div>
            <div className="h-full md:-mx-2 md:mt-4">
              <ResponsiveContainer>
                <AreaChart
                  data={chartData}
                  onMouseMove={handleMouseMove}
                  onMouseLeave={handleMouseLeave}
                >
                  <RechartsTooltip
                    cursor={{
                      strokeOpacity: 0.09,
                    }}
                    content={<></>}
                  />
                  <defs>
                    <linearGradient
                      id="gradientArea"
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="1"
                    >
                      <stop
                        offset="0%"
                        stopColor={
                          calculateChartChange() >= 0
                            ? COLORS.UP[theme]
                            : COLORS.DOWN[theme]
                        }
                        stopOpacity={0.25}
                      />
                      <stop
                        offset="99%"
                        stopColor={
                          calculateChartChange() >= 0
                            ? COLORS.UP[theme]
                            : COLORS.DOWN[theme]
                        }
                        stopOpacity={0}
                      />
                    </linearGradient>
                  </defs>
                  <Area
                    isAnimationActive={false}
                    type="monotone"
                    dataKey="price"
                    stroke={
                      calculateChartChange() >= 0
                        ? COLORS.UP[theme]
                        : COLORS.DOWN[theme]
                    }
                    strokeWidth={1.5}
                    fill="url(#gradientArea)"
                    label={<CustomizedLabel chartData={chartData} />}
                  />
                  <XAxis dataKey="time" hide padding={{ left: 0, right: 0 }} />
                  <YAxis
                    dataKey="price"
                    type="number"
                    domain={['dataMin', 'dataMax']}
                    hide
                    padding={{ top: 20, bottom: 20 }}
                  />
                  {showSwaps && swapHistoryPoints.length
                    ? swapHistoryPoints.map((point, index) => (
                        <ReferenceDot
                          key={index}
                          x={point.time}
                          y={point.price}
                          isFront={true}
                          shape={
                            <SwapHistoryArrows
                              swapHistory={swapHistory}
                              swapMarketName={swapMarketName}
                              flipPrices={flipPrices}
                              mouseEnter={handleSwapMouseEnter}
                              mouseLeave={handleSwapMouseLeave}
                            />
                          }
                        />
                      ))
                    : null}
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>
      ) : (
        <div className="mt-4 flex h-full items-center justify-center p-4 text-th-fgd-3 md:mt-0">
          <div className="">
            <NoSymbolIcon className="mx-auto mb-1 h-6 w-6 text-th-fgd-4" />
            <p className="text-th-fgd-4">{t('chart-unavailable')}</p>
          </div>
        </div>
      )}
    </ContentBox>
  )
}

export default React.memo(SwapTokenChart)