[CFE-516]: Fix(utils) - update get txs by account addr lcd to support new cosmos sdk

CHANGELOG.md

@@ -101,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#974](https://github.com/alleslabs/celatone-frontend/pull/974) Fix tx by account addr lcd to support new cosmos sdk
 - [#976](https://github.com/alleslabs/celatone-frontend/pull/976) Support save accounts in lite version
 - [#944](https://github.com/alleslabs/celatone-frontend/pull/944) Fix asset input selector
 - [#979](https://github.com/alleslabs/celatone-frontend/pull/979) Fix txs detail receiver overflow screen

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

@@ -1,9 +1,10 @@
-import { Box } from "@chakra-ui/react";
+import { Alert, AlertDescription, Box, Flex } from "@chakra-ui/react";
 
-import { useMobile } from "lib/app-provider";
+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 { ErrorFetching } from "lib/components/state";
+import { EmptyState, ErrorFetching } from "lib/components/state";
 import {
   MobileTitle,
   TableTitle,
@@ -21,6 +22,7 @@ export const TxsTableLite = ({
   onViewMore,
 }: TxsTableProps) => {
   const isMobile = useMobile();
+  const isFullTier = useTierConfig() === "full";
 
   const {
     pagesQuantity,
@@ -38,7 +40,7 @@ export const TxsTableLite = ({
     },
   });
 
-  const { data, isLoading } = useTxsByAddressLcd(
+  const { data, isLoading, error } = useTxsByAddressLcd(
     address as BechAddr20,
     undefined,
     onViewMore ? 5 : pageSize,
@@ -59,13 +61,39 @@ export const TxsTableLite = ({
           onViewMore={onViewMore}
         />
       ) : (
-        <>
-          <TableTitle title="Transactions" count={txsCount} mb={0} />
+        <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={<ErrorFetching dataName="transactions" />}
+              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}
             />
           )}
@@ -91,7 +119,7 @@ export const TxsTableLite = ({
                     }}
                   />
                 ))}
-        </>
+        </Flex>
       )}
     </Box>
   );

src/lib/pages/account-details/index.tsx

@@ -179,7 +179,7 @@ const AccountDetailsBody = ({
             NFTs
           </CustomTab>
           <CustomTab
-            count={tableCounts.txsCount}
+            count={isFullTier ? tableCounts.txsCount : undefined}
             isDisabled={tableCounts.txsCount === 0}
             onClick={handleTabChange(
               TabIndex.Txs,

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

@@ -7,14 +7,47 @@ 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 { EmptyState } from "lib/components/state";
+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 { 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" : ""
+        }.`}
+        withBorder
+      />
+    );
+
+  if (error) return <ErrorFetching dataName="transactions" />;
+
+  return (
+    <EmptyState
+      imageVariant="empty"
+      message="Past transactions will display here."
+      withBorder
+    />
+  );
+};
+
 export const PastTxsLite = () => {
-  const wasm = useWasmConfig({ shouldRedirect: false });
+  const isWasmEnabled = useWasmConfig({ shouldRedirect: false }).enabled;
   const {
     address,
     chain: { chain_id: chainId },
@@ -39,7 +72,7 @@ export const PastTxsLite = () => {
     },
   });
 
-  const { data, isLoading } = useTxsByAddressLcd(
+  const { data, isLoading, error } = useTxsByAddressLcd(
     address,
     debouncedSearch,
     pageSize,
@@ -79,7 +112,7 @@ export const PastTxsLite = () => {
       <Flex my={8}>
         <InputWithIcon
           placeholder={`Search with Transaction Hash${
-            wasm.enabled ? " or Contract Address" : ""
+            isWasmEnabled ? " or Contract Address" : ""
           }`}
           value={search}
           onChange={handleOnSearchChange}
@@ -91,21 +124,11 @@ export const PastTxsLite = () => {
         transactions={data?.items}
         isLoading={isLoading}
         emptyState={
-          search.trim().length > 0 ? (
-            <EmptyState
-              imageVariant="not-found"
-              message={`No past transaction matches found with your input. You can search with transaction hash${
-                wasm.enabled ? ", and contract address" : ""
-              }.`}
-              withBorder
-            />
-          ) : (
-            <EmptyState
-              imageVariant="empty"
-              message="Past transactions will display here."
-              withBorder
-            />
-          )
+          <PastTxsLiteTransactionsTableWithWalletEmptyState
+            search={search}
+            isWasmEnabled={isWasmEnabled}
+            error={error}
+          />
         }
         showActions={false}
         showRelations={false}

src/lib/services/tx/index.ts

@@ -20,6 +20,7 @@ import {
   useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
+import { createQueryFnWithTimeout } from "lib/query-utils";
 import type {
   BechAddr,
   BechAddr20,
@@ -281,30 +282,6 @@ export const useTxsByContractAddressLcd = (
   );
 };
 
-export const useTxsByAccountAddressLcd = (
-  address: Option<BechAddr20>,
-  limit: number,
-  offset: number
-) => {
-  const endpoint = useLcdEndpoint();
-
-  return useQuery(
-    [
-      CELATONE_QUERY_KEYS.TXS_BY_ACCOUNT_ADDRESS_LCD,
-      endpoint,
-      address,
-      limit,
-      offset,
-    ],
-    async () => {
-      if (!address)
-        throw new Error("address is undefined (useTxsByAccountAddressLcd)");
-      return getTxsByAccountAddressLcd(endpoint, address, limit, offset);
-    },
-    { retry: 1, refetchOnWindowFocus: false }
-  );
-};
-
 export const useTxsByAddressLcd = (
   address: Option<BechAddr20>,
   search: Option<string>,
@@ -361,7 +338,7 @@ export const useTxsByAddressLcd = (
       limit,
       offset,
     ],
-    queryfn,
+    createQueryFnWithTimeout(queryfn, 20000),
     { ...options, retry: 1, refetchOnWindowFocus: false }
   );
 };

src/lib/services/tx/lcd.ts

@@ -43,15 +43,29 @@ export const getTxsByAccountAddressLcd = async (
   limit: number,
   offset: number
 ) =>
-  axios
-    .get(
-      `${endpoint}/cosmos/tx/v1beta1/txs?events=message.sender=%27${encodeURI(address)}%27`,
-      {
-        params: {
-          order_by: 2,
-          limit,
-          page: offset / limit + 1,
-        },
-      }
-    )
-    .then(({ data }) => parseWithError(zTxsByAddressResponseLcd, data));
+  Promise.allSettled([
+    axios.get(`${endpoint}/cosmos/tx/v1beta1/txs`, {
+      params: {
+        order_by: 2,
+        limit,
+        page: offset / limit + 1,
+        query: `message.sender='${encodeURI(address)}'`,
+      },
+    }),
+    axios.get(`${endpoint}/cosmos/tx/v1beta1/txs`, {
+      params: {
+        order_by: 2,
+        limit,
+        page: offset / limit + 1,
+        events: `message.sender='${encodeURI(address)}'`,
+      },
+    }),
+  ]).then(([queryParam, eventsParam]) => {
+    if (queryParam.status === "fulfilled")
+      return parseWithError(zTxsByAddressResponseLcd, queryParam.value.data);
+
+    if (eventsParam.status === "fulfilled")
+      return parseWithError(zTxsByAddressResponseLcd, eventsParam.value.data);
+
+    throw new Error("No data found (getTxsByAccountAddressLcd)");
+  });