Fix: Stardust Genesis Transaction Id

client/src/app/components/stardust/history/TransactionCard.tsx

@@ -3,11 +3,10 @@ import moment from "moment";
 import React, { useContext } from "react";
 import { ITransactionEntryProps } from "./TransactionEntryProps";
 import { DateHelper } from "~helpers/dateHelper";
-import { TransactionsHelper } from "~helpers/stardust/transactionsHelper";
 import { formatAmount } from "~helpers/stardust/valueFormatHelper";
-import { CHRYSALIS_MAINNET } from "~models/config/networkType";
 import NetworkContext from "../../../context/NetworkContext";
 import TruncatedId from "../TruncatedId";
+import TransactionId from "./TransactionId";
 
 const TransactionCard: React.FC<ITransactionEntryProps> = ({
     outputId,
@@ -28,18 +27,12 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
         </span>
     );
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndex && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
-    const transactionLink = isTransactionFromStardustGenesis
-        ? `/${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">
-                    <TruncatedId id={transactionId} link={transactionLink} />
+                    <TransactionId milestoneIndex={milestoneIndex} transactionId={transactionId} />
                 </div>
             </div>
             <div className="field">

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;

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 { 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,25 +31,12 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
         </span>
     );
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndex && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
-    const transactionLink = isTransactionFromStardustGenesis
-        ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-        : `/${network}/transaction/${transactionId}`;
-
     return (
         <tr className={darkBackgroundRow ? "dark" : ""}>
             <td className="transaction-id">
-                <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}`}>

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;
+            }
+        }
+    }
 }

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 { 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,12 +48,6 @@ const OutputPage: React.FC<RouteComponentProps<OutputPageProps>> = ({
         milestoneTimestampBooked,
     } = outputMetadata ?? {};
 
-    const isTransactionFromStardustGenesis =
-        milestoneIndexBooked && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndexBooked);
-    const transctionLink = isTransactionFromStardustGenesis
-        ? `/${CHRYSALIS_MAINNET}/search/${transactionId}`
-        : `/${network}/transaction/${transactionId}`;
-
     return (
         (output && (
             <div className="output-page">
@@ -101,16 +92,10 @@ 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 && (
-                                            <Tooltip
-                                                tooltipContent="This link opens the transaction on Chrysalis Mainnet"
-                                                childrenClass="row middle"
-                                            >
-                                                <span className="material-icons">warning</span>
-                                            </Tooltip>
+                                    <div className="value code highlight row middle output-page__transaction-id">
+                                        {milestoneIndexBooked && (
+                                            <TransactionId milestoneIndex={milestoneIndexBooked} transactionId={transactionId} />
                                         )}
-                                        <TruncatedId id={transactionId} link={transctionLink} showCopyButton />
                                     </div>
                                 </div>
                             )}

client/src/helpers/stardust/transactionsHelper.ts

@@ -55,6 +55,8 @@ const HEX_PARTICIPATE = "0x5041525449434950415445";
  */
 export const STARDUST_GENESIS_MILESTONE = 7669900;
 
+export const STARDUST_SUPPLY_INCREASE_TRANSACTION_ID = "0xb191c4bc825ac6983789e50545d5ef07a1d293a98ad974fc9498cb18";
+
 export class TransactionsHelper {
     public static async getInputsAndOutputs(
         block: Block | undefined,