migrate block list to big-number-js

ui/blocks/BlocksListItem.tsx

 import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
-import { constants, utils } from 'ethers';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
 
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
+import { WEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import useNetwork from 'lib/hooks/useNetwork';
 import useLink from 'lib/link/useLink';
@@ -54,20 +55,20 @@ const BlocksListItem = ({ data, isPending }: Props) => {
       <Box>
         <Text fontWeight={ 500 }>Gas used</Text>
         <Flex columnGap={ 4 }>
-          <Text variant="secondary">{ utils.commify(data.gas_used) }</Text>
-          <Utilization colorScheme="gray" value={ utils.parseUnits(data.gas_used).mul(10_000).div(utils.parseUnits(data.gas_limit)).toNumber() / 10_000 }/>
+          <Text variant="secondary">{ BigNumber(data.gas_used).toFormat() }</Text>
+          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used).div(BigNumber(data.gas_limit)).toNumber() }/>
           <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Box>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Reward { network?.currency }</Text>
-        <Text variant="secondary">{ utils.formatUnits(totalReward) }</Text>
+        <Text variant="secondary">{ totalReward.div(WEI).toFixed() }</Text>
       </Flex>
       <Flex>
         <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={ txFees.eq(constants.Zero) ? 1 : burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
+        <Text variant="secondary" ml={ 1 }>{ burntFees.div(WEI).toFixed() }</Text>
+        <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
       </Flex>
     </AccountListItemMobile>
   );

ui/blocks/BlocksTableItem.tsx

 import { Tr, Td, Text, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
-import { constants, utils } from 'ethers';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
 
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
+import { WEI } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 import useLink from 'lib/link/useLink';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -45,24 +46,21 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
       </Td>
       <Td isNumeric fontSize="sm">{ data.tx_count }</Td>
       <Td fontSize="sm">
-        <Box>{ utils.commify(data.gas_used) }</Box>
+        <Box>{ BigNumber(data.gas_used).toFormat() }</Box>
         <Flex mt={ 2 }>
-          <Utilization
-            colorScheme="gray"
-            value={ utils.parseUnits(data.gas_used).mul(10_000).div(utils.parseUnits(data.gas_limit)).toNumber() / 10_000 }
-          />
+          <Utilization colorScheme="gray" value={ BigNumber(data.gas_used).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
           <GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Td>
-      <Td fontSize="sm">{ utils.formatUnits(totalReward) }</Td>
+      <Td fontSize="sm">{ totalReward.dividedBy(WEI).toFixed() }</Td>
       <Td fontSize="sm">
         <Flex alignItems="center" columnGap={ 1 }>
           <Icon as={ flameIcon } boxSize={ 5 } color={ useColorModeValue('gray.500', 'inherit') }/>
-          { Number(utils.formatUnits(burntFees)).toFixed(8) }
+          { burntFees.dividedBy(WEI).toFixed(8) }
         </Flex>
         <Tooltip label="Burnt fees / Txn fees * 100%">
           <Box w="min-content">
-            <Utilization mt={ 2 } value={ txFees.eq(constants.Zero) ? 1 : burntFees.mul(10_000).div(txFees).toNumber() / 10_000 }/>
+            <Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() }/>
           </Box>
         </Tooltip>
       </Td>