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

CHANGELOG.md

@@ -100,6 +100,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
 - [#979](https://github.com/alleslabs/celatone-frontend/pull/979) Fix txs detail receiver overflow screen
 - [#980](https://github.com/alleslabs/celatone-frontend/pull/980) Pass through block in search in lite
 - [#981](https://github.com/alleslabs/celatone-frontend/pull/981) Fix useAccountData

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

@@ -1,13 +1,13 @@
 import { Flex, Heading } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
-import { useEffect, useState } from "react";
+import { useCallback, 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 { 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";
@@ -39,7 +39,7 @@ export const PastTxsLite = () => {
     },
   });
 
-  const { data, isLoading } = useTxsByAddressLcd(
+  const { data, isLoading, error } = useTxsByAddressLcd(
     address,
     debouncedSearch,
     pageSize,
@@ -62,6 +62,29 @@ export const PastTxsLite = () => {
     setCurrentPage(1);
   }, [debouncedSearch, setCurrentPage]);
 
+  const handleTransactionTableWithWalletEmptyState = useCallback(() => {
+    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${
+            wasm.enabled ? ", and contract address" : ""
+          }.`}
+          withBorder
+        />
+      );
+
+    if (error) return <ErrorFetching dataName="transactions" />;
+
+    return (
+      <EmptyState
+        imageVariant="empty"
+        message="Past transactions will display here."
+        withBorder
+      />
+    );
+  }, [search, error, wasm]);
+
   return (
     <PageContainer>
       <Flex justifyContent="space-between" alignItems="center">
@@ -90,23 +113,7 @@ export const PastTxsLite = () => {
       <TransactionsTableWithWallet
         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
-            />
-          )
-        }
+        emptyState={handleTransactionTableWithWalletEmptyState()}
         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,
@@ -361,7 +362,7 @@ export const useTxsByAddressLcd = (
       limit,
       offset,
     ],
-    queryfn,
+    createQueryFnWithTimeout(queryfn, 20000),
     { ...options, retry: 1, refetchOnWindowFocus: false }
   );
 };

src/lib/services/tx/lcd.ts

@@ -44,14 +44,22 @@ export const getTxsByAccountAddressLcd = async (
   offset: number
 ) =>
   axios
-    .get(
-      `${endpoint}/cosmos/tx/v1beta1/txs?events=message.sender=%27${encodeURI(address)}%27`,
-      {
+    .get(`${endpoint}/cosmos/tx/v1beta1/txs`, {
+      params: {
+        order_by: 2,
+        limit,
+        page: offset / limit + 1,
+        query: `message.sender='${encodeURI(address)}'`,
+      },
+    })
+    .catch(() =>
+      axios.get(`${endpoint}/cosmos/tx/v1beta1/txs`, {
         params: {
           order_by: 2,
           limit,
           page: offset / limit + 1,
+          events: `message.sender='${encodeURI(address)}'`,
         },
-      }
+      })
     )
     .then(({ data }) => parseWithError(zTxsByAddressResponseLcd, data));