Merge pull request #174 from alleslabs/fix/code-name

fix: change code description to code name, wireup public code name in code detail

CHANGELOG.md

@@ -110,6 +110,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#174](https://github.com/alleslabs/celatone-frontend/pull/174) Change "code description" to "code name" and wireup public code name in code detail page
 - [#173](https://github.com/alleslabs/celatone-frontend/pull/173) Add connect wallet alert to migrate page
 - [#161](https://github.com/alleslabs/celatone-frontend/pull/161) Fix editable cell, no wrap when hover and click outside to close the editable cell
 - [#159](https://github.com/alleslabs/celatone-frontend/pull/159) Add query key so refetch data when network change

src/lib/components/modal/code/CodeDetailsTemplate.tsx

@@ -5,7 +5,7 @@ import { MdAddCircleOutline, MdCheckCircle } from "react-icons/md";
 import { ActionModal } from "..";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { TextInput } from "lib/components/forms";
-import { MAX_CODE_DESCRIPTION_LENGTH } from "lib/data";
+import { MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore, useGetAddressType } from "lib/hooks";
 import type { CodeLocalInfo } from "lib/stores/code";
 
@@ -30,16 +30,14 @@ export const CodeDetailsTemplateModal = ({
   const toast = useToast();
   const getAddressType = useGetAddressType();
 
-  const [description, setDescription] = useState(
-    codeLocalInfo.description ?? ""
-  );
+  const [name, setName] = useState(codeLocalInfo.name ?? "");
 
   const uploaderType = getAddressType(codeLocalInfo.uploader);
 
   const handleAction = useCallback(() => {
     if (isNewCode) saveNewCode(codeLocalInfo.id);
 
-    updateCodeInfo(codeLocalInfo.id, codeLocalInfo.uploader, description);
+    updateCodeInfo(codeLocalInfo.id, codeLocalInfo.uploader, name);
 
     // TODO: abstract toast to template later
     toast({
@@ -61,18 +59,18 @@ export const CodeDetailsTemplateModal = ({
   }, [
     codeLocalInfo.id,
     codeLocalInfo.uploader,
-    description,
+    name,
     isNewCode,
     saveNewCode,
     title,
     toast,
     updateCodeInfo,
   ]);
 
-  // fix prefilling blank space problem (e.g. description saved as "     ")
+  // fix prefilling blank space problem (e.g. name saved as "     ")
   useEffect(() => {
-    setDescription(codeLocalInfo.description ?? "");
-  }, [codeLocalInfo.description]);
+    setName(codeLocalInfo.name ?? "");
+  }, [codeLocalInfo.name]);
 
   return (
     <ActionModal
@@ -113,13 +111,13 @@ export const CodeDetailsTemplateModal = ({
     >
       <TextInput
         variant="floating"
-        value={description}
-        setInputState={setDescription}
+        value={name}
+        setInputState={setName}
         size="lg"
-        helperText="Fill in code description to define its use as a reminder"
-        label="Code Description"
+        helperText="Fill in code name to define its use as a reminder"
+        label="Code Name"
         labelBgColor="pebble.900"
-        maxLength={MAX_CODE_DESCRIPTION_LENGTH}
+        maxLength={MAX_CODE_NAME_LENGTH}
       />
     </ActionModal>
   );

src/lib/components/modal/code/EditCodeDetails.tsx

@@ -11,7 +11,7 @@ export const EditCodeDetailsModal = ({
   triggerElement,
 }: EditCodeDetailsModalProps) => (
   <CodeDetailsTemplateModal
-    title="Edit Code Description"
+    title="Edit Code Name"
     mainBtnTitle="Save"
     isNewCode={false}
     codeLocalInfo={codeLocalInfo}

src/lib/components/modal/code/RemoveCode.tsx

@@ -4,7 +4,7 @@ import { MdCheckCircle, MdDelete } from "react-icons/md";
 
 import { ActionModal } from "lib/components/modal/ActionModal";
 import { useCodeStore } from "lib/hooks";
-import { getDescriptionDefault, shortenName } from "lib/utils";
+import { getNameAndDescriptionDefault, shortenName } from "lib/utils";
 
 const StyledIconButton = chakra(IconButton, {
   baseStyle: {
@@ -17,13 +17,13 @@ const StyledIconButton = chakra(IconButton, {
 
 interface RemoveCodeModalProps {
   codeId: number;
-  description?: string;
+  name?: string;
   trigger?: JSX.Element;
 }
 
 export function RemoveCodeModal({
   codeId,
-  description,
+  name,
   trigger = (
     <StyledIconButton
       icon={<MdDelete />}
@@ -40,7 +40,7 @@ export function RemoveCodeModal({
 
     toast({
       title: `Removed \u2018${
-        shortenName(getDescriptionDefault(description), 20) || codeId
+        shortenName(getNameAndDescriptionDefault(name), 20) || codeId
       }\u2019 from Saved Codes`,
       status: "success",
       duration: 5000,
@@ -56,13 +56,13 @@ export function RemoveCodeModal({
         />
       ),
     });
-  }, [codeId, description, removeSavedCode, toast]);
+  }, [codeId, name, removeSavedCode, toast]);
 
   return (
     <ActionModal
       title={
-        description
-          ? `Remove \u2018${shortenName(description, 20)}\u2019?`
+        name
+          ? `Remove \u2018${shortenName(name, 20)}\u2019?`
           : `Remove Code ID: ${codeId} ?`
       }
       icon={MdDelete}
@@ -76,7 +76,7 @@ export function RemoveCodeModal({
     >
       <Text>
         You can save this code again later, but you will need to add its new
-        code description.
+        code name.
       </Text>
     </ActionModal>
   );

src/lib/components/modal/code/SaveNewCode.tsx

@@ -7,13 +7,10 @@ import { MdBookmark, MdCheckCircle } from "react-icons/md";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput, NumberInput } from "lib/components/forms";
 import { ActionModal } from "lib/components/modal/ActionModal";
-import {
-  getMaxCodeDescriptionLengthError,
-  MAX_CODE_DESCRIPTION_LENGTH,
-} from "lib/data";
+import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore, useLCDEndpoint } from "lib/hooks";
 import { getCodeIdInfo } from "lib/services/code";
-import { getDescriptionDefault } from "lib/utils";
+import { getNameAndDescriptionDefault } from "lib/utils";
 
 interface SaveNewCodeModalProps {
   buttonProps: ButtonProps;
@@ -29,23 +26,23 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
   const [uploaderStatus, setUploaderStatus] = useState<FormStatus>({
     state: "init",
   });
-  const [description, setDescription] = useState("");
-  const [descriptionStatus, setDescriptionStatus] = useState<FormStatus>({
+  const [name, setName] = useState("");
+  const [nameStatus, setNameStatus] = useState<FormStatus>({
     state: "init",
   });
 
   // TODO: apply use-react-form later
   useEffect(() => {
-    const trimedDescription = description.trim();
-    if (trimedDescription.length === 0) {
-      setDescriptionStatus({ state: "init" });
-    } else if (trimedDescription.length > MAX_CODE_DESCRIPTION_LENGTH)
-      setDescriptionStatus({
+    const trimedName = name.trim();
+    if (trimedName.length === 0) {
+      setNameStatus({ state: "init" });
+    } else if (trimedName.length > MAX_CODE_NAME_LENGTH)
+      setNameStatus({
         state: "error",
-        message: getMaxCodeDescriptionLengthError(trimedDescription.length),
+        message: getMaxCodeNameLengthError(trimedName.length),
       });
-    else setDescriptionStatus({ state: "success" });
-  }, [description]);
+    else setNameStatus({ state: "success" });
+  }, [name]);
 
   /* DEPENDENCY */
   const toast = useToast();
@@ -79,14 +76,14 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
     setCodeIdStatus({ state: "init" });
     setUploader("");
     setUploaderStatus({ state: "init" });
-    setDescription("");
+    setName("");
   };
 
   const handleSave = () => {
     const id = Number(codeId);
 
     saveNewCode(id);
-    updateCodeInfo(id, uploader, description);
+    updateCodeInfo(id, uploader, name);
 
     // TODO: abstract toast to template later
     toast({
@@ -142,15 +139,15 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
     return () => {};
   }, [isCodeIdSaved, codeId, refetch]);
 
-  // update code description
+  // update code name
   useEffect(() => {
     if (codeIdStatus.state === "success") {
-      const localDescription = getDescriptionDefault(
-        getCodeLocalInfo(Number(codeId))?.description
+      const localName = getNameAndDescriptionDefault(
+        getCodeLocalInfo(Number(codeId))?.name
       );
-      setDescription(localDescription);
+      setName(localName);
     }
-  }, [codeId, codeIdStatus.state, getCodeLocalInfo, setDescription]);
+  }, [codeId, codeIdStatus.state, getCodeLocalInfo, setName]);
 
   /* LOGIC */
   // TODO: apply use-react-form later
@@ -159,9 +156,9 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
     return (
       codeIdStatus.state !== "success" ||
       uploader.length < 20 ||
-      descriptionStatus.state === "error"
+      nameStatus.state === "error"
     );
-  }, [codeIdStatus, uploader, descriptionStatus]);
+  }, [codeIdStatus, uploader, nameStatus]);
 
   return (
     <ActionModal
@@ -197,13 +194,13 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
         />
         <TextInput
           variant="floating"
-          value={description}
-          setInputState={setDescription}
-          label="Code Description"
+          value={name}
+          setInputState={setName}
+          label="Code Name"
           labelBgColor="pebble.900"
-          placeholder="No Description"
-          helperText="Fill in code description to define its use as a reminder"
-          status={descriptionStatus}
+          placeholder="Untitled Name"
+          helperText="Fill in code name to define its use as a reminder"
+          status={nameStatus}
         />
       </FormControl>
     </ActionModal>

src/lib/components/modal/code/SaveOrRemoveCode.tsx

@@ -25,7 +25,7 @@ export function SaveOrRemoveCodeModal({
   return codeInfo.isSaved ? (
     <RemoveCodeModal
       codeId={codeInfo.id}
-      description={codeInfo.description}
+      name={codeInfo.name}
       trigger={
         <StyledIconButton
           icon={<MdBookmark />}

src/lib/components/modal/contract/ContractDetailsTemplate.tsx

@@ -10,7 +10,7 @@ import { OffChainForm } from "lib/components/OffChainForm";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
-import { getDescriptionDefault, getTagsDefault } from "lib/utils";
+import { getNameAndDescriptionDefault, getTagsDefault } from "lib/utils";
 
 interface ContractDetailsTemplateModalProps {
   title: string;
@@ -29,7 +29,7 @@ export const ContractDetailsTemplateModal = ({
   const defaultValues = useMemo(() => {
     return {
       name: contractLocalInfo.name ?? "",
-      description: getDescriptionDefault(contractLocalInfo.description),
+      description: getNameAndDescriptionDefault(contractLocalInfo.description),
       tags: getTagsDefault(contractLocalInfo.tags),
       lists: contractLocalInfo.lists ?? defaultList,
     };

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -23,7 +23,7 @@ import { queryInstantiateInfo } from "lib/services/contract";
 import type { ContractAddr, LVPair, RpcQueryError } from "lib/types";
 import {
   formatSlugName,
-  getDescriptionDefault,
+  getNameAndDescriptionDefault,
   getTagsDefault,
 } from "lib/utils";
 
@@ -117,7 +117,9 @@ export function SaveNewContractModal({
           instantiator: data.instantiator,
           label: data.label,
           name: contractLocalInfo?.name ?? data.label,
-          description: getDescriptionDefault(contractLocalInfo?.description),
+          description: getNameAndDescriptionDefault(
+            contractLocalInfo?.description
+          ),
           tags: getTagsDefault(contractLocalInfo?.tags),
           lists: [
             ...initialList,

src/lib/components/upload/UploadSection.tsx

@@ -12,10 +12,7 @@ import {
 import { DropZone } from "lib/components/dropzone";
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
 import { ControllerInput } from "lib/components/forms";
-import {
-  getMaxCodeDescriptionLengthError,
-  MAX_CODE_DESCRIPTION_LENGTH,
-} from "lib/data";
+import { getMaxCodeNameLengthError, MAX_CODE_NAME_LENGTH } from "lib/data";
 import { useCodeStore } from "lib/hooks";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
 import type { HumanAddr } from "lib/types";
@@ -131,15 +128,13 @@ export const UploadSection = ({
       <ControllerInput
         name="codeDesc"
         control={control}
-        label="Code Description (Optional)"
-        placeholder="No Description"
+        label="Code Name (Optional)"
+        placeholder="Untitled Name"
         helperText="Define what your code works on in one sentence which visible to you only. You can add this later."
         rules={{
-          maxLength: MAX_CODE_DESCRIPTION_LENGTH,
+          maxLength: MAX_CODE_NAME_LENGTH,
         }}
-        error={
-          errors.codeDesc && getMaxCodeDescriptionLengthError(codeDesc.length)
-        }
+        error={errors.codeDesc && getMaxCodeNameLengthError(codeDesc.length)}
         variant="floating"
         my="32px"
       />

src/lib/data/constant.ts

@@ -38,13 +38,9 @@ export const getMaxContractDescriptionLengthError = (currentLength: number) =>
     MAX_CONTRACT_DESCRIPTION_LENGTH
   );
 
-export const MAX_CODE_DESCRIPTION_LENGTH = 50;
-export const getMaxCodeDescriptionLengthError = (currentLength: number) =>
-  getMaxLengthError(
-    "Code description",
-    currentLength,
-    MAX_CODE_DESCRIPTION_LENGTH
-  );
+export const MAX_CODE_NAME_LENGTH = 50;
+export const getMaxCodeNameLengthError = (currentLength: number) =>
+  getMaxLengthError("Code name", currentLength, MAX_CODE_NAME_LENGTH);
 
 export const getListIcon = (listName: string) => {
   switch (listName) {

src/lib/hooks/useCodeFilter.ts

@@ -38,7 +38,7 @@ export const useSearchFilter = (keyword = "") => {
       if (!computedKeyword.length) return true;
       return (
         code.id.toString().startsWith(computedKeyword) ||
-        code.description?.toLowerCase().includes(computedKeyword.toLowerCase())
+        code.name?.toLowerCase().includes(computedKeyword.toLowerCase())
       );
     },
     [keyword]