blocks mobile

ui/home/LatestBlocks.tsx

-import { Box, Heading, Link, Text, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Box, Heading, Flex, Link, Text, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence } from 'framer-motion';
 import React from 'react';
@@ -8,13 +8,19 @@ import type { Block } from 'types/api/block';
 import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import { nbsp } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
 import LatestBlocksItem from './LatestBlocksItem';
 
+const BLOCK_HEIGHT = 166;
+const BLOCK_MARGIN = 24;
+
 const LatestBlocks = () => {
+  const isMobile = useIsMobile();
+  const blocksCount = isMobile ? 2 : 4;
   const fetch = useFetch();
   const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>(
     [ QueryKeys.indexBlocks ],
@@ -28,9 +34,9 @@ const LatestBlocks = () => {
 
       const newData = prevData ? [ ...prevData ] : [];
 
-      return [ payload.block, ...newData ].slice(0, 4);
+      return [ payload.block, ...newData ].slice(0, blocksCount);
     });
-  }, [ queryClient ]);
+  }, [ queryClient, blocksCount ]);
 
   const channel = useSocketChannel({
     topic: 'blocks:new_block',
@@ -50,7 +56,7 @@ const LatestBlocks = () => {
     content = (
       <>
         <Skeleton w="100%" h={ 6 } mb={ 9 }/>
-        { Array.from(Array(4)).map((item, index) => {
+        { Array.from(Array(blocksCount)).map((item, index) => {
           return (
             <Box
               key={ index }
@@ -73,14 +79,13 @@ const LatestBlocks = () => {
   }
 
   if (isError) {
-    // ???
-    content = null;
+    content = <Text>There are no blocks yet.</Text>;
   }
 
   if (data) {
     content = (
       <>
-        <Box mb={ 9 }>
+        <Box mb={{ base: 6, lg: 9 }}>
           <Text as="span" fontSize="sm">
         Network utilization:{ nbsp }
           </Text>
@@ -89,9 +94,9 @@ const LatestBlocks = () => {
         43.8%
           </Text>
         </Box>
-        <VStack spacing={ 6 } mb={ 6 }>
-          <AnimatePresence initial={ false }>
-            { data.map((block => <LatestBlocksItem key={ block.height } block={ block }/>)) }
+        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 6 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
+          <AnimatePresence initial={ false } >
+            { data.slice(0, blocksCount).map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }
           </AnimatePresence>
         </VStack>
       </>
@@ -99,11 +104,11 @@ const LatestBlocks = () => {
   }
 
   return (
-    <Box width="280px">
-      <Heading as="h4" fontSize="18px" mb={ 8 }>Latest Blocks</Heading>
+    <>
+      <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest Blocks</Heading>
       { content }
-      <Link fontSize="sm">View all blocks</Link>
-    </Box>
+      <Flex justifyContent={{ base: 'center', lg: 'start' }}><Link fontSize="sm">View all blocks</Link></Flex>
+    </>
   );
 };
 

ui/home/LatestBlocksItem.tsx

@@ -22,15 +22,16 @@ import AddressLink from 'ui/shared/address/AddressLink';
 
 type Props = {
   block: Block;
+  h: number;
 }
 
-const LatestBlocksItem = ({ block }: Props) => {
+const LatestBlocksItem = ({ block, h }: Props) => {
   const totalReward = getBlockTotalReward(block);
   return (
     <Box
       as={ motion.div }
-      initial={{ opacity: 0, scale: 0.97 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
       width="100%"
@@ -38,6 +39,7 @@ const LatestBlocksItem = ({ block }: Props) => {
       border="1px solid"
       borderColor={ useColorModeValue('gray.200', 'whiteAlpha.200') }
       p={ 6 }
+      h={ `${ h }px` }
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
         <HStack spacing={ 2 }>
@@ -56,12 +58,9 @@ const LatestBlocksItem = ({ block }: Props) => {
       <Grid gridGap={ 2 } templateColumns="auto minmax(0, 1fr)" fontSize="sm">
         <GridItem>Txn</GridItem>
         <GridItem><Text variant="secondary">{ block.tx_count }</Text></GridItem>
-        { totalReward !== '0' && (
-          <>
-            <GridItem>Reward</GridItem>
-            <GridItem><Text variant="secondary">{ totalReward }</Text></GridItem>
-          </>
-        ) }
+        { /*  */ }
+        <GridItem>Reward</GridItem>
+        <GridItem><Text variant="secondary">{ totalReward }</Text></GridItem>
         <GridItem>Miner</GridItem>
         <GridItem><AddressLink alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%"/></GridItem>
       </Grid>

ui/pages/Home2.tsx

@@ -27,8 +27,8 @@ const Home = () => {
         <SearchBar backgroundColor="white" isHomepage/>
       </Box>
       <Stats/>
-      <Flex mt={ 12 }>
-        <Box mr={ 12 }><LatestBlocks/></Box>
+      <Flex mt={ 12 } direction={{ base: 'column', lg: 'row' }}>
+        <Box mr={{ base: 0, lg: 12 }} mb={{ base: 8, lg: 0 }} width={{ base: '100%', lg: '280px' }}><LatestBlocks/></Box>
         <Box><Heading as="h4" fontSize="18px" mb={ 8 }>Latest transactions</Heading></Box>
       </Flex>
     </Page>