fix(components): module link clickable with cmd/ctrl + add copier for resource

CHANGELOG.md

@@ -52,6 +52,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
 - [#674](https://github.com/alleslabs/celatone-frontend/pull/674) Adjust contract list card and microcopies
 - [#672](https://github.com/alleslabs/celatone-frontend/pull/672) Refactor balances
 - [#682](https://github.com/alleslabs/celatone-frontend/pull/682) Render token amount < 0.000001 properly

src/lib/components/module/ModuleCard.tsx

@@ -1,5 +1,8 @@
+/* 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";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import { useVerifyModule } from "lib/services/move/moduleService";
@@ -11,7 +14,7 @@ interface ModuleCardProps {
   selectedAddress: MoveAccountAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
-  setSelectedModule: (module: IndexedModule) => void;
+  setSelectedModule?: (module: IndexedModule) => void;
 }
 
 export const ModuleCard = ({
@@ -25,42 +28,61 @@ export const ModuleCard = ({
     moduleName: module.moduleName,
   });
 
-  return (
-    <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}`}>
+      {card}
+    </AppLink>
   );
 };

src/lib/components/resource/ResourceDetailCard.tsx

@@ -7,8 +7,9 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import { CopyButton } from "../copy";
+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
@@ -59,17 +61,25 @@ export const ResourceDetailCard = ({
           justifyContent="space-between"
           w="full"
           align="center"
-          gap={{ base: 4, md: 8 }}
+          className="copier-wrapper"
         >
-          <Text
-            variant="body1"
-            fontWeight={600}
-            textAlign="left"
-            wordBreak="break-word"
-          >
-            {resourceData.structTag}
-          </Text>
-          <Flex alignItems="center" gap={2} minW={{ base: 8, md: 36 }}>
+          <Flex alignItems="center">
+            <Text
+              variant="body1"
+              fontWeight={600}
+              textAlign="left"
+              wordBreak="break-word"
+            >
+              {resourceData.structTag}
+            </Text>
+            <Copier
+              type="resource"
+              display={!isMobile ? "none" : "inline"}
+              value={resourceData.structTag}
+              copyLabel="Copied!"
+            />
+          </Flex>
+          <Flex alignItems="center" gap={2}>
             <CopyButton
               value={resourceData.moveResource}
               variant="outline-gray"

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}`}

src/lib/components/table/modules/ModulesTableRow.tsx

@@ -34,6 +34,7 @@ export const ModulesTableRow = ({
         className="copier-wrapper"
         templateColumns={templateColumns}
         _hover={{ background: "gray.900" }}
+        cursor="pointer"
         transition="all 0.25s ease-in-out"
         onClick={() =>
           navigate({

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"

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,25 +31,18 @@ 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)
     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 (
@@ -64,7 +54,6 @@ export const ModuleListsBody = ({
             selectedAddress={selectedAddress}
             module={item}
             selectedModule={undefined}
-            setSelectedModule={handleOnSelect}
           />
         )
       )}

src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx

@@ -2,6 +2,8 @@ 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";
 import { ResourceDetailCard } from "lib/components/resource";
@@ -23,6 +25,8 @@ export const ResourceSectionBody = ({
   isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
+  const isMobile = useMobile();
+
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const selectedAccountParam = getFirstQueryParam(
@@ -59,13 +63,19 @@ export const ResourceSectionBody = ({
             pb={6}
             gap={12}
           >
-            <Flex alignItems="center">
+            <Flex alignItems="center" w="full" className="copier-wrapper">
               <Heading as="h6" variant="h6" wordBreak="break-word">
                 {selectedResource.account}::{selectedResource.group}
               </Heading>
               <Badge variant="primary" ml={2}>
                 {selectedResource.items.length}
               </Badge>
+              <Copier
+                display={!isMobile ? "none" : "inline"}
+                type="resource"
+                value={`${selectedResource.account}::${selectedResource.group}`}
+                copyLabel="Copied!"
+              />
             </Flex>
             <Button
               variant="outline-primary"