show high/low on trade chart

components/SideNav.tsx

@@ -171,7 +171,7 @@ const MenuItem = ({
   return (
     <Link href={pagePath} shallow={true}>
       <a
-        className={`default-transition flex cursor-pointer px-4 md:hover:text-th-primary ${
+        className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
           active ? 'text-th-primary' : 'text-th-fgd-1'
         } ${hideIconBg ? 'py-1' : 'py-2'}`}
       >

components/swap/SwapTokenChart.tsx

@@ -1,4 +1,10 @@
-import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import {
@@ -18,7 +24,6 @@ import { formatFixedDecimals } from '../../utils/numbers'
 import SheenLoader from '../shared/SheenLoader'
 import { COLORS } from '../../styles/colors'
 import { useTheme } from 'next-themes'
-import { SwitchHorizontalIcon } from '@heroicons/react/solid'
 
 dayjs.extend(relativeTime)
 
@@ -89,6 +94,32 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
   const [daysToShow, setDaysToShow] = useState(1)
   const { theme } = useTheme()
 
+  const [min, max] = useMemo(() => {
+    if (chartData.length) {
+      const prices = chartData.map((d: any) => d.price)
+      return [Math.min(...prices), Math.max(...prices)]
+    }
+    return ['', '']
+  }, [chartData])
+
+  const CustomizedLabel = (props: any) => {
+    const { x, y, value } = props
+    if (value === min || value === max) {
+      return (
+        <text
+          x={x}
+          y={y}
+          dy={value === min ? 16 : -8}
+          fill={theme === 'Light' ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.8)'}
+          fontSize={10}
+          textAnchor="middle"
+        >
+          {value}
+        </text>
+      )
+    } else return <div />
+  }
+
   const handleMouseMove = (coords: any) => {
     if (coords.activePayload) {
       setMouseData(coords.activePayload[0].payload)
@@ -363,6 +394,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                     }
                     strokeWidth={1.5}
                     fill="url(#gradientArea)"
+                    label={<CustomizedLabel />}
                   />
                   <XAxis
                     dataKey="time"