Feat: recent txs, overview for sequencer tier

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1020](https://github.com/alleslabs/celatone-frontend/pull/1020) Add Sequencer for recent txs, overview page
 - [#1009](https://github.com/alleslabs/celatone-frontend/pull/1009) Add Sequencer for account details page
 - [#1006](https://github.com/alleslabs/celatone-frontend/pull/1006) Add Sequencer for past txs
 - [#994](https://github.com/alleslabs/celatone-frontend/pull/994) Add Sequencer, Mesa tier and TierSwitcher component

src/config/chain/types.ts

@@ -87,3 +87,10 @@ export interface ChainConfig {
 export interface ChainConfigs {
   [chainId: string]: ChainConfig;
 }
+
+export const TierMap: Record<ChainConfig["tier"], number> = {
+  lite: 0,
+  mesa: 1,
+  sequencer: 2,
+  full: 3,
+};

src/lib/app-provider/env.ts

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export enum CELATONE_QUERY_KEYS {
   OVERVIEWS_STATS = "CELATONE_OVERVIEWS_STATS",
+  OVERVIEWS_STATS_SEQUENCER = "CELATONE_OVERVIEWS_STATS_SEQUENCER",
   // SIMULATE
   SIMULATE_FEE = "CELATONE_QUERY_SIMULATE_FEE",
   SIMULATE_FEE_STORE_CODE = "CELATONE_QUERY_SIMULATE_FEE_STORE_CODE",
@@ -104,6 +105,7 @@ export enum CELATONE_QUERY_KEYS {
   TXS_BY_ACCOUNT_ADDRESS_LCD = "CELATONE_QUERY_TXS_BY_ACCOUNT_ADDRESS_LCD",
   TXS_BY_CONTRACT_ADDRESS_LCD = "CELATONE_QUERY_TXS_BY_CONTRACT_ADDRESS_LCD",
   TXS = "CELATONE_QUERY_TXS",
+  TXS_SEQUENCER = "CELATONE_QUERY_TXS_SEQUENCER",
   TXS_BY_BLOCK_HEIGHT = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT",
   TXS_BY_BLOCK_HEIGHT_SEQUENCER = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT_SEQUENCER",
   // ICNS

src/lib/app-provider/hooks/useConfig.ts

@@ -1,15 +1,9 @@
 import { useCelatoneApp } from "../contexts";
+import { TierMap } from "config/chain/types";
 import type { ChainConfig } from "config/chain/types";
 
 import { useInternalNavigate } from "./useInternalNavigate";
 
-const TierMap: Record<ChainConfig["tier"], number> = {
-  lite: 0,
-  mesa: 1,
-  sequencer: 2,
-  full: 3,
-};
-
 export const useTierConfig = (
   {
     minTier,

src/lib/layout/InformationFooter.tsx

@@ -8,7 +8,7 @@ import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
 import { USER_GUIDE_DOCS_LINK } from "lib/data";
 import { useLatestBlockLcd } from "lib/services/block";
-import { useOverviewsStats } from "lib/services/overviewService";
+import { useOverviewsStats } from "lib/services/stat";
 
 const FOOTER_BUTTONS = [
   {

src/lib/pages/blocks/components/RecentBlocksTableSequencer.tsx

@@ -9,7 +9,7 @@ export const RecentBlocksTableSequencer = ({
   isViewMore,
 }: RecentBlocksTableProps) => {
   const { data, fetchNextPage, hasNextPage, isLoading, isFetchingNextPage } =
-    useBlocksSequencer();
+    useBlocksSequencer(isViewMore ? 5 : 10);
 
   return (
     <>

src/lib/pages/home/full.tsx

@@ -10,8 +10,8 @@ import PageContainer from "lib/components/PageContainer";
 import { ViewMore } from "lib/components/table";
 import { UserDocsLink } from "lib/components/UserDocsLink";
 import { RecentBlocksTableFull } from "lib/pages/blocks/components/RecentBlocksTableFull";
-import { TxsTable } from "lib/pages/txs/components/TxsTable";
-import { useOverviewsStats } from "lib/services/overviewService";
+import { TxsTableFull } from "lib/pages/txs/components/TxsTableFull";
+import { useOverviewsStats } from "lib/services/stat";
 
 import { DevShortcut, TopDecorations } from "./components";
 import { CardInfo } from "./components/CardInfo";
@@ -121,7 +121,7 @@ export const HomeFull = () => {
         <Heading as="h5" variant="h5" mb={5}>
           Recent Transactions
         </Heading>
-        <TxsTable isViewMore />
+        <TxsTableFull isViewMore />
         {overviewsStats?.txCount && overviewsStats.txCount > 5 && (
           <ViewMore onClick={toTxs} />
         )}

src/lib/pages/home/index.tsx

@@ -6,6 +6,7 @@ import { TierSwitcher } from "lib/components/TierSwitcher";
 
 import { HomeFull } from "./full";
 import { HomeLite } from "./lite";
+import { HomeSequencer } from "./sequencer";
 
 const Home = () => {
   const router = useRouter();
@@ -14,7 +15,13 @@ const Home = () => {
     if (router.isReady) track(AmpEvent.TO_OVERVIEW);
   }, [router.isReady]);
 
-  return <TierSwitcher full={<HomeFull />} lite={<HomeLite />} />;
+  return (
+    <TierSwitcher
+      full={<HomeFull />}
+      sequencer={<HomeSequencer />}
+      lite={<HomeLite />}
+    />
+  );
 };
 
 export default Home;

src/lib/pages/home/sequencer.tsx

@@ -0,0 +1,140 @@
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+
+import { RecentBlocksTableSequencer } from "../blocks/components/RecentBlocksTableSequencer";
+import { TxsTableSequencer } from "../txs/components/TxsTableSequencer";
+import {
+  useCelatoneApp,
+  useInternalNavigate,
+  useMobile,
+} from "lib/app-provider";
+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 { useOverviewsStats } from "lib/services/stat";
+
+import { DevShortcut, TopDecorations } from "./components";
+import { CardInfo } from "./components/CardInfo";
+
+const txInfo = {
+  title: "Total Transactions",
+  tooltip:
+    "Verified transactions track network activity and growth, indicating ecosystem health.",
+};
+
+const blockInfo = {
+  title: "Latest Indexed Block Height",
+  tooltip: "The latest block height indexed by the indexer.",
+};
+
+const blockTimeInfo = {
+  title: "Block Time",
+  tooltip: "Median time to finality of the last 100 indexed blocks.",
+};
+
+export const HomeSequencer = () => {
+  const isMobile = useMobile();
+  const navigate = useInternalNavigate();
+  const {
+    chainConfig: { prettyName },
+    theme,
+  } = useCelatoneApp();
+
+  const { data: overviewsStats, isLoading } = useOverviewsStats();
+
+  const toTxs = () =>
+    navigate({
+      pathname: "/txs",
+    });
+
+  const toBlocks = () =>
+    navigate({
+      pathname: "/blocks",
+    });
+
+  return (
+    <PageContainer>
+      <Flex
+        direction="column"
+        p={{ base: 3, md: 12 }}
+        mb={12}
+        borderRadius="12px"
+        border="0px 0px 4px 0px"
+        borderColor="gray.800"
+        boxShadow="0px 6px 1px 0px var(--chakra-colors-gray-800)"
+        bgColor="gray.900"
+        position="relative"
+        overflow="hidden"
+        sx={{ "& > div": { zIndex: 1 } }}
+      >
+        <TopDecorations />
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+          mb={5}
+          zIndex={1}
+        >
+          <Heading as="h4" variant={{ base: "h5", md: "h4" }}>
+            <Text as="span" color="accent.main">
+              {prettyName}
+            </Text>{" "}
+            Overview
+          </Heading>
+          <UserDocsLink isButton href="introduction/overview" />
+        </Flex>
+        <Flex gap={4} direction={{ base: "column", md: "row" }}>
+          <CardInfo
+            title={txInfo.title}
+            tooltip={txInfo.tooltip}
+            value={overviewsStats?.txCount.toLocaleString()}
+            isLoading={isLoading}
+            navigate={toTxs}
+          />
+          <CardInfo
+            title={blockInfo.title}
+            tooltip={blockInfo.tooltip}
+            value={overviewsStats?.latestBlock.toString()}
+            isLoading={isLoading}
+            navigate={toBlocks}
+          />
+          <CardInfo
+            title={blockTimeInfo.title}
+            tooltip={blockTimeInfo.tooltip}
+            value={overviewsStats?.blockTime.toFixed(3).concat("s")}
+            isLoading={isLoading}
+            navigate={toTxs}
+          />
+        </Flex>
+      </Flex>
+      {!isMobile && (
+        <Box as="section" mb="48px">
+          <Flex gap={4} direction="column">
+            <ConnectWalletAlert
+              title={`Connect wallet to start using ${theme.branding.seo.appName}`}
+              subtitle="Specific use cases such as deploying new contract or sending execute messages require a wallet connection."
+            />
+            <DevShortcut />
+          </Flex>
+        </Box>
+      )}
+      <Box as="section" mb="48px">
+        <Heading as="h5" variant="h5" mb={5}>
+          Recent Transactions
+        </Heading>
+        <TxsTableSequencer isViewMore />
+        {!!overviewsStats?.txCount && overviewsStats.txCount > 5 && (
+          <ViewMore onClick={toTxs} />
+        )}
+      </Box>
+      <Box as="section">
+        <Heading as="h5" variant="h5" mb={5}>
+          Recent Blocks
+        </Heading>
+        <RecentBlocksTableSequencer isViewMore />
+        {!!overviewsStats?.latestBlock && overviewsStats.latestBlock > 5 && (
+          <ViewMore onClick={toBlocks} />
+        )}
+      </Box>
+    </PageContainer>
+  );
+};

src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx

@@ -17,6 +17,7 @@ import {
   coinToTokenWithValue,
   extractMsgType,
   formatTokenWithValue,
+  getTxBadges,
   voteOption,
 } from "lib/utils";
 
@@ -40,10 +41,7 @@ export const TxMsgExpand = ({
   const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false });
 
   const { "@type": type, ...body } = msgBody;
-  const isIBC =
-    Boolean(log?.events.find((event) => event.type === "send_packet")) ||
-    type.startsWith("/ibc");
-  const isOpinit = Boolean(type.startsWith("/opinit"));
+  const { isIbc, isOpinit } = getTxBadges(type, log);
 
   let msgIcon: IconKeys = "file";
   let content: ReactNode;
@@ -317,7 +315,7 @@ export const TxMsgExpand = ({
         track(AmpEvent.USE_TX_MSG_EXPAND, {
           action: isExpand ? "collapse" : "expand",
           msg: type,
-          ibc: isIBC,
+          ibc: isIbc,
           isSingleMsg,
         });
         onClick();
@@ -348,7 +346,7 @@ export const TxMsgExpand = ({
           mt={{ base: 1, md: 0 }}
         />
         <Text wordBreak="break-all">{content}</Text>
-        {!isMobile && isIBC && (
+        {!isMobile && isIbc && (
           <Tag mx={2} variant="accent-dark" size="md" minW="hug-content">
             IBC
           </Tag>
@@ -360,7 +358,7 @@ export const TxMsgExpand = ({
         )}
       </Flex>
       <Flex>
-        {isMobile && isIBC && (
+        {isMobile && isIbc && (
           <Tag mx={2} variant="accent-dark" size="sm" minW="hug-content">
             IBC
           </Tag>

src/lib/pages/txs/components/TxsTable.tsx → src/lib/pages/txs/components/TxsTableFull.tsx

@@ -4,11 +4,9 @@ import { EmptyState, ErrorFetching } from "lib/components/state";
 import { TransactionsTable } from "lib/components/table";
 import { useTxs } from "lib/services/tx";
 
-interface TxsTableProps {
-  isViewMore: boolean;
-}
+import type { TxsTableProps } from "./type";
 
-export const TxsTable = ({ isViewMore }: TxsTableProps) => {
+export const TxsTableFull = ({ isViewMore }: TxsTableProps) => {
   const {
     pagesQuantity,
     setTotalData,

src/lib/pages/txs/components/TxsTableSequencer.tsx

@@ -0,0 +1,46 @@
+import { LoadNext } from "lib/components/LoadNext";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import { TransactionsTable } from "lib/components/table";
+import { useTxsSequencer } from "lib/services/tx";
+
+import type { TxsTableProps } from "./type";
+
+export const TxsTableSequencer = ({ isViewMore }: TxsTableProps) => {
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useTxsSequencer(isViewMore ? 5 : 10);
+
+  return (
+    <>
+      <TransactionsTable
+        transactions={data}
+        isLoading={isLoading}
+        emptyState={
+          error ? (
+            <ErrorFetching dataName="transactions" />
+          ) : (
+            <EmptyState
+              withBorder
+              imageVariant="empty"
+              message="There are no transactions on this network."
+            />
+          )
+        }
+        showAction={false}
+        showRelations={false}
+      />
+      {!isViewMore && hasNextPage && (
+        <LoadNext
+          text="Load more 10 transactions"
+          fetchNextPage={fetchNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+        />
+      )}
+    </>
+  );
+};

src/lib/pages/txs/components/type.ts

@@ -0,0 +1,3 @@
+export interface TxsTableProps {
+  isViewMore?: boolean;
+}

src/lib/pages/txs/index.tsx

@@ -6,11 +6,13 @@ import { useTierConfig } from "lib/app-provider";
 import PageContainer from "lib/components/PageContainer";
 import { PageHeader } from "lib/components/PageHeader";
 import { CelatoneSeo } from "lib/components/Seo";
+import { TierSwitcher } from "lib/components/TierSwitcher";
 
-import { TxsTable } from "./components/TxsTable";
+import { TxsTableFull } from "./components/TxsTableFull";
+import { TxsTableSequencer } from "./components/TxsTableSequencer";
 
 const Txs = () => {
-  useTierConfig({ minTier: "full" });
+  useTierConfig({ minTier: "sequencer" });
 
   const router = useRouter();
 
@@ -27,7 +29,10 @@ const Txs = () => {
         recency"
         docHref="introduction/overview#recent-transactions"
       />
-      <TxsTable isViewMore={false} />
+      <TierSwitcher
+        full={<TxsTableFull isViewMore={false} />}
+        sequencer={<TxsTableSequencer isViewMore={false} />}
+      />
     </PageContainer>
   );
 };