From fde937d842aedc78a29b7ef5c48598a76df46bb4 Mon Sep 17 00:00:00 2001
From: poomthiti <poom.thitipatt@gmail.com>
Date: Tue, 18 Apr 2023 17:02:02 +0700
Subject: [PATCH] feat: change details page top section explorer link to copy
 link

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/CopyLink.tsx               | 55 +++++++++++++++++++
 src/lib/pages/account-details/index.tsx       |  9 ++-
 src/lib/pages/code-details/index.tsx          |  8 ++-
 .../components/ContractTop.tsx                |  9 ++-
 .../pages/tx-details/components/TxHeader.tsx  |  8 +--
 6 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/CopyLink.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f1b38397..a36e69e32 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx
new file mode 100644
index 000000000..a1e187f9a
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index fe2c2c823..76c87fb48 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/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>
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 5d6be4aff..ca968a270 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/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">
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 0c33abf42..c52d05e02 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/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}>
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index ba71cab3c..ca000d1ff 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/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">