a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Squash block gas used/limit info; add percentage bar

This commit is contained in:
Willian Mitsuda 2021-07-28 04:24:48 -03:00
parent e967abf61e
commit 91dd933aa2
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/Block.tsx
View File

@ -5,6 +5,7 @@ import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import NavBlock from "./block/NavBlock"; import NavBlock from "./block/NavBlock";
import ContentFrame from "./ContentFrame"; import ContentFrame from "./ContentFrame";
import InfoRow from "./components/InfoRow";
import Timestamp from "./components/Timestamp"; import Timestamp from "./components/Timestamp";
import GasValue from "./components/GasValue"; import GasValue from "./components/GasValue";
import BlockLink from "./components/BlockLink"; import BlockLink from "./components/BlockLink";
@ -43,6 +44,8 @@ const Block: React.FC = () => {
const burnedFees = const burnedFees =
block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed); block?.baseFeePerGas && block.baseFeePerGas.mul(block.gasUsed);
const netFeeReward = block && block.feeReward.sub(burnedFees ?? 0); const netFeeReward = block && block.feeReward.sub(burnedFees ?? 0);
const gasUsedPerc =
block && block.gasUsed.mul(10000).div(block.gasLimit).toNumber() / 100;
const latestBlockNumber = useLatestBlockNumber(provider); const latestBlockNumber = useLatestBlockNumber(provider);
@ -130,11 +133,24 @@ const Block: React.FC = () => {
<FormattedBalance value={burnedFees} /> Ether <FormattedBalance value={burnedFees} /> Ether
</InfoRow> </InfoRow>
)} )}
<InfoRow title="Gas Used"> <InfoRow title="Gas Used/Limit">
<GasValue value={block.gasUsed} /> <div className="flex space-x-3 items-baseline">
</InfoRow> <div>
<InfoRow title="Gas Limit"> <GasValue value={block.gasUsed} /> /{" "}
<GasValue value={block.gasLimit} /> <GasValue value={block.gasLimit} />
</div>
<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 - gasUsedPerc!}%` }}
></div>
<div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
<span className="m-auto">{gasUsedPerc}%</span>
</div>
</div>
</div>
</div>
</InfoRow> </InfoRow>
<InfoRow title="Extra Data"> <InfoRow title="Extra Data">
{extraStr} (Hex:{" "} {extraStr} (Hex:{" "}
@ -162,15 +178,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); export default React.memo(Block);

2
src/components/InfoRow.tsx
View File

@ -5,7 +5,7 @@ type InfoRowProps = React.PropsWithChildren<{
}>; }>;
const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => ( const InfoRow: React.FC<InfoRowProps> = ({ title, children }) => (
<div className="grid grid-cols-4 py-4 text-sm"> <div className="grid grid-cols-4 py-4 text-sm items-baseline">
<div>{title}:</div> <div>{title}:</div>
<div className="col-span-3">{children}</div> <div className="col-span-3">{children}</div>
</div> </div>