From cad3e2c16a7c0a4ae7131b7659a86158ec38db6c Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 26 Jan 2023 17:26:14 +0700
Subject: [PATCH 1/5] refactor: rewrite add to other list state and add default
 case

---
 src/lib/components/forms/ListSelection.tsx    |  3 +-
 .../modal/contract/AddToOtherList.tsx         | 37 ++++++++-----------
 .../contract/ContractDetailsTemplate.tsx      |  3 +-
 .../select-contract/SelectContractAdmin.tsx   |  1 +
 .../SelectContractInstantiator.tsx            |  1 +
 src/lib/data/constant.ts                      |  9 +++++
 .../components/ContractTop.tsx                |  2 +-
 7 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/forms/ListSelection.tsx b/src/lib/components/forms/ListSelection.tsx
index ef794ddc4..0cc78c850 100644
--- a/src/lib/components/forms/ListSelection.tsx
+++ b/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%"
diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index 2cd185ffc..ec4e9f4fe 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/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"
diff --git a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx b/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
index 7f7addc7b..bbf656b2e 100644
--- a/src/lib/components/modal/contract/ContractDetailsTemplate.tsx
+++ b/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,
diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
index 55ac7f16c..eede89156 100644
--- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
@@ -75,6 +75,7 @@ export const SelectContractAdmin = ({
         onClose={resetOnClose}
         closeOnOverlayClick={false}
         size="4xl"
+        isCentered
       >
         <ModalOverlay />
         <ModalContent>
diff --git a/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx b/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx
index 413af814c..a69629110 100644
--- a/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx
+++ b/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 ? (
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index bbdc666c3..bb6842fb0 100644
--- a/src/lib/data/constant.ts
+++ b/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;
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index dab7a4dc7..8ae0011e5 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/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 />}
             />
           }

From acc0eedbd8adc007705abc5e71d7d321a0ffc380 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Thu, 26 Jan 2023 17:31:46 +0700
Subject: [PATCH 2/5] chore: changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ab983154..57aff465c 100644
--- a/CHANGELOG.md
+++ b/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

From 9445b60c343be26e45cd2e6606eba90d7f133957 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Jan 2023 11:05:38 +0700
Subject: [PATCH 3/5] style: scroll contract modal body

---
 .../select-contract/SelectContractAdmin.tsx   |   4 +-
 .../SelectContractInstantiator.tsx            | 160 +++++++++---------
 2 files changed, 83 insertions(+), 81 deletions(-)

diff --git a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
index eede89156..0368bb8f7 100644
--- a/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
+++ b/src/lib/components/modal/select-contract/SelectContractAdmin.tsx
@@ -78,7 +78,7 @@ export const SelectContractAdmin = ({
         isCentered
       >
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent h="80%">
           <ModalHeader>
             <Icon as={MdList} color="text.dark" fontSize="24px" />
             <Heading as="h5" variant="h5">
@@ -86,7 +86,7 @@ export const SelectContractAdmin = ({
             </Heading>
           </ModalHeader>
           <ModalCloseButton />
-          <ModalBody>
+          <ModalBody maxH="full" overflowY="scroll">
             <ContractListDetail
               contractListInfo={contractList}
               isReadOnly
diff --git a/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx b/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx
index a69629110..60109fa2a 100644
--- a/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx
+++ b/src/lib/components/modal/select-contract/SelectContractInstantiator.tsx
@@ -115,88 +115,90 @@ export const SelectContractInstantiator = ({
         isCentered
       >
         <ModalOverlay />
-        {listSlug.length === 0 || !contractList ? (
-          <ModalContent>
-            <ModalHeader>
-              <Icon as={MdList} color="text.dark" fontSize="24px" />
-              <Heading as="h5" variant="h5">
-                Select Contract
-              </Heading>
-            </ModalHeader>
-            <ModalCloseButton />
+        <ModalContent h="80%">
+          {listSlug.length === 0 || !contractList ? (
+            <>
+              <ModalHeader>
+                <Icon as={MdList} color="text.dark" fontSize="24px" />
+                <Heading as="h5" variant="h5">
+                  Select Contract
+                </Heading>
+              </ModalHeader>
+              <ModalCloseButton />
 
-            <ModalBody p="24px">
-              <Heading as="h6" variant="h6" mb="8px">
-                Fill contract address manually
-              </Heading>
-              <Flex gap="8px" alignItems="center">
-                <Input
-                  isInvalid={invalid !== ""}
-                  value={searchContract}
-                  onChange={(e) => {
-                    const inputValue = e.target.value;
-                    setSearchContract(inputValue as ContractAddr);
-                  }}
-                  placeholder={`ex. ${exampleContractAddress}`}
-                  size="md"
-                />
-                <Button
-                  isDisabled={searchContract.length === 0}
-                  isLoading={isFetching || isRefetching}
-                  onClick={() => {
-                    const err = validateContractAddress(searchContract);
-                    if (err !== null) setInvalid(err);
-                    else refetch();
-                  }}
-                >
-                  Submit
-                </Button>
-              </Flex>
-              <Text variant="body3" color="error.main" mt={1} ml={3}>
-                {invalid}
-              </Text>
+              <ModalBody p="24px" maxH="full" overflowY="scroll">
+                <Heading as="h6" variant="h6" mb="8px">
+                  Fill contract address manually
+                </Heading>
+                <Flex gap="8px" alignItems="center">
+                  <Input
+                    isInvalid={invalid !== ""}
+                    value={searchContract}
+                    onChange={(e) => {
+                      const inputValue = e.target.value;
+                      setSearchContract(inputValue as ContractAddr);
+                    }}
+                    placeholder={`ex. ${exampleContractAddress}`}
+                    size="md"
+                  />
+                  <Button
+                    isDisabled={searchContract.length === 0}
+                    isLoading={isFetching || isRefetching}
+                    onClick={() => {
+                      const err = validateContractAddress(searchContract);
+                      if (err !== null) setInvalid(err);
+                      else refetch();
+                    }}
+                  >
+                    Submit
+                  </Button>
+                </Flex>
+                <Text variant="body3" color="error.main" mt={1} ml={3}>
+                  {invalid}
+                </Text>
 
-              <Flex my="24px" gap="8px" alignItems="center">
-                <Divider borderColor="gray.500" />
-                <Text variant="body1">OR</Text>
-                <Divider borderColor="gray.500" />
-              </Flex>
+                <Flex my="24px" gap="8px" alignItems="center">
+                  <Divider borderColor="gray.500" />
+                  <Text variant="body1">OR</Text>
+                  <Divider borderColor="gray.500" />
+                </Flex>
 
-              <Heading as="h6" variant="h6" mb={4}>
-                Select from your Contract List
-              </Heading>
-              <AllContractLists
-                contractLists={contractLists}
-                handleListSelect={handleListSelect}
-                isReadOnly
-                formLabelBgColor="gray.800"
-              />
-            </ModalBody>
-          </ModalContent>
-        ) : (
-          <ModalContent>
-            <ModalHeader>
-              <Icon
-                as={MdChevronLeft}
-                color="text.dark"
-                fontSize="24px"
-                onClick={() => setListSlug("")}
-                cursor="pointer"
-              />
-              <Heading as="h5" variant="h5">
-                {contractList.name}
-              </Heading>
-            </ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
-              <ContractListDetail
-                contractListInfo={contractList}
-                isReadOnly
-                onContractSelect={onSelectThenClose}
-              />
-            </ModalBody>
-          </ModalContent>
-        )}
+                <Heading as="h6" variant="h6" mb={4}>
+                  Select from your Contract List
+                </Heading>
+                <AllContractLists
+                  contractLists={contractLists}
+                  handleListSelect={handleListSelect}
+                  isReadOnly
+                  formLabelBgColor="gray.800"
+                />
+              </ModalBody>
+            </>
+          ) : (
+            <>
+              <ModalHeader>
+                <Icon
+                  as={MdChevronLeft}
+                  color="text.dark"
+                  fontSize="24px"
+                  onClick={() => setListSlug("")}
+                  cursor="pointer"
+                />
+                <Heading as="h5" variant="h5">
+                  {contractList.name}
+                </Heading>
+              </ModalHeader>
+              <ModalCloseButton />
+              <ModalBody maxH="full" overflowY="scroll">
+                <ContractListDetail
+                  contractListInfo={contractList}
+                  isReadOnly
+                  onContractSelect={onSelectThenClose}
+                />
+              </ModalBody>
+            </>
+          )}
+        </ModalContent>
       </Modal>
     </>
   );

From ab18df84971f386b1d81f95ea5b2860fde903dfc Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Jan 2023 11:09:26 +0700
Subject: [PATCH 4/5] fix: commented

---
 src/lib/components/modal/contract/AddToOtherList.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index ec4e9f4fe..c76733311 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -28,14 +28,11 @@ export const AddToOtherList = observer(
       lists: contractLists,
     });
 
-    const setContractListsValue = (selectedLists: LVPair[]) =>
-      setContractLists(selectedLists);
-
     useEffect(() => {
       if (contractLocalInfo.lists?.length) {
-        setContractListsValue(contractLocalInfo.lists);
+        setContractLists(contractLocalInfo.lists);
       } else {
-        setContractListsValue(DEFAULT_LIST);
+        setContractLists(DEFAULT_LIST);
       }
     }, [contractLocalInfo.lists]);
 
@@ -76,7 +73,7 @@ export const AddToOtherList = observer(
             placeholder="Add to contract lists"
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
-            setResult={setContractListsValue}
+            setResult={(selectedList) => setContractLists(selectedList)}
             labelBgColor="gray.800"
           />
         </Box>

From b460f83056eb04a5cb7f42aa02bf8791dc6336e0 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Fri, 27 Jan 2023 11:35:21 +0700
Subject: [PATCH 5/5] fix: as commented

---
 src/lib/components/modal/contract/AddToOtherList.tsx | 10 ++++------
 src/lib/data/constant.ts                             |  3 +++
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/modal/contract/AddToOtherList.tsx b/src/lib/components/modal/contract/AddToOtherList.tsx
index c76733311..99a3ccac8 100644
--- a/src/lib/components/modal/contract/AddToOtherList.tsx
+++ b/src/lib/components/modal/contract/AddToOtherList.tsx
@@ -29,11 +29,9 @@ export const AddToOtherList = observer(
     });
 
     useEffect(() => {
-      if (contractLocalInfo.lists?.length) {
-        setContractLists(contractLocalInfo.lists);
-      } else {
-        setContractLists(DEFAULT_LIST);
-      }
+      setContractLists(
+        contractLocalInfo.lists?.length ? contractLocalInfo.lists : DEFAULT_LIST
+      );
     }, [contractLocalInfo.lists]);
 
     return (
@@ -73,7 +71,7 @@ export const AddToOtherList = observer(
             placeholder="Add to contract lists"
             helperText="Grouping your contracts by adding to your existing list or create
               a new list"
-            setResult={(selectedList) => setContractLists(selectedList)}
+            setResult={setContractLists}
             labelBgColor="gray.800"
           />
         </Box>
diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
index bb6842fb0..68656f2af 100644
--- a/src/lib/data/constant.ts
+++ b/src/lib/data/constant.ts
@@ -2,6 +2,9 @@ import { MdBookmark, MdInbox, MdLibraryBooks } from "react-icons/md";
 
 import type { LVPair } from "lib/types";
 import { MsgType } from "lib/types";
+/**
+ * @todos Revisit utils import later
+ */
 import { formatSlugName } from "lib/utils/format";
 
 export const INSTANTIATED_LIST_NAME = "Instantiated by me";