Merge pull request #4091 from cardano-foundation/feat/MET-2397-Naviga…

…te-Transaction-overview-epoch feat: MET-2397 Navigate transaction overview epoch
cardano-foundation · Nov 4, 2024 · 7a4f36a · 7a4f36a
2 parents 35a5a48 + 1c6e5bd
commit 7a4f36a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/src/components/EpochDetail/EpochBlockList/index.tsx b/src/components/EpochDetail/EpochBlockList/index.tsx
@@ -39,6 +39,15 @@ const EpochBlockList: React.FC<IEpochBlockList> = ({ epochId }) => {
 
   const { error } = fetchData;
 
+  const onClickRow = (e: React.MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
+    if (e.target instanceof HTMLAnchorElement || (e.target instanceof Element && e.target.closest("a"))) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    history.push(details.block(r.blockNo || r.hash));
+  };
+
   const columns: Column<BlockDetail>[] = [
     {
       title: <div data-testid="epochList.blockTitle">{t("glossary.block")}</div>,
@@ -138,7 +147,7 @@ const EpochBlockList: React.FC<IEpochBlockList> = ({ epochId }) => {
             total: fetchData.total,
             onChange: (page, size) => history.replace({ search: stringify({ page, size }) })
           }}
-          onClickRow={(_, r) => history.push(details.block(r.blockNo || r.hash))}
+          onClickRow={onClickRow}
         />
       </Card>
     </StyledContainer>

diff --git a/src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx
@@ -2,7 +2,6 @@ import { Box, useTheme } from "@mui/material";
 import { stringify } from "qs";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
-import { MouseEvent } from "react";
 
 import useFetchList from "src/commons/hooks/useFetchList";
 import { DownRedUtxoDarkmode, TooltipIcon, TransferIcon, UpGreenUtxoDarkmode } from "src/commons/resources";
@@ -37,7 +36,6 @@ const TransactionTab: React.FC<{ stakeAddress?: string; tabActive: TabStakeDetai
 interface TransactionListFullProps {
   underline?: boolean;
   url: string;
-  openDetail?: (_: MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => void;
   selected?: string | null;
   showTitle?: boolean;
   tabActive: TabStakeDetail;
@@ -46,7 +44,6 @@ interface TransactionListFullProps {
 const TransactionListFull: React.FC<TransactionListFullProps> = ({
   underline = false,
   url,
-  openDetail,
   selected,
   showTitle = true,
   tabActive
@@ -59,19 +56,12 @@ const TransactionListFull: React.FC<TransactionListFullProps> = ({
   const theme = useTheme();
   const { isMobile } = useScreen();
 
-  const onClickRow = (e: MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
-    let parent: Element | null = e.target as Element;
-    while (
-      parent !== null &&
-      typeof parent?.className.includes === "function" &&
-      !parent?.className.includes("MuiPopover-root")
-    ) {
-      parent = parent?.parentElement;
-    }
-    if (parent) {
+  const onClickRow = (e: React.MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
+    if (e.target instanceof HTMLAnchorElement || (e.target instanceof Element && e.target.closest("a"))) {
+      e.preventDefault();
+      e.stopPropagation();
       return;
     }
-    if (openDetail) return openDetail(e, r);
     history.push(details.transaction(r.hash));
   };
 

diff --git a/src/components/TokenDetail/TokenTableData/TokenTransaction.tsx b/src/components/TokenDetail/TokenTableData/TokenTransaction.tsx
@@ -38,6 +38,15 @@ const TokenTransaction: React.FC<ITokenTransaction> = ({ tabActive, tokenId }) =
     blockKey
   );
   const { error } = fetchData;
+
+  const onClickRow = (e: React.MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
+    if (e.target instanceof HTMLAnchorElement || (e.target instanceof Element && e.target.closest("a"))) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    history.push(details.transaction(r.hash));
+  };
   const columns: Column<Transactions>[] = [
     {
       title: t("glossary.txhash"),
@@ -142,7 +151,7 @@ const TokenTransaction: React.FC<ITokenTransaction> = ({ tabActive, tokenId }) =
           total: fetchData.total,
           onChange: (page, size) => history.replace({ search: stringify({ page, size }) })
         }}
-        onClickRow={(_, r: Transactions) => history.push(details.transaction(r.hash))}
+        onClickRow={onClickRow}
       />
     </Box>
   );

diff --git a/src/components/TransactionLists/index.tsx b/src/components/TransactionLists/index.tsx
@@ -37,7 +37,7 @@ const TransactionList: React.FC<TransactionListProps> = ({ underline = false, ur
   const fetchData = useFetchList<Transactions>(url, { ...pageInfo }, false, blockKey);
   const mainRef = useRef(document.querySelector("#main"));
   const onClickRow = (e: MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
-    if (e.target instanceof HTMLAnchorElement) {
+    if (e.target instanceof HTMLAnchorElement || (e.target instanceof Element && e.target.closest("a"))) {
       e.preventDefault();
       e.stopPropagation();
       return;