[CFE-416]: Feature: contract detail

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#951](https://github.com/alleslabs/celatone-frontend/pull/951) Support contract details lite version with LCD endpoint
 - [#961](https://github.com/alleslabs/celatone-frontend/pull/961) Add and refactor proposal related lcd endpoints
 - [#952](https://github.com/alleslabs/celatone-frontend/pull/952) Support module details page lite version with LCD endpoint
 - [#940](https://github.com/alleslabs/celatone-frontend/pull/940) Support my published modules page lite version with LCD endpoint

src/lib/app-provider/env.ts

@@ -31,7 +31,6 @@ export enum CELATONE_QUERY_KEYS {
   // CONTRACT
   CONTRACTS = "CELATONE_QUERY_CONTRACTS",
   CONTRACT_DATA = "CELATONE_QUERY_CONTRACT_DATA",
-  CONTRACT_LCD = "CELATONE_QUERY_CONTRACT_LCD",
   CONTRACT_QUERY_MSGS = "CELATONE_QUERY_CONTRACT_QUERY_MSGS",
   CONTRACT_QUERY_LCD = "CELATONE_QUERY_CONTRACT_QUERY_LCD",
   CONTRACT_STATES = "CELATONE_QUERY_CONTRACT_STATES",
@@ -45,6 +44,7 @@ export enum CELATONE_QUERY_KEYS {
   INSTANTIATED_LIST_BY_WALLET_ADDRESS = "CELATONE_QUERY_INSTANTIATED_LIST_BY_WALLET_ADDRESS",
   ADMINS_BY_CONTRACTS = "CELATONE_QUERY_ADMINS_BY_CONTRACTS",
   CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS",
+  CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS_LCD = "CELATONE_QUERY_CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS_LCD",
   // X/STAKING
   STAKING_PARAMS_LCD = "CELATONE_QUERY_STAKING_PARAMS_LCD",
   DELEGATIONS_BY_ADDRESS_LCD = "CELATONE_QUERY_DELEGATIONS_BY_ADDRESS_LCD",

src/lib/components/ContractSelectSection.tsx

@@ -5,8 +5,8 @@ import { useForm } from "react-hook-form";
 
 import { useMobile } from "lib/app-provider";
 import { useContractStore } from "lib/providers/store";
-import type { ContractLcd } from "lib/services/types";
-import { useContractLcd } from "lib/services/wasm/contract";
+import type { ContractData } from "lib/services/types";
+import { useContractData } from "lib/services/wasm/contract";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { BechAddr, BechAddr32, Option } from "lib/types";
 
@@ -37,7 +37,7 @@ interface ContractSelectSectionProps {
   mode: "all-lists" | "only-admin";
   contractAddress: BechAddr32;
   onContractSelect: (contract: BechAddr32) => void;
-  successCallback?: (data: ContractLcd) => void;
+  successCallback?: (data: ContractData) => void;
 }
 
 const modeStyle = (mode: string) => {
@@ -157,7 +157,7 @@ export const ContractSelectSection = observer(
       mode: "all",
     });
 
-    const { refetch, isFetching } = useContractLcd(contractAddress, {
+    const { refetch, isFetching } = useContractData(contractAddress, {
       enabled: !!contractAddress,
       onSuccess: (data) => {
         successCallback?.(data);

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -13,7 +13,7 @@ import { OffChainForm } from "lib/components/OffChainForm";
 import { INSTANTIATED_LIST_NAME } from "lib/data";
 import { useHandleContractSave } from "lib/hooks";
 import { useContractStore } from "lib/providers/store";
-import { useContractLcd } from "lib/services/wasm/contract";
+import { useContractData } from "lib/services/wasm/contract";
 import type { BechAddr, BechAddr32, LVPair } from "lib/types";
 import {
   formatSlugName,
@@ -88,7 +88,7 @@ export function SaveNewContractModal({
     });
   };
 
-  const { refetch } = useContractLcd(contractAddressState as BechAddr32, {
+  const { refetch } = useContractData(contractAddressState as BechAddr32, {
     onSuccess: (data) => {
       const contractLocalInfo = getContractLocalInfo(contractAddressState);
       reset({

src/lib/components/select-contract/SelectContractInstantiator.tsx

@@ -27,7 +27,7 @@ import {
 import { DEFAULT_RPC_ERROR } from "lib/data";
 import { useInstantiatedByMe } from "lib/model/contract";
 import { useContractStore } from "lib/providers/store";
-import { useContractLcd } from "lib/services/wasm/contract";
+import { useContractData } from "lib/services/wasm/contract";
 import type { BechAddr32, RpcQueryError } from "lib/types";
 
 import { AllContractLists } from "./AllContractLists";
@@ -73,18 +73,21 @@ export const SelectContractInstantiator = ({
     resetOnClose();
   };
 
-  const { refetch, isFetching, isRefetching } = useContractLcd(searchContract, {
-    enabled: false,
-    retry: false,
-    cacheTime: 0,
-    refetchOnReconnect: false,
-    onSuccess: () => onSelectThenClose(searchContract),
-    onError: (err) =>
-      setInvalid(
-        (err as AxiosError<RpcQueryError>).response?.data.message ||
-          DEFAULT_RPC_ERROR
-      ),
-  });
+  const { refetch, isFetching, isRefetching } = useContractData(
+    searchContract,
+    {
+      enabled: false,
+      retry: false,
+      cacheTime: 0,
+      refetchOnReconnect: false,
+      onSuccess: () => onSelectThenClose(searchContract),
+      onError: (err) =>
+        setInvalid(
+          (err as AxiosError<RpcQueryError>).response?.data.message ||
+            DEFAULT_RPC_ERROR
+        ),
+    }
+  );
 
   const handleListSelect = (slug: string) => {
     setListSlug(slug);

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

@@ -75,8 +75,8 @@ export const TxsTable = ({
     undefined,
     isSigner,
     filters,
-    offset,
-    onViewMore ? 5 : pageSize
+    onViewMore ? 5 : pageSize,
+    offset
   );
 
   const handleOnIsSignerChange = (value: Option<boolean>) => {

src/lib/pages/admin/index.tsx

@@ -23,7 +23,7 @@ import { TextInput } from "lib/components/forms";
 import { UserDocsLink } from "lib/components/UserDocsLink";
 import WasmPageContainer from "lib/components/WasmPageContainer";
 import { useTxBroadcast } from "lib/hooks";
-import { useContractLcd } from "lib/services/wasm/contract";
+import { useContractData } from "lib/services/wasm/contract";
 import type { BechAddr, BechAddr32 } from "lib/types";
 import { MsgType } from "lib/types";
 import { composeMsg, getFirstQueryParam } from "lib/utils";
@@ -107,7 +107,7 @@ const UpdateAdmin = () => {
   /**
    * @remarks Contract admin validation
    */
-  useContractLcd(contractAddressParam, {
+  useContractData(contractAddressParam, {
     onSuccess: (data) => {
       if (data.contract.admin !== address) onContractPathChange();
     },

src/lib/pages/contract-details/components/InstantiateInfo.tsx

@@ -1,6 +1,10 @@
 import { Box, chakra, Divider, Flex, Text } from "@chakra-ui/react";
 
-import { useCurrentChain, useGetAddressType } from "lib/app-provider";
+import {
+  useCurrentChain,
+  useGetAddressType,
+  useTierConfig,
+} from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
@@ -98,6 +102,7 @@ export const InstantiateInfo = ({
   contractRest,
   codeLocalInfo,
 }: InstantiateInfoProps) => {
+  const isFullTier = useTierConfig() === "full";
   const getAddressType = useGetAddressType();
   const {
     chain: { chain_id: chainId },
@@ -182,9 +187,11 @@ export const InstantiateInfo = ({
             fixedHeight
           />
         </LabelText>
-        <Flex flex="1">
-          <InitRender {...contract} />
-        </Flex>
+        {isFullTier && (
+          <Flex flex="1">
+            <InitRender {...contract} />
+          </Flex>
+        )}
       </Flex>
       <Flex direction={{ base: "row", md: "column" }} gap={{ base: 1, md: 6 }}>
         {contractRest?.contract_info.ibc_port_id && (

src/lib/pages/contract-details/components/tables/TxsTable.tsx

@@ -1,9 +1,10 @@
+import { useTierConfig } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { TransactionsTable } from "lib/components/table";
 import { DEFAULT_TX_FILTERS } from "lib/data";
-import { useTxsByAddress } from "lib/services/tx";
+import { useTxsByAddress, useTxsByContractAddressLcd } from "lib/services/tx";
 import type { BechAddr32, Option } from "lib/types";
 
 interface TxsTableProps {
@@ -19,7 +20,10 @@ export const TxsTable = ({
   totalData,
   refetchCount,
 }: TxsTableProps) => {
+  const isFullTier = useTierConfig() === "full";
+
   const {
+    setTotalData,
     pagesQuantity,
     currentPage,
     setCurrentPage,
@@ -35,14 +39,21 @@ export const TxsTable = ({
     },
   });
 
-  const { data, isLoading, error } = useTxsByAddress(
+  const resApi = useTxsByAddress(
     contractAddress,
     undefined,
     undefined,
     DEFAULT_TX_FILTERS,
+    pageSize,
     offset,
-    pageSize
+    { enabled: isFullTier }
   );
+  const resLcd = useTxsByContractAddressLcd(contractAddress, pageSize, offset, {
+    enabled: !isFullTier,
+    onSuccess: ({ total }) => setTotalData(total),
+  });
+
+  const { data, isLoading, error } = isFullTier ? resApi : resLcd;
 
   return (
     <>
@@ -56,7 +67,11 @@ export const TxsTable = ({
             <EmptyState
               withBorder
               imageVariant="empty"
-              message="This contract does not have any transactions"
+              message={
+                isFullTier
+                  ? "This contract does not have any transactions."
+                  : "This contract does not have any transactions, or they are too old and have been pruned from the LCD."
+              }
             />
           )
         }

src/lib/pages/contract-details/components/tables/index.tsx

@@ -7,7 +7,7 @@ import {
   Tabs,
 } from "@chakra-ui/react";
 
-import { useGovConfig } from "lib/app-provider";
+import { useGovConfig, useTierConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { useContractTableCounts } from "lib/services/wasm/contract";
 import type { BechAddr32 } from "lib/types";
@@ -20,12 +20,16 @@ interface ContractTablesProps {
   contractAddress: BechAddr32;
 }
 
+const tableHeaderId = "contractDetailsTableHeader";
+
 export const ContractTables = ({ contractAddress }: ContractTablesProps) => {
-  const tableHeaderId = "contractDetailsTableHeader";
+  const isFullTier = useTierConfig() === "full";
 
   const gov = useGovConfig({ shouldRedirect: false });
-  const { data, refetch: refetchCount } =
-    useContractTableCounts(contractAddress);
+  const { data, refetch: refetchCount } = useContractTableCounts(
+    contractAddress,
+    { enabled: isFullTier }
+  );
 
   return (
     <Flex direction="column" gap={6}>
@@ -45,14 +49,16 @@ export const ContractTables = ({ contractAddress }: ContractTablesProps) => {
           <CustomTab count={data?.migration} isDisabled={data?.migration === 0}>
             Migrations
           </CustomTab>
-          <CustomTab
-            count={data?.relatedProposal}
-            isDisabled={data?.relatedProposal === 0}
-            whiteSpace="nowrap"
-            hidden={!gov.enabled}
-          >
-            Related Proposals
-          </CustomTab>
+          {isFullTier && (
+            <CustomTab
+              count={data?.relatedProposal}
+              isDisabled={data?.relatedProposal === 0}
+              whiteSpace="nowrap"
+              hidden={!gov.enabled}
+            >
+              Related Proposals
+            </CustomTab>
+          )}
         </TabList>
         <TabPanels>
           <TabPanel p={0}>

src/lib/pages/contract-details/components/tables/migration/MigrationHeader.tsx

@@ -1,20 +1,33 @@
 import type { GridProps } from "@chakra-ui/react";
 import { Grid } from "@chakra-ui/react";
 
+import { useTierConfig } from "lib/app-provider";
 import { TableHeader } from "lib/components/table";
 
 export const MigrationHeader = ({
   templateColumns,
 }: {
   templateColumns: GridProps["templateColumns"];
-}) => (
-  <Grid templateColumns={templateColumns}>
-    <TableHeader>Code ID</TableHeader>
-    <TableHeader>Code Name</TableHeader>
-    <TableHeader>CW2 Info</TableHeader>
-    <TableHeader>Sender</TableHeader>
-    <TableHeader>Block Height</TableHeader>
-    <TableHeader>Timestamp</TableHeader>
-    <TableHeader>Remark</TableHeader>
-  </Grid>
-);
+}) => {
+  const isFullTier = useTierConfig() === "full";
+
+  return (
+    <Grid templateColumns={templateColumns}>
+      <TableHeader>Code ID</TableHeader>
+      <TableHeader>Code Name</TableHeader>
+      {isFullTier && (
+        <>
+          <TableHeader>CW2 Info</TableHeader>
+          <TableHeader>Sender</TableHeader>
+        </>
+      )}
+      <TableHeader>Block Height</TableHeader>
+      {isFullTier && (
+        <>
+          <TableHeader>Timestamp</TableHeader>
+          <TableHeader>Remark</TableHeader>
+        </>
+      )}
+    </Grid>
+  );
+};