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

Extract PercentageBar component; apply percentage bar to tx gas usage

This commit is contained in:
Willian Mitsuda 2021-07-28 04:40:38 -03:00
parent e354973a63
commit e214117f47
3 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Block.tsx
View File

@ -8,6 +8,7 @@ import ContentFrame from "./ContentFrame";
import InfoRow from "./components/InfoRow"; 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 PercentageBar from "./components/PercentageBar";
import BlockLink from "./components/BlockLink"; import BlockLink from "./components/BlockLink";
import DecoratedAddressLink from "./components/DecoratedAddressLink"; import DecoratedAddressLink from "./components/DecoratedAddressLink";
import TransactionValue from "./components/TransactionValue"; import TransactionValue from "./components/TransactionValue";
@ -133,17 +134,7 @@ const Block: React.FC = () => {
<GasValue value={block.gasUsed} /> /{" "} <GasValue value={block.gasUsed} /> /{" "}
<GasValue value={block.gasLimit} /> <GasValue value={block.gasLimit} />
</div> </div>
<div className="self-center w-40 border rounded border-gray-200"> <PercentageBar perc={gasUsedPerc!} />
<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> </div>
</InfoRow> </InfoRow>
<InfoRow title="Extra Data"> <InfoRow title="Extra Data">

21
src/components/PercentageBar.tsx Normal file
View File

@ -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);

10
src/transaction/Details.tsx
View File

@ -20,6 +20,7 @@ import GasValue from "../components/GasValue";
import FormattedBalance from "../components/FormattedBalance"; import FormattedBalance from "../components/FormattedBalance";
import TokenTransferItem from "../TokenTransferItem"; import TokenTransferItem from "../TokenTransferItem";
import { TransactionData, InternalOperation } from "../types"; import { TransactionData, InternalOperation } from "../types";
import PercentageBar from "../components/PercentageBar";
type DetailsProps = { type DetailsProps = {
txData: TransactionData; txData: TransactionData;
@ -171,8 +172,13 @@ const Details: React.FC<DetailsProps> = ({
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Gas Used/Limit"> <InfoRow title="Gas Used/Limit">
<GasValue value={txData.gasUsed} /> / <GasValue value={txData.gasLimit} />{" "} <div className="flex space-x-3 items-baseline">
({(txData.gasUsedPerc * 100).toFixed(2)}%) <div>
<GasValue value={txData.gasUsed} /> /{" "}
<GasValue value={txData.gasLimit} />
</div>
<PercentageBar perc={Math.round(txData.gasUsedPerc * 10000) / 100} />
</div>
</InfoRow> </InfoRow>
<InfoRow title="Ether Price">N/A</InfoRow> <InfoRow title="Ether Price">N/A</InfoRow>
<InfoRow title="Nonce">{txData.nonce}</InfoRow> <InfoRow title="Nonce">{txData.nonce}</InfoRow>