From e214117f47fab35b8e58e0ac6ea2755df6efea5f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 04:40:38 -0300
Subject: [PATCH] Extract PercentageBar component; apply percentage bar to tx
 gas usage

---
 src/Block.tsx                    | 13 ++-----------
 src/components/PercentageBar.tsx | 21 +++++++++++++++++++++
 src/transaction/Details.tsx      | 10 ++++++++--
 3 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 src/components/PercentageBar.tsx

diff --git a/src/Block.tsx b/src/Block.tsx
index afa68f4..83ab187 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -8,6 +8,7 @@ import ContentFrame from "./ContentFrame";
 import InfoRow from "./components/InfoRow";
 import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
+import PercentageBar from "./components/PercentageBar";
 import BlockLink from "./components/BlockLink";
 import DecoratedAddressLink from "./components/DecoratedAddressLink";
 import TransactionValue from "./components/TransactionValue";
@@ -133,17 +134,7 @@ const Block: React.FC = () => {
                 <GasValue value={block.gasUsed} /> /{" "}
                 <GasValue value={block.gasLimit} />
               </div>
-              <div className="self-center w-40 border rounded border-gray-200">
-                <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
-                  <div
-                    className="absolute top-0 right-0 bg-white h-full rounded-r"
-                    style={{ width: `${100 - gasUsedPerc!}%` }}
-                  ></div>
-                  <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
-                    <span className="m-auto">{gasUsedPerc}%</span>
-                  </div>
-                </div>
-              </div>
+              <PercentageBar perc={gasUsedPerc!} />
             </div>
           </InfoRow>
           <InfoRow title="Extra Data">
diff --git a/src/components/PercentageBar.tsx b/src/components/PercentageBar.tsx
new file mode 100644
index 0000000..a868784
--- /dev/null
+++ b/src/components/PercentageBar.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+type PercentageBarProps = {
+  perc: number;
+};
+
+const PercentageBar: React.FC<PercentageBarProps> = ({ perc }) => (
+  <div className="self-center w-40 border rounded border-gray-200">
+    <div className="w-full h-5 rounded bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 relative">
+      <div
+        className="absolute top-0 right-0 bg-white h-full rounded-r"
+        style={{ width: `${100 - perc}%` }}
+      ></div>
+      <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+        <span className="m-auto">{perc}%</span>
+      </div>
+    </div>
+  </div>
+);
+
+export default React.memo(PercentageBar);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 71cef91..2619204 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -20,6 +20,7 @@ import GasValue from "../components/GasValue";
 import FormattedBalance from "../components/FormattedBalance";
 import TokenTransferItem from "../TokenTransferItem";
 import { TransactionData, InternalOperation } from "../types";
+import PercentageBar from "../components/PercentageBar";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -171,8 +172,13 @@ const Details: React.FC<DetailsProps> = ({
       </div>
     </InfoRow>
     <InfoRow title="Gas Used/Limit">
-      <GasValue value={txData.gasUsed} /> / <GasValue value={txData.gasLimit} />{" "}
-      ({(txData.gasUsedPerc * 100).toFixed(2)}%)
+      <div className="flex space-x-3 items-baseline">
+        <div>
+          <GasValue value={txData.gasUsed} /> /{" "}
+          <GasValue value={txData.gasLimit} />
+        </div>
+        <PercentageBar perc={Math.round(txData.gasUsedPerc * 10000) / 100} />
+      </div>
     </InfoRow>
     <InfoRow title="Ether Price">N/A</InfoRow>
     <InfoRow title="Nonce">{txData.nonce}</InfoRow>