feat: lite version on block index

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#958](https://github.com/alleslabs/celatone-frontend/pull/958) Support lite version for block index page
 - [#951](https://github.com/alleslabs/celatone-frontend/pull/951) Support contract details lite version with LCD endpoint
 - [#961](https://github.com/alleslabs/celatone-frontend/pull/961) Add and refactor proposal related lcd endpoints
 - [#952](https://github.com/alleslabs/celatone-frontend/pull/952) Support module details page lite version with LCD endpoint
@@ -72,6 +73,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#967](https://github.com/alleslabs/celatone-frontend/pull/967) Utilize consensus address for better consistency
 - [#963](https://github.com/alleslabs/celatone-frontend/pull/963) Add separator between token in tx message
 - [#959](https://github.com/alleslabs/celatone-frontend/pull/959) Update @cosmos-kit/react to v2.15.0 and friends
 - [#947](https://github.com/alleslabs/celatone-frontend/pull/947) Add zod type for sign mode infos

src/lib/app-provider/env.ts

@@ -19,6 +19,7 @@ export enum CELATONE_QUERY_KEYS {
   // BLOCK
   BLOCKS = "CELATONE_QUERY_BLOCKS",
   BLOCK_DATA = "CELATONE_QUERY_BLOCK_DATA",
+  BLOCK_DATA_LCD = "CELATONE_QUERY_BLOCK_DATA_LCD",
   BLOCK_LATEST_HEIGHT_LCD = "CELATONE_QUERY_BLOCK_LATEST_HEIGHT_LCD",
   // CODE GQL
   CODES = "CELATONE_QUERY_CODES",

src/lib/components/table/transactions/TransactionsTable.tsx

@@ -11,6 +11,7 @@ interface TransactionsTableProps {
   transactions: Option<Transaction[]>;
   isLoading: boolean;
   emptyState: JSX.Element;
+  showSuccess?: boolean;
   showRelations: boolean;
   showTimestamp?: boolean;
   showAction?: boolean;
@@ -20,6 +21,7 @@ export const TransactionsTable = ({
   transactions,
   isLoading,
   emptyState,
+  showSuccess = true,
   showRelations,
   showTimestamp = true,
   showAction = false,
@@ -29,18 +31,25 @@ export const TransactionsTable = ({
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = `32px 190px 48px minmax(380px, 1fr) ${
-    showRelations ? "90px " : ""
-  }max(180px) ${showTimestamp ? "max(228px) " : ""}${
-    showAction ? "100px " : ""
-  }`;
+  const columns: string[] = [
+    "32px",
+    "190px",
+    ...(showSuccess ? ["48px"] : []),
+    "minmax(380px, 1fr)",
+    ...(showRelations ? ["90px"] : []),
+    "max(180px)",
+    ...(showTimestamp ? ["max(228px)"] : []),
+    ...(showAction ? ["100px"] : []),
+  ];
+  const templateColumns: string = columns.join(" ");
 
   return isMobile ? (
     <MobileTableContainer>
       {transactions.map((transaction) => (
         <TransactionsTableMobileCard
           key={transaction.hash}
           transaction={transaction}
+          showSuccess={showSuccess}
           showRelations={showRelations}
           showTimestamp={showTimestamp}
         />
@@ -50,6 +59,7 @@ export const TransactionsTable = ({
     <TableContainer>
       <TransactionsTableHeader
         templateColumns={templateColumns}
+        showSuccess={showSuccess}
         showRelations={showRelations}
         showTimestamp={showTimestamp}
         showAction={showAction}
@@ -59,6 +69,7 @@ export const TransactionsTable = ({
           key={transaction.hash}
           transaction={transaction}
           templateColumns={templateColumns}
+          showSuccess={showSuccess}
           showRelations={showRelations}
           showTimestamp={showTimestamp}
           showAction={showAction}

src/lib/components/table/transactions/TransactionsTableHeader.tsx

@@ -5,19 +5,21 @@ import { TableHeader } from "../tableComponents";
 
 export const TransactionsTableHeader = ({
   templateColumns,
+  showSuccess,
   showRelations,
   showTimestamp,
   showAction,
 }: {
   templateColumns: GridProps["templateColumns"];
+  showSuccess: boolean;
   showRelations: boolean;
   showTimestamp: boolean;
   showAction: boolean;
 }) => (
   <Grid templateColumns={templateColumns} minW="min-content">
     <TableHeader />
     <TableHeader>Transaction Hash</TableHeader>
-    <TableHeader />
+    {showSuccess && <TableHeader />}
     <TableHeader>Messages</TableHeader>
     {showRelations && <TableHeader>Relations</TableHeader>}
     <TableHeader>Sender</TableHeader>

src/lib/components/table/transactions/TransactionsTableMobileCard.tsx

@@ -13,11 +13,13 @@ import { RelationChip } from "./RelationChip";
 
 interface TransactionsTableMobileCardProps {
   transaction: Transaction;
+  showSuccess: boolean;
   showRelations: boolean;
   showTimestamp: boolean;
 }
 export const TransactionsTableMobileCard = ({
   transaction,
+  showSuccess,
   showRelations,
   showTimestamp,
 }: TransactionsTableMobileCardProps) => {
@@ -33,10 +35,14 @@ export const TransactionsTableMobileCard = ({
       topContent={
         <>
           <Flex align="center" gap={2}>
-            {transaction.success ? (
-              <CustomIcon name="check" color="success.main" />
-            ) : (
-              <CustomIcon name="close" color="error.main" />
+            {showSuccess && (
+              <>
+                {transaction.success ? (
+                  <CustomIcon name="check" color="success.main" />
+                ) : (
+                  <CustomIcon name="close" color="error.main" />
+                )}
+              </>
             )}
             <ExplorerLink
               value={transaction.hash.toLocaleUpperCase()}

src/lib/components/table/transactions/TransactionsTableRow.tsx

@@ -14,6 +14,7 @@ import { RelationChip } from "./RelationChip";
 interface TransactionsTableRowProps {
   transaction: Transaction;
   templateColumns: string;
+  showSuccess: boolean;
   showRelations: boolean;
   showTimestamp: boolean;
   showAction: boolean;
@@ -22,6 +23,7 @@ interface TransactionsTableRowProps {
 export const TransactionsTableRow = ({
   transaction,
   templateColumns,
+  showSuccess,
   showRelations,
   showTimestamp,
   showAction,
@@ -62,13 +64,15 @@ export const TransactionsTableRow = ({
             )}
           </>
         </TableRow>
-        <TableRow>
-          {transaction.success ? (
-            <CustomIcon name="check" color="success.main" />
-          ) : (
-            <CustomIcon name="close" color="error.main" />
-          )}
-        </TableRow>
+        {showSuccess && (
+          <TableRow>
+            {transaction.success ? (
+              <CustomIcon name="check" color="success.main" />
+            ) : (
+              <CustomIcon name="close" color="error.main" />
+            )}
+          </TableRow>
+        )}
         <TableRow>
           <ActionMessages transaction={transaction} />
         </TableRow>
@@ -85,14 +89,20 @@ export const TransactionsTableRow = ({
           />
         </TableRow>
         {showTimestamp && (
-          <TableRow>
-            <Flex direction="column" gap={1}>
-              <Text variant="body3">{formatUTC(transaction.created)}</Text>
-              <Text variant="body3" color="text.dark">
-                {`(${dateFromNow(transaction.created)})`}
-              </Text>
-            </Flex>
-          </TableRow>
+          <>
+            {transaction.created ? (
+              <TableRow>
+                <Flex direction="column" gap={1}>
+                  <Text variant="body3">{formatUTC(transaction.created)}</Text>
+                  <Text variant="body3" color="text.dark">
+                    {`(${dateFromNow(transaction.created)})`}
+                  </Text>
+                </Flex>
+              </TableRow>
+            ) : (
+              <TableRow>N/A</TableRow>
+            )}
+          </>
         )}
         {showAction && (
           <TableRow>

src/lib/hooks/useSingleMessageProps.ts

@@ -1,7 +1,7 @@
 import router from "next/router";
 
 import type { GetAddressTypeByLengthFn } from "lib/app-provider";
-import { useGetAddressTypeByLength } from "lib/app-provider";
+import { useGetAddressTypeByLength, useTierConfig } from "lib/app-provider";
 import type { SingleMsgProps } from "lib/components/action-msg/SingleMsg";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { useContractStore } from "lib/providers/store";
@@ -55,6 +55,7 @@ const instantiateSingleMsgProps = (
   isInstantiate2: boolean,
   getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
+  // TODO: need to handle undefined case
   const detail = messages[0].detail as DetailInstantiate;
   // TODO - revisit, instantiate detail response when query from contract transaction table doesn't contain contract addr
   const contractAddress =
@@ -598,11 +599,16 @@ export const useSingleActionMsgProps = (
   messages: Message[],
   singleMsg: Option<boolean>
 ): SingleMsgProps => {
+  const isFullTier = useTierConfig() === "full";
   const { getContractLocalInfo } = useContractStore();
   const { data: assetInfos } = useAssetInfos({ withPrices: false });
   const { data: movePoolInfos } = useMovePoolInfos({ withPrices: false });
   const getAddressTypeByLength = useGetAddressTypeByLength();
 
+  // HACK: to prevent the error when message.detail is undefined
+  // TODO: revist and support custom message detail on lite tier later
+  if (!isFullTier) return otherMessageSingleMsgProps(isSuccess, messages, type);
+
   switch (type) {
     case "MsgExecuteContract":
       return executeSingleMsgProps(

src/lib/pages/block-details/components/BlockInfo.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Heading } from "@chakra-ui/react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useTierConfig } from "lib/app-provider";
 import { LabelText } from "lib/components/LabelText";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type { BlockData } from "lib/types";
@@ -12,32 +12,51 @@ interface BlockInfoProps {
 
 export const BlockInfo = ({ blockData }: BlockInfoProps) => {
   const { currentChainId } = useCelatoneApp();
+  const isFullTier = useTierConfig() === "full";
   return (
     <Box mb={12}>
       <Flex mb={6} justifyContent="space-between">
         <Heading as="h6" variant="h6">
           Block Info
         </Heading>
       </Flex>
-      <Flex gap={{ base: 4, md: 12 }} direction={{ base: "column", md: "row" }}>
+      {isFullTier ? (
+        <Flex
+          gap={{ base: 4, md: 12 }}
+          direction={{ base: "column", md: "row" }}
+        >
+          <Flex direction="row" flex="1" maxW={{ md: "400px" }}>
+            <LabelText flex="1" label="Network">
+              {currentChainId}
+            </LabelText>
+            <LabelText flex="1" label="Gas (Used/Wanted)">
+              {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
+                blockData.gasLimit ? formatInteger(blockData.gasLimit) : 0
+              }`}
+            </LabelText>
+          </Flex>
+          <LabelText label="Proposed by" flex="1" minW={0}>
+            <ValidatorBadge
+              validator={blockData.proposer}
+              badgeSize={6}
+              hasLabel={false}
+            />
+          </LabelText>
+        </Flex>
+      ) : (
         <Flex direction="row" flex="1" maxW={{ md: "400px" }}>
           <LabelText flex="1" label="Network">
             {currentChainId}
           </LabelText>
-          <LabelText flex="1" label="Gas (Used/Wanted)">
-            {`${blockData.gasUsed ? formatInteger(blockData.gasUsed) : 0} / ${
-              blockData.gasLimit ? formatInteger(blockData.gasLimit) : 0
-            }`}
+          <LabelText label="Proposed by" flex="1" minW={0}>
+            <ValidatorBadge
+              validator={blockData.proposer}
+              badgeSize={6}
+              hasLabel={false}
+            />
           </LabelText>
         </Flex>
-        <LabelText label="Proposed by" flex="1" minW={0}>
-          <ValidatorBadge
-            validator={blockData.proposer}
-            badgeSize={6}
-            hasLabel={false}
-          />
-        </LabelText>
-      </Flex>
+      )}
     </Box>
   );
 };

src/lib/pages/block-details/components/BlockTxsTable.tsx → src/lib/pages/block-details/components/BlockTxsTableFull.tsx

@@ -10,7 +10,7 @@ interface BlockTxsTableProps {
   height: number;
 }
 
-export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
+export const BlockTxsTableFull = ({ height }: BlockTxsTableProps) => {
   const {
     pagesQuantity,
     setTotalData,
@@ -43,6 +43,7 @@ export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
             withBorder
           />
         }
+        showSuccess
         showRelations={false}
         showTimestamp={false}
       />

src/lib/pages/block-details/components/BlockTxsTableLite.tsx

@@ -0,0 +1,32 @@
+import { EmptyState } from "lib/components/state";
+import { TableTitle, TransactionsTable } from "lib/components/table";
+import { useBlockDataLcd } from "lib/services/block";
+
+interface BlockTxsTableProps {
+  height: number;
+}
+
+export const BlockTxsTableLite = ({ height }: BlockTxsTableProps) => {
+  const { data, isLoading } = useBlockDataLcd(height);
+  const total = data?.transactions.length;
+
+  return (
+    <>
+      <TableTitle title="Transactions" count={total} />
+      <TransactionsTable
+        transactions={data?.transactions}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="There are no submitted transactions in this block"
+            withBorder
+          />
+        }
+        showSuccess={false}
+        showRelations={false}
+        showTimestamp={false}
+      />
+    </>
+  );
+};

src/lib/pages/block-details/components/InvalidBlock.tsx

@@ -0,0 +1,3 @@
+import { InvalidState } from "lib/components/state";
+
+export const InvalidBlock = () => <InvalidState title="Block does not exist" />;

src/lib/pages/block-details/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./BlockDetailsTop";
 export * from "./BlockInfo";
-export * from "./BlockTxsTable";
+export * from "./BlockTxsTableLite";
+export * from "./BlockTxsTableFull";