feat: refactor block txs

CHANGELOG.md

@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#347](https://github.com/alleslabs/celatone-frontend/pull/347) Move tx table accordion arrow to the front and refactor block txs table
+
 ### Bug fixes
 
 ## v1.0.5

src/lib/components/action-msg/ActionMessages.tsx

@@ -1,4 +1,4 @@
-import type { BlockTransaction, Transaction } from "lib/types";
+import type { Transaction } from "lib/types";
 import { ActionMsgType } from "lib/types";
 import { extractMsgType } from "lib/utils";
 
@@ -7,7 +7,7 @@ import { SingleActionMsg } from "./SingleActionMsg";
 import { SingleMsg } from "./SingleMsg";
 
 interface RenderActionMessagesProps {
-  transaction: Transaction | BlockTransaction;
+  transaction: Transaction;
 }
 
 export const RenderActionMessages = ({

src/lib/components/table/AccordionTx.tsx

@@ -38,7 +38,7 @@ export const AccordionTx = ({
   message,
   allowFurtherAction,
   isSigner = false,
-  accordionSpacing = "206px",
+  accordionSpacing = "260px",
 }: AccordionTxProps) => {
   const [showButton, setShowButton] = useState(false);
   return (

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

@@ -10,6 +10,7 @@ interface TransactionsTableProps {
   isLoading: boolean;
   emptyState: JSX.Element;
   showRelations: boolean;
+  showTimestamp?: boolean;
   showAction?: boolean;
 }
 
@@ -18,20 +19,24 @@ export const TransactionsTable = ({
   isLoading,
   emptyState,
   showRelations,
+  showTimestamp = true,
   showAction = false,
 }: TransactionsTableProps) => {
   if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
-  const templateColumns = `150px 40px minmax(360px, 1fr) ${
+  const templateColumns = `25px 180px 40px minmax(360px, 1fr) ${
     showRelations ? "100px " : ""
-  }max(150px) max(220px) ${showAction ? "100px " : ""}60px`;
+  }max(160px) ${showTimestamp ? "max(220px) " : ""}${
+    showAction ? "100px " : ""
+  }`;
 
   return (
     <TableContainer>
       <TransactionsTableHeader
         templateColumns={templateColumns}
         showRelations={showRelations}
+        showTimestamp={showTimestamp}
         showAction={showAction}
       />
       {transactions.map((transaction) => (
@@ -40,6 +45,7 @@ export const TransactionsTable = ({
           transaction={transaction}
           templateColumns={templateColumns}
           showRelations={showRelations}
+          showTimestamp={showTimestamp}
           showAction={showAction}
         />
       ))}

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

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

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

@@ -1,4 +1,12 @@
-import { Flex, Text, Grid, useDisclosure, Tag, Box } from "@chakra-ui/react";
+import {
+  Flex,
+  Text,
+  Grid,
+  useDisclosure,
+  Tag,
+  Box,
+  Badge,
+} from "@chakra-ui/react";
 
 import { AccordionTx } from "../AccordionTx";
 import { TableRow } from "../tableComponents";
@@ -15,13 +23,15 @@ interface TransactionsTableRowProps {
   transaction: Transaction;
   templateColumns: string;
   showRelations: boolean;
+  showTimestamp: boolean;
   showAction: boolean;
 }
 
 export const TransactionsTableRow = ({
   transaction,
   templateColumns,
   showRelations,
+  showTimestamp,
   showAction,
 }: TransactionsTableRowProps) => {
   const { isOpen, onToggle } = useDisclosure();
@@ -37,12 +47,28 @@ export const TransactionsTableRow = ({
         transition="all .25s ease-in-out"
         cursor={isAccordion ? "pointer" : "default"}
       >
+        <TableRow pl={2}>
+          {isAccordion && (
+            <CustomIcon
+              name="chevron-down"
+              transform={isOpen ? "rotate(0)" : "rotate(-90deg)"}
+              transition="all .25s ease-in-out"
+            />
+          )}
+        </TableRow>
         <TableRow>
-          <ExplorerLink
-            value={transaction.hash.toLocaleUpperCase()}
-            type="tx_hash"
-            showCopyOnHover
-          />
+          <>
+            <ExplorerLink
+              value={transaction.hash.toLocaleUpperCase()}
+              type="tx_hash"
+              showCopyOnHover
+            />
+            {transaction.messages.length > 1 && (
+              <Badge variant="lilac" ml="6px">
+                {transaction.messages.length}
+              </Badge>
+            )}
+          </>
         </TableRow>
         <TableRow>
           {transaction.success ? (
@@ -76,29 +102,22 @@ export const TransactionsTableRow = ({
           />
         </TableRow>
 
-        <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>
+        {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>
+        )}
 
         {showAction && (
           <TableRow>
             <FurtherActionButton transaction={transaction} />
           </TableRow>
         )}
-
-        <TableRow>
-          {isAccordion && (
-            <CustomIcon
-              name={isOpen ? "chevron-up" : "chevron-down"}
-              color="pebble.600"
-            />
-          )}
-        </TableRow>
       </Grid>
       {isAccordion && (
         <Grid w="full" py={4} hidden={!isOpen}>

src/lib/gql/gql.ts

@@ -71,7 +71,7 @@ const documents = {
     types.GetTxsDocument,
   "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n":
     types.GetTxsCountDocument,
-  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
+  "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n":
     types.GetBlockTransactionsByHeightQueryDocument,
   "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetBlockTransactionCountByHeightQueryDocument,
@@ -180,8 +180,8 @@ export function graphql(
   source: "\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCount {\n    transactions(limit: 1, order_by: { id: desc }) {\n      id\n    }\n  }\n"];
 export function graphql(
-  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
-): typeof documents["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      hash\n      success\n      messages\n      account {\n        address\n      }\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
+  source: "\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"
+): typeof documents["\n  query getBlockTransactionsByHeightQuery(\n    $limit: Int!\n    $offset: Int!\n    $height: Int!\n  ) {\n    transactions(\n      limit: $limit\n      offset: $offset\n      where: { block_height: { _eq: $height } }\n      order_by: { id: asc }\n    ) {\n      block {\n        height\n        timestamp\n      }\n      account {\n        address\n      }\n      hash\n      success\n      messages\n      is_clear_admin\n      is_execute\n      is_ibc\n      is_instantiate\n      is_migrate\n      is_send\n      is_store_code\n      is_update_admin\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTransactionCountByHeightQuery($height: Int!) {\n    transactions_aggregate(where: { block_height: { _eq: $height } }) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];

src/lib/gql/graphql.ts

@@ -12751,6 +12751,7 @@ export type GetBlockTransactionsByHeightQueryQuery = {
     is_send: boolean;
     is_store_code: boolean;
     is_update_admin: boolean;
+    block: { __typename?: "blocks"; height: number; timestamp: any };
     account: { __typename?: "accounts"; address: string };
   }>;
 };
@@ -17197,9 +17198,23 @@ export const GetBlockTransactionsByHeightQueryDocument = {
             selectionSet: {
               kind: "SelectionSet",
               selections: [
-                { kind: "Field", name: { kind: "Name", value: "hash" } },
-                { kind: "Field", name: { kind: "Name", value: "success" } },
-                { kind: "Field", name: { kind: "Name", value: "messages" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "block" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "height" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "timestamp" },
+                      },
+                    ],
+                  },
+                },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "account" },
@@ -17213,6 +17228,9 @@ export const GetBlockTransactionsByHeightQueryDocument = {
                     ],
                   },
                 },
+                { kind: "Field", name: { kind: "Name", value: "hash" } },
+                { kind: "Field", name: { kind: "Name", value: "success" } },
+                { kind: "Field", name: { kind: "Name", value: "messages" } },
                 {
                   kind: "Field",
                   name: { kind: "Name", value: "is_clear_admin" },

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

@@ -0,0 +1,78 @@
+import type { ChangeEvent } from "react";
+
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+import { EmptyState } from "lib/components/state";
+import { TransactionsTable } from "lib/components/table";
+import {
+  useTxsByBlockHeightPagination,
+  useTxsCountByBlockHeight,
+} from "lib/services/txService";
+
+const scrollComponentId = "block_tx_table_header";
+
+interface BlockTxsTableProps {
+  height: number;
+}
+
+export const BlockTxsTable = ({ height }: BlockTxsTableProps) => {
+  const { data: blockTxsCount = 0 } = useTxsCountByBlockHeight(height);
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: blockTxsCount,
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data: blockTxs, isLoading: isBlockTxsLoading } =
+    useTxsByBlockHeightPagination(height, pageSize, offset);
+
+  const onPageChange = (nextPage: number) => {
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+      <TransactionsTable
+        transactions={blockTxs}
+        isLoading={isBlockTxsLoading}
+        emptyState={
+          <EmptyState
+            imageVariant="empty"
+            message="There are no submitted transactions in this block"
+            withBorder
+          />
+        }
+        showRelations={false}
+        showTimestamp={false}
+      />
+      {blockTxsCount > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={blockTxsCount}
+          scrollComponentId={scrollComponentId}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
+    </>
+  );
+};

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

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