Merge pull request #1060 from alleslabs/feat/contract-verify-ui-upload

Feat/contract verify UI upload

CHANGELOG.md

@@ -45,6 +45,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#1077](https://github.com/alleslabs/celatone-frontend/pull/1077) Add download minitia custom JSON
 - [#1074](https://github.com/alleslabs/celatone-frontend/pull/1074) Add custom minitia upload JSON page
 - [#1002](https://github.com/alleslabs/celatone-frontend/pull/1002) Add contract verification modal
+- [#1060](https://github.com/alleslabs/celatone-frontend/pull/1060) Handle wasm verify info on various pages e.g. deploy/migrate flow pages, code/contract pages
+- [#1083](https://github.com/alleslabs/celatone-frontend/pull/1083) Add wasm verify badges on public pages and contract list pages
 
 ### Improvements
 

package.json

@@ -46,7 +46,7 @@
     "@amplitude/analytics-browser": "^2.3.3",
     "@amplitude/analytics-types": "^2.3.0",
     "@amplitude/plugin-user-agent-enrichment-browser": "^1.0.0",
-    "@chain-registry/types": "0.45.36",
+    "@chain-registry/types": "0.45.20",
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/card": "^2.2.0",
     "@chakra-ui/icons": "^2.1.1",
@@ -141,7 +141,7 @@
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@chain-registry/types": "0.45.36"
+    "@chain-registry/types": "0.45.20"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.1.0",

src/lib/app-fns/tx/storeCode.tsx

@@ -22,7 +22,7 @@ import { sendingTx } from "./common/sending";
 export interface StoreCodeTxInternalResult {
   codeDisplayName: string;
   codeId: string;
-  codeHash: string;
+  codeHash: Option<string>;
   txHash: string;
   txFee: Option<string>;
 }
@@ -67,7 +67,7 @@ export const storeCodeTx = ({
       };
 
       const codeId = findAttr(mimicLog, "store_code", "code_id") ?? "0";
-      const codeHash = findAttr(mimicLog, "store_code", "code_checksum") ?? "";
+      const codeHash = findAttr(mimicLog, "store_code", "code_checksum");
       const txFee = txInfo.events.find((e) => e.type === "tx")?.attributes[0]
         .value;
 

src/lib/app-provider/env.ts

@@ -42,12 +42,10 @@ export enum CELATONE_QUERY_KEYS {
   CONTRACT_STATES_LCD = "CELATONE_QUERY_CONTRACT_STATES_LCD",
   CONTRACTS_BY_CODE_ID = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID",
   CONTRACTS_BY_CODE_ID_LCD = "CELATONE_QUERY_CONTRACTS_BY_CODE_ID_LCD",
-  CONTRACTS_BY_ADMIN = "CELATONE_QUERY_CONTRACT_BY_ADMIN",
   INSTANTIATED_CONTRACTS_BY_ADDRESS = "CELATONE_QUERY_INSTANTIATED_CONTRACTS_BY_ADDRESS",
   INSTANTIATED_CONTRACTS_BY_ADDRESS_LCD = "CELATONE_QUERY_INSTANTIATED_CONTRACTS_BY_ADDRESS_LCD",
   ADMIN_CONTRACTS_BY_ADDRESS = "CELATONE_QUERY_ADMIN_CONTRACTS_BY_ADDRESS",
-  INSTANTIATED_COUNT_BY_WALLET_ADDRESS = "CELATONE_QUERY_INSTANTIATED_COUNT_BY_WALLET_ADDRESS",
-  INSTANTIATED_LIST_BY_WALLET_ADDRESS = "CELATONE_QUERY_INSTANTIATED_LIST_BY_WALLET_ADDRESS",
+  ALL_ADMIN_CONTRACTS_BY_ADDRESS = "CELATONE_QUERY_ALL_ADMIN_CONTRACTS_BY_ADDRESS",
   ADMINS_BY_CONTRACTS = "CELATONE_QUERY_ADMINS_BY_CONTRACTS",
   CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS = "CELATONE_QUERY_CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS",
   CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS_LCD = "CELATONE_QUERY_CONTRACT_MIGRATION_HISTORIES_BY_CONTRACT_ADDRESS_LCD",
@@ -167,12 +165,12 @@ export enum CELATONE_QUERY_KEYS {
   NFTS_BY_ACCOUNT_BY_COLLECTION = "CELATONE_QUERY_NFTS_BY_ACCOUNT_BY_COLLECTION",
   NFTS_BY_ACCOUNT_BY_COLLECTION_SEQUENCER = "CELATONE_QUERY_NFTS_BY_ACCOUNT_BY_COLLECTION_SEQUENCER",
   // VERIFICATION
+  WASM_VERIFICATION_INFOS = "CELATONE_QUERY_WASM_VERIFICATION_INFOS",
+  WASM_RELATED_VERIFICATION_INFOS = "CELATONE_QUERY_WASM_RELATED_VERIFICATION_INFOS",
+  MODULE_VERIFY_INFO = "CELATONE_QUERY_MODULE_VERIFY_INFO",
   MOVE_VERIFY_INFO = "CELATONE_QUERY_MOVE_VERIFY_INFO",
   MOVE_VERIFY_INFOS_BY_ADDRESS = "CELATONE_QUERY_MOVE_VERIFY_INFOS_BY_ADDRESS",
   MOVE_VERIFY_TASK_BY_TASK_ID = "CELATONE_QUERY_MOVE_VERIFY_TASK_BY_TASK_ID",
-  WASM_VERIFICATION_INFOS = "CELATONE_QUERY_WASM_VERIFICATION_INFO",
-  WASM_RELATED_VERIFICATION_INFOS = "CELATONE_QUERY_WASM_RELATED_VERIFICATION_INFOS",
-  MODULE_VERIFY_INFO = "CELATONE_QUERY_MODULE_VERIFY_INFO",
   // CHAIN CONFIGS
   CHAIN_CONFIGS = "CELATONE_QUERY_CHAIN_CONFIGS",
   // DOCKER

src/lib/components/ContractSelectSection.tsx

@@ -178,10 +178,10 @@ export const ContractSelectSection = observer(
       onError: () => reset(defaultValues),
     });
 
-    const { data: derivedWasmVerifyInfo } = useDerivedWasmVerifyInfo(
-      codeId,
-      codeHash
-    );
+    const {
+      data: derivedWasmVerifyInfo,
+      isLoading: isDerivedWasmVerifyInfoLoading,
+    } = useDerivedWasmVerifyInfo(codeId, codeHash);
 
     useEffect(() => {
       if (!contractLocalInfo) {
@@ -201,7 +201,7 @@ export const ContractSelectSection = observer(
 
     return (
       <>
-        {isFetching && <LoadingOverlay />}
+        {(isFetching || isDerivedWasmVerifyInfoLoading) && <LoadingOverlay />}
         <Flex
           mb={style.container}
           borderWidth="thin"
@@ -237,6 +237,7 @@ export const ContractSelectSection = observer(
                       relatedVerifiedCodes={
                         derivedWasmVerifyInfo?.relatedVerifiedCodes
                       }
+                      linkedCodeId={codeId}
                     />
                   }
                 />

src/lib/components/ExplorerLink.tsx

@@ -191,7 +191,7 @@ export const ExplorerLink = ({
   const readOnly = isReadOnly || !link;
   // TODO: handle auto width
   return readOnly ? (
-    <Flex alignItems="center" {...componentProps}>
+    <Flex alignItems="center" gap={1} {...componentProps}>
       <Text variant="body2" color="text.disabled">
         {textValue}
       </Text>
@@ -208,6 +208,7 @@ export const ExplorerLink = ({
         textDecoration: "underline",
         textDecorationColor: "primary.light",
       }}
+      gap={1}
       {...componentProps}
     >
       <LinkRender
@@ -226,7 +227,7 @@ export const ExplorerLink = ({
         value={copyValue || value}
         copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
         display={showCopyOnHover && !isMobile ? "none" : "inline"}
-        ml={2}
+        ml={1}
         amptrackSection={ampCopierSection}
       />
     </Flex>

src/lib/components/StatusMessageBox.tsx

@@ -11,7 +11,7 @@ export const StatusMessageBox = ({
   borderColor = "primary.main",
   pl = 6,
 }: StatusMessageBoxProps) => (
-  <Flex borderLeft="4px solid" borderColor={borderColor} pl={pl} w="full">
+  <Flex borderLeft="4px solid" borderColor={borderColor} pl={pl}>
     {content}
   </Flex>
 );

src/lib/components/WasmVerifyBadge.tsx

@@ -2,7 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { useWasmVerifyInfos } from "lib/services/verification/wasm";
 import { WasmVerifyStatus } from "lib/types";
-import { getWasmVerifyStatus } from "lib/utils";
+import { formatRelatedVerifiedCodes, getWasmVerifyStatus } from "lib/utils";
 
 import { CustomIcon } from "./icon";
 import { Tooltip } from "./Tooltip";
@@ -24,23 +24,6 @@ const getBadgeStatus = (
   return BadgeStatus.NONE;
 };
 
-const formatRelatedVerifiedCodes = (relatedVerifiedCodes: number[]) => {
-  const displayedCodes = relatedVerifiedCodes.slice(0, 3);
-
-  let res = "";
-  displayedCodes.forEach((code, index) => {
-    res += code.toString();
-    if (relatedVerifiedCodes.length > 2 && index < displayedCodes.length - 1)
-      res += ",";
-    if (index < displayedCodes.length - 1) res += " ";
-    if (index === relatedVerifiedCodes.length - 2) res += "and ";
-    return res;
-  });
-  if (relatedVerifiedCodes.length > 3) res += " and more";
-
-  return res;
-};
-
 const getTooltipText = (
   badgeStatus: BadgeStatus,
   relatedVerifyCodes: number[],
@@ -89,13 +72,13 @@ const getTextProperties = (badgeStatus: BadgeStatus) => {
 const WasmVerifyIcon = ({ badgeStatus }: { badgeStatus: BadgeStatus }) => {
   switch (badgeStatus) {
     case BadgeStatus.IN_PROGRESS:
-      return <CustomIcon name="hourglass" color="text.dark" mr={0} />;
+      return <CustomIcon name="hourglass" color="text.dark" mx={0} />;
     case BadgeStatus.VERIFIED:
       return (
-        <CustomIcon name="verification-solid" color="secondary.main" mr={0} />
+        <CustomIcon name="verification-solid" color="secondary.main" mx={0} />
       );
     case BadgeStatus.INDIRECTLY_VERIFIED:
-      return <CustomIcon name="verification" color="secondary.main" mr={0} />;
+      return <CustomIcon name="verification" color="secondary.main" mx={0} />;
     default:
       return undefined;
   }
@@ -123,6 +106,8 @@ export const WasmVerifyBadge = ({
   );
   const textProperties = getTextProperties(badgeStatus);
 
+  if (badgeStatus === BadgeStatus.NONE) return null;
+
   return (
     <Tooltip label={tooltipText}>
       <Flex as="span" gap={1} alignItems="center">

src/lib/components/forms/SelectInput.tsx

@@ -127,7 +127,7 @@ export const SelectInput = <T extends string>({
             },
           }}
         >
-          <div className="form-label">{formLabel}</div>
+          {formLabel && <div className="form-label">{formLabel}</div>}
           {selectedOption?.image && (
             <InputLeftElement pointerEvents="none" h="full" ml={1}>
               {selectedOption.image}

src/lib/components/json-schema/AttachSchemaCard.tsx

@@ -4,24 +4,23 @@ import { useCallback } from "react";
 import { RemoveSchemaModal } from "../modal/RemoveSchemaModal";
 import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
-import type { CodeSchema } from "lib/stores/schema";
-import type { Option } from "lib/types";
+import type { CodeSchema, Option } from "lib/types";
 
 import { ViewSchemaModal } from "./view/ViewSchemaModal";
 
 interface AttachSchemaCardProps {
   attached: boolean;
   codeId: number;
   codeHash: string;
-  schema: Option<CodeSchema>;
+  localSchema: Option<CodeSchema>;
   openModal: () => void;
 }
 
 export const AttachSchemaCard = ({
   attached,
   codeId,
   codeHash,
-  schema,
+  localSchema,
   openModal,
 }: AttachSchemaCardProps) => {
   const handleAttach = useCallback(() => {
@@ -64,7 +63,7 @@ export const AttachSchemaCard = ({
             <Text variant="body2">JSON Schema attached</Text>
           </Flex>
           <Flex align="center" gap={2}>
-            <ViewSchemaModal codeId={codeId} jsonSchema={schema} />
+            <ViewSchemaModal codeId={codeId} schema={localSchema} />
             <Button variant="outline-gray" size="sm" onClick={handleReattach}>
               Reattach
             </Button>