SEO Tweaks for Gas Tracker Page (#2344)

ETH - SEO Tweaks for Gas Tracker Page

lib/metadata/generate.ts

@@ -5,6 +5,7 @@ import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
+import { currencyUnits } from 'lib/units';
 
 import compileValue from './compileValue';
 import getCanonicalUrl from './getCanonicalUrl';
@@ -17,6 +18,7 @@ export default function generate<Pathname extends Route['pathname']>(route: Rout
     ...apiData,
     network_name: config.chain.name,
     network_title: getNetworkTitle(),
+    network_gwei: currencyUnits.gwei,
   };
 
   const title = compileValue(templates.title.make(route.pathname, Boolean(apiData)), params);

lib/metadata/templates/description.ts

@@ -53,7 +53,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains': DEFAULT_TEMPLATE,
   '/name-domains/[name]': DEFAULT_TEMPLATE,
   '/validators': DEFAULT_TEMPLATE,
-  '/gas-tracker': DEFAULT_TEMPLATE,
+  '/gas-tracker': 'Explore real-time %network_title% gas fees with Blockscout\'s advanced gas fee tracker. Get accurate %network_gwei% estimates and track transaction costs live.',
   '/mud-worlds': DEFAULT_TEMPLATE,
   '/token-transfers': DEFAULT_TEMPLATE,
 

lib/metadata/templates/title.ts

@@ -50,7 +50,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/name-domains': '%network_name% name domains - %network_name% explorer',
   '/name-domains/[name]': '%network_name% %name% domain details',
   '/validators': '%network_name% validators list',
-  '/gas-tracker': '%network_name% gas tracker - Current gas fees',
+  '/gas-tracker': 'Track %network_name% gas fees in %network_gwei%',
   '/mud-worlds': '%network_name% MUD worlds list',
   '/token-transfers': '%network_name% token transfers',
 

ui/gasTracker/GasTrackerFaq.tsx

+import {
+  Box,
+  Heading,
+  Accordion,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import config from 'configs/app';
+import { currencyUnits } from 'lib/units';
+
+import GasTrackerFaqItem from './GasTrackerFaqItem';
+
+const FAQ_ITEMS = [
+  {
+    question: 'What does gas refer to on the blockchain?',
+    answer: 'Gas is the amount of native tokens required to perform a transaction on the blockchain.',
+  },
+  {
+    question: `How can I check ${ config.chain.name } gas fees?`,
+    // eslint-disable-next-line max-len
+    answer: `You can easily check live ${ config.chain.name } gas fees on Blockscout by visiting our gas tracker. It displays current gas fees in ${ currencyUnits.gwei } for all ${ config.chain.name } transactions.`,
+  },
+  {
+    question: `What is the average gas fee for ${ config.chain.name } transactions?`,
+    // eslint-disable-next-line max-len
+    answer: `The average gas fee for ${ config.chain.name } transactions depends on network congestion and transaction complexity. Blockscout provides real-time gas fee estimations to help users make informed decisions.`,
+  },
+  {
+    question: 'How does Blockscout calculate gas fees?',
+    answer: 'Blockscout calculates gas fees based on the average price of gas fees spent for the last 200 blocks.',
+  },
+];
+
+const GasTrackerFaq = () => {
+  return (
+    <Box mt={ 12 }>
+      <Heading as="h2" mb={ 4 } fontSize="2xl" fontWeight="medium">FAQ</Heading>
+      <Accordion>
+        { FAQ_ITEMS.map((item, index) => (
+          <GasTrackerFaqItem key={ index } question={ item.question } answer={ item.answer }/>
+        )) }
+      </Accordion>
+    </Box>
+  );
+};
+
+export default GasTrackerFaq;

ui/gasTracker/GasTrackerFaqItem.tsx

+import {
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Text,
+  chakra,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+interface Props {
+  question: string;
+  answer: string;
+}
+
+const GasTrackerFaqItem = ({ question, answer }: Props) => {
+  const hoverColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const borderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  return (
+    <AccordionItem as="section" _first={{ borderTopWidth: 0 }} _last={{ borderBottomWidth: 0 }} borderColor={ borderColor }>
+      { ({ isExpanded }) => (
+        <>
+          <AccordionButton
+            _hover={{ bgColor: hoverColor }}
+            px={ 0 }
+          >
+            <chakra.h3 flex="1" textAlign="left" fontSize="lg" fontWeight={ 500 }>{ question }</chakra.h3>
+            <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } color="gray.500"/>
+          </AccordionButton>
+          <AccordionPanel pb={ 4 } px={ 0 }>
+            <Text color="text_secondary">{ answer }</Text>
+          </AccordionPanel>
+        </>
+      ) }
+    </AccordionItem>
+  );
+};
+
+export default GasTrackerFaqItem;

ui/pages/GasTracker.pw.tsx

@@ -11,7 +11,10 @@ test.beforeEach(async({ mockTextAd }) => {
   await mockTextAd();
 });
 
-test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, page }) => {
+test('base view +@dark-mode +@mobile', async({ render, mockApiResponse, mockEnvs, page }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED', 'true' ],
+  ]);
   await mockApiResponse('stats', { ...statsMock.base, coin_price: '2442.789' });
   await mockApiResponse('stats_lines', statsLinesMock.base);
   const chartApiUrl = await mockApiResponse(

ui/pages/GasTracker.tsx

-import { Alert, Box, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import {
+  Alert,
+  Box,
+  Flex,
+  Heading,
+  Skeleton,
+  chakra,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -6,6 +13,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasTrackerChart from 'ui/gasTracker/GasTrackerChart';
+import GasTrackerFaq from 'ui/gasTracker/GasTrackerFaq';
 import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization';
 import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices';
 import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer';
@@ -72,6 +80,8 @@ const GasTracker = () => {
     return data?.gas_prices ? <GasTrackerPrices prices={ data.gas_prices } isLoading={ isLoading }/> : null;
   })();
 
+  const faq = config.meta.seo.enhancedDataEnabled ? <GasTrackerFaq/> : null;
+
   return (
     <>
       <PageTitle
@@ -79,12 +89,14 @@ const GasTracker = () => {
         secondRow={ titleSecondRow }
         withTextAd
       />
+      <Heading as="h2" mt={ 8 } mb={ 4 } fontSize="2xl">{ `Track ${ config.chain.name } gas fees` }</Heading>
       { snippets }
       { config.features.stats.isEnabled && (
         <Box mt={ 12 }>
           <GasTrackerChart/>
         </Box>
       ) }
+      { faq }
     </>
   );
 };