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

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,7 +65,6 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
           color="text.secondary"
           fontWeight="400"
-          fontSize="sm"
           ml={ 3 }
         />
       </Flex>
@@ -73,18 +72,17 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
         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 : '') }

ui/home/latestBatches/LatestArbitrumL2Batches.tsx

@@ -21,7 +21,7 @@ import LatestBatchItem from './LatestBatchItem';
 
 const LatestArbitrumL2Batches = () => {
   const isMobile = useIsMobile();
-  const batchesMaxCount = isMobile ? 2 : 5;
+  const batchesMaxCount = isMobile ? 2 : 6;
   const queryClient = useQueryClient();
 
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_arbitrum_l2_batches', {

ui/home/latestBatches/LatestBatchItem.tsx

@@ -31,7 +31,7 @@ const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading, animat
           isLoading={ isLoading }
           number={ number }
           tailLength={ 2 }
-          textStyle="xl"
+          textStyle="md"
           fontWeight={ 500 }
           mr="auto"
         />
@@ -47,7 +47,7 @@ const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading, animat
           ml={ 2 }
         />
       </Flex>
-      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
+      <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap" textStyle="sm">
         <Flex alignItems="center">
           <Skeleton loading={ isLoading } mr={ 2 }>Txn</Skeleton>
           <Link

ui/home/latestBatches/LatestZkEvmL2Batches.tsx

@@ -21,7 +21,7 @@ import LatestBatchItem from './LatestBatchItem';
 
 const LatestZkEvmL2Batches = () => {
   const isMobile = useIsMobile();
-  const batchesMaxCount = isMobile ? 2 : 5;
+  const batchesMaxCount = isMobile ? 2 : 6;
   const queryClient = useQueryClient();
 
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_zkevm_l2_batches', {

ui/home/latestDeposits/LatestArbitrumDeposits.tsx

@@ -14,7 +14,7 @@ import LatestDeposits from './LatestDeposits';
 
 const LatestArbitrumDeposits = () => {
   const isMobile = useIsMobile();
-  const itemsCount = isMobile ? 2 : 6;
+  const itemsCount = isMobile ? 2 : 5;
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_arbitrum_deposits', {
     queryOptions: {
       placeholderData: { items: Array(itemsCount).fill(ARBITRUM_MESSAGES_ITEM) },

ui/home/latestDeposits/LatestDeposits.tsx

@@ -43,14 +43,12 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
     <BlockEntityL1
       number={ item.l1BlockNumber }
       isLoading={ isLoading }
-      textStyle="sm"
       fontWeight={ 700 }
     />
   ) : (
     <BlockEntityL1
       number="TBD"
       isLoading={ isLoading }
-      textStyle="sm"
       fontWeight={ 700 }
       noLink
     />
@@ -60,14 +58,12 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
     <TxEntityL1
       isLoading={ isLoading }
       hash={ item.l1TxHash }
-      textStyle="sm"
       truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
   ) : (
     <TxEntityL1
       isLoading={ isLoading }
       hash="To be determined"
-      textStyle="sm"
       truncation="none"
       noLink
     />
@@ -77,7 +73,6 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
     <TxEntity
       isLoading={ isLoading }
       hash={ item.l2TxHash }
-      textStyle="sm"
       truncation={ isMobile ? 'constant_long' : 'dynamic' }
     />
   );

ui/home/latestDeposits/LatestOptimisticDeposits.tsx

@@ -14,7 +14,7 @@ import LatestDeposits from './LatestDeposits';
 
 const LatestOptimisticDeposits = () => {
   const isMobile = useIsMobile();
-  const itemsCount = isMobile ? 2 : 6;
+  const itemsCount = isMobile ? 2 : 5;
   const { data, isPlaceholderData, isError } = useApiQuery('general:homepage_optimistic_deposits', {
     queryOptions: {
       placeholderData: Array(itemsCount).fill(L2_DEPOSIT_ITEM),