refactor: add backup data source

app/market/[chainId]/[marketid]/RateChart.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { Card, CardHeader, CardBody } from '@nextui-org/card';
 import { Progress } from '@nextui-org/progress';
 import {
@@ -16,31 +16,25 @@ import {
 import ButtonGroup from '@/components/ButtonGroup';
 import { Spinner } from '@/components/common/Spinner';
 import { CHART_COLORS } from '@/constants/chartColors';
-import {
-  TimeseriesDataPoint,
-  MarketHistoricalData,
-  Market,
-  TimeseriesOptions,
-} from '@/utils/types';
+import { MarketRates } from '@/utils/types';
+import { TimeseriesDataPoint, Market, TimeseriesOptions } from '@/utils/types';
 
 type RateChartProps = {
-  historicalData: MarketHistoricalData['rates'] | undefined;
+  historicalData: MarketRates | undefined;
   market: Market;
   isLoading: boolean;
-  apyTimeframe: '1day' | '7day' | '30day';
-  setApyTimeframe: (timeframe: '1day' | '7day' | '30day') => void;
-  setTimeRangeAndRefetch: (days: number, type: 'rate') => void;
-  rateTimeRange: TimeseriesOptions;
+  selectedTimeframe: '1d' | '7d' | '30d';
+  selectedTimeRange: TimeseriesOptions;
+  handleTimeframeChange: (timeframe: '1d' | '7d' | '30d') => void;
 };
 
 function RateChart({
   historicalData,
   market,
   isLoading,
-  apyTimeframe,
-  setApyTimeframe,
-  setTimeRangeAndRefetch,
-  rateTimeRange,
+  selectedTimeframe,
+  selectedTimeRange,
+  handleTimeframeChange,
 }: RateChartProps) {
   const [visibleLines, setVisibleLines] = useState({
     supplyApy: true,
@@ -69,18 +63,22 @@ function RateChart({
   const getAverageApyValue = (type: 'supply' | 'borrow') => {
     if (!historicalData) return 0;
     const data = type === 'supply' ? historicalData.supplyApy : historicalData.borrowApy;
-    return data.length > 0 ? data.reduce((sum, point) => sum + point.y, 0) / data.length : 0;
+    return data.length > 0
+      ? data.reduce((sum: number, point: TimeseriesDataPoint) => sum + point.y, 0) / data.length
+      : 0;
   };
 
   const getCurrentRateAtUTargetValue = () => {
     return market.state.rateAtUTarget;
   };
 
   const getAverageRateAtUTargetValue = () => {
-    if (!historicalData?.rateAtUTarget) return 0;
+    if (!historicalData?.rateAtUTarget || historicalData.rateAtUTarget.length === 0) return 0;
     return (
-      historicalData.rateAtUTarget.reduce((sum, point) => sum + point.y, 0) /
-      historicalData.rateAtUTarget.length
+      historicalData.rateAtUTarget.reduce(
+        (sum: number, point: TimeseriesDataPoint) => sum + point.y,
+        0,
+      ) / historicalData.rateAtUTarget.length
     );
   };
 
@@ -89,44 +87,37 @@ function RateChart({
   };
 
   const getAverageUtilizationRate = () => {
-    if (!historicalData?.utilization) return 0;
+    if (!historicalData?.utilization || historicalData.utilization.length === 0) return 0;
     return (
-      historicalData.utilization.reduce((sum, point) => sum + point.y, 0) /
-      historicalData.utilization.length
+      historicalData.utilization.reduce(
+        (sum: number, point: TimeseriesDataPoint) => sum + point.y,
+        0,
+      ) / historicalData.utilization.length
     );
   };
 
   const formatTime = (unixTime: number) => {
     const date = new Date(unixTime * 1000);
-    if (rateTimeRange.endTimestamp - rateTimeRange.startTimestamp <= 86400) {
+    if (selectedTimeRange.endTimestamp - selectedTimeRange.startTimestamp <= 86400) {
       return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
     }
     return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
   };
 
   const timeframeOptions = [
-    { key: '1day', label: '1D', value: '1day' },
-    { key: '7day', label: '7D', value: '7day' },
-    { key: '30day', label: '30D', value: '30day' },
+    { key: '1d', label: '1D', value: '1d' },
+    { key: '7d', label: '7D', value: '7d' },
+    { key: '30d', label: '30D', value: '30d' },
   ];
 
-  const handleTimeframeChange = useCallback(
-    (value: string) => {
-      setApyTimeframe(value as '1day' | '7day' | '30day');
-      const days = value === '1day' ? 1 : value === '7day' ? 7 : 30;
-      setTimeRangeAndRefetch(days, 'rate');
-    },
-    [setApyTimeframe, setTimeRangeAndRefetch],
-  );
-
   return (
     <Card className="bg-surface my-4 rounded p-4 shadow-sm">
       <CardHeader className="flex items-center justify-between px-6 py-4 text-xl">
         <span />
         <ButtonGroup
           options={timeframeOptions}
-          value={apyTimeframe}
-          onChange={handleTimeframeChange}
+          value={selectedTimeframe}
+          onChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d')}
           size="sm"
           variant="default"
         />
@@ -285,7 +276,7 @@ function RateChart({
               <div>
                 <h3 className="mb-1 text-lg font-semibold">
                   Historical Averages{' '}
-                  <span className="font-normal text-gray-500">({apyTimeframe})</span>
+                  <span className="font-normal text-gray-500">({selectedTimeframe})</span>
                 </h3>
                 {isLoading ? (
                   <div className="flex min-h-48 justify-center text-primary">

app/market/[chainId]/[marketid]/VolumeChart.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import { Card, CardHeader, CardBody } from '@nextui-org/card';
 import {
   AreaChart,
@@ -17,35 +17,29 @@ import ButtonGroup from '@/components/ButtonGroup';
 import { Spinner } from '@/components/common/Spinner';
 import { CHART_COLORS } from '@/constants/chartColors';
 import { formatReadable } from '@/utils/balance';
-import {
-  TimeseriesDataPoint,
-  MarketHistoricalData,
-  Market,
-  TimeseriesOptions,
-} from '@/utils/types';
+import { MarketVolumes } from '@/utils/types';
+import { TimeseriesDataPoint, Market, TimeseriesOptions } from '@/utils/types';
 
 type VolumeChartProps = {
-  historicalData: MarketHistoricalData['volumes'] | undefined;
+  historicalData: MarketVolumes | undefined;
   market: Market;
   isLoading: boolean;
   volumeView: 'USD' | 'Asset';
-  volumeTimeframe: '1day' | '7day' | '30day';
-  setVolumeTimeframe: (timeframe: '1day' | '7day' | '30day') => void;
-  setTimeRangeAndRefetch: (days: number, type: 'volume') => void;
-  volumeTimeRange: TimeseriesOptions;
   setVolumeView: (view: 'USD' | 'Asset') => void;
+  selectedTimeframe: '1d' | '7d' | '30d';
+  selectedTimeRange: TimeseriesOptions;
+  handleTimeframeChange: (timeframe: '1d' | '7d' | '30d') => void;
 };
 
 function VolumeChart({
   historicalData,
   market,
   isLoading,
   volumeView,
-  volumeTimeframe,
-  setVolumeTimeframe,
-  setTimeRangeAndRefetch,
-  volumeTimeRange,
   setVolumeView,
+  selectedTimeframe,
+  selectedTimeRange,
+  handleTimeframeChange,
 }: VolumeChartProps) {
   const formatYAxis = (value: number) => {
     if (volumeView === 'USD') {
@@ -57,7 +51,7 @@ function VolumeChart({
 
   const formatTime = (unixTime: number) => {
     const date = new Date(unixTime * 1000);
-    if (volumeTimeRange.endTimestamp - volumeTimeRange.startTimestamp <= 24 * 60 * 60) {
+    if (selectedTimeRange.endTimestamp - selectedTimeRange.startTimestamp <= 24 * 60 * 60) {
       return date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
     }
     return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
@@ -77,8 +71,8 @@ function VolumeChart({
     return supplyData
       .map((point: TimeseriesDataPoint, index: number) => {
         // Get corresponding points from other series
-        const borrowPoint = borrowData[index];
-        const liquidityPoint = liquidityData[index];
+        const borrowPoint: TimeseriesDataPoint | undefined = borrowData[index];
+        const liquidityPoint: TimeseriesDataPoint | undefined = liquidityData[index];
 
         // Convert values based on view type
         const supplyValue =
@@ -144,7 +138,7 @@ function VolumeChart({
         : historicalData?.[`${type}Assets`];
     if (!data || data.length === 0) return 0;
     const sum = data.reduce(
-      (acc, point) =>
+      (acc: number, point: TimeseriesDataPoint) =>
         acc +
         Number(
           volumeView === 'USD' ? point.y : formatUnits(BigInt(point.y), market.loanAsset.decimals),
@@ -160,20 +154,11 @@ function VolumeChart({
   ];
 
   const timeframeOptions = [
-    { key: '1day', label: '1D', value: '1day' },
-    { key: '7day', label: '7D', value: '7day' },
-    { key: '30day', label: '30D', value: '30day' },
+    { key: '1d', label: '1D', value: '1d' },
+    { key: '7d', label: '7D', value: '7d' },
+    { key: '30d', label: '30D', value: '30d' },
   ];
 
-  const handleTimeframeChange = useCallback(
-    (value: string) => {
-      setVolumeTimeframe(value as '1day' | '7day' | '30day');
-      const days = value === '1day' ? 1 : value === '7day' ? 7 : 30;
-      setTimeRangeAndRefetch(days, 'volume');
-    },
-    [setVolumeTimeframe, setTimeRangeAndRefetch],
-  );
-
   const [visibleLines, setVisibleLines] = useState({
     supply: true,
     borrow: true,
@@ -194,8 +179,8 @@ function VolumeChart({
           />
           <ButtonGroup
             options={timeframeOptions}
-            value={volumeTimeframe}
-            onChange={handleTimeframeChange}
+            value={selectedTimeframe}
+            onChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d')}
             size="sm"
             variant="default"
           />
@@ -343,7 +328,7 @@ function VolumeChart({
               <div>
                 <h3 className="mb-1 text-lg font-semibold">
                   Historical Averages{' '}
-                  <span className="font-normal text-gray-500">({volumeTimeframe})</span>
+                  <span className="font-normal text-gray-500">({selectedTimeframe})</span>
                 </h3>
                 {isLoading ? (
                   <div className="flex min-h-48 justify-center text-primary">