[CFE-568]: Refactor(utils): home page overview, separate request

CHANGELOG.md

@@ -48,6 +48,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1022](https://github.com/alleslabs/celatone-frontend/pull/1022) Separate API requests in home page overview component
+
 ### Bug fixes
 
 ## v1.7.1

src/lib/app-provider/env.ts

@@ -24,6 +24,7 @@ export enum CELATONE_QUERY_KEYS {
   BLOCK_DATA_LCD = "CELATONE_QUERY_BLOCK_DATA_LCD",
   BLOCK_DATA_SEQUENCER = "CELATONE_QUERY_BLOCK_DATA_SEQUENCER",
   BLOCK_LATEST_HEIGHT_LCD = "CELATONE_QUERY_BLOCK_LATEST_HEIGHT_LCD",
+  BLOCK_TIME_AVERAGE_SEQUENCER = "CELATONE_QUERY_BLOCK_TIME_AVERAGE_SEQUENCER",
   BLOCKS_SEQUENCER = "CELATONE_QUERY_BLOCKS_SEQUENCER",
   // CODE GQL
   CODES = "CELATONE_QUERY_CODES",

src/lib/pages/home/full.tsx

@@ -86,21 +86,21 @@ export const HomeFull = () => {
           <CardInfo
             title={txInfo.title}
             tooltip={txInfo.tooltip}
-            value={overviewsStats?.txCount.toLocaleString()}
+            value={overviewsStats?.txCount?.toLocaleString()}
             isLoading={isLoading}
             navigate={toTxs}
           />
           <CardInfo
             title={blockInfo.title}
             tooltip={blockInfo.tooltip}
-            value={overviewsStats?.latestBlock.toString()}
+            value={overviewsStats?.latestBlock?.toString()}
             isLoading={isLoading}
             navigate={toBlocks}
           />
           <CardInfo
             title={blockTimeInfo.title}
             tooltip={blockTimeInfo.tooltip}
-            value={overviewsStats?.blockTime.toFixed(3).concat("s")}
+            value={overviewsStats?.blockTime?.toFixed(3).concat("s")}
             isLoading={isLoading}
             navigate={toTxs}
           />

src/lib/pages/home/sequencer.tsx

@@ -11,6 +11,10 @@ import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import PageContainer from "lib/components/PageContainer";
 import { ViewMore } from "lib/components/table";
 import { UserDocsLink } from "lib/components/UserDocsLink";
+import {
+  useBlockTimeAverageSequencer,
+  useLatestBlockLcd,
+} from "lib/services/block";
 import { useOverviewsStats } from "lib/services/stats";
 
 import { DevShortcut, TopDecorations } from "./components";
@@ -40,7 +44,12 @@ export const HomeSequencer = () => {
     theme,
   } = useCelatoneApp();
 
-  const { data: overviewsStats, isLoading } = useOverviewsStats();
+  const { data: overviewsStats, isLoading: isOverviewsStatesLoading } =
+    useOverviewsStats();
+  const { data: latestBlock, isLoading: isLatestBlockLoading } =
+    useLatestBlockLcd();
+  const { data: blockTimeAverage, isLoading: isBlockTimeAverageLoading } =
+    useBlockTimeAverageSequencer();
 
   const toTxs = () =>
     navigate({
@@ -86,22 +95,22 @@ export const HomeSequencer = () => {
           <CardInfo
             title={txInfo.title}
             tooltip={txInfo.tooltip}
-            value={overviewsStats?.txCount.toLocaleString()}
-            isLoading={isLoading}
+            value={overviewsStats?.txCount?.toLocaleString()}
+            isLoading={isOverviewsStatesLoading}
             navigate={toTxs}
           />
           <CardInfo
             title={blockInfo.title}
             tooltip={blockInfo.tooltip}
-            value={overviewsStats?.latestBlock.toString()}
-            isLoading={isLoading}
+            value={latestBlock?.toString()}
+            isLoading={isLatestBlockLoading}
             navigate={toBlocks}
           />
           <CardInfo
             title={blockTimeInfo.title}
             tooltip={blockTimeInfo.tooltip}
-            value={overviewsStats?.blockTime.toFixed(3).concat("s")}
-            isLoading={isLoading}
+            value={blockTimeAverage?.avgBlockTime?.toFixed(3).concat("s")}
+            isLoading={isBlockTimeAverageLoading}
             navigate={toTxs}
           />
         </Flex>

src/lib/services/block/index.ts

@@ -16,7 +16,11 @@ import {
 
 import { getBlockData, getBlocks } from "./api";
 import { getBlockDataLcd, getLatestBlockLcd } from "./lcd";
-import { getBlockDataSequencer, getBlocksSequencer } from "./sequencer";
+import {
+  getBlockDataSequencer,
+  getBlocksSequencer,
+  getBlockTimeAverageSequencer,
+} from "./sequencer";
 
 export const useBlocks = (
   limit: number,
@@ -112,6 +116,19 @@ export const useBlocksSequencer = (limit = 10) => {
   };
 };
 
+export const useBlockTimeAverageSequencer = () => {
+  const endpoint = useLcdEndpoint();
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.BLOCK_TIME_AVERAGE_SEQUENCER, endpoint],
+    async () => getBlockTimeAverageSequencer(endpoint),
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+    }
+  );
+};
+
 export const useBlockDataSequencer = (height: number) => {
   const endpoint = useLcdEndpoint();
 

src/lib/services/block/sequencer.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 import {
   zBlockDataResponseSequencer,
   zBlocksResponseSequencer,
+  zBlockTimeAverageSequencer,
 } from "../types";
 import type { Option } from "lib/types";
 import { parseWithError } from "lib/utils";
@@ -43,6 +44,11 @@ export const getBlocksSequencer = async (
     })
     .then(({ data }) => parseWithError(zBlocksResponseSequencer, data));
 
+export const getBlockTimeAverageSequencer = async (endpoint: string) =>
+  axios
+    .get(`${endpoint}/indexer/block/v1/avg_blocktime`)
+    .then(({ data }) => parseWithError(zBlockTimeAverageSequencer, data));
+
 export const getBlockDataSequencer = async (endpoint: string, height: number) =>
   axios
     .get(`${endpoint}/indexer/block/v1/blocks/${height}`)

src/lib/services/stats/index.ts

@@ -42,7 +42,7 @@ export const useOverviewsStats = (
       handleQueryByTier({
         tier,
         threshold: "sequencer",
-        querySequencer: () => getOverviewStatsSequencer(lcdEndpoint, chainId),
+        querySequencer: () => getOverviewStatsSequencer(chainId),
         queryFull: () => getOverviewsStats(apiEndpoint),
       }),
     {

src/lib/services/stats/sequencer.ts

@@ -1,20 +1,11 @@
 import axios from "axios";
 
-import type { OverviewsStats } from "../types";
 import { zOverviewsStatsResponseSequencer } from "../types";
 import { parseWithError } from "lib/utils";
 
-export const getOverviewStatsSequencer = async (
-  endpoint: string,
-  chainId: string
-): Promise<OverviewsStats> =>
-  Promise.all([
-    axios
-      .get(
-        `https://dashboard-api.initiation-1.initia.xyz/v1/chart-data/${chainId}`
-      )
-      .then(({ data }) => data),
-    axios
-      .get(`${endpoint}/indexer/block/v1/avg_blocktime`)
-      .then(({ data }) => data),
-  ]).then((data) => parseWithError(zOverviewsStatsResponseSequencer, data));
+export const getOverviewStatsSequencer = async (chainId: string) =>
+  axios
+    .get(
+      `https://dashboard-api.initiation-1.initia.xyz/v1/chart-data/${chainId}`
+    )
+    .then(({ data }) => parseWithError(zOverviewsStatsResponseSequencer, data));

src/lib/services/types/block.ts

@@ -191,6 +191,12 @@ export const zBlocksResponseSequencer = z.object({
   pagination: zPagination,
 });
 
+export const zBlockTimeAverageSequencer = z
+  .object({
+    avg_block_time: z.number().nonnegative(),
+  })
+  .transform(snakeToCamel);
+
 export const zBlockDataResponseSequencer = zBlockSequencer.transform<BlockData>(
   (val) => ({
     hash: val.hash,

src/lib/services/types/stats.ts

@@ -2,9 +2,9 @@ import { z } from "zod";
 
 export const zOverviewsStatsResponse = z
   .object({
-    transaction_count: z.number().nonnegative(),
-    latest_block: z.number().nonnegative(),
-    block_time: z.number().nonnegative(),
+    transaction_count: z.number().nonnegative().nullable(),
+    latest_block: z.number().nonnegative().nullable(),
+    block_time: z.number().nonnegative().nullable(),
   })
   .transform((val) => ({
     txCount: val.transaction_count,
@@ -15,24 +15,19 @@ export const zOverviewsStatsResponse = z
 export type OverviewsStats = z.infer<typeof zOverviewsStatsResponse>;
 
 export const zOverviewsStatsResponseSequencer = z
-  .tuple([
-    z.object({
-      last_block_height: z.number().nonnegative(),
-      data: z.array(
-        z.object({
-          date: z.string(),
-          tvl: z.number().nonnegative(),
-          tx_count: z.number().nonnegative(),
-          active_accounts: z.number().nonnegative(),
-        })
-      ),
-    }),
-    z.object({
-      avg_block_time: z.number().nonnegative(),
-    }),
-  ])
-  .transform<OverviewsStats>(([stat, avg]) => ({
-    latestBlock: stat.last_block_height,
-    txCount: stat.data.sort((a, b) => b.date.localeCompare(a.date))[0].tx_count,
-    blockTime: avg.avg_block_time,
+  .object({
+    last_block_height: z.number().nonnegative(),
+    data: z.array(
+      z.object({
+        date: z.string(),
+        tvl: z.number().nonnegative(),
+        tx_count: z.number().nonnegative(),
+        active_accounts: z.number().nonnegative(),
+      })
+    ),
+  })
+  .transform<OverviewsStats>((val) => ({
+    txCount: val.data[val.data.length - 1].tx_count,
+    latestBlock: val.last_block_height,
+    blockTime: 0,
   }));