fixes

pages/api/blocks/index.ts

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

ui/blocks/BlocksContent.tsx

-import { Box, Text, Show, Alert } from '@chakra-ui/react';
+import { Box, Text, Show, Alert, Skeleton } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -21,15 +21,18 @@ const BlocksContent = ({ type }: Props) => {
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, BlocksResponse>(
     [ 'blocks', type ],
-    async() => await fetch(`/api/blocks?type=${ type }`),
+    async() => await fetch(`/api/blocks${ type ? `?type=${ type }` : '' }`),
   );
 
   if (isLoading) {
     return (
       <>
-        <Show below="lg"><BlocksSkeletonMobile/></Show>
-        <Show above="lg">
-          <SkeletonTable columns={ [ '124px', '112px', '144px', '64px', '40%', '30%', '30%' ] }/>
+        <Show below="lg" key="skeleton-mobile">
+          <BlocksSkeletonMobile/>
+        </Show>
+        <Show above="lg" key="skeleton-desktop">
+          <Skeleton h={ 6 } mb={ 8 } w="150px"/>
+          <SkeletonTable columns={ [ '125px', '112px', '21%', '64px', '35%', '22%', '22%' ] }/>
         </Show>
       </>
     );
@@ -45,9 +48,9 @@ const BlocksContent = ({ type }: Props) => {
 
   return (
     <>
-      <Text>Total of 15,044,883 blocks</Text>
-      <Show below="lg"><BlocksList data={ data.items }/></Show>
-      <Show above="lg"><BlocksTable data={ data.items }/></Show>
+      <Text>Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
+      <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
         <Pagination currentPage={ 1 }/>
       </Box>

ui/blocks/BlocksListItem.tsx

 import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
-import { utils } from 'ethers';
+import { constants, utils } from 'ethers';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -67,7 +67,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
         <Text fontWeight={ 500 }>Burnt fees</Text>
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" ml={ 2 }/>
         <Text variant="secondary" ml={ 1 }>{ utils.formatUnits(burntFees) }</Text>
-        <Utilization ml={ 4 } value={ burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
+        <Utilization ml={ 4 } value={ txFees.eq(constants.Zero) ? 1 : burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
       </Flex>
     </AccountListItemMobile>
   );

ui/blocks/BlocksTable.tsx

@@ -18,13 +18,13 @@ const BlocksTable = ({ data }: Props) => {
       <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
         <Thead>
           <Tr>
-            <Th width="124px">Block</Th>
+            <Th width="125px">Block</Th>
             <Th width="112px">Size</Th>
-            <Th width="144px">Miner</Th>
+            <Th width="21%" minW="144px">Miner</Th>
             <Th width="64px" isNumeric>Txn</Th>
-            <Th width="40%">Gas used</Th>
-            <Th width="30%">Reward { network?.currency }</Th>
-            <Th width="30%">Burnt fees { network?.currency }</Th>
+            <Th width="35%">Gas used</Th>
+            <Th width="22%">Reward { network?.currency }</Th>
+            <Th width="22%">Burnt fees { network?.currency }</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/blocks/BlocksTableItem.tsx

 import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
-import { utils } from 'ethers';
+import { constants, utils } from 'ethers';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -27,7 +27,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
     <Tr>
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center">
-          { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
+          { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor } flexShrink={ 0 }/> }
           <Link
             fontWeight={ 600 }
             href={ link('block_index', { id: String(data.height) }) }
@@ -39,7 +39,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
       </Td>
       <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
       <Td fontSize="sm">
-        <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant"/>
+        <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" display="inline-flex" maxW="100%"/>
       </Td>
       <Td isNumeric fontSize="sm">{ data.tx_count }</Td>
       <Td fontSize="sm">
@@ -56,11 +56,11 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
       <Td fontSize="sm">
         <Flex alignItems="center" columnGap={ 1 }>
           <Icon as={ flameIcon } boxSize={ 5 } color={ useColorModeValue('gray.500', 'inherit') }/>
-          { utils.formatUnits(burntFees) }
+          { Number(utils.formatUnits(burntFees)).toFixed(8) }
         </Flex>
         <Tooltip label="Burnt fees / Txn fees * 100%">
-          <Box>
-            <Utilization mt={ 2 } value={ burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
+          <Box w="min-content">
+            <Utilization mt={ 2 } value={ txFees.eq(constants.Zero) ? 1 : burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
           </Box>
         </Tooltip>
       </Td>