201 lines
7.4 KiB
TypeScript
201 lines
7.4 KiB
TypeScript
import React, { useEffect, useMemo, useContext } from "react";
|
|
import { useParams, NavLink } from "react-router-dom";
|
|
import { BigNumber } from "@ethersproject/bignumber";
|
|
import { commify } from "@ethersproject/units";
|
|
import { toUtf8String } from "@ethersproject/strings";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faBurn } from "@fortawesome/free-solid-svg-icons/faBurn";
|
|
import StandardFrame from "./StandardFrame";
|
|
import StandardSubtitle from "./StandardSubtitle";
|
|
import NavBlock from "./block/NavBlock";
|
|
import ContentFrame from "./ContentFrame";
|
|
import BlockNotFound from "./components/BlockNotFound";
|
|
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 ETH2USDValue from "./components/ETH2USDValue";
|
|
import USDValue from "./components/USDValue";
|
|
import HexValue from "./components/HexValue";
|
|
import { RuntimeContext } from "./useRuntime";
|
|
import { useLatestBlockNumber } from "./useLatestBlock";
|
|
import { blockTxsURL } from "./url";
|
|
import { useBlockData } from "./useErigonHooks";
|
|
import { useETHUSDOracle } from "./usePriceOracle";
|
|
import { useChainInfo } from "./useChainInfo";
|
|
|
|
const Block: React.FC = () => {
|
|
const { provider } = useContext(RuntimeContext);
|
|
const { blockNumberOrHash } = useParams();
|
|
if (blockNumberOrHash === undefined) {
|
|
throw new Error("blockNumberOrHash couldn't be undefined here");
|
|
}
|
|
const {
|
|
nativeCurrency: { name, symbol },
|
|
} = useChainInfo();
|
|
|
|
const block = useBlockData(provider, blockNumberOrHash);
|
|
useEffect(() => {
|
|
if (block !== undefined) {
|
|
document.title = `Block #${blockNumberOrHash} | Otterscan`;
|
|
}
|
|
}, [blockNumberOrHash, block]);
|
|
|
|
const extraStr = useMemo(() => {
|
|
try {
|
|
return block && toUtf8String(block.extraData);
|
|
} catch (err) {
|
|
console.info("Error while converting block extra data to string");
|
|
console.info(err);
|
|
}
|
|
}, [block]);
|
|
const burntFees =
|
|
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
|
|
const netFeeReward = block?.feeReward ?? BigNumber.from(0);
|
|
const gasUsedPerc =
|
|
block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
|
|
|
|
const latestBlockNumber = useLatestBlockNumber(provider);
|
|
const blockETHUSDPrice = useETHUSDOracle(provider, block?.number);
|
|
|
|
return (
|
|
<StandardFrame>
|
|
<StandardSubtitle>
|
|
<div className="flex space-x-1 items-baseline">
|
|
<span>Block</span>
|
|
<span className="text-base text-gray-500">#{blockNumberOrHash}</span>
|
|
{block && (
|
|
<NavBlock
|
|
blockNumber={block.number}
|
|
latestBlockNumber={latestBlockNumber}
|
|
/>
|
|
)}
|
|
</div>
|
|
</StandardSubtitle>
|
|
{block === null && (
|
|
<BlockNotFound blockNumberOrHash={blockNumberOrHash} />
|
|
)}
|
|
{block && (
|
|
<ContentFrame>
|
|
<InfoRow title="Block Height">
|
|
<span className="font-bold">{commify(block.number)}</span>
|
|
</InfoRow>
|
|
<InfoRow title="Timestamp">
|
|
<Timestamp value={block.timestamp} />
|
|
</InfoRow>
|
|
<InfoRow title="Transactions">
|
|
<NavLink
|
|
className="bg-link-blue bg-opacity-10 text-link-blue hover:bg-opacity-100 hover:text-white rounded-lg px-2 py-1 text-xs"
|
|
to={blockTxsURL(block.number)}
|
|
>
|
|
{block.transactionCount} transactions
|
|
</NavLink>{" "}
|
|
in this block
|
|
</InfoRow>
|
|
<InfoRow title="Mined by">
|
|
<DecoratedAddressLink address={block.miner} miner />
|
|
</InfoRow>
|
|
<InfoRow title="Block Reward">
|
|
<TransactionValue value={block.blockReward.add(netFeeReward)} />
|
|
{!netFeeReward.isZero() && (
|
|
<>
|
|
{" "}
|
|
(<TransactionValue value={block.blockReward} hideUnit /> +{" "}
|
|
<TransactionValue value={netFeeReward} hideUnit />)
|
|
</>
|
|
)}
|
|
{blockETHUSDPrice && (
|
|
<>
|
|
{" "}
|
|
<span className="px-2 border-yellow-200 border rounded-lg bg-yellow-100 text-yellow-600">
|
|
<ETH2USDValue
|
|
ethAmount={block.blockReward.add(netFeeReward)}
|
|
eth2USDValue={blockETHUSDPrice}
|
|
/>
|
|
</span>
|
|
</>
|
|
)}
|
|
</InfoRow>
|
|
<InfoRow title="Uncles Reward">
|
|
<TransactionValue value={block.unclesReward} />
|
|
</InfoRow>
|
|
<InfoRow title="Size">{commify(block.size)} bytes</InfoRow>
|
|
{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>{" "}
|
|
{symbol}
|
|
</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 break-all">{block.extraData}</span>)
|
|
</InfoRow>
|
|
<InfoRow title={`${name} Price`}>
|
|
<USDValue value={blockETHUSDPrice} />
|
|
</InfoRow>
|
|
<InfoRow title="Difficult">
|
|
{commify(block._difficulty.toString())}
|
|
</InfoRow>
|
|
<InfoRow title="Total Difficult">
|
|
{commify(block.totalDifficulty.toString())}
|
|
</InfoRow>
|
|
<InfoRow title="Hash">
|
|
<HexValue value={block.hash} />
|
|
</InfoRow>
|
|
<InfoRow title="Parent Hash">
|
|
<BlockLink blockTag={block.parentHash} />
|
|
</InfoRow>
|
|
<InfoRow title="Sha3Uncles">
|
|
<HexValue value={block.sha3Uncles} />
|
|
</InfoRow>
|
|
<InfoRow title="StateRoot">
|
|
<HexValue value={block.stateRoot} />
|
|
</InfoRow>
|
|
<InfoRow title="Nonce">
|
|
<span className="font-data">{block.nonce}</span>
|
|
</InfoRow>
|
|
</ContentFrame>
|
|
)}
|
|
</StandardFrame>
|
|
);
|
|
};
|
|
|
|
export default Block;
|