integrate system stats (#382)

src/app/api/getSystemStats.ts

@@ -0,0 +1,28 @@
+import { apiWrapper } from "./apiWrapper";
+
+export interface SystemStats {
+  active_tvl: number;
+  total_tvl: number;
+  active_delegations: number;
+  total_delegations: number;
+  active_stakers: number;
+  total_stakers: number;
+  active_finality_providers: number;
+  total_finality_providers: number;
+}
+
+interface SystemStatsAPIResponse {
+  data: SystemStats;
+}
+
+export const getSystemStats = async (): Promise<SystemStats> => {
+  const response = await apiWrapper(
+    "GET",
+    "/v2/stats",
+    "Error getting system stats",
+  );
+
+  const systemStatsAPIResponse: SystemStatsAPIResponse = response.data;
+
+  return systemStatsAPIResponse.data;
+};

src/app/components/Stats/Stats.tsx

@@ -23,16 +23,13 @@ const formatter = Intl.NumberFormat("en", {
 });
 
 export const Stats = memo(() => {
-  const {
-    data: {
-      activeTvl,
-      activeStakers,
-      activeDelegations,
-      totalFinalityProviders,
-      activeFinalityProviders,
-    },
-    isLoading,
-  } = useSystemStats();
+  const { data, isLoading } = useSystemStats();
+
+  const activeTvl = data?.active_tvl ?? 0;
+  const activeStakers = data?.active_stakers ?? 0;
+  const activeDelegations = data?.active_delegations ?? 0;
+  const totalFinalityProviders = data?.total_finality_providers ?? 0;
+  const activeFinalityProviders = data?.active_finality_providers ?? 0;
 
   return (
     <div className="card flex flex-col gap-4 bg-base-300 p-1 shadow-sm xl:flex-row xl:justify-between">

src/app/hooks/api/useSystemStats.ts

@@ -1,23 +1,14 @@
+import { getSystemStats } from "@/app/api/getSystemStats";
+import { ONE_MINUTE } from "@/app/constants";
 import { useAPIQuery } from "@/app/hooks/api/useApi";
 
 export const BTC_TIP_HEIGHT_KEY = "API_STATS";
 
-const defaultValues = {
-  activeTvl: 0,
-  totalTvl: 0,
-  activeDelegations: 0,
-  totalDelegations: 0,
-  activeStakers: 0,
-  totalStakers: 0,
-  activeFinalityProviders: 0,
-  totalFinalityProviders: 0,
-};
-
-export function useSystemStats() {
+export function useSystemStats({ enabled = true }: { enabled?: boolean } = {}) {
   return useAPIQuery({
     queryKey: ["API_STATS"],
-    queryFn: () => Promise.resolve(defaultValues),
-    initialData: defaultValues,
-    placeholderData: defaultValues,
+    queryFn: () => getSystemStats(),
+    refetchInterval: ONE_MINUTE,
+    enabled,
   });
 }