Feat/wireup code page ctas

CHANGELOG.md

@@ -39,6 +39,7 @@ 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
 - [#46](https://github.com/alleslabs/celatone-frontend/pull/46) Wireup instantiate info
 - [#55](https://github.com/alleslabs/celatone-frontend/pull/55) Add "Add To List / Edit" button to edit offchain details on query and execute pages
 - [#44](https://github.com/alleslabs/celatone-frontend/pull/44) Render query cmds shortcut in contract detail page

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 />}
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
             <Flex w="full" justifyContent="center" gap="2">

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

@@ -1,24 +1,38 @@
 import { useToast, Icon, Text } from "@chakra-ui/react";
+import type { ReactNode } from "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";
 
 interface ModalProps {
   codeId: number;
+  description?: string;
+  trigger?: NonNullable<ReactNode>;
 }
 
-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"
+    />
+  ),
+}: ModalProps) {
   const { removeSavedCode } = useCodeStore();
   const toast = useToast();
 
   const handleRemove = useCallback(() => {
-    removeSavedCode(userKey, codeId);
+    removeSavedCode(codeId);
 
     toast({
-      title: `Removed '${codeId}' from Saved Codes`,
+      title: `Removed \u2018${description || codeId}\u2019 from Saved Codes`,
       status: "success",
       duration: 5000,
       isClosable: false,
@@ -33,27 +47,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${description}\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

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

@@ -0,0 +1,167 @@
+import { Button, chakra, Flex, Icon, Text, useToast } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
+import { useCallback, useEffect, useState } from "react";
+import {
+  MdAddCircleOutline,
+  MdBookmark,
+  MdCheckCircle,
+  MdMode,
+} from "react-icons/md";
+
+import type { ActionModalProps } from "..";
+import { ActionModal } from "..";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TextInput } from "lib/components/forms";
+import { useCodeStore, useGetAddressType } from "lib/hooks";
+import type { CodeInfo } from "lib/types";
+
+interface SaveOrEditCodeModalProps extends Omit<CodeInfo, "contracts"> {
+  mode: "save" | "edit";
+}
+
+const StyledIcon = chakra(Icon, {
+  baseStyle: {
+    boxSize: "18px",
+  },
+});
+
+export const SaveOrEditCodeModal = observer(
+  ({
+    mode,
+    id,
+    uploader,
+    description: savedDesc = "",
+  }: SaveOrEditCodeModalProps) => {
+    const { saveNewCode, updateCodeInfo } = useCodeStore();
+    const toast = useToast();
+    const getAddressType = useGetAddressType();
+
+    const [description, setDescription] = useState(savedDesc);
+
+    const isSaveMode = mode === "save";
+    const uploaderType = getAddressType(uploader);
+
+    const handleAction = useCallback(() => {
+      if (isSaveMode) saveNewCode(id);
+
+      updateCodeInfo(id, {
+        uploader,
+        description,
+      });
+
+      // TODO: abstract toast to template later
+      toast({
+        title: isSaveMode
+          ? `Saved ’${description || id}’ to Saved Codes`
+          : "New Code Description saved",
+        status: "success",
+        duration: 5000,
+        isClosable: false,
+        position: "bottom-right",
+        icon: (
+          <Icon
+            as={MdCheckCircle}
+            color="success.main"
+            boxSize="6"
+            display="flex"
+            alignItems="center"
+          />
+        ),
+      });
+    }, [
+      description,
+      id,
+      isSaveMode,
+      saveNewCode,
+      toast,
+      updateCodeInfo,
+      uploader,
+    ]);
+
+    const modeBoundProps: Pick<
+      ActionModalProps,
+      "title" | "trigger" | "mainBtnTitle"
+    > = isSaveMode
+      ? {
+          title: "Save New Code",
+          trigger: (
+            <Button
+              variant="outline-gray"
+              leftIcon={<StyledIcon as={MdBookmark} />}
+            >
+              Save Code
+            </Button>
+          ),
+          mainBtnTitle: "Save New Code",
+        }
+      : {
+          title: "Edit Code Description",
+          trigger: (
+            <Button variant="ghost-gray" leftIcon={<StyledIcon as={MdMode} />}>
+              Edit
+            </Button>
+          ),
+          mainBtnTitle: "Save",
+        };
+
+    // fix prefilling blank space problem (e.g. description saved as "     ")
+    useEffect(() => {
+      setDescription(savedDesc);
+    }, [savedDesc]);
+
+    return (
+      <ActionModal
+        {...modeBoundProps}
+        icon={MdAddCircleOutline}
+        iconColor="text.dark"
+        noHeaderBorder
+        noCloseButton
+        mainAction={handleAction}
+        headerContent={
+          <Flex direction="column">
+            {isSaveMode && (
+              <Text variant="body1" my={6}>
+                Save other stored codes to your &quot;Saved Codes&quot; list
+              </Text>
+            )}
+            <Flex align="center" mb={2} mt={isSaveMode ? 0 : 6}>
+              <Text variant="body2" fontWeight={700} w="20%">
+                Code ID
+              </Text>
+              <ExplorerLink value={id.toString()} />
+            </Flex>
+            <Flex align="center">
+              <Text variant="body2" fontWeight={700} w="20%">
+                Uploader
+              </Text>
+              {uploader ? (
+                <ExplorerLink
+                  type={
+                    uploaderType !== "invalid_address"
+                      ? uploaderType
+                      : undefined
+                  }
+                  value={uploader}
+                />
+              ) : (
+                <Text variant="body2" color="text.dark">
+                  N/A
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+        }
+      >
+        <TextInput
+          variant="floating"
+          value={description}
+          setInputState={setDescription}
+          size="lg"
+          helperText="Fill in code description to define its use as a reminder"
+          label="Code Description"
+          labelBgColor="gray.800"
+        />
+      </ActionModal>
+    );
+  }
+);