Merge pull request #306 from alleslabs/fix/26-apr-bug-bash

fix: fix react query function timeout and retries, minor ui bugs

CHANGELOG.md

@@ -85,6 +85,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#306](https://github.com/alleslabs/celatone-frontend/pull/306) Fix react query function timeout and retries, minor ui bugs
 - [#307](https://github.com/alleslabs/celatone-frontend/pull/307) Remove minor ui in account detail
 - [#297](https://github.com/alleslabs/celatone-frontend/pull/297) Fix open new tab on tx modal link clicked
 - [#303](https://github.com/alleslabs/celatone-frontend/pull/303) Fix pagination problem when using filter

src/lib/components/LabelText.tsx

@@ -1,6 +1,7 @@
+import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
-interface LabelTextProps {
+interface LabelTextProps extends FlexProps {
   label: string;
   children: string | JSX.Element;
   helperText1?: string;
@@ -12,8 +13,9 @@ export const LabelText = ({
   children,
   helperText1,
   helperText2,
+  ...flexProps
 }: LabelTextProps) => (
-  <Flex direction="column" gap={1}>
+  <Flex direction="column" gap={1} {...flexProps}>
     <Text variant="body2" color="text.dark" fontWeight={500}>
       {label}
     </Text>

src/lib/components/state/EmptyState.tsx

@@ -1,11 +1,12 @@
-import { Flex, Text, Heading } from "@chakra-ui/react";
+import { Flex, Heading } from "@chakra-ui/react";
+import type { ReactElement } from "react";
 
 import type { ImageVariant } from "./StateImage";
 import { StateImage } from "./StateImage";
 
-interface EmptyStateProps {
+export interface EmptyStateProps {
   imageVariant?: ImageVariant;
-  message: string;
+  message: string | ReactElement;
   heading?: string;
   withBorder?: boolean;
 }
@@ -30,9 +31,9 @@ export const EmptyState = ({
           {heading}
         </Heading>
       )}
-      <Text color="text.dark" textAlign="center">
+      <Flex fontSize="16px" color="text.dark">
         {message}
-      </Text>
+      </Flex>
     </Flex>
   </Flex>
 );

src/lib/components/table/TableTitle.tsx

@@ -3,7 +3,7 @@ import { Badge, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
 interface TableTitleProps extends BoxProps {
   title: string;
-  count: number;
+  count: number | string;
   helperText?: string;
 }
 
@@ -22,7 +22,9 @@ export const TableTitle = ({
       <Badge
         variant="gray"
         color="text.main"
-        textColor={count ? "text.main" : "pebble.500"}
+        textColor={
+          count && typeof count !== "string" ? "text.main" : "pebble.500"
+        }
       >
         {count}
       </Badge>

src/lib/components/table/contracts/ContractsTableRowCTA.tsx

@@ -165,7 +165,7 @@ export const ContractsTableRowCTA = ({
               <Text variant="body2">
                 {formatUTC(contractInfo.latestUpdated)}
               </Text>
-              <Text variant="body2" color="text.dark">
+              <Text variant="body3" color="text.dark">
                 {`(${dateFromNow(contractInfo.latestUpdated)})`}
               </Text>
             </>

src/lib/gql/gql.ts

@@ -3,6 +3,8 @@ import * as types from "./graphql";
 import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
 
 const documents = {
+  "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n":
+    types.GetAccountIdByAddressQueryDocumentDocument,
   "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n":
     types.GetBlockTimestampByHeightQueryDocument,
   "\n  query getBlockListQuery($limit: Int!, $offset: Int!) {\n    blocks(limit: $limit, offset: $offset, order_by: { height: desc }) {\n      hash\n      height\n      timestamp\n      transactions_aggregate {\n        aggregate {\n          count\n        }\n      }\n      validator {\n        moniker\n        operator_address\n      }\n    }\n  }\n":
@@ -75,6 +77,9 @@ const documents = {
     types.GetBlockTransactionCountByHeightQueryDocument,
 };
 
+export function graphql(
+  source: "\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"
+): typeof documents["\n  query getAccountIdByAddressQueryDocument($address: String!) {\n    accounts_by_pk(address: $address) {\n      id\n    }\n  }\n"];
 export function graphql(
   source: "\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"
 ): typeof documents["\n  query getBlockTimestampByHeightQuery($height: Int!) {\n    blocks_by_pk(height: $height) {\n      timestamp\n    }\n  }\n"];

src/lib/gql/graphql.ts

@@ -11738,8 +11738,6 @@ export type Validators_Bool_Exp = {
 export enum Validators_Constraint {
   /** unique or primary key constraint on columns "account_id" */
   ValidatorsAccountIdKey = "validators_account_id_key",
-  /** unique or primary key constraint on columns "consensus_address" */
-  ValidatorsConsensusAddressKey = "validators_consensus_address_key",
   /** unique or primary key constraint on columns "id" */
   ValidatorsIdKey = "validators_id_key",
   /** unique or primary key constraint on columns "operator_address" */
@@ -12098,6 +12096,15 @@ export type Validators_Variance_Order_By = {
   id?: InputMaybe<Order_By>;
 };
 
+export type GetAccountIdByAddressQueryDocumentQueryVariables = Exact<{
+  address: Scalars["String"];
+}>;
+
+export type GetAccountIdByAddressQueryDocumentQuery = {
+  __typename?: "query_root";
+  accounts_by_pk?: { __typename?: "accounts"; id: number } | null;
+};
+
 export type GetBlockTimestampByHeightQueryQueryVariables = Exact<{
   height: Scalars["Int"];
 }>;
@@ -12763,6 +12770,60 @@ export type GetBlockTransactionCountByHeightQueryQuery = {
   };
 };
 
+export const GetAccountIdByAddressQueryDocumentDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "getAccountIdByAddressQueryDocument" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: {
+            kind: "Variable",
+            name: { kind: "Name", value: "address" },
+          },
+          type: {
+            kind: "NonNullType",
+            type: {
+              kind: "NamedType",
+              name: { kind: "Name", value: "String" },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "accounts_by_pk" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "address" },
+                value: {
+                  kind: "Variable",
+                  name: { kind: "Name", value: "address" },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                { kind: "Field", name: { kind: "Name", value: "id" } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<
+  GetAccountIdByAddressQueryDocumentQuery,
+  GetAccountIdByAddressQueryDocumentQueryVariables
+>;
 export const GetBlockTimestampByHeightQueryDocument = {
   kind: "Document",
   definitions: [

src/lib/model/account.ts

@@ -8,13 +8,16 @@ import {
 } from "lib/services/contractService";
 import { useProposalsCountByWalletAddress } from "lib/services/proposalService";
 import { useTxsCountByAddress } from "lib/services/txService";
-import type { HumanAddr } from "lib/types";
+import type { HumanAddr, Option } from "lib/types";
 
 /**
  * @remark
  * Counts for stored codes, contract admin, contract instances, transactions, and opened proposals tables
  */
-export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
+export const useAccountDetailsTableCounts = (
+  walletAddress: HumanAddr,
+  accountId: Option<number>
+) => {
   const { data: codesCount, refetch: refetchCodesCount } =
     useCodeListCountByWalletAddress(walletAddress);
   const { data: contractsAdminCount, refetch: refetchContractsAdminCount } =
@@ -23,8 +26,9 @@ export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
     useInstantiatedCountByUserQuery(walletAddress);
   const { data: proposalsCount, refetch: refetchProposalsCount } =
     useProposalsCountByWalletAddress(walletAddress);
-  const { data: txsCount, refetch: refetchTxsCount } = useTxsCountByAddress(
-    walletAddress,
+  const { data: txsCount } = useTxsCountByAddress(
+    undefined,
+    accountId,
     "",
     DEFAULT_TX_FILTERS,
     undefined
@@ -44,7 +48,6 @@ export const useAccountDetailsTableCounts = (walletAddress: HumanAddr) => {
     refetchCodesCount,
     refetchContractsAdminCount,
     refetchContractsCount,
-    refetchTxsCount,
     refetchProposalsCount,
   };
 };

src/lib/model/contract.ts

@@ -186,7 +186,13 @@ export const useContractDetailsTableCounts = (
   const { data: migrationCount, refetch: refetchMigration } =
     useMigrationHistoriesCountByContractAddress(contractAddress);
   const { data: transactionsCount, refetch: refetchTransactions } =
-    useTxsCountByAddress(contractAddress, "", DEFAULT_TX_FILTERS, undefined);
+    useTxsCountByAddress(
+      contractAddress,
+      undefined,
+      "",
+      DEFAULT_TX_FILTERS,
+      undefined
+    );
   const { data: relatedProposalsCount, refetch: refetchRelatedProposals } =
     useRelatedProposalsCountByContractAddress(contractAddress);
 

src/lib/pages/account-details/components/ErrorFetching.tsx

@@ -0,0 +1,13 @@
+import { CustomIcon } from "lib/components/icon";
+
+export const ErrorFetching = () => (
+  <>
+    <CustomIcon
+      name="alert-circle-solid"
+      color="pebble.600"
+      boxSize={4}
+      mr={3}
+    />
+    <p>Error fetching data. Please try again later.</p>
+  </>
+);

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

@@ -61,7 +61,7 @@ export const DelegationsSection = ({
 
   if (isLoading) return <Loading />;
   if (!stakingParams)
-    return <EmptyState message="Error fetching delegation data" withBorder />;
+    return <EmptyState message="Error fetching delegation data" />;
 
   const bondDenomLabel = getTokenLabel(stakingParams.bondDenom);
   // TODO: support more than one Asset?

src/lib/pages/account-details/components/tables/AdminContractsTable.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
@@ -77,8 +78,13 @@ export const AdminContractsTable = ({
         isLoading={isLoading}
         emptyState={
           <EmptyState
-            imageVariant="empty"
-            message="This account does not have any admin access for any contracts."
+            message={
+              !contracts ? (
+                <ErrorFetching />
+              ) : (
+                "This account does not have any admin access for any contracts."
+              )
+            }
             withBorder
           />
         }

src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
@@ -77,8 +78,13 @@ export const InstantiatedContractsTable = ({
         isLoading={isLoading}
         emptyState={
           <EmptyState
-            imageVariant="empty"
-            message="This account did not instantiate any contracts before."
+            message={
+              !contracts ? (
+                <ErrorFetching />
+              ) : (
+                "This account did not instantiate any contracts before."
+              )
+            }
             withBorder
           />
         }

src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
@@ -63,8 +64,13 @@ export const OpenedProposalsTable = ({
         isLoading={isLoading}
         emptyState={
           <EmptyState
-            imageVariant="empty"
-            message="This account did not open any proposals before."
+            message={
+              !proposals ? (
+                <ErrorFetching />
+              ) : (
+                "This account did not open any proposals before."
+              )
+            }
             withBorder
           />
         }

src/lib/pages/account-details/components/tables/StoredCodesTable.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
@@ -77,8 +78,13 @@ export const StoredCodesTable = ({
         isLoading={isLoading}
         emptyState={
           <EmptyState
-            imageVariant="empty"
-            message="This account did not stored any codes before."
+            message={
+              !codes ? (
+                <ErrorFetching />
+              ) : (
+                "This account did not stored any codes before."
+              )
+            }
             withBorder
           />
         }