From 2e2af38577107a5429c5a9ef709c40c0e9451e12 Mon Sep 17 00:00:00 2001
From: Branko Bosnic <brankobosnic1@gmail.com>
Date: Mon, 22 Jan 2024 10:40:24 +0100
Subject: [PATCH] fix: Output page conflicts and rename TransactionId component

---
 .../components/stardust/history/TransactionCard.tsx |  8 ++++++--
 .../{TransactionId.tsx => TransactionIdView.tsx}    |  4 ++--
 .../components/stardust/history/TransactionRow.tsx  |  8 ++++++--
 .../stardust/history/transactionHistoryUtils.ts     | 12 ++++++++----
 client/src/app/routes/stardust/OutputPage.tsx       | 13 +++++++++++--
 5 files changed, 33 insertions(+), 12 deletions(-)
 rename client/src/app/components/stardust/history/{TransactionId.tsx => TransactionIdView.tsx} (87%)

diff --git a/client/src/app/components/stardust/history/TransactionCard.tsx b/client/src/app/components/stardust/history/TransactionCard.tsx
index 78e4c4010..0098943aa 100644
--- a/client/src/app/components/stardust/history/TransactionCard.tsx
+++ b/client/src/app/components/stardust/history/TransactionCard.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
-import TransactionId from "./TransactionId";
+import TransactionIdView from "./TransactionIdView";
 
 const TransactionCard: React.FC<ITransactionEntryProps> = ({
     isGenesisByDate,
@@ -29,7 +29,11 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
             <div className="field">
                 <div className="card--label">Transaction Id</div>
                 <div className="row card--value">
-                    <TransactionId transactionId={transactionId} isTransactionFromStardustGenesis={isTransactionFromStardustGenesis} transactionLink={transactionLink} />
+                    <TransactionIdView
+                        transactionId={transactionId}
+                        isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
+                        transactionLink={transactionLink}
+                    />
                 </div>
             </div>
             <div className="field">
diff --git a/client/src/app/components/stardust/history/TransactionId.tsx b/client/src/app/components/stardust/history/TransactionIdView.tsx
similarity index 87%
rename from client/src/app/components/stardust/history/TransactionId.tsx
rename to client/src/app/components/stardust/history/TransactionIdView.tsx
index 56f1e9ab8..7b32149ef 100644
--- a/client/src/app/components/stardust/history/TransactionId.tsx
+++ b/client/src/app/components/stardust/history/TransactionIdView.tsx
@@ -9,7 +9,7 @@ export interface ITransactionIdProps {
     transactionLink: string;
 }
 
-const TransactionId: React.FC<ITransactionIdProps> = ({  transactionId, isTransactionFromStardustGenesis, transactionLink }) => {
+const TransactionIdView: React.FC<ITransactionIdProps> = ({ transactionId, isTransactionFromStardustGenesis, transactionLink }) => {
     return (
         <>
             {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
@@ -30,4 +30,4 @@ const TransactionId: React.FC<ITransactionIdProps> = ({  transactionId, isTransa
     );
 };
 
-export default TransactionId;
+export default TransactionIdView;
diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx
index a1d2a686f..bb1c65333 100644
--- a/client/src/app/components/stardust/history/TransactionRow.tsx
+++ b/client/src/app/components/stardust/history/TransactionRow.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
-import TransactionId from "./TransactionId";
+import TransactionIdView from "./TransactionIdView";
 
 const TransactionRow: React.FC<ITransactionEntryProps> = ({
     isGenesisByDate,
@@ -25,7 +25,11 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
             {isGenesisByDate ? <td className="date">Genesis</td> : <td className="date">{dateFormatted}</td>}
             <td className="transaction-id">
                 <div className="row center">
-                    <TransactionId transactionId={transactionId} isTransactionFromStardustGenesis={isTransactionFromStardustGenesis} transactionLink={transactionLink} />
+                    <TransactionIdView
+                        transactionId={transactionId}
+                        isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
+                        transactionLink={transactionLink}
+                    />
                 </div>
             </td>
             <td className={classNames("amount", { negative: isSpent })}>{valueView}</td>
diff --git a/client/src/app/components/stardust/history/transactionHistoryUtils.ts b/client/src/app/components/stardust/history/transactionHistoryUtils.ts
index d5e23a4a3..cb50d5430 100644
--- a/client/src/app/components/stardust/history/transactionHistoryUtils.ts
+++ b/client/src/app/components/stardust/history/transactionHistoryUtils.ts
@@ -3,7 +3,7 @@ import moment from "moment/moment";
 
 import { DateHelper } from "~helpers/dateHelper";
 import { OutputWithDetails } from "~helpers/hooks/useAddressHistory";
-import { TransactionsHelper } from "~helpers/stardust/transactionsHelper";
+import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
 import { CHRYSALIS_MAINNET } from "~models/config/networkType";
 
@@ -69,9 +69,7 @@ export const getTransactionHistoryRecords = (
             TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex),
         );
 
-        const transactionLink = isTransactionFromStardustGenesis
-            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-            : `/${network}/transaction/${transactionId}`;
+        const transactionLink = getTransactionLink(network, transactionId, isTransactionFromStardustGenesis);
 
         const isSpent = balanceChange < 0;
 
@@ -111,3 +109,9 @@ export const calculateBalanceChange = (outputs: OutputWithDetails[]) => {
         return acc + amount;
     }, 0);
 };
+
+export const getTransactionLink = (network: string, transactionId: string, isTransactionFromStardustGenesis: boolean) => {
+    return isTransactionFromStardustGenesis && !transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
+        ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
+        : `/${network}/transaction/${transactionId}`;
+};
diff --git a/client/src/app/routes/stardust/OutputPage.tsx b/client/src/app/routes/stardust/OutputPage.tsx
index c37b0b90b..03461cda6 100644
--- a/client/src/app/routes/stardust/OutputPage.tsx
+++ b/client/src/app/routes/stardust/OutputPage.tsx
@@ -10,7 +10,9 @@ import Modal from "../../components/Modal";
 import NotFound from "../../components/NotFound";
 import Output from "../../components/stardust/Output";
 import "./OutputPage.scss";
-import TransactionId from "~/app/components/stardust/history/TransactionId";
+import TransactionIdView from "~/app/components/stardust/history/TransactionIdView";
+import { TransactionsHelper } from "~/helpers/stardust/transactionsHelper";
+import { getTransactionLink } from "~/app/components/stardust/history/transactionHistoryUtils";
 
 const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
     match: {
@@ -48,6 +50,9 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
         milestoneTimestampBooked,
     } = outputMetadata ?? {};
 
+    const isTransactionFromStardustGenesis = TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndexBooked ?? 0);
+    const transactionLink = getTransactionLink(network, transactionId ?? "", isTransactionFromStardustGenesis);
+
     return (
         (output && (
             <div className="output-page">
@@ -94,7 +99,11 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
                                     <div className="label">Transaction ID</div>
                                     <div className="value code highlight row middle output-page__transaction-id">
                                         {milestoneIndexBooked && (
-                                            <TransactionId milestoneIndex={milestoneIndexBooked} transactionId={transactionId} />
+                                            <TransactionIdView
+                                                transactionId={transactionId}
+                                                isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
+                                                transactionLink={transactionLink}
+                                            />
                                         )}
                                     </div>
                                 </div>