otterscan/src/transaction/Details.tsx

315 lines
11 KiB
TypeScript
Raw Normal View History

2021-08-10 19:26:00 +00:00
import React, { useMemo, useState } from "react";
import { BigNumber } from "@ethersproject/bignumber";
2021-08-10 19:26:00 +00:00
import { toUtf8String } from "@ethersproject/strings";
2021-07-14 19:30:28 +00:00
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
2021-07-14 19:30:28 +00:00
import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow";
import BlockLink from "../components/BlockLink";
2021-07-23 04:28:44 +00:00
import BlockConfirmations from "../components/BlockConfirmations";
2021-07-14 19:30:28 +00:00
import AddressHighlighter from "../components/AddressHighlighter";
import DecoratedAddressLink from "../components/DecoratedAddressLink";
2021-07-14 19:30:28 +00:00
import Copy from "../components/Copy";
2021-08-01 22:01:58 +00:00
import Nonce from "../components/Nonce";
2021-07-14 19:30:28 +00:00
import Timestamp from "../components/Timestamp";
2021-07-21 19:06:51 +00:00
import InternalTransactionOperation from "../components/InternalTransactionOperation";
2021-07-14 19:30:28 +00:00
import MethodName from "../components/MethodName";
import TransactionType from "../components/TransactionType";
2021-07-28 21:44:50 +00:00
import RewardSplit from "./RewardSplit";
2021-07-14 19:30:28 +00:00
import GasValue from "../components/GasValue";
import USDValue from "../components/USDValue";
2021-07-14 19:30:28 +00:00
import FormattedBalance from "../components/FormattedBalance";
import ETH2USDValue from "../components/ETH2USDValue";
2021-07-14 19:30:28 +00:00
import TokenTransferItem from "../TokenTransferItem";
2021-07-21 19:06:51 +00:00
import { TransactionData, InternalOperation } from "../types";
import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition";
2021-08-01 11:25:33 +00:00
import PercentagePosition from "../components/PercentagePosition";
2021-07-14 19:30:28 +00:00
type DetailsProps = {
txData: TransactionData;
2021-07-21 19:06:51 +00:00
internalOps?: InternalOperation[];
2021-07-14 19:30:28 +00:00
sendsEthToMiner: boolean;
ethUSDPrice: BigNumber | undefined;
2021-07-14 19:30:28 +00:00
};
const Details: React.FC<DetailsProps> = ({
txData,
2021-07-21 19:06:51 +00:00
internalOps,
2021-07-14 19:30:28 +00:00
sendsEthToMiner,
ethUSDPrice,
2021-07-28 21:44:50 +00:00
}) => {
const hasEIP1559 =
txData.blockBaseFeePerGas !== undefined &&
txData.blockBaseFeePerGas !== null;
2021-08-10 19:26:00 +00:00
const [inputMode, setInputMode] = useState<number>(0);
const utfInput = useMemo(() => {
try {
return txData && toUtf8String(txData.data);
} catch (err) {
console.error("Error while converting input data to string");
console.error(err);
return "<can't decode>";
}
}, [txData]);
2021-07-28 21:44:50 +00:00
return (
<ContentFrame tabs>
<InfoRow title="Transaction Hash">
<div className="flex items-baseline space-x-2">
<span className="font-hash">{txData.transactionHash}</span>
<Copy value={txData.transactionHash} />
</div>
2021-07-28 21:44:50 +00:00
</InfoRow>
<InfoRow title="Status">
{txData.status ? (
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-green-50 text-green-500 text-xs">
<FontAwesomeIcon icon={faCheckCircle} size="1x" />
<span>Success</span>
</span>
) : (
<span className="flex items-center w-min rounded-lg space-x-1 px-3 py-1 bg-red-50 text-red-500 text-xs">
<FontAwesomeIcon icon={faTimesCircle} size="1x" />
<span>Fail</span>
</span>
)}
</InfoRow>
2021-08-01 22:11:47 +00:00
<InfoRow title="Block / Position">
<div className="flex items-baseline divide-x-2 divide-dotted divide-gray-300">
<div className="flex space-x-1 items-baseline mr-3">
<span className="text-orange-500">
<FontAwesomeIcon icon={faCube} />
</span>
<BlockLink blockTag={txData.blockNumber} />
<BlockConfirmations confirmations={txData.confirmations} />
</div>
<div className="flex space-x-2 items-baseline pl-3">
2021-08-01 11:40:43 +00:00
<RelativePosition
pos={txData.transactionIndex}
total={txData.blockTransactionCount - 1}
/>
<PercentagePosition
perc={
txData.transactionIndex / (txData.blockTransactionCount - 1)
}
/>
</div>
2021-07-28 21:44:50 +00:00
</div>
</InfoRow>
<InfoRow title="Timestamp">
<Timestamp value={txData.timestamp} />
</InfoRow>
2021-08-01 22:11:47 +00:00
<InfoRow title="From / Nonce">
2021-08-01 22:01:58 +00:00
<div className="flex divide-x-2 divide-dotted divide-gray-300">
<div className="flex items-baseline space-x-2 -ml-1 mr-3">
<AddressHighlighter address={txData.from}>
<DecoratedAddressLink
address={txData.from}
miner={txData.from === txData.miner}
txFrom
/>
</AddressHighlighter>
<Copy value={txData.from} />
</div>
<div className="flex items-baseline pl-3">
<Nonce value={txData.nonce} />
</div>
2021-07-14 19:30:28 +00:00
</div>
</InfoRow>
2021-07-28 21:44:50 +00:00
<InfoRow title={txData.to ? "Interacted With (To)" : "Contract Created"}>
{txData.to ? (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.to}>
<DecoratedAddressLink
address={txData.to}
miner={txData.to === txData.miner}
txTo
/>
</AddressHighlighter>
<Copy value={txData.to} />
</div>
) : (
<div className="flex items-baseline space-x-2 -ml-1">
<AddressHighlighter address={txData.createdContractAddress!}>
<DecoratedAddressLink
address={txData.createdContractAddress!}
creation
txTo
/>
</AddressHighlighter>
<Copy value={txData.createdContractAddress!} />
</div>
)}
{internalOps && internalOps.length > 0 && (
2021-07-28 21:44:50 +00:00
<div className="mt-2 space-y-1">
{internalOps.map((op, i) => (
<InternalTransactionOperation
key={i}
txData={txData}
internalOp={op}
/>
))}
</div>
)}
</InfoRow>
<InfoRow title="Transaction Action">
<MethodName data={txData.data} />
</InfoRow>
{txData.tokenTransfers.length > 0 && (
<InfoRow title={`Tokens Transferred (${txData.tokenTransfers.length})`}>
<div>
{txData.tokenTransfers.map((t, i) => (
<TokenTransferItem
key={i}
t={t}
txData={txData}
tokenMetas={txData.tokenMetas}
/>
))}
</div>
</InfoRow>
)}
<InfoRow title="Value">
<FormattedBalance value={txData.value} /> Ether{" "}
{!txData.value.isZero() && ethUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
</span>
)}
</InfoRow>
2021-07-28 21:44:50 +00:00
<InfoRow
title={
<>
Type (
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-2718">
EIP-2718
</ExternalLink>
)
</>
}
>
<TransactionType type={txData.type} />
</InfoRow>
{txData.type === 2 && (
<>
<InfoRow title="Max Priority Fee Per Gas">
<span>
<FormattedBalance value={txData.maxPriorityFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxPriorityFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
</InfoRow>
<InfoRow title="Max Fee Per Gas">
<span>
<FormattedBalance value={txData.maxFeePerGas!} /> Ether (
<FormattedBalance
value={txData.maxFeePerGas!}
decimals={9}
/>{" "}
Gwei)
</span>
</InfoRow>
</>
)}
<InfoRow title="Gas Price">
<div className="flex items-baseline space-x-1">
2021-07-28 19:09:40 +00:00
<span>
2021-07-28 21:44:50 +00:00
<FormattedBalance value={txData.gasPrice} /> Ether (
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
2021-07-28 19:09:40 +00:00
</span>
2021-07-28 21:44:50 +00:00
{sendsEthToMiner && (
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
Flashbots
</span>
)}
</div>
</InfoRow>
2021-08-01 22:11:47 +00:00
<InfoRow title="Gas Used / Limit">
2021-07-28 21:44:50 +00:00
<div className="flex space-x-3 items-baseline">
<div>
<RelativePosition
pos={<GasValue value={txData.gasUsed} />}
total={<GasValue value={txData.gasLimit} />}
/>
2021-07-28 21:44:50 +00:00
</div>
<PercentageBar
perc={
Math.round(
(txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
) / 100
}
/>
</div>
2021-07-28 21:44:50 +00:00
</InfoRow>
2021-07-29 00:54:21 +00:00
{hasEIP1559 && (
<InfoRow title="Block Base Fee">
<span>
<FormattedBalance value={txData.blockBaseFeePerGas!} decimals={9} />{" "}
Gwei (
<FormattedBalance
value={txData.blockBaseFeePerGas!}
decimals={0}
/>{" "}
wei)
</span>
</InfoRow>
)}
<InfoRow title="Transaction Fee">
<div className="space-y-3">
<div>
<FormattedBalance value={txData.fee} /> Ether{" "}
{ethUSDPrice && (
<span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
<ETH2USDValue
ethAmount={txData.fee}
eth2USDValue={ethUSDPrice}
/>
</span>
)}
2021-07-29 00:54:21 +00:00
</div>
{hasEIP1559 && <RewardSplit txData={txData} />}
</div>
</InfoRow>
<InfoRow title="Ether Price">
<USDValue value={ethUSDPrice} />
</InfoRow>
2021-07-28 21:44:50 +00:00
<InfoRow title="Input Data">
2021-08-10 19:26:00 +00:00
<div className="space-y-1">
<div className="flex space-x-1">
<button
className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
inputMode === 0 ? "border-blue-300" : ""
}`}
onClick={() => setInputMode(0)}
>
Raw
</button>
<button
className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
inputMode === 1 ? "border-blue-300" : ""
}`}
onClick={() => setInputMode(1)}
>
UTF-8
</button>
</div>
<textarea
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
value={inputMode === 0 ? txData.data : utfInput}
readOnly
/>
</div>
2021-07-28 21:44:50 +00:00
</InfoRow>
</ContentFrame>
);
};
2021-07-14 19:30:28 +00:00
export default React.memo(Details);