feat: chart states polish (#4819)

* init
* finished missing data component
* finished feature

src/components/Tokens/TokenDetails/PriceChart.tsx

+import { Trans } from '@lingui/macro'
 import { AxisBottom, TickFormatter } from '@visx/axis'
 import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
@@ -10,8 +11,8 @@ import { PricePoint } from 'graphql/data/Token'
 import { TimePeriod } from 'graphql/data/util'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { useAtom } from 'jotai'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { ArrowDownRight, ArrowUpRight } from 'react-feather'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { ArrowDownRight, ArrowUpRight, TrendingUp } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
 import {
   dayHourFormatter,
@@ -248,17 +249,13 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
     setDisplayPrice(endingPrice)
   }, [setCrosshair, setDisplayPrice, endingPrice])
 
-  // TODO: Display no data available error
-  if (!prices) {
-    return null
-  }
-
   const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale)
   const delta = calculateDelta(startingPrice.value, displayPrice.value)
   const formattedDelta = formatDelta(delta)
   const arrow = getDeltaArrow(delta)
   const crosshairEdgeMax = width * 0.85
   const crosshairAtEdge = !!crosshair && crosshair > crosshairEdgeMax
+  const hasData = prices && prices.length > 0
 
   /*
    * Default curve doesn't look good for the HOUR chart.
@@ -266,7 +263,6 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
    * making it unacceptable for shorter durations / smaller variances.
    */
   const curveTension = timePeriod === TimePeriod.HOUR ? 1 : 0.9
-
   return (
     <>
       <ChartHeader>
@@ -276,6 +272,13 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
           <ArrowCell>{arrow}</ArrowCell>
         </DeltaContainer>
       </ChartHeader>
+      {!hasData ? (
+        <MissingPriceChart
+          width={width}
+          height={graphHeight}
+          message={prices && prices.length === 0 ? <NoV3DataMessage /> : <MissingDataMessage />}
+        />
+      ) : (
         <AnimatedInLineChart
           data={prices}
           getX={(p: PricePoint) => timeScale(p.timestamp)}
@@ -346,6 +349,7 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
             onMouseLeave={resetDisplay}
           />
         </AnimatedInLineChart>
+      )}
       <TimeOptionsWrapper>
         <TimeOptionsContainer>
           {ORDERED_TIMES.map((time) => (
@@ -365,4 +369,44 @@ export function PriceChart({ width, height, prices }: PriceChartProps) {
   )
 }
 
+const StyledMissingChart = styled.svg`
+  text {
+    font-size: 12px;
+    font-weight: 400;
+  }
+`
+
+const chartBottomPadding = 15
+
+const NoV3DataMessage = () => (
+  <Trans>This token doesn&apos;t have chart data because it hasn&apos;t been traded on Uniswap v3</Trans>
+)
+const MissingDataMessage = () => <Trans>Missing chart data</Trans>
+
+function MissingPriceChart({ width, height, message }: { width: number; height: number; message: ReactNode }) {
+  const theme = useTheme()
+  const midPoint = height / 2 + 45
+  return (
+    <StyledMissingChart width={width} height={height}>
+      <path
+        d={`M 0 ${midPoint} Q 104 ${midPoint - 70}, 208 ${midPoint} T 416 ${midPoint}
+          M 416 ${midPoint} Q 520 ${midPoint - 70}, 624 ${midPoint} T 832 ${midPoint}`}
+        stroke={theme.backgroundOutline}
+        fill="transparent"
+        strokeWidth="2"
+      />
+      <TrendingUp stroke={theme.textTertiary} x={0} size={12} y={height - chartBottomPadding - 10} />
+      <text y={height - chartBottomPadding} x="20" fill={theme.textTertiary}>
+        {message || <Trans>Missing chart data</Trans>}
+      </text>
+      <path
+        d={`M 0 ${height - 1}, ${width} ${height - 1}`}
+        stroke={theme.backgroundOutline}
+        fill="transparent"
+        strokeWidth="1"
+      />
+    </StyledMissingChart>
+  )
+}
+
 export default PriceChart