feat: add latest height query

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#926](https://github.com/alleslabs/celatone-frontend/pull/926) Add latest height query
 - [#919](https://github.com/alleslabs/celatone-frontend/pull/919) Remove singleStakingDenom config and use from lcd instead
 - [#918](https://github.com/alleslabs/celatone-frontend/pull/918) Support lite version for delegation informations
 - [#916](https://github.com/alleslabs/celatone-frontend/pull/916) Support lite version balances

src/lib/app-provider/env.ts

@@ -28,6 +28,7 @@ export enum CELATONE_QUERY_KEYS {
   // BLOCK
   BLOCKS = "CELATONE_QUERY_BLOCKS",
   BLOCK_DATA = "CELATONE_QUERY_BLOCK_DATA",
+  BLOCK_LATEST_HEIGHT = "CELATONE_QUERY_BLOCK_LATEST_HEIGHT",
   // CODE GQL
   CODES = "CELATONE_QUERY_CODES",
   CODES_LCD = "CELATONE_QUERY_CODES_LCD",

src/lib/layout/InformationFooter.tsx

@@ -3,9 +3,11 @@ import { Flex, Skeleton, Text } from "@chakra-ui/react";
 import Link from "next/link";
 
 import { AmpEvent, trackWebsite } from "lib/amplitude";
+import { useTierConfig } from "lib/app-provider";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
 import { USER_GUIDE_DOCS_LINK } from "lib/data";
+import { useLatestBlock } from "lib/services/block";
 import { useOverviewsStats } from "lib/services/overviewService";
 
 const FOOTER_BUTTONS = [
@@ -25,7 +27,13 @@ const FOOTER_BUTTONS = [
 ];
 
 export const InformationFooter = () => {
-  const { data: overviewsStats, isLoading } = useOverviewsStats();
+  const isFullTier = useTierConfig() === "full";
+  const { data: overviewsStats, isLoading: isLoadingFull } =
+    useOverviewsStats(isFullTier);
+  const { data: latestHeight, isLoading: isLoadingLite } = useLatestBlock();
+
+  const latest = isFullTier ? overviewsStats?.latestBlock : latestHeight;
+  const isLoading = isFullTier ? isLoadingFull : isLoadingLite;
 
   return (
     <Flex
@@ -47,9 +55,9 @@ export const InformationFooter = () => {
         <Flex gap={1} py={1} px={2} align="center">
           <CustomIcon name="block" color="gray.600" boxSize={3} />
           <Text variant="body3" color="text.dark">
-            {overviewsStats?.latestBlock ?? "N/A"}
+            {latest ?? "N/A"}
           </Text>
-          {overviewsStats && (
+          {latest && (
             <Flex
               w={2}
               h={2}

src/lib/pages/home/components/QuickMenuLite.tsx

@@ -31,7 +31,7 @@ const highlightCardProps = {
 interface ShortcutMetadata {
   title: string;
   subtitle: string;
-  slug?: string;
+  slug: string;
   icon: IconKeys;
   isHighlight: boolean;
   isDocument: boolean;
@@ -161,6 +161,7 @@ export const QuickMenuLite = () => {
         {
           title: "User Guide",
           subtitle: "View Celatone documents",
+          slug: "wasm-user-guide",
           icon: "document" as const,
           isHighlight: false,
           isDocument: true,
@@ -197,6 +198,7 @@ export const QuickMenuLite = () => {
           title: "User Guide",
           subtitle: "View Celatone documents",
           icon: "document" as const,
+          slug: "move-user-guide",
           isHighlight: false,
           isDocument: true,
         }
@@ -229,11 +231,7 @@ export const QuickMenuLite = () => {
                   <ContentCard item={item} isDocument={item.isDocument} />
                 </Link>
               ) : (
-                <AppLink
-                  href={`/${item.slug}`}
-                  key={item.slug}
-                  style={{ height: "100%" }}
-                >
+                <AppLink href={`/${item.slug}`} style={{ height: "100%" }}>
                   <ContentCard item={item} isDocument={item.isDocument} />
                 </AppLink>
               )}

src/lib/pages/home/lite.tsx

@@ -3,7 +3,7 @@ import { Flex, Heading, Spinner, Text } from "@chakra-ui/react";
 import { useCelatoneApp, useMobile } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import PageContainer from "lib/components/PageContainer";
-import { useOverviewsStats } from "lib/services/overviewService";
+import { useLatestBlock } from "lib/services/block";
 
 import { QuickMenuLite, QuickMenuMobileLite } from "./components";
 
@@ -14,8 +14,7 @@ export const HomeLite = () => {
     theme,
   } = useCelatoneApp();
 
-  // TODO: replace with latest block height data from lcd
-  const { data: overviewsStats, isLoading } = useOverviewsStats();
+  const { data: latestHeight, isLoading } = useLatestBlock();
 
   return (
     <PageContainer display="flex" alignItems="center">
@@ -55,7 +54,7 @@ export const HomeLite = () => {
               <Spinner size="md" />
             ) : (
               <Flex>
-                {overviewsStats && (
+                {latestHeight && (
                   <Flex
                     w={2}
                     h={2}
@@ -71,7 +70,7 @@ export const HomeLite = () => {
                   />
                 )}
                 <Heading as="h5" variant="h5">
-                  {overviewsStats?.latestBlock.toString() ?? "N/A"}
+                  {latestHeight?.toString() ?? "N/A"}
                 </Heading>
               </Flex>
             )}

src/lib/services/block/index.ts

@@ -1,11 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
 import type { UseQueryOptions } from "@tanstack/react-query";
 
-import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
+import {
+  CELATONE_QUERY_KEYS,
+  useBaseApiRoute,
+  useCelatoneApp,
+  useLcdEndpoint,
+} from "lib/app-provider";
 import type { BlocksResponse } from "lib/services/types";
 import type { BlockData } from "lib/types";
 
 import { getBlockData, getBlocks } from "./api";
+import { getLatestBlockLcd } from "./lcd";
 
 export const useBlocks = (
   limit: number,
@@ -33,3 +39,18 @@ export const useBlockData = (height: number, enabled = true) => {
     }
   );
 };
+
+export const useLatestBlock = () => {
+  const { currentChainId } = useCelatoneApp();
+  const endpoint = useLcdEndpoint();
+
+  return useQuery(
+    [CELATONE_QUERY_KEYS.BLOCK_LATEST_HEIGHT, endpoint, currentChainId],
+    async () => getLatestBlockLcd(endpoint),
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+      cacheTime: 0,
+    }
+  );
+};

src/lib/services/block/lcd.ts

@@ -0,0 +1,10 @@
+import axios from "axios";
+
+import { zBlockLcd } from "../types";
+import { parseWithError } from "lib/utils";
+
+export const getLatestBlockLcd = async (endpoint: string) => {
+  return axios
+    .get(`${endpoint}/cosmos/base/tendermint/v1beta1/blocks/latest`)
+    .then(({ data }) => parseWithError(zBlockLcd, data).block.header.height);
+};

src/lib/services/overviewService.ts

@@ -6,14 +6,17 @@ import { CELATONE_QUERY_KEYS, useBaseApiRoute } from "lib/app-provider";
 import { getOverviewsStats } from "./overview";
 import type { OverviewsStats } from "./overview";
 
-export const useOverviewsStats = (): UseQueryResult<OverviewsStats> => {
+export const useOverviewsStats = (
+  enabled: boolean = true
+): UseQueryResult<OverviewsStats> => {
   const endpoint = useBaseApiRoute("overviews");
 
   return useQuery(
     [CELATONE_QUERY_KEYS.OVERVIEWS_STATS, endpoint],
     async () => getOverviewsStats(endpoint),
     {
       refetchOnWindowFocus: false,
+      enabled,
     }
   );
 };

src/lib/services/types/block.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 import type { Block, BlockData, Validator } from "lib/types";
 import { zUtcDate, zValidatorAddr } from "lib/types";
-import { parseTxHash } from "lib/utils";
+import { parseTxHash, snakeToCamel } from "lib/utils";
 
 const zNullableValidator = z.nullable(
   z
@@ -58,3 +58,15 @@ export const zBlockDataResponse = z
     gasUsed: val.gas_used,
     gasLimit: val.gas_limit,
   }));
+
+export const zBlockLcd = z
+  .object({
+    block: z.object({
+      header: z.object({
+        chain_id: z.string(),
+        height: z.coerce.number(),
+        // TODO: Fill in the rest of the block fields
+      }),
+    }),
+  })
+  .transform(snakeToCamel);