Extract and apply relative position component
This commit is contained in:
parent
07e496f476
commit
e78447f4b6
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
|
||||
type RelativePositionProps = {
|
||||
pos: React.ReactNode;
|
||||
total: React.ReactNode;
|
||||
};
|
||||
|
||||
const RelativePosition: React.FC<RelativePositionProps> = ({ pos, total }) => (
|
||||
<span className="text-xs">
|
||||
{pos}
|
||||
<span className="text-gray-600 text-sm"> / {total}</span>
|
||||
</span>
|
||||
);
|
||||
|
||||
export default React.memo(RelativePosition);
|
|
@ -23,6 +23,7 @@ import TokenTransferItem from "../TokenTransferItem";
|
|||
import { TransactionData, InternalOperation } from "../types";
|
||||
import PercentageBar from "../components/PercentageBar";
|
||||
import ExternalLink from "../components/ExternalLink";
|
||||
import RelativePosition from "../components/RelativePosition";
|
||||
|
||||
type DetailsProps = {
|
||||
txData: TransactionData;
|
||||
|
@ -192,8 +193,10 @@ const Details: React.FC<DetailsProps> = ({
|
|||
<InfoRow title="Gas Used/Limit">
|
||||
<div className="flex space-x-3 items-baseline">
|
||||
<div>
|
||||
<GasValue value={txData.gasUsed} /> /{" "}
|
||||
<GasValue value={txData.gasLimit} />
|
||||
<RelativePosition
|
||||
pos={<GasValue value={txData.gasUsed} />}
|
||||
total={<GasValue value={txData.gasLimit} />}
|
||||
/>
|
||||
</div>
|
||||
<PercentageBar
|
||||
perc={
|
||||
|
@ -227,10 +230,11 @@ const Details: React.FC<DetailsProps> = ({
|
|||
</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} / {txData.blockTransactionCount - 1}
|
||||
</span>
|
||||
<InfoRow title="Index in Block">
|
||||
<RelativePosition
|
||||
pos={txData.transactionIndex}
|
||||
total={txData.blockTransactionCount - 1}
|
||||
/>
|
||||
</InfoRow>
|
||||
<InfoRow title="Input Data">
|
||||
<textarea
|
||||
|
|
Loading…
Reference in New Issue