feat: api v1 - contract txs

CHANGELOG.md

@@ -40,7 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Features
 
 - [#671](https://github.com/alleslabs/celatone-frontend/pull/671) Add mahalo-1
-- [#652](https://github.com/alleslabs/celatone-frontend/pull/652) feat: amp publish module and deploy script
+- [#652](https://github.com/alleslabs/celatone-frontend/pull/652) Add amp publish module and deploy script
 - [#648](https://github.com/alleslabs/celatone-frontend/pull/648) Support OPInit transaction in initia
 - [#654](https://github.com/alleslabs/celatone-frontend/pull/654) Add recent modules page
 - [#653](https://github.com/alleslabs/celatone-frontend/pull/653) Migrate from stone-12 to stone-12-1
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#669](https://github.com/alleslabs/celatone-frontend/pull/669) api v1 - contract transaction
 - [#672](https://github.com/alleslabs/celatone-frontend/pull/672) refactor balances
 - [#662](https://github.com/alleslabs/celatone-frontend/pull/662) Add republish button in module detail
 - [#665](https://github.com/alleslabs/celatone-frontend/pull/665) Revise mobile guard text

src/lib/app-provider/env.ts

@@ -18,7 +18,6 @@ export enum CELATONE_QUERY_KEYS {
   CONTRACT_QUERY = "CELATONE_QUERY_CONTRACT_QUERY",
   CONTRACT_STATE = "CELATONE_QUERY_CONTRACT_STATE",
   // ACCOUNT
-  ACCOUNT_ID = "CELATONE_QUERY_ACCOUNT_ID",
   ACCOUNT_TYPE = "CELATONE_QUERY_ACCOUNT_TYPE",
   // ASSET
   ASSET_INFOS = "CELATONE_QUERY_ASSET_INFOS",
@@ -85,9 +84,6 @@ export enum CELATONE_QUERY_KEYS {
   TX_DATA = "CELATONE_QUERY_TX_DATA",
   TXS_BY_ADDRESS = "CELATONE_QUERY_TXS_BY_ADDRESS",
   TXS_COUNT_BY_ADDRESS = "CELATONE_QUERY_TXS_COUNT_BY_ADDRESS",
-  API_TXS_COUNT_BY_ADDRESS = "CELATONE_QUERY_API_TXS_COUNT_BY_ADDRESS",
-  TXS_BY_ADDRESS_PAGINATION = "CELATONE_QUERY_TXS_BY_ADDRESS_PAGINATION",
-  TXS_BY_ADDRESS_COUNT = "CELATONE_QUERY_TXS_BY_ADDRESS_COUNT",
   TXS = "CELATONE_QUERY_TXS",
   TXS_BY_BLOCK_HEIGHT = "CELATONE_QUERY_TXS_BY_BLOCK_HEIGHT",
   // ICNS

src/lib/components/action-msg/SingleActionMsg.tsx

@@ -1,3 +1,5 @@
+import { observer } from "mobx-react-lite";
+
 import { useSingleActionMsgProps } from "lib/hooks/useSingleMessageProps";
 import type { Message } from "lib/types";
 
@@ -9,17 +11,14 @@ interface SingleActionMsgProps {
   success: boolean;
   singleMsg?: boolean;
 }
-export const SingleActionMsg = ({
-  messages,
-  type,
-  success,
-  singleMsg,
-}: SingleActionMsgProps) => {
-  const singleMsgProps = useSingleActionMsgProps(
-    type,
-    success,
-    messages,
-    singleMsg
-  );
-  return <SingleMsg {...singleMsgProps} />;
-};
+export const SingleActionMsg = observer(
+  ({ messages, type, success, singleMsg }: SingleActionMsgProps) => {
+    const singleMsgProps = useSingleActionMsgProps(
+      type,
+      success,
+      messages,
+      singleMsg
+    );
+    return <SingleMsg {...singleMsgProps} />;
+  }
+);

src/lib/components/state/EmptyState.tsx

@@ -1,14 +1,13 @@
 import type { FlexProps, ImageProps, TextProps } from "@chakra-ui/react";
 import { Flex, Heading, Text } from "@chakra-ui/react";
-import type { ReactElement } from "react";
 
 import type { ImageVariant } from "./StateImage";
 import { StateImage } from "./StateImage";
 
 export interface EmptyStateProps {
   imageVariant?: ImageVariant;
   imageWidth?: ImageProps["width"];
-  message: string | ReactElement;
+  message: string;
   heading?: string;
   withBorder?: boolean;
   my?: FlexProps["my"];

src/lib/components/state/ErrorFetching.tsx

@@ -0,0 +1,36 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+interface ErrorFetchingProps {
+  message: string;
+}
+
+// TODO: call EmptyState here instead with a format message
+export const ErrorFetching = ({ message }: ErrorFetchingProps) => (
+  <Flex
+    alignItems="center"
+    flexDir="column"
+    gap={4}
+    width="full"
+    borderY="1px solid"
+    py={8}
+    my={12}
+    borderColor="gray.700"
+  >
+    <CustomIcon
+      name="alert-circle-solid"
+      color="gray.600"
+      boxSize={20}
+      mr={3}
+    />
+    <Text
+      color="text.dark"
+      textAlign="center"
+      whiteSpace="pre-wrap"
+      variant="body1"
+    >
+      {message} Please try again later.
+    </Text>
+  </Flex>
+);

src/lib/components/state/StateImage.tsx

@@ -3,11 +3,11 @@ import { Image } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
 
-export type ImageVariant = "empty" | "not-found" | "disconnected";
+export type ImageVariant = "not-found" | "empty" | "disconnected";
 
 const imageSourceMap: Record<ImageVariant, string> = {
-  empty: CURR_THEME.illustration.searchEmpty,
   "not-found": CURR_THEME.illustration.searchNotFound,
+  empty: CURR_THEME.illustration.searchEmpty,
   disconnected: CURR_THEME.illustration.disconnected,
 };
 

src/lib/components/state/index.ts

@@ -1,5 +1,6 @@
 export * from "./DisconnectedState";
 export * from "./EmptyState";
+export * from "./ErrorFetching";
 export * from "./InvalidState";
 export * from "./StateImage";
 export * from "./ZeroState";

src/lib/components/table/accounts/SavedAccountsTable.tsx

@@ -21,7 +21,7 @@ export const SavedAccountsTable = ({
 }: SavedAccountsTableProps) => {
   const move = useMoveConfig({ shouldRedirect: false });
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!accounts?.length) return emptyState;
 
   const templateColumns = move.enabled

src/lib/components/table/codes/CodesTable.tsx

@@ -24,7 +24,7 @@ export const CodesTable = ({
 }: CodesTableProps) => {
   const isMobile = useMobile();
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!codes?.length) return emptyState;
 
   const templateColumns = isReadOnly

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

@@ -29,7 +29,7 @@ export const ContractsTable = ({
 }: ContractsTableProps) => {
   const isMobile = useMobile();
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!contracts?.length) return emptyState;
 
   let templateColumns: string;

src/lib/components/table/modules/ModulesTable.tsx

@@ -20,7 +20,7 @@ export const ModulesTable = ({
 }: ModulesTableProps) => {
   const isMobile = useMobile();
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!modules?.length) return emptyState;
 
   const templateColumns = `minmax(190px, 1fr) max(190px) max(230px) 250px`;

src/lib/components/table/proposals/ProposalsTable.tsx

@@ -20,7 +20,7 @@ export const ProposalsTable = ({
 }: ProposalsTableProps) => {
   const isMobile = useMobile();
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!proposals?.length) return emptyState;
 
   const templateColumns =

src/lib/components/table/transactions/TransactionsTable.tsx

@@ -26,7 +26,7 @@ export const TransactionsTable = ({
 }: TransactionsTableProps) => {
   const isMobile = useMobile();
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!transactions?.length) return emptyState;
 
   const templateColumns = `40px 190px 48px minmax(360px, 1fr) ${

src/lib/model/account.ts

@@ -1,5 +1,5 @@
-import { useUserAssetInfos } from "lib/pages/account-details/data";
 import { useAccountTableCounts } from "lib/services/accountService";
+import { useBalanceInfos } from "lib/services/balanceService";
 import type { HumanAddr, Option, Nullish } from "lib/types";
 
 interface AccountDetailsTableCounts {
@@ -24,7 +24,7 @@ export const useAccountDetailsTableCounts = (
     isLoading: isLoadingAccountTableCounts,
   } = useAccountTableCounts(walletAddress);
   const { totalData: assetsCount, isLoading: isLoadingAssetCount } =
-    useUserAssetInfos(walletAddress);
+    useBalanceInfos(walletAddress);
 
   return {
     tableCounts: {

src/lib/model/contract.ts

@@ -17,7 +17,6 @@ import type {
   HumanAddr,
   ContractInfo,
   Option,
-  Nullable,
 } from "lib/types";
 import { formatSlugName, getCurrentDate, getDefaultDate } from "lib/utils";
 
@@ -75,25 +74,24 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
  *
  */
 export const useContractDetailsTableCounts = (
-  contractAddress: ContractAddr,
-  contractAccountId: Option<Nullable<number>>
+  contractAddress: ContractAddr
 ) => {
   const { data: migrationCount, refetch: refetchMigration } =
     useMigrationHistoriesCountByContractAddress(contractAddress);
   const { data: transactionsCount, refetch: refetchTransactions } =
-    useTxsCountByAddress({
-      accountId: contractAccountId,
-      search: "",
-      filters: DEFAULT_TX_FILTERS,
-      isSigner: undefined,
-    });
+    useTxsCountByAddress(
+      contractAddress,
+      undefined,
+      undefined,
+      DEFAULT_TX_FILTERS
+    );
   const { data: relatedProposalsCount, refetch: refetchRelatedProposals } =
     useRelatedProposalsCountByContractAddress(contractAddress);
 
   return {
     tableCounts: {
       migrationCount,
-      transactionsCount,
+      transactionsCount: transactionsCount ?? undefined,
       relatedProposalsCount,
     },
     refetchMigration,

src/lib/pages/account-details/components/asset/AssetSectionContent.tsx

@@ -1,5 +1,6 @@
 import { Grid, Text } from "@chakra-ui/react";
 
+import { ErrorFetching } from "lib/components/state";
 import { TokenCard } from "lib/components/token";
 import type { TokenWithValue } from "lib/types";
 
@@ -14,9 +15,7 @@ export const AssetSectionContent = ({
 }: AssetSectionContentProps) => {
   if (error)
     return (
-      <Text variant="body2" color="text.dark">
-        Error fetching assets data.
-      </Text>
+      <ErrorFetching message="There is an error during fetching balances." />
     );
 
   return supportedAssets.length ? (

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

@@ -4,7 +4,7 @@ import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { TableTitle, ViewMore } from "lib/components/table";
-import { useUserAssetInfos } from "lib/pages/account-details/data";
+import { useBalanceInfos } from "lib/services/balanceService";
 import type { Addr } from "lib/types";
 
 import { AssetCta } from "./AssetCta";
@@ -29,9 +29,9 @@ export const AssetsSection = ({ address, onViewMore }: AssetsSectionProps) => {
     isLoading,
     totalData = 0,
     error,
-  } = useUserAssetInfos(address);
+  } = useBalanceInfos(address);
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
 
   const tableTitle = <TableTitle title="Assets" count={totalData} mb={0} />;
   const totalAssetValueInfo = (

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

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 
 import { AmpEvent, track } from "lib/amplitude";
 import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
+import { ErrorFetching } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
 import type { HumanAddr } from "lib/types";
 import { getTokenLabel } from "lib/utils";
@@ -44,9 +44,11 @@ export const DelegationsSection = ({
     onClose();
   }, [onClose, router.query.accountAddress]);
 
-  if (isLoading) return <Loading withBorder />;
+  if (isLoading) return <Loading />;
   if (!stakingParams)
-    return <EmptyState message="Error fetching delegation data" />;
+    return (
+      <ErrorFetching message="There is an error during fetching delegation data" />
+    );
 
   const redelegationCount = redelegations?.length ?? 0;
 

src/lib/pages/account-details/components/modules/ModuleListsBody.tsx

@@ -1,11 +1,10 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import { useMemo } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
-import { EmptyState } from "lib/components/state";
+import { ErrorFetching, EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
@@ -46,7 +45,10 @@ export const ModuleListsBody = ({
   };
 
   if (isLoading) return <Loading />;
-  if (!modules) return <ErrorFetching />;
+  if (!modules)
+    return (
+      <ErrorFetching message="There is an error during fetching modules." />
+    );
   if (!filteredModules?.length)
     return (
       <EmptyState

src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx

@@ -1,11 +1,10 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import { useCallback } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { ResourceCard } from "lib/components/resource";
-import { EmptyState } from "lib/components/state";
+import { ErrorFetching, EmptyState } from "lib/components/state";
 import { ViewMore } from "lib/components/table";
 import type { MoveAccountAddr, Option, ResourceGroup } from "lib/types";
 import { scrollToTop } from "lib/utils";
@@ -44,7 +43,10 @@ export const ResourceOverviewBody = ({
   );
 
   if (isLoading) return <Loading />;
-  if (!resourcesByName) return <ErrorFetching />;
+  if (!resourcesByName)
+    return (
+      <ErrorFetching message="There is an error during fetching resources." />
+    );
   if (!resourcesByName.length)
     return (
       <EmptyState