diff --git a/client/src/app/components/stardust/history/TransactionCard.tsx b/client/src/app/components/stardust/history/TransactionCard.tsx index efac2b37a..0098943aa 100644 --- a/client/src/app/components/stardust/history/TransactionCard.tsx +++ b/client/src/app/components/stardust/history/TransactionCard.tsx @@ -1,8 +1,7 @@ import classNames from "classnames"; import React from "react"; -import TruncatedId from "../TruncatedId"; -import Tooltip from "~app/components/Tooltip"; import { ITransactionEntryProps } from "./TransactionEntryProps"; +import TransactionIdView from "./TransactionIdView"; const TransactionCard: React.FC = ({ isGenesisByDate, @@ -30,14 +29,11 @@ const TransactionCard: React.FC = ({
Transaction Id
- - {isTransactionFromStardustGenesis && ( - - - warning - - - )} +
diff --git a/client/src/app/components/stardust/history/TransactionIdView.tsx b/client/src/app/components/stardust/history/TransactionIdView.tsx new file mode 100644 index 000000000..7b32149ef --- /dev/null +++ b/client/src/app/components/stardust/history/TransactionIdView.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { STARDUST_SUPPLY_INCREASE_TRANSACTION_ID } from "~/helpers/stardust/transactionsHelper"; +import TruncatedId from "../TruncatedId"; +import Tooltip from "../../Tooltip"; + +export interface ITransactionIdProps { + transactionId: string; + isTransactionFromStardustGenesis: boolean; + transactionLink: string; +} + +const TransactionIdView: React.FC = ({ transactionId, isTransactionFromStardustGenesis, transactionLink }) => { + return ( + <> + {isTransactionFromStardustGenesis && transactionId.includes(STARDUST_SUPPLY_INCREASE_TRANSACTION_ID) ? ( + Stardust Genesis + ) : ( + <> + + {isTransactionFromStardustGenesis && ( + + + warning + + + )} + + )} + + ); +}; + +export default TransactionIdView; diff --git a/client/src/app/components/stardust/history/TransactionRow.tsx b/client/src/app/components/stardust/history/TransactionRow.tsx index de540d02b..bb1c65333 100644 --- a/client/src/app/components/stardust/history/TransactionRow.tsx +++ b/client/src/app/components/stardust/history/TransactionRow.tsx @@ -1,9 +1,7 @@ import classNames from "classnames"; import React from "react"; -import { Link } from "react-router-dom"; -import Tooltip from "../../Tooltip"; -import TruncatedId from "../TruncatedId"; import { ITransactionEntryProps } from "./TransactionEntryProps"; +import TransactionIdView from "./TransactionIdView"; const TransactionRow: React.FC = ({ isGenesisByDate, @@ -26,16 +24,13 @@ const TransactionRow: React.FC = ({ {isGenesisByDate ? Genesis : {dateFormatted}} - - - {isTransactionFromStardustGenesis && ( - - - warning - - - )} - +
+ +
{valueView} 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.scss b/client/src/app/routes/stardust/OutputPage.scss index 4dbbe8f8b..deaa6d622 100644 --- 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 index 9297fc0f9..03461cda6 100644 --- a/client/src/app/routes/stardust/OutputPage.tsx +++ b/client/src/app/routes/stardust/OutputPage.tsx @@ -4,16 +4,15 @@ 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 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> = ({ match: { @@ -51,11 +50,8 @@ const OutputPage: React.FC> = ({ milestoneTimestampBooked, } = outputMetadata ?? {}; - const isTransactionFromStardustGenesis = - milestoneIndexBooked && TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndexBooked); - const transctionLink = isTransactionFromStardustGenesis - ? `/${CHRYSALIS_MAINNET}/search/${transactionId}` - : `/${network}/transaction/${transactionId}`; + const isTransactionFromStardustGenesis = TransactionsHelper.isTransactionFromIotaStardustGenesis(network, milestoneIndexBooked ?? 0); + const transactionLink = getTransactionLink(network, transactionId ?? "", isTransactionFromStardustGenesis); return ( (output && ( @@ -101,16 +97,14 @@ const OutputPage: React.FC> = ({ {transactionId && (
Transaction ID
-
- {isTransactionFromStardustGenesis && ( - - warning - +
+ {milestoneIndexBooked && ( + )} -
)} diff --git a/client/src/helpers/stardust/transactionsHelper.ts b/client/src/helpers/stardust/transactionsHelper.ts index 8128f49d0..3fd705069 100644 --- a/client/src/helpers/stardust/transactionsHelper.ts +++ b/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,