Refactor/contract list

CHANGELOG.md

@@ -45,3 +45,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Improvements
 
 ### Bug fixes
+
+- [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state

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

@@ -1,5 +1,5 @@
 import { Box, SimpleGrid } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
+import { useMemo, useState } from "react";
 
 import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -8,50 +8,52 @@ import type { ContractListInfo } from "lib/stores/contract";
 import { ListCard } from "./ListCard";
 
 interface AllContractListsProps {
-  search: string;
-  setSearch: Dispatch<SetStateAction<string>>;
   contractLists: ContractListInfo[];
   handleListSelect: (value: string) => void;
-  isReadOnly: boolean;
+  isReadOnly?: boolean;
   formLabelBgColor?: string;
 }
 
 export const AllContractLists = ({
-  search,
-  setSearch,
-  handleListSelect,
   contractLists,
   isReadOnly,
   formLabelBgColor,
+  handleListSelect,
 }: AllContractListsProps) => {
-  const filteredContractLists = contractLists.filter((item) =>
-    item.name.toLowerCase().includes(search.toLowerCase())
+  const [searchKeyword, setSearchKeyword] = useState("");
+
+  const filteredContractLists = useMemo(
+    () =>
+      contractLists.filter((item) =>
+        item.name.toLowerCase().includes(searchKeyword.toLowerCase())
+      ),
+    [contractLists, searchKeyword]
   );
 
   return (
     <Box minH="xs" w="100%">
       <TextInput
         variant="floating"
-        value={search}
-        setInputState={setSearch}
+        value={searchKeyword}
+        setInputState={setSearchKeyword}
         label="Search for your lists"
         labelBgColor={formLabelBgColor}
         size="md"
+        mb={isReadOnly ? 4 : 12}
       />
-      <Box my="18px" />
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} w="full">
-        {filteredContractLists.map((item) => (
-          <ListCard
-            key={item.slug}
-            item={item}
-            handleListSelect={handleListSelect}
-            isReadOnly={isReadOnly || !item.isInfoEditable}
-            showLastUpdated={item.isContractRemovable}
-          />
-        ))}
-      </SimpleGrid>
-      {filteredContractLists.length === 0 && (
+      {filteredContractLists.length === 0 ? (
         <EmptyState message="None of your lists matches this search." />
+      ) : (
+        <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} w="full">
+          {filteredContractLists.map((item) => (
+            <ListCard
+              key={item.slug}
+              item={item}
+              handleListSelect={handleListSelect}
+              isReadOnly={isReadOnly || !item.isInfoEditable}
+            />
+          ))}
+        </SimpleGrid>
       )}
     </Box>
   );

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

@@ -15,26 +15,29 @@ import dayjs from "dayjs";
 import { MdMoreHoriz, MdMode, MdDelete } from "react-icons/md";
 
 import { EditList, RemoveList } from "../list";
-import { getListIcon } from "lib/data";
+import { getListIcon, INSTANTIATED_LIST_NAME } from "lib/data";
 import type { ContractListInfo } from "lib/stores/contract";
+import { formatSlugName } from "lib/utils";
+
+const iconProps = {
+  boxSize: "4",
+  display: "flex",
+  alignItems: "center",
+};
 
 interface ListCardProps {
   item: ContractListInfo;
   handleListSelect: (value: string) => void;
   isReadOnly: boolean;
-  showLastUpdated: boolean;
 }
+
 export const ListCard = ({
   item,
   handleListSelect,
   isReadOnly,
-  showLastUpdated,
 }: ListCardProps) => {
-  const iconProps = {
-    boxSize: "4",
-    display: "flex",
-    alignItems: "center",
-  };
+  const showLastUpdated = item.slug !== formatSlugName(INSTANTIATED_LIST_NAME);
+
   return (
     <LinkBox cursor="pointer">
       <Flex

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

@@ -1,7 +1,6 @@
 import { Box, Flex } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
-import type { Dispatch, SetStateAction } from "react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { TagSelection, TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state/EmptyState";
@@ -13,82 +12,79 @@ import type { ContractInfo, ContractListInfo } from "lib/stores/contract";
 import type { Option } from "lib/types";
 
 interface FilteredListDetailProps {
-  search: string;
-  tagFilter: string[];
   contracts: ContractInfo[];
-  isReadOnly: boolean;
-  isContractRemovable?: Option;
-  onContractSelect?: (addr: string) => void;
-}
-
-interface ListDetailProps {
-  search: string;
-  setSearch: Dispatch<SetStateAction<string>>;
-  contractListInfo: ContractListInfo;
-  isReadOnly: boolean;
-  isContractRemovable?: Option;
+  isReadOnly?: boolean;
+  contractRemovalInfo: Option | undefined;
   onContractSelect?: (addr: string) => void;
 }
 
 const FilteredListDetail = ({
-  search,
-  tagFilter,
   contracts,
   isReadOnly,
-  isContractRemovable,
+  contractRemovalInfo,
   onContractSelect = () => {},
 }: FilteredListDetailProps) => {
-  const filteredContracts = matchSorter(contracts, search, {
-    keys: ["name", "description", "label", "address"],
-    sorter: (sortedItem) => sortedItem,
-  }).filter((contract) =>
-    tagFilter.every((tag) => contract.tags?.includes(tag))
-  );
-  if (filteredContracts.length === 0)
+  if (contracts.length === 0)
     return (
       <EmptyState
         message="No contracts match found. 
         Make sure you are searching with contract address, name, or description."
       />
     );
-  if (!isReadOnly)
-    return (
-      <ContractListTable
-        contracts={filteredContracts}
-        isContractRemovable={isContractRemovable}
-      />
-    );
-  return (
+
+  return isReadOnly ? (
     <ContractListReadOnlyTable
-      contracts={filteredContracts}
+      contracts={contracts}
       onContractSelect={onContractSelect}
     />
+  ) : (
+    <ContractListTable
+      contracts={contracts}
+      contractRemovalInfo={contractRemovalInfo}
+    />
   );
 };
 
+interface ListDetailProps {
+  contractListInfo: ContractListInfo;
+  isReadOnly?: boolean;
+  isInstantiatedByMe?: boolean;
+  onContractSelect?: (addr: string) => void;
+}
+
 export const ListDetail = ({
-  search,
-  setSearch,
   contractListInfo,
   isReadOnly,
-  isContractRemovable,
+  isInstantiatedByMe = false,
   onContractSelect,
 }: ListDetailProps) => {
   const userKey = useUserKey();
   const { getAllTags } = useContractStore();
 
+  const [searchKeyword, setSearchKeyword] = useState("");
   const [tagFilter, setTagFilter] = useState<string[]>([]);
 
+  const filteredContracts = useMemo(
+    () =>
+      matchSorter(contractListInfo.contracts, searchKeyword, {
+        keys: ["name", "description", "label", "address"],
+        sorter: (sortedItem) => sortedItem,
+      }).filter((contract) =>
+        tagFilter.every((tag) => contract.tags?.includes(tag))
+      ),
+    [contractListInfo.contracts, searchKeyword, tagFilter]
+  );
+
   return (
-    <Box minH="xs">
+    <Box minH="xs" pb="48px">
       <Box px={isReadOnly ? "0px" : "48px"}>
         <Flex gap={2} w="full" my={isReadOnly ? "24px" : "48px"}>
           <TextInput
             variant="floating"
-            value={search}
-            setInputState={setSearch}
+            value={searchKeyword}
+            setInputState={setSearchKeyword}
             placeholder="Search with contract address, name, or description"
-            size="lg"
+            size={!isReadOnly ? "lg" : "md"}
           />
           {!isReadOnly && (
             <TagSelection
@@ -108,14 +104,17 @@ export const ListDetail = ({
         <ZeroState
           list={{ label: contractListInfo.name, value: contractListInfo.slug }}
           isReadOnly={isReadOnly}
+          isInstantiatedByMe={isInstantiatedByMe}
         />
       ) : (
         <FilteredListDetail
-          search={search}
-          tagFilter={tagFilter}
-          contracts={contractListInfo.contracts}
+          contracts={filteredContracts}
           isReadOnly={isReadOnly}
-          isContractRemovable={isContractRemovable}
+          contractRemovalInfo={
+            contractListInfo.isContractRemovable
+              ? { label: contractListInfo.name, value: contractListInfo.slug }
+              : undefined
+          }
           onContractSelect={onContractSelect}
         />
       )}

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

@@ -44,8 +44,6 @@ export const SelectContract = ({
   const [listSlug, setListSlug] = useState("");
 
   const [searchManual, setSearchManual] = useState("");
-  const [searchList, setSearchList] = useState("");
-  const [searchInList, setSearchInList] = useState("");
   const [invalid, setInvalid] = useState("");
 
   const { getContractLists } = useContractStore();
@@ -57,8 +55,6 @@ export const SelectContract = ({
   const resetOnClose = () => {
     setListSlug("");
     setSearchManual("");
-    setSearchList("");
-    setSearchInList("");
     setInvalid("");
     onClose();
   };
@@ -147,12 +143,10 @@ export const SelectContract = ({
                 <Divider borderColor="gray.500" />
               </Flex>
 
-              <Heading as="h6" variant="h6" mb="8px">
+              <Heading as="h6" variant="h6" mb={4}>
                 Select from your Contract List
               </Heading>
               <AllContractLists
-                search={searchList}
-                setSearch={setSearchList}
                 contractLists={contractLists}
                 handleListSelect={handleListSelect}
                 isReadOnly
@@ -177,15 +171,8 @@ export const SelectContract = ({
             <ModalCloseButton />
             <ModalBody>
               <ListDetail
-                search={searchInList}
-                setSearch={setSearchInList}
                 contractListInfo={contractList}
                 isReadOnly
-                isContractRemovable={
-                  contractList.isContractRemovable
-                    ? { label: contractList.name, value: contractList.slug }
-                    : undefined
-                }
                 onContractSelect={onSelectThenClose}
               />
             </ModalBody>