refactor: rewrite add to other list state, add default list to save

CHANGELOG.md

@@ -98,6 +98,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#128](https://github.com/alleslabs/celatone-frontend/pull/128) Rewrite add to other list state and add default list to save to
 - [#114](https://github.com/alleslabs/celatone-frontend/pull/114) Handle wallet connection cases in instantiate button
 - [#115](https://github.com/alleslabs/celatone-frontend/pull/115) (Contract Details Page) Show no admin and correctly handle explorer link by address type
 - [#68](https://github.com/alleslabs/celatone-frontend/pull/68) Refactor past txs link props and make sure navigation works

src/lib/components/forms/ListSelection.tsx

@@ -127,7 +127,8 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
           <Flex
             alignItems="center"
             color="text.main"
-            border="1px solid rgba(255,255,255,0.12)"
+            border="1px solid"
+            borderColor="divider.main"
             background="none"
             borderRadius="4px"
             maxW="100%"

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

@@ -1,13 +1,12 @@
 import { Flex, Text, Box } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
-import { useCallback, useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
 import { MdBookmark } from "react-icons/md";
 
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { ListSelection } from "lib/components/forms/ListSelection";
 import { ActionModal } from "lib/components/modal/ActionModal";
-import type { OffchainDetail } from "lib/components/OffChainForm";
+import { DEFAULT_LIST } from "lib/data";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
@@ -19,31 +18,27 @@ interface AddToOtherListProps {
 
 export const AddToOtherList = observer(
   ({ contractLocalInfo, triggerElement }: AddToOtherListProps) => {
-    const { setValue, watch } = useForm<OffchainDetail>({
-      mode: "all",
-    });
-
-    const setContractListsValue = useCallback(
-      (selectedLists: LVPair[]) => {
-        setValue("lists", selectedLists);
-      },
-      [setValue]
-    );
-
-    useEffect(() => {
-      setContractListsValue(contractLocalInfo.lists ?? []);
-    }, [contractLocalInfo.lists, setContractListsValue]);
-
-    const offchainState = watch();
+    const [contractLists, setContractLists] = useState<LVPair[]>(DEFAULT_LIST);
 
     const handleSave = useHandleContractSave({
       title: "Action Complete!",
       contractAddress: contractLocalInfo.contractAddress,
       instantiator: contractLocalInfo.instantiator,
       label: contractLocalInfo.label,
-      lists: offchainState.lists,
+      lists: contractLists,
     });
 
+    const setContractListsValue = (selectedLists: LVPair[]) =>
+      setContractLists(selectedLists);
+
+    useEffect(() => {
+      if (contractLocalInfo.lists?.length) {
+        setContractListsValue(contractLocalInfo.lists);
+      } else {
+        setContractListsValue(DEFAULT_LIST);
+      }
+    }, [contractLocalInfo.lists]);
+
     return (
       <ActionModal
         title="Add or remove from other lists"
@@ -77,7 +72,7 @@ export const AddToOtherList = observer(
       >
         <Box my="16px">
           <ListSelection
-            result={offchainState.lists}
+            result={contractLists}
             placeholder="Add to contract lists"
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"

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

@@ -6,6 +6,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { ActionModal } from "lib/components/modal/ActionModal";
 import type { OffchainDetail } from "lib/components/OffChainForm";
 import { OffChainForm } from "lib/components/OffChainForm";
+import { DEFAULT_LIST } from "lib/data";
 import { useHandleContractSave } from "lib/hooks/useHandleSave";
 import type { ContractLocalInfo } from "lib/stores/contract";
 import type { LVPair } from "lib/types";
@@ -28,7 +29,7 @@ export const ContractDetailsTemplate = ({
       name: contractLocalInfo.name ?? "",
       description: getDescriptionDefault(contractLocalInfo.description),
       tags: getTagsDefault(contractLocalInfo.tags),
-      lists: contractLocalInfo.lists ?? [],
+      lists: contractLocalInfo.lists ?? DEFAULT_LIST,
     };
   }, [
     contractLocalInfo.description,

src/lib/components/modal/select-contract/SelectContractAdmin.tsx

@@ -75,6 +75,7 @@ export const SelectContractAdmin = ({
         onClose={resetOnClose}
         closeOnOverlayClick={false}
         size="4xl"
+        isCentered
       >
         <ModalOverlay />
         <ModalContent>

src/lib/components/modal/select-contract/SelectContractInstantiator.tsx

@@ -112,6 +112,7 @@ export const SelectContractInstantiator = ({
         onClose={resetOnClose}
         closeOnOverlayClick={false}
         size="4xl"
+        isCentered
       >
         <ModalOverlay />
         {listSlug.length === 0 || !contractList ? (

src/lib/data/constant.ts

@@ -1,6 +1,8 @@
 import { MdBookmark, MdInbox, MdLibraryBooks } from "react-icons/md";
 
+import type { LVPair } from "lib/types";
 import { MsgType } from "lib/types";
+import { formatSlugName } from "lib/utils/format";
 
 export const INSTANTIATED_LIST_NAME = "Instantiated by me";
 
@@ -52,6 +54,13 @@ export const getListIcon = (listName: string) => {
   }
 };
 
+export const DEFAULT_LIST: LVPair[] = [
+  {
+    label: SAVED_LIST_NAME,
+    value: formatSlugName(SAVED_LIST_NAME),
+  },
+];
+
 export const DEFAULT_ADDRESS = "default-address";
 
 export const MAX_FILE_SIZE = 800_000;

src/lib/pages/contract-details/components/ContractTop.tsx

@@ -79,7 +79,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               fontSize="22px"
               variant="none"
               aria-label="save"
-              color="none"
+              color="gray.600"
               icon={<MdBookmarkBorder />}
             />
           }