Skip to content

Commit

Permalink
Merge pull request #899 from alleslabs/feature/cfe-309-module-details
Browse files Browse the repository at this point in the history
[CFE-309]: Refactor(pages): refactor module details service files
  • Loading branch information
Poafs1 committed Apr 30, 2024
2 parents f1fa9df + 8ff700c commit be8ec1c
Show file tree
Hide file tree
Showing 23 changed files with 597 additions and 876 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Improvements

- [#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
- [#872](https://github.com/alleslabs/celatone-frontend/pull/872) Change Query/Execute page to Interact Contract
- [#895](https://github.com/alleslabs/celatone-frontend/pull/895) Show collection address and creator on the collection list page
Expand Down
9 changes: 3 additions & 6 deletions src/lib/app-provider/env.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,6 @@ export enum CELATONE_QUERY_KEYS {
PROPOSAL_VALIDATOR_VOTES = "CELATONE_QUERY_PROPOSAL_VALIDATOR_VOTES",
PROPOSAL_ANSWER_COUNTS = "CELATONE_QUERY_PROPOSAL_ANSWER_COUNTS",
RELATED_PROPOSALS_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_RELATED_PROPOSALS_BY_CONTRACT_ADDRESS",
PROPOSALS_BY_MODULE_ID = "CELATONE_QUERY_PROPOSALS_BY_MODULE_ID",
PROPOSALS_COUNT_BY_MODULE_ID = "CELATONE_QUERY_PROPOSALS_COUNT_BY_MODULE_ID",
PROPOSALS_BY_ADDRESS = "CELATONE_QUERY_PROPOSALS_BY_ADDRESS",
PROPOSALS = "CELATONE_QUERY_PROPOSALS",
PROPOSAL_PARAMS = "CELATONE_QUERY_PROPOSAL_PARAMS",
Expand Down Expand Up @@ -106,13 +104,12 @@ export enum CELATONE_QUERY_KEYS {
MODULE_VERIFICATION = "CELATONE_QUERY_MODULE_VERIFICATION",
FUNCTION_VIEW = "CELATONE_QUERY_FUNCTION_VIEW",
MODULE_DECODE = "CELATONE_QUERY_MODULE_DECODE",
MODULE_ID = "CELATONE_QUERY_MODULE_ID",
MODULE_TABLE_COUNTS = "CELATONE_QUERY_MODULE_TABLE_COUNTS",
MODULE_TXS = "CELATONE_QUERY_MODULE_TXS",
MODULE_TXS_COUNT = "CELATONE_QUERY_MODULE_TXS_COUNT",
MODULE_HISTORIES = "CELATONE_QUERY_MODULE_HISTORIES",
MODULE_HISTORIES_COUNT = "CELATONE_QUERY_MODULE_HISTORIES_COUNT",
MODULE_DETAILS = "CELATONE_QUERY_MODULE_DETAILS",
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
Expand Down
184 changes: 34 additions & 150 deletions src/lib/pages/module-details/components/ModuleInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,162 +1,38 @@
import { chakra, Flex, Heading, Text } from "@chakra-ui/react";
import { Flex, Heading, Text } from "@chakra-ui/react";

import { ExplorerLink } from "lib/components/ExplorerLink";
import { CustomIcon } from "lib/components/icon";
import { LabelText } from "lib/components/LabelText";
import { Loading } from "lib/components/Loading";
import { ModuleSourceCode } from "lib/components/module";
import type { ModuleVerificationInternal } from "lib/services/move/module";
import type {
IndexedModule,
ModuleInitialPublishInfo,
} from "lib/services/move/moduleService";
import type { Nullable, Option } from "lib/types";
import { dateFromNow, formatUTC } from "lib/utils";

const DetailsContainer = chakra(Flex, {
baseStyle: {
p: 4,
borderRadius: "8px",
border: "1px solid",
borderColor: "gray.700",
columnGap: 6,
"& > div": { flex: 1 },
},
});

interface ModuleInfoProps {
moduleDetails: Option<ModuleInitialPublishInfo>;
upgradePolicy: IndexedModule["upgradePolicy"];
HexAddr,
Nullable,
Option,
Proposal,
UpgradePolicy,
} from "lib/types";

import { ModuleInfoBody } from "./ModuleInfoBody";

export interface ModuleInfoProps {
vmAddress: HexAddr;
upgradePolicy: UpgradePolicy;
transaction: Option<string>;
proposal: Nullable<Pick<Proposal, "id" | "title">>;
isRepublished: boolean;
blockHeight: number;
blockTimestamp: Date;
verificationData: Option<Nullable<ModuleVerificationInternal>>;
isLoading: boolean;
}

const InitRender = ({
initTxHash,
initProposalTitle,
initProposalId,
createdHeight,
}: {
initTxHash: ModuleInitialPublishInfo["initTxHash"];
initProposalTitle: ModuleInitialPublishInfo["initProposalTitle"];
initProposalId: ModuleInitialPublishInfo["initProposalId"];
createdHeight: ModuleInitialPublishInfo["createdHeight"];
}) => {
if (initTxHash) {
return (
<LabelText label="Initial Published Transaction">
<ExplorerLink
type="tx_hash"
value={initTxHash.toUpperCase()}
showCopyOnHover
fixedHeight
/>
</LabelText>
);
}

if (createdHeight === 0)
return (
<LabelText label="Created by">
<Text variant="body2">Genesis</Text>
</LabelText>
);

if (initProposalTitle && initProposalId) {
return (
<LabelText
label="Initial Published Proposal ID"
helperText1={initProposalTitle}
>
<ExplorerLink
type="proposal_id"
value={initProposalId.toString()}
showCopyOnHover
fixedHeight
/>
</LabelText>
);
}

return (
<LabelText label="Instantiate Transaction">
<Text variant="body2">N/A</Text>
</LabelText>
);
};

const ModuleInfoBody = ({
moduleDetails,
isLoading,
upgradePolicy,
}: Omit<ModuleInfoProps, "verificationData">) => {
if (isLoading)
return (
<DetailsContainer>
<Loading my={0} />
</DetailsContainer>
);
if (!moduleDetails)
return (
<DetailsContainer>
<Text variant="body2" color="text.dark" mx="auto">
Error fetching data
</Text>
</DetailsContainer>
);

const {
createdHeight,
createdTime,
publisherVmAddress,
initProposalId,
initProposalTitle,
initTxHash,
} = moduleDetails;

return (
<DetailsContainer
flexDirection={{ base: "column", md: "row" }}
gap={{ base: 6, md: 0 }}
>
<LabelText label="Upgrade Policy">{upgradePolicy}</LabelText>
<LabelText
label="Initial Published Block Height"
helperText1={createdTime ? formatUTC(createdTime) : undefined}
helperText2={createdTime ? dateFromNow(createdTime) : undefined}
>
{createdHeight !== undefined ? (
<ExplorerLink
type="block_height"
value={createdHeight.toString()}
showCopyOnHover
fixedHeight
/>
) : (
"N/A"
)}
</LabelText>
<LabelText label="Initial Published by" helperText1="(VM Address)">
<ExplorerLink
type="user_address"
value={publisherVmAddress}
showCopyOnHover
fixedHeight
/>
</LabelText>
<InitRender
initProposalId={initProposalId}
initProposalTitle={initProposalTitle}
initTxHash={initTxHash}
createdHeight={createdHeight}
/>
</DetailsContainer>
);
};

export const ModuleInfo = ({
vmAddress,
upgradePolicy,
transaction,
proposal,
isRepublished,
blockHeight,
blockTimestamp,
verificationData,
...details
}: ModuleInfoProps) => (
<Flex flexDirection="column" gap={4}>
<Flex justifyContent="space-between" alignItems="center" w="full">
Expand All @@ -173,7 +49,15 @@ export const ModuleInfo = ({
</Flex>
)}
</Flex>
<ModuleInfoBody {...details} />
<ModuleInfoBody
vmAddress={vmAddress}
upgradePolicy={upgradePolicy}
transaction={transaction}
proposal={proposal}
isRepublished={isRepublished}
blockHeight={blockHeight}
blockTimestamp={blockTimestamp}
/>
<ModuleSourceCode sourceCode={verificationData?.source} />
</Flex>
);
84 changes: 84 additions & 0 deletions src/lib/pages/module-details/components/ModuleInfoBody.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Grid } from "@chakra-ui/react";

import { ExplorerLink } from "lib/components/ExplorerLink";
import { LabelText } from "lib/components/LabelText";
import { dateFromNow, formatUTC } from "lib/utils";

import type { ModuleInfoProps } from "./ModuleInfo";

const ModuleInfoBodyPublishedAndRepublished = ({
transaction,
proposal,
isRepublished,
}: Pick<ModuleInfoProps, "transaction" | "proposal" | "isRepublished">) => {
const labelPrefix = isRepublished ? "Latest Republished" : "Published";

if (transaction) {
return (
<LabelText label={`${labelPrefix} Transaction`}>
<ExplorerLink type="tx_hash" value={transaction} showCopyOnHover />
</LabelText>
);
}

if (proposal && proposal.id) {
return (
<LabelText
label={`${labelPrefix} Proposal ID`}
helperText1={proposal.title}
>
<ExplorerLink
type="proposal_id"
value={proposal.id.toString()}
showCopyOnHover
/>
</LabelText>
);
}

return <LabelText label="Created by">Genesis</LabelText>;
};

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)}
>
{blockHeight ? (
<ExplorerLink
type="block_height"
value={blockHeight.toString()}
showCopyOnHover
/>
) : (
"N/A"
)}
</LabelText>
<ModuleInfoBodyPublishedAndRepublished
transaction={transaction}
proposal={proposal}
isRepublished={isRepublished}
/>
</Grid>
);
Loading

0 comments on commit be8ec1c

Please sign in to comment.