Merge branch 'develop' into fix/incorrect-unknown-block-height-rendering

alleslabs · Jan 24, 2023 · 10b31ed · 10b31ed
2 parents b69d977 + a6d966c
commit 10b31ed
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Features
 
 - [#122](https://github.com/alleslabs/celatone-frontend/pull/122) Fix unknown code upload block height
+- [#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 +114,8 @@ 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
 - [#42](https://github.com/alleslabs/celatone-frontend/pull/42) Properly show CTAs on contract-list page and edit zero/disconnected state

diff --git a/src/lib/components/Copier.tsx b/src/lib/components/Copier.tsx
@@ -1,13 +1,21 @@
 import { CopyIcon } from "@chakra-ui/icons";
+import type { LayoutProps } from "@chakra-ui/react";
 import { Tooltip, useClipboard } from "@chakra-ui/react";
 import { useEffect } from "react";
 
 interface CopierProps {
   value: string;
   ml?: string;
+  className?: string;
+  display?: LayoutProps["display"];
 }
 
-export const Copier = ({ value, ml = "8px" }: CopierProps) => {
+export const Copier = ({
+  value,
+  ml = "8px",
+  className,
+  display = "flex",
+}: CopierProps) => {
   const { onCopy, hasCopied, setValue } = useClipboard(value);
 
   useEffect(() => setValue(value), [value, setValue]);
@@ -21,17 +29,20 @@ export const Copier = ({ value, ml = "8px" }: CopierProps) => {
       arrowSize={8}
       bg="primary.dark"
     >
-      <CopyIcon
-        display="flex"
-        boxSize="16px"
-        color="text.dark"
-        cursor="pointer"
-        marginLeft={ml}
-        onClick={(e) => {
-          e.stopPropagation();
-          onCopy();
-        }}
-      />
+      <div>
+        <CopyIcon
+          className={className}
+          display={display}
+          boxSize="16px"
+          color="text.dark"
+          cursor="pointer"
+          marginLeft={ml}
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy();
+          }}
+        />
+      </div>
     </Tooltip>
   );
 };
diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
@@ -139,14 +139,16 @@ export const ExplorerLink = ({
 
   return (
     <Box
-      role="group"
       display="inline-flex"
       alignItems="center"
       _hover={{
         ...(!readOnly && {
           textDecoration: "underline",
           textDecorationColor: "primary.main",
         }),
+        "& .copy-button": {
+          display: "flex",
+        },
       }}
       {...componentProps}
     >
@@ -161,13 +163,12 @@ export const ExplorerLink = ({
             isEllipsis={textFormat === "ellipsis"}
             maxWidth={maxWidth}
           />
-          <Box
-            alignItems="center"
-            display={canCopyWithHover ? "none" : undefined}
-            _groupHover={canCopyWithHover ? { display: "flex" } : undefined}
-          >
-            <Copier value={copyValue || value} ml="8px" />
-          </Box>
+          <Copier
+            value={copyValue || value}
+            ml="8px"
+            className="copy-button"
+            display={canCopyWithHover ? "none" : "flex"}
+          />
         </>
       )}
     </Box>

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/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
@@ -19,6 +19,7 @@ import {
   useSimulateFee,
 } from "lib/app-provider";
 import { useInstantiateTx } from "lib/app-provider/tx/instantiate";
+import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ControllerInput } from "lib/components/forms";
 import { AssetInput } from "lib/components/forms/AssetInput";
 import JsonInput from "lib/components/json/JsonInput";
@@ -204,6 +205,10 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
         <Heading as="h4" variant="h4" my="48px">
           Instantiate new contract
         </Heading>
+        <ConnectWalletAlert
+          subtitle="You need to connect your wallet to perform this action"
+          mb={6}
+        />
         <RadioGroup
           onChange={(nextVal: "select-existing" | "fill-manually") =>
             setMethod(nextVal)
@@ -223,7 +228,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
         <form style={{ width: "100%" }}>
           {method === "select-existing" ? (
             <CodeSelect
-              mt="16px"
+              mt="24px"
               mb="32px"
               onCodeSelect={(code: string) => setValue("codeId", code)}
               codeId={codeId}

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">