zero gas blocks

types/api/block.ts

@@ -13,7 +13,7 @@ export interface Block {
   parent_hash: string;
   difficulty: string;
   total_difficulty: string;
-  gas_used: string;
+  gas_used: string | null;
   gas_limit: string;
   nonce: number;
   base_fee_per_gas: number | null;

ui/blocks/BlocksListItem.tsx

@@ -55,8 +55,8 @@ const BlocksListItem = ({ data, isPending }: Props) => {
       <Box>
         <Text fontWeight={ 500 }>Gas used</Text>
         <Flex columnGap={ 4 }>
-          <Text variant="secondary">{ BigNumber(data.gas_used).toFormat() }</Text>
-          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used).div(BigNumber(data.gas_limit)).toNumber() }/>
+          <Text variant="secondary">{ BigNumber(data.gas_used || 0).toFormat() }</Text>
+          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() }/>
           <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Box>

ui/blocks/BlocksTableItem.tsx

@@ -46,9 +46,9 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
       </Td>
       <Td isNumeric fontSize="sm">{ data.tx_count }</Td>
       <Td fontSize="sm">
-        <Box>{ BigNumber(data.gas_used).toFormat() }</Box>
+        <Box>{ BigNumber(data.gas_used || 0).toFormat() }</Box>
         <Flex mt={ 2 }>
-          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
+          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
           <GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Td>

ui/shared/Utilization.tsx

 import { Box, Flex, Text, chakra, useColorModeValue } from '@chakra-ui/react';
+import clamp from 'lodash/clamp';
 import React from 'react';
 
 interface Props {
@@ -10,7 +11,7 @@ interface Props {
 const WIDTH = 50;
 
 const Utilization = ({ className, value, colorScheme = 'green' }: Props) => {
-  const valueString = (value * 100).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
+  const valueString = (clamp(value * 100, 0, 100)).toLocaleString('en', { maximumFractionDigits: 2 }) + '%';
   const colorGrayScheme = useColorModeValue('gray.500', 'gray.500');
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';