Feat/code hash

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#372](https://github.com/alleslabs/celatone-frontend/pull/372) Add code hash to code details and upload section
 - [#329](https://github.com/alleslabs/celatone-frontend/pull/329) Add allowed user to store code flow
 - [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
 - [#274](https://github.com/alleslabs/celatone-frontend/pull/274) Add proposal to store code page

src/lib/components/upload/CodeHashBox.tsx

@@ -0,0 +1,36 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import type { Option } from "lib/types";
+
+interface CodeHashBoxProps {
+  codeHash: Option<string>;
+}
+
+export const CodeHashBox = ({ codeHash }: CodeHashBoxProps) => (
+  <Flex position="relative">
+    <Text
+      position="absolute"
+      variant="body3"
+      color="text.dark"
+      px="1px"
+      top="-10px"
+      left={3}
+    >
+      Code Hash
+    </Text>
+    <Flex
+      border="1px"
+      borderRadius="5px"
+      px={3}
+      py={4}
+      borderColor="gray.700"
+      bg="gray.800"
+      h="56px"
+      w="full"
+      overflowX="auto"
+      overflowY="hidden"
+    >
+      <Text>{codeHash}</Text>
+    </Flex>
+  </Flex>
+);

src/lib/components/upload/UploadSection.tsx

@@ -25,7 +25,9 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
+import { getCodeHash } from "lib/utils";
 
+import { CodeHashBox } from "./CodeHashBox";
 import { InstantiatePermissionRadio } from "./InstantiatePermissionRadio";
 import { SimulateMessageRender } from "./SimulateMessageRender";
 import { UploadCard } from "./UploadCard";
@@ -46,6 +48,7 @@ export const UploadSection = ({
   const postUploadTx = useUploadContractTx(isMigrate);
   const { validateUserAddress, validateContractAddress } = useValidateAddress();
 
+  const [codeHash, setCodeHash] = useState<string>();
   const [estimatedFee, setEstimatedFee] = useState<StdFee>();
   const [simulateStatus, setSimulateStatus] = useState<SimulateStatus>({
     status: "default",
@@ -161,6 +164,15 @@ export const UploadSection = ({
     JSON.stringify(addresses),
   ]);
 
+  // Generate hash value from wasm file
+  const setHashValue = useCallback(async () => {
+    setCodeHash(await getCodeHash(wasmFile));
+  }, [wasmFile]);
+
+  useEffect(() => {
+    setHashValue();
+  }, [setHashValue]);
+
   useEffect(() => {
     if (!wasmFile) {
       setDefaultBehavior();
@@ -173,7 +185,7 @@ export const UploadSection = ({
   }, [wasmFile, address, shouldNotSimulate, permission, setValue]);
 
   return (
-    <>
+    <Flex direction="column" gap={8} maxW="550px">
       {wasmFile ? (
         <UploadCard
           file={wasmFile}
@@ -185,6 +197,7 @@ export const UploadSection = ({
       ) : (
         <DropZone setFile={(file) => setValue("wasmFile", file)} />
       )}
+      <CodeHashBox codeHash={codeHash} />
       <ControllerInput
         name="codeName"
         control={control}
@@ -196,15 +209,14 @@ export const UploadSection = ({
         }}
         error={errors.codeName && getMaxCodeNameLengthError(codeName.length)}
         variant="floating"
-        my={8}
       />
       <InstantiatePermissionRadio
         control={control}
         setValue={setValue}
         trigger={trigger}
       />
 
-      <Box mt={10} width="full">
+      <Box width="full">
         {(simulateStatus.status !== "default" || isSimulating) && (
           <SimulateMessageRender
             value={
@@ -256,6 +268,6 @@ export const UploadSection = ({
           Upload
         </Button>
       </Flex>
-    </>
+    </Flex>
   );
 };

src/lib/model/code.ts

@@ -1,14 +1,16 @@
 import { useWallet } from "@cosmos-kit/react";
+import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import { useChainId } from "lib/app-provider";
+import { useChainId, useLCDEndpoint } from "lib/app-provider";
 import type { PermissionFilterValue } from "lib/hooks";
 import {
   useUserKey,
   useCodePermissionFilter,
   useCodeSearchFilter,
 } from "lib/hooks";
 import { useCodeStore } from "lib/providers/store";
+import { getCodeIdInfo } from "lib/services/code";
 import {
   useCodeDataByCodeId,
   useCodeListByCodeIds,
@@ -32,25 +34,46 @@ export interface CodeDataState {
   isLoading: boolean;
   chainId: string;
   codeData: Option<CodeData>;
+  lcdCodeData: {
+    codeHash: Option<string>;
+    isLcdCodeLoading: boolean;
+    isLcdCodeError: unknown;
+  };
   publicProject: {
     publicCodeData: Option<PublicCode>;
     publicDetail: Option<PublicDetail>;
   };
 }
 
 export const useCodeData = (codeId: number): CodeDataState => {
+  const endpoint = useLCDEndpoint();
+
   const { data: codeInfo, isLoading } = useCodeDataByCodeId(codeId);
   const { data: publicCodeInfo } = usePublicProjectByCodeId(codeId);
   const { data: publicInfoBySlug } = usePublicProjectBySlug(
     publicCodeInfo?.slug
   );
+  const {
+    data: lcdCode,
+    isLoading: isLcdCodeLoading,
+    error: isLcdCodeError,
+  } = useQuery(
+    ["query", "code_data", endpoint, codeId],
+    async () => getCodeIdInfo(endpoint, codeId),
+    { enabled: Boolean(endpoint) && Boolean(codeId), retry: false }
+  );
 
   const chainId = useChainId();
 
   return {
     isLoading,
     chainId,
     codeData: codeInfo as CodeData,
+    lcdCodeData: {
+      codeHash: lcdCode?.code_info.data_hash,
+      isLcdCodeLoading,
+      isLcdCodeError,
+    },
     publicProject: {
       publicCodeData: publicCodeInfo,
       publicDetail: publicInfoBySlug?.details,

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

@@ -1,4 +1,4 @@
-import { Divider, Flex, Heading, Text, Image } from "@chakra-ui/react";
+import { Divider, Flex, Heading, Text, Image, Spinner } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -15,6 +15,7 @@ import type { CodeDataState } from "lib/model/code";
 import { useCodeData } from "lib/model/code";
 import { useCodeStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import type { Option } from "lib/types";
 import { AccessConfigPermission } from "lib/types";
 import { getCw2Info, getFirstQueryParam, isCodeId } from "lib/utils";
 
@@ -29,11 +30,37 @@ interface CodeDetailsBodyProps {
 
 const InvalidCode = () => <InvalidState title="Code does not exist" />;
 
+const CodeHashInfo = ({
+  isLcdCodeLoading,
+  isLcdCodeError,
+  codeHash,
+}: {
+  isLcdCodeLoading: boolean;
+  isLcdCodeError: unknown;
+  codeHash: Option<string>;
+}) => {
+  if (isLcdCodeLoading) return <Spinner size="sm" />;
+  if (codeHash)
+    return (
+      <CopyLink value={codeHash} amptrackSection="code_hash" type="code_hash" />
+    );
+  return (
+    <Text color="text.disabled" variant="body2">
+      {isLcdCodeError ? "Error fetching data" : "N/A"}
+    </Text>
+  );
+};
+
 const CodeDetailsBody = observer(
   ({ codeDataState, codeId }: CodeDetailsBodyProps) => {
     const { getCodeLocalInfo } = useCodeStore();
     const localCodeInfo = getCodeLocalInfo(codeId);
-    const { chainId, codeData, publicProject } = codeDataState;
+    const {
+      chainId,
+      codeData,
+      publicProject,
+      lcdCodeData: { codeHash, isLcdCodeLoading, isLcdCodeError },
+    } = codeDataState;
 
     if (!codeData) return <InvalidCode />;
 
@@ -107,6 +134,16 @@ const CodeDetailsBody = observer(
                 type="code_id"
               />
             </Flex>
+            <Flex gap={2}>
+              <Text fontWeight={500} color="text.dark" variant="body2">
+                Code Hash:
+              </Text>
+              <CodeHashInfo
+                isLcdCodeError={isLcdCodeError}
+                isLcdCodeLoading={isLcdCodeLoading}
+                codeHash={codeHash}
+              />
+            </Flex>
             <Flex gap={2}>
               <Text fontWeight={500} color="text.dark" variant="body2">
                 CW2 Info:

src/lib/pages/proposal/constants.tsx

@@ -127,7 +127,6 @@ export const PROPOSAL_STORE_CODE_TEXT = {
   runAsHelperText: "This address will be stored as code creator.",
   runAsRequired: "Creator is required",
   uploadHeader: "Upload Wasm File",
-  codeHashHeader: "Code Hash",
   unpinLabel: "Unpin code",
   unpinTooltip:
     "Unpin removes the guarantee of a contract to be pinned. After calling this, the code may or may not remain in memory depending on the implementor's choice. Unpin is idempotent.",

src/lib/pages/proposal/store-code/index.tsx

@@ -9,7 +9,6 @@ import {
   Checkbox,
   Box,
 } from "@chakra-ui/react";
-import { Sha256 } from "@cosmjs/crypto";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
 import { useRouter } from "next/router";
@@ -41,6 +40,7 @@ import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
 import { StickySidebar } from "lib/components/StickySidebar";
 import { Tooltip } from "lib/components/Tooltip";
+import { CodeHashBox } from "lib/components/upload/CodeHashBox";
 import { InstantiatePermissionRadio } from "lib/components/upload/InstantiatePermissionRadio";
 import { SimulateMessageRender } from "lib/components/upload/SimulateMessageRender";
 import { UploadCard } from "lib/components/upload/UploadCard";
@@ -64,7 +64,11 @@ import type {
   UploadSectionState,
 } from "lib/types";
 import { AccessType } from "lib/types";
-import { composeStoreCodeProposalMsg, getAmountToVote } from "lib/utils";
+import {
+  composeStoreCodeProposalMsg,
+  getAmountToVote,
+  getCodeHash,
+} from "lib/utils";
 
 interface StoreCodeProposalState {
   title: string;
@@ -231,14 +235,7 @@ const StoreCodeProposal = () => {
 
   // Generate hash value from wasm file
   const setHashValue = useCallback(async () => {
-    if (wasmFile) {
-      const wasmFileBytes = new Sha256(
-        new Uint8Array(await wasmFile.arrayBuffer())
-      ).digest();
-      setValue("codeHash", Buffer.from(wasmFileBytes).toString("hex"));
-    } else {
-      setValue("codeHash", "");
-    }
+    setValue("codeHash", await getCodeHash(wasmFile));
   }, [setValue, wasmFile]);
 
   useEffect(() => {
@@ -443,33 +440,7 @@ const StoreCodeProposal = () => {
                 )}
 
                 {/* Code hash  */}
-                <Flex position="relative">
-                  <Text
-                    position="absolute"
-                    variant="body3"
-                    color="text.dark"
-                    px="1px"
-                    top="-10px"
-                    left={3}
-                  >
-                    {PROPOSAL_STORE_CODE_TEXT.codeHashHeader}
-                  </Text>
-                  <Flex
-                    border="1px"
-                    borderRadius="5px"
-                    px={3}
-                    py={4}
-                    borderColor="gray.700"
-                    bg="gray.800"
-                    h="56px"
-                    w="full"
-                    overflowX="auto"
-                    overflowY="hidden"
-                  >
-                    <Text>{codeHash}</Text>
-                  </Flex>
-                </Flex>
-
+                <CodeHashBox codeHash={codeHash} />
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox

src/lib/utils/codeHash.ts

@@ -0,0 +1,13 @@
+import { Sha256 } from "@cosmjs/crypto";
+
+import type { Option } from "lib/types";
+
+export const getCodeHash = async (wasmFile: Option<File>) => {
+  if (wasmFile) {
+    const wasmFileBytes = new Sha256(
+      new Uint8Array(await wasmFile.arrayBuffer())
+    ).digest();
+    return Buffer.from(wasmFileBytes).toString("hex");
+  }
+  return "";
+};

src/lib/utils/index.ts

@@ -28,3 +28,4 @@ export * from "./executeTags";
 export * from "./cw2";
 export * from "./bech32";
 export * from "./proposal";
+export * from "./codeHash";