Add percentage position component
This commit is contained in:
parent
e78447f4b6
commit
11089be171
|
@ -0,0 +1,23 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type PercentagePositionProps = {
|
||||||
|
perc: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PercentagePosition: React.FC<PercentagePositionProps> = ({ perc }) => (
|
||||||
|
<div className="self-center w-40">
|
||||||
|
<div className="w-full h-5 relative rounded border border-orange-200">
|
||||||
|
<div className="absolute w-full h-1/2 border-b"></div>
|
||||||
|
<div className="absolute top-1/4 w-full h-1/2 border-l-2 border-r-2 border-gray-300"></div>
|
||||||
|
<div className="absolute top-1/4 w-1/2 h-1/2 border-r-2 border-gray-300"></div>
|
||||||
|
<div className="absolute top-1/4 w-1/4 h-1/2 border-r-2 border-gray-300"></div>
|
||||||
|
<div className="absolute top-1/4 w-3/4 h-1/2 border-r-2 border-gray-300"></div>
|
||||||
|
<div
|
||||||
|
className="absolute h-full border-r-4 border-black"
|
||||||
|
style={{ width: `${perc * 100}%` }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default React.memo(PercentagePosition);
|
|
@ -24,6 +24,7 @@ import { TransactionData, InternalOperation } from "../types";
|
||||||
import PercentageBar from "../components/PercentageBar";
|
import PercentageBar from "../components/PercentageBar";
|
||||||
import ExternalLink from "../components/ExternalLink";
|
import ExternalLink from "../components/ExternalLink";
|
||||||
import RelativePosition from "../components/RelativePosition";
|
import RelativePosition from "../components/RelativePosition";
|
||||||
|
import PercentagePosition from "../components/PercentagePosition";
|
||||||
|
|
||||||
type DetailsProps = {
|
type DetailsProps = {
|
||||||
txData: TransactionData;
|
txData: TransactionData;
|
||||||
|
@ -231,10 +232,15 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
<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>
|
||||||
<InfoRow title="Index in Block">
|
<InfoRow title="Index in Block">
|
||||||
<RelativePosition
|
<div className="flex space-x-3 items-baseline">
|
||||||
pos={txData.transactionIndex}
|
<RelativePosition
|
||||||
total={txData.blockTransactionCount - 1}
|
pos={txData.transactionIndex}
|
||||||
/>
|
total={txData.blockTransactionCount - 1}
|
||||||
|
/>
|
||||||
|
<PercentagePosition
|
||||||
|
perc={txData.transactionIndex / (txData.blockTransactionCount - 1)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
<InfoRow title="Input Data">
|
<InfoRow title="Input Data">
|
||||||
<textarea
|
<textarea
|
||||||
|
|
Loading…
Reference in New Issue