SEO Tweaks for Gas Tracker Page

blockscout · Oct 30, 2024 · 97e6f08 · 97e6f08
1 parent d5863de
commit 97e6f08
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 3 deletions.
diff --git a/lib/metadata/generate.ts b/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);

diff --git a/lib/metadata/templates/description.ts b/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,
 

diff --git a/lib/metadata/templates/title.ts b/lib/metadata/templates/title.ts
@@ -49,7 +49,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',
 

diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx
@@ -1,9 +1,23 @@
-import { Alert, Box, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import {
+  Alert,
+  Box,
+  Flex,
+  Text,
+  Heading,
+  Skeleton,
+  Accordion,
+  chakra,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  AccordionIcon,
+} from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
 import dayjs from 'lib/date/dayjs';
+import { currencyUnits } from 'lib/units';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import GasTrackerChart from 'ui/gasTracker/GasTrackerChart';
 import GasTrackerNetworkUtilization from 'ui/gasTracker/GasTrackerNetworkUtilization';
@@ -72,19 +86,75 @@ const GasTracker = () => {
     return data?.gas_prices ? <GasTrackerPrices prices={ data.gas_prices } isLoading={ isLoading }/> : null;
   })();
 
+  const faq = config.meta.seo.enhancedDataEnabled ? (
+    <Box mt={ 12 }>
+      <Heading as="h2" mb={ 4 } fontSize="2xl" fontWeight="medium">FAQ</Heading>
+      <Accordion>
+        <AccordionItem>
+          <h3>
+            <AccordionButton>
+              <Text flex="1" textAlign="left">What does gas refer to on the blockchain?</Text>
+              <AccordionIcon/>
+            </AccordionButton>
+          </h3>
+          <AccordionPanel>
+            <Text>Gas is the amount of native tokens required to perform a transaction on the blockchain.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <h3>
+            <AccordionButton>
+              <Text flex="1" textAlign="left">How can I check { config.chain.name } gas fees?</Text>
+              <AccordionIcon/>
+            </AccordionButton>
+          </h3>
+          <AccordionPanel>
+            { /* eslint-disable-next-line max-len */ }
+            <Text>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.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <h3>
+            <AccordionButton>
+              <Text flex="1" textAlign="left">What is the average gas fee for { config.chain.name } transactions?</Text>
+              <AccordionIcon/>
+            </AccordionButton>
+          </h3>
+          <AccordionPanel>
+            { /* eslint-disable-next-line max-len */ }
+            <Text>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.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <h3>
+            <AccordionButton>
+              <Text flex="1" textAlign="left">How does Blockscout calculate gas fees?</Text>
+              <AccordionIcon/>
+            </AccordionButton>
+          </h3>
+          <AccordionPanel>
+            <Text>Blockscout calculates gas fees based on the average price of gas fees spent for the last 200 blocks.</Text>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ) : null;
+
   return (
     <>
       <PageTitle
         title={ config.meta.seo.enhancedDataEnabled ? `${ config.chain.name } gas tracker` : 'Gas tracker' }
         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 }
     </>
   );
 };