Feat/code navigation

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation
 - [#67](https://github.com/alleslabs/celatone-frontend/pull/67) Add Public Codes shortcut to sidebar and add Quick Actions section
 - [#66](https://github.com/alleslabs/celatone-frontend/pull/66) Add code details data loader including code info and contract instances
 - [#60](https://github.com/alleslabs/celatone-frontend/pull/60) Add navigation to contract row

src/lib/app-fns/tx/upload.tsx

@@ -54,7 +54,7 @@ export const uploadContractTx = ({
             value: txInfo.codeId,
             html: (
               <div style={{ display: "inline-flex", alignItems: "center" }}>
-                <ExplorerLink value={txInfo.codeId.toString()} />
+                <ExplorerLink type="code_id" value={txInfo.codeId.toString()} />
               </div>
             ),
           },

src/lib/components/ExplorerLink.tsx

@@ -1,6 +1,7 @@
 import type { BoxProps } from "@chakra-ui/react";
-import { Box, Link, Text } from "@chakra-ui/react";
+import { Box, Text } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import Link from "next/link";
 
 import {
   getExplorerTxUrl,
@@ -12,89 +13,134 @@ import { Copier } from "./Copier";
 
 interface ExplorerLinkProps extends BoxProps {
   value: string;
-  type?: "tx_hash" | "contract_address" | "user_address";
+  type?: "tx_hash" | "user_address" | "contract_address" | "code_id";
   copyValue?: string;
   canCopyWithHover?: boolean;
   isReadOnly?: boolean;
   textFormat?: "truncate" | "ellipsis" | "normal";
   maxWidth?: string;
 }
 
-export const ExplorerLink = ({
-  value,
-  type,
-  copyValue,
-  canCopyWithHover = false,
-  isReadOnly = false,
-  textFormat = "truncate",
-  maxWidth = "150px",
-  ...componentProps
-}: ExplorerLinkProps) => {
-  const { address, currentChainName } = useWallet();
-  let explorerLink = "";
+const getNavigationUrl = (
+  type: ExplorerLinkProps["type"],
+  currentChainName: string,
+  value: string
+) => {
+  let url = "";
   switch (type) {
     case "tx_hash":
-      explorerLink = getExplorerTxUrl(currentChainName);
+      url = getExplorerTxUrl(currentChainName);
       break;
     case "contract_address":
-      explorerLink = `/contract`;
+      url = "/contract";
       break;
     case "user_address":
-      explorerLink = getExplorerUserAddressUrl(currentChainName);
+      url = getExplorerUserAddressUrl(currentChainName);
+      break;
+    case "code_id":
+      url = "/code";
       break;
     default:
       break;
   }
+  return `${url}/${value}`;
+};
 
-  /**
-   * @remarks
-   * The `copyValue` is used in case where the value displayed is not the same as the copy value
-   */
-  const hrefLink = () => {
-    if (explorerLink) {
-      if (copyValue) {
-        return `${explorerLink}/${copyValue}`;
-      }
-      return `${explorerLink}/${value}`;
-    }
-    return undefined;
-  };
+const getValueText = (
+  isOwnAddr: boolean,
+  isTruncate: boolean,
+  value: string
+) => {
+  if (isOwnAddr) {
+    return "Me";
+  }
+  return isTruncate ? truncate(value) : value;
+};
 
-  const renderValue = () => {
-    if (value === address) {
-      return "Me";
-    }
-    if (textFormat === "truncate") {
-      return truncate(value);
-    }
-    return value;
-  };
+const LinkRender = ({
+  isInternal,
+  hrefLink,
+  textValue,
+  isEllipsis,
+  maxWidth,
+}: {
+  isInternal: boolean;
+  hrefLink: string;
+  textValue: string;
+  isEllipsis: boolean;
+  maxWidth: ExplorerLinkProps["maxWidth"];
+}) => {
+  const textElement = (
+    <Text
+      variant="body2"
+      color="primary.main"
+      className={isEllipsis ? "ellipsis" : undefined}
+      maxW={maxWidth}
+      pointerEvents={hrefLink ? "auto" : "none"}
+    >
+      {textValue}
+    </Text>
+  );
+
+  return isInternal ? (
+    <Link href={hrefLink} passHref onClick={(e) => e.stopPropagation()}>
+      {textElement}
+    </Link>
+  ) : (
+    <a
+      href={hrefLink}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-peer
+      onClick={(e) => e.stopPropagation()}
+    >
+      {textElement}
+    </a>
+  );
+};
+
+export const ExplorerLink = ({
+  value,
+  type,
+  copyValue,
+  canCopyWithHover = false,
+  isReadOnly = false,
+  textFormat = "truncate",
+  maxWidth = "150px",
+  ...componentProps
+}: ExplorerLinkProps) => {
+  const { address, currentChainName } = useWallet();
+  const isInternal = type === "code_id" || type === "contract_address";
+
+  const [hrefLink, textValue] = [
+    getNavigationUrl(type, currentChainName, copyValue || value),
+    getValueText(value === address, textFormat === "truncate", value),
+  ];
 
   return (
     <Box
       role="group"
       display="inline-flex"
       alignItems="center"
+      _hover={{
+        ...(!isReadOnly && {
+          textDecoration: "underline",
+          textDecorationColor: "primary.main",
+        }),
+      }}
       {...componentProps}
     >
       {isReadOnly ? (
-        <Text variant="body2">{renderValue()}</Text>
+        <Text variant="body2">{textValue}</Text>
       ) : (
         <>
-          <Link
-            fontWeight="400"
-            href={hrefLink()}
-            target="_blank"
-            rel="noopener noreferrer"
-            color="primary.main"
-            data-peer
-            onClick={(e) => e.stopPropagation()}
-            pointerEvents={!hrefLink() ? "none" : "auto"}
-            className={textFormat === "ellipsis" ? "ellipsis" : undefined}
-            maxW={maxWidth}
-          >
-            {renderValue()}
-          </Link>
+          <LinkRender
+            isInternal={isInternal}
+            hrefLink={hrefLink}
+            textValue={textValue}
+            isEllipsis={textFormat === "ellipsis"}
+            maxWidth={maxWidth}
+          />
           <Box
             alignItems="center"
             display={canCopyWithHover ? "none" : undefined}

src/lib/components/modal/code/SaveOrEditCode.tsx

@@ -129,7 +129,7 @@ export const SaveOrEditCodeModal = observer(
               <Text variant="body2" fontWeight={700} w="20%">
                 Code ID
               </Text>
-              <ExplorerLink value={id.toString()} />
+              <ExplorerLink type="code_id" value={id.toString()} />
             </Flex>
             <Flex align="center">
               <Text variant="body2" fontWeight={700} w="20%">

src/lib/pages/code/index.tsx

@@ -37,7 +37,7 @@ const CodeDetails = observer(() => {
             <Text fontWeight={500} color="text.dark" variant="body2">
               Code ID
             </Text>
-            <ExplorerLink value={codeId} />
+            <ExplorerLink type="code_id" value={codeId} />
           </Flex>
         </Flex>
         {/* TODO: Check uploader with data hook */}

src/lib/pages/codes/components/CodesTable.tsx

@@ -120,6 +120,9 @@ const TableRow = ({ code, isRemovable }: CodesRowProps) => {
   const goToInstantiate = () => {
     router.push({ pathname: "/instantiate", query: { "code-id": code.id } });
   };
+  const goToCodeDetails = () => {
+    router.push({ pathname: `/code/${code.id}` });
+  };
 
   return (
     <Tr
@@ -128,15 +131,30 @@ const TableRow = ({ code, isRemovable }: CodesRowProps) => {
       _hover={{
         bg: "gray.900",
       }}
+      cursor="pointer"
+      onClick={goToCodeDetails}
     >
       <Td width="10%" color="primary.main">
-        <ExplorerLink value={code.id.toString()} canCopyWithHover />
+        <ExplorerLink
+          type="code_id"
+          value={code.id.toString()}
+          canCopyWithHover
+        />
       </Td>
       <Td width="45%">
         <CodeDescriptionCell codeId={code.id} description={code.description} />
       </Td>
       <Td width="10%" textAlign="center">
-        {code.contracts}
+        <Text
+          variant="body2"
+          onClick={(e) => e.stopPropagation()}
+          cursor="text"
+          w="fit-content"
+          m="auto"
+          px={2}
+        >
+          {code.contracts}
+        </Text>
       </Td>
       <Td width="15%">
         <ExplorerLink
@@ -146,7 +164,7 @@ const TableRow = ({ code, isRemovable }: CodesRowProps) => {
         />
       </Td>
       <Td width="20%">
-        <HStack>
+        <HStack onClick={(e) => e.stopPropagation()} w="fit-content">
           <Button variant="outline-gray" size="sm" onClick={goToInstantiate}>
             Instantiate
           </Button>

src/lib/pages/contract-details/components/InstantiateInfo.tsx

@@ -70,6 +70,7 @@ export const InstantiateInfo = ({ contractDetail }: InstantiateInfoProps) => {
             helperText1={contractDetail.codeInfo?.description}
           >
             <ExplorerLink
+              type="code_id"
               value={contractDetail.instantiateInfo.codeId}
               canCopyWithHover
             />