Update font size for latest txs on homepage (#2985)

* Update font size for latest txs on homepage

Fixes #2981

* update screenshots for homepage component

* remove unused envs

* update styles of latest block and number of items in the lists

Author: tom2drum

configs/envs/.env.eth

@@ -37,8 +37,6 @@ NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL=https://gist.githubusercontent.com/0x
 NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL=https://eth.blockscout.com/apps/revokescout?chainId=1
 NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
-NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY=patbqG4V2CI998jAq.9810c58c9de973ba2650621c94559088cbdfa1a914498e385621ed035d33c0d0
-NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_BASE_ID=appGkvtmKI7fXE4Vs
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com

ui/home/LatestBlocksItem.tsx

@@ -35,7 +35,7 @@ const LatestBlocksItem = ({ block, isLoading, animation }: Props) => {
           isLoading={ isLoading }
           number={ block.height }
           tailLength={ 2 }
-          textStyle="xl"
+          textStyle="md"
           fontWeight={ 500 }
           mr="auto"
         />

ui/home/LatestTxs.tsx

@@ -16,7 +16,7 @@ import LatestTxsItemMobile from './LatestTxsItemMobile';
 
 const LatestTransactions = () => {
   const isMobile = useIsMobile();
-  const txsCount = isMobile ? 2 : 6;
+  const txsCount = isMobile ? 2 : 5;
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_txs', {
     queryOptions: {
       placeholderData: Array(txsCount).fill(TX),
@@ -34,7 +34,7 @@ const LatestTransactions = () => {
     return (
       <>
         <SocketNewItemsNotice borderBottomRadius={ 0 } url={ txsUrl } num={ num } showErrorAlert={ showErrorAlert } isLoading={ isPlaceholderData }/>
-        <Box mb={ 3 } display={{ base: 'block', lg: 'none' }}>
+        <Box mb={ 3 } display={{ base: 'block', lg: 'none' }} textStyle="sm">
           { data.slice(0, txsCount).map(((tx, index) => (
             <LatestTxsItemMobile
               key={ tx.hash + (isPlaceholderData ? index : '') }
@@ -44,7 +44,7 @@ const LatestTransactions = () => {
           ))) }
         </Box>
         <AddressHighlightProvider>
-          <Box mb={ 3 } display={{ base: 'none', lg: 'block' }}>
+          <Box mb={ 3 } display={{ base: 'none', lg: 'block' }} textStyle="sm">
             { data.slice(0, txsCount).map(((tx, index) => (
               <LatestTxsItem
                 key={ tx.hash + (isPlaceholderData ? index : '') }

ui/home/LatestTxsItem.tsx

@@ -69,7 +69,6 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
               timeFormat="relative"
               isLoading={ isLoading }
               color="text.secondary"
-              textStyle="sm"
               flexShrink={ 0 }
               ml={ 2 }
             />
@@ -84,13 +83,13 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       />
       <Flex flexDir="column" rowGap={ 3 }>
         { !config.UI.views.tx.hiddenFields?.value && (
-          <Skeleton loading={ isLoading } textStyle="md">
+          <Skeleton loading={ isLoading }>
             <Text as="span" whiteSpace="pre">Value </Text>
             <Text as="span" color="text.secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
           </Skeleton>
         ) }
         { !config.UI.views.tx.hiddenFields?.tx_fee && (
-          <Skeleton loading={ isLoading } display="flex" whiteSpace="pre" textStyle="md">
+          <Skeleton loading={ isLoading } display="flex" whiteSpace="pre">
             <Text as="span">Fee </Text>
             <TxFee tx={ tx } accuracy={ 5 } color="text.secondary"/>
           </Skeleton>

ui/home/LatestTxsItemMobile.tsx

@@ -65,26 +65,24 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
           color="text.secondary"
           fontWeight="400"
-          fontSize="sm"
           ml={ 3 }
         />
       </Flex>
       <AddressFromTo
         from={ tx.from }
         to={ dataTo }
         isLoading={ isLoading }
-        fontSize="sm"
         fontWeight="500"
         mb={ 3 }
       />
       { !config.UI.views.tx.hiddenFields?.value && (
-        <Skeleton loading={ isLoading } mb={ 2 } fontSize="sm" w="fit-content">
+        <Skeleton loading={ isLoading } mb={ 2 } w="fit-content">
           <Text as="span">Value </Text>
           <Text as="span" color="text.secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() } { currencyUnits.ether }</Text>
         </Skeleton>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
-        <Skeleton loading={ isLoading } fontSize="sm" w="fit-content" display="flex" whiteSpace="pre">
+        <Skeleton loading={ isLoading } w="fit-content" display="flex" whiteSpace="pre">
           <Text as="span">Fee </Text>
           <TxFee tx={ tx } accuracy={ 5 } color="text.secondary"/>
         </Skeleton>

ui/home/LatestWatchlistTxs.tsx

@@ -15,7 +15,7 @@ import LatestTxsItemMobile from './LatestTxsItemMobile';
 const LatestWatchlistTxs = () => {
   useRedirectForInvalidAuthToken();
   const isMobile = useIsMobile();
-  const txsCount = isMobile ? 2 : 6;
+  const txsCount = isMobile ? 2 : 5;
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_txs_watchlist', {
     queryOptions: {
       placeholderData: Array(txsCount).fill(TX),
@@ -34,7 +34,7 @@ const LatestWatchlistTxs = () => {
     const txsUrl = route({ pathname: '/txs', query: { tab: 'watchlist' } });
     return (
       <>
-        <Box mb={ 3 } display={{ base: 'block', lg: 'none' }}>
+        <Box mb={ 3 } display={{ base: 'block', lg: 'none' }} textStyle="sm">
           { data.slice(0, txsCount).map(((tx, index) => (
             <LatestTxsItemMobile
               key={ tx.hash + (isPlaceholderData ? index : '') }
@@ -43,7 +43,7 @@ const LatestWatchlistTxs = () => {
             />
           ))) }
         </Box>
-        <Box mb={ 4 } display={{ base: 'none', lg: 'block' }}>
+        <Box mb={ 4 } display={{ base: 'none', lg: 'block' }} textStyle="sm">
           { data.slice(0, txsCount).map(((tx, index) => (
             <LatestTxsItem
               key={ tx.hash + (isPlaceholderData ? index : '') }