feat: time range selector

Author: foodaka

src/hooks/useSGhoApyHistory.ts

@@ -1,6 +1,16 @@
+import dayjs from 'dayjs';
 import { sghoConfig } from 'pages/api/SGhoService';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { MeritApyDataItem } from 'src/modules/reserve-overview/graphs/MeritApyGraph';
+import { ESupportedTimeRanges } from 'src/modules/reserve-overview/TimeRangeSelector';
+
+export const sghoTimeRangeOptions = [
+  ESupportedTimeRanges.OneWeek,
+  ESupportedTimeRanges.OneMonth,
+  ESupportedTimeRanges.SixMonths,
+];
+
+export type SGhoTimeRange = (typeof sghoTimeRangeOptions)[number];
 
 type SGhoApyApiResponse = {
   data?: MeritApyDataItem[];
@@ -18,6 +28,31 @@ type UseSGhoApyHistoryOptions = {
   limit?: number;
   startDate?: string;
   endDate?: string;
+  timeRange?: SGhoTimeRange;
+};
+
+/**
+ * Convert time range to start/end dates
+ */
+const timeRangeToDateRange = (timeRange: SGhoTimeRange): { startDate: string; endDate: string } => {
+  const endDate = dayjs().format('YYYY-MM-DD');
+  let startDate: string;
+
+  switch (timeRange) {
+    case ESupportedTimeRanges.OneWeek:
+      startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
+      break;
+    case ESupportedTimeRanges.OneMonth:
+      startDate = dayjs().subtract(1, 'month').format('YYYY-MM-DD');
+      break;
+    case ESupportedTimeRanges.SixMonths:
+      startDate = dayjs().subtract(6, 'month').format('YYYY-MM-DD');
+      break;
+    default:
+      startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD');
+  }
+
+  return { startDate, endDate };
 };
 
 /**
@@ -37,9 +72,23 @@ export const useSGhoApyHistory = (
   const [error, setError] = useState<boolean>(false);
 
   // Stabilize the options to prevent unnecessary re-fetches
-  const stableOptions = useMemo(() => options, [options.limit, options.startDate, options.endDate]);
+  const stableOptions = useMemo(
+    () => options,
+    [options.limit, options.startDate, options.endDate, options.timeRange]
+  );
 
-  const { limit = sghoConfig.defaultLimit, startDate, endDate } = stableOptions;
+  const { limit = sghoConfig.defaultLimit, timeRange } = stableOptions;
+
+  // Determine dates: use timeRange if provided, otherwise use explicit startDate/endDate
+  const { startDate, endDate } = useMemo(() => {
+    if (timeRange) {
+      return timeRangeToDateRange(timeRange);
+    }
+    return {
+      startDate: stableOptions.startDate,
+      endDate: stableOptions.endDate,
+    };
+  }, [timeRange, stableOptions.startDate, stableOptions.endDate]);
 
   const fetchData = useCallback(async () => {
     try {

src/modules/reserve-overview/TimeRangeSelector.tsx

@@ -3,6 +3,7 @@ import { SxProps, Theme, ToggleButton, ToggleButtonGroup, Typography } from '@mu
 export const supportedTimeRangeOptions = ['1m', '3m', '6m', '1y'] as const;
 
 export enum ESupportedTimeRanges {
+  OneWeek = '1w',
   OneMonth = '1m',
   ThreeMonths = '3m',
   SixMonths = '6m',

src/modules/reserve-overview/graphs/MeritApyGraphContainer.tsx

@@ -61,6 +61,7 @@ export type MeritApyGraphContainerProps = {
   showAverage?: boolean;
   title?: string;
   height?: number;
+  timeRangeSelector?: React.ReactNode;
 };
 
 /**
@@ -76,6 +77,7 @@ export const MeritApyGraphContainer = ({
   showAverage = true,
   title = 'Merit APY',
   height = 155,
+  timeRangeSelector,
 }: MeritApyGraphContainerProps): JSX.Element => {
   const CHART_HEIGHT_LOADING_FIX = 3;
 
@@ -137,6 +139,7 @@ export const MeritApyGraphContainer = ({
         }}
       >
         <GraphLegend labels={legendFields} />
+        {timeRangeSelector}
       </Box>
 
       <Box sx={{ flex: 1, minHeight: height, width: '100%' }}>

src/modules/sGho/SGhoDepositPanel.tsx

@@ -16,7 +16,7 @@ import {
 } from '@mui/material';
 import { BigNumber } from 'ethers';
 import { formatEther, formatUnits } from 'ethers/lib/utils';
-import React from 'react';
+import React, { useState } from 'react';
 import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
@@ -25,12 +25,17 @@ import { TextWithTooltip } from 'src/components/TextWithTooltip';
 import { StakeTokenFormatted } from 'src/hooks/stake/useGeneralStakeUiData';
 import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
 import { useModalContext } from 'src/hooks/useModal';
-import { useSGhoApyHistory } from 'src/hooks/useSGhoApyHistory';
+import {
+  SGhoTimeRange,
+  sghoTimeRangeOptions,
+  useSGhoApyHistory,
+} from 'src/hooks/useSGhoApyHistory';
 import { useStakeTokenAPR } from 'src/hooks/useStakeTokenAPR';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { GENERAL } from 'src/utils/events';
 
 import { MeritApyGraphContainer } from '../reserve-overview/graphs/MeritApyGraphContainer';
+import { ESupportedTimeRanges, TimeRangeSelector } from '../reserve-overview/TimeRangeSelector';
 import { StakeActionBox } from '../staking/StakeActionBox';
 
 export interface SGHODepositPanelProps {
@@ -63,14 +68,16 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
   const { openSwitch } = useModalContext();
   const { currentAccount } = useWeb3Context();
 
-  // const { data: stakeAPR, isLoading: isLoadingStakeAPR, error: errorStakeAPR } = useStakeTokenAPR();
-  // Stable options object to prevent unnecessary re-fetches
+  const [selectedTimeRange, setSelectedTimeRange] = useState<SGhoTimeRange>(
+    ESupportedTimeRanges.OneWeek
+  );
+
   const {
     data: meritApyHistory,
     loading: loadingMeritApy,
     error: errorMeritApyHistory,
     refetch: refetchMeritApyHistory,
-  } = useSGhoApyHistory();
+  } = useSGhoApyHistory({ timeRange: selectedTimeRange });
   const { data: stakeAPR } = useStakeTokenAPR();
 
   // Handle different states properly
@@ -503,6 +510,14 @@ export const SGHODepositPanel: React.FC<SGHODepositPanelProps> = ({
             lineColor="#2EBAC6"
             showAverage={true}
             height={155}
+            timeRangeSelector={
+              <TimeRangeSelector
+                disabled={loadingMeritApy || errorMeritApyHistory}
+                timeRanges={sghoTimeRangeOptions}
+                selectedTimeRange={selectedTimeRange}
+                onTimeRangeChanged={setSelectedTimeRange}
+              />
+            }
           />
         </Grid>
       </Grid>