Merge pull request #128 from alleslabs/refactor/add-default-list

refactor: rewrite add to other list state, add default list to save
alleslabs · Jan 27, 2023 · 1b1e5f4 · 1b1e5f4 · vercel · Jan 27, 2023
2 parents c4f6c8a + b460f83
commit 1b1e5f4
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 106 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -99,6 +99,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

diff --git 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
@@ -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,22 @@ 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,
     });
 
+    useEffect(() => {
+      setContractLists(
+        contractLocalInfo.lists?.length ? contractLocalInfo.lists : DEFAULT_LIST
+      );
+    }, [contractLocalInfo.lists]);
+
     return (
       <ActionModal
         title="Add or remove from other lists"
@@ -77,11 +67,11 @@ 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"
-            setResult={setContractListsValue}
+            setResult={setContractLists}
             labelBgColor="gray.800"
           />
         </Box>

diff --git 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
@@ -75,17 +75,18 @@ export const SelectContractAdmin = ({
         onClose={resetOnClose}
         closeOnOverlayClick={false}
         size="4xl"
+        isCentered
       >
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent h="80%">
           <ModalHeader>
             <Icon as={MdList} color="text.dark" fontSize="24px" />
             <Heading as="h5" variant="h5">
               Select contract which you have permission
             </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
@@ -112,90 +112,93 @@ export const SelectContractInstantiator = ({
         onClose={resetOnClose}
         closeOnOverlayClick={false}
         size="4xl"
+        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>
     </>
   );

diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts
@@ -1,6 +1,11 @@
 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";
 
@@ -52,6 +57,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
@@ -83,7 +83,7 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
               fontSize="22px"
               variant="none"
               aria-label="save"
-              color="none"
+              color="gray.600"
               icon={<MdBookmarkBorder />}
             />
           }