feat: revert changes on dashboard v2 metrics

TempleDAO · Oct 25, 2023 · 96c44f5 · 96c44f5
1 parent e9e4fe4
commit 96c44f5
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 45 deletions.
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Table/TxnDataTable.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Table/TxnDataTable.tsx
@@ -1,8 +1,8 @@
 import { LoadingText } from 'components/Pages/Core/components/LoaderVault/commons/LoadingText';
 import env from 'constants/env/local';
-import { StrategyKey } from 'hooks/api/use-react-query';
 import styled from 'styled-components';
 import { loading } from 'utils/loading-value';
+import { StrategyKey } from '../hooks/use-dashboardv2-metrics';
 
 export type TableRow = {
   date: string;

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Table/TxnPaginationControl.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Table/TxnPaginationControl.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 type PaginationControlProps = {
   currentPage: number;

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-metrics.ts b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-metrics.ts
@@ -1,8 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
 import millify from 'millify';
 import { fetchGenericSubgraph, fetchSubgraph } from 'utils/subgraph';
+import { DashboardType } from '../DashboardContent';
 import env from 'constants/env';
 import { useMemo } from 'react';
-import { getQueryKey, StrategyKey, useApiQuery } from 'hooks/api/use-react-query';
+
+export enum StrategyKey {
+  RAMOS = 'RamosStrategy',
+  TLC = 'TlcStrategy',
+  TEMPLEBASE = 'TempleBaseStrategy',
+  DSRBASE = 'DsrBaseStrategy',
+  ALL = 'All'
+}
 
 export enum TokenSymbols {
   DAI = 'DAI',
@@ -48,6 +57,9 @@ export interface StrategyMetrics {
 }
 
 
+
+const CACHE_TTL = 1000 * 60;
+
 export default function useDashboardV2Metrics() {
   // TODO: In the future we can refactor this.
   // Ideally should not enumerate every strategy but instead do it dynamically
@@ -56,45 +68,55 @@ export default function useDashboardV2Metrics() {
   //   [strategy in StrategyKey]: UseQueryResult<StrategyMetrics>;
   // };
 
-  const ramosMetrics = useApiQuery<StrategyMetrics>(
-    getQueryKey.metrics(StrategyKey.RAMOS),
-    async () => {
+  const ramosMetrics = useQuery({
+    queryKey: ['getMetrics', StrategyKey.RAMOS],
+    queryFn: async () => {
       const metrics = await fetchStrategyMetrics(StrategyKey.RAMOS);
       return metrics;
-    }
-  );
-
-  const tlcMetrics = useApiQuery<StrategyMetrics>(
-    getQueryKey.metrics(StrategyKey.TLC),
-    async () => {
+    },
+    refetchInterval: CACHE_TTL,
+    staleTime: CACHE_TTL,
+  });
+
+  const tlcMetrics = useQuery({
+    queryKey: ['getMetrics', StrategyKey.TLC],
+    queryFn: async () => {
       const metrics = await fetchStrategyMetrics(StrategyKey.TLC);
       return metrics;
-    }
-  );
-
-  const templeBaseMetrics = useApiQuery<StrategyMetrics>(
-    getQueryKey.metrics(StrategyKey.TEMPLEBASE),
-    async () => {
+    },
+    refetchInterval: CACHE_TTL,
+    staleTime: CACHE_TTL,
+  });
+
+  const templeBaseMetrics = useQuery({
+    queryKey: ['getMetrics', StrategyKey.TEMPLEBASE],
+    queryFn: async () => {
       const metrics = await fetchStrategyMetrics(StrategyKey.TEMPLEBASE);
       return metrics;
-    }
-  );
-
-  const dsrBaseMetrics = useApiQuery<StrategyMetrics>(
-    getQueryKey.metrics(StrategyKey.DSRBASE),
-    async () => {
+    },
+    refetchInterval: CACHE_TTL,
+    staleTime: CACHE_TTL,
+  });
+
+  const dsrBaseMetrics = useQuery({
+    queryKey: ['getMetrics', StrategyKey.DSRBASE],
+    queryFn: async () => {
       const metrics = await fetchStrategyMetrics(StrategyKey.DSRBASE);
       return metrics;
-    }
-  );
-
-  const treasuryReservesVaultMetrics = useApiQuery<TreasuryReservesVaultMetrics>(
-    getQueryKey.trvMetrics(),
-    async () => {
+    },
+    refetchInterval: CACHE_TTL,
+    staleTime: CACHE_TTL,
+  });
+
+  const treasuryReservesVaultMetrics = useQuery({
+    queryKey: ['getMetrics', DashboardType.TREASURY_RESERVES_VAULT],
+    queryFn: async () => {
       const metrics = await fetchTreasuryReservesVaultMetrics();
       return metrics;
-    }
-  );
+    },
+    refetchInterval: CACHE_TTL,
+    staleTime: CACHE_TTL,
+  });
 
   const isLoading = useMemo(() => {
     return (
@@ -207,7 +229,7 @@ export default function useDashboardV2Metrics() {
 
     try {
       const allMetricsPromises = [
-        fetchGenericSubgraph(
+        fetchGenericSubgraph<any>(
           env.subgraph.templeV2,
           `{
           treasuryReservesVaults {
@@ -465,4 +487,4 @@ export default function useDashboardV2Metrics() {
     getArrangedTreasuryReservesVaultMetrics,
     getArrangedStrategyMetrics,
   };
-}
+}
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-txHistory.ts b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-txHistory.ts
@@ -1,9 +1,10 @@
 import { fetchGenericSubgraph } from 'utils/subgraph';
 import env from 'constants/env';
 import { SubGraphResponse } from 'hooks/core/types';
-import { useApiQuery, getQueryKey, StrategyKey } from 'hooks/api/use-react-query';
+import { useApiQuery, getQueryKey } from 'hooks/api/use-react-query';
 import { TxHistoryFilterType } from '../Table';
 import { DashboardType } from '../DashboardContent';
+import { StrategyKey } from './use-dashboardv2-metrics';
 
 type Transactions = {
   hash: string;

diff --git a/apps/dapp/src/hooks/api/use-react-query.ts b/apps/dapp/src/hooks/api/use-react-query.ts
@@ -1,4 +1,5 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
+import { StrategyKey } from 'components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-metrics';
 
 // Centralize all the dApp react query keys in case we need to cancel or invalidate them
 // through the app, this makes it easier to track them, please add new ones as required
@@ -9,20 +10,12 @@ export const getQueryKey = {
   trvMetrics: () => ['getTreasureReserveMetrics'],
 }
 
-export enum StrategyKey {
-  RAMOS = 'RamosStrategy',
-  TLC = 'TlcStrategy',
-  TEMPLEBASE = 'TempleBaseStrategy',
-  DSRBASE = 'DsrBaseStrategy',
-  ALL = 'All'
-}
-
 const CACHE_TTL = 1000 * 60;
 
 /** useApiQuery: wrapper of useQuery for general dApp configs
  * 
- * @param key select ROOT_QUERY_KEY, add new one when required
- * @param fn callback function to be executed
+ * @param key use getQueryKey fn, add new one when required
+ * @param fn callback query function
  * @returns UseQueryResult\<Response>
  */
 function useApiQuery <Response>(