Merge pull request #731 from blockscout/l2-remove-fields

remove unnecessary fields for l2
blockscout · Apr 10, 2023 · ec0139e · ec0139e
2 parents 37c529b + 5393507
commit ec0139e
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 61 deletions.
diff --git a/ui/address/AddressBlocksValidated.tsx b/ui/address/AddressBlocksValidated.tsx
@@ -79,7 +79,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
               <Th width="17%">Block</Th>
               <Th width="17%">Age</Th>
               <Th width="16%">Txn</Th>
-              <Th width="25%">GasUsed</Th>
+              <Th width="25%">Gas used</Th>
               <Th width="25%" isNumeric>Reward { appConfig.network.currency.symbol }</Th>
             </Tr>
           </Thead>

diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
@@ -141,7 +141,7 @@ const BlockDetails = ({ query }: Props) => {
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
-      { !totalReward.isEqualTo(ZERO) && (
+      { !appConfig.L2.isL2Network && !totalReward.isEqualTo(ZERO) && (
         <DetailsInfoItem
           title="Block reward"
           hint={

diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx
@@ -77,20 +77,24 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           ) }
         </Flex>
       </Box>
-      <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
-        <Text variant="secondary">{ totalReward.toFixed() }</Text>
-      </Flex>
-      <Box>
-        <Text fontWeight={ 500 }>Burnt fees</Text>
-        <Flex columnGap={ 4 } mt={ 2 }>
-          <Flex>
-            <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-            <Text variant="secondary" ml={ 1 }>{ burntFees.div(WEI).toFixed() }</Text>
-          </Flex>
-          <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
+      { !appConfig.L2.isL2Network && (
+        <Flex columnGap={ 2 }>
+          <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
+          <Text variant="secondary">{ totalReward.toFixed() }</Text>
         </Flex>
-      </Box>
+      ) }
+      { !appConfig.L2.isL2Network && (
+        <Box>
+          <Text fontWeight={ 500 }>Burnt fees</Text>
+          <Flex columnGap={ 4 } mt={ 2 }>
+            <Flex>
+              <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
+              <Text variant="secondary" ml={ 1 }>{ burntFees.div(WEI).toFixed() }</Text>
+            </Flex>
+            <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
+          </Flex>
+        </Box>
+      ) }
     </ListItemMobile>
   );
 };

diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx
@@ -24,11 +24,11 @@ const BlocksTable = ({ data, top, page }: Props) => {
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size, bytes</Th>
-          <Th width="21%" minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
+          <Th width={ appConfig.L2.isL2Network ? '37%' : '21%' } minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
           <Th width="64px" isNumeric>Txn</Th>
-          <Th width="35%">Gas used</Th>
-          <Th width="22%">Reward { appConfig.network.currency.symbol }</Th>
-          <Th width="22%">Burnt fees { appConfig.network.currency.symbol }</Th>
+          <Th width={ appConfig.L2.isL2Network ? '63%' : '35%' }>Gas used</Th>
+          { !appConfig.L2.isL2Network && <Th width="22%">Reward { appConfig.network.currency.symbol }</Th> }
+          { !appConfig.L2.isL2Network && <Th width="22%">Burnt fees { appConfig.network.currency.symbol }</Th> }
         </Tr>
       </Thead>
       <Tbody>

diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 
 import type { Block } from 'types/api/block';
 
+import appConfig from 'configs/app/config';
 import flameIcon from 'icons/flame.svg';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
@@ -28,7 +29,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const txFees = BigNumber(data.tx_fees || 0);
 
   const separatorColor = useColorModeValue('gray.200', 'gray.700');
-
+  const burntFeesIconColor = useColorModeValue('gray.500', 'inherit');
   return (
     <Tr
       as={ motion.tr }
@@ -63,34 +64,38 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           </LinkInternal>
         ) : data.tx_count }
       </Td>
-      <Td fontSize="sm">
-        <Box>{ BigNumber(data.gas_used || 0).toFormat() }</Box>
-        <Flex mt={ 2 }>
-          <Tooltip label="Gas Used %">
-            <Box>
-              <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
+      { !appConfig.L2.isL2Network && (
+        <Td fontSize="sm">
+          <Box>{ BigNumber(data.gas_used || 0).toFormat() }</Box>
+          <Flex mt={ 2 }>
+            <Tooltip label="Gas Used %">
+              <Box>
+                <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }/>
+              </Box>
+            </Tooltip>
+            { data.gas_target_percentage && (
+              <>
+                <TextSeparator color={ separatorColor } mx={ 1 }/>
+                <GasUsedToTargetRatio value={ data.gas_target_percentage }/>
+              </>
+            ) }
+          </Flex>
+        </Td>
+      ) }
+      <Td fontSize="sm">{ totalReward.toFixed(8) }</Td>
+      { !appConfig.L2.isL2Network && (
+        <Td fontSize="sm">
+          <Flex alignItems="center" columnGap={ 1 }>
+            <Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor }/>
+            { burntFees.dividedBy(WEI).toFixed(8) }
+          </Flex>
+          <Tooltip label="Burnt fees / Txn fees * 100%">
+            <Box w="min-content">
+              <Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() }/>
             </Box>
           </Tooltip>
-          { data.gas_target_percentage && (
-            <>
-              <TextSeparator color={ separatorColor } mx={ 1 }/>
-              <GasUsedToTargetRatio value={ data.gas_target_percentage }/>
-            </>
-          ) }
-        </Flex>
-      </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') }/>
-          { burntFees.dividedBy(WEI).toFixed(8) }
-        </Flex>
-        <Tooltip label="Burnt fees / Txn fees * 100%">
-          <Box w="min-content">
-            <Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() }/>
-          </Box>
-        </Tooltip>
-      </Td>
+        </Td>
+      ) }
     </Tr>
   );
 };

diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import type { SocketMessage } from 'lib/socket/types';
 import type { Block } from 'types/api/block';
 
+import appConfig from 'configs/app/config';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
@@ -17,12 +18,20 @@ import LinkInternal from 'ui/shared/LinkInternal';
 import LatestBlocksItem from './LatestBlocksItem';
 import LatestBlocksItemSkeleton from './LatestBlocksItemSkeleton';
 
-const BLOCK_HEIGHT = 166;
+const BLOCK_HEIGHT_L1 = 166;
+const BLOCK_HEIGHT_L2 = 112;
 const BLOCK_MARGIN = 12;
 
 const LatestBlocks = () => {
+  const blockHeight = appConfig.L2.isL2Network ? BLOCK_HEIGHT_L2 : BLOCK_HEIGHT_L1;
   const isMobile = useIsMobile();
-  const blocksMaxCount = isMobile ? 2 : 3;
+  // const blocksMaxCount = isMobile ? 2 : 3;
+  let blocksMaxCount: number;
+  if (appConfig.L2.isL2Network) {
+    blocksMaxCount = isMobile ? 4 : 5;
+  } else {
+    blocksMaxCount = isMobile ? 2 : 3;
+  }
   const { data, isLoading, isError } = useApiQuery('homepage_blocks');
 
   const queryClient = useQueryClient();
@@ -60,7 +69,7 @@ const LatestBlocks = () => {
         <VStack
           spacing={ `${ BLOCK_MARGIN }px` }
           mb={ 6 }
-          height={ `${ BLOCK_HEIGHT * blocksMaxCount + BLOCK_MARGIN * (blocksMaxCount - 1) }px` }
+          height={ `${ blockHeight * blocksMaxCount + BLOCK_MARGIN * (blocksMaxCount - 1) }px` }
           overflow="hidden"
         >
           { Array.from(Array(blocksMaxCount)).map((item, index) => <LatestBlocksItemSkeleton key={ index }/>) }
@@ -92,9 +101,9 @@ const LatestBlocks = () => {
             </Text>
           </Box>
         ) }
-        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 4 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
+        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 4 } height={ `${ blockHeight * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
           <AnimatePresence initial={ false } >
-            { dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }
+            { dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ blockHeight }/>)) }
           </AnimatePresence>
         </VStack>
         <Flex justifyContent="center">

diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx
@@ -13,6 +13,7 @@ import React from 'react';
 
 import type { Block } from 'types/api/block';
 
+import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
@@ -56,11 +57,14 @@ const LatestBlocksItem = ({ block, h }: Props) => {
       <Grid gridGap={ 2 } templateColumns="auto minmax(0, 1fr)" fontSize="sm">
         <GridItem>Txn</GridItem>
         <GridItem><Text variant="secondary">{ block.tx_count }</Text></GridItem>
-        { /*  */ }
-        <GridItem>Reward</GridItem>
-        <GridItem><Text variant="secondary">{ totalReward.toFixed() }</Text></GridItem>
-        <GridItem>Miner</GridItem>
-        <GridItem><AddressLink type="address" alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%"/></GridItem>
+        { !appConfig.L2.isL2Network && (
+          <>
+            <GridItem>Reward</GridItem>
+            <GridItem><Text variant="secondary">{ totalReward.toFixed() }</Text></GridItem>
+            <GridItem>Miner</GridItem>
+            <GridItem><AddressLink type="address" alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%"/></GridItem>
+          </>
+        ) }
       </Grid>
     </Box>
   );

diff --git a/ui/home/LatestBlocksItemSkeleton.tsx b/ui/home/LatestBlocksItemSkeleton.tsx
@@ -8,6 +8,8 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
+
 const LatestBlocksItemSkeleton = () => {
   return (
     <Box
@@ -27,10 +29,14 @@ const LatestBlocksItemSkeleton = () => {
       <Grid gridGap={ 2 } templateColumns="auto minmax(0, 1fr)" fontSize="sm">
         <GridItem><Skeleton w="30px" h="15px"/></GridItem>
         <GridItem><Skeleton w="93px" h="15px"/></GridItem>
-        <GridItem><Skeleton w="30px" h="15px"/></GridItem>
-        <GridItem><Skeleton w="93px" h="15px"/></GridItem>
-        <GridItem><Skeleton w="30px" h="15px"/></GridItem>
-        <GridItem><Skeleton w="93px" h="15px"/></GridItem>
+        { !appConfig.L2.isL2Network && (
+          <>
+            <GridItem><Skeleton w="30px" h="15px"/></GridItem>
+            <GridItem><Skeleton w="93px" h="15px"/></GridItem>
+            <GridItem><Skeleton w="30px" h="15px"/></GridItem>
+            <GridItem><Skeleton w="93px" h="15px"/></GridItem>
+          </>
+        ) }
       </Grid>
     </Box>
   );

diff --git a/ui/tx/TxDetails.tsx b/ui/tx/TxDetails.tsx
@@ -304,7 +304,7 @@ const TxDetails = () => {
           ) }
         </DetailsInfoItem>
       ) }
-      { data.tx_burnt_fee && (
+      { data.tx_burnt_fee && !appConfig.L2.isL2Network && (
         <DetailsInfoItem
           title="Burnt fees"
           hint={ `Amount of ${ appConfig.network.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }