Collapse block and position fields

This commit is contained in:
Willian Mitsuda 2021-08-01 08:40:43 -03:00
parent 11089be171
commit 62b22496cb
1 changed files with 21 additions and 15 deletions

View File

@ -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,10 +63,26 @@ 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">
<BlockLink blockTag={txData.blockNumber} /> <div className="flex space-x-2 items-baseline">
<BlockConfirmations confirmations={txData.confirmations} /> <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} />
<BlockConfirmations confirmations={txData.confirmations} />
</div>
</div> </div>
</InfoRow> </InfoRow>
<InfoRow title="Timestamp"> <InfoRow title="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"