add withdrawals to block details

mocks/blocks/block.ts

@@ -47,7 +47,6 @@ export const base: Block = {
   tx_fees: '26853607500000000',
   type: 'block',
   uncles_hashes: [],
-  has_beacon_chain_withdrawals: false,
 };
 
 export const genesis: Block = {
@@ -84,7 +83,6 @@ export const genesis: Block = {
   tx_fees: '0',
   type: 'block',
   uncles_hashes: [],
-  has_beacon_chain_withdrawals: false,
 };
 
 export const base2: Block = {

stubs/block.ts

@@ -14,7 +14,6 @@ export const BLOCK: Block = {
   gas_target_percentage: 55.79,
   gas_used: '6631036',
   gas_used_percentage: 22.10,
-  has_beacon_chain_withdrawals: null,
   hash: BLOCK_HASH,
   height: 8988736,
   miner: ADDRESS_PARAMS,

types/api/block.ts

@@ -10,7 +10,6 @@ export interface Block {
   tx_count: number;
   miner: AddressParam;
   size: number;
-  has_beacon_chain_withdrawals: boolean | null;
   hash: string;
   parent_hash: string;
   difficulty: string;
@@ -30,6 +29,7 @@ export interface Block {
   type: BlockType;
   tx_fees: string | null;
   uncles_hashes: Array<string>;
+  withdrawals_count?: number;
 }
 
 export interface BlocksResponse {

ui/block/BlockDetails.tsx

@@ -180,6 +180,19 @@ const BlockDetails = ({ query }: Props) => {
           </LinkInternal>
         </Skeleton>
       </DetailsInfoItem>
+      { appConfig.beaconChain.hasBeaconChain && Boolean(data.withdrawals_count) && (
+        <DetailsInfoItem
+          title="Withdrawals"
+          hint="The number of beacon withdrawals in the block"
+          isLoading={ isPlaceholderData }
+        >
+          <Skeleton isLoaded={ !isPlaceholderData }>
+            <LinkInternal href={ route({ pathname: '/block/[height]', query: { height: heightOrHash, tab: 'withdrawals' } }) }>
+              { data.withdrawals_count } withdrawal{ data.withdrawals_count === 1 ? '' : 's' }
+            </LinkInternal>
+          </Skeleton>
+        </DetailsInfoItem>
+      ) }
       <DetailsInfoItem
         title={ appConfig.network.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
         hint="A block producer who successfully included the block onto the blockchain"

ui/pages/Block.tsx

@@ -81,7 +81,7 @@ const BlockPageContent = () => {
   const tabs: Array<RoutedTab> = React.useMemo(() => ([
     { id: 'index', title: 'Details', component: <BlockDetails query={ blockQuery }/> },
     { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
-    appConfig.beaconChain.hasBeaconChain && blockQuery.data?.has_beacon_chain_withdrawals ?
+    appConfig.beaconChain.hasBeaconChain && Boolean(blockQuery.data?.withdrawals_count) ?
       { id: 'withdrawals', title: 'Withdrawals', component: <BlockWithdrawals blockWithdrawalsQuery={ blockWithdrawalsQuery }/> } :
       null,
   ].filter(Boolean)), [ blockQuery, blockTxsQuery, blockWithdrawalsQuery ]);