Blocks list: add base fee

docs/ENVS.md

@@ -219,6 +219,7 @@ Settings for meta tags, OG tags and SEO
 ##### Block fields list
 | Id | Description |
 | --- | --- |
+| `base_fee` | Base fee |
 | `burnt_fees` | Burnt fees |
 | `total_reward` | Total block reward |
 | `nonce` | Block nonce |

types/views/block.ts

@@ -1,6 +1,7 @@
 import type { ArrayElement } from 'types/utils';
 
 export const BLOCK_FIELDS_IDS = [
+  'base_fee',
   'burnt_fees',
   'total_reward',
   'nonce',

ui/blocks/BlocksListItem.tsx

@@ -21,6 +21,8 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import { getBaseFeeValue } from './utils';
+
 interface Props {
   data: Block;
   isLoading?: boolean;
@@ -33,6 +35,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
   const totalReward = getBlockTotalReward(data);
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.tx_fees || 0);
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
 
   return (
     <ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
@@ -124,6 +127,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           </Flex>
         </Box>
       ) }
+      { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && baseFeeValue && (
+        <Flex columnGap={ 2 }>
+          <Text fontWeight={ 500 }>Base fee</Text>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary">
+            <span>{ baseFeeValue }</span>
+          </Skeleton>
+        </Flex>
+      ) }
     </ListItemMobile>
   );
 };

ui/blocks/BlocksTable.tsx

@@ -53,6 +53,8 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
               <Th width={ `${ REWARD_COL_WEIGHT / widthBase * 100 }%` }>Reward { currencyUnits.ether }</Th> }
             { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees &&
               <Th width={ `${ FEES_COL_WEIGHT / widthBase * 100 }%` }>Burnt fees { currencyUnits.ether }</Th> }
+            { !isRollup && !config.UI.views.block.hiddenFields?.base_fee &&
+              <Th width="150px" isNumeric>Base fee</Th> }
           </Tr>
         </Thead>
         <Tbody>

ui/blocks/BlocksTableItem.tsx

@@ -18,6 +18,8 @@ import LinkInternal from 'ui/shared/links/LinkInternal';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
+import { getBaseFeeValue } from './utils';
+
 interface Props {
   data: Block;
   isLoading?: boolean;
@@ -33,6 +35,8 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
 
   const burntFeesIconColor = useColorModeValue('gray.500', 'inherit');
 
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
+
   return (
     <Tr
       as={ motion.tr }
@@ -129,6 +133,13 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           </Tooltip>
         </Td>
       ) }
+      { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && Boolean(baseFeeValue) && (
+        <Td fontSize="sm" isNumeric>
+          <Skeleton isLoaded={ !isLoading } display="inline-block">
+            { baseFeeValue }
+          </Skeleton>
+        </Td>
+      ) }
     </Tr>
   );
 };

ui/blocks/utils.ts

@@ -0,0 +1,13 @@
+import getValueWithUnit from 'lib/getValueWithUnit';
+import { currencyUnits } from 'lib/units';
+
+export const getBaseFeeValue = (baseFee: string | null) => {
+  if (!baseFee) {
+    return null;
+  }
+  const valGwei = getValueWithUnit(baseFee, 'gwei');
+  if (valGwei.isGreaterThanOrEqualTo(0.0001)) {
+    return `${ valGwei.toFormat(4) } ${ currencyUnits.gwei }`;
+  }
+  return `${ getValueWithUnit(baseFee, 'wei').toFormat() } ${ currencyUnits.wei }`;
+};