fix latest block layout issue (#1205)

* fix latest blocks layout issue

Fixes #1189

* remove hardcoded height for latest block item

* update homepage screenshots

ui/home/LatestBlocks.pw.tsx

@@ -3,9 +3,11 @@ import React from 'react';
 
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import * as socketServer from 'playwright/fixtures/socketServer';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
 
 import LatestBlocks from './LatestBlocks';
 
@@ -38,6 +40,60 @@ test('default view +@mobile +@dark-mode', async({ mount, page }) => {
   await expect(component).toHaveScreenshot();
 });
 
+const testL2 = test.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.rollup) as any,
+});
+
+testL2('L2 view', async({ mount, page }) => {
+  await page.route(STATS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      blockMock.base,
+      blockMock.base2,
+    ]),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <LatestBlocks/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+const testNoReward = test.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.viewsEnvs.block.hiddenFields) as any,
+});
+
+testNoReward('no reward view', async({ mount, page }) => {
+  await page.route(STATS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(statsMock.base),
+  }));
+  await page.route(BLOCKS_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify([
+      blockMock.base,
+      blockMock.base2,
+    ]),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <LatestBlocks/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
 test('with long block height', async({ mount, page }) => {
   await page.route(STATS_API_URL, (route) => route.fulfill({
     status: 200,

ui/home/LatestBlocks.tsx

@@ -20,12 +20,7 @@ import LinkInternal from 'ui/shared/LinkInternal';
 
 import LatestBlocksItem from './LatestBlocksItem';
 
-const BLOCK_HEIGHT_L1 = 166;
-const BLOCK_HEIGHT_L2 = 112;
-const BLOCK_MARGIN = 12;
-
 const LatestBlocks = () => {
-  const blockHeight = config.features.rollup.isEnabled || config.UI.views.block.hiddenFields?.total_reward ? BLOCK_HEIGHT_L2 : BLOCK_HEIGHT_L1;
   const isMobile = useIsMobile();
   // const blocksMaxCount = isMobile ? 2 : 3;
   let blocksMaxCount: number;
@@ -78,7 +73,6 @@ const LatestBlocks = () => {
 
   if (data) {
     const dataToShow = data.slice(0, blocksMaxCount);
-    const blocksCount = dataToShow.length;
 
     content = (
       <>
@@ -92,13 +86,12 @@ const LatestBlocks = () => {
             </Text>
           </Skeleton>
         ) }
-        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 4 } height={ `${ blockHeight * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
+        <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
           <AnimatePresence initial={ false } >
             { dataToShow.map(((block, index) => (
               <LatestBlocksItem
                 key={ block.height + (isPlaceholderData ? String(index) : '') }
                 block={ block }
-                h={ blockHeight }
                 isLoading={ isPlaceholderData }
               />
             ))) }
@@ -112,7 +105,7 @@ const LatestBlocks = () => {
   }
 
   return (
-    <Box width={{ base: '100%', lg: '280px' }}>
+    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
       <Heading as="h4" size="sm" mb={ 4 }>Latest blocks</Heading>
       { content }
     </Box>

ui/home/LatestBlocksItem.tsx

@@ -18,26 +18,23 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 
 type Props = {
   block: Block;
-  h: number;
   isLoading?: boolean;
 }
 
-const LatestBlocksItem = ({ block, h, isLoading }: Props) => {
+const LatestBlocksItem = ({ block, isLoading }: Props) => {
   const totalReward = getBlockTotalReward(block);
   return (
     <Box
       as={ motion.div }
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
+      exit={{ display: 'none' }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
-      borderRadius="12px"
+      borderRadius="md"
       border="1px solid"
       borderColor="divider"
       p={ 6 }
-      h={ `${ h }px` }
-      minWidth={{ base: '100%', lg: '280px' }}
-      w="100%"
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
         <BlockEntity
@@ -61,10 +58,16 @@ const LatestBlocksItem = ({ block, h, isLoading }: Props) => {
       <Grid gridGap={ 2 } templateColumns="auto minmax(0, 1fr)" fontSize="sm">
         <Skeleton isLoaded={ !isLoading }>Txn</Skeleton>
         <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ block.tx_count }</span></Skeleton>
-        { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.nonce && (
+
+        { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && (
           <>
             <Skeleton isLoaded={ !isLoading }>Reward</Skeleton>
             <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ totalReward.dp(10).toFixed() }</span></Skeleton>
+          </>
+        ) }
+
+        { !config.features.rollup.isEnabled && (
+          <>
             <Skeleton isLoaded={ !isLoading } textTransform="capitalize">{ getNetworkValidatorTitle() }</Skeleton>
             <AddressEntity
               address={ block.miner }