Merge branch 'develop' into feat/instantiate-wallet-alert

alleslabs · Jan 24, 2023 · 471e803 · 471e803
2 parents 91e3e41 + 294ee5e
commit 471e803
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Features
 
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Add connect wallet alert in instantiate page
+- [#126](https://github.com/alleslabs/celatone-frontend/pull/126) Add port id copier for IBC port id
 - [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#76](https://github.com/alleslabs/celatone-frontend/pull/76) Add Public projects page
 - [#116](https://github.com/alleslabs/celatone-frontend/pull/116) Support Terra2.0 mainnet and testnet
@@ -112,6 +113,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#119](https://github.com/alleslabs/celatone-frontend/pull/119) Fix searching and project ordering in public projects page
 - [#118](https://github.com/alleslabs/celatone-frontend/pull/118) Fix floating tooltip when scrolling out of copy button
 - [#111](https://github.com/alleslabs/celatone-frontend/pull/111) Fix recent activities navigation and instantiate encode/decode
 - [#105](https://github.com/alleslabs/celatone-frontend/pull/105) Propoerly show instantiator of code contracts and contract in the instantiated list

diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx
@@ -1,5 +1,6 @@
-import { chakra, Divider, Flex, Text } from "@chakra-ui/react";
+import { Box, chakra, Divider, Flex, Text } from "@chakra-ui/react";
 
+import { Copier } from "lib/components/Copier";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { LabelText } from "lib/components/LabelText";
 import { useGetAddressType } from "lib/hooks";
@@ -19,6 +20,32 @@ const Container = chakra(Flex, {
   },
 });
 
+const RenderPortId = ({ portId }: { portId: string }) => {
+  const charArray = portId.match(/.{1,28}/g);
+
+  return (
+    <Box
+      fontSize="14px"
+      _hover={{
+        "& .ibc-port-copy": {
+          display: "flex",
+        },
+      }}
+    >
+      {charArray?.map((line, idx) =>
+        idx === charArray.length - 1 ? (
+          <Flex align="center">
+            {line}
+            <Copier value={portId} className="ibc-port-copy" display="none" />
+          </Flex>
+        ) : (
+          line
+        )
+      )}
+    </Box>
+  );
+};
+
 export const InstantiateInfo = ({
   contractData: {
     instantiateInfo,
@@ -136,7 +163,9 @@ export const InstantiateInfo = ({
       )}
 
       {instantiateInfo.ibcPortId && (
-        <LabelText label="IBC Port ID">{instantiateInfo.ibcPortId}</LabelText>
+        <LabelText label="IBC Port ID">
+          <RenderPortId portId={instantiateInfo.ibcPortId} />
+        </LabelText>
       )}
     </Container>
   );

diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
@@ -1,5 +1,6 @@
 import { Box, SimpleGrid, Flex, Button, Icon } from "@chakra-ui/react";
 import { matchSorter } from "match-sorter";
+import { observer } from "mobx-react-lite";
 import { useMemo, useState } from "react";
 import { BsGithub } from "react-icons/bs";
 import { MdOutlineManageSearch, MdSearchOff } from "react-icons/md";
@@ -8,36 +9,38 @@ import { TextInput } from "lib/components/forms";
 import { EmptyState } from "lib/components/state/EmptyState";
 import { usePublicProjectStore } from "lib/hooks";
 import { usePublicProjectsQuery } from "lib/services/publicProject";
+import type { PublicProjectInfo } from "lib/types";
 
 import { PublicProjectCard } from "./PublicProjectCard";
 
-export const AllProject = () => {
+const sortByAtoZ = (projects: PublicProjectInfo[]) =>
+  projects.sort((a, b) => a.details.name.localeCompare(b.details.name));
+
+export const AllProject = observer(() => {
   const { data: publicProjectInfo } = usePublicProjectsQuery();
   const [searchKeyword, setSearchKeyword] = useState("");
   const { getSavedPublicProjects } = usePublicProjectStore();
+  const savedProjects = getSavedPublicProjects();
 
   const filteredPublicProjects = useMemo(() => {
     if (publicProjectInfo) {
-      const savedProjects = getSavedPublicProjects();
-      // HACKED
-      // TODO Sort saved project
-      const orderedProjects = publicProjectInfo.map((project) => {
-        const foundIndex = savedProjects.findIndex(
-          (each) => each.slug === project.slug
-        );
+      const orderedProjects = sortByAtoZ(publicProjectInfo);
+      const orderSavedProjects = sortByAtoZ(
+        publicProjectInfo.filter((project) =>
+          savedProjects.some((save) => save.slug === project.slug)
+        )
+      );
 
-        return {
-          ...project,
-          order: foundIndex === -1 ? 9999 : foundIndex,
-        };
-      });
+      const order = new Set([...orderSavedProjects, ...orderedProjects]);
 
-      return matchSorter(orderedProjects, searchKeyword, {
+      return matchSorter([...Array.from(order)], searchKeyword, {
         keys: ["details.name"],
+        sorter: (rankedItems) => rankedItems,
+        threshold: matchSorter.rankings.CONTAINS,
       });
     }
     return [];
-  }, [getSavedPublicProjects, publicProjectInfo, searchKeyword]);
+  }, [publicProjectInfo, savedProjects, searchKeyword]);
 
   if (!publicProjectInfo)
     return (
@@ -81,4 +84,4 @@ export const AllProject = () => {
       )}
     </Box>
   );
-};
+});
diff --git a/src/lib/pages/public-project/components/CodesTable.tsx b/src/lib/pages/public-project/components/CodesTable.tsx
@@ -55,7 +55,7 @@ export const CodesTable = ({
       )}
       {!filteredCodes.length ? (
         <Flex my={8}>
-          <EmptyState message="No matched code found." icon={MdSearchOff} />
+          <EmptyState message="No code found." icon={MdSearchOff} />
         </Flex>
       ) : (
         <TableContainer w="full">

diff --git a/src/lib/pages/public-project/components/ContractsTable.tsx b/src/lib/pages/public-project/components/ContractsTable.tsx
@@ -55,9 +55,9 @@ export const ContractsTable = ({
           />
         </Flex>
       )}
-      {filteredContracts.length ? (
+      {!filteredContracts.length ? (
         <Flex my={8}>
-          <EmptyState message="No matched contract found." icon={MdSearchOff} />
+          <EmptyState message="No contract found." icon={MdSearchOff} />
         </Flex>
       ) : (
         <TableContainer w="full">