blocks page and alert fixes

lib/block/getBlockTotalReward.ts

@@ -9,5 +9,5 @@ export default function getBlockTotalReward(block: Block) {
     ?.map(({ reward }) => BigNumber(reward))
     .reduce((result, item) => result.plus(item), ZERO) || ZERO;
 
-  return totalReward.div(WEI).toFixed();
+  return totalReward.div(WEI);
 }

theme/components/Alert.ts

@@ -18,7 +18,7 @@ const baseStyle = definePartsStyle({
   container: {
     borderRadius: 'md',
     px: 6,
-    py: 4,
+    py: 3,
   },
 });
 

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -37,7 +37,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Text fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Text>
-        <Text variant="secondary">{ totalReward }</Text>
+        <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
     </AccountListItemMobile>
   );

ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx

@@ -36,7 +36,7 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         </Flex>
       </Td>
       <Td isNumeric display="flex" justifyContent="end">
-        { totalReward }
+        { totalReward.toFixed() }
       </Td>
     </Tr>
   );

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
@@ -67,7 +67,7 @@ const BlockDetails = () => {
 
   if (isError) {
     const is404 = error?.error?.status === 404;
-    return is404 ? <Alert>This block has not been processed yet.</Alert> : <DataFetchAlert/>;
+    return is404 ? <span>This block has not been processed yet.</span> : <DataFetchAlert/>;
   }
 
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;

ui/blocks/BlocksListItem.tsx

@@ -64,7 +64,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
       </Box>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
-        <Text variant="secondary">{ totalReward }</Text>
+        <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
       <Box>
         <Text fontWeight={ 500 }>Burnt fees</Text>

ui/blocks/BlocksTable.tsx

@@ -23,7 +23,7 @@ const BlocksTable = ({ data, top, page }: Props) => {
       <Thead top={ top }>
         <Tr>
           <Th width="125px">Block</Th>
-          <Th width="120px">Size</Th>
+          <Th width="120px">Size, bytes</Th>
           <Th width="21%" minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
           <Th width="64px" isNumeric>Txn</Th>
           <Th width="35%">Gas used</Th>

ui/blocks/BlocksTableItem.tsx

@@ -48,7 +48,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         </Flex>
         <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Td>
-      <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
+      <Td fontSize="sm">{ data.size.toLocaleString('en') }</Td>
       <Td fontSize="sm">
         <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" display="inline-flex" maxW="100%"/>
       </Td>
@@ -60,7 +60,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           <GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Td>
-      <Td fontSize="sm">{ totalReward }</Td>
+      <Td fontSize="sm">{ totalReward.toFixed(8) }</Td>
       <Td fontSize="sm">
         <Flex alignItems="center" columnGap={ 1 }>
           <Icon as={ flameIcon } boxSize={ 5 } color={ useColorModeValue('gray.500', 'inherit') }/>

ui/home/LatestBlocksItem.tsx

@@ -59,7 +59,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
         <GridItem><Text variant="secondary">{ block.tx_count }</Text></GridItem>
         { /*  */ }
         <GridItem>Reward</GridItem>
-        <GridItem><Text variant="secondary">{ totalReward }</Text></GridItem>
+        <GridItem><Text variant="secondary">{ totalReward.toFixed() }</Text></GridItem>
         <GridItem>Miner</GridItem>
         <GridItem><AddressLink alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%"/></GridItem>
       </Grid>