Feat/refactor module

CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#905](https://github.com/alleslabs/celatone-frontend/pull/905) Refactor module related component for better readability
 - [#900](https://github.com/alleslabs/celatone-frontend/pull/900) Refactor module details info
 - [#899](https://github.com/alleslabs/celatone-frontend/pull/899) Refactor module details APIs
 - [#866](https://github.com/alleslabs/celatone-frontend/pull/866) Update upload code CTA to sticky bar

src/lib/app-provider/env.ts

@@ -98,7 +98,9 @@ export enum CELATONE_QUERY_KEYS {
   // MOVE
   MOVE_POOL_INFOS = "CELATONE_QUERY_MOVE_POOL_INFOS",
   // MODULES
+  MODULE_DATA = "CELATONE_QUERY_MODULE_DATA",
   MODULES_BY_ADDRESS = "CELATONE_QUERY_MODULES_BY_ADDRESS",
+  ACCOUNT_MODULE = "CELATONE_QUERY_ACCOUNT_MODULE",
   ACCOUNT_MODULES = "CELATONE_QUERY_ACCOUNT_MODULES",
   MODULES = "CELATONE_QUERY_MODULES",
   MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
@@ -109,7 +111,6 @@ export enum CELATONE_QUERY_KEYS {
   MODULE_HISTORIES = "CELATONE_QUERY_MODULE_HISTORIES",
   MODULE_PROPOSALS = "CELATONE_QUERY_MODULE_PROPOSALS",
   SCRIPT_DECODE = "CELATONE_QUERY_SCRIPT_DECODE",
-  MODULE_INFO = "CELATONE_QUERY_MODULE_INFO",
   // RESOURCE
   RESOURCES_BY_ADDRESS = "CELATONE_QUERY_RESOURCES_BY_ADDRESS",
   // NFTS

src/lib/components/module/FunctionDetailCard.tsx

@@ -15,8 +15,7 @@ import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
 import { AmpEvent, track, trackUseExpand } from "lib/amplitude";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { ExposedFunction } from "lib/types";
+import type { ExposedFunction, IndexedModule } from "lib/types";
 import {
   checkAvailability,
   getFirstQueryParam,

src/lib/components/module/ModuleCard.tsx

@@ -5,9 +5,8 @@ import { useMemo } from "react";
 import { AppLink } from "../AppLink";
 import { CustomIcon } from "../icon";
 import { AmpEvent, track } from "lib/amplitude";
-import type { IndexedModule } from "lib/services/move/moduleService";
 import { useVerifyModule } from "lib/services/move/moduleService";
-import type { BechAddr, Option } from "lib/types";
+import type { BechAddr, IndexedModule, Option } from "lib/types";
 
 import { CountBadge } from "./CountBadge";
 

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

@@ -32,7 +32,7 @@ export const ModulesTable = ({
   return isMobile ? (
     <MobileTableContainer>
       {modules.map((module) => (
-        <ModulesTableMobileCard key={module.name} moduleInfo={module} />
+        <ModulesTableMobileCard key={module.moduleName} moduleInfo={module} />
       ))}
     </MobileTableContainer>
   ) : (
@@ -43,7 +43,7 @@ export const ModulesTable = ({
       />
       {modules.map((module) => (
         <ModulesTableRow
-          key={module.name}
+          key={module.moduleName}
           moduleInfo={module}
           templateColumns={templateColumns}
           isPublishedModules={isPublishedModules}

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

@@ -4,13 +4,9 @@ import { MobileCardTemplate } from "../MobileCardTemplate";
 import { MobileLabel } from "../MobileLabel";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import type { ModuleInfo } from "lib/types";
-import {
-  bech32AddressToHex,
-  dateFromNow,
-  formatUTC,
-  unpadHexAddress,
-} from "lib/utils";
+import { dateFromNow, formatUTC } from "lib/utils";
 
 import { ModulePathLink } from "./ModulePathLink";
 
@@ -22,32 +18,36 @@ export const ModulesTableMobileCard = ({
   moduleInfo,
 }: ModulesTableMobileCardProps) => {
   const navigate = useInternalNavigate();
+  const formatAddresses = useFormatAddresses();
+  const { address: creator } = formatAddresses(moduleInfo.address);
 
-  const hex = unpadHexAddress(bech32AddressToHex(moduleInfo.address));
   return (
     <MobileCardTemplate
       onClick={() =>
         navigate({
           pathname: "/modules/[address]/[moduleName]",
           query: {
-            address: hex,
-            moduleName: moduleInfo.name,
+            address: moduleInfo.address,
+            moduleName: moduleInfo.moduleName,
           },
         })
       }
       topContent={
         <Flex direction="column">
           <MobileLabel label="Module Path" />
-          <ModulePathLink hexAddr={hex} moduleName={moduleInfo.name} />
+          <ModulePathLink
+            hexAddr={moduleInfo.address}
+            moduleName={moduleInfo.moduleName}
+          />
         </Flex>
       }
       middleContent={
         <Flex direction="column" gap={3}>
           <Grid templateColumns="repeat(2, 1fr)">
             <Flex direction="column">
-              <MobileLabel label="owner" />
+              <MobileLabel label="creator" />
               <ExplorerLink
-                value={moduleInfo.address}
+                value={creator}
                 type="user_address"
                 showCopyOnHover
               />

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

@@ -5,13 +5,9 @@ import { AmpEvent, track } from "lib/amplitude";
 import { useInternalNavigate } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CountBadge } from "lib/components/module";
+import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import type { ModuleInfo } from "lib/types";
-import {
-  bech32AddressToHex,
-  dateFromNow,
-  formatUTC,
-  unpadHexAddress,
-} from "lib/utils";
+import { dateFromNow, formatUTC } from "lib/utils";
 
 import { ModulePathLink } from "./ModulePathLink";
 
@@ -27,7 +23,8 @@ export const ModulesTableRow = ({
   isPublishedModules,
 }: ModulesTableRowProps) => {
   const navigate = useInternalNavigate();
-  const hex = unpadHexAddress(bech32AddressToHex(moduleInfo.address));
+  const formatAddresses = useFormatAddresses();
+  const { address: creator } = formatAddresses(moduleInfo.address);
 
   return (
     <Box w="full" minW="min-content">
@@ -41,37 +38,39 @@ export const ModulesTableRow = ({
           navigate({
             pathname: "/modules/[address]/[moduleName]",
             query: {
-              address: hex,
-              moduleName: moduleInfo.name,
+              address: moduleInfo.address,
+              moduleName: moduleInfo.moduleName,
             },
           })
         }
       >
         <TableRow>
-          <ModulePathLink hexAddr={hex} moduleName={moduleInfo.name} />
+          <ModulePathLink
+            hexAddr={moduleInfo.address}
+            moduleName={moduleInfo.moduleName}
+          />
         </TableRow>
         {isPublishedModules && (
           <>
             <TableRow>
-              <Text>{moduleInfo.name}</Text>
+              <Text>{moduleInfo.moduleName}</Text>
             </TableRow>
             <TableRow>
               <Flex gap={1} justifyContent="center" w="full">
-                <CountBadge count={moduleInfo.functions?.view} variant="view" />
                 <CountBadge
-                  count={moduleInfo.functions?.execute}
+                  count={moduleInfo.viewFunctions?.length}
+                  variant="view"
+                />
+                <CountBadge
+                  count={moduleInfo.executeFunctions?.length}
                   variant="execute"
                 />
               </Flex>
             </TableRow>
           </>
         )}
         <TableRow>
-          <ExplorerLink
-            value={moduleInfo.address}
-            type="user_address"
-            showCopyOnHover
-          />
+          <ExplorerLink value={creator} type="user_address" showCopyOnHover />
         </TableRow>
         {!isPublishedModules && (
           <>
@@ -111,8 +110,8 @@ export const ModulesTableRow = ({
                 navigate({
                   pathname: "/interact",
                   query: {
-                    address: hex,
-                    moduleName: moduleInfo.name,
+                    address: moduleInfo.address,
+                    moduleName: moduleInfo.moduleName,
                     functionType: "view",
                   },
                 });
@@ -129,8 +128,8 @@ export const ModulesTableRow = ({
                 navigate({
                   pathname: "/interact",
                   query: {
-                    address: hex,
-                    moduleName: moduleInfo.name,
+                    address: moduleInfo.address,
+                    moduleName: moduleInfo.moduleName,
                     functionType: "execute",
                   },
                 });

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

@@ -4,8 +4,7 @@ import { useState } from "react";
 import { useMobile } from "lib/app-provider";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { MobileTitle, TableTitle, ViewMore } from "lib/components/table";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { BechAddr, Option } from "lib/types";
+import type { BechAddr, IndexedModule, Option } from "lib/types";
 
 import { ModuleListsBody } from "./ModuleListsBody";
 

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

@@ -4,8 +4,7 @@ import { useMemo } from "react";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
 import { EmptyState, ErrorFetching } from "lib/components/state";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { BechAddr, Option } from "lib/types";
+import type { BechAddr, IndexedModule, Option } from "lib/types";
 
 interface ModuleListsBodyProps {
   address: BechAddr;

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

@@ -236,8 +236,8 @@ const AccountDetailsBody = ({
             Resources
           </CustomTab>
           <CustomTab
-            count={modulesData?.length}
-            isDisabled={modulesData?.length === 0}
+            count={modulesData?.total}
+            isDisabled={modulesData?.total === 0}
             onClick={handleTabChange(TabIndex.Modules, undefined)}
             isLoading={isModulesLoading}
             hidden={!move.enabled}
@@ -383,8 +383,8 @@ const AccountDetailsBody = ({
                 />
                 <ModuleLists
                   address={accountAddress}
-                  totalCount={modulesData?.length}
-                  modules={modulesData}
+                  totalCount={modulesData?.total}
+                  modules={modulesData?.items}
                   isLoading={isModulesLoading}
                   onViewMore={handleTabChange(TabIndex.Modules, undefined)}
                 />
@@ -499,8 +499,8 @@ const AccountDetailsBody = ({
           <TabPanel p={0}>
             <ModuleLists
               address={accountAddress}
-              totalCount={modulesData?.length}
-              modules={modulesData}
+              totalCount={modulesData?.total}
+              modules={modulesData?.items}
               isLoading={isModulesLoading}
             />
             <UserDocsLink

src/lib/pages/interact/component/FunctionSelectBody.tsx

@@ -2,8 +2,7 @@ import { Button, Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { ExposedFunction, Option } from "lib/types";
+import type { ExposedFunction, IndexedModule, Option } from "lib/types";
 
 import { ModuleContainer } from "./common";
 import { ExecuteArea, ViewArea } from "./form";

src/lib/pages/interact/component/FunctionSelectPanel.tsx

@@ -4,8 +4,7 @@ import { useMemo, useState } from "react";
 
 import InputWithIcon from "lib/components/InputWithIcon";
 import { EmptyState } from "lib/components/state";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { ExposedFunction, Option } from "lib/types";
+import type { ExposedFunction, IndexedModule, Option } from "lib/types";
 import { checkAvailability } from "lib/utils";
 
 import {

src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx

@@ -13,9 +13,8 @@ import { useEffect, useState } from "react";
 import { ModuleEmptyState } from "../common";
 import { useConvertHexAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { useAccountModules } from "lib/services/move/moduleService";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { BechAddr, HexAddr, Option } from "lib/types";
+import { useModulesByAddressLcd } from "lib/services/move/moduleService";
+import type { BechAddr, HexAddr, IndexedModule, Option } from "lib/types";
 import { isHexWalletAddress } from "lib/utils";
 
 import { ModuleSelectMainBody } from "./body";
@@ -49,17 +48,13 @@ export const ModuleSelectDrawer = ({
   });
   const [modules, setModules] = useState<IndexedModule[]>();
 
-  const { refetch } = useAccountModules({
+  const { refetch } = useModulesByAddressLcd({
     address: selectedAddress.hex,
-    moduleName: undefined,
-    functionName: undefined,
     options: {
       refetchOnWindowFocus: false,
       enabled: false,
       retry: false,
-      onSuccess: (data) => {
-        if (Array.isArray(data)) setModules(data);
-      },
+      onSuccess: (data) => setModules(data),
     },
   });
 

src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx

@@ -8,8 +8,7 @@ import { AmpEvent, track } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { FunctionCard } from "lib/components/module/FunctionCard";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { ExposedFunction, Option } from "lib/types";
+import type { ExposedFunction, IndexedModule, Option } from "lib/types";
 
 const functionGridBaseStyle: FlexProps = {
   border: "1px solid",

src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx

@@ -12,8 +12,7 @@ import { AmpEvent, track } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { ModuleCard } from "lib/components/module/ModuleCard";
-import type { IndexedModule } from "lib/services/move/moduleService";
-import type { Option } from "lib/types";
+import type { IndexedModule, Option } from "lib/types";
 
 import { ModuleFunctionBody } from "./ModuleFunctionBody";