Feat/wireup code page ctas

CHANGELOG.md

@@ -39,8 +39,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#59](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup code name,description, and cta section
 - [#53](https://github.com/alleslabs/celatone-frontend/pull/53) Show contract description in contract details page
-- [#58](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup top section in contract details page 
+- [#58](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup top section in contract details page
 - [#54](https://github.com/alleslabs/celatone-frontend/pull/54) Render execute cmds shortcut in contract details page
 - [#46](https://github.com/alleslabs/celatone-frontend/pull/46) Wireup instantiate info in contract details page
 - [#55](https://github.com/alleslabs/celatone-frontend/pull/55) Add "Add To List / Edit" button to edit offchain details on query and execute pages

src/lib/components/forms/ControllerInput.tsx

@@ -24,6 +24,7 @@ interface ControllerInputProps<T extends FieldValues>
   control: Control<T>;
   rules?: UseControllerProps["rules"];
   status?: FormStatus;
+  maxLength?: number;
 }
 
 export const ControllerInput = <T extends FieldValues>({
@@ -38,6 +39,7 @@ export const ControllerInput = <T extends FieldValues>({
   type = "text",
   rules = {},
   status,
+  maxLength,
   ...componentProps
 }: ControllerInputProps<T>) => {
   const watcher = useWatch({
@@ -74,6 +76,7 @@ export const ControllerInput = <T extends FieldValues>({
         type={type}
         value={watcher}
         onChange={field.onChange}
+        maxLength={maxLength}
       />
       {/* TODO: add status */}
       {isError ? (

src/lib/components/forms/TextInput.tsx

@@ -23,6 +23,7 @@ export interface TextInputProps extends FormControlProps {
   error?: string;
   type?: HTMLInputTypeAttribute;
   status?: FormStatus;
+  maxLength?: number;
 }
 
 export const TextInput = ({
@@ -36,6 +37,7 @@ export const TextInput = ({
   size = "lg",
   type = "text",
   status,
+  maxLength,
   ...componentProps
 }: TextInputProps) => {
   // Design system size: md = 40px, lg = 56px
@@ -63,6 +65,7 @@ export const TextInput = ({
           value={value}
           pr={status && "36px"}
           onChange={(e) => setInputState(e.target.value)}
+          maxLength={maxLength}
         />
         <InputRightElement h="full">
           {status && getStatusIcon(status.state)}

src/lib/components/modal/ActionModal.tsx

@@ -18,7 +18,7 @@ import { useCallback } from "react";
 import type { IconType } from "react-icons/lib";
 import { MdMode } from "react-icons/md";
 
-interface ModalProps {
+export interface ActionModalProps {
   icon?: IconType;
   iconColor?: string;
   title: string;
@@ -31,6 +31,8 @@ interface ModalProps {
   disabledMain?: boolean;
   otherBtnTitle?: string;
   otherAction?: () => void;
+  noHeaderBorder?: boolean;
+  noCloseButton?: boolean;
 }
 export function ActionModal({
   icon = MdMode,
@@ -45,7 +47,9 @@ export function ActionModal({
   disabledMain = false,
   otherBtnTitle = "Cancel",
   otherAction,
-}: ModalProps) {
+  noHeaderBorder = false,
+  noCloseButton = false,
+}: ActionModalProps) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const handleOnMain = useCallback(() => {
@@ -65,8 +69,11 @@ export function ActionModal({
       <Modal isOpen={isOpen} onClose={handleOnOther} isCentered>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader borderBottomWidth={1} borderColor="divider.main">
-            <Box>
+          <ModalHeader
+            borderBottomWidth={noHeaderBorder ? 0 : 1}
+            borderColor="divider.main"
+          >
+            <Box w="full">
               <Flex alignItems="center" gap="3">
                 <Icon as={icon} color={iconColor} boxSize="6" />
                 {title}
@@ -79,7 +86,7 @@ export function ActionModal({
               <Box>{headerContent}</Box>
             </Box>
           </ModalHeader>
-          <ModalCloseButton />
+          {!noCloseButton && <ModalCloseButton color="gray.600" />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
             <Flex w="full" justifyContent="center" gap="2">

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

@@ -1,24 +1,40 @@
 import { useToast, Icon, Text } from "@chakra-ui/react";
 import { useCallback } from "react";
-import { MdDeleteForever, MdCheckCircle, MdDelete } from "react-icons/md";
+import { MdCheckCircle, MdDelete } from "react-icons/md";
 
 import { ActionModal } from "lib/components/modal/ActionModal";
-import { useCodeStore, useUserKey } from "lib/hooks";
+import { useCodeStore } from "lib/hooks";
+import { shortenName } from "lib/utils";
 
-interface ModalProps {
+interface RemoveCodeModalProps {
   codeId: number;
+  description?: string;
+  trigger?: JSX.Element;
 }
 
-export function RemoveCode({ codeId }: ModalProps) {
-  const userKey = useUserKey();
+export function RemoveCode({
+  codeId,
+  description,
+  trigger = (
+    <Icon
+      as={MdDelete}
+      width="24px"
+      height="24px"
+      color="gray.600"
+      cursor="pointer"
+    />
+  ),
+}: RemoveCodeModalProps) {
   const { removeSavedCode } = useCodeStore();
   const toast = useToast();
 
   const handleRemove = useCallback(() => {
-    removeSavedCode(userKey, codeId);
+    removeSavedCode(codeId);
 
     toast({
-      title: `Removed '${codeId}' from Saved Codes`,
+      title: `Removed \u2018${
+        shortenName(description ?? "", 20) || codeId
+      }\u2019 from Saved Codes`,
       status: "success",
       duration: 5000,
       isClosable: false,
@@ -33,27 +49,28 @@ export function RemoveCode({ codeId }: ModalProps) {
         />
       ),
     });
-  }, [codeId, userKey, removeSavedCode, toast]);
+  }, [codeId, description, removeSavedCode, toast]);
 
   return (
     <ActionModal
-      title={`Remove Code ID: ${codeId} ?`}
-      icon={MdDeleteForever}
+      title={
+        description
+          ? `Remove \u2018${shortenName(description, 20)}\u2019?`
+          : `Remove Code ID: ${codeId} ?`
+      }
+      icon={MdDelete}
       iconColor="error.light"
       mainBtnTitle="Yes, Remove It"
       mainAction={handleRemove}
       otherBtnTitle="No, Keep It"
-      trigger={
-        <Icon
-          as={MdDelete}
-          width="24px"
-          height="24px"
-          color="gray.600"
-          cursor="pointer"
-        />
-      }
+      trigger={trigger}
+      noCloseButton
+      noHeaderBorder
     >
-      <Text>You can save this code again later</Text>
+      <Text>
+        You can save this code again later, but you will need to add its new
+        code description.
+      </Text>
     </ActionModal>
   );
 }

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

@@ -11,7 +11,7 @@ import {
   getMaxCodeDescriptionLengthError,
   MAX_CODE_DESCRIPTION_LENGTH,
 } from "lib/data";
-import { useCodeStore, useEndpoint, useUserKey } from "lib/hooks";
+import { useCodeStore, useEndpoint } from "lib/hooks";
 import { getCodeIdInfo } from "lib/services/code";
 
 interface ModalProps {
@@ -48,7 +48,6 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
 
   /* DEPENDENCY */
   const toast = useToast();
-  const userKey = useUserKey();
   const { isCodeIdExist, saveNewCode, updateCodeInfo, getCodeLocalInfo } =
     useCodeStore();
   const endpoint = useEndpoint();
@@ -85,15 +84,15 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
   const handleSave = () => {
     const id = Number(codeId);
 
-    saveNewCode(userKey, id);
+    saveNewCode(id);
 
     if (description.trim().length) {
-      updateCodeInfo(userKey, id, {
+      updateCodeInfo(id, {
         description,
         uploader,
       });
     } else {
-      updateCodeInfo(userKey, id, {
+      updateCodeInfo(id, {
         uploader,
       });
     }
@@ -135,7 +134,7 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
     } else {
       setCodeIdStatus({ state: "loading" });
 
-      if (isCodeIdExist(userKey, Number(codeId))) {
+      if (isCodeIdExist(Number(codeId))) {
         setCodeIdStatus({
           state: "error",
           message: "You already added this Code ID",
@@ -150,16 +149,16 @@ export function SaveNewCodeModal({ buttonProps }: ModalProps) {
     }
 
     return () => {};
-  }, [userKey, isCodeIdExist, codeId, refetch]);
+  }, [isCodeIdExist, codeId, refetch]);
 
   // update code description
   useEffect(() => {
     if (codeIdStatus.state === "success") {
       const localDescription =
-        getCodeLocalInfo(userKey, Number(codeId))?.description ?? "";
+        getCodeLocalInfo(Number(codeId))?.description ?? "";
       setDescription(localDescription);
     }
-  }, [codeId, codeIdStatus.state, getCodeLocalInfo, setDescription, userKey]);
+  }, [codeId, codeIdStatus.state, getCodeLocalInfo, setDescription]);
 
   /* LOGIC */
   // TODO: apply use-react-form later