a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add percentage position component

This commit is contained in:
Willian Mitsuda 2021-08-01 08:25:33 -03:00
parent e78447f4b6
commit 11089be171
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/PercentagePosition.tsx Normal file
View File

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

6
src/transaction/Details.tsx
View File

@ -24,6 +24,7 @@ import { TransactionData, InternalOperation } from "../types";
import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition";
type DetailsProps = {
txData: TransactionData;
@ -231,10 +232,15 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Ether Price">N/A</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">
<textarea