fix: add transaction id component

iotaledger · Jan 18, 2024 · d806c1e · d806c1e
1 parent 4cc47a1
commit d806c1e
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 73 deletions.
diff --git a/client/src/app/components/stardust/history/TransactionCard.tsx b/client/src/app/components/stardust/history/TransactionCard.tsx
@@ -3,12 +3,10 @@ import moment from "moment";
 import React, { useContext } from "react";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
 import { DateHelper } from "~helpers/dateHelper";
-import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
 import NetworkContext from "../../../context/NetworkContext";
 import TruncatedId from "../TruncatedId";
-import { CHRYSALIS_MAINNET } from "~/models/config/networkType";
-import Tooltip from "../../Tooltip";
+import TransactionId from "./TransactionId";
 
 const TransactionCard: React.FC<ITransactionEntryProps> = ({
     outputId,
@@ -29,32 +27,12 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
         </span>
     );
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndex && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
-    const transactionLink =
-        isTransactionFromStardustGenesis && !transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
-            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-            : `/${network}/transaction/${transactionId}`;
-
     return (
         <div className="card">
             <div className="field">
                 <div className="card--label">Transaction Id</div>
                 <div className="row card--value">
-                    {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
-                        <span className="highlight">Stardust Genesis</span>
-                    ) : (
-                        <>
-                            <TruncatedId id={transactionId} link={transactionLink} />
-                            {isTransactionFromStardustGenesis && (
-                                <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
-                                    <span className="material-icons" style={{ fontSize: "14px" }}>
-                                        warning
-                                    </span>
-                                </Tooltip>
-                            )}
-                        </>
-                    )}
+                    <TransactionId milestoneIndex={milestoneIndex} transactionId={transactionId} />
                 </div>
             </div>
             <div className="field">

diff --git a/client/src/app/components/stardust/history/TransactionId.tsx b/client/src/app/components/stardust/history/TransactionId.tsx
@@ -0,0 +1,44 @@
+import React, { useContext } from "react";
+import NetworkContext from "~/app/context/NetworkContext";
+import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~/helpers/stardust/transactionsHelper";
+import { CHRYSALIS_MAINNET } from "~/models/config/networkType";
+import TruncatedId from "../TruncatedId";
+import Tooltip from "../../Tooltip";
+
+export interface ITransactionIdProps {
+    transactionId: string;
+    milestoneIndex: number;
+}
+
+const TransactionId: React.FC<ITransactionIdProps> = ({ milestoneIndex, transactionId }) => {
+    const { name: network } = useContext(NetworkContext);
+
+    const isTransactionFromStardustGenesis =
+        milestoneIndex && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
+
+    const transactionLink =
+        isTransactionFromStardustGenesis && !transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
+            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
+            : `/${network}/transaction/${transactionId}`;
+
+    return (
+        <>
+            {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
+                <span>Stardust Genesis</span>
+            ) : (
+                <>
+                    <TruncatedId id={transactionId} link={transactionLink} />
+                    {isTransactionFromStardustGenesis && (
+                        <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
+                            <span className="material-icons" style={{ fontSize: "14px" }}>
+                                warning
+                            </span>
+                        </Tooltip>
+                    )}
+                </>
+            )}
+        </>
+    );
+};
+
+export default TransactionId;
diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx
@@ -4,12 +4,10 @@ import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
 import { DateHelper } from "~helpers/dateHelper";
-import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
-import { CHRYSALIS_MAINNET } from "~models/config/networkType";
 import NetworkContext from "../../../context/NetworkContext";
-import Tooltip from "../../Tooltip";
 import TruncatedId from "../TruncatedId";
+import TransactionId from "./TransactionId";
 
 const TransactionRow: React.FC<ITransactionEntryProps> = ({
     outputId,
@@ -33,30 +31,12 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
         </span>
     );
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndex && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
-    const transactionLink =
-        isTransactionFromStardustGenesis && !transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
-            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-            : `/${network}/transaction/${transactionId}`;
-
     return (
         <tr className={darkBackgroundRow ? "dark" : ""}>
             <td className="transaction-id">
-                {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
-                    <span>Stardust Genesis</span>
-                ) : (
-                    <Link to={transactionLink} className="row center margin-r-t">
-                        <TruncatedId id={transactionId} />
-                        {isTransactionFromStardustGenesis && (
-                            <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
-                                <span className="material-icons" style={{ fontSize: "14px" }}>
-                                    warning
-                                </span>
-                            </Tooltip>
-                        )}
-                    </Link>
-                )}
+                <div className="row center">
+                    <TransactionId milestoneIndex={milestoneIndex} transactionId={transactionId} />
+                </div>
             </td>
             <td className="row center output-id">
                 <Link to={`/${network}/output/${outputId}`}>

diff --git a/client/src/app/routes/stardust/OutputPage.scss b/client/src/app/routes/stardust/OutputPage.scss
@@ -83,4 +83,14 @@
             }
         }
     }
+
+    .output-page__transaction-id {
+        .tooltip {
+            margin-left: 10px;
+
+            @include phone-down {
+                margin-left: 0;
+            }
+        }
+    }
 }
diff --git a/client/src/app/routes/stardust/OutputPage.tsx b/client/src/app/routes/stardust/OutputPage.tsx
@@ -4,16 +4,13 @@ import OutputPageProps from "./OutputPageProps";
 import mainMessage from "~assets/modals/stardust/output/main-header.json";
 import { DateHelper } from "~helpers/dateHelper";
 import { useOutputDetails } from "~helpers/hooks/useOutputDetails";
-import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID, TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatSpecialBlockId } from "~helpers/stardust/valueFormatHelper";
-import { CHRYSALIS_MAINNET } from "~models/config/networkType";
 import CopyButton from "../../components/CopyButton";
 import Modal from "../../components/Modal";
 import NotFound from "../../components/NotFound";
 import Output from "../../components/stardust/Output";
-import TruncatedId from "../../components/stardust/TruncatedId";
-import Tooltip from "../../components/Tooltip";
 import "./OutputPage.scss";
+import TransactionId from "~/app/components/stardust/history/TransactionId";
 
 const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
     match: {
@@ -51,13 +48,6 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
         milestoneTimestampBooked,
     } = outputMetadata ?? {};
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndexBooked && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndexBooked);
-    const transactionLink =
-        isTransactionFromStardustGenesis && !transactionId?.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)
-            ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-            : `/${network}/transaction/${transactionId}`;
-
     return (
         (output && (
             <div className="output-page">
@@ -102,20 +92,9 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
                             {transactionId && (
                                 <div className="section--data">
                                     <div className="label">Transaction ID</div>
-                                    <div className="value code highlight row middle">
-                                        {isTransactionFromStardustGenesis &&
-                                        transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? (
-                                            <span>Stardust Genesis</span>
-                                        ) : (
-                                            <>
-                                                <Tooltip
-                                                    tooltipContent="This link opens the transaction on Chrysalis Mainnet"
-                                                    childrenClass="row middle"
-                                                >
-                                                    <span className="material-icons">warning</span>
-                                                </Tooltip>
-                                                <TruncatedId id={transactionId} link={transactionLink} showCopyButton />
-                                            </>
+                                    <div className="value code highlight row middle output-page__transaction-id">
+                                        {milestoneIndexBooked && (
+                                            <TransactionId milestoneIndex={milestoneIndexBooked} transactionId={transactionId} />
                                         )}
                                     </div>
                                 </div>