Merge pull request #952 from alleslabs/feature/cfe-417-module-detail

[CFE-417]: Feature - module detail
alleslabs · Jun 7, 2024 · bbda7e7 · bbda7e7
2 parents d729a6b + 00b73a2
commit bbda7e7
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 162 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#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
 - [#956](https://github.com/alleslabs/celatone-frontend/pull/956) Add landlord-1 network
 - [#954](https://github.com/alleslabs/celatone-frontend/pull/954) Add gas token for initiation-1

diff --git a/src/lib/pages/module-details/components/ModuleActions.tsx b/src/lib/pages/module-details/components/ModuleActions.tsx
@@ -2,6 +2,7 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { MouseEventHandler } from "react";
 
 import { TabIndex } from "../types";
+import { useTierConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
 import type { Option } from "lib/types";
@@ -15,6 +16,7 @@ interface ActionInfo {
   count: Option<number>;
   onClick: MouseEventHandler<HTMLDivElement>;
   disabled: boolean;
+  hidden: Option<boolean>;
 }
 
 interface ModuleActionsProps {
@@ -30,6 +32,8 @@ export const ModuleActions = ({
   allTxsCount,
   onSelectAction,
 }: ModuleActionsProps) => {
+  const isFulTier = useTierConfig() === "full";
+
   const actionList: ActionInfo[] = [
     {
       icon: "query" as IconKeys,
@@ -38,6 +42,7 @@ export const ModuleActions = ({
       count: viewFns,
       onClick: () => onSelectAction(TabIndex.Function, FunctionTypeTabs.VIEW),
       disabled: viewFns === 0,
+      hidden: false,
     },
     {
       icon: "execute" as IconKeys,
@@ -47,6 +52,7 @@ export const ModuleActions = ({
       onClick: () =>
         onSelectAction(TabIndex.Function, FunctionTypeTabs.EXECUTE),
       disabled: executeFns === 0,
+      hidden: false,
     },
     {
       icon: "list" as IconKeys,
@@ -55,6 +61,7 @@ export const ModuleActions = ({
       count: allTxsCount,
       onClick: () => onSelectAction(TabIndex.TxsHistories),
       disabled: allTxsCount === 0,
+      hidden: !isFulTier,
     },
   ];
 
@@ -74,6 +81,7 @@ export const ModuleActions = ({
           w="full"
           alignItems="center"
           justifyContent="space-between"
+          display={item.hidden ? "none" : "flex"}
           {...(item.disabled
             ? {
                 bg: "gray.900",

diff --git a/src/lib/pages/module-details/components/ModuleInfo.tsx b/src/lib/pages/module-details/components/ModuleInfo.tsx
@@ -3,36 +3,18 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { CustomIcon } from "lib/components/icon";
 import { ModuleSourceCode } from "lib/components/module";
 import type { ModuleVerificationInternal } from "lib/services/types";
-import type {
-  HexAddr,
-  Nullable,
-  Option,
-  Proposal,
-  UpgradePolicy,
-} from "lib/types";
+import type { ModuleData, Nullable, Option } from "lib/types";
 
 import { ModuleInfoBody } from "./ModuleInfoBody";
 
 export interface ModuleInfoProps {
-  vmAddress: HexAddr;
-  upgradePolicy: UpgradePolicy;
-  transaction: Nullable<string>;
-  proposal: Nullable<Pick<Proposal, "id" | "title">>;
-  isRepublished: boolean;
-  blockHeight: number;
-  blockTimestamp: Date;
   verificationData: Option<Nullable<ModuleVerificationInternal>>;
+  moduleData: Partial<ModuleData>;
 }
 
 export const ModuleInfo = ({
-  vmAddress,
-  upgradePolicy,
-  transaction,
-  proposal,
-  isRepublished,
-  blockHeight,
-  blockTimestamp,
   verificationData,
+  moduleData,
 }: ModuleInfoProps) => (
   <Flex flexDirection="column" gap={4}>
     <Flex justifyContent="space-between" alignItems="center" w="full">
@@ -49,15 +31,7 @@ export const ModuleInfo = ({
         </Flex>
       )}
     </Flex>
-    <ModuleInfoBody
-      vmAddress={vmAddress}
-      upgradePolicy={upgradePolicy}
-      transaction={transaction}
-      proposal={proposal}
-      isRepublished={isRepublished}
-      blockHeight={blockHeight}
-      blockTimestamp={blockTimestamp}
-    />
+    <ModuleInfoBody moduleData={moduleData} />
     <ModuleSourceCode sourceCode={verificationData?.source} />
   </Flex>
 );
diff --git a/src/lib/pages/module-details/components/ModuleInfoBody.tsx b/src/lib/pages/module-details/components/ModuleInfoBody.tsx
@@ -1,35 +1,43 @@
 import { Grid } from "@chakra-ui/react";
 
+import { useTierConfig } from "lib/app-provider";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
+import type { ModuleData } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 import type { ModuleInfoProps } from "./ModuleInfo";
 
 const ModuleInfoBodyPublishedAndRepublished = ({
-  transaction,
-  proposal,
-  isRepublished,
-}: Pick<ModuleInfoProps, "transaction" | "proposal" | "isRepublished">) => {
+  moduleData,
+}: {
+  moduleData: Partial<ModuleData>;
+}) => {
+  const { isRepublished, recentPublishTransaction, recentPublishProposal } =
+    moduleData;
   const labelPrefix = isRepublished ? "Latest Republished" : "Published";
 
-  if (transaction) {
+  if (recentPublishTransaction) {
     return (
       <LabelText label={`${labelPrefix} Transaction`}>
-        <ExplorerLink type="tx_hash" value={transaction} showCopyOnHover />
+        <ExplorerLink
+          type="tx_hash"
+          value={recentPublishTransaction}
+          showCopyOnHover
+        />
       </LabelText>
     );
   }
 
-  if (proposal && proposal.id) {
+  if (recentPublishProposal) {
     return (
       <LabelText
         label={`${labelPrefix} Proposal ID`}
-        helperText1={proposal.title}
+        helperText1={recentPublishProposal.title}
       >
         <ExplorerLink
           type="proposal_id"
-          value={proposal.id.toString()}
+          value={recentPublishProposal.id.toString()}
           showCopyOnHover
         />
       </LabelText>
@@ -40,45 +48,55 @@ const ModuleInfoBodyPublishedAndRepublished = ({
 };
 
 export const ModuleInfoBody = ({
-  vmAddress,
-  upgradePolicy,
-  transaction,
-  proposal,
-  isRepublished,
-  blockHeight,
-  blockTimestamp,
-}: Omit<ModuleInfoProps, "verificationData">) => (
-  <Grid
-    gridTemplateColumns={{ base: "repeat(1, 1fr)", md: "repeat(4, 1fr)" }}
-    padding={4}
-    border="1px solid"
-    borderColor="gray.700"
-    borderRadius={8}
-    gap={6}
-  >
-    <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
-    <LabelText label="Published by" helperText1="(Wallet Address)">
-      <ExplorerLink type="user_address" value={vmAddress} showCopyOnHover />
-    </LabelText>
-    <LabelText
-      label="Published Block Height"
-      helperText1={formatUTC(blockTimestamp)}
-      helperText2={dateFromNow(blockTimestamp)}
+  moduleData,
+}: Omit<ModuleInfoProps, "verificationData">) => {
+  const isFullTier = useTierConfig() === "full";
+  const {
+    address,
+    upgradePolicy,
+    recentPublishBlockHeight,
+    recentPublishBlockTimestamp,
+  } = moduleData;
+
+  return (
+    <Grid
+      gridTemplateColumns={{ base: "repeat(1, 1fr)", md: "repeat(4, 1fr)" }}
+      padding={4}
+      border="1px solid"
+      borderColor="gray.700"
+      borderRadius={8}
+      gap={6}
     >
-      {blockHeight ? (
-        <ExplorerLink
-          type="block_height"
-          value={blockHeight.toString()}
-          showCopyOnHover
-        />
-      ) : (
-        "N/A"
+      <LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
+      <LabelText label="Published by" helperText1="(Wallet Address)">
+        {address ? (
+          <ExplorerLink type="user_address" value={address} showCopyOnHover />
+        ) : (
+          "N/A"
+        )}
+      </LabelText>
+      {isFullTier && (
+        <>
+          {recentPublishBlockTimestamp && (
+            <LabelText
+              label="Published Block Height"
+              helperText1={formatUTC(recentPublishBlockTimestamp)}
+              helperText2={dateFromNow(recentPublishBlockTimestamp)}
+            >
+              {recentPublishBlockHeight ? (
+                <ExplorerLink
+                  type="block_height"
+                  value={recentPublishBlockHeight.toString()}
+                  showCopyOnHover
+                />
+              ) : (
+                "N/A"
+              )}
+            </LabelText>
+          )}
+          <ModuleInfoBodyPublishedAndRepublished moduleData={moduleData} />
+        </>
       )}
-    </LabelText>
-    <ModuleInfoBodyPublishedAndRepublished
-      transaction={transaction}
-      proposal={proposal}
-      isRepublished={isRepublished}
-    />
-  </Grid>
-);
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -8,6 +8,7 @@ import {
   useCurrentChain,
   useInternalNavigate,
   useMobile,
+  useTierConfig,
 } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyButton } from "lib/components/copy";
@@ -16,11 +17,11 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 import { UpgradePolicy } from "lib/types";
-import type { HexAddr, ModuleData } from "lib/types";
+import type { HexAddr, IndexedModule } from "lib/types";
 import { isHexModuleAddress, isHexWalletAddress, truncate } from "lib/utils";
 
 interface ModuleTopProps {
-  moduleData: ModuleData;
+  moduleData: IndexedModule;
   isVerified: boolean;
 }
 
@@ -35,6 +36,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const { address } = useCurrentChain();
+  const isFullTier = useTierConfig() === "full";
   const { convertHexWalletAddress, convertHexModuleAddress } =
     useConvertHexAddress();
 
@@ -224,23 +226,25 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             type="module_path"
           />
         </Flex>
-        <Flex
-          mt={{ base: 2, md: 0 }}
-          gap={{ base: 0, md: 2 }}
-          direction={{ base: "column", md: "row" }}
-        >
-          <Text {...baseTextStyle} color="text.main">
-            Creator:
-          </Text>
-          <ExplorerLink
-            value={moduleAddress}
-            ampCopierSection="module_top"
-            textFormat="normal"
-            maxWidth="fit-content"
-            type="user_address"
-            fixedHeight={false}
-          />
-        </Flex>
+        {isFullTier && (
+          <Flex
+            mt={{ base: 2, md: 0 }}
+            gap={{ base: 0, md: 2 }}
+            direction={{ base: "column", md: "row" }}
+          >
+            <Text {...baseTextStyle} color="text.main">
+              Creator:
+            </Text>
+            <ExplorerLink
+              value={moduleAddress}
+              ampCopierSection="module_top"
+              textFormat="normal"
+              maxWidth="fit-content"
+              type="user_address"
+              fixedHeight={false}
+            />
+          </Flex>
+        )}
         <Flex
           mt={{ base: 2, md: 0 }}
           gap={{ base: 0, md: 2 }}

diff --git a/src/lib/pages/module-details/components/tables/index.tsx b/src/lib/pages/module-details/components/tables/index.tsx
@@ -34,6 +34,8 @@ interface ModuleTablesProps {
   onViewMore?: (nextTab: ModuleTablesTabIndex) => void;
 }
 
+const tableHeaderId = "moduleDetailsTableHeader";
+
 export const ModuleTables = ({
   vmAddress,
   moduleName,
@@ -44,7 +46,6 @@ export const ModuleTables = ({
   setTab,
   onViewMore,
 }: ModuleTablesProps) => {
-  const tableHeaderId = "moduleDetailsTableHeader";
   const gov = useGovConfig({ shouldRedirect: false });
 
   const handleOnViewMore = useCallback(