diff --git a/lib/metadata/generate.ts b/lib/metadata/generate.ts index ee9c3f55cd..c3d4ed15c5 100644 --- 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(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 index 7fb5df04c1..a05281568c 100644 --- a/lib/metadata/templates/description.ts +++ b/lib/metadata/templates/description.ts @@ -53,7 +53,7 @@ const TEMPLATE_MAP: Record = { '/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 index dca9185e32..4629158bc7 100644 --- a/lib/metadata/templates/title.ts +++ b/lib/metadata/templates/title.ts @@ -50,7 +50,7 @@ const TEMPLATE_MAP: Record = { '/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/gasTracker/GasTrackerFaq.tsx b/ui/gasTracker/GasTrackerFaq.tsx new file mode 100644 index 0000000000..054c0ce990 --- /dev/null +++ b/ui/gasTracker/GasTrackerFaq.tsx @@ -0,0 +1,47 @@ +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 ( + + FAQ + + { FAQ_ITEMS.map((item, index) => ( + + )) } + + + ); +}; + +export default GasTrackerFaq; diff --git a/ui/gasTracker/GasTrackerFaqItem.tsx b/ui/gasTracker/GasTrackerFaqItem.tsx new file mode 100644 index 0000000000..8a15b52636 --- /dev/null +++ b/ui/gasTracker/GasTrackerFaqItem.tsx @@ -0,0 +1,39 @@ +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 ( + + { ({ isExpanded }) => ( + <> + + { question } + + + + { answer } + + + ) } + + ); +}; + +export default GasTrackerFaqItem; diff --git a/ui/pages/GasTracker.pw.tsx b/ui/pages/GasTracker.pw.tsx index 6ad3490e31..3a989cd72c 100644 --- a/ui/pages/GasTracker.pw.tsx +++ b/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( diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx index 69efae2104..177fbae566 100644 --- a/ui/pages/GasTracker.tsx +++ b/ui/pages/GasTracker.tsx @@ -1,4 +1,11 @@ -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 ? : null; })(); + const faq = config.meta.seo.enhancedDataEnabled ? : null; + return ( <> { secondRow={ titleSecondRow } withTextAd /> + { `Track ${ config.chain.name } gas fees` } { snippets } { config.features.stats.isEnabled && ( ) } + { faq } ); }; diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png index 96770c2025..eb2bff6f1b 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png index bedff4b4ab..8298fae2de 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_default_base-view-dark-mode-mobile-1.png differ diff --git a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png index 5a97440915..534e56d864 100644 Binary files a/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/GasTracker.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ