Merge branch 'feature/london' into develop
This commit is contained in:
commit
65dd8b5e4b
156
src/Block.tsx
156
src/Block.tsx
|
@ -1,92 +1,35 @@
|
|||
import React, { useEffect, useState, useMemo, useContext } from "react";
|
||||
import React, { useEffect, useMemo, useContext } from "react";
|
||||
import { useParams, NavLink } from "react-router-dom";
|
||||
import { ethers, BigNumber } from "ethers";
|
||||
import { BigNumber, ethers } from "ethers";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBurn } from "@fortawesome/free-solid-svg-icons";
|
||||
import StandardFrame from "./StandardFrame";
|
||||
import StandardSubtitle from "./StandardSubtitle";
|
||||
import NavBlock from "./block/NavBlock";
|
||||
import ContentFrame from "./ContentFrame";
|
||||
import InfoRow from "./components/InfoRow";
|
||||
import Timestamp from "./components/Timestamp";
|
||||
import GasValue from "./components/GasValue";
|
||||
import PercentageBar from "./components/PercentageBar";
|
||||
import BlockLink from "./components/BlockLink";
|
||||
import DecoratedAddressLink from "./components/DecoratedAddressLink";
|
||||
import TransactionValue from "./components/TransactionValue";
|
||||
import FormattedBalance from "./components/FormattedBalance";
|
||||
import HexValue from "./components/HexValue";
|
||||
import { RuntimeContext } from "./useRuntime";
|
||||
import { useLatestBlockNumber } from "./useLatestBlock";
|
||||
import { blockTxsURL } from "./url";
|
||||
import { useBlockData } from "./useErigonHooks";
|
||||
|
||||
type BlockParams = {
|
||||
blockNumberOrHash: string;
|
||||
};
|
||||
|
||||
interface ExtendedBlock extends ethers.providers.Block {
|
||||
blockReward: BigNumber;
|
||||
unclesReward: BigNumber;
|
||||
feeReward: BigNumber;
|
||||
size: number;
|
||||
sha3Uncles: string;
|
||||
stateRoot: string;
|
||||
totalDifficulty: BigNumber;
|
||||
}
|
||||
|
||||
const Block: React.FC = () => {
|
||||
const { provider } = useContext(RuntimeContext);
|
||||
const params = useParams<BlockParams>();
|
||||
|
||||
const [block, setBlock] = useState<ExtendedBlock>();
|
||||
useEffect(() => {
|
||||
if (!provider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const readBlock = async () => {
|
||||
let blockPromise: Promise<any>;
|
||||
if (ethers.utils.isHexString(params.blockNumberOrHash, 32)) {
|
||||
blockPromise = provider.send("eth_getBlockByHash", [
|
||||
params.blockNumberOrHash,
|
||||
false,
|
||||
]);
|
||||
} else {
|
||||
blockPromise = provider.send("eth_getBlockByNumber", [
|
||||
params.blockNumberOrHash,
|
||||
false,
|
||||
]);
|
||||
}
|
||||
const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
|
||||
blockPromise,
|
||||
provider.send("erigon_issuance", [params.blockNumberOrHash]),
|
||||
provider.send("eth_getBlockReceipts", [params.blockNumberOrHash]),
|
||||
]);
|
||||
const receipts = (_rawReceipts as any[]).map((r) =>
|
||||
provider.formatter.receipt(r)
|
||||
);
|
||||
const fees = receipts.reduce(
|
||||
(acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
|
||||
BigNumber.from(0)
|
||||
);
|
||||
|
||||
const _block = provider.formatter.block(_rawBlock);
|
||||
const extBlock: ExtendedBlock = {
|
||||
blockReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.blockReward ?? 0
|
||||
),
|
||||
unclesReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.uncleReward ?? 0
|
||||
),
|
||||
feeReward: fees,
|
||||
size: provider.formatter.number(_rawBlock.size),
|
||||
sha3Uncles: _rawBlock.sha3Uncles,
|
||||
stateRoot: _rawBlock.stateRoot,
|
||||
totalDifficulty: provider.formatter.bigNumber(
|
||||
_rawBlock.totalDifficulty
|
||||
),
|
||||
..._block,
|
||||
};
|
||||
setBlock(extBlock);
|
||||
};
|
||||
readBlock();
|
||||
}, [provider, params.blockNumberOrHash]);
|
||||
|
||||
const block = useBlockData(provider, params.blockNumberOrHash);
|
||||
useEffect(() => {
|
||||
if (block) {
|
||||
document.title = `Block #${block.number} | Otterscan`;
|
||||
|
@ -101,6 +44,11 @@ const Block: React.FC = () => {
|
|||
console.error(err);
|
||||
}
|
||||
}, [block]);
|
||||
const burntFees =
|
||||
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
|
||||
const netFeeReward = block && block.feeReward.sub(burntFees ?? 0);
|
||||
const gasUsedPerc =
|
||||
block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
|
||||
|
||||
const latestBlockNumber = useLatestBlockNumber(provider);
|
||||
|
||||
|
@ -143,38 +91,77 @@ const Block: React.FC = () => {
|
|||
<DecoratedAddressLink address={block.miner} miner />
|
||||
</InfoRow>
|
||||
<InfoRow title="Block Reward">
|
||||
<TransactionValue value={block.blockReward.add(block.feeReward)} />
|
||||
<TransactionValue
|
||||
value={block.blockReward.add(netFeeReward ?? 0)}
|
||||
/>
|
||||
{!block.feeReward.isZero() && (
|
||||
<>
|
||||
{" "}
|
||||
(<TransactionValue value={block.blockReward} hideUnit /> +{" "}
|
||||
<TransactionValue value={block.feeReward} hideUnit />)
|
||||
<TransactionValue
|
||||
value={netFeeReward ?? BigNumber.from(0)}
|
||||
hideUnit
|
||||
/>
|
||||
)
|
||||
</>
|
||||
)}
|
||||
</InfoRow>
|
||||
<InfoRow title="Uncles Reward">
|
||||
<TransactionValue value={block.unclesReward} />
|
||||
</InfoRow>
|
||||
<InfoRow title="Difficult">
|
||||
{ethers.utils.commify(block.difficulty)}
|
||||
</InfoRow>
|
||||
<InfoRow title="Total Difficult">
|
||||
{ethers.utils.commify(block.totalDifficulty.toString())}
|
||||
</InfoRow>
|
||||
<InfoRow title="Size">
|
||||
{ethers.utils.commify(block.size)} bytes
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Used">
|
||||
<GasValue value={block.gasUsed} />
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Limit">
|
||||
<GasValue value={block.gasLimit} />
|
||||
{block.baseFeePerGas && (
|
||||
<InfoRow title="Base Fee">
|
||||
<span>
|
||||
<FormattedBalance value={block.baseFeePerGas} decimals={9} />{" "}
|
||||
Gwei (
|
||||
<FormattedBalance
|
||||
value={block.baseFeePerGas}
|
||||
decimals={0}
|
||||
/>{" "}
|
||||
wei)
|
||||
</span>
|
||||
</InfoRow>
|
||||
)}
|
||||
{burntFees && (
|
||||
<InfoRow title="Burnt Fees">
|
||||
<div className="flex items-baseline space-x-1">
|
||||
<span className="flex space-x-1 text-orange-500">
|
||||
<span title="Burnt fees">
|
||||
<FontAwesomeIcon icon={faBurn} size="1x" />
|
||||
</span>
|
||||
<span>
|
||||
<span className="line-through">
|
||||
<FormattedBalance value={burntFees} />
|
||||
</span>{" "}
|
||||
Ether
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</InfoRow>
|
||||
)}
|
||||
<InfoRow title="Gas Used/Limit">
|
||||
<div className="flex space-x-3 items-baseline">
|
||||
<div>
|
||||
<GasValue value={block.gasUsed} /> /{" "}
|
||||
<GasValue value={block.gasLimit} />
|
||||
</div>
|
||||
<PercentageBar perc={gasUsedPerc!} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Extra Data">
|
||||
{extraStr} (Hex:{" "}
|
||||
<span className="font-data">{block.extraData}</span>)
|
||||
</InfoRow>
|
||||
<InfoRow title="Ether Price">N/A</InfoRow>
|
||||
<InfoRow title="Difficult">
|
||||
{ethers.utils.commify(block.difficulty)}
|
||||
</InfoRow>
|
||||
<InfoRow title="Total Difficult">
|
||||
{ethers.utils.commify(block.totalDifficulty.toString())}
|
||||
</InfoRow>
|
||||
<InfoRow title="Hash">
|
||||
<HexValue value={block.hash} />
|
||||
</InfoRow>
|
||||
|
@ -196,15 +183,4 @@ const Block: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
type InfoRowProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
|
||||
<div className="grid grid-cols-4 py-4 text-sm">
|
||||
<div>{title}:</div>
|
||||
<div className="col-span-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default React.memo(Block);
|
||||
|
|
|
@ -92,12 +92,14 @@ const Transaction: React.FC = () => {
|
|||
value: _response.value,
|
||||
tokenTransfers,
|
||||
tokenMetas,
|
||||
type: _response.type ?? 0,
|
||||
fee: _response.gasPrice!.mul(_receipt.gasUsed),
|
||||
blockBaseFeePerGas: _block.baseFeePerGas,
|
||||
maxFeePerGas: _response.maxFeePerGas,
|
||||
maxPriorityFeePerGas: _response.maxPriorityFeePerGas,
|
||||
gasPrice: _response.gasPrice!,
|
||||
gasLimit: _response.gasLimit,
|
||||
gasUsed: _receipt.gasUsed,
|
||||
gasUsedPerc:
|
||||
_receipt.gasUsed.toNumber() / _response.gasLimit.toNumber(),
|
||||
gasLimit: _response.gasLimit,
|
||||
nonce: _response.nonce,
|
||||
data: _response.data,
|
||||
logs: _receipt.logs,
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
type ExternalLinkProps = {
|
||||
href: string;
|
||||
};
|
||||
|
||||
const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
|
||||
<a
|
||||
className="text-link-blue hover:text-link-blue-hover"
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span className="inline-flex items-baseline space-x-1">
|
||||
<span>{children}</span>
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} size="sm" />
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
|
||||
export default ExternalLink;
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
|
||||
type InfoRowProps = React.PropsWithChildren<{
|
||||
title: string;
|
||||
title: React.ReactNode;
|
||||
}>;
|
||||
|
||||
const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
import React from "react";
|
||||
|
||||
type PercentageBarProps = {
|
||||
perc: number;
|
||||
};
|
||||
|
||||
const PercentageBar: React.FC<PercentageBarProps> = ({ perc }) => (
|
||||
<div className="self-center w-40 border rounded border-gray-200">
|
||||
<div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
|
||||
<div
|
||||
className="absolute top-0 right-0 bg-white h-full rounded-r"
|
||||
style={{ width: `${100 - perc}%` }}
|
||||
></div>
|
||||
<div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
|
||||
<span className="m-auto">{perc}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default React.memo(PercentageBar);
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
|
||||
type PercentageGaugeProps = {
|
||||
perc: number;
|
||||
bgFull: string;
|
||||
bgPerc: string;
|
||||
textPerc: string;
|
||||
};
|
||||
|
||||
const PercentageGauge: React.FC<PercentageGaugeProps> = ({
|
||||
perc,
|
||||
bgFull,
|
||||
bgPerc,
|
||||
textPerc,
|
||||
}) => (
|
||||
<div className="w-60 h-6 border-l-2 border-gray-400 relative">
|
||||
<div className="flex absolute w-full h-full">
|
||||
<div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
|
||||
</div>
|
||||
<div className="flex absolute w-full h-full">
|
||||
<div
|
||||
className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
|
||||
style={{ width: `${perc}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
|
||||
>
|
||||
<span className="m-auto">{perc}%</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default React.memo(PercentageGauge);
|
|
@ -0,0 +1,39 @@
|
|||
import React from "react";
|
||||
import ExternalLink from "./ExternalLink";
|
||||
|
||||
type TransactionTypeProps = {
|
||||
type: number;
|
||||
};
|
||||
|
||||
const TransactionType: React.FC<TransactionTypeProps> = ({ type }) => {
|
||||
let description: React.ReactNode;
|
||||
switch (type) {
|
||||
case 0:
|
||||
description = "legacy";
|
||||
break;
|
||||
case 1:
|
||||
description = (
|
||||
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-2930">
|
||||
EIP-2930
|
||||
</ExternalLink>
|
||||
);
|
||||
break;
|
||||
case 2:
|
||||
description = (
|
||||
<ExternalLink href="https://eips.ethereum.org/EIPS/eip-1559">
|
||||
EIP-1559
|
||||
</ExternalLink>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
description = "unknown";
|
||||
}
|
||||
|
||||
return (
|
||||
<span>
|
||||
{type} <span className="font-bold">({description})</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TransactionType);
|
|
@ -15,10 +15,14 @@ import Copy from "../components/Copy";
|
|||
import Timestamp from "../components/Timestamp";
|
||||
import InternalTransactionOperation from "../components/InternalTransactionOperation";
|
||||
import MethodName from "../components/MethodName";
|
||||
import TransactionType from "../components/TransactionType";
|
||||
import RewardSplit from "./RewardSplit";
|
||||
import GasValue from "../components/GasValue";
|
||||
import FormattedBalance from "../components/FormattedBalance";
|
||||
import TokenTransferItem from "../TokenTransferItem";
|
||||
import { TransactionData, InternalOperation } from "../types";
|
||||
import PercentageBar from "../components/PercentageBar";
|
||||
import ExternalLink from "../components/ExternalLink";
|
||||
|
||||
type DetailsProps = {
|
||||
txData: TransactionData;
|
||||
|
@ -30,144 +34,213 @@ const Details: React.FC<DetailsProps> = ({
|
|||
txData,
|
||||
internalOps,
|
||||
sendsEthToMiner,
|
||||
}) => (
|
||||
<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>
|
||||
</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>
|
||||
<InfoRow title="Block">
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<BlockLink blockTag={txData.blockNumber} />
|
||||
<BlockConfirmations confirmations={txData.confirmations} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Timestamp">
|
||||
<Timestamp value={txData.timestamp} />
|
||||
</InfoRow>
|
||||
<InfoRow title="From">
|
||||
<div className="flex items-baseline space-x-2 -ml-1">
|
||||
<AddressHighlighter address={txData.from}>
|
||||
<DecoratedAddressLink
|
||||
address={txData.from}
|
||||
miner={txData.from === txData.miner}
|
||||
txFrom
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.from} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<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 && (
|
||||
<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}
|
||||
/>
|
||||
))}
|
||||
}) => {
|
||||
const hasEIP1559 =
|
||||
txData.blockBaseFeePerGas !== undefined &&
|
||||
txData.blockBaseFeePerGas !== null;
|
||||
|
||||
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>
|
||||
</InfoRow>
|
||||
)}
|
||||
<InfoRow title="Value">
|
||||
<span className="rounded bg-gray-100 px-2 py-1 text-xs">
|
||||
{ethers.utils.formatEther(txData.value)} Ether
|
||||
</span>
|
||||
</InfoRow>
|
||||
<InfoRow title="Transaction Fee">
|
||||
<FormattedBalance value={txData.fee} /> Ether
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Price">
|
||||
<div className="flex items-baseline space-x-1">
|
||||
<span>
|
||||
<FormattedBalance value={txData.gasPrice} /> Ether (
|
||||
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
|
||||
</span>
|
||||
{sendsEthToMiner && (
|
||||
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
|
||||
Flashbots
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Ether Price">N/A</InfoRow>
|
||||
<InfoRow title="Gas Limit">
|
||||
<GasValue value={txData.gasLimit} />
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Used by Transaction">
|
||||
<GasValue value={txData.gasUsed} /> (
|
||||
{(txData.gasUsedPerc * 100).toFixed(2)}%)
|
||||
</InfoRow>
|
||||
<InfoRow title="Nonce">{txData.nonce}</InfoRow>
|
||||
<InfoRow title="Position in Block">
|
||||
<span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
|
||||
{txData.transactionIndex}
|
||||
</span>
|
||||
</InfoRow>
|
||||
<InfoRow title="Input Data">
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={txData.data}
|
||||
readOnly
|
||||
/>
|
||||
</InfoRow>
|
||||
</ContentFrame>
|
||||
);
|
||||
</InfoRow>
|
||||
<InfoRow title="Block">
|
||||
<div className="flex items-baseline space-x-2">
|
||||
<BlockLink blockTag={txData.blockNumber} />
|
||||
<BlockConfirmations confirmations={txData.confirmations} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Timestamp">
|
||||
<Timestamp value={txData.timestamp} />
|
||||
</InfoRow>
|
||||
<InfoRow title="From">
|
||||
<div className="flex items-baseline space-x-2 -ml-1">
|
||||
<AddressHighlighter address={txData.from}>
|
||||
<DecoratedAddressLink
|
||||
address={txData.from}
|
||||
miner={txData.from === txData.miner}
|
||||
txFrom
|
||||
/>
|
||||
</AddressHighlighter>
|
||||
<Copy value={txData.from} />
|
||||
</div>
|
||||
</InfoRow>
|
||||
<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 && (
|
||||
<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">
|
||||
<span className="rounded bg-gray-100 px-2 py-1 text-xs">
|
||||
{ethers.utils.formatEther(txData.value)} Ether
|
||||
</span>
|
||||
</InfoRow>
|
||||
<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">
|
||||
<span>
|
||||
<FormattedBalance value={txData.gasPrice} /> Ether (
|
||||
<FormattedBalance value={txData.gasPrice} decimals={9} /> Gwei)
|
||||
</span>
|
||||
{sendsEthToMiner && (
|
||||
<span className="rounded text-yellow-500 bg-yellow-100 text-xs px-2 py-1">
|
||||
Flashbots
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Gas Used/Limit">
|
||||
<div className="flex space-x-3 items-baseline">
|
||||
<div>
|
||||
<GasValue value={txData.gasUsed} /> /{" "}
|
||||
<GasValue value={txData.gasLimit} />
|
||||
</div>
|
||||
<PercentageBar
|
||||
perc={
|
||||
Math.round(
|
||||
(txData.gasUsed.toNumber() / txData.gasLimit.toNumber()) * 10000
|
||||
) / 100
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</InfoRow>
|
||||
{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
|
||||
</div>
|
||||
{hasEIP1559 && <RewardSplit txData={txData} />}
|
||||
</div>
|
||||
</InfoRow>
|
||||
<InfoRow title="Ether Price">N/A</InfoRow>
|
||||
<InfoRow title="Nonce">{txData.nonce}</InfoRow>
|
||||
<InfoRow title="Position in Block">
|
||||
<span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
|
||||
{txData.transactionIndex}
|
||||
</span>
|
||||
</InfoRow>
|
||||
<InfoRow title="Input Data">
|
||||
<textarea
|
||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||
value={txData.data}
|
||||
readOnly
|
||||
/>
|
||||
</InfoRow>
|
||||
</ContentFrame>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Details);
|
||||
|
|
|
@ -0,0 +1,62 @@
|
|||
import React from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
|
||||
import FormattedBalance from "../components/FormattedBalance";
|
||||
import { TransactionData } from "../types";
|
||||
import PercentageGauge from "../components/PercentageGauge";
|
||||
|
||||
type RewardSplitProps = {
|
||||
txData: TransactionData;
|
||||
};
|
||||
|
||||
const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
|
||||
const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed);
|
||||
const minerReward = txData.gasPrice.mul(txData.gasUsed).sub(burntFees);
|
||||
const burntPerc =
|
||||
burntFees.mul(10000).div(txData.gasPrice.mul(txData.gasUsed)).toNumber() /
|
||||
100;
|
||||
|
||||
return (
|
||||
<div className="inline-block">
|
||||
<div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
|
||||
<PercentageGauge
|
||||
perc={burntPerc}
|
||||
bgFull="bg-orange-100"
|
||||
bgPerc="bg-orange-500"
|
||||
textPerc="text-orange-800"
|
||||
/>
|
||||
<div className="flex items-baseline space-x-1">
|
||||
<span className="flex space-x-1 text-orange-500">
|
||||
<span title="Burnt fees">
|
||||
<FontAwesomeIcon icon={faBurn} size="1x" />
|
||||
</span>
|
||||
<span>
|
||||
<span className="line-through">
|
||||
<FormattedBalance value={burntFees} />
|
||||
</span>{" "}
|
||||
Ether
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<PercentageGauge
|
||||
perc={100 - burntPerc}
|
||||
bgFull="bg-yellow-100"
|
||||
bgPerc="bg-yellow-300"
|
||||
textPerc="text-yellow-700"
|
||||
/>
|
||||
<div className="flex items-baseline space-x-1">
|
||||
<span className="flex space-x-1">
|
||||
<span className="text-yellow-300" title="Miner fees">
|
||||
<FontAwesomeIcon icon={faCoins} size="1x" />
|
||||
</span>
|
||||
<span>
|
||||
<FormattedBalance value={minerReward} /> Ether
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(RewardSplit);
|
|
@ -49,11 +49,14 @@ export type TransactionData = {
|
|||
value: BigNumber;
|
||||
tokenTransfers: TokenTransfer[];
|
||||
tokenMetas: TokenMetas;
|
||||
type: number;
|
||||
maxFeePerGas?: BigNumber | undefined;
|
||||
maxPriorityFeePerGas?: BigNumber | undefined;
|
||||
fee: BigNumber;
|
||||
blockBaseFeePerGas?: BigNumber | undefined | null;
|
||||
gasPrice: BigNumber;
|
||||
gasLimit: BigNumber;
|
||||
gasUsed: BigNumber;
|
||||
gasUsedPerc: number;
|
||||
gasLimit: BigNumber;
|
||||
nonce: number;
|
||||
data: string;
|
||||
logs: ethers.providers.Log[];
|
||||
|
|
|
@ -1,8 +1,79 @@
|
|||
import { ethers } from "ethers";
|
||||
import { ethers, BigNumber } from "ethers";
|
||||
import { useState, useEffect } from "react";
|
||||
import { getInternalOperations } from "./nodeFunctions";
|
||||
import { TransactionData, InternalOperation } from "./types";
|
||||
|
||||
export interface ExtendedBlock extends ethers.providers.Block {
|
||||
blockReward: BigNumber;
|
||||
unclesReward: BigNumber;
|
||||
feeReward: BigNumber;
|
||||
size: number;
|
||||
sha3Uncles: string;
|
||||
stateRoot: string;
|
||||
totalDifficulty: BigNumber;
|
||||
}
|
||||
|
||||
export const useBlockData = (
|
||||
provider: ethers.providers.JsonRpcProvider | undefined,
|
||||
blockNumberOrHash: string
|
||||
) => {
|
||||
const [block, setBlock] = useState<ExtendedBlock>();
|
||||
useEffect(() => {
|
||||
if (!provider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const readBlock = async () => {
|
||||
let blockPromise: Promise<any>;
|
||||
if (ethers.utils.isHexString(blockNumberOrHash, 32)) {
|
||||
blockPromise = provider.send("eth_getBlockByHash", [
|
||||
blockNumberOrHash,
|
||||
false,
|
||||
]);
|
||||
} else {
|
||||
blockPromise = provider.send("eth_getBlockByNumber", [
|
||||
blockNumberOrHash,
|
||||
false,
|
||||
]);
|
||||
}
|
||||
const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
|
||||
blockPromise,
|
||||
provider.send("erigon_issuance", [blockNumberOrHash]),
|
||||
provider.send("eth_getBlockReceipts", [blockNumberOrHash]),
|
||||
]);
|
||||
const receipts = (_rawReceipts as any[]).map((r) =>
|
||||
provider.formatter.receipt(r)
|
||||
);
|
||||
const fees = receipts.reduce(
|
||||
(acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
|
||||
BigNumber.from(0)
|
||||
);
|
||||
|
||||
const _block = provider.formatter.block(_rawBlock);
|
||||
const extBlock: ExtendedBlock = {
|
||||
blockReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.blockReward ?? 0
|
||||
),
|
||||
unclesReward: provider.formatter.bigNumber(
|
||||
_rawIssuance.uncleReward ?? 0
|
||||
),
|
||||
feeReward: fees,
|
||||
size: provider.formatter.number(_rawBlock.size),
|
||||
sha3Uncles: _rawBlock.sha3Uncles,
|
||||
stateRoot: _rawBlock.stateRoot,
|
||||
totalDifficulty: provider.formatter.bigNumber(
|
||||
_rawBlock.totalDifficulty
|
||||
),
|
||||
..._block,
|
||||
};
|
||||
setBlock(extBlock);
|
||||
};
|
||||
readBlock();
|
||||
}, [provider, blockNumberOrHash]);
|
||||
|
||||
return block;
|
||||
};
|
||||
|
||||
export const useInternalOperations = (
|
||||
provider: ethers.providers.JsonRpcProvider | undefined,
|
||||
txData: TransactionData | undefined
|
||||
|
|
Loading…
Reference in New Issue