Merge pull request #269 from blockscout/new-block-transition

animate new block in the list

ui/blocks/BlocksContent.tsx

@@ -49,7 +49,7 @@ const BlocksContent = ({ type }: Props) => {
 
   return (
     <>
-      <Text>Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      <Text as="span">Total of { data.items[0].height.toLocaleString() } blocks</Text>
       <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
       <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>

ui/blocks/BlocksList.tsx

 import { Box } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -12,8 +13,10 @@ interface Props {
 const BlocksList = ({ data }: Props) => {
   return (
     <Box mt={ 8 }>
-      { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
-      { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
+      <AnimatePresence initial={ false }>
+        { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+        { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
+      </AnimatePresence>
     </Box>
   );
 };

ui/blocks/BlocksListItem.tsx

@@ -30,7 +30,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const txFees = BigNumber(data.tx_fees || 0);
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <AccountListItemMobile rowGap={ 3 } key={ String(data.height) }>
       <Flex justifyContent="space-between" w="100%">
         <Flex columnGap={ 2 } alignItems="center">
           { isPending && <Spinner size="sm"/> }
@@ -57,7 +57,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
       </Flex>
       <Box>
         <Text fontWeight={ 500 }>Gas used</Text>
-        <Flex columnGap={ 4 }>
+        <Flex columnGap={ 4 } mt={ 2 }>
           <Text variant="secondary">{ BigNumber(data.gas_used || 0).toFormat() }</Text>
           <Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() }/>
           <GasUsedToTargetRatio value={ data.gas_target_percentage || undefined }/>
@@ -67,12 +67,16 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">{ totalReward.div(WEI).toFixed() }</Text>
       </Flex>
-      <Flex>
+      <Box>
         <Text fontWeight={ 500 }>Burnt fees</Text>
-        <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" ml={ 2 }/>
-        <Text variant="secondary" ml={ 1 }>{ burntFees.div(WEI).toFixed() }</Text>
-        <Utilization ml={ 4 } value={ burntFees.div(txFees).toNumber() }/>
-      </Flex>
+        <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>
     </AccountListItemMobile>
   );
 };

ui/blocks/BlocksTable.tsx

 import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 
@@ -29,8 +30,10 @@ const BlocksTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
-          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
+          <AnimatePresence initial={ false }>
+            { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+            { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
+          </AnimatePresence>
         </Tbody>
       </Table>
     </TableContainer>

ui/blocks/BlocksTableItem.tsx

 import { Tr, Td, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import { motion } from 'framer-motion';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -26,7 +27,14 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const txFees = BigNumber(data.tx_fees || 0);
 
   return (
-    <Tr>
+    <Tr
+      as={ motion.tr }
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      key={ data.height }
+    >
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
           { isPending && <Spinner size="sm" flexShrink={ 0 }/> }

ui/shared/AccountListItemMobile.tsx

 import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
+  key?: string;
 }
 
-const AccountListItemMobile = ({ children, className }: Props) => {
+const AccountListItemMobile = ({ children, className, key }: Props) => {
   return (
     <Flex
+      as={ motion.div }
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      key={ key }
       rowGap={ 6 }
       alignItems="flex-start"
       flexDirection="column"