feat: change details page top section explorer link to copy link

CHANGELOG.md

@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#282](https://github.com/alleslabs/celatone-frontend/pull/282) Change details page top section explorer link to copy link
 - [#281](https://github.com/alleslabs/celatone-frontend/pull/281) Change Osmosis mainnet GraphQL
 - [#251](https://github.com/alleslabs/celatone-frontend/pull/251) Refactor Code and Contract tables into general components
 - [#252](https://github.com/alleslabs/celatone-frontend/pull/252) Refactor Empty State image source logic

src/lib/components/CopyLink.tsx

@@ -0,0 +1,55 @@
+import { Flex, Text, Tooltip, useClipboard } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import { useState } from "react";
+
+import { AmpTrackCopier } from "lib/services/amplitude";
+
+import { CustomIcon } from "./icon";
+
+interface CopyLinkProps {
+  value: string;
+  amptrackSection?: string;
+  type: string;
+}
+
+export const CopyLink = ({ value, amptrackSection, type }: CopyLinkProps) => {
+  const { address } = useWallet();
+  const { onCopy, hasCopied } = useClipboard(value);
+  const [isHover, setIsHover] = useState(false);
+  return (
+    <Tooltip
+      hasArrow
+      isOpen={isHover || hasCopied}
+      label={hasCopied ? "Copied!" : "Click to copy"}
+      placement="top"
+      arrowSize={8}
+      bgColor="honeydew.darker"
+      closeOnClick={false}
+    >
+      <Flex
+        align="center"
+        onClick={() => {
+          AmpTrackCopier(amptrackSection, type);
+          onCopy();
+        }}
+        _hover={{
+          textDecoration: "underline",
+          textDecorationColor: "lilac.light",
+          "& > p": { color: "lilac.light" },
+        }}
+        cursor="pointer"
+        onMouseEnter={() => setIsHover(true)}
+        onMouseLeave={() => setIsHover(false)}
+      >
+        <Text
+          variant="body2"
+          color="lilac.main"
+          transition="all .25s ease-in-out"
+        >
+          {value === address ? `${value} (Me)` : value}
+        </Text>
+        <CustomIcon cursor="pointer" marginLeft={2} name="copy" boxSize={3} />
+      </Flex>
+    </Tooltip>
+  );
+};

src/lib/pages/account-details/index.tsx

@@ -13,8 +13,8 @@ import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
+import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
-import { ExplorerLink } from "lib/components/ExplorerLink";
 import PageContainer from "lib/components/PageContainer";
 import { InvalidState } from "lib/components/state";
 import { useAccountDetailsTableCounts } from "lib/model/account";
@@ -82,11 +82,10 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
           <Text fontWeight={500} color="text.dark" variant="body2">
             Wallet Address:
           </Text>
-          <ExplorerLink
-            type="user_address"
+          <CopyLink
             value={accountAddress}
-            textFormat="normal"
-            maxWidth="full"
+            amptrackSection="account_top"
+            type="user_address"
           />
         </Flex>
       </Flex>

src/lib/pages/code-details/index.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { BackButton } from "lib/components/button";
-import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import { Loading } from "lib/components/Loading";
@@ -71,7 +71,11 @@ const CodeDetailsBody = observer(
               <Text fontWeight={500} color="text.dark" variant="body2">
                 Code ID:
               </Text>
-              <ExplorerLink type="code_id" value={codeId.toString()} />
+              <CopyLink
+                value={codeId.toString()}
+                amptrackSection="code_top"
+                type="code_id"
+              />
             </Flex>
             <Flex gap={2}>
               <Text fontWeight={500} color="text.dark" variant="body2">

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

@@ -10,7 +10,7 @@ import router from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
 import { AdminButton } from "lib/components/button";
-import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
 import {
@@ -119,11 +119,10 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
           >
             Contract Address:
           </Text>
-          <ExplorerLink
-            type="contract_address"
+          <CopyLink
             value={contractAddress}
-            textFormat="normal"
-            maxWidth="none"
+            amptrackSection="contract_top"
+            type="contract_address"
           />
         </Flex>
         <Flex gap={2}>

src/lib/pages/tx-details/components/TxHeader.tsx

@@ -1,7 +1,7 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Button, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
-import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { useOpenTxTab } from "lib/hooks";
 import { AmpTrackViewJson } from "lib/services/amplitude";
@@ -41,12 +41,10 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
         <Text variant="body2" fontWeight={500} color="text.dark">
           Transaction Hash:
         </Text>
-        <ExplorerLink
+        <CopyLink
           value={txData.txhash}
+          amptrackSection="tx_header"
           type="tx_hash"
-          textFormat="normal"
-          maxWidth="full"
-          ampCopierSection="tx_header"
         />
       </Flex>
       <Flex gap={2} fontSize="14px" color="text.dark" align="center">