Merge branch 'feature/issuance' into develop

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,36 @@ 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, _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: fees,
         size: provider.formatter.number(_rawBlock.size),
         sha3Uncles: _rawBlock.sha3Uncles,
         stateRoot: _rawBlock.stateRoot,
@@ -65,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]);
@@ -101,8 +121,19 @@ 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.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} />
+          </InfoRow>
           <InfoRow title="Difficult">
             {ethers.utils.commify(block.difficulty)}
           </InfoRow>

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