fix: Output page conflicts and rename TransactionId component

iotaledger · Jan 22, 2024 · 2e2af38 · 2e2af38
1 parent 06e6022
commit 2e2af38
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 12 deletions.
diff --git 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/...onents/stardust/history/TransactionId.tsx → ...ts/stardust/history/TransactionIdView.tsx b/...onents/stardust/history/TransactionId.tsx → ...ts/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
@@ -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
@@ -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
@@ -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>