Merge pull request #1416 from blockscout/tom2drum/issue-1404

Top line: add gas info tooltip

ui/home/Stats.tsx

@@ -15,8 +15,8 @@ import walletIcon from 'icons/wallet.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { WEI } from 'lib/consts';
 import { HOMEPAGE_STATS } from 'stubs/stats';
+import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
 
-import StatsGasPrices from './StatsGasPrices';
 import StatsItem from './StatsItem';
 
 const hasGasTracker = config.UI.homepage.showGasTracker;
@@ -52,7 +52,7 @@ const Stats = () => {
     !data.gas_prices && itemsCount--;
     data.rootstock_locked_btc && itemsCount++;
     const isOdd = Boolean(itemsCount % 2);
-    const gasLabel = hasGasTracker && data.gas_prices ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
+    const gasLabel = hasGasTracker && data.gas_prices ? <GasInfoTooltipContent gasPrices={ data.gas_prices }/> : null;
 
     content = (
       <>

ui/home/StatsGasPrices.tsx → ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { GasPrices } from 'types/api/stats';
 
-const StatsGasPrices = ({ gasPrices }: {gasPrices: GasPrices}) => {
+const GasInfoTooltipContent = ({ gasPrices }: {gasPrices: GasPrices}) => {
   const nameStyleProps = {
     color: useColorModeValue('blue.100', 'blue.600'),
   };
@@ -20,4 +20,4 @@ const StatsGasPrices = ({ gasPrices }: {gasPrices: GasPrices}) => {
   );
 };
 
-export default StatsGasPrices;
+export default React.memo(GasInfoTooltipContent);

ui/snippets/topBar/TopBar.pw.tsx

@@ -19,7 +19,9 @@ test('default view +@dark-mode +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await component.getByLabel('color mode switch').click();
+  await component.getByText(/gwei/i).hover();
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
+  await component.getByLabel('color mode switch').click();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 });

ui/snippets/topBar/TopBarStats.tsx

-import { Flex, Skeleton } from '@chakra-ui/react';
+import { Flex, LightMode, Link, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import { HOMEPAGE_STATS } from 'stubs/stats';
+import GasInfoTooltipContent from 'ui/shared/GasInfoTooltipContent/GasInfoTooltipContent';
 import TextSeparator from 'ui/shared/TextSeparator';
 
 const TopBarStats = () => {
+  // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
+  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    onToggle();
+  }, [ onToggle ]);
+
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_stats', {
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
@@ -26,14 +35,34 @@ const TopBarStats = () => {
     >
       { data?.coin_price && (
         <Skeleton isLoaded={ !isPlaceholderData }>
-          <span>{ config.chain.governanceToken.symbol || config.chain.currency.symbol }: </span>
+          <chakra.span color="text_secondary">{ config.chain.governanceToken.symbol || config.chain.currency.symbol } </chakra.span>
           <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
         </Skeleton>
       ) }
       { data?.coin_price && config.UI.homepage.showGasTracker && <TextSeparator color="divider"/> }
       { data?.gas_prices && config.UI.homepage.showGasTracker && (
         <Skeleton isLoaded={ !isPlaceholderData }>
-          <span>Gas: { data.gas_prices.average } Gwei</span>
+          <chakra.span color="text_secondary">Gas </chakra.span>
+          <LightMode>
+            <Tooltip
+              label={ <GasInfoTooltipContent gasPrices={ data.gas_prices }/> }
+              hasArrow={ false }
+              borderRadius="md"
+              offset={ [ 0, 16 ] }
+              bgColor="blackAlpha.900"
+              p={ 0 }
+              isOpen={ isOpen }
+            >
+              <Link
+                _hover={{ textDecoration: 'none', color: 'link_hovered' }}
+                onClick={ handleClick }
+                onMouseEnter={ onOpen }
+                onMouseLeave={ onClose }
+              >
+                { data.gas_prices.average } Gwei
+              </Link>
+            </Tooltip>
+          </LightMode>
         </Skeleton>
       ) }
     </Flex>