chore: link to output when transaction is genesis.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
iotaledger · Feb 13, 2024 · 8eb2093 · 8eb2093
1 parent 7cbfb6d
commit 8eb2093
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 30 deletions.
diff --git a/client/src/app/components/stardust/history/TransactionCard.tsx b/client/src/app/components/stardust/history/TransactionCard.tsx
@@ -13,6 +13,8 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
     isSpent,
     isFormattedAmounts,
     setIsFormattedAmounts,
+    stardustGenesisOutputId,
+    stardustGenesisOutputLink,
 }) => {
     const valueView = (
         <span className="pointer margin-r-5" onClick={() => setIsFormattedAmounts(!isFormattedAmounts)}>
@@ -30,6 +32,8 @@ const TransactionCard: React.FC<ITransactionEntryProps> = ({
                 <div className="card--label">Transaction Id</div>
                 <div className="row card--value">
                     <TransactionIdView
+                        stardustGenesisOutputId={stardustGenesisOutputId}
+                        stardustGenesisOutputLink={stardustGenesisOutputLink}
                         transactionId={transactionId}
                         isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
                         transactionLink={transactionLink}

diff --git a/client/src/app/components/stardust/history/TransactionEntryProps.ts b/client/src/app/components/stardust/history/TransactionEntryProps.ts
@@ -34,6 +34,15 @@ export interface ITransactionEntryProps {
      */
     isTransactionFromStardustGenesis: boolean;
 
+    /**
+     *
+     */
+    stardustGenesisOutputId?: string;
+    /**
+     *
+     */
+    stardustGenesisOutputLink?: string;
+
     /**
      * check some of outputs timestamps zero
      */

diff --git a/client/src/app/components/stardust/history/TransactionHistory.tsx b/client/src/app/components/stardust/history/TransactionHistory.tsx
@@ -50,17 +50,7 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = ({ network, addres
                 <tbody>
                     {transactions?.map((c, idx) => (
                         <React.Fragment key={idx}>
-                            <TransactionRow
-                                isGenesisByDate={c.isGenesisByDate}
-                                isTransactionFromStardustGenesis={c.isTransactionFromStardustGenesis}
-                                transactionLink={c.transactionLink}
-                                dateFormatted={c.dateFormatted}
-                                balanceChangeFormatted={c.balanceChangeFormatted}
-                                transactionId={c.transactionId}
-                                isSpent={c.isSpent}
-                                isFormattedAmounts={isFormattedAmounts}
-                                setIsFormattedAmounts={setIsFormattedAmounts}
-                            />
+                            <TransactionRow {...c} isFormattedAmounts={isFormattedAmounts} setIsFormattedAmounts={setIsFormattedAmounts} />
                         </React.Fragment>
                     ))}
                 </tbody>
@@ -74,6 +64,7 @@ const TransactionHistory: React.FC<TransactionHistoryProps> = ({ network, addres
                             <TransactionCard
                                 isGenesisByDate={c.isGenesisByDate}
                                 isTransactionFromStardustGenesis={c.isTransactionFromStardustGenesis}
+                                stardustGenesisOutputId={c.stardustGenesisOutputId}
                                 transactionLink={c.transactionLink}
                                 dateFormatted={c.dateFormatted}
                                 balanceChangeFormatted={c.balanceChangeFormatted}

diff --git a/client/src/app/components/stardust/history/TransactionIdView.tsx b/client/src/app/components/stardust/history/TransactionIdView.tsx
@@ -6,25 +6,44 @@ import Tooltip from "../../Tooltip";
 export interface ITransactionIdProps {
     transactionId: string;
     isTransactionFromStardustGenesis: boolean;
+    stardustGenesisOutputId?: string;
+    stardustGenesisOutputLink?: string;
     transactionLink: string;
 }
 
-const TransactionIdView: React.FC<ITransactionIdProps> = ({ transactionId, isTransactionFromStardustGenesis, transactionLink }) => {
+const TransactionIdView: React.FC<ITransactionIdProps> = ({
+    transactionId,
+    isTransactionFromStardustGenesis,
+    transactionLink,
+    stardustGenesisOutputId,
+    stardustGenesisOutputLink,
+}) => {
+    if (isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID)) {
+        return <span>Stardust Genesis</span>;
+    }
+
+    const truncateParams = React.useMemo(() => {
+        if (isTransactionFromStardustGenesis) {
+            return {
+                id: stardustGenesisOutputId as string,
+                link: stardustGenesisOutputLink as string,
+            };
+        }
+        return {
+            id: transactionId,
+            link: transactionLink,
+        };
+    }, [isTransactionFromStardustGenesis, transactionId, transactionLink, stardustGenesisOutputId, stardustGenesisOutputLink]);
+
     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>
-                    )}
-                </>
+            <TruncatedId id={truncateParams.id} link={truncateParams.link} />
+            {isTransactionFromStardustGenesis && (
+                <Tooltip tooltipContent="This link opens the transaction on Chrysalis Mainnet" childrenClass="row middle">
+                    <span className="material-icons" style={{ fontSize: "14px" }}>
+                        warning
+                    </span>
+                </Tooltip>
             )}
         </>
     );

diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx
@@ -13,6 +13,8 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
     isSpent,
     isFormattedAmounts,
     setIsFormattedAmounts,
+    stardustGenesisOutputLink,
+    stardustGenesisOutputId,
 }) => {
     const valueView = (
         <span className="pointer" onClick={() => setIsFormattedAmounts(!isFormattedAmounts)}>
@@ -26,6 +28,8 @@ const TransactionRow: React.FC<ITransactionEntryProps> = ({
             <td className="transaction-id">
                 <div className="row center">
                     <TransactionIdView
+                        stardustGenesisOutputId={stardustGenesisOutputId}
+                        stardustGenesisOutputLink={stardustGenesisOutputLink}
                         transactionId={transactionId}
                         isTransactionFromStardustGenesis={isTransactionFromStardustGenesis}
                         transactionLink={transactionLink}

diff --git a/client/src/app/components/stardust/history/transactionHistoryUtils.ts b/client/src/app/components/stardust/history/transactionHistoryUtils.ts
@@ -11,6 +11,8 @@ export interface ITransactionHistoryRecord {
     isGenesisByDate: boolean;
     isTransactionFromStardustGenesis: boolean;
     isSpent: boolean;
+    stardustGenesisOutputId?: string;
+    stardustGenesisOutputLink?: string;
     transactionLink: string;
     transactionId: string;
     timestamp: number;
@@ -57,17 +59,31 @@ export const getTransactionHistoryRecords = (
 ): ITransactionHistoryRecord[] => {
     const calculatedTransactions: ITransactionHistoryRecord[] = [];
 
-    transactionIdToOutputs.forEach((outputs, transactionId) => {
+    let isSet = false; // TODO fake transaction. Remove after confirmation
+    transactionIdToOutputs.forEach((outputs, transactionId, index) => {
         const lastOutputTime = Math.max(...outputs.map((t) => t.milestoneTimestamp));
         const balanceChange = calculateBalanceChange(outputs);
         const ago = moment(lastOutputTime * 1000).fromNow();
 
         const isGenesisByDate = outputs.map((t) => t.milestoneTimestamp).some((milestoneTimestamp) => milestoneTimestamp === 0);
 
-        const milestoneIndexes = outputs.map((t) => t.milestoneIndex);
-        const isTransactionFromStardustGenesis = milestoneIndexes.some((milestoneIndex) =>
-            TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex),
-        );
+        // TODO fake transaction. Remove after confirmation
+        if (!isSet) {
+            outputs[0].milestoneIndex = 7669900;
+            isSet = true;
+        }
+
+        let stardustGenesisOutputId;
+        let stardustGenesisOutputLink;
+        const isTransactionFromStardustGenesis = outputs.some(({ milestoneIndex, outputId }) => {
+            const isGenesis = TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndex);
+            if (isGenesis) {
+                stardustGenesisOutputId = outputId;
+                stardustGenesisOutputLink = `/${network}/output/${outputId}`;
+            }
+
+            return isGenesis;
+        });
 
         const transactionLink = getTransactionLink(network, transactionId, isTransactionFromStardustGenesis);
 
@@ -77,6 +93,8 @@ export const getTransactionHistoryRecords = (
             isGenesisByDate: isGenesisByDate,
             isTransactionFromStardustGenesis: isTransactionFromStardustGenesis,
             isSpent: isSpent,
+            stardustGenesisOutputId: stardustGenesisOutputId,
+            stardustGenesisOutputLink: stardustGenesisOutputLink,
             transactionLink: transactionLink,
             transactionId: transactionId,
             timestamp: lastOutputTime,