From a62fa1df56fad90bf6209349da659216fcf93458 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 18:51:57 -0300
Subject: [PATCH 1/3] Add block/uncles rewards

---
 src/Block.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 65f62e1..35951b0 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -9,12 +9,16 @@ import Timestamp from "./components/Timestamp";
 import GasValue from "./components/GasValue";
 import BlockLink from "./components/BlockLink";
 import AddressLink from "./components/AddressLink";
+import TransactionValue from "./components/TransactionValue";
 
 type BlockParams = {
   blockNumberOrHash: string;
 };
 
 interface ExtendedBlock extends ethers.providers.Block {
+  blockReward: BigNumber;
+  unclesReward: BigNumber;
+  feeReward: BigNumber;
   size: number;
   sha3Uncles: string;
   stateRoot: string;
@@ -27,21 +31,28 @@ const Block: React.FC = () => {
   const [block, setBlock] = useState<ExtendedBlock>();
   useEffect(() => {
     const readBlock = async () => {
-      let _rawBlock: any;
+      let blockPromise: Promise<any>;
       if (ethers.utils.isHexString(params.blockNumberOrHash, 32)) {
-        _rawBlock = await provider.send("eth_getBlockByHash", [
+        blockPromise = provider.send("eth_getBlockByHash", [
           params.blockNumberOrHash,
           false,
         ]);
       } else {
-        _rawBlock = await provider.send("eth_getBlockByNumber", [
+        blockPromise = provider.send("eth_getBlockByNumber", [
           params.blockNumberOrHash,
           false,
         ]);
       }
+      const [_rawBlock, _rawIssuance] = await Promise.all([
+        blockPromise,
+        provider.send("erigon_issuance", [params.blockNumberOrHash]),
+      ]);
 
       const _block = provider.formatter.block(_rawBlock);
       const extBlock: ExtendedBlock = {
+        blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward),
+        unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward),
+        feeReward: provider.formatter.bigNumber("0"),
         size: provider.formatter.number(_rawBlock.size),
         sha3Uncles: _rawBlock.sha3Uncles,
         stateRoot: _rawBlock.stateRoot,
@@ -101,8 +112,12 @@ const Block: React.FC = () => {
               <AddressLink address={block.miner} />
             </div>
           </InfoRow>
-          <InfoRow title="Block Reward">N/A</InfoRow>
-          <InfoRow title="Uncles Reward">N/A</InfoRow>
+          <InfoRow title="Block Reward">
+            <TransactionValue value={block.blockReward} />
+          </InfoRow>
+          <InfoRow title="Uncles Reward">
+            <TransactionValue value={block.unclesReward} />
+          </InfoRow>
           <InfoRow title="Difficult">
             {ethers.utils.commify(block.difficulty)}
           </InfoRow>

From 78c2555689c3a351728d6f5d77ab31c4a78cda14 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 19:14:03 -0300
Subject: [PATCH 2/3] Calculate and display block fees

---
 src/Block.tsx                       | 21 ++++++++++++++++++---
 src/components/TransactionValue.tsx |  5 ++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/Block.tsx b/src/Block.tsx
index 35951b0..921bacd 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -43,16 +43,24 @@ const Block: React.FC = () => {
           false,
         ]);
       }
-      const [_rawBlock, _rawIssuance] = await Promise.all([
+      const [_rawBlock, _rawIssuance, _rawReceipts] = await Promise.all([
         blockPromise,
         provider.send("erigon_issuance", [params.blockNumberOrHash]),
+        provider.send("eth_getBlockReceipts", [params.blockNumberOrHash]),
       ]);
+      const receipts = (_rawReceipts as any[]).map((r) =>
+        provider.formatter.receipt(r)
+      );
+      const fees = receipts.reduce(
+        (acc, r) => acc.add(r.effectiveGasPrice.mul(r.gasUsed)),
+        BigNumber.from(0)
+      );
 
       const _block = provider.formatter.block(_rawBlock);
       const extBlock: ExtendedBlock = {
         blockReward: provider.formatter.bigNumber(_rawIssuance.blockReward),
         unclesReward: provider.formatter.bigNumber(_rawIssuance.uncleReward),
-        feeReward: provider.formatter.bigNumber("0"),
+        feeReward: fees,
         size: provider.formatter.number(_rawBlock.size),
         sha3Uncles: _rawBlock.sha3Uncles,
         stateRoot: _rawBlock.stateRoot,
@@ -113,7 +121,14 @@ const Block: React.FC = () => {
             </div>
           </InfoRow>
           <InfoRow title="Block Reward">
-            <TransactionValue value={block.blockReward} />
+            <TransactionValue value={block.blockReward.add(block.feeReward)} />
+            {!block.feeReward.isZero() && (
+              <>
+                {" "}
+                (<TransactionValue value={block.blockReward} hideUnit /> +{" "}
+                <TransactionValue value={block.feeReward} hideUnit />)
+              </>
+            )}
           </InfoRow>
           <InfoRow title="Uncles Reward">
             <TransactionValue value={block.unclesReward} />
diff --git a/src/components/TransactionValue.tsx b/src/components/TransactionValue.tsx
index 2a70b04..9b9403c 100644
--- a/src/components/TransactionValue.tsx
+++ b/src/components/TransactionValue.tsx
@@ -5,11 +5,13 @@ import { formatValue } from "./formatter";
 type TransactionValueProps = {
   value: BigNumber;
   decimals?: number;
+  hideUnit?: boolean;
 };
 
 const TransactionValue: React.FC<TransactionValueProps> = ({
   value,
   decimals = 18,
+  hideUnit,
 }) => {
   const formattedValue = formatValue(value, decimals);
 
@@ -18,7 +20,8 @@ const TransactionValue: React.FC<TransactionValueProps> = ({
       className={`text-sm ${value.isZero() ? "text-gray-400" : ""}`}
       title={`${formattedValue} Ether`}
     >
-      <span className={`font-balance`}>{formattedValue}</span> Ether
+      <span className={`font-balance`}>{formattedValue}</span>
+      {!hideUnit && " Ether"}
     </span>
   );
 };

From 6e5ceccbaa3ea3a239fbafd31a2d585b2cbee31a Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 3 Jul 2021 19:15:22 -0300
Subject: [PATCH 3/3] Improve error log

---
 src/Block.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Block.tsx b/src/Block.tsx
index 921bacd..058ac39 100644
--- a/src/Block.tsx
+++ b/src/Block.tsx
@@ -84,6 +84,7 @@ const Block: React.FC = () => {
     try {
       return block && ethers.utils.toUtf8String(block.extraData);
     } catch (err) {
+      console.error("Error while converting block extra data to string");
       console.error(err);
     }
   }, [block]);