Fix/cfe 123 search state consistency

CHANGELOG.md

@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#713](https://github.com/alleslabs/celatone-frontend/pull/713) Adjust search state consistency
 - [#702](https://github.com/alleslabs/celatone-frontend/pull/702) api v1 - contract info
 - [#703](https://github.com/alleslabs/celatone-frontend/pull/703) api v1 - contract's query msgs
 - [#697](https://github.com/alleslabs/celatone-frontend/pull/697) api v1 - contract tables (migrations and related proposals)

src/lib/components/select-code/CodeSelectDrawerButton.tsx

@@ -69,8 +69,6 @@ export const CodeSelectDrawerButton = ({
     onClose();
   };
 
-  const isSearching = !!keyword || permissionValue !== "all";
-
   return (
     <>
       <Button
@@ -119,26 +117,26 @@ export const CodeSelectDrawerButton = ({
             <Tabs px={6}>
               <TabList borderBottom="1px" borderColor="gray.800">
                 <CustomTab count={storedCodesCount}>My Stored Codes</CustomTab>
-                <CustomTab count={savedCodesCount}>My Saved Codes </CustomTab>
+                <CustomTab count={savedCodesCount}>My Saved Codes</CustomTab>
               </TabList>
               <TabPanels>
                 <TabPanel p={0}>
                   <MyStoredCodesTable
                     codes={stored}
+                    totalData={storedCodesCount}
                     isLoading={isStoredCodesLoading}
                     onRowSelect={handleSelect}
                     emptyMessage="You don’t have any stored codes in this device."
                     disconnectedMessage="to see your stored code."
-                    isSearching={isSearching}
                     isReadOnly
                   />
                 </TabPanel>
                 <TabPanel p={0}>
                   <MySavedCodesTable
                     codes={saved}
+                    totalData={savedCodesCount}
                     isLoading={isSavedCodesLoading}
                     onRowSelect={handleSelect}
-                    isSearching={isSearching}
                     isReadOnly
                   />
                 </TabPanel>

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

@@ -10,14 +10,13 @@ import { ContractListCard } from "./ContractListCard";
 interface AllContractListsProps {
   contractLists: ContractListInfo[];
   handleListSelect: (value: string) => void;
-  isReadOnly?: boolean;
+  isReadOnly: boolean;
 }
 
 export const AllContractLists = ({
   contractLists,
-  isReadOnly,
-
   handleListSelect,
+  isReadOnly,
 }: AllContractListsProps) => {
   const [searchKeyword, setSearchKeyword] = useState("");
 
@@ -41,8 +40,10 @@ export const AllContractLists = ({
       />
       {filteredContractLists.length === 0 ? (
         <EmptyState
-          message="None of your lists matches this search."
+          message="No matching lists found.
+        Make sure you are searching with list name."
           imageVariant="not-found"
+          withBorder
         />
       ) : (
         <SimpleGrid
@@ -56,7 +57,7 @@ export const AllContractLists = ({
               key={item.slug}
               item={item}
               handleListSelect={handleListSelect}
-              isReadOnly={isReadOnly || !item.isInfoEditable}
+              isReadOnly={isReadOnly}
             />
           ))}
         </SimpleGrid>

src/lib/components/select-contract/ContractListCard.tsx

@@ -26,8 +26,9 @@ export const ContractListCard = ({
   isReadOnly,
 }: ContractListCardProps) => {
   const isInstantiatedByMe =
-    item.slug !== formatSlugName(INSTANTIATED_LIST_NAME);
-  const isDisabled = isReadOnly && isInstantiatedByMe && !item.contracts.length;
+    item.slug === formatSlugName(INSTANTIATED_LIST_NAME);
+  const isDisabled =
+    isReadOnly && !isInstantiatedByMe && !item.contracts.length;
 
   return (
     <Flex
@@ -65,7 +66,7 @@ export const ContractListCard = ({
           </Text>
           <Badge>{item.contracts.length}</Badge>
         </Flex>
-        {isInstantiatedByMe && (
+        {!isInstantiatedByMe && (
           <Text
             variant="body3"
             textColor={isDisabled ? "text.disabled" : "text.dark"}
@@ -74,7 +75,7 @@ export const ContractListCard = ({
           </Text>
         )}
       </Flex>
-      {!isReadOnly && (
+      {!isReadOnly && item.isInfoEditable && (
         <Menu>
           <MenuButton
             m={0}

src/lib/components/select-contract/ContractListDetail.tsx

@@ -55,7 +55,8 @@ const ContractListContent = ({
           <EmptyState
             imageVariant="not-found"
             message="No matching contracts found.
-  Make sure you are searching with a contract address, name, or description."
+          Make sure you are searching with a contract address, name, or description."
+            withBorder
           />
         )
       }

src/lib/components/state/ZeroState.tsx

@@ -65,29 +65,38 @@ const renderText = (listSlug: string) => {
 export const ZeroState = ({ list, isReadOnly }: ZeroStateProps) => {
   const navigate = useInternalNavigate();
   return (
-    <Flex width="full" py={12} direction="column" alignContent="center">
-      <Flex alignItems="center" flexDir="column" gap={4}>
-        <StateImage imageVariant="empty" />
-        <Text color="text.dark">{renderText(list.value)}</Text>
-        {!isReadOnly && (
-          <ActionSection
-            list={list}
-            handleAction={() => navigate({ pathname: "/deploy" })}
-          />
-        )}
-      </Flex>
+    <Flex
+      width="full"
+      py={12}
+      gap={4}
+      direction="column"
+      alignItems="center"
+      borderY="1px solid"
+      borderColor="gray.700"
+    >
+      <StateImage imageVariant="empty" />
+      <Text color="text.dark">{renderText(list.value)}</Text>
+      {!isReadOnly && (
+        <ActionSection
+          list={list}
+          handleAction={() => navigate({ pathname: "/deploy" })}
+        />
+      )}
     </Flex>
   );
 };
 
 export const AccountZeroState = ({ button }: { button: JSX.Element }) => (
   <Flex
-    alignItems="center"
+    width="full"
+    py={12}
     gap={4}
-    color="text.dark"
+    my={8}
     direction="column"
-    my={12}
-    py={8}
+    alignItems="center"
+    borderY="1px solid"
+    color="text.dark"
+    borderColor="gray.700"
   >
     <StateImage imageVariant="empty" />
     <Flex align="center">You don’t have any saved accounts.</Flex>
@@ -103,12 +112,15 @@ export const AccountZeroState = ({ button }: { button: JSX.Element }) => (
 
 export const SavedCodeZeroState = ({ button }: { button: JSX.Element }) => (
   <Flex
-    alignItems="center"
+    width="full"
+    py={12}
     gap={4}
-    color="text.dark"
+    my={8}
     direction="column"
-    my={4}
-    py={8}
+    alignItems="center"
+    borderY="1px solid"
+    borderColor="gray.700"
+    color="text.dark"
   >
     <StateImage imageVariant="empty" />
     <Flex align="center">You don’t have any saved codes.</Flex>

src/lib/components/table/codes/MySavedCodesTable.tsx

@@ -6,38 +6,45 @@ import { CodesTable } from "./CodesTable";
 
 interface MySavedCodesTableProps {
   codes: CodeInfo[];
+  totalData: number;
   isLoading: boolean;
   onRowSelect: (codeId: number) => void;
-  isSearching: boolean;
   isReadOnly?: boolean;
 }
 
 export const MySavedCodesTable = ({
   codes,
+  totalData,
   isLoading,
   onRowSelect,
-  isSearching,
   isReadOnly = false,
-}: MySavedCodesTableProps) => (
-  <CodesTable
-    codes={codes}
-    isLoading={isLoading}
-    emptyState={
-      isSearching || isReadOnly ? (
+}: MySavedCodesTableProps) =>
+  totalData ? (
+    <CodesTable
+      codes={codes}
+      isLoading={isLoading}
+      emptyState={
         <EmptyState
-          imageVariant={isSearching ? "not-found" : "empty"}
-          message={
-            isReadOnly && !isSearching
-              ? "You don’t have any saved codes."
-              : "No matching code found. Make sure you are searching with code id or code name"
-          }
-          withBorder={!isReadOnly}
+          my={0}
+          imageVariant="not-found"
+          message="No matching codes found. Make sure you are searching with Code ID or Code Name"
+          withBorder
+        />
+      }
+      onRowSelect={onRowSelect}
+      isReadOnly={isReadOnly}
+    />
+  ) : (
+    <>
+      {isReadOnly ? (
+        <EmptyState
+          my={0}
+          imageVariant="empty"
+          message="You don’t have any saved codes."
+          withBorder
         />
       ) : (
         <SavedCodeZeroState button={<SaveCodeButton />} />
-      )
-    }
-    onRowSelect={onRowSelect}
-    isReadOnly={isReadOnly}
-  />
-);
+      )}
+    </>
+  );

src/lib/components/table/codes/MyStoredCodesTable.tsx

@@ -5,21 +5,21 @@ import { CodesTableWithWallet } from "./CodesTableWithWallet";
 
 interface MyStoredCodesTableProps {
   codes: CodeInfo[];
+  totalData: number;
   isLoading: boolean;
   onRowSelect: (codeId: number) => void;
   emptyMessage: string;
   disconnectedMessage: string;
-  isSearching: boolean;
   isReadOnly?: boolean;
 }
 
 export const MyStoredCodesTable = ({
   codes,
+  totalData,
   isLoading,
   onRowSelect,
   emptyMessage,
   disconnectedMessage,
-  isSearching,
   isReadOnly = false,
 }: MyStoredCodesTableProps) => (
   <CodesTableWithWallet
@@ -28,8 +28,12 @@ export const MyStoredCodesTable = ({
     emptyState={
       <EmptyState
         my={0}
-        imageVariant={isSearching ? "not-found" : "empty"}
-        message={isSearching ? "No matched codes found" : emptyMessage}
+        imageVariant={totalData ? "not-found" : "empty"}
+        message={
+          totalData
+            ? "No matched codes found. Make sure you are searching with Code ID or Code Name"
+            : emptyMessage
+        }
         withBorder
       />
     }

src/lib/pages/contract-list/index.tsx

@@ -47,6 +47,7 @@ const AllContractListsPage = observer(() => {
         <AllContractLists
           contractLists={contractLists}
           handleListSelect={handleListSelect}
+          isReadOnly={false}
         />
       </Flex>
     </PageContainer>

src/lib/pages/public-project/components/AllProject.tsx

@@ -1,4 +1,12 @@
-import { Box, SimpleGrid, Flex, Button, Link, Text } from "@chakra-ui/react";
+import {
+  Box,
+  SimpleGrid,
+  Flex,
+  Button,
+  Link,
+  Text,
+  Heading,
+} from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
 import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
@@ -7,7 +15,7 @@ import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
-import { EmptyState } from "lib/components/state";
+import { EmptyState, StateImage } from "lib/components/state";
 import { usePublicProjectStore } from "lib/providers/store";
 import { usePublicProjects } from "lib/services/publicProjectService";
 import type { PublicProjectInfo } from "lib/types";
@@ -46,18 +54,35 @@ export const AllProject = observer(() => {
   if (isLoading) return <Loading withBorder />;
   if (!publicProjectInfo)
     return (
-      <Flex flexDirection="column" alignItems="center">
-        <EmptyState
-          imageVariant="empty"
-          message="We are currently gathering public projects to feature here. If you would like to share your project with the community, please submit your request."
-        />
+      <Flex
+        flexDirection="column"
+        alignItems="center"
+        w="full"
+        bg="gray.900"
+        borderRadius={8}
+        p={12}
+      >
+        <StateImage imageVariant="empty" />
+        <Heading as="h6" variant="h6" mt={2}>
+          Gathering Public Projects...
+        </Heading>
+        <Text
+          mt={4}
+          mb={8}
+          color="text.dark"
+          textAlign="center"
+          whiteSpace="pre-wrap"
+        >
+          We are currently gathering public projects to feature here.
+          <br /> To share yours with the community, please submit your request.
+        </Text>
         <Link
           href="https://github.com/alleslabs/celatone-api"
           target="_blank"
           rel="noopener noreferrer"
           onClick={() => track(AmpEvent.USE_SUBMIT_PROJECT)}
         >
-          <Button gap={2} mt={8} variant="outline-primary">
+          <Button gap={2} variant="outline-primary">
             <CustomIcon name="github" />
             Submit on Github
           </Button>
@@ -77,8 +102,10 @@ export const AllProject = observer(() => {
       />
       {!filteredPublicProjects.length ? (
         <EmptyState
-          message="None of your lists matches this search."
+          message="No matching projects found.
+        Make sure you are searching with Project Name."
           imageVariant="not-found"
+          withBorder
         />
       ) : (
         <SimpleGrid