Collapse block and position fields
This commit is contained in:
parent
11089be171
commit
62b22496cb
|
@ -3,6 +3,7 @@ import { ethers } from "ethers";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import {
|
import {
|
||||||
faCheckCircle,
|
faCheckCircle,
|
||||||
|
faCube,
|
||||||
faTimesCircle,
|
faTimesCircle,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
import ContentFrame from "../ContentFrame";
|
import ContentFrame from "../ContentFrame";
|
||||||
|
@ -62,11 +63,27 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
<InfoRow title="Block">
|
<InfoRow title="Position in Block">
|
||||||
<div className="flex items-baseline space-x-2">
|
<div className="flex items-baseline space-x-5">
|
||||||
|
<div className="flex space-x-2 items-baseline">
|
||||||
|
<RelativePosition
|
||||||
|
pos={txData.transactionIndex}
|
||||||
|
total={txData.blockTransactionCount - 1}
|
||||||
|
/>
|
||||||
|
<PercentagePosition
|
||||||
|
perc={
|
||||||
|
txData.transactionIndex / (txData.blockTransactionCount - 1)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex space-x-1 items-baseline">
|
||||||
|
<span className="text-orange-500">
|
||||||
|
<FontAwesomeIcon icon={faCube} />
|
||||||
|
</span>
|
||||||
<BlockLink blockTag={txData.blockNumber} />
|
<BlockLink blockTag={txData.blockNumber} />
|
||||||
<BlockConfirmations confirmations={txData.confirmations} />
|
<BlockConfirmations confirmations={txData.confirmations} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</InfoRow>
|
</InfoRow>
|
||||||
<InfoRow title="Timestamp">
|
<InfoRow title="Timestamp">
|
||||||
<Timestamp value={txData.timestamp} />
|
<Timestamp value={txData.timestamp} />
|
||||||
|
@ -231,17 +248,6 @@ const Details: React.FC<DetailsProps> = ({
|
||||||
</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>
|
||||||
<InfoRow title="Index in Block">
|
|
||||||
<div className="flex space-x-3 items-baseline">
|
|
||||||
<RelativePosition
|
|
||||||
pos={txData.transactionIndex}
|
|
||||||
total={txData.blockTransactionCount - 1}
|
|
||||||
/>
|
|
||||||
<PercentagePosition
|
|
||||||
perc={txData.transactionIndex / (txData.blockTransactionCount - 1)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</InfoRow>
|
|
||||||
<InfoRow title="Input Data">
|
<InfoRow title="Input Data">
|
||||||
<textarea
|
<textarea
|
||||||
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
|
||||||
|
|
Loading…
Reference in New Issue