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

CHANGELOG.md

@@ -51,6 +51,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

src/lib/components/module/ModuleCard.tsx

@@ -1,5 +1,6 @@
 import { Flex, Grid, Text } from "@chakra-ui/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 +12,7 @@ interface ModuleCardProps {
   selectedAddress: MoveAccountAddr;
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
-  setSelectedModule: (module: IndexedModule) => void;
+  setSelectedModule?: (module: IndexedModule) => void;
 }
 
 export const ModuleCard = ({
@@ -25,7 +26,7 @@ export const ModuleCard = ({
     moduleName: module.moduleName,
   });
 
-  return (
+  const card = (
     <Grid
       borderRadius={8}
       bgColor={
@@ -36,7 +37,7 @@ export const ModuleCard = ({
       p={4}
       alignItems="center"
       cursor="pointer"
-      onClick={() => setSelectedModule(module)}
+      onClick={() => setSelectedModule?.(module)}
       gap={1}
       templateColumns="20px 1fr auto"
       _hover={{
@@ -63,4 +64,12 @@ export const ModuleCard = ({
       </Flex>
     </Grid>
   );
+
+  return setSelectedModule ? (
+    card
+  ) : (
+    <AppLink href={`/modules/${module.address}/${module.moduleName}`} passHref>
+      {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

@@ -35,15 +35,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} />

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"