Merge pull request #1976 from blockscout/release/v1_31_0-fixes

Fixes for release v1.31.0

theme/foundations/semanticTokens.ts

@@ -20,8 +20,8 @@ const semanticTokens = {
       'default': 'blue.400',
     },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': 'red.500',
+      _dark: 'red.500',
     },
     dialog_bg: {
       'default': 'white',

ui/address/tokens/TokenBalancesItem.tsx

@@ -14,7 +14,7 @@ const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Pro
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="16px">
+    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="base">
       <Text variant="secondary" fontSize="xs">{ name }</Text>
       <Flex alignItems="center">
         { icon }

ui/block/BlockWithdrawals.tsx

@@ -9,6 +9,7 @@ import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainW
 type Props = {
   blockWithdrawalsQuery: QueryWithPagesResult<'block_withdrawals'>;
 }
+const TABS_HEIGHT = 88;
 
 const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
   const content = blockWithdrawalsQuery.data?.items ? (
@@ -24,7 +25,7 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
         <BeaconChainWithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
-          top={ blockWithdrawalsQuery.pagination.isVisible ? 76 : 0 }
+          top={ blockWithdrawalsQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           view="block"
         />
       </Hide>

ui/blocks/BlocksContent.tsx

@@ -18,6 +18,7 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 const OVERLOAD_COUNT = 75;
+const TABS_HEIGHT = 88;
 
 interface Props {
   type?: BlockType;
@@ -95,7 +96,7 @@ const BlocksContent = ({ type, query }: Props) => {
       <Box display={{ base: 'none', lg: 'block' }}>
         <BlocksTable
           data={ query.data.items }
-          top={ query.pagination.isVisible ? 76 : 0 }
+          top={ query.pagination.isVisible ? TABS_HEIGHT : 0 }
           page={ query.pagination.page }
           isLoading={ query.isPlaceholderData }
           showSocketInfo={ query.pagination.page === 1 }

ui/pages/Block.tsx

@@ -30,9 +30,10 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   pt: 6,
-  pb: 3,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const BlockPageContent = () => {
   const router = useRouter();
@@ -63,7 +64,7 @@ const BlockPageContent = () => {
       component: (
         <>
           { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
-          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ 76 }/>
+          <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ TABS_HEIGHT }/>
         </>
       ),
     },
@@ -72,7 +73,7 @@ const BlockPageContent = () => {
         id: 'blob_txs',
         title: 'Blob txns',
         component: (
-          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ 76 }/>
+          <TxsWithFrontendSorting query={ blockBlobTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/>
         ),
       } : null,
     config.features.beaconChain.isEnabled && Boolean(blockQuery.data?.withdrawals_count) ?

ui/pages/Blocks.tsx

@@ -16,7 +16,7 @@ import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   pt: 6,
-  pb: 3,
+  pb: 6,
   marginTop: -5,
 };
 

ui/pages/Home.tsx

-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Heading } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -27,7 +27,7 @@ const Home = () => {
         data-label="hero plate"
       >
         <Flex mb={{ base: 2, lg: 6 }} justifyContent="space-between" alignItems="center">
-          <Box
+          <Heading
             as="h1"
             fontSize={{ base: '18px', lg: '40px' }}
             lineHeight={{ base: '24px', lg: '48px' }}
@@ -39,7 +39,7 @@ const Home = () => {
                 `${ config.chain.name } blockchain explorer` :
                 `${ config.chain.name } explorer`
             }
-          </Box>
+          </Heading>
           <Box display={{ base: 'none', lg: 'flex' }}>
             { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
             { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop isHomePage/> }

ui/pages/Token.tsx

@@ -218,7 +218,7 @@ const TokenPageContent = () => {
 
     return {
       pt: 6,
-      pb: 3,
+      pb: 6,
       marginBottom: 0,
       boxShadow: activeTabIndex === 2 && isSticky ? 'action_bar' : 'none',
     };

ui/pages/Tokens.tsx

@@ -26,10 +26,12 @@ import { SORT_OPTIONS, getTokenFilterValue, getBridgedChainsFilterValue } from '
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
-  py: 5,
+  pt: 6,
+  pb: 6,
   marginTop: -5,
   alignItems: 'center',
 };
+const TABS_HEIGHT = 88;
 
 const TABS_RIGHT_SLOT_PROPS = {
   ml: 8,
@@ -101,6 +103,8 @@ const Tokens = () => {
     setBridgeChains(undefined);
   }, []);
 
+  const hasMultipleTabs = bridgedTokensFeature.isEnabled;
+
   const filter = tab === 'bridged' ? (
     <PopoverFilter isActive={ bridgeChains && bridgeChains.length > 0 } contentProps={{ maxW: '350px' }} appliedFiltersNum={ bridgeChains?.length }>
       <TokensBridgedChainsFilter onChange={ handleBridgeChainsChange } defaultValue={ bridgeChains }/>
@@ -120,7 +124,7 @@ const Tokens = () => {
       onSearchChange={ handleSearchTermChange }
       sort={ sort }
       onSortChange={ handleSortChange }
-      inTabsSlot={ !isMobile && bridgedTokensFeature.isEnabled }
+      inTabsSlot={ !isMobile && hasMultipleTabs }
     />
   );
 
@@ -151,6 +155,7 @@ const Tokens = () => {
           onSortChange={ handleSortChange }
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || tokenTypes) }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     },
@@ -165,6 +170,7 @@ const Tokens = () => {
           actionBar={ isMobile ? actionBar : null }
           hasActiveFilters={ Boolean(searchTerm || bridgeChains) }
           description={ description }
+          tableTop={ hasMultipleTabs ? TABS_HEIGHT : undefined }
         />
       ),
     } : undefined,
@@ -176,11 +182,11 @@ const Tokens = () => {
         title={ config.meta.seo.enhancedDataEnabled ? `Tokens on ${ config.chain.name }` : 'Tokens' }
         withTextAd
       />
-      { tabs.length === 1 && !isMobile && actionBar }
+      { !hasMultipleTabs && !isMobile && actionBar }
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ !isMobile ? actionBar : null }
+        rightSlot={ hasMultipleTabs && !isMobile ? actionBar : null }
         rightSlotProps={ !isMobile ? TABS_RIGHT_SLOT_PROPS : undefined }
         stickyEnabled={ !isMobile }
         onTabChange={ handleTabChange }

ui/pages/Transactions.tsx

@@ -21,9 +21,10 @@ import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 const TAB_LIST_PROPS = {
   marginBottom: 0,
   pt: 6,
-  pb: 3,
+  pb: 6,
   marginTop: -5,
 };
+const TABS_HEIGHT = 88;
 
 const Transactions = () => {
   const verifiedTitle = config.chain.verificationType === 'validation' ? 'Validated' : 'Mined';
@@ -97,7 +98,7 @@ const Transactions = () => {
           showSocketInfo={ txsValidatedQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
-          top={ 76 }
+          top={ TABS_HEIGHT }
         /> },
     {
       id: 'pending',
@@ -109,7 +110,7 @@ const Transactions = () => {
           showSocketInfo={ txsPendingQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
-          top={ 76 }
+          top={ TABS_HEIGHT }
         />
       ),
     },
@@ -122,7 +123,7 @@ const Transactions = () => {
           showSocketInfo={ txsWithBlobsQuery.pagination.page === 1 }
           socketInfoNum={ num }
           socketInfoAlert={ socketAlert }
-          top={ 76 }
+          top={ TABS_HEIGHT }
         />
       ),
     },

ui/shared/gas/GasInfoTooltip.tsx

-import { Box, DarkMode, Flex, Grid, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useColorModeValue } from '@chakra-ui/react';
+import type {
+  PlacementWithLogical } from '@chakra-ui/react';
+import {
+  Box,
+  DarkMode,
+  Flex,
+  Grid,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Portal,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import type { HomeStats } from 'types/api/stats';
@@ -17,12 +30,13 @@ interface Props {
   data: HomeStats;
   dataUpdatedAt: number;
   isOpen?: boolean; // for testing purposes only; the tests were flaky, i couldn't find a better way
+  placement?: PlacementWithLogical;
 }
 
 const POPOVER_OFFSET: [ number, number ] = [ 0, 10 ];
 const feature = config.features.gasTracker;
 
-const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
+const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Props) => {
   const tooltipBg = useColorModeValue('gray.700', 'gray.900');
 
   if (!data.gas_prices) {
@@ -36,7 +50,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen }: Props) => {
       3 : 2;
 
   return (
-    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen }>
+    <Popover trigger="hover" isLazy offset={ POPOVER_OFFSET } isOpen={ isOpen } placement={ placement }>
       <PopoverTrigger>
         { children }
       </PopoverTrigger>

ui/snippets/topBar/TopBarStats.tsx

@@ -78,7 +78,7 @@ const TopBarStats = () => {
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
         <Skeleton isLoaded={ !isPlaceholderData }>
           <chakra.span color="text_secondary">Gas </chakra.span>
-          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } >
+          <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
             <Link>
               <GasPrice data={ data.gas_prices.average }/>
             </Link>

ui/token/TokenHolders/TokenHolders.tsx

@@ -15,6 +15,8 @@ import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPage
 import TokenHoldersList from './TokenHoldersList';
 import TokenHoldersTable from './TokenHoldersTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   token?: TokenInfo;
   holdersQuery: QueryWithPagesResult<'token_holders'>;
@@ -52,7 +54,7 @@ const TokenHoldersContent = ({ holdersQuery, token, shouldRender = true }: Props
         <TokenHoldersTable
           data={ items }
           token={ token }
-          top={ holdersQuery.pagination.isVisible ? 76 : 0 }
+          top={ holdersQuery.pagination.isVisible ? TABS_HEIGHT : 0 }
           isLoading={ holdersQuery.isPlaceholderData }
         />
       </Box>

ui/token/TokenHolders/TokenHoldersTable.pw.tsx

@@ -10,7 +10,7 @@ import TokenHoldersTable from './TokenHoldersTable';
 test('base view without IDs', async({ render }) => {
   const component = await render(
     <Box pt="128px">
-      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 76 }/>
+      <TokenHoldersTable data={ tokenHoldersERC20.items } token={ tokenInfo } top={ 88 }/>
     </Box>,
   );
 
@@ -20,7 +20,7 @@ test('base view without IDs', async({ render }) => {
 test('base view with IDs', async({ render }) => {
   const component = await render(
     <Box pt="128px">
-      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 76 }/>
+      <TokenHoldersTable data={ tokenHoldersERC1155.items } token={ tokenInfoERC1155a } top={ 88 }/>
     </Box>,
   );
 

ui/token/TokenTransfer/TokenTransfer.tsx

@@ -18,6 +18,8 @@ import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
+const TABS_HEIGHT = 88;
+
 type Props = {
   transfersQuery: QueryWithPagesResult<'token_transfers'> | QueryWithPagesResult<'token_instance_transfers'>;
   tokenId?: string;
@@ -67,7 +69,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token, shouldRender = true }:
       <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
-          top={ pagination.isVisible ? 76 : 0 }
+          top={ pagination.isVisible ? TABS_HEIGHT : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }

ui/tokens/Tokens.tsx

@@ -18,9 +18,10 @@ interface Props {
   actionBar?: React.ReactNode;
   hasActiveFilters: boolean;
   description?: React.ReactNode;
+  tableTop?: number;
 }
 
-const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters }: Props) => {
+const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFilters, tableTop }: Props) => {
 
   const { isError, isPlaceholderData, data, pagination } = query;
 
@@ -50,6 +51,7 @@ const Tokens = ({ query, onSortChange, sort, actionBar, description, hasActiveFi
           isLoading={ isPlaceholderData }
           setSorting={ onSortChange }
           sorting={ sort }
+          top={ tableTop }
         />
       </Hide>
     </>

ui/tokens/TokensActionBar.tsx

@@ -53,7 +53,7 @@ const TokensActionBar = ({
       </HStack>
       <ActionBar
         mt={ inTabsSlot ? 0 : -6 }
-        py={ inTabsSlot ? 0 : undefined }
+        py={{ lg: inTabsSlot ? 0 : undefined }}
         justifyContent={ inTabsSlot ? 'space-between' : undefined }
         display={{ base: pagination.isVisible ? 'flex' : 'none', lg: 'flex' }}
       >

ui/tokens/TokensTable.tsx

@@ -25,9 +25,10 @@ type Props = {
   sorting?: TokensSortingValue;
   setSorting: (val?: TokensSortingValue) => void;
   isLoading?: boolean;
+  top?: number;
 }
 
-const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) => {
+const TokensTable = ({ items, page, isLoading, sorting, setSorting, top }: Props) => {
   const sortIconTransform = sorting?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   const sort = React.useCallback((field: TokensSortingField) => () => {
@@ -37,7 +38,7 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) =>
 
   return (
     <Table>
-      <Thead top={ ACTION_BAR_HEIGHT_DESKTOP }>
+      <Thead top={ top ?? ACTION_BAR_HEIGHT_DESKTOP }>
         <Tr>
           <Th w="50%">Token</Th>
           <Th isNumeric w="15%">

ui/txs/TxsWatchlist.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 const TxsWatchlist = ({ query }: Props) => {
   useRedirectForInvalidAuthToken();
-  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false } top={ 76 }/>;
+  return <TxsWithFrontendSorting query={ query } showSocketInfo={ false } top={ 88 }/>;
 };
 
 export default TxsWatchlist;