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

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#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
 
 ### Improvements

src/lib/app-provider/env.ts

@@ -98,6 +98,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/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 />}
+      lite={<PastTxsLite />}
+      sequencer={<PastTxsSequencer />}
+    />
+  );
 };
 
 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>
+  );
+};

src/lib/services/tx/index.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
 import { useCallback } from "react";
 
@@ -17,7 +17,6 @@ import {
   useLcdEndpoint,
   useMoveConfig,
   useTierConfig,
-  useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
 import { createQueryFnWithTimeout } from "lib/query-utils";
@@ -49,6 +48,10 @@ import {
   getTxsByContractAddressLcd,
   getTxsByHashLcd,
 } from "./lcd";
+import {
+  getTxsByAccountAddressSequencer,
+  getTxsByHashSequencer,
+} from "./sequencer";
 
 export const useTxData = (
   txHash: Option<string>,
@@ -290,24 +293,31 @@ export const useTxsByAddressLcd = (
   options: UseQueryOptions<TxsResponse> = {}
 ) => {
   const endpoint = useLcdEndpoint();
-  const { validateContractAddress } = useValidateAddress();
   const {
     chain: { bech32_prefix: prefix },
   } = useCurrentChain();
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   const queryfn = useCallback(async () => {
     const txs = await (async () => {
-      if (search && isTxHash(search)) return getTxsByHashLcd(endpoint, search);
-
-      if (search && !validateContractAddress(search))
-        return getTxsByContractAddressLcd(
-          endpoint,
-          search as BechAddr32,
-          limit,
-          offset
+      if (search && isTxHash(search)) {
+        const txsByHash = await getTxsByHashLcd(endpoint, search);
+
+        if (txsByHash.total === 0)
+          throw new Error("address is not equal to sender (getTxsByHashLcd)");
+
+        const tx = txsByHash.items[0];
+        const sender = convertAccountPubkeyToAccountAddress(
+          tx.signerPubkey,
+          prefix
         );
 
-      if (!address)
+        if (address === sender) return txsByHash;
+
+        throw new Error("address is not equal to sender (getTxsByHashLcd)");
+      }
+
+      if (search || !address)
         throw new Error("address is undefined (useTxsByAddressLcd)");
       return getTxsByAccountAddressLcd(endpoint, address, limit, offset);
     })();
@@ -319,15 +329,7 @@ export const useTxsByAddressLcd = (
       })),
       total: txs.total,
     };
-  }, [
-    address,
-    endpoint,
-    limit,
-    offset,
-    prefix,
-    search,
-    validateContractAddress,
-  ]);
+  }, [address, endpoint, limit, offset, prefix, search]);
 
   return useQuery<TxsResponse>(
     [
@@ -343,4 +345,80 @@ export const useTxsByAddressLcd = (
   );
 };
 
+export const useTxsByAddressSequencer = (
+  address: Option<BechAddr20>,
+  search: Option<string>
+) => {
+  const endpoint = useLcdEndpoint();
+  const {
+    chain: { bech32_prefix: prefix },
+  } = useCurrentChain();
+
+  const queryfn = useCallback(
+    async (pageParam: Option<string>) => {
+      return (async () => {
+        if (search && isTxHash(search)) {
+          const txsByHash = await getTxsByHashSequencer(endpoint, search);
+
+          if (txsByHash.pagination.total === 0)
+            throw new Error(
+              "address is not equal to sender (useTxsByAddressSequncer)"
+            );
+
+          const tx = txsByHash.items[0];
+          const sender = convertAccountPubkeyToAccountAddress(
+            tx.signerPubkey,
+            prefix
+          );
+
+          if (address === sender) return txsByHash;
+
+          const findAddressFromEvents = tx.events?.some((event) =>
+            event.attributes.some((attr) => attr.value === address)
+          );
+
+          if (findAddressFromEvents) return txsByHash;
+
+          throw new Error(
+            "address is not equal to sender (useTxsByAddressSequncer)"
+          );
+        }
+
+        if (search || !address)
+          throw new Error("address is undefined (useTxsByAddressSequncer)");
+
+        return getTxsByAccountAddressSequencer(endpoint, address, pageParam);
+      })();
+    },
+    [address, endpoint, prefix, search]
+  );
+
+  const { data, ...rest } = useInfiniteQuery(
+    [CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_SEQUENCER, endpoint, address, search],
+    ({ pageParam }) => queryfn(pageParam),
+    {
+      getNextPageParam: (lastPage) => lastPage.pagination.nextKey ?? undefined,
+      refetchOnWindowFocus: false,
+    }
+  );
+
+  return {
+    ...rest,
+    data: data?.pages.flatMap((page) =>
+      page.items.map((item) => {
+        const sender = convertAccountPubkeyToAccountAddress(
+          item.signerPubkey,
+          prefix
+        );
+
+        return {
+          ...item,
+          sender,
+          isSigner: sender === address,
+        };
+      })
+    ),
+  };
+};
+
 export * from "./gql";