Feat: my past verification

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1093](https://github.com/alleslabs/celatone-frontend/pull/1093) My past module verifications with functionalities
 - [#1085](https://github.com/alleslabs/celatone-frontend/pull/1085) Add my module verification details
 - [#1087](https://github.com/alleslabs/celatone-frontend/pull/1087) Add modules verify page
 - [#1085](https://github.com/alleslabs/celatone-frontend/pull/1085) Add verify module store

src/config/project/index.ts

@@ -10,4 +10,5 @@ export const PROJECT_CONSTANTS: ProjectConstants = {
   maxContractNameLength: 50,
   maxContractDescriptionLength: 250,
   maxListNameLength: 50,
+  maxMoveVerifyTaskRequestNoteLength: 50,
 };

src/config/project/types.ts

@@ -10,4 +10,7 @@ export interface ProjectConstants {
   maxContractNameLength: number;
   maxContractDescriptionLength: number;
   maxCodeNameLength: number;
+
+  // move verify task
+  maxMoveVerifyTaskRequestNoteLength: number;
 }

src/lib/app-provider/env.ts

@@ -171,6 +171,7 @@ export enum CELATONE_QUERY_KEYS {
   MOVE_VERIFY_INFO = "CELATONE_QUERY_MOVE_VERIFY_INFO",
   MOVE_VERIFY_INFOS_BY_ADDRESS = "CELATONE_QUERY_MOVE_VERIFY_INFOS_BY_ADDRESS",
   MOVE_VERIFY_TASK_BY_TASK_ID = "CELATONE_QUERY_MOVE_VERIFY_TASK_BY_TASK_ID",
+  MOVE_VERIFY_TASK_BY_TASK_IDS = "CELATONE_QUERY_MOVE_VERIFY_TASK_BY_TASK_IDS",
   // CHAIN CONFIGS
   CHAIN_CONFIGS = "CELATONE_QUERY_CHAIN_CONFIGS",
   // DOCKER

src/lib/components/ExplorerLink.tsx

@@ -21,7 +21,8 @@ export type LinkType =
   | "code_id"
   | "block_height"
   | "proposal_id"
-  | "pool_id";
+  | "pool_id"
+  | "task_id";
 
 interface ExplorerLinkProps extends FlexProps {
   value: string;
@@ -75,6 +76,9 @@ export const getNavigationUrl = ({
     case "pool_id":
       url = "/pools";
       break;
+    case "task_id":
+      url = "/my-module-verifications";
+      break;
     case "invalid_address":
       return "";
     default:

src/lib/components/state/EmptyState.tsx

@@ -15,6 +15,7 @@ export interface EmptyStateProps {
   alignItems?: FlexProps["alignItems"];
   textVariant?: TextProps["variant"];
   hasBorderTop?: boolean;
+  children?: React.ReactNode;
 }
 
 export const EmptyState = ({
@@ -28,6 +29,7 @@ export const EmptyState = ({
   alignItems = "center",
   textVariant = "body1",
   hasBorderTop = true,
+  children,
 }: EmptyStateProps) => (
   <Flex
     alignItems={alignItems}
@@ -57,5 +59,6 @@ export const EmptyState = ({
     >
       {message}
     </Text>
+    {children}
   </Flex>
 );

src/lib/pages/modules-verify/index.tsx

@@ -17,7 +17,7 @@ import { FooterCta } from "lib/components/layouts";
 import { NoMobile } from "lib/components/modal";
 import PageContainer from "lib/components/PageContainer";
 import { CelatoneSeo } from "lib/components/Seo";
-import { useVerifyModuleTaskStore } from "lib/providers/store";
+import { useMoveVerifyTaskStore } from "lib/providers/store";
 import { useSubmitMoveVerify } from "lib/services/verification/move";
 
 import {
@@ -37,7 +37,7 @@ export const ModulesVerify = observer(() => {
   const { currentChainId } = useCelatoneApp();
   const { mutateAsync, isError, isLoading } = useSubmitMoveVerify();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { addVerifyModuleTask } = useVerifyModuleTaskStore();
+  const { addMoveVerifyTask } = useMoveVerifyTaskStore();
 
   const { control, watch, handleSubmit, setValue } = useForm<ModuleVerifyForm>({
     mode: "all",
@@ -68,7 +68,7 @@ export const ModulesVerify = observer(() => {
     if (!data) return;
 
     setValue("taskId", data.id);
-    addVerifyModuleTask({
+    addMoveVerifyTask({
       taskId: data.id,
       chainId: currentChainId,
       requestNote,

src/lib/pages/my-module-verification-details/components/MyModuleVerificationDetailsStatusBadge.tsx

@@ -1,14 +1,17 @@
 import { Tag, TagLabel } from "@chakra-ui/react";
 
 import { ActiveDot } from "lib/components/ActiveDot";
+import { CustomIcon } from "lib/components/icon";
 import { MoveVerifyTaskStatus } from "lib/services/types";
 
 interface MyModuleVerificationDetailsStatusBadgeProps {
   status: MoveVerifyTaskStatus;
+  hasCloseBtn?: boolean;
 }
 
 export const MyModuleVerificationDetailsStatusBadge = ({
   status,
+  hasCloseBtn,
 }: MyModuleVerificationDetailsStatusBadgeProps) => {
   const renderStatus = () => {
     if (status === MoveVerifyTaskStatus.Pending)
@@ -44,8 +47,9 @@ export const MyModuleVerificationDetailsStatusBadge = ({
   };
 
   return (
-    <Tag size="xs" variant="gray" w="fit-content" gap={1}>
+    <Tag size="md" variant="gray" w="fit-content" gap={1}>
       {renderStatus()}
+      {hasCloseBtn && <CustomIcon name="close" boxSize={3} mr={0} />}
     </Tag>
   );
 };

src/lib/pages/my-module-verification-details/index.tsx

@@ -6,7 +6,7 @@ import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { CelatoneSeo } from "lib/components/Seo";
 import { EmptyState } from "lib/components/state";
-import { useVerifyModuleTaskStore } from "lib/providers/store";
+import { useMoveVerifyTaskStore } from "lib/providers/store";
 import { useMoveVerifyTaskInfo } from "lib/services/verification/move";
 
 import {
@@ -19,9 +19,9 @@ import {
 import { zMyModuleVerificationDetailsQueryParams } from "./types";
 
 const MyModuleVerificationDetailsBody = ({ taskId }: { taskId: string }) => {
-  const { data, isLoading, error } = useMoveVerifyTaskInfo(taskId);
-  const { getVerifyModuleTask } = useVerifyModuleTaskStore();
-  const verifyModuleTask = getVerifyModuleTask(taskId);
+  const { data, isLoading, error } = useMoveVerifyTaskInfo(taskId, !!taskId);
+  const { getMoveVerifyTask } = useMoveVerifyTaskStore();
+  const verifyModuleTask = getMoveVerifyTask(taskId);
 
   if (isLoading) return <Loading />;
   if (!data || error || !verifyModuleTask)

src/lib/pages/my-module-verifications/components/MoveVerifyTaskStatusFilter.tsx

@@ -0,0 +1,136 @@
+import type { InputProps } from "@chakra-ui/react";
+import { Flex, FormControl, useOutsideClick } from "@chakra-ui/react";
+import { matchSorter } from "match-sorter";
+import { forwardRef, useMemo, useRef, useState } from "react";
+
+import {
+  DropdownContainer,
+  FilterChip,
+  FilterDropdownItem,
+  FilterInput,
+} from "lib/components/filter";
+import { MyModuleVerificationDetailsStatusBadge } from "lib/pages/my-module-verification-details/components";
+import { MoveVerifyTaskStatus } from "lib/services/types";
+import { toggleItem } from "lib/utils";
+
+export interface MoveVerifyTaskStatusFilterProps extends InputProps {
+  result: MoveVerifyTaskStatus[];
+  minW?: string;
+  label?: string;
+  placeholder?: string;
+  setResult: (option: MoveVerifyTaskStatus[]) => void;
+  isMulti: boolean;
+}
+
+const OPTIONS = [
+  { label: "completed", value: MoveVerifyTaskStatus.Finished },
+  { label: "failed", value: MoveVerifyTaskStatus.NotFound },
+  { label: "pending", value: MoveVerifyTaskStatus.Pending },
+  { label: "verifying", value: MoveVerifyTaskStatus.Running },
+];
+
+export const MoveVerifyTaskStatusFilter = forwardRef<
+  HTMLInputElement,
+  MoveVerifyTaskStatusFilterProps
+>(
+  (
+    {
+      result,
+      minW = "50%",
+      setResult,
+      placeholder,
+      label,
+      isMulti,
+    }: MoveVerifyTaskStatusFilterProps,
+    ref
+  ) => {
+    const [keyword, setKeyword] = useState("");
+    const [isDropdown, setIsDropdown] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const boxRef = useRef<HTMLDivElement>(null);
+
+    const dropdownValue = useMemo(
+      () =>
+        keyword
+          ? matchSorter(OPTIONS, keyword, {
+              keys: ["label"],
+              threshold: matchSorter.rankings.CONTAINS,
+            })
+          : OPTIONS,
+      [keyword]
+    );
+
+    const isOptionSelected = (option: MoveVerifyTaskStatus) =>
+      result.some((selectedOption) => selectedOption === option);
+
+    const selectOption = (option: MoveVerifyTaskStatus) => {
+      setKeyword("");
+
+      if (!isMulti) {
+        setIsDropdown(false);
+
+        if (result[0] === option) setResult([]);
+        else setResult([option]);
+      } else {
+        setResult(toggleItem(result, option));
+      }
+    };
+
+    useOutsideClick({
+      ref: boxRef,
+      handler: () => setIsDropdown(false),
+    });
+
+    return (
+      <FormControl ref={boxRef} minW={minW} maxW="full" h={8}>
+        <FilterInput
+          keyword={keyword}
+          placeholder={placeholder}
+          result={result}
+          label={label}
+          inputRef={inputRef}
+          ref={ref}
+          isDropdown={isDropdown}
+          setKeyword={setKeyword}
+          setIsDropdown={setIsDropdown}
+          chipContainerComponent={
+            <Flex alignItems="center" pl={2} gap={2}>
+              {result.map((option) => (
+                <FilterChip
+                  key={option}
+                  chipComponent={
+                    <MyModuleVerificationDetailsStatusBadge
+                      status={option}
+                      hasCloseBtn
+                    />
+                  }
+                  onSelect={() => setResult(toggleItem(result, option))}
+                />
+              ))}
+            </Flex>
+          }
+        />
+
+        {isDropdown && (
+          <DropdownContainer>
+            {!dropdownValue.length && <Flex p={2}>No filter matched</Flex>}
+
+            {/* option selection section */}
+            {dropdownValue.map((option) => (
+              <FilterDropdownItem
+                key={option.label}
+                filterDropdownComponent={
+                  <MyModuleVerificationDetailsStatusBadge
+                    status={option.value}
+                  />
+                }
+                isOptionSelected={isOptionSelected(option.value)}
+                onSelect={() => selectOption(option.value)}
+              />
+            ))}
+          </DropdownContainer>
+        )}
+      </FormControl>
+    );
+  }
+);

src/lib/pages/my-module-verifications/components/my-module-verifications-table/Filenames.tsx

@@ -0,0 +1,39 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
+
+import type { MoveVerifyTaskInfo } from "../../data";
+
+interface FilenameCellProps {
+  task: MoveVerifyTaskInfo;
+}
+
+export const FilenameCell = ({ task }: FilenameCellProps) => {
+  const [isHoverText, setIsHoverText] = useState(false);
+
+  const formattedText = useMemo(() => {
+    const files = Object.keys(task.fileMap)
+      .filter((file) => !file.includes(".toml"))
+      .map((file) => file.slice(0, -5)); // remove ".move" extension
+
+    if (isHoverText) return files.join(", ");
+
+    const firstPart = files.slice(0, 3).join(", ");
+    const remaining = files.length - 3;
+
+    // eslint-disable-next-line sonarjs/no-nested-template-literals
+    return `${firstPart}${remaining > 0 ? `, +${remaining}` : ""}`;
+  }, [isHoverText, task.fileMap]);
+
+  return (
+    <Flex
+      borderRadius="8px"
+      bgColor={isHoverText ? "gray.800" : "undefined"}
+      onMouseOver={() => setIsHoverText(true)}
+      onMouseOut={() => setIsHoverText(false)}
+      flexWrap="wrap"
+      wordBreak="break-word"
+    >
+      <Text>{formattedText}</Text>
+    </Flex>
+  );
+};

src/lib/pages/my-module-verifications/components/my-module-verifications-table/MyModuleVerificatinsRow.tsx

@@ -0,0 +1,66 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+import type { GridProps } from "@chakra-ui/react";
+
+import type { MoveVerifyTaskInfo } from "../../data";
+import { useInternalNavigate } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TableRow } from "lib/components/table";
+import { MyModuleVerificationDetailsStatusBadge } from "lib/pages/my-module-verification-details/components";
+import { dateFromNow, formatUTC } from "lib/utils";
+
+import { FilenameCell } from "./Filenames";
+import { RequestNoteCell } from "./RequestNoteCell";
+
+interface MyModuleVerificationsRowProps {
+  templateColumns: GridProps["templateColumns"];
+  task: MoveVerifyTaskInfo;
+}
+
+export const MyModuleVerificationsRow = ({
+  templateColumns,
+  task,
+}: MyModuleVerificationsRowProps) => {
+  const navigate = useInternalNavigate();
+
+  return (
+    <Grid
+      templateColumns={templateColumns}
+      onClick={() =>
+        navigate({
+          pathname: "/my-module-verifications/[taskId]",
+          query: { taskId: task.taskId },
+        })
+      }
+      _hover={{ bg: "gray.900" }}
+      transition="all 0.25s ease-in-out"
+      cursor="pointer"
+    >
+      <TableRow>
+        <ExplorerLink type="task_id" value={task.taskId} showCopyOnHover />
+      </TableRow>
+      <TableRow>
+        <RequestNoteCell moveVerifyTask={task} />
+      </TableRow>
+      <TableRow>
+        <FilenameCell task={task} />
+      </TableRow>
+      <TableRow>
+        <MyModuleVerificationDetailsStatusBadge status={task.status} />
+      </TableRow>
+      <TableRow>
+        {task.verifiedAt ? (
+          <Flex direction="column">
+            <Text variant="body2" color="text.dark">
+              {formatUTC(task.verifiedAt)}
+            </Text>
+            <Text variant="body3" color="text.disabled">
+              ({dateFromNow(task.verifiedAt)})
+            </Text>
+          </Flex>
+        ) : (
+          <Text>-</Text>
+        )}
+      </TableRow>
+    </Grid>
+  );
+};