From 4807c835dafd0519e583e5a88dfcdd487896339c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 8 Aug 2021 02:36:26 -0300
Subject: [PATCH 1/2] Rename props

---
 src/components/PercentageGauge.tsx | 18 +++++++++---------
 src/transaction/RewardSplit.tsx    | 12 ++++++------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/PercentageGauge.tsx b/src/components/PercentageGauge.tsx
index 23af8f7..bba06a1 100644
--- a/src/components/PercentageGauge.tsx
+++ b/src/components/PercentageGauge.tsx
@@ -2,29 +2,29 @@ import React from "react";
 
 type PercentageGaugeProps = {
   perc: number;
-  bgFull: string;
-  bgPerc: string;
-  textPerc: string;
+  bgColor: string;
+  bgColorPerc: string;
+  textColor: string;
 };
 
 const PercentageGauge: React.FC<PercentageGaugeProps> = ({
   perc,
-  bgFull,
-  bgPerc,
-  textPerc,
+  bgColor,
+  bgColorPerc,
+  textColor,
 }) => (
   <div className="w-60 h-6 border-l-2 border-gray-400 relative">
     <div className="flex absolute w-full h-full">
-      <div className={`my-auto h-5 rounded-r-lg w-full ${bgFull}`}></div>
+      <div className={`my-auto h-5 rounded-r-lg w-full ${bgColor}`}></div>
     </div>
     <div className="flex absolute w-full h-full">
       <div
-        className={`my-auto h-5 rounded-r-lg ${bgPerc}`}
+        className={`my-auto h-5 rounded-r-lg ${bgColorPerc}`}
         style={{ width: `${perc}%` }}
       ></div>
     </div>
     <div
-      className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textPerc}`}
+      className={`flex absolute w-full h-full mix-blend-multiply text-sans ${textColor}`}
     >
       <span className="m-auto">{perc}%</span>
     </div>
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index 9005d12..7ff4a57 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -21,9 +21,9 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
       <div className="grid grid-cols-2 gap-x-2 gap-y-1 items-center text-sm">
         <PercentageGauge
           perc={burntPerc}
-          bgFull="bg-orange-100"
-          bgPerc="bg-orange-500"
-          textPerc="text-orange-800"
+          bgColor="bg-orange-100"
+          bgColorPerc="bg-orange-500"
+          textColor="text-orange-800"
         />
         <div className="flex items-baseline space-x-1">
           <span className="flex space-x-1 text-orange-500">
@@ -40,9 +40,9 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
         </div>
         <PercentageGauge
           perc={100 - burntPerc}
-          bgFull="bg-yellow-100"
-          bgPerc="bg-yellow-300"
-          textPerc="text-yellow-700"
+          bgColor="bg-yellow-100"
+          bgColorPerc="bg-yellow-300"
+          textColor="text-yellow-700"
         />
         <div className="flex items-baseline space-x-1">
           <span className="flex space-x-1">

From 97d10740f55589d23d018e914b3f75d636e5bc02 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 8 Aug 2021 02:54:42 -0300
Subject: [PATCH 2/2] Fix rounding digits on miner reward percentage

---
 src/transaction/RewardSplit.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index 7ff4a57..23c527d 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -10,11 +10,13 @@ type RewardSplitProps = {
 };
 
 const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
+  const paidFees = txData.gasPrice.mul(txData.gasUsed);
   const burntFees = txData.blockBaseFeePerGas!.mul(txData.gasUsed);
-  const minerReward = txData.gasPrice.mul(txData.gasUsed).sub(burntFees);
+
+  const minerReward = paidFees.sub(burntFees);
   const burntPerc =
-    burntFees.mul(10000).div(txData.gasPrice.mul(txData.gasUsed)).toNumber() /
-    100;
+    Math.round(burntFees.mul(10000).div(paidFees).toNumber()) / 100;
+  const minerPerc = Math.round((100 - burntPerc) * 100) / 100;
 
   return (
     <div className="inline-block">
@@ -39,7 +41,7 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
           </span>
         </div>
         <PercentageGauge
-          perc={100 - burntPerc}
+          perc={minerPerc}
           bgColor="bg-yellow-100"
           bgColorPerc="bg-yellow-300"
           textColor="text-yellow-700"