genesis block

lib/block/getBlockReward.ts

@@ -5,7 +5,13 @@ import type { Block } from 'types/api/block';
 export default function getBlockReward(block: Block) {
   const txFees = utils.parseUnits(block.tx_fees || '0', 'wei');
   const burntFees = utils.parseUnits(String(block.burnt_fees || '0'), 'wei');
-  const totalReward = utils.parseUnits(String(block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward || '0'), 'wei');
+  const totalReward = utils.parseUnits(
+    String(
+      block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward ||
+      '0',
+    ),
+    'wei',
+  );
   const staticReward = totalReward.sub(txFees).add(burntFees);
 
   return {

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import { utils } from 'ethers';
+import { utils, constants } from 'ethers';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
@@ -75,12 +75,13 @@ const BlockDetails = () => {
         hint="The block height of a particular block is defined as the number of blocks preceding it in the blockchain."
       >
         { data.height }
+        { data.height === 0 && <Text whiteSpace="pre"> - Genesis Block</Text> }
         <PrevNext
           ml={ 6 }
           onClick={ handlePrevNextClick }
           prevLabel="View previous block"
           nextLabel="View next block"
-          isPrevDisabled={ router.query.id === '0' }
+          isPrevDisabled={ data.height === 0 }
         />
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -116,6 +117,7 @@ const BlockDetails = () => {
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
+      { !totalReward.eq(constants.Zero) && (
         <DetailsInfoItem
           title="Block reward"
           hint={
@@ -125,20 +127,31 @@ const BlockDetails = () => {
           columnGap={ 1 }
         >
           <Text>{ utils.formatUnits(totalReward) } { network?.currency }</Text>
+          { (!txFees.eq(constants.Zero) || !burntFees.eq(constants.Zero)) && (
             <Text variant="secondary" whiteSpace="break-spaces">(
               <Tooltip label="Static block reward">
                 <span>{ utils.formatUnits(staticReward) }</span>
               </Tooltip>
+              { !txFees.eq(constants.Zero) && (
+                <>
                   { space }+{ space }
                   <Tooltip label="Txn fees">
                     <span>{ utils.formatUnits(txFees) }</span>
                   </Tooltip>
+                </>
+              ) }
+              { !burntFees.eq(constants.Zero) && (
+                <>
                   { space }-{ space }
                   <Tooltip label="Burnt fees">
                     <span>{ utils.formatUnits(burntFees) }</span>
                   </Tooltip>
+                </>
+              ) }
         )</Text>
+          ) }
         </DetailsInfoItem>
+      ) }
 
       { sectionGap }
 
@@ -172,7 +185,6 @@ const BlockDetails = () => {
           </Text>
         </DetailsInfoItem>
       ) }
-      { data.burnt_fees && (
       <DetailsInfoItem
         title="Burnt fees"
         hint={
@@ -182,7 +194,7 @@ const BlockDetails = () => {
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
         <Text ml={ 1 }>{ utils.formatUnits(burntFees) } { network?.currency }</Text>
-          { data.tx_fees && (
+        { !txFees.eq(constants.Zero) && (
           <Tooltip label="Burnt fees / Txn fees * 100%">
             <Box>
               <Utilization
@@ -193,7 +205,6 @@ const BlockDetails = () => {
           </Tooltip>
         ) }
       </DetailsInfoItem>
-      ) }
       { /* api doesn't support extra data yet */ }
       { /* <DetailsInfoItem
         title="Extra data"
@@ -272,7 +283,9 @@ const BlockDetails = () => {
           >
             { data.nonce }
           </DetailsInfoItem>
-          { data.rewards?.map(({ type, reward }) => (
+          { data.rewards
+            ?.filter(({ type }) => type !== 'Validator Reward' && type !== 'Miner Reward')
+            .map(({ type, reward }) => (
               <DetailsInfoItem
                 key={ type }
                 title={ type }