From 3c9dbdb69fadd46689535861352d63b8ddaa3474 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 18 Dec 2023 15:08:55 +0700
Subject: [PATCH 1/6] fix(components): make module link clickable with cmd or
 ctrl and add copier for resouce and struct

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/module/ModuleCard.tsx      | 81 +++++++++++--------
 .../resource/ResourceDetailCard.tsx           | 40 +++++----
 .../table/modules/ModulePathLink.tsx          | 25 +++---
 .../table/modules/ModulesTableRow.tsx         |  8 +-
 .../components/modules/ModuleLists.tsx        |  2 +-
 .../components/modules/ModuleListsBody.tsx    |  7 +-
 .../resources/ResourceSectionBody.tsx         | 14 +++-
 8 files changed, 112 insertions(+), 66 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55c37c072..b162061e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#675](https://github.com/alleslabs/celatone-frontend/pull/675) Make module links clickable with command/ctrl and add copier for struct names
 - [#669](https://github.com/alleslabs/celatone-frontend/pull/669) api v1 - contract transaction
 - [#672](https://github.com/alleslabs/celatone-frontend/pull/672) refactor balances
 - [#662](https://github.com/alleslabs/celatone-frontend/pull/662) Add republish button in module detail
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 729502719..bf3ab9cbc 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -1,6 +1,8 @@
 import { Flex, Grid, Text } from "@chakra-ui/react";
 
+import { AppLink } from "../AppLink";
 import { CustomIcon } from "../icon";
+import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useVerifyModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
@@ -24,43 +26,54 @@ export const ModuleCard = ({
     address: selectedAddress,
     moduleName: module.moduleName,
   });
-
+  const formatAddresses = useFormatAddresses();
   return (
-    <Grid
-      borderRadius={8}
-      bgColor={
-        module.moduleName === selectedModule?.moduleName
-          ? "gray.700"
-          : "gray.800"
-      }
-      p={4}
-      alignItems="center"
-      cursor="pointer"
+    <AppLink
+      href={`/modules/${formatAddresses(selectedAddress).hex}/${
+        module.moduleName
+      }`}
+      passHref
       onClick={() => setSelectedModule(module)}
-      gap={1}
-      templateColumns="20px 1fr auto"
-      _hover={{
-        bg: "gray.700",
-      }}
-      transition=".25s all ease-out"
     >
-      <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
-      <Flex align="center" overflow="hidden" gap={1}>
-        <Text className="ellipsis" variant="body2">
-          {module.moduleName}
-        </Text>
-        {isVerified && (
-          <CustomIcon
-            name="check-circle-solid"
-            color="success.main"
-            boxSize={3}
+      <Grid
+        borderRadius={8}
+        bgColor={
+          module.moduleName === selectedModule?.moduleName
+            ? "gray.700"
+            : "gray.800"
+        }
+        p={4}
+        alignItems="center"
+        cursor="pointer"
+        onClick={(e) => e.stopPropagation()}
+        gap={1}
+        templateColumns="20px 1fr auto"
+        _hover={{
+          bg: "gray.700",
+        }}
+        transition=".25s all ease-out"
+      >
+        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+        <Flex align="center" overflow="hidden" gap={1}>
+          <Text className="ellipsis" variant="body2">
+            {module.moduleName}
+          </Text>
+          {isVerified && (
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={3}
+            />
+          )}
+        </Flex>
+        <Flex gap={1} ml="auto">
+          <CountBadge count={module.viewFunctions.length} variant="view" />
+          <CountBadge
+            count={module.executeFunctions.length}
+            variant="execute"
           />
-        )}
-      </Flex>
-      <Flex gap={1} ml="auto">
-        <CountBadge count={module.viewFunctions.length} variant="view" />
-        <CountBadge count={module.executeFunctions.length} variant="execute" />
-      </Flex>
-    </Grid>
+        </Flex>
+      </Grid>
+    </AppLink>
   );
 };
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index ea6d3bb30..f4441aea3 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -7,7 +7,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import { CopyButton } from "../copy";
+import { Copier, CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
 import type { InternalResource } from "lib/types";
 import { parseJsonStr } from "lib/utils";
@@ -54,22 +54,30 @@ export const ResourceDetailCard = ({
   return (
     <AccordionItem mb={4}>
       <AccordionButton>
-        <Flex
-          p={4}
-          justifyContent="space-between"
-          w="full"
-          align="center"
-          gap={{ base: 4, md: 8 }}
-        >
-          <Text
-            variant="body1"
-            fontWeight={600}
-            textAlign="left"
-            wordBreak="break-word"
+        <Flex p={4} justifyContent="space-between" w="full" align="center">
+          <Flex
+            alignItems="center"
+            transition="all 0.25s ease-in-out"
+            sx={{
+              "& > div": { opacity: 0, transition: "all 0.15s ease-in-out" },
+            }}
+            _hover={{ "& > div": { opacity: 1 } }}
           >
-            {resourceData.structTag}
-          </Text>
-          <Flex alignItems="center" gap={2} minW={{ base: 8, md: 36 }}>
+            <Text
+              variant="body1"
+              fontWeight={600}
+              textAlign="left"
+              wordBreak="break-word"
+            >
+              {resourceData.structTag}
+            </Text>
+            <Copier
+              type="resource"
+              value={resourceData.structTag}
+              copyLabel="Copied!"
+            />
+          </Flex>
+          <Flex alignItems="center" gap={2}>
             <CopyButton
               value={resourceData.moveResource}
               variant="outline-gray"
diff --git a/src/lib/components/table/modules/ModulePathLink.tsx b/src/lib/components/table/modules/ModulePathLink.tsx
index 808a5056f..7b226c704 100644
--- a/src/lib/components/table/modules/ModulePathLink.tsx
+++ b/src/lib/components/table/modules/ModulePathLink.tsx
@@ -1,6 +1,7 @@
 import { Flex, Text } from "@chakra-ui/react";
 
 import { useMobile } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
 import { Copier } from "lib/components/copy";
 import type { HexAddr } from "lib/types";
 import { truncate } from "lib/utils";
@@ -23,16 +24,22 @@ export const ModulePathLink = ({
       align="center"
       h="24px"
     >
-      <Text
-        variant="body2"
-        color="secondary.main"
-        transition="all 0.25s ease-in-out"
-        _hover={{ color: "secondary.light", textDecoration: "underline" }}
-        wordBreak={{ base: "break-all", md: "inherit" }}
-        cursor="pointer"
+      <AppLink
+        href={`/modules/${hexAddr}/${moduleName}`}
+        passHref
+        onClick={(e) => e.stopPropagation()}
       >
-        {`${truncate(hexAddr)} :: ${moduleName}`}
-      </Text>
+        <Text
+          variant="body2"
+          color="secondary.main"
+          transition="all 0.25s ease-in-out"
+          _hover={{ color: "secondary.light", textDecoration: "underline" }}
+          wordBreak={{ base: "break-all", md: "inherit" }}
+          cursor="pointer"
+        >
+          {`${truncate(hexAddr)} :: ${moduleName}`}
+        </Text>
+      </AppLink>
       <Copier
         type="module_path"
         value={`${hexAddr}::${moduleName}`}
diff --git a/src/lib/components/table/modules/ModulesTableRow.tsx b/src/lib/components/table/modules/ModulesTableRow.tsx
index 638dabb82..e2079c352 100644
--- a/src/lib/components/table/modules/ModulesTableRow.tsx
+++ b/src/lib/components/table/modules/ModulesTableRow.tsx
@@ -25,6 +25,7 @@ export const ModulesTableRow = ({
   const navigate = useInternalNavigate();
 
   const hex = unpadHexAddress(bech32AddressToHex(moduleInfo.address));
+
   return (
     <Box w="full" minW="min-content">
       <Grid
@@ -32,15 +33,16 @@ export const ModulesTableRow = ({
         templateColumns={templateColumns}
         _hover={{ background: "gray.900" }}
         transition="all 0.25s ease-in-out"
-        onClick={() =>
+        onClick={(e) => {
+          e.stopPropagation();
           navigate({
             pathname: "/modules/[address]/[moduleName]",
             query: {
               address: hex,
               moduleName: moduleInfo.name,
             },
-          })
-        }
+          });
+        }}
       >
         <TableRow>
           <ModulePathLink hexAddr={hex} moduleName={moduleInfo.name} />
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 6eb68efdf..26bfc0fbe 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -28,7 +28,7 @@ export const ModuleLists = ({
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
   return (
-    <Box mt={{ base: 4, md: 16 }}>
+    <Box mt={{ base: 4, md: 8 }}>
       {isMobileOverview ? (
         <MobileTitle
           title="Modules"
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 4e9bd1936..4bc85a657 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -53,9 +53,12 @@ export const ModuleListsBody = ({
     return (
       <EmptyState
         imageVariant={!keyword ? "empty" : "not-found"}
-        message={!keyword ? "No modules found" : "No matched modules found"}
+        message={
+          !keyword
+            ? "There are no modules on this account."
+            : "No matched modules found"
+        }
         withBorder
-        my={0}
       />
     );
   return (
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index aa1e01ce1..0639f0f20 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -2,6 +2,7 @@ import { Accordion, Badge, Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { ResourceDetailCard } from "lib/components/resource";
@@ -63,13 +64,24 @@ export const ResourceSectionBody = ({
             pb={6}
             gap={12}
           >
-            <Flex alignItems="center">
+            <Flex
+              alignItems="center"
+              sx={{
+                "& > div": { opacity: 0, transition: "all 0.15s ease-in-out" },
+              }}
+              _hover={{ "& > div": { opacity: 1 } }}
+            >
               <Heading as="h6" variant="h6" wordBreak="break-word">
                 {selectedResource.account}::{selectedResource.group}
               </Heading>
               <Badge variant="primary" ml={2}>
                 {selectedResource.items.length}
               </Badge>
+              <Copier
+                type="resource"
+                value={`${selectedResource.account}::${selectedResource.group}`}
+                copyLabel="Copied!"
+              />
             </Flex>
             <Button
               variant="outline-primary"

From deaaceb0f3b9d1fc85f5fc8d6dc5c741ad028f46 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 18 Dec 2023 17:32:08 +0700
Subject: [PATCH 2/6] fix(components): fix as comment

---
 .../resource/ResourceDetailCard.tsx           | 20 ++++++++++---------
 .../resources/ResourceSectionBody.tsx         | 12 +++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index f4441aea3..4d8702fa6 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -9,6 +9,7 @@ import {
 
 import { Copier, CopyButton } from "../copy";
 import { CustomIcon } from "../icon";
+import { useMobile } from "lib/app-provider";
 import type { InternalResource } from "lib/types";
 import { parseJsonStr } from "lib/utils";
 
@@ -20,6 +21,7 @@ export const ResourceDetailCard = ({
   resourceData,
 }: ResourceDetailCardProps) => {
   const parsedMoveResource = parseJsonStr(resourceData.moveResource);
+  const isMobile = useMobile();
 
   // Handle fallback case where the move resource is invalid
   // TODO: revisit later
@@ -54,15 +56,14 @@ export const ResourceDetailCard = ({
   return (
     <AccordionItem mb={4}>
       <AccordionButton>
-        <Flex p={4} justifyContent="space-between" w="full" align="center">
-          <Flex
-            alignItems="center"
-            transition="all 0.25s ease-in-out"
-            sx={{
-              "& > div": { opacity: 0, transition: "all 0.15s ease-in-out" },
-            }}
-            _hover={{ "& > div": { opacity: 1 } }}
-          >
+        <Flex
+          p={4}
+          justifyContent="space-between"
+          w="full"
+          align="center"
+          className="copier-wrapper"
+        >
+          <Flex alignItems="center">
             <Text
               variant="body1"
               fontWeight={600}
@@ -73,6 +74,7 @@ export const ResourceDetailCard = ({
             </Text>
             <Copier
               type="resource"
+              display={!isMobile ? "none" : "inline"}
               value={resourceData.structTag}
               copyLabel="Copied!"
             />
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 0639f0f20..a074097b1 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -2,6 +2,7 @@ import { Accordion, Badge, Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { useMobile } from "lib/app-provider";
 import { Copier } from "lib/components/copy";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
@@ -24,6 +25,8 @@ export const ResourceSectionBody = ({
   isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
+  const isMobile = useMobile();
+
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const selectedAccountParam = getFirstQueryParam(
@@ -64,13 +67,7 @@ export const ResourceSectionBody = ({
             pb={6}
             gap={12}
           >
-            <Flex
-              alignItems="center"
-              sx={{
-                "& > div": { opacity: 0, transition: "all 0.15s ease-in-out" },
-              }}
-              _hover={{ "& > div": { opacity: 1 } }}
-            >
+            <Flex alignItems="center" w="full" className="copier-wrapper">
               <Heading as="h6" variant="h6" wordBreak="break-word">
                 {selectedResource.account}::{selectedResource.group}
               </Heading>
@@ -78,6 +75,7 @@ export const ResourceSectionBody = ({
                 {selectedResource.items.length}
               </Badge>
               <Copier
+                display={!isMobile ? "none" : "inline"}
                 type="resource"
                 value={`${selectedResource.account}::${selectedResource.group}`}
                 copyLabel="Copied!"

From a8030567cbac54563364ea3e13fb4c024b32eeef Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Wed, 20 Dec 2023 16:55:23 +0700
Subject: [PATCH 3/6] fix(components): fix module card

---
 src/lib/components/module/ModuleCard.tsx      | 92 +++++++++----------
 .../components/modules/ModuleListsBody.tsx    | 14 ---
 2 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index bf3ab9cbc..b7c5714fb 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -2,7 +2,6 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 
 import { AppLink } from "../AppLink";
 import { CustomIcon } from "../icon";
-import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useVerifyModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
@@ -13,7 +12,7 @@ interface ModuleCardProps {
   selectedAddress: MoveAccountAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
-  setSelectedModule: (module: IndexedModule) => void;
+  setSelectedModule?: (module: IndexedModule) => void;
 }
 
 export const ModuleCard = ({
@@ -26,54 +25,51 @@ export const ModuleCard = ({
     address: selectedAddress,
     moduleName: module.moduleName,
   });
-  const formatAddresses = useFormatAddresses();
-  return (
-    <AppLink
-      href={`/modules/${formatAddresses(selectedAddress).hex}/${
-        module.moduleName
-      }`}
-      passHref
-      onClick={() => setSelectedModule(module)}
+
+  const card = (
+    <Grid
+      borderRadius={8}
+      bgColor={
+        module.moduleName === selectedModule?.moduleName
+          ? "gray.700"
+          : "gray.800"
+      }
+      p={4}
+      alignItems="center"
+      cursor="pointer"
+      onClick={() => setSelectedModule?.(module)}
+      gap={1}
+      templateColumns="20px 1fr auto"
+      _hover={{
+        bg: "gray.700",
+      }}
+      transition=".25s all ease-out"
     >
-      <Grid
-        borderRadius={8}
-        bgColor={
-          module.moduleName === selectedModule?.moduleName
-            ? "gray.700"
-            : "gray.800"
-        }
-        p={4}
-        alignItems="center"
-        cursor="pointer"
-        onClick={(e) => e.stopPropagation()}
-        gap={1}
-        templateColumns="20px 1fr auto"
-        _hover={{
-          bg: "gray.700",
-        }}
-        transition=".25s all ease-out"
-      >
-        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
-        <Flex align="center" overflow="hidden" gap={1}>
-          <Text className="ellipsis" variant="body2">
-            {module.moduleName}
-          </Text>
-          {isVerified && (
-            <CustomIcon
-              name="check-circle-solid"
-              color="success.main"
-              boxSize={3}
-            />
-          )}
-        </Flex>
-        <Flex gap={1} ml="auto">
-          <CountBadge count={module.viewFunctions.length} variant="view" />
-          <CountBadge
-            count={module.executeFunctions.length}
-            variant="execute"
+      <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+      <Flex align="center" overflow="hidden" gap={1}>
+        <Text className="ellipsis" variant="body2">
+          {module.moduleName}
+        </Text>
+        {isVerified && (
+          <CustomIcon
+            name="check-circle-solid"
+            color="success.main"
+            boxSize={3}
           />
-        </Flex>
-      </Grid>
+        )}
+      </Flex>
+      <Flex gap={1} ml="auto">
+        <CountBadge count={module.viewFunctions.length} variant="view" />
+        <CountBadge count={module.executeFunctions.length} variant="execute" />
+      </Flex>
+    </Grid>
+  );
+
+  return setSelectedModule ? (
+    card
+  ) : (
+    <AppLink href={`/modules/${module.address}/${module.moduleName}`} passHref>
+      {card}
     </AppLink>
   );
 };
diff --git a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
index 86b25ccc5..c2f6e91f6 100644
--- a/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleListsBody.tsx
@@ -1,7 +1,6 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import { useMemo } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
 import { ErrorFetching, EmptyState } from "lib/components/state";
@@ -23,8 +22,6 @@ export const ModuleListsBody = ({
   isLoading,
   onViewMore,
 }: ModuleListsBodyProps) => {
-  const navigate = useInternalNavigate();
-
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
 
@@ -34,16 +31,6 @@ export const ModuleListsBody = ({
     );
   }, [keyword, modules]);
 
-  const handleOnSelect = (module: IndexedModule) => {
-    navigate({
-      pathname: `/modules/[address]/[moduleName]`,
-      query: {
-        address: selectedAddress,
-        moduleName: module.moduleName,
-      },
-    });
-  };
-
   if (isLoading) return <Loading />;
   if (!modules) return <ErrorFetching dataName="modules" />;
   if (!filteredModules?.length)
@@ -67,7 +54,6 @@ export const ModuleListsBody = ({
             selectedAddress={selectedAddress}
             module={item}
             selectedModule={undefined}
-            setSelectedModule={handleOnSelect}
           />
         )
       )}

From ed5dc33bc0d06add6f7e689d93d4e219c4cbffa9 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 21 Dec 2023 13:41:23 +0700
Subject: [PATCH 4/6] fix(components): fix as comment

---
 src/lib/components/table/modules/ModulesTableRow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/table/modules/ModulesTableRow.tsx b/src/lib/components/table/modules/ModulesTableRow.tsx
index 9013def8e..984afaabb 100644
--- a/src/lib/components/table/modules/ModulesTableRow.tsx
+++ b/src/lib/components/table/modules/ModulesTableRow.tsx
@@ -34,9 +34,9 @@ export const ModulesTableRow = ({
         className="copier-wrapper"
         templateColumns={templateColumns}
         _hover={{ background: "gray.900" }}
+        cursor="pointer"
         transition="all 0.25s ease-in-out"
-        onClick={(e) => {
-          e.stopPropagation();
+        onClick={() => {
           navigate({
             pathname: "/modules/[address]/[moduleName]",
             query: {

From 679afa4dfb543f101243956bf77cf79b02005d1e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 21 Dec 2023 14:29:41 +0700
Subject: [PATCH 5/6] fix: remove {}

---
 src/lib/components/table/modules/ModulesTableRow.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/table/modules/ModulesTableRow.tsx b/src/lib/components/table/modules/ModulesTableRow.tsx
index 984afaabb..b47797baa 100644
--- a/src/lib/components/table/modules/ModulesTableRow.tsx
+++ b/src/lib/components/table/modules/ModulesTableRow.tsx
@@ -36,15 +36,15 @@ export const ModulesTableRow = ({
         _hover={{ background: "gray.900" }}
         cursor="pointer"
         transition="all 0.25s ease-in-out"
-        onClick={() => {
+        onClick={() =>
           navigate({
             pathname: "/modules/[address]/[moduleName]",
             query: {
               address: hex,
               moduleName: moduleInfo.name,
             },
-          });
-        }}
+          })
+        }
       >
         <TableRow>
           <ModulePathLink hexAddr={hex} moduleName={moduleInfo.name} />

From 7906a93774813339f96bb71f751bb3921e10a7d5 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Thu, 21 Dec 2023 14:58:20 +0700
Subject: [PATCH 6/6] fix: add useMemo

---
 src/lib/components/module/ModuleCard.tsx | 87 ++++++++++++++----------
 1 file changed, 50 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index b7c5714fb..f998a5e55 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { Flex, Grid, Text } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import { AppLink } from "../AppLink";
 import { CustomIcon } from "../icon";
@@ -26,49 +28,60 @@ export const ModuleCard = ({
     moduleName: module.moduleName,
   });
 
-  const card = (
-    <Grid
-      borderRadius={8}
-      bgColor={
-        module.moduleName === selectedModule?.moduleName
-          ? "gray.700"
-          : "gray.800"
-      }
-      p={4}
-      alignItems="center"
-      cursor="pointer"
-      onClick={() => setSelectedModule?.(module)}
-      gap={1}
-      templateColumns="20px 1fr auto"
-      _hover={{
-        bg: "gray.700",
-      }}
-      transition=".25s all ease-out"
-    >
-      <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
-      <Flex align="center" overflow="hidden" gap={1}>
-        <Text className="ellipsis" variant="body2">
-          {module.moduleName}
-        </Text>
-        {isVerified && (
-          <CustomIcon
-            name="check-circle-solid"
-            color="success.main"
-            boxSize={3}
+  const card = useMemo(
+    () => (
+      <Grid
+        borderRadius={8}
+        bgColor={
+          module.moduleName === selectedModule?.moduleName
+            ? "gray.700"
+            : "gray.800"
+        }
+        p={4}
+        alignItems="center"
+        cursor="pointer"
+        onClick={() => setSelectedModule?.(module)}
+        gap={1}
+        templateColumns="20px 1fr auto"
+        _hover={{
+          bg: "gray.700",
+        }}
+        transition=".25s all ease-out"
+      >
+        <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
+        <Flex align="center" overflow="hidden" gap={1}>
+          <Text className="ellipsis" variant="body2">
+            {module.moduleName}
+          </Text>
+          {isVerified && (
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={3}
+            />
+          )}
+        </Flex>
+        <Flex gap={1} ml="auto">
+          <CountBadge count={module.viewFunctions.length} variant="view" />
+          <CountBadge
+            count={module.executeFunctions.length}
+            variant="execute"
           />
-        )}
-      </Flex>
-      <Flex gap={1} ml="auto">
-        <CountBadge count={module.viewFunctions.length} variant="view" />
-        <CountBadge count={module.executeFunctions.length} variant="execute" />
-      </Flex>
-    </Grid>
+        </Flex>
+      </Grid>
+    ),
+    [
+      isVerified,
+      JSON.stringify(module),
+      selectedModule?.moduleName,
+      setSelectedModule,
+    ]
   );
 
   return setSelectedModule ? (
     card
   ) : (
-    <AppLink href={`/modules/${module.address}/${module.moduleName}`} passHref>
+    <AppLink href={`/modules/${module.address}/${module.moduleName}`}>
       {card}
     </AppLink>
   );