Add percentage position component

src/components/PercentagePosition.tsx

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

src/transaction/Details.tsx

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