block data

lib/block/getBlockReward.ts

+import { utils } from 'ethers';
+
+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 staticReward = totalReward.sub(txFees).add(burntFees);
+
+  return {
+    totalReward,
+    staticReward,
+    txFees,
+    burntFees,
+  };
+}

pages/api/blocks/[id]/index.ts

+import type { NextApiRequest } from 'next';
+
+import handler from 'lib/api/handler';
+
+const getUrl = (req: NextApiRequest) => {
+  return `/v2/blocks/${ req.query.id }`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/block.ts

@@ -9,10 +9,10 @@ export interface Block {
   size: number;
   hash: string;
   parent_hash: string;
-  difficulty: number;
-  total_difficulty: number;
-  gas_used: number;
-  gas_limit: number;
+  difficulty: string;
+  total_difficulty: string;
+  gas_used: string;
+  gas_limit: string;
   nonce: number;
   base_fee_per_gas: number | null;
   burnt_fees: number | null;

types/api/reward.ts

 export interface Reward {
   reward: number;
-  type: 'Miner Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward';
+  type: 'Miner Reward' | 'Validator Reward' | 'Emission Reward' | 'Chore Reward' | 'Uncle Reward';
 }

ui/block/details/BlockDetailsSkeleton.tsx

+import { Grid, GridItem, Skeleton, SkeletonCircle } from '@chakra-ui/react';
+import React from 'react';
+
+const SkeletonRow = ({ w = '100%' }: { w?: string }) => (
+  <>
+    <GridItem display="flex" columnGap={ 2 } w={{ base: '50%', lg: 'auto' }} _notFirst={{ mt: { base: 3, lg: 0 } }}>
+      <SkeletonCircle h={ 5 } w={ 5 }/>
+      <Skeleton flexGrow={ 1 } h={ 5 } borderRadius="full"/>
+    </GridItem>
+    <GridItem pl={{ base: 7, lg: 0 }}>
+      <Skeleton h={ 5 } borderRadius="full" w={{ base: '100%', lg: w }}/>
+    </GridItem>
+  </>
+);
+
+const BlockDetailsSkeleton = () => {
+  const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
+
+  return (
+    <Grid columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
+      <SkeletonRow w="25%"/>
+      <SkeletonRow w="25%"/>
+      <SkeletonRow w="65%"/>
+      <SkeletonRow w="25%"/>
+      <SkeletonRow/>
+      <SkeletonRow/>
+      { sectionGap }
+      <SkeletonRow w="50%"/>
+      <SkeletonRow w="25%"/>
+      <SkeletonRow w="50%"/>
+      <SkeletonRow w="50%"/>
+      <SkeletonRow w="50%"/>
+      { sectionGap }
+      <GridItem colSpan={{ base: undefined, lg: 2 }}>
+        <Skeleton h={ 5 } borderRadius="full" w="100px"/>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default BlockDetailsSkeleton;

ui/shared/GasUsedToTargetRatio.tsx

@@ -2,13 +2,14 @@ import { Stat, StatArrow, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
-  used: number;
-  target: number;
+  used?: number;
+  target?: number;
+  value?: number;
   className?: string;
 }
 
-const GasUsedToTargetRatio = ({ used, target, className }: Props) => {
-  const percentage = (used / target - 1) * 100;
+const GasUsedToTargetRatio = ({ used, target, value, className }: Props) => {
+  const percentage = value || ((used || 0) / (target || 0) - 1) * 100;
 
   return (
     <Stat className={ className }>