[CFE-533]: Feat(pages) - add past txs with sequencer

CHANGELOG.md

@@ -39,6 +39,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#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
 - [#1005](https://github.com/alleslabs/celatone-frontend/pull/1005) Support recent blocks, block details in sequencer tier
 
 ### Improvements

src/lib/app-provider/env.ts

@@ -100,6 +100,7 @@ export enum CELATONE_QUERY_KEYS {
   TXS_BY_ADDRESS = "CELATONE_QUERY_TXS_BY_ADDRESS",
   TXS_COUNT_BY_ADDRESS = "CELATONE_QUERY_TXS_COUNT_BY_ADDRESS",
   TXS_BY_ADDRESS_LCD = "CELATONE_QUERY_TXS_BY_ADDRESS_LCD",
+  TXS_BY_ADDRESS_SEQUENCER = "CELATONE_QUERY_TXS_BY_ADDRESS_SEQUENCER",
   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",

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

@@ -48,7 +48,15 @@ export const SingleMsg = ({
             token={token}
             // TODO: add `ampCopierSection` later
           />
-          {index < tokens.length - 2 ? <Text>,</Text> : <Text ml={1}>and</Text>}
+          {tokens.length > 1 && (
+            <>
+              {index < tokens.length - 2 ? (
+                <Text>,</Text>
+              ) : (
+                <Text ml={1}>and</Text>
+              )}
+            </>
+          )}
         </Flex>
       ))}
       {/* Tags  */}

src/lib/pages/account-details/components/tables/txs/index.tsx

@@ -1,12 +1,14 @@
 import { TierSwitcher } from "lib/components/TierSwitcher";
 
-import { TxsTableFull } from "./Full";
-import { TxsTableLite } from "./Lite";
+import { TxsTableFull } from "./full";
+import { TxsTableLite } from "./lite";
+import { TxsTableSequencer } from "./sequencer";
 import type { TxsTableProps } from "./types";
 
 export const TxsTable = (props: TxsTableProps) => (
   <TierSwitcher
     full={<TxsTableFull {...props} />}
+    sequencer={<TxsTableSequencer {...props} />}
     lite={<TxsTableLite {...props} />}
   />
 );

src/lib/pages/account-details/components/tables/txs/sequencer.tsx

@@ -0,0 +1,83 @@
+import { Box, Flex } from "@chakra-ui/react";
+
+import { useMobile, useTierConfig } from "lib/app-provider";
+import { LoadNext } from "lib/components/LoadNext";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import {
+  MobileTitle,
+  TableTitle,
+  TransactionsTable,
+  ViewMore,
+} from "lib/components/table";
+import { useTxsByAddressSequencer } from "lib/services/tx";
+import type { BechAddr20 } from "lib/types";
+
+import type { TxsTableProps } from "./types";
+
+export const TxsTableSequencer = ({ address, onViewMore }: TxsTableProps) => {
+  const isMobile = useMobile();
+  const { isFullTier } = useTierConfig();
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useTxsByAddressSequencer(
+    address as BechAddr20,
+    undefined,
+    onViewMore ? 5 : 10
+  );
+
+  const isMobileOverview = isMobile && !!onViewMore;
+
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Transactions"
+          count={undefined}
+          onViewMore={onViewMore}
+          showCount={false}
+        />
+      ) : (
+        <Flex direction="column" gap={6}>
+          <TableTitle title="Transactions" mb={0} showCount={isFullTier} />
+          {!isMobileOverview && (
+            <TransactionsTable
+              transactions={data}
+              isLoading={isLoading}
+              emptyState={
+                error ? (
+                  <ErrorFetching dataName="transactions" />
+                ) : (
+                  <EmptyState
+                    withBorder
+                    imageVariant="empty"
+                    message="There are no transactions on this account, or they have been pruned from the LCD."
+                  />
+                )
+              }
+              showRelations
+            />
+          )}
+          {hasNextPage && (
+            <>
+              {onViewMore ? (
+                <ViewMore onClick={onViewMore} />
+              ) : (
+                <LoadNext
+                  text="Load more 10 transactions"
+                  fetchNextPage={fetchNextPage}
+                  isFetchingNextPage={isFetchingNextPage}
+                />
+              )}
+            </>
+          )}
+        </Flex>
+      )}
+    </Box>
+  );
+};

src/lib/pages/past-txs/index.tsx

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

src/lib/pages/past-txs/lite.tsx

@@ -2,7 +2,7 @@ import { Flex, Heading } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 import { useEffect, useState } from "react";
 
-import { useCurrentChain, useWasmConfig } from "lib/app-provider";
+import { useCurrentChain } from "lib/app-provider";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
 import { Pagination } from "lib/components/pagination";
@@ -16,22 +16,18 @@ import { useTxsByAddressLcd } from "lib/services/tx";
 
 interface PastTxsLiteTransactionsTableWithWalletEmptyStateProps {
   search: string;
-  isWasmEnabled: boolean;
   error: unknown;
 }
 
 const PastTxsLiteTransactionsTableWithWalletEmptyState = ({
   search,
-  isWasmEnabled,
   error,
 }: PastTxsLiteTransactionsTableWithWalletEmptyStateProps) => {
   if (search.trim().length > 0)
     return (
       <EmptyState
         imageVariant="not-found"
-        message={`No past transaction matches found with your input. You can search with transaction hash${
-          isWasmEnabled ? ", and contract address" : ""
-        }.`}
+        message="No past transaction matches found with your input. You can search with transaction hash"
         withBorder
       />
     );
@@ -48,7 +44,6 @@ const PastTxsLiteTransactionsTableWithWalletEmptyState = ({
 };
 
 export const PastTxsLite = () => {
-  const isWasmEnabled = useWasmConfig({ shouldRedirect: false }).enabled;
   const {
     address,
     chain: { chain_id: chainId },
@@ -113,9 +108,7 @@ export const PastTxsLite = () => {
       </Flex>
       <Flex my={8}>
         <InputWithIcon
-          placeholder={`Search with Transaction Hash${
-            isWasmEnabled ? " or Contract Address" : ""
-          }`}
+          placeholder="Search with Transaction Hash"
           value={search}
           onChange={handleOnSearchChange}
           size={{ base: "md", md: "lg" }}
@@ -128,7 +121,6 @@ export const PastTxsLite = () => {
         emptyState={
           <PastTxsLiteTransactionsTableWithWalletEmptyState
             search={search}
-            isWasmEnabled={isWasmEnabled}
             error={error}
           />
         }

src/lib/pages/past-txs/sequencer.tsx

@@ -0,0 +1,111 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+import { useCurrentChain } from "lib/app-provider";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { LoadNext } from "lib/components/LoadNext";
+import PageContainer from "lib/components/PageContainer";
+import { CelatoneSeo } from "lib/components/Seo";
+import { EmptyState, ErrorFetching } from "lib/components/state";
+import { TransactionsTableWithWallet } from "lib/components/table";
+import { UserDocsLink } from "lib/components/UserDocsLink";
+import { useDebounce } from "lib/hooks";
+import { useTxsByAddressSequencer } from "lib/services/tx";
+
+interface PastTxsSequencerTransactionsTableWithWalletEmptyStateProps {
+  search: string;
+  error: unknown;
+}
+
+const PastTxsSequencerTransactionsTableWithWalletEmptyState = ({
+  search,
+  error,
+}: PastTxsSequencerTransactionsTableWithWalletEmptyStateProps) => {
+  if (search.trim().length > 0)
+    return (
+      <EmptyState
+        imageVariant="not-found"
+        message="No past transaction matches found with your input. You can search with transaction hash"
+        withBorder
+      />
+    );
+
+  if (error) return <ErrorFetching dataName="transactions" />;
+
+  return (
+    <EmptyState
+      imageVariant="empty"
+      message="Past transactions will display here."
+      withBorder
+    />
+  );
+};
+
+export const PastTxsSequencer = () => {
+  const {
+    address,
+    chain: { chain_id: chainId },
+  } = useCurrentChain();
+
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search);
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useTxsByAddressSequencer(address, debouncedSearch);
+
+  useEffect(() => {
+    setSearch("");
+  }, [chainId, address]);
+
+  return (
+    <PageContainer>
+      <CelatoneSeo pageName="Past Transactions" />
+      <Flex justifyContent="space-between" alignItems="center">
+        <Heading
+          variant="h5"
+          as="h5"
+          minH="36px"
+          display="flex"
+          alignItems="center"
+        >
+          Past Transactions
+        </Heading>
+        <UserDocsLink isButton href="general/transactions/past-txs" />
+      </Flex>
+      <Flex my={8}>
+        <InputWithIcon
+          placeholder="Search with Transaction Hash"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          size={{ base: "md", md: "lg" }}
+          amptrackSection="past-txs-search"
+        />
+      </Flex>
+      <TransactionsTableWithWallet
+        transactions={data}
+        isLoading={isLoading}
+        emptyState={
+          <PastTxsSequencerTransactionsTableWithWalletEmptyState
+            search={search}
+            error={error}
+          />
+        }
+        showActions={false}
+        showRelations
+      />
+      {hasNextPage && (
+        <LoadNext
+          text="Load more 10 transactions"
+          fetchNextPage={fetchNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+        />
+      )}
+    </PageContainer>
+  );
+};