Merge pull request #805 from alleslabs/feature/cfe-367-code-details-c…

…ontract-list [CFE-367] Feature - code details contract list
alleslabs · Mar 8, 2024 · bb42d8b · bb42d8b
2 parents 4c38bcc + 4203b42
commit bb42d8b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 188 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -72,6 +72,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#805](https://github.com/alleslabs/celatone-frontend/pull/805) Revamp code detail page contracts section
 - [#802](https://github.com/alleslabs/celatone-frontend/pull/802) Revamp code detail page
 - [#800](https://github.com/alleslabs/celatone-frontend/pull/800) Add logging error in Zod parsing
 - [#798](https://github.com/alleslabs/celatone-frontend/pull/798) Add empty state to proposal messages

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
@@ -17,6 +17,7 @@ export enum CELATONE_QUERY_KEYS {
   CONTRACT_QUERY_MSGS = "CELATONE_QUERY_CONTRACT_QUERY_MSGS",
   CONTRACT_QUERY = "CELATONE_QUERY_CONTRACT_QUERY",
   CONTRACT_STATE = "CELATONE_QUERY_CONTRACT_STATE",
+  CONTRACTS_BY_CODE_ID = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID",
   // ACCOUNT
   ACCOUNT_DATA = "CELATONE_QUERY_ACCOUNT_DATA",
   ACCOUNT_TYPE = "CELATONE_QUERY_ACCOUNT_TYPE",
@@ -42,8 +43,6 @@ 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",
-  CONTRACTS_BY_CODE_ID_PAGINATION = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID_PAGINATION",
-  CONTRACTS_BY_CODE_ID_COUNT = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID_COUNT",
   // X/STAKING
   DELEGATIONS_BY_ADDRESS = "CELATONE_QUERY_DELEGATIONS_BY_ADDRESS",
   VALIDATOR_INFO_BY_ADDRESS = "CELATONE_QUERY_VALIDATOR_INFO_BY_ADDRESS",

diff --git a/src/lib/model/contract.ts b/src/lib/model/contract.ts
@@ -1,14 +1,12 @@
 import { useCurrentChain } from "lib/app-provider";
 import { INSTANTIATED_LIST_NAME } from "lib/data";
 import { useContractStore } from "lib/providers/store";
-import {} from "lib/services/contract";
 import {
-  useContractListByCodeIdPagination,
   useInstantiatedCountByUserQuery,
   useInstantiatedListByUserQuery,
 } from "lib/services/contractService";
 import type { ContractListInfo } from "lib/stores/contract";
-import type { BechAddr, BechAddr32, ContractInfo, Option } from "lib/types";
+import type { BechAddr, BechAddr32 } from "lib/types";
 import { formatSlugName, getCurrentDate, getDefaultDate } from "lib/utils";
 
 interface InstantiatedByMeState {
@@ -58,21 +56,3 @@ export const useInstantiatedMockInfoByMe = (): ContractListInfo => {
     isContractRemovable: false,
   };
 };
-
-export const useContractsByCodeId = (
-  codeId: number,
-  offset: number,
-  pageSize: number
-) => {
-  const { getContractLocalInfo } = useContractStore();
-  const { data: rawCodeContracts, isLoading } =
-    useContractListByCodeIdPagination(codeId, offset, pageSize);
-  const contracts: Option<ContractInfo[]> = rawCodeContracts?.map<ContractInfo>(
-    (contract) => ({
-      ...contract,
-      ...getContractLocalInfo(contract.contractAddress),
-    })
-  );
-
-  return { contracts, isLoading };
-};
diff --git a/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx b/src/lib/pages/code-details/components/code-info/table/CodeContractsTable.tsx
@@ -1,13 +1,10 @@
 import { observer } from "mobx-react-lite";
-import type { ChangeEvent } from "react";
-import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { ContractsTable, TableTitle } from "lib/components/table";
-import { useContractsByCodeId } from "lib/model/contract";
-import { useContractListCountByCodeId } from "lib/services/contractService";
+import { useCodeContracts } from "lib/pages/code-details/data";
 import type { BechAddr32 } from "lib/types";
 
 import { NoContracts } from "./NoContracts";
@@ -25,69 +22,55 @@ export const CodeContractsTable = observer(
         query: { contract },
       });
 
-    const { data: totalData, refetch } = useContractListCountByCodeId(codeId);
     const {
       pagesQuantity,
+      setTotalData,
       currentPage,
       setCurrentPage,
       pageSize,
       setPageSize,
       offset,
     } = usePaginator({
-      total: totalData,
       initialState: {
         pageSize: 10,
         currentPage: 1,
         isDisabled: false,
       },
     });
 
-    const { contracts, isLoading } = useContractsByCodeId(
-      codeId,
-      offset,
-      pageSize
-    );
-
-    useEffect(() => {
-      setCurrentPage(1);
-    }, [pageSize, setCurrentPage]);
-
-    const onPageChange = (nextPage: number) => {
-      refetch();
-      setCurrentPage(nextPage);
-    };
-
-    const onPageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-      const size = Number(e.target.value);
-      refetch();
-      setPageSize(size);
-    };
+    const { data, isLoading } = useCodeContracts(codeId, pageSize, offset, {
+      onSuccess: ({ total }) => setTotalData(total),
+    });
 
     const tableHeaderId = "contractTableHeader";
 
     return (
       <>
         <TableTitle
           title="Contract Instances"
-          count={totalData ?? 0}
+          count={data?.total ?? 0}
           id={tableHeaderId}
         />
         <ContractsTable
-          contracts={contracts}
+          contracts={data.items}
           isLoading={isLoading}
           emptyState={<NoContracts />}
           onRowSelect={onRowSelect}
         />
-        {!!totalData && totalData > 10 && (
+        {!!data?.total && data.total > 10 && (
           <Pagination
             currentPage={currentPage}
             pagesQuantity={pagesQuantity}
             offset={offset}
-            totalData={totalData}
+            totalData={data.total}
             scrollComponentId={tableHeaderId}
             pageSize={pageSize}
-            onPageChange={onPageChange}
-            onPageSizeChange={onPageSizeChange}
+            onPageChange={setCurrentPage}
+            onPageSizeChange={(e) => {
+              const size = Number(e.target.value);
+              setPageSize(size);
+              setCurrentPage(1);
+            }}
           />
         )}
       </>

diff --git a/src/lib/pages/code-details/data.ts b/src/lib/pages/code-details/data.ts
@@ -0,0 +1,36 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
+
+import { useContractStore } from "lib/providers/store";
+import type { ContractsResponse } from "lib/services/contract";
+import { useContractsByCodeId } from "lib/services/contractService";
+import type { ContractInfo, Option } from "lib/types";
+
+export const useCodeContracts = (
+  codeId: number,
+  limit: number,
+  offset: number,
+  options: Pick<UseQueryOptions<ContractsResponse>, "onSuccess"> = {}
+) => {
+  const { getContractLocalInfo } = useContractStore();
+  const { data, isLoading } = useContractsByCodeId(
+    codeId,
+    limit,
+    offset,
+    options
+  );
+
+  const contracts: Option<ContractInfo[]> = data?.items?.map<ContractInfo>(
+    (contract) => ({
+      ...contract,
+      ...getContractLocalInfo(contract.contractAddress),
+    })
+  );
+
+  return {
+    data: {
+      ...data,
+      items: contracts,
+    },
+    isLoading,
+  };
+};
diff --git a/src/lib/query/contract.ts b/src/lib/query/contract.ts
@@ -72,51 +72,3 @@ export const getContractListByAdmin = graphql(`
     }
   }
 `);
-
-export const getContractListByCodeIdPagination = graphql(`
-  query getContractListByCodeIdPagination(
-    $codeId: Int!
-    $offset: Int!
-    $pageSize: Int!
-  ) {
-    contracts(
-      where: { code_id: { _eq: $codeId } }
-      order_by: { transaction: { block: { timestamp: desc } } }
-      offset: $offset
-      limit: $pageSize
-    ) {
-      address
-      label
-      admin: account {
-        address
-      }
-      init_by: contract_histories(
-        order_by: { block: { timestamp: asc } }
-        limit: 1
-      ) {
-        account {
-          address
-        }
-      }
-      contract_histories(order_by: { block: { timestamp: desc } }, limit: 1) {
-        block {
-          timestamp
-        }
-        account {
-          address
-        }
-        remark
-      }
-    }
-  }
-`);
-
-export const getContractListCountByCodeId = graphql(`
-  query getContractListCountByCodeId($codeId: Int!) {
-    contracts_aggregate(where: { code_id: { _eq: $codeId } }) {
-      aggregate {
-        count
-      }
-    }
-  }
-`);
diff --git a/src/lib/services/contract.ts b/src/lib/services/contract.ts
@@ -265,3 +265,18 @@ export const getContractQueryMsgs = async (
   axios
     .get(`${endpoint}/${encodeURIComponent(contractAddress)}/query-msgs`)
     .then(({ data }) => parseWithError(zContractQueryMsgs, data));
+
+export const getContractsByCodeId = async (
+  endpoint: string,
+  codeId: number,
+  limit: number,
+  offset: number
+): Promise<ContractsResponse> =>
+  axios
+    .get(`${endpoint}/${codeId}/contracts`, {
+      params: {
+        limit,
+        offset,
+      },
+    })
+    .then(({ data }) => parseWithError(zContractsResponse, data));