remove unused dependencies (#2074)

package.json

@@ -26,7 +26,6 @@
     "@types/lingui__macro": "^2.7.4",
     "@types/lingui__react": "^2.8.3",
     "@types/lodash.flatmap": "^4.5.6",
-    "@types/lodash.inrange": "^3.3.6",
     "@types/luxon": "^1.24.4",
     "@types/ms.macro": "^2.0.0",
     "@types/multicodec": "^1.0.0",
@@ -77,9 +76,7 @@
     "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
     "inter-ui": "^3.13.1",
-    "lightweight-charts": "^3.3.0",
     "lodash.flatmap": "^4.5.0",
-    "lodash.inrange": "^3.3.6",
     "luxon": "^1.25.0",
     "ms.macro": "^2.0.0",
     "multicodec": "^3.0.1",

src/components/LineChart/index.tsx

-import React, { useRef, useState, useEffect, useCallback, Dispatch, SetStateAction, ReactNode } from 'react'
-import { createChart, IChartApi } from 'lightweight-charts'
-import { darken } from 'polished'
-import { RowBetween } from 'components/Row'
-import Card from '../Card'
-import styled from 'styled-components/macro'
-import useTheme from 'hooks/useTheme'
-
-const Wrapper = styled(Card)`
-  width: 100%;
-  padding: 1rem;
-  display: flex;
-  background-color: ${({ theme }) => theme.bg0};
-  flex-direction: column;
-  > * {
-    font-size: 1rem;
-  }
-`
-
-const DEFAULT_HEIGHT = 300
-
-type LineChartProps = {
-  data: any[]
-  color?: string | undefined
-  height?: number | undefined
-  setValue?: Dispatch<SetStateAction<number | undefined>> // used for value on hover
-  topLeft?: ReactNode | undefined
-  topRight?: ReactNode | undefined
-  bottomLeft?: ReactNode | undefined
-  bottomRight?: ReactNode | undefined
-} & React.HTMLAttributes<HTMLDivElement>
-
-const LineChart = ({
-  data,
-  color = '#56B2A4',
-  setValue,
-  topLeft,
-  topRight,
-  bottomLeft,
-  bottomRight,
-  height = DEFAULT_HEIGHT,
-  ...rest
-}: LineChartProps) => {
-  const theme = useTheme()
-
-  const chartRef = useRef<HTMLDivElement>(null)
-  const [chartCreated, setChart] = useState<IChartApi | undefined>()
-
-  // for reseting value on hover exit
-  const currenValue = data[data.length - 1].value
-
-  const handleResize = useCallback(() => {
-    if (chartCreated && chartRef?.current?.parentElement) {
-      chartCreated.resize(chartRef.current.parentElement.clientWidth - 32, height)
-      chartCreated.timeScale().fitContent()
-      chartCreated.timeScale().scrollToPosition(0, false)
-    }
-  }, [chartCreated, chartRef, height])
-
-  // add event listener for resize
-  const isClient = typeof window === 'object'
-  useEffect(() => {
-    if (!isClient) {
-      return
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [isClient, chartRef, handleResize]) // Empty array ensures that effect is only run on mount and unmount
-
-  const textColor = theme.text2
-
-  // if chart not instantiated in canvas, create it
-  useEffect(() => {
-    if (!chartCreated && data && !!chartRef?.current?.parentElement) {
-      const chart = createChart(chartRef.current, {
-        height: height,
-        width: chartRef.current.parentElement.clientWidth - 32,
-        layout: {
-          backgroundColor: 'transparent',
-          textColor: textColor,
-          fontFamily: 'Inter',
-        },
-        rightPriceScale: {
-          scaleMargins: {
-            top: 0.1,
-            bottom: 0.1,
-          },
-          borderVisible: false,
-        },
-        timeScale: {
-          borderVisible: false,
-        },
-        watermark: {
-          color: 'rgba(0, 0, 0, 0)',
-        },
-        grid: {
-          horzLines: {
-            visible: false,
-          },
-          vertLines: {
-            visible: false,
-          },
-        },
-        crosshair: {
-          horzLine: {
-            visible: true,
-            style: 3,
-            width: 1,
-            color: '#505050',
-            labelBackgroundColor: color,
-          },
-          vertLine: {
-            visible: true,
-            style: 3,
-            width: 1,
-            color: '#505050',
-            labelBackgroundColor: color,
-          },
-        },
-      })
-
-      const series = chart.addAreaSeries({
-        lineColor: color,
-        topColor: darken(0.4, color),
-        bottomColor: theme.bg0,
-        lineWidth: 2,
-        priceLineVisible: false,
-      })
-
-      series.setData(data)
-
-      // update the title when hovering on the chart
-      chart.subscribeCrosshairMove(function (param) {
-        if (
-          chartRef?.current &&
-          (param === undefined ||
-            param.time === undefined ||
-            (param && param.point && param.point.x < 0) ||
-            (param && param.point && param.point.x > chartRef.current.clientWidth) ||
-            (param && param.point && param.point.y < 0) ||
-            (param && param.point && param.point.y > height))
-        ) {
-          setValue && setValue(currenValue)
-        } else {
-          const price = parseFloat(param.seriesPrices.get(series)?.toString() ?? currenValue)
-          setValue && setValue(price)
-        }
-      })
-      chart.timeScale().fitContent()
-      setChart(chart)
-    }
-  }, [color, chartCreated, currenValue, data, height, setValue, textColor, theme])
-
-  return (
-    <Wrapper>
-      <RowBetween>
-        {topLeft ?? null}
-        {topRight ?? null}
-      </RowBetween>
-      <div ref={chartRef} id={'line-chart'} {...rest} />
-      <RowBetween>
-        {bottomLeft ?? null}
-        {bottomRight ?? null}
-      </RowBetween>
-    </Wrapper>
-  )
-}
-
-export default LineChart

yarn.lock

@@ -3572,13 +3572,6 @@
   dependencies:
     "@types/lodash" "*"
 
-"@types/lodash.inrange@^3.3.6":
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/@types/lodash.inrange/-/lodash.inrange-3.3.6.tgz#bc2be446082069604d96ee8c30bd07317af6fcc7"
-  integrity sha512-lB01EnNz+7lj9IVWDZ0cUTbKnTyyyuX2elKbqtrRj0oXWm66BaILR8bwVzYu99KX21PiiwOLXeQcXw62FV88fw==
-  dependencies:
-    "@types/lodash" "*"
-
 "@types/lodash@*", "@types/lodash@^4.14.53":
   version "4.14.169"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.169.tgz"
@@ -9671,11 +9664,6 @@ fake-merkle-patricia-tree@^1.0.1:
   dependencies:
     checkpoint-store "^1.1.0"
 
-fancy-canvas@0.2.2:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-0.2.2.tgz"
-  integrity sha512-50qi8xA0QkHbjmb8h7XQ6k2fvD7y/yMfiUw9YTarJ7rWrq6o5/3CCXPouYk+XSLASvvxtjyiQLRBFt3qkE3oyA==
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz"
@@ -12585,13 +12573,6 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lightweight-charts@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-3.3.0.tgz"
-  integrity sha512-W5jeBrXcHG8eHnIQ0L2CB9TLkrrsjNPlQq5SICPO8PnJ3dJ8jZkLCAwemZ7Ym7ZGCfKCz6ow1EPbyzNYxblnkw==
-  dependencies:
-    fancy-canvas "0.2.2"
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -12768,11 +12749,6 @@ lodash.includes@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
   integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
 
-lodash.inrange@^3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/lodash.inrange/-/lodash.inrange-3.3.6.tgz#dfdfe915f6e30e8056293707e2395dab88ea128d"
-  integrity sha1-39/pFfbjDoBWKTcH4jldq4jqEo0=
-
 lodash.isboolean@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"