add chart time range component

components/account/AccountChart.tsx

@@ -22,9 +22,12 @@ const AccountChart = ({
   const [daysToShow, setDaysToShow] = useState<number>(1)
   const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading)
 
-  const handleDaysToShow = (days: number) => {
+  const handleDaysToShow = async (days: number) => {
+    await actions.fetchAccountPerformance(
+      mangoAccount.publicKey.toString(),
+      days
+    )
     setDaysToShow(days)
-    actions.fetchAccountPerformance(mangoAccount.publicKey.toString(), days)
   }
 
   return (

components/shared/ChartRangeButtons.tsx

@@ -0,0 +1,55 @@
+import { FunctionComponent } from 'react'
+
+interface ChartRangeButtonsProps {
+  activeValue: number
+  className?: string
+  onChange: (x: number) => void
+  values: Array<number>
+  names?: Array<string>
+}
+
+const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
+  activeValue,
+  className,
+  values,
+  onChange,
+  names,
+}) => {
+  return (
+    <div>
+      <div className="relative flex">
+        {activeValue && values.includes(activeValue) ? (
+          <div
+            className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-primary`}
+            style={{
+              transform: `translateX(${
+                values.findIndex((v) => v === activeValue) * 100
+              }%)`,
+              width: `${100 / values.length}%`,
+            }}
+          />
+        ) : null}
+        {values.map((v, i) => (
+          <button
+            className={`${className} default-transition relative h-6 w-1/2 cursor-pointer rounded-md px-3 text-center text-xs font-bold
+              ${
+                v === activeValue
+                  ? `text-th-bkg-1`
+                  : `text-th-fgd-3 md:hover:text-th-primary`
+              }
+            `}
+            key={`${v}${i}`}
+            onClick={() => onChange(v)}
+            style={{
+              width: `${100 / values.length}%`,
+            }}
+          >
+            {names ? names[i] : v}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ChartRangeButtons

components/shared/DetailedAreaChart.tsx

@@ -20,6 +20,7 @@ import { useTheme } from 'next-themes'
 import { IconButton } from './Button'
 import { ArrowLeftIcon } from '@heroicons/react/20/solid'
 import { FadeInFadeOut } from './Transitions'
+import ChartRangeButtons from './ChartRangeButtons'
 
 dayjs.extend(relativeTime)
 
@@ -176,30 +177,12 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
             </div>
             <div className="-mt-1 h-96 w-auto">
               <div className="absolute -top-1 right-0 -mb-2 flex justify-end">
-                <button
-                  className={`rounded-md px-3 py-2 font-bold  focus:outline-none md:hover:text-th-primary ${
-                    daysToShow === 1 ? 'text-th-primary' : 'text-th-fgd-4'
-                  }`}
-                  onClick={() => setDaysToShow(1)}
-                >
-                  24H
-                </button>
-                <button
-                  className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
-                    daysToShow === 7 ? 'text-th-primary' : 'text-th-fgd-4'
-                  }`}
-                  onClick={() => setDaysToShow(7)}
-                >
-                  7D
-                </button>
-                <button
-                  className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
-                    daysToShow === 30 ? 'text-th-primary' : 'text-th-fgd-4'
-                  }`}
-                  onClick={() => setDaysToShow(30)}
-                >
-                  30D
-                </button>
+                <ChartRangeButtons
+                  activeValue={daysToShow}
+                  names={['24H', '7D', '30D']}
+                  values={[1, 7, 30]}
+                  onChange={(v) => setDaysToShow(v)}
+                />
               </div>
               <div className="-mx-6 mt-6 h-full">
                 <ResponsiveContainer width="100%" height="100%">

components/swap/SwapTokenChart.tsx

@@ -19,12 +19,12 @@ import FlipNumbers from 'react-flip-numbers'
 
 import LineChartIcon from '../icons/LineChartIcon'
 import ContentBox from '../shared/ContentBox'
-import { DownTriangle, UpTriangle } from '../shared/DirectionTriangles'
 import { formatFixedDecimals } from '../../utils/numbers'
 import SheenLoader from '../shared/SheenLoader'
 import { COLORS } from '../../styles/colors'
 import { useTheme } from 'next-themes'
 import PercentageChange from '../shared/PercentageChange'
+import ChartRangeButtons from '../shared/ChartRangeButtons'
 
 dayjs.extend(relativeTime)
 
@@ -297,30 +297,12 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
           </div>
           <div className="mt-2 h-28 w-1/2 md:h-72 md:w-auto">
             <div className="-mb-2 flex justify-end md:absolute md:-top-1 md:right-0">
-              <button
-                className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
-                  daysToShow === 1 ? 'text-th-primary' : 'text-th-fgd-4'
-                }`}
-                onClick={() => setDaysToShow(1)}
-              >
-                24H
-              </button>
-              <button
-                className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
-                  daysToShow === 7 ? 'text-th-primary' : 'text-th-fgd-4'
-                }`}
-                onClick={() => setDaysToShow(7)}
-              >
-                7D
-              </button>
-              <button
-                className={`rounded-md px-3 py-2 font-bold focus:outline-none md:hover:text-th-primary ${
-                  daysToShow === 30 ? 'text-th-primary' : 'text-th-fgd-4'
-                }`}
-                onClick={() => setDaysToShow(30)}
-              >
-                30D
-              </button>
+              <ChartRangeButtons
+                activeValue={daysToShow}
+                names={['24H', '7D', '30D']}
+                values={[1, 7, 30]}
+                onChange={(v) => setDaysToShow(v)}
+              />
             </div>
             <div className="-mx-6 h-full">
               <ResponsiveContainer width="100%" height="100%">