feat(pages): create transaction list page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#271](https://github.com/alleslabs/celatone-frontend/pull/271) Create transaction list page
 - [#245](https://github.com/alleslabs/celatone-frontend/pull/245) Add amplitude for account detail page
 - [#232](https://github.com/alleslabs/celatone-frontend/pull/232) Add delegation data and section for the account detail page
 - [#261](https://github.com/alleslabs/celatone-frontend/pull/261) Add Relation column to transaction tables and refactor transaction table components

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

@@ -78,16 +78,10 @@ export const TransactionsTableRow = ({
 
         <TableRow>
           <Flex direction="column" gap={1}>
-            {transaction.created ? (
-              <>
-                <Text variant="body3">{formatUTC(transaction.created)}</Text>
-                <Text variant="body3" color="text.dark">
-                  {`(${dateFromNow(transaction.created)})`}
-                </Text>
-              </>
-            ) : (
-              <Text variant="body3">N/A</Text>
-            )}
+            <Text variant="body3">{formatUTC(transaction.created)}</Text>
+            <Text variant="body3" color="text.dark">
+              {`(${dateFromNow(transaction.created)})`}
+            </Text>
           </Flex>
         </TableRow>
 

src/lib/gql/gql.ts

@@ -59,6 +59,10 @@ const documents = {
     types.GetTxsByAddressPaginationDocument,
   "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n":
     types.GetTxsCountByAddressDocument,
+  "\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\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.GetTxsDocument,
+  "\n  query getTxsCount {\n    transactions_aggregate {\n      aggregate {\n        count\n      }\n    }\n  }\n":
+    types.GetTxsCountDocument,
 };
 
 export function graphql(
@@ -145,6 +149,12 @@ export function graphql(
 export function graphql(
   source: "\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"
 ): typeof documents["\n  query getTxsCountByAddress($expression: account_transactions_bool_exp) {\n    account_transactions_aggregate(where: $expression) {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
+export function graphql(
+  source: "\n  query getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\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 getTxs($offset: Int!, $pageSize: Int!) {\n    transactions(\n      order_by: { block_height: desc }\n      offset: $offset\n      limit: $pageSize\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 getTxsCount {\n    transactions_aggregate {\n      aggregate {\n        count\n      }\n    }\n  }\n"
+): typeof documents["\n  query getTxsCount {\n    transactions_aggregate {\n      aggregate {\n        count\n      }\n    }\n  }\n"];
 
 export function graphql(source: string): unknown;
 export function graphql(source: string) {

src/lib/gql/graphql.ts

@@ -11459,6 +11459,44 @@ export type GetTxsCountByAddressQuery = {
   };
 };
 
+export type GetTxsQueryVariables = Exact<{
+  offset: Scalars["Int"];
+  pageSize: Scalars["Int"];
+}>;
+
+export type GetTxsQuery = {
+  __typename?: "query_root";
+  transactions: Array<{
+    __typename?: "transactions";
+    hash: any;
+    success: boolean;
+    messages: any;
+    is_clear_admin: boolean;
+    is_execute: boolean;
+    is_ibc: boolean;
+    is_instantiate: boolean;
+    is_migrate: boolean;
+    is_send: boolean;
+    is_store_code: boolean;
+    is_update_admin: boolean;
+    block: { __typename?: "blocks"; height: number; timestamp: any };
+    account: { __typename?: "accounts"; address: string };
+  }>;
+};
+
+export type GetTxsCountQueryVariables = Exact<{ [key: string]: never }>;
+
+export type GetTxsCountQuery = {
+  __typename?: "query_root";
+  transactions_aggregate: {
+    __typename?: "transactions_aggregate";
+    aggregate?: {
+      __typename?: "transactions_aggregate_fields";
+      count: number;
+    } | null;
+  };
+};
+
 export const GetBlockTimestampByHeightQueryDocument = {
   kind: "Document",
   definitions: [
@@ -15264,3 +15302,170 @@ export const GetTxsCountByAddressDocument = {
   GetTxsCountByAddressQuery,
   GetTxsCountByAddressQueryVariables
 >;
+export const GetTxsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getTxs" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "offset" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "pageSize" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: { kind: "NamedType", name: { kind: "Name", value: "Int" } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "transactions" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "order_by" },
+                value: {
+                  kind: "ObjectValue",
+                  fields: [
+                    {
+                      kind: "ObjectField",
+                      name: { kind: "Name", value: "block_height" },
+                      value: { kind: "EnumValue", value: "desc" },
+                    },
+                  ],
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "offset" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "offset" },
+                },
+              },
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "limit" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "pageSize" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  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" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "address" },
+                      },
+                    ],
+                  },
+                },
+                { 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" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "is_execute" } },
+                { kind: "Field", name: { kind: "Name", value: "is_ibc" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_instantiate" },
+                },
+                { kind: "Field", name: { kind: "Name", value: "is_migrate" } },
+                { kind: "Field", name: { kind: "Name", value: "is_send" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_store_code" },
+                },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "is_update_admin" },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetTxsQuery, GetTxsQueryVariables>;
+export const GetTxsCountDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getTxsCount" },
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "transactions_aggregate" },
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "aggregate" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "count" } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetTxsCountQuery, GetTxsCountQueryVariables>;

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

@@ -0,0 +1,79 @@
+import type { ChangeEvent } from "react";
+import { useEffect } from "react";
+
+import { useChainId } from "lib/app-provider";
+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 { useTxs, useTxsCount } from "lib/services/txService";
+
+interface TxsTableProps {
+  isViewMore: boolean;
+}
+
+export const TxsTable = ({ isViewMore }: TxsTableProps) => {
+  const chainId = useChainId();
+  const { data: countTxs = 0 } = useTxsCount();
+
+  const {
+    pagesQuantity,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    total: countTxs,
+    initialState: {
+      pageSize: isViewMore ? 5 : 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data: txs, isLoading } = useTxs(offset, pageSize);
+
+  const onPageChange = (nextPage: number) => {
+    setCurrentPage(nextPage);
+  };
+
+  const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const size = Number(e.target.value);
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  useEffect(() => {
+    if (!isViewMore) setPageSize(10);
+    setCurrentPage(1);
+  }, [chainId, isViewMore, setCurrentPage, setPageSize]);
+  return (
+    <>
+      <TransactionsTable
+        transactions={txs}
+        isLoading={isLoading}
+        emptyState={
+          <EmptyState
+            withBorder
+            imageVariant="empty"
+            message="There are no transactions in this network."
+          />
+        }
+        showAction={false}
+        showRelations={false}
+      />
+      {!isViewMore && countTxs > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={countTxs}
+          pageSize={pageSize}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
+      )}
+    </>
+  );
+};

src/lib/pages/txs/index.tsx

@@ -0,0 +1,21 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import PageContainer from "lib/components/PageContainer";
+
+import { TxsTable } from "./components/TxsTable";
+
+const Txs = () => (
+  <PageContainer>
+    <Flex direction="column" gap={2} mb={10}>
+      <Heading variant="h5" as="h5">
+        Transactions
+      </Heading>
+      <Text variant="body2" color="text.dark">
+        This page displays all transactions in this network sorted by recency
+      </Text>
+    </Flex>
+    <TxsTable isViewMore={false} />
+  </PageContainer>
+);
+
+export default Txs;