From a548a074e6995b9d13e51988dea640f085626f90 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Fri, 5 Jul 2024 12:10:16 +0700
Subject: [PATCH 01/18] feat(pages): add past txs with sequencer

---
 src/lib/app-provider/env.ts          |   1 +
 src/lib/pages/past-txs/index.tsx     |   9 +-
 src/lib/pages/past-txs/sequencer.tsx | 155 +++++++++++++++++++++++++++
 src/lib/services/tx/index.ts         |  69 +++++++++++-
 src/lib/services/tx/lcd.ts           |   7 +-
 src/lib/services/tx/sequencer.ts     |  25 +++++
 src/lib/services/types/tx.ts         |  14 +++
 7 files changed, 275 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/pages/past-txs/sequencer.tsx
 create mode 100644 src/lib/services/tx/sequencer.ts

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index 4ce819e8a..39afe8556 100644
--- a/src/lib/app-provider/env.ts
+++ b/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",
diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 9c366a582..079767e0f 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/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;
diff --git a/src/lib/pages/past-txs/sequencer.tsx b/src/lib/pages/past-txs/sequencer.tsx
new file mode 100644
index 000000000..3b4dca226
--- /dev/null
+++ b/src/lib/pages/past-txs/sequencer.tsx
@@ -0,0 +1,155 @@
+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 InputWithIcon from "lib/components/InputWithIcon";
+import PageContainer from "lib/components/PageContainer";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+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;
+  isWasmEnabled: boolean;
+  error: unknown;
+}
+
+const PastTxsSequencerTransactionsTableWithWalletEmptyState = ({
+  search,
+  isWasmEnabled,
+  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${
+          isWasmEnabled ? ", and contract address" : ""
+        }.`}
+        withBorder
+      />
+    );
+
+  if (error) return <ErrorFetching dataName="transactions" />;
+
+  return (
+    <EmptyState
+      imageVariant="empty"
+      message="Past transactions will display here."
+      withBorder
+    />
+  );
+};
+
+export const PastTxsSequencer = () => {
+  const isWasmEnabled = useWasmConfig({ shouldRedirect: false }).enabled;
+  const {
+    address,
+    chain: { chain_id: chainId },
+  } = useCurrentChain();
+
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search);
+
+  const {
+    pagesQuantity,
+    setTotalData,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data, isLoading, error } = useTxsByAddressSequencer(
+    address,
+    debouncedSearch,
+    pageSize,
+    offset,
+    {
+      enabled: !!address,
+      onSuccess: ({ total }) => setTotalData(total),
+    }
+  );
+
+  const handleOnSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+
+  useEffect(() => {
+    setSearch("");
+  }, [chainId, address]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch, setCurrentPage]);
+
+  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${
+            isWasmEnabled ? " or Contract Address" : ""
+          }`}
+          value={search}
+          onChange={handleOnSearchChange}
+          size={{ base: "md", md: "lg" }}
+          amptrackSection="past-txs-search"
+        />
+      </Flex>
+      <TransactionsTableWithWallet
+        transactions={data?.items}
+        isLoading={isLoading}
+        emptyState={
+          <PastTxsSequencerTransactionsTableWithWalletEmptyState
+            search={search}
+            isWasmEnabled={isWasmEnabled}
+            error={error}
+          />
+        }
+        showActions={false}
+        showRelations={false}
+      />
+      {!!data && data.total > 10 && (
+        <Pagination
+          currentPage={currentPage}
+          pagesQuantity={pagesQuantity}
+          offset={offset}
+          totalData={data.total}
+          pageSize={pageSize}
+          onPageChange={(nextPage) => setCurrentPage(nextPage)}
+          onPageSizeChange={(e) => {
+            const size = Number(e.target.value);
+            setPageSize(size);
+            setCurrentPage(1);
+          }}
+        />
+      )}
+    </PageContainer>
+  );
+};
diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index e2b4f4f96..1b8c43d77 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -49,6 +49,7 @@ import {
   getTxsByContractAddressLcd,
   getTxsByHashLcd,
 } from "./lcd";
+import { getTxsByAccountAddressSequencer } from "./sequencer";
 
 export const useTxData = (
   txHash: Option<string>,
@@ -304,7 +305,8 @@ export const useTxsByAddressLcd = (
           endpoint,
           search as BechAddr32,
           limit,
-          offset
+          offset,
+          address
         );
 
       if (!address)
@@ -343,4 +345,69 @@ export const useTxsByAddressLcd = (
   );
 };
 
+// TODO: Check about private key / public key to account addr
+
+export const useTxsByAddressSequencer = (
+  address: Option<BechAddr20>,
+  search: Option<string>,
+  limit: number,
+  offset: number,
+  options: UseQueryOptions<TxsResponse> = {}
+) => {
+  const endpoint = useLcdEndpoint();
+  const { validateContractAddress } = useValidateAddress();
+  const {
+    chain: { bech32_prefix: prefix },
+  } = useCurrentChain();
+
+  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,
+          address
+        );
+
+      if (!address)
+        throw new Error("address is undefined (useTxsByAddressSequncer)");
+
+      return getTxsByAccountAddressSequencer(endpoint, address, limit, offset);
+    })();
+
+    return {
+      items: txs.items.map<Transaction>((tx) => ({
+        ...tx,
+        sender: convertAccountPubkeyToAccountAddress(tx.signerPubkey, prefix),
+      })),
+      total: txs.total,
+    };
+  }, [
+    address,
+    endpoint,
+    limit,
+    offset,
+    prefix,
+    search,
+    validateContractAddress,
+  ]);
+
+  return useQuery<TxsResponse>(
+    [
+      CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_SEQUENCER,
+      endpoint,
+      address,
+      search,
+      limit,
+      offset,
+    ],
+    createQueryFnWithTimeout(queryfn, 20000),
+    { ...options, retry: 1, refetchOnWindowFocus: false }
+  );
+};
+
 export * from "./gql";
diff --git a/src/lib/services/tx/lcd.ts b/src/lib/services/tx/lcd.ts
index ca5b19a47..ef126c1aa 100644
--- a/src/lib/services/tx/lcd.ts
+++ b/src/lib/services/tx/lcd.ts
@@ -20,13 +20,14 @@ export const getTxsByHashLcd = async (endpoint: string, txHash: string) =>
 
 export const getTxsByContractAddressLcd = async (
   endpoint: string,
-  address: BechAddr32,
+  contractAddress: BechAddr32,
   limit: number,
-  offset: number
+  offset: number,
+  sender?: BechAddr20
 ) =>
   axios
     .get(
-      `${endpoint}/cosmos/tx/v1beta1/txs?events=wasm._contract_address=%27${encodeURI(address)}%27`,
+      `${endpoint}/cosmos/tx/v1beta1/txs?events=wasm._contract_address=%27${encodeURI(contractAddress)}%27&events=message.sender=%27${sender ? encodeURI(sender) : ""}%27`,
       {
         params: {
           order_by: 2,
diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
new file mode 100644
index 000000000..57ec601f2
--- /dev/null
+++ b/src/lib/services/tx/sequencer.ts
@@ -0,0 +1,25 @@
+import axios from "axios";
+
+import { zTxsByAddressResponseSequencer } from "../types";
+import type { BechAddr20 } from "lib/types";
+import { parseWithError } from "lib/utils";
+
+export const getTxsByAccountAddressSequencer = async (
+  endpoint: string,
+  address: BechAddr20,
+  limit: number,
+  offset: number
+) =>
+  axios
+    .get(
+      `${endpoint}/indexer/tx/v1/txs/by_account/${encodeURIComponent(address)}`,
+      {
+        params: {
+          "pagination.limit": limit,
+          "pagination.offset": offset,
+          "pagination.count_total": true,
+          "pagination.reverse": true,
+        },
+      }
+    )
+    .then(({ data }) => parseWithError(zTxsByAddressResponseSequencer, data));
diff --git a/src/lib/services/types/tx.ts b/src/lib/services/types/tx.ts
index 024cb9e92..4ddba4712 100644
--- a/src/lib/services/types/tx.ts
+++ b/src/lib/services/types/tx.ts
@@ -18,6 +18,7 @@ import {
   zBechAddr,
   zCoin,
   zMessageResponse,
+  zPagination,
   zPubkey,
   zUint8Schema,
   zUtcDate,
@@ -185,6 +186,19 @@ export const zTxsByAddressResponseLcd = z
   }));
 export type TxsByAddressResponseLcd = z.infer<typeof zTxsByAddressResponseLcd>;
 
+export const zTxsByAddressResponseSequencer = z
+  .object({
+    txs: z.array(zTxsResponseItemFromLcd),
+    pagination: zPagination,
+  })
+  .transform<TxsByAddressResponseLcd>((val) => ({
+    items: val.txs,
+    total: val.pagination.total,
+  }));
+export type TxsByAddressResponseSequencer = z.infer<
+  typeof zTxsByAddressResponseSequencer
+>;
+
 export const zTxsByHashResponseLcd = z
   .object({
     tx_response: zTxsResponseItemFromLcd,

From 5b94c437564bfc3eb5cbac64fa7711cc0f6b43c5 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Fri, 5 Jul 2024 12:12:40 +0700
Subject: [PATCH 02/18] docs: update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9fea0a467..4f67d97dd 100644
--- a/CHANGELOG.md
+++ b/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

From 5ce6140dd272dc0eae3e62486032dd14dda8cb46 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Fri, 5 Jul 2024 16:05:58 +0700
Subject: [PATCH 03/18] feat(pages): add past txs sequencer

---
 src/lib/pages/past-txs/lite.tsx      | 14 +---
 src/lib/pages/past-txs/sequencer.tsx | 14 +---
 src/lib/services/tx/index.ts         | 96 ++++++++++++++++------------
 src/lib/services/tx/lcd.ts           | 21 +++---
 src/lib/services/tx/sequencer.ts     | 10 ++-
 src/lib/services/types/tx.ts         | 13 ++++
 src/lib/types/tx/transaction.ts      |  2 +
 7 files changed, 93 insertions(+), 77 deletions(-)

diff --git a/src/lib/pages/past-txs/lite.tsx b/src/lib/pages/past-txs/lite.tsx
index ab7a1cbf0..1bf4e3a05 100644
--- a/src/lib/pages/past-txs/lite.tsx
+++ b/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}
           />
         }
diff --git a/src/lib/pages/past-txs/sequencer.tsx b/src/lib/pages/past-txs/sequencer.tsx
index 3b4dca226..f52b13944 100644
--- a/src/lib/pages/past-txs/sequencer.tsx
+++ b/src/lib/pages/past-txs/sequencer.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 { useTxsByAddressSequencer } from "lib/services/tx";
 
 interface PastTxsSequencerTransactionsTableWithWalletEmptyStateProps {
   search: string;
-  isWasmEnabled: boolean;
   error: unknown;
 }
 
 const PastTxsSequencerTransactionsTableWithWalletEmptyState = ({
   search,
-  isWasmEnabled,
   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${
-          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 PastTxsSequencerTransactionsTableWithWalletEmptyState = ({
 };
 
 export const PastTxsSequencer = () => {
-  const isWasmEnabled = useWasmConfig({ shouldRedirect: false }).enabled;
   const {
     address,
     chain: { chain_id: chainId },
@@ -113,9 +108,7 @@ export const PastTxsSequencer = () => {
       </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 PastTxsSequencer = () => {
         emptyState={
           <PastTxsSequencerTransactionsTableWithWalletEmptyState
             search={search}
-            isWasmEnabled={isWasmEnabled}
             error={error}
           />
         }
diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index 1b8c43d77..230cbb061 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -17,7 +17,6 @@ import {
   useLcdEndpoint,
   useMoveConfig,
   useTierConfig,
-  useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
 import { createQueryFnWithTimeout } from "lib/query-utils";
@@ -49,7 +48,10 @@ import {
   getTxsByContractAddressLcd,
   getTxsByHashLcd,
 } from "./lcd";
-import { getTxsByAccountAddressSequencer } from "./sequencer";
+import {
+  getTxsByAccountAddressSequencer,
+  getTxsByHashSequencer,
+} from "./sequencer";
 
 export const useTxData = (
   txHash: Option<string>,
@@ -291,24 +293,36 @@ 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,
-          address
+      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 === 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 (getTxsByHashLcd)");
+      }
+
       if (!address)
         throw new Error("address is undefined (useTxsByAddressLcd)");
       return getTxsByAccountAddressLcd(endpoint, address, limit, offset);
@@ -321,15 +335,7 @@ export const useTxsByAddressLcd = (
       })),
       total: txs.total,
     };
-  }, [
-    address,
-    endpoint,
-    limit,
-    offset,
-    prefix,
-    search,
-    validateContractAddress,
-  ]);
+  }, [address, endpoint, limit, offset, prefix, search]);
 
   return useQuery<TxsResponse>(
     [
@@ -345,8 +351,6 @@ export const useTxsByAddressLcd = (
   );
 };
 
-// TODO: Check about private key / public key to account addr
-
 export const useTxsByAddressSequencer = (
   address: Option<BechAddr20>,
   search: Option<string>,
@@ -355,23 +359,39 @@ export const useTxsByAddressSequencer = (
   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,
-          address
+      if (search && isTxHash(search)) {
+        const txsByHash = await getTxsByHashSequencer(endpoint, search);
+
+        if (txsByHash.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 (!address)
         throw new Error("address is undefined (useTxsByAddressSequncer)");
@@ -386,15 +406,7 @@ export const useTxsByAddressSequencer = (
       })),
       total: txs.total,
     };
-  }, [
-    address,
-    endpoint,
-    limit,
-    offset,
-    prefix,
-    search,
-    validateContractAddress,
-  ]);
+  }, [address, endpoint, limit, offset, prefix, search]);
 
   return useQuery<TxsResponse>(
     [
diff --git a/src/lib/services/tx/lcd.ts b/src/lib/services/tx/lcd.ts
index ef126c1aa..a6b59f0f2 100644
--- a/src/lib/services/tx/lcd.ts
+++ b/src/lib/services/tx/lcd.ts
@@ -22,20 +22,17 @@ export const getTxsByContractAddressLcd = async (
   endpoint: string,
   contractAddress: BechAddr32,
   limit: number,
-  offset: number,
-  sender?: BechAddr20
+  offset: number
 ) =>
   axios
-    .get(
-      `${endpoint}/cosmos/tx/v1beta1/txs?events=wasm._contract_address=%27${encodeURI(contractAddress)}%27&events=message.sender=%27${sender ? encodeURI(sender) : ""}%27`,
-      {
-        params: {
-          order_by: 2,
-          limit,
-          page: offset / limit + 1,
-        },
-      }
-    )
+    .get(`${endpoint}/cosmos/tx/v1beta1/txs`, {
+      params: {
+        order_by: 2,
+        limit,
+        page: offset / limit + 1,
+        events: `wasm.contract_address='${encodeURI(contractAddress)}'`,
+      },
+    })
     .then(({ data }) => parseWithError(zTxsByAddressResponseLcd, data));
 
 export const getTxsByAccountAddressLcd = async (
diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
index 57ec601f2..d2544873a 100644
--- a/src/lib/services/tx/sequencer.ts
+++ b/src/lib/services/tx/sequencer.ts
@@ -1,6 +1,9 @@
 import axios from "axios";
 
-import { zTxsByAddressResponseSequencer } from "../types";
+import {
+  zTxsByAddressResponseSequencer,
+  zTxsByHashResponseSequencer,
+} from "../types";
 import type { BechAddr20 } from "lib/types";
 import { parseWithError } from "lib/utils";
 
@@ -23,3 +26,8 @@ export const getTxsByAccountAddressSequencer = async (
       }
     )
     .then(({ data }) => parseWithError(zTxsByAddressResponseSequencer, data));
+
+export const getTxsByHashSequencer = async (endpoint: string, txHash: string) =>
+  axios
+    .get(`${endpoint}/indexer/tx/v1/txs/${encodeURI(txHash)}`)
+    .then(({ data }) => parseWithError(zTxsByHashResponseSequencer, data));
diff --git a/src/lib/services/types/tx.ts b/src/lib/services/types/tx.ts
index 4ddba4712..8a090c79c 100644
--- a/src/lib/services/types/tx.ts
+++ b/src/lib/services/types/tx.ts
@@ -172,6 +172,7 @@ export const zTxsResponseItemFromLcd =
       isIbc: false,
       isOpinit: false,
       isInstantiate: false,
+      events: val.events,
     };
   });
 
@@ -208,6 +209,18 @@ export const zTxsByHashResponseLcd = z
     total: 1,
   }));
 
+export const zTxsByHashResponseSequencer = z
+  .object({
+    tx: zTxsResponseItemFromLcd,
+  })
+  .transform((val) => ({
+    items: [val.tx],
+    total: 1,
+  }));
+export type TxsByHashResponseSequencer = z.infer<
+  typeof zTxsByHashResponseSequencer
+>;
+
 export const zTxByHashResponseLcd = z
   .object({
     tx_response: zTxResponse,
diff --git a/src/lib/types/tx/transaction.ts b/src/lib/types/tx/transaction.ts
index f40801df4..4a5b9e5a6 100644
--- a/src/lib/types/tx/transaction.ts
+++ b/src/lib/types/tx/transaction.ts
@@ -1,6 +1,7 @@
 import type { Log } from "@cosmjs/stargate/build/logs";
 import { z } from "zod";
 
+import type { Event } from "lib/services/types";
 import type { BechAddr, Option, Pubkey } from "lib/types";
 
 export enum ActionMsgType {
@@ -39,6 +40,7 @@ export interface Transaction {
   isIbc: boolean;
   isInstantiate: boolean;
   isOpinit: boolean;
+  events?: Event[];
 }
 
 export type TransactionWithSignerPubkey = Omit<Transaction, "sender"> & {

From a71a1920734a426bac9688ffeccaa05dc63eed93 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 12:09:09 +0700
Subject: [PATCH 04/18] feat(utils): remove total coutn

---
 src/lib/services/tx/sequencer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
index d2544873a..5458ca2e2 100644
--- a/src/lib/services/tx/sequencer.ts
+++ b/src/lib/services/tx/sequencer.ts
@@ -20,7 +20,6 @@ export const getTxsByAccountAddressSequencer = async (
         params: {
           "pagination.limit": limit,
           "pagination.offset": offset,
-          "pagination.count_total": true,
           "pagination.reverse": true,
         },
       }

From cc885baaf804f3ff67d17ac8067942ff6bc5bf71 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 15:48:28 +0700
Subject: [PATCH 05/18] feat(pages): support load more cursor base pagination
 txs

---
 src/lib/pages/past-txs/sequencer.tsx |  68 +++++-------------
 src/lib/services/tx/index.ts         | 103 +++++++++++++--------------
 src/lib/services/tx/sequencer.ts     |   9 ++-
 src/lib/services/types/tx.ts         |   9 ++-
 4 files changed, 76 insertions(+), 113 deletions(-)

diff --git a/src/lib/pages/past-txs/sequencer.tsx b/src/lib/pages/past-txs/sequencer.tsx
index f52b13944..07c75b62c 100644
--- a/src/lib/pages/past-txs/sequencer.tsx
+++ b/src/lib/pages/past-txs/sequencer.tsx
@@ -1,12 +1,10 @@
 import { Flex, Heading } from "@chakra-ui/react";
-import type { ChangeEvent } from "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 { Pagination } from "lib/components/pagination";
-import { usePaginator } from "lib/components/pagination/usePaginator";
 import { CelatoneSeo } from "lib/components/Seo";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { TransactionsTableWithWallet } from "lib/components/table";
@@ -53,44 +51,18 @@ export const PastTxsSequencer = () => {
   const debouncedSearch = useDebounce(search);
 
   const {
-    pagesQuantity,
-    setTotalData,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-
-  const { data, isLoading, error } = useTxsByAddressSequencer(
-    address,
-    debouncedSearch,
-    pageSize,
-    offset,
-    {
-      enabled: !!address,
-      onSuccess: ({ total }) => setTotalData(total),
-    }
-  );
-
-  const handleOnSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value);
-  };
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useTxsByAddressSequencer(address, debouncedSearch);
 
   useEffect(() => {
     setSearch("");
   }, [chainId, address]);
 
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [debouncedSearch, setCurrentPage]);
-
   return (
     <PageContainer>
       <CelatoneSeo pageName="Past Transactions" />
@@ -110,13 +82,13 @@ export const PastTxsSequencer = () => {
         <InputWithIcon
           placeholder="Search with Transaction Hash"
           value={search}
-          onChange={handleOnSearchChange}
+          onChange={(e) => setSearch(e.target.value)}
           size={{ base: "md", md: "lg" }}
           amptrackSection="past-txs-search"
         />
       </Flex>
       <TransactionsTableWithWallet
-        transactions={data?.items}
+        transactions={data}
         isLoading={isLoading}
         emptyState={
           <PastTxsSequencerTransactionsTableWithWalletEmptyState
@@ -125,21 +97,13 @@ export const PastTxsSequencer = () => {
           />
         }
         showActions={false}
-        showRelations={false}
+        showRelations
       />
-      {!!data && data.total > 10 && (
-        <Pagination
-          currentPage={currentPage}
-          pagesQuantity={pagesQuantity}
-          offset={offset}
-          totalData={data.total}
-          pageSize={pageSize}
-          onPageChange={(nextPage) => setCurrentPage(nextPage)}
-          onPageSizeChange={(e) => {
-            const size = Number(e.target.value);
-            setPageSize(size);
-            setCurrentPage(1);
-          }}
+      {hasNextPage && (
+        <LoadNext
+          text="Load more 10 transactions"
+          fetchNextPage={fetchNextPage}
+          isFetchingNextPage={isFetchingNextPage}
         />
       )}
     </PageContainer>
diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index 230cbb061..5efdb25f2 100644
--- a/src/lib/services/tx/index.ts
+++ b/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";
 
@@ -353,73 +353,70 @@ export const useTxsByAddressLcd = (
 
 export const useTxsByAddressSequencer = (
   address: Option<BechAddr20>,
-  search: Option<string>,
-  limit: number,
-  offset: number,
-  options: UseQueryOptions<TxsResponse> = {}
+  search: Option<string>
 ) => {
   const endpoint = useLcdEndpoint();
   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)) {
-        const txsByHash = await getTxsByHashSequencer(endpoint, search);
-
-        if (txsByHash.total === 0)
-          throw new Error(
-            "address is not equal to sender (useTxsByAddressSequncer)"
+  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
           );
 
-        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 (address === sender) return txsByHash;
 
-        if (findAddressFromEvents) return txsByHash;
+          const findAddressFromEvents = tx.events?.some((event) =>
+            event.attributes.some((attr) => attr.value === address)
+          );
 
-        throw new Error(
-          "address is not equal to sender (useTxsByAddressSequncer)"
-        );
-      }
+          if (findAddressFromEvents) return txsByHash;
 
-      if (!address)
-        throw new Error("address is undefined (useTxsByAddressSequncer)");
+          throw new Error(
+            "address is not equal to sender (useTxsByAddressSequncer)"
+          );
+        }
 
-      return getTxsByAccountAddressSequencer(endpoint, address, limit, offset);
-    })();
+        if (search || !address)
+          throw new Error("address is undefined (useTxsByAddressSequncer)");
 
-    return {
-      items: txs.items.map<Transaction>((tx) => ({
-        ...tx,
-        sender: convertAccountPubkeyToAccountAddress(tx.signerPubkey, prefix),
-      })),
-      total: txs.total,
-    };
-  }, [address, endpoint, limit, offset, prefix, search]);
+        return getTxsByAccountAddressSequencer(endpoint, address, pageParam);
+      })();
+    },
+    [address, endpoint, prefix, search]
+  );
 
-  return useQuery<TxsResponse>(
-    [
-      CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_SEQUENCER,
-      endpoint,
-      address,
-      search,
-      limit,
-      offset,
-    ],
-    createQueryFnWithTimeout(queryfn, 20000),
-    { ...options, retry: 1, refetchOnWindowFocus: false }
+  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) => ({
+        ...item,
+        sender: convertAccountPubkeyToAccountAddress(item.signerPubkey, prefix),
+      }))
+    ),
+  };
 };
 
 export * from "./gql";
diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
index 5458ca2e2..3b4c88202 100644
--- a/src/lib/services/tx/sequencer.ts
+++ b/src/lib/services/tx/sequencer.ts
@@ -4,23 +4,22 @@ import {
   zTxsByAddressResponseSequencer,
   zTxsByHashResponseSequencer,
 } from "../types";
-import type { BechAddr20 } from "lib/types";
+import type { BechAddr20, Option } from "lib/types";
 import { parseWithError } from "lib/utils";
 
 export const getTxsByAccountAddressSequencer = async (
   endpoint: string,
   address: BechAddr20,
-  limit: number,
-  offset: number
+  paginationKey: Option<string>
 ) =>
   axios
     .get(
       `${endpoint}/indexer/tx/v1/txs/by_account/${encodeURIComponent(address)}`,
       {
         params: {
-          "pagination.limit": limit,
-          "pagination.offset": offset,
+          "pagination.limit": 10,
           "pagination.reverse": true,
+          "pagination.key": paginationKey,
         },
       }
     )
diff --git a/src/lib/services/types/tx.ts b/src/lib/services/types/tx.ts
index 8a090c79c..fe4978080 100644
--- a/src/lib/services/types/tx.ts
+++ b/src/lib/services/types/tx.ts
@@ -192,9 +192,9 @@ export const zTxsByAddressResponseSequencer = z
     txs: z.array(zTxsResponseItemFromLcd),
     pagination: zPagination,
   })
-  .transform<TxsByAddressResponseLcd>((val) => ({
+  .transform((val) => ({
     items: val.txs,
-    total: val.pagination.total,
+    pagination: val.pagination,
   }));
 export type TxsByAddressResponseSequencer = z.infer<
   typeof zTxsByAddressResponseSequencer
@@ -215,7 +215,10 @@ export const zTxsByHashResponseSequencer = z
   })
   .transform((val) => ({
     items: [val.tx],
-    total: 1,
+    pagination: {
+      total: val.tx ? 1 : 0,
+      nextKey: null,
+    },
   }));
 export type TxsByHashResponseSequencer = z.infer<
   typeof zTxsByHashResponseSequencer

From cb269bc29cfa58cd5378763f33329e4b6dd8ff6e Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 16:12:26 +0700
Subject: [PATCH 06/18] fix(components): single message

---
 src/lib/components/action-msg/SingleMsg.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 6c83c3f20..3d9a84859 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/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  */}

From 6a52f5f7761f054aa5df5ee78cced692f5a6f29c Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 16:27:03 +0700
Subject: [PATCH 07/18] fix(utils): related signer

---
 src/lib/services/tx/index.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index 5efdb25f2..e69c225f1 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -411,10 +411,18 @@ export const useTxsByAddressSequencer = (
   return {
     ...rest,
     data: data?.pages.flatMap((page) =>
-      page.items.map((item) => ({
-        ...item,
-        sender: convertAccountPubkeyToAccountAddress(item.signerPubkey, prefix),
-      }))
+      page.items.map((item) => {
+        const sender = convertAccountPubkeyToAccountAddress(
+          item.signerPubkey,
+          prefix
+        );
+
+        return {
+          ...item,
+          sender,
+          isSigner: sender === address,
+        };
+      })
     ),
   };
 };

From 6c0bc8c2f1e9fecaa20b44dcbb3fd69269c61093 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Tue, 9 Jul 2024 12:03:36 +0700
Subject: [PATCH 08/18] fix(utils): txs by addr lcd

---
 src/lib/services/tx/index.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index e69c225f1..b6bbf756e 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -314,16 +314,10 @@ export const useTxsByAddressLcd = (
 
         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 (getTxsByHashLcd)");
       }
 
-      if (!address)
+      if (search || !address)
         throw new Error("address is undefined (useTxsByAddressLcd)");
       return getTxsByAccountAddressLcd(endpoint, address, limit, offset);
     })();

From f04132bdbdad1e1c72820b7d494515b1fb12bfcb Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Tue, 9 Jul 2024 16:24:19 +0700
Subject: [PATCH 09/18] fix: pr comments

---
 src/lib/pages/past-txs/index.tsx |  2 +-
 src/lib/services/tx/index.ts     |  6 ++----
 src/lib/services/tx/lcd.ts       |  2 +-
 src/lib/services/tx/sequencer.ts | 17 +++++++----------
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/lib/pages/past-txs/index.tsx b/src/lib/pages/past-txs/index.tsx
index 079767e0f..6ee1e4c45 100644
--- a/src/lib/pages/past-txs/index.tsx
+++ b/src/lib/pages/past-txs/index.tsx
@@ -18,8 +18,8 @@ const PastTxs = () => {
   return (
     <TierSwitcher
       full={<PastTxsFull />}
-      lite={<PastTxsLite />}
       sequencer={<PastTxsSequencer />}
+      lite={<PastTxsLite />}
     />
   );
 };
diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index b6bbf756e..7781046bf 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -304,7 +304,7 @@ export const useTxsByAddressLcd = (
         const txsByHash = await getTxsByHashLcd(endpoint, search);
 
         if (txsByHash.total === 0)
-          throw new Error("address is not equal to sender (getTxsByHashLcd)");
+          throw new Error("transaction not found (getTxsByHashLcd)");
 
         const tx = txsByHash.items[0];
         const sender = convertAccountPubkeyToAccountAddress(
@@ -361,9 +361,7 @@ export const useTxsByAddressSequencer = (
           const txsByHash = await getTxsByHashSequencer(endpoint, search);
 
           if (txsByHash.pagination.total === 0)
-            throw new Error(
-              "address is not equal to sender (useTxsByAddressSequncer)"
-            );
+            throw new Error("transaction not found (getTxsByHashSequencer)");
 
           const tx = txsByHash.items[0];
           const sender = convertAccountPubkeyToAccountAddress(
diff --git a/src/lib/services/tx/lcd.ts b/src/lib/services/tx/lcd.ts
index a6b59f0f2..4a75b2d83 100644
--- a/src/lib/services/tx/lcd.ts
+++ b/src/lib/services/tx/lcd.ts
@@ -30,7 +30,7 @@ export const getTxsByContractAddressLcd = async (
         order_by: 2,
         limit,
         page: offset / limit + 1,
-        events: `wasm.contract_address='${encodeURI(contractAddress)}'`,
+        events: `wasm._contract_address='${encodeURI(contractAddress)}'`,
       },
     })
     .then(({ data }) => parseWithError(zTxsByAddressResponseLcd, data));
diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
index 3b4c88202..3e213462b 100644
--- a/src/lib/services/tx/sequencer.ts
+++ b/src/lib/services/tx/sequencer.ts
@@ -13,16 +13,13 @@ export const getTxsByAccountAddressSequencer = async (
   paginationKey: Option<string>
 ) =>
   axios
-    .get(
-      `${endpoint}/indexer/tx/v1/txs/by_account/${encodeURIComponent(address)}`,
-      {
-        params: {
-          "pagination.limit": 10,
-          "pagination.reverse": true,
-          "pagination.key": paginationKey,
-        },
-      }
-    )
+    .get(`${endpoint}/indexer/tx/v1/txs/by_account/${encodeURI(address)}`, {
+      params: {
+        "pagination.limit": 10,
+        "pagination.reverse": true,
+        "pagination.key": paginationKey,
+      },
+    })
     .then(({ data }) => parseWithError(zTxsByAddressResponseSequencer, data));
 
 export const getTxsByHashSequencer = async (endpoint: string, txHash: string) =>

From 2c600d725518250eba0febe841aa0e1ca4696b92 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Tue, 9 Jul 2024 16:40:44 +0700
Subject: [PATCH 10/18] fix: pr comments

---
 src/lib/services/tx/index.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index 7781046bf..3efdb49fa 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -317,7 +317,10 @@ export const useTxsByAddressLcd = (
         throw new Error("address is not equal to sender (getTxsByHashLcd)");
       }
 
-      if (search || !address)
+      if (search && !isTxHash(search))
+        throw new Error("search is not a tx hash (useTxsByAddressLcd)");
+
+      if (!address)
         throw new Error("address is undefined (useTxsByAddressLcd)");
       return getTxsByAccountAddressLcd(endpoint, address, limit, offset);
     })();
@@ -355,6 +358,7 @@ export const useTxsByAddressSequencer = (
   } = useCurrentChain();
 
   const queryfn = useCallback(
+    // eslint-disable-next-line sonarjs/cognitive-complexity
     async (pageParam: Option<string>) => {
       return (async () => {
         if (search && isTxHash(search)) {
@@ -382,7 +386,10 @@ export const useTxsByAddressSequencer = (
           );
         }
 
-        if (search || !address)
+        if (search && !isTxHash(search))
+          throw new Error("search is not a tx hash (useTxsByAddressSequncer)");
+
+        if (!address)
           throw new Error("address is undefined (useTxsByAddressSequncer)");
 
         return getTxsByAccountAddressSequencer(endpoint, address, pageParam);

From 1b75a3dcb5d0ec3a8bf08170909ce58f53fa21dd Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 13:08:13 +0700
Subject: [PATCH 11/18] feat(pages): add txs in account details sequencer

---
 .../components/tables/txs/Sequencer.tsx       | 135 ++++++++++++++++++
 .../components/tables/txs/index.tsx           |   2 +
 2 files changed, 137 insertions(+)
 create mode 100644 src/lib/pages/account-details/components/tables/txs/Sequencer.tsx

diff --git a/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx b/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
new file mode 100644
index 000000000..e55fd26de
--- /dev/null
+++ b/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
@@ -0,0 +1,135 @@
+import { Alert, AlertDescription, Box, Flex } from "@chakra-ui/react";
+
+import { useMobile, useTierConfig } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { Pagination } from "lib/components/pagination";
+import { usePaginator } from "lib/components/pagination/usePaginator";
+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,
+  scrollComponentId,
+  onViewMore,
+}: TxsTableProps) => {
+  const isMobile = useMobile();
+  const { isFullTier } = useTierConfig();
+
+  const {
+    pagesQuantity,
+    setTotalData,
+    currentPage,
+    setCurrentPage,
+    pageSize,
+    setPageSize,
+    offset,
+  } = usePaginator({
+    initialState: {
+      pageSize: 10,
+      currentPage: 1,
+      isDisabled: false,
+    },
+  });
+
+  const { data, isLoading, error } = useTxsByAddressSequencer(
+    address as BechAddr20,
+    undefined,
+    onViewMore ? 5 : pageSize,
+    offset,
+    {
+      onSuccess: ({ total }) => setTotalData(total),
+    }
+  );
+
+  const isMobileOverview = isMobile && !!onViewMore;
+  const txsCount = data?.total;
+  return (
+    <Box mt={{ base: 4, md: 8 }}>
+      {isMobileOverview ? (
+        <MobileTitle
+          title="Transactions"
+          count={txsCount}
+          onViewMore={onViewMore}
+          showCount={isFullTier}
+        />
+      ) : (
+        <Flex direction="column" gap={6}>
+          <TableTitle
+            title="Transactions"
+            count={txsCount}
+            mb={0}
+            showCount={isFullTier}
+          />
+          <Alert variant="warning" gap={3}>
+            <CustomIcon
+              name="alert-circle-solid"
+              boxSize={4}
+              color="warning.main"
+            />
+            <AlertDescription>
+              Please note that account transactions are queried from the LCD and
+              may have pruned transactions that will not be displayed.
+            </AlertDescription>
+          </Alert>
+          {!isMobileOverview && (
+            <TransactionsTable
+              transactions={data?.items}
+              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={false}
+            />
+          )}
+          {data?.items.length && (
+            <>
+              {onViewMore ? (
+                <>
+                  {!isLoading &&
+                    (txsCount === undefined || txsCount > 5) &&
+                    !isMobile && <ViewMore onClick={onViewMore} />}
+                </>
+              ) : (
+                <>
+                  {!!(txsCount && txsCount > 10) && (
+                    <Pagination
+                      currentPage={currentPage}
+                      pagesQuantity={pagesQuantity}
+                      offset={offset}
+                      totalData={txsCount}
+                      scrollComponentId={scrollComponentId}
+                      pageSize={pageSize}
+                      onPageChange={(nextPage) => setCurrentPage(nextPage)}
+                      onPageSizeChange={(e) => {
+                        const size = Number(e.target.value);
+                        setPageSize(size);
+                        setCurrentPage(1);
+                      }}
+                    />
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </Flex>
+      )}
+    </Box>
+  );
+};
diff --git a/src/lib/pages/account-details/components/tables/txs/index.tsx b/src/lib/pages/account-details/components/tables/txs/index.tsx
index 8d9b59f06..dcbc44777 100644
--- a/src/lib/pages/account-details/components/tables/txs/index.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/index.tsx
@@ -2,11 +2,13 @@ import { TierSwitcher } from "lib/components/TierSwitcher";
 
 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} />}
     lite={<TxsTableLite {...props} />}
+    sequencer={<TxsTableSequencer {...props} />}
   />
 );

From 7ab42b503a13234f87f6149b009d99a62a269902 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 13:10:39 +0700
Subject: [PATCH 12/18] docs: update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f67d97dd..51b51a04c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ 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
 

From eddafc15052d36fa651c158fb54962744f8f3660 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Mon, 8 Jul 2024 16:04:53 +0700
Subject: [PATCH 13/18] feat(pages): update to cursor base pagination load more

---
 .../components/tables/txs/Sequencer.tsx       | 100 +++++-------------
 src/lib/services/tx/index.ts                  |  20 +++-
 src/lib/services/tx/sequencer.ts              |   5 +-
 3 files changed, 43 insertions(+), 82 deletions(-)

diff --git a/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx b/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
index e55fd26de..10b5b4e3f 100644
--- a/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
@@ -1,9 +1,7 @@
-import { Alert, AlertDescription, Box, Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 
 import { useMobile, useTierConfig } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { Pagination } from "lib/components/pagination";
-import { usePaginator } from "lib/components/pagination/usePaginator";
+import { LoadNext } from "lib/components/LoadNext";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import {
   MobileTitle,
@@ -16,73 +14,40 @@ import type { BechAddr20 } from "lib/types";
 
 import type { TxsTableProps } from "./types";
 
-export const TxsTableSequencer = ({
-  address,
-  scrollComponentId,
-  onViewMore,
-}: TxsTableProps) => {
+export const TxsTableSequencer = ({ address, onViewMore }: TxsTableProps) => {
   const isMobile = useMobile();
   const { isFullTier } = useTierConfig();
 
   const {
-    pagesQuantity,
-    setTotalData,
-    currentPage,
-    setCurrentPage,
-    pageSize,
-    setPageSize,
-    offset,
-  } = usePaginator({
-    initialState: {
-      pageSize: 10,
-      currentPage: 1,
-      isDisabled: false,
-    },
-  });
-
-  const { data, isLoading, error } = useTxsByAddressSequencer(
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useTxsByAddressSequencer(
     address as BechAddr20,
     undefined,
-    onViewMore ? 5 : pageSize,
-    offset,
-    {
-      onSuccess: ({ total }) => setTotalData(total),
-    }
+    onViewMore ? 5 : 10
   );
 
   const isMobileOverview = isMobile && !!onViewMore;
-  const txsCount = data?.total;
+
   return (
     <Box mt={{ base: 4, md: 8 }}>
       {isMobileOverview ? (
         <MobileTitle
           title="Transactions"
-          count={txsCount}
+          count={undefined}
           onViewMore={onViewMore}
-          showCount={isFullTier}
+          showCount={false}
         />
       ) : (
         <Flex direction="column" gap={6}>
-          <TableTitle
-            title="Transactions"
-            count={txsCount}
-            mb={0}
-            showCount={isFullTier}
-          />
-          <Alert variant="warning" gap={3}>
-            <CustomIcon
-              name="alert-circle-solid"
-              boxSize={4}
-              color="warning.main"
-            />
-            <AlertDescription>
-              Please note that account transactions are queried from the LCD and
-              may have pruned transactions that will not be displayed.
-            </AlertDescription>
-          </Alert>
+          <TableTitle title="Transactions" mb={0} showCount={isFullTier} />
           {!isMobileOverview && (
             <TransactionsTable
-              transactions={data?.items}
+              transactions={data}
               isLoading={isLoading}
               emptyState={
                 error ? (
@@ -95,36 +60,19 @@ export const TxsTableSequencer = ({
                   />
                 )
               }
-              showRelations={false}
+              showRelations
             />
           )}
-          {data?.items.length && (
+          {hasNextPage && (
             <>
               {onViewMore ? (
-                <>
-                  {!isLoading &&
-                    (txsCount === undefined || txsCount > 5) &&
-                    !isMobile && <ViewMore onClick={onViewMore} />}
-                </>
+                <ViewMore onClick={onViewMore} />
               ) : (
-                <>
-                  {!!(txsCount && txsCount > 10) && (
-                    <Pagination
-                      currentPage={currentPage}
-                      pagesQuantity={pagesQuantity}
-                      offset={offset}
-                      totalData={txsCount}
-                      scrollComponentId={scrollComponentId}
-                      pageSize={pageSize}
-                      onPageChange={(nextPage) => setCurrentPage(nextPage)}
-                      onPageSizeChange={(e) => {
-                        const size = Number(e.target.value);
-                        setPageSize(size);
-                        setCurrentPage(1);
-                      }}
-                    />
-                  )}
-                </>
+                <LoadNext
+                  text="Load more 10 transactions"
+                  fetchNextPage={fetchNextPage}
+                  isFetchingNextPage={isFetchingNextPage}
+                />
               )}
             </>
           )}
diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index 3efdb49fa..6eb72008c 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -350,7 +350,8 @@ export const useTxsByAddressLcd = (
 
 export const useTxsByAddressSequencer = (
   address: Option<BechAddr20>,
-  search: Option<string>
+  search: Option<string>,
+  limit = 10
 ) => {
   const endpoint = useLcdEndpoint();
   const {
@@ -392,14 +393,25 @@ export const useTxsByAddressSequencer = (
         if (!address)
           throw new Error("address is undefined (useTxsByAddressSequncer)");
 
-        return getTxsByAccountAddressSequencer(endpoint, address, pageParam);
+        return getTxsByAccountAddressSequencer(
+          endpoint,
+          address,
+          pageParam,
+          limit
+        );
       })();
     },
-    [address, endpoint, prefix, search]
+    [address, endpoint, prefix, search, limit]
   );
 
   const { data, ...rest } = useInfiniteQuery(
-    [CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_SEQUENCER, endpoint, address, search],
+    [
+      CELATONE_QUERY_KEYS.TXS_BY_ADDRESS_SEQUENCER,
+      endpoint,
+      address,
+      search,
+      limit,
+    ],
     ({ pageParam }) => queryfn(pageParam),
     {
       getNextPageParam: (lastPage) => lastPage.pagination.nextKey ?? undefined,
diff --git a/src/lib/services/tx/sequencer.ts b/src/lib/services/tx/sequencer.ts
index 3e213462b..581ac167e 100644
--- a/src/lib/services/tx/sequencer.ts
+++ b/src/lib/services/tx/sequencer.ts
@@ -10,12 +10,13 @@ import { parseWithError } from "lib/utils";
 export const getTxsByAccountAddressSequencer = async (
   endpoint: string,
   address: BechAddr20,
-  paginationKey: Option<string>
+  paginationKey: Option<string>,
+  limit = 10
 ) =>
   axios
     .get(`${endpoint}/indexer/tx/v1/txs/by_account/${encodeURI(address)}`, {
       params: {
-        "pagination.limit": 10,
+        "pagination.limit": limit,
         "pagination.reverse": true,
         "pagination.key": paginationKey,
       },

From 9ecafad6f3eb30cdf862881732f4bffb1d4a208e Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 9 Jul 2024 16:18:35 +0700
Subject: [PATCH 14/18] fix: as comments

---
 .../pages/account-details/components/tables/txs/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/pages/account-details/components/tables/txs/index.tsx b/src/lib/pages/account-details/components/tables/txs/index.tsx
index dcbc44777..dce33e3b3 100644
--- a/src/lib/pages/account-details/components/tables/txs/index.tsx
+++ b/src/lib/pages/account-details/components/tables/txs/index.tsx
@@ -1,14 +1,14 @@
 import { TierSwitcher } from "lib/components/TierSwitcher";
 
-import { TxsTableFull } from "./Full";
-import { TxsTableLite } from "./Lite";
-import { TxsTableSequencer } from "./Sequencer";
+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} />}
-    lite={<TxsTableLite {...props} />}
     sequencer={<TxsTableSequencer {...props} />}
+    lite={<TxsTableLite {...props} />}
   />
 );

From 63a1e2ba94b32a83012bb5ce032de1955c678415 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 9 Jul 2024 16:22:50 +0700
Subject: [PATCH 15/18] fix: full name

---
 .../account-details/components/tables/txs/{Full.tsx => full.tsx}  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/lib/pages/account-details/components/tables/txs/{Full.tsx => full.tsx} (100%)

diff --git a/src/lib/pages/account-details/components/tables/txs/Full.tsx b/src/lib/pages/account-details/components/tables/txs/full.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/txs/Full.tsx
rename to src/lib/pages/account-details/components/tables/txs/full.tsx

From d4bf59d130bb6f4295cd795e8039e9eafbce7da6 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 9 Jul 2024 16:26:36 +0700
Subject: [PATCH 16/18] fix: camel case name

---
 .../account-details/components/tables/txs/{Lite.tsx => lite.tsx}  | 0
 .../components/tables/txs/{Sequencer.tsx => sequencer.tsx}        | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/lib/pages/account-details/components/tables/txs/{Lite.tsx => lite.tsx} (100%)
 rename src/lib/pages/account-details/components/tables/txs/{Sequencer.tsx => sequencer.tsx} (100%)

diff --git a/src/lib/pages/account-details/components/tables/txs/Lite.tsx b/src/lib/pages/account-details/components/tables/txs/lite.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/txs/Lite.tsx
rename to src/lib/pages/account-details/components/tables/txs/lite.tsx
diff --git a/src/lib/pages/account-details/components/tables/txs/Sequencer.tsx b/src/lib/pages/account-details/components/tables/txs/sequencer.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/tables/txs/Sequencer.tsx
rename to src/lib/pages/account-details/components/tables/txs/sequencer.tsx

From 21afaab4003f8295c608914391abfdc0ea6d2ff2 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 9 Jul 2024 17:54:47 +0700
Subject: [PATCH 17/18] fix: contract cw20info

---
 src/lib/services/types/wasm/contract.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/services/types/wasm/contract.ts b/src/lib/services/types/wasm/contract.ts
index fe7a8fea7..ac1fbaa0f 100644
--- a/src/lib/services/types/wasm/contract.ts
+++ b/src/lib/services/types/wasm/contract.ts
@@ -222,14 +222,16 @@ export const zInstantiatedContractsLcd = z
 
 export const zContractCw2InfoLcd = z
   .object({
-    data: z.string(),
+    data: z.string().nullable(),
   })
-  .transform((val) => JSON.parse(decode(val.data)))
+  .transform((val) => (val.data ? JSON.parse(decode(val.data)) : null))
   .pipe(
-    z.object({
-      contract: z.string(),
-      version: z.string(),
-    })
+    z
+      .object({
+        contract: z.string(),
+        version: z.string(),
+      })
+      .nullable()
   );
 
 export type ContractCw2InfoLcd = z.infer<typeof zContractCw2InfoLcd>;

From efb7c13fb19a898f555d15a2a336121dee6a59af Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 9 Jul 2024 17:59:07 +0700
Subject: [PATCH 18/18] fix: as comments

---
 src/lib/services/tx/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/services/tx/index.ts b/src/lib/services/tx/index.ts
index a0f45f61b..9f0894958 100644
--- a/src/lib/services/tx/index.ts
+++ b/src/lib/services/tx/index.ts
@@ -384,7 +384,7 @@ export const useTxsByAddressSequencer = (
           if (findAddressFromEvents) return txsByHash;
 
           throw new Error(
-            "address is not equal to sender (useTxsByAddressSequncer)"
+            "transaction is not related (useTxsByAddressSequncer)"
           );
         }