Extract and apply relative position component

src/components/RelativePosition.tsx

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

src/transaction/Details.tsx

@@ -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} /> /{" "}
+            <RelativePosition
-            <GasValue value={txData.gasLimit} />
+              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">
+      <InfoRow title="Index in Block">
-        <span className="rounded px-2 py-1 bg-gray-100 text-gray-500 text-xs">
+        <RelativePosition
-          {txData.transactionIndex} / {txData.blockTransactionCount - 1}
+          pos={txData.transactionIndex}
-        </span>
+          total={txData.blockTransactionCount - 1}
+        />
       </InfoRow>
       <InfoRow title="Input Data">
         <textarea