From 11089be171c91346eca4c8a78afcc03a3cf8b5ec Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 1 Aug 2021 08:25:33 -0300
Subject: [PATCH] Add percentage position component

---
 src/components/PercentagePosition.tsx | 23 +++++++++++++++++++++++
 src/transaction/Details.tsx           | 14 ++++++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PercentagePosition.tsx

diff --git a/src/components/PercentagePosition.tsx b/src/components/PercentagePosition.tsx
new file mode 100644
index 0000000..c3efe8e
--- /dev/null
+++ b/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);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 25dddb5..7374a29 100644
--- a/src/transaction/Details.tsx
+++ b/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">
-        <RelativePosition
-          pos={txData.transactionIndex}
-          total={txData.blockTransactionCount - 1}
-        />
+        <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