reorg block fix (#2936)

Author: isstuev

types/api/block.ts

@@ -23,15 +23,15 @@ export interface Block {
   transactions_count: number;
   internal_transactions_count: number;
   miner: AddressParam;
-  size: number;
+  size?: number;
   hash: string;
   parent_hash: string;
-  difficulty: string;
-  total_difficulty: string | null;
+  difficulty?: string;
+  total_difficulty?: string | null;
   gas_used: string | null;
   gas_limit: string;
   nonce: string;
-  base_fee_per_gas: string | null;
+  base_fee_per_gas?: string | null;
   burnt_fees: string | null;
   priority_fee: string | null;
   extra_data: string | null;

ui/block/BlockDetails.tsx

@@ -224,17 +224,21 @@ const BlockDetails = ({ query }: Props) => {
         </>
       ) }
 
-      <DetailedInfo.ItemLabel
-        hint="Size of the block in bytes"
-        isLoading={ isPlaceholderData }
-      >
-        Size
-      </DetailedInfo.ItemLabel>
-      <DetailedInfo.ItemValue>
-        <Skeleton loading={ isPlaceholderData }>
-          { data.size.toLocaleString() }
-        </Skeleton>
-      </DetailedInfo.ItemValue>
+      { data.size && (
+        <>
+          <DetailedInfo.ItemLabel
+            hint="Size of the block in bytes"
+            isLoading={ isPlaceholderData }
+          >
+            Size
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue>
+            <Skeleton loading={ isPlaceholderData }>
+              { data.size.toLocaleString() }
+            </Skeleton>
+          </DetailedInfo.ItemValue>
+        </>
+      ) }
 
       <DetailedInfo.ItemLabel
         hint="Date & time at which block was produced."
@@ -623,14 +627,18 @@ const BlockDetails = ({ query }: Props) => {
           </>
         ) }
 
-        <DetailedInfo.ItemLabel
-          hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
-        >
-          Difficulty
-        </DetailedInfo.ItemLabel>
-        <DetailedInfo.ItemValue overflow="hidden">
-          <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
-        </DetailedInfo.ItemValue>
+        { data.difficulty && (
+          <>
+            <DetailedInfo.ItemLabel
+              hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time` }
+            >
+              Difficulty
+            </DetailedInfo.ItemLabel>
+            <DetailedInfo.ItemValue overflow="hidden">
+              <HashStringShortenDynamic hash={ BigNumber(data.difficulty).toFormat() }/>
+            </DetailedInfo.ItemValue>
+          </>
+        ) }
 
         { data.total_difficulty && (
           <>

ui/block/useBlockQuery.tsx

@@ -71,7 +71,7 @@ export default function useBlockQuery({ heightOrHash }: Params): BlockQuery {
         size: Number(block.size),
         hash: block.hash,
         parent_hash: block.parentHash,
-        difficulty: block.difficulty.toString(),
+        difficulty: block.difficulty?.toString() ?? null,
         total_difficulty: block.totalDifficulty?.toString() ?? null,
         gas_used: block.gasUsed.toString(),
         gas_limit: block.gasLimit.toString(),

ui/blocks/BlocksListItem.tsx

@@ -38,7 +38,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
   const totalReward = getBlockTotalReward(data);
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.transaction_fees || 0);
-  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas || null);
 
   return (
     <ListItemMobile rowGap={ 3 } key={ String(data.height) } animation={ animation }>
@@ -66,12 +66,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
           display="inline-block"
         />
       </Flex>
-      <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Size</Text>
-        <Skeleton loading={ isLoading } display="inline-block" color="text.secondary">
-          <span>{ data.size.toLocaleString() } bytes</span>
-        </Skeleton>
-      </Flex>
+      { data.size && (
+        <Flex columnGap={ 2 }>
+          <Text fontWeight={ 500 }>Size</Text>
+          <Skeleton loading={ isLoading } display="inline-block" color="text.secondary">
+            <span>{ data.size?.toLocaleString() } bytes</span>
+          </Skeleton>
+        </Flex>
+      ) }
       { !config.UI.views.block.hiddenFields?.miner && (
         <Flex columnGap={ 2 } w="100%">
           <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>

ui/blocks/BlocksTableItem.tsx

@@ -35,7 +35,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
   const totalReward = getBlockTotalReward(data);
   const burntFees = BigNumber(data.burnt_fees || 0);
   const txFees = BigNumber(data.transaction_fees || 0);
-  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas);
+  const baseFeeValue = getBaseFeeValue(data.base_fee_per_gas || null);
 
   return (
     <TableRow animation={ animation }>
@@ -69,7 +69,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
       </TableCell>
       <TableCell >
         <Skeleton loading={ isLoading } display="inline-block">
-          { data.size.toLocaleString() }
+          { data.size?.toLocaleString() || 'N/A' }
         </Skeleton>
       </TableCell>
       { !config.UI.views.block.hiddenFields?.miner && (