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

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

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>
   );
 };

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"

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

@@ -25,22 +25,24 @@ export const ModulesTableRow = ({
   const navigate = useInternalNavigate();
 
   const hex = unpadHexAddress(bech32AddressToHex(moduleInfo.address));
+
   return (
     <Box w="full" minW="min-content">
       <Grid
         className="copier-wrapper"
         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

@@ -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 (

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"