Extract and apply relative position component

This commit is contained in:
Willian Mitsuda 2021-08-01 07:41:19 -03:00
parent 07e496f476
commit e78447f4b6
2 changed files with 25 additions and 6 deletions

View File

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

View File

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