fix: seo title, description page

AstraProtocol · Mar 1, 2023 · 3ced72d · 3ced72d
1 parent 6bff92f
commit 3ced72d
Show file tree

Hide file tree

Showing 17 changed files with 205 additions and 251 deletions.
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -21,4 +21,15 @@ const Home: React.FC<NextPage> = _ => {
 		</Layout>
 	)
 }
+
+
+export async function getServerSideProps({}) {
+	return {
+		props: {
+			title: `404 Not Found`
+		}
+	}
+}
+
+
 export default Home
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,24 +1,23 @@
-import '@astraprotocol/astra-ui/lib/shared/style.css'
 import { cosmosFetcher, evmFetcher } from 'api'
 import InitPage from 'components/Loader/InitPage'
 import PageLoader from 'components/Loader/PageLoader'
 import dayjs from 'dayjs'
 import { NextIntlProvider } from 'next-intl'
-import { NextSeo } from 'next-seo'
 import type { NextWebVitalsMetric } from 'next/app'
 import { AppProps } from 'next/app'
-import Head from 'next/head'
 import { event, GoogleAnalytics } from 'nextjs-google-analytics'
 import { Provider } from 'react-redux'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 import { PersistGate } from 'redux-persist/integration/react'
 
+import '@astraprotocol/astra-ui/lib/shared/style.css'
+import { NextSeo } from 'next-seo'
+import Head from 'next/head'
 import { SWRConfig } from 'swr'
 import '../prism-theme/dark.scss'
 import store, { persistor } from '../store'
 import '../styles.css'
-
 dayjs.locale('en')
 
 export function reportWebVitals(metric: NextWebVitalsMetric) {
@@ -32,6 +31,10 @@ export function reportWebVitals(metric: NextWebVitalsMetric) {
 }
 
 const App = ({ Component, pageProps }: AppProps) => {
+	const { title, description }: { title?: string; description?: string } = pageProps
+	const defaultDescription =
+		'Astra Explorer allows you to explore and search the Astra blockchain for transactions, addresses, tokens, prices and other activities taking place on Astra (ASA)'
+
 	const _detectFetcher = (rest: any[]) => {
 		const path = rest[0] as string
 		let fetcher = cosmosFetcher
@@ -41,11 +44,40 @@ const App = ({ Component, pageProps }: AppProps) => {
 		}
 		return fetcher.apply(null, rest)
 	}
+
 	return (
 		<Provider store={store}>
 			<Head>
-				<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+				<meta
+					name="viewport"
+					content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1, viewport-fit=cover"
+				/>
 			</Head>
+			<NextSeo
+				title={title}
+				titleTemplate={`%s | ${process.env.NEXT_PUBLIC_TITLE}`}
+				defaultTitle={process.env.NEXT_PUBLIC_TITLE}
+				description={description || defaultDescription}
+				canonical={process.env.NEXT_PUBLIC_URL}
+				openGraph={{
+					url: process.env.NEXT_PUBLIC_URL,
+					title: `${title} | ${process.env.NEXT_PUBLIC_TITLE}`,
+					description: description || defaultDescription,
+					images: [
+						{
+							url: '/images/logo/transparent_logo.png',
+							width: 55,
+							height: 55,
+							alt: process.env.NEXT_PUBLIC_TITLE
+						}
+					]
+				}}
+				twitter={{
+					handle: '@AstraOfficial5',
+					site: '@AstraOfficial5',
+					cardType: 'summary_large_image'
+				}}
+			/>
 			<PersistGate loading={<InitPage />} persistor={persistor}>
 				<NextIntlProvider messages={(pageProps as typeof pageProps & { messages: any }).messages}>
 					<SWRConfig
@@ -60,36 +92,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 						}}
 					>
 						<>
-							<Head>
-								<meta name="viewport" content="initial-scale=1.0, width=device-width" />
-							</Head>
-							<NextSeo
-								title={process.env.NEXT_PUBLIC_TITLE}
-								titleTemplate={process.env.NEXT_PUBLIC_TITLE}
-								defaultTitle={process.env.NEXT_PUBLIC_TITLE}
-								description="Astra Explorer allows you to explore and search the Astra blockchain for transactions, addresses, tokens, prices and other activities taking place on Astra (ASA)"
-								canonical={process.env.NEXT_PUBLIC_URL}
-								openGraph={{
-									url: process.env.NEXT_PUBLIC_URL,
-									title: process.env.NEXT_PUBLIC_TITLE,
-									description:
-										'Astra Explorer allows you to explore and search the Astra blockchain for transactions, addresses, tokens, prices and other activities taking place on Astra (ASA)',
-									images: [
-										{
-											url: '/og-image.png',
-											width: 800,
-											height: 420,
-											alt: process.env.NEXT_PUBLIC_TITLE
-										}
-									]
-								}}
-								twitter={{
-									handle: '@AstraOfficial5',
-									site: '@AstraOfficial5',
-									cardType: 'summary_large_image'
-								}}
-							/>
-							<GoogleAnalytics trackPageViews />
+							{process.env.NODE_ENV === 'production' && <GoogleAnalytics trackPageViews />}
 							<PageLoader />
 							<ToastContainer toastClassName="dark--mode" />
 							<Component {...pageProps} />

diff --git a/pages/_error.tsx b/pages/_error.tsx
@@ -35,4 +35,12 @@ CustomErrorComponent.getInitialProps = async contextData => {
 	return NextErrorComponent.getInitialProps(contextData)
 }
 
+export async function getServerSideProps({}) {
+	return {
+		props: {
+			title: `Error Page`
+		}
+	}
+}
+
 export default CustomErrorComponent
diff --git a/pages/accounts.tsx b/pages/accounts.tsx
@@ -5,7 +5,6 @@ import RowLoader from 'components/Loader/RowLoader'
 import { PageTitle } from 'components/Typography/PageTitle'
 import usePaginationLite from 'hooks/usePaginationLite'
 import { NextPage } from 'next'
-import Head from 'next/head'
 import React, { useState } from 'react'
 import { getEnvNumber } from 'utils/helper'
 import HolderHeadTitle from 'views/accounts/HolderHeadTitle'
@@ -29,9 +28,6 @@ const AstraHolderPage: React.FC<NextPage> = _ => {
 
 	return (
 		<Layout>
-			<Head>
-				<title>Astra Holders | {process.env.NEXT_PUBLIC_TITLE}</title>
-			</Head>
 			<Container>
 				<Row style={{ justifyContent: 'space-between' }}>
 					<PageTitle>Astra Address</PageTitle>
@@ -61,4 +57,12 @@ const AstraHolderPage: React.FC<NextPage> = _ => {
 	)
 }
 
+export async function getServerSideProps({}) {
+	return {
+		props: {
+			title: `Astra Holders`
+		}
+	}
+}
+
 export default AstraHolderPage
diff --git a/pages/address/[address].tsx b/pages/address/[address].tsx
@@ -5,8 +5,6 @@ import { cosmosApi } from 'api'
 import API_LIST from 'api/api_list'
 import { AxiosError } from 'axios'
 import Container from 'components/Container'
-import { isEmpty } from 'lodash'
-import Head from 'next/head'
 import React from 'react'
 import { getValidatorSummary } from 'slices/commonSlice'
 import { useAppSelector } from 'store/hooks'
@@ -30,24 +28,14 @@ const AddressDetailPage: React.FC<Props> = props => {
 
 	const isMainnet = window?.location?.hostname?.includes('.astranaut.io')
 	const validator = validatorSummary.find((v: ValidatorData) => astraToEth(v.initialDelegatorAddress) === address)
-	const isValidator = !isEmpty(validator)
-	const isContract = addressData?.type === 'contractaddress'
-	const title = isValidator
-		? `Validator ${validator.moniker} | ${process.env.NEXT_PUBLIC_TITLE}`
-		: isContract
-		? `Contract ${address} | ${process.env.NEXT_PUBLIC_TITLE}`
-		: `Address ${address} | ${process.env.NEXT_PUBLIC_TITLE}`
+
 	return (
 		<Layout>
-			<Head>
-				<meta name="viewport" content="initial-scale=1.0, width=device-width" />
-				<title>{title}</title>
-			</Head>
 			<Container>
 				<Breadcumbs
 					items={[
 						{
-							label: isValidator ? `Validator ${validator.moniker}` : isContract ? 'Contract' : 'Address',
+							label: 'Address', // isValidator ? `Validator ${validator.moniker}` : isContract ? 'Contract' : 'Address',
 							link: LinkMaker.address()
 						},
 						{ label: isMobile ? ellipseBetweenText(address) : address }
@@ -74,52 +62,41 @@ const AddressDetailPage: React.FC<Props> = props => {
 
 export async function getServerSideProps({ params }) {
 	let { address } = params
-	let addressData
 
 	if (address && address.startsWith('astra')) address = astraToEth(address)
-	if (web3.utils.isAddress(address))
+	let errorMessage = ''
+	let addressData
+
+	if (web3.utils.isAddress(address)) {
 		try {
 			const addressRes = await cosmosApi.get<AddressDetailResponse>(`${API_LIST.ADDRESS_DETAIL}/${address}`)
 			addressData = addressRes.data.result
 			if (!addressData) {
-				return {
-					props: {
-						errorMessage: '404 Not Found',
-						address,
-						addressData: null
-					}
-				}
-			}
-			return {
-				props: {
-					address,
-					addressData
-				}
+				errorMessage = '404 Not Found'
 			}
 		} catch (e) {
 			// console.log(e.message)
 			Sentry.captureException(e)
-			let errorMessage = e.message
+			errorMessage = e.message
 			if (e instanceof AxiosError) {
-				console.log('error api', e.message, e.code, e?.config?.baseURL, e?.config?.url)
 				if (e.code !== '200') errorMessage = '404 Not Found'
 			}
-			return {
-				props: {
-					errorMessage,
-					address,
-					addressData: null
-				}
-			}
 		}
+	} else {
+		errorMessage = 'Address invalid'
+	}
 
 	return {
 		props: {
-			errorMessage: 'Address invalid',
+			title: `Address ${address}`,
+			errorMessage,
 			address,
-			addressData: null
+			addressData,
+			description: `The Address ${address} page allows users to view transactions, balances, token holdings and transfers of ERC-20, ERC-721 and ERC-1155 (NFT) tokens, and analytics.`
 		}
 	}
 }
 
+
+
 export default AddressDetailPage
diff --git a/pages/blocks/[block].tsx → pages/block/[block].tsx b/pages/blocks/[block].tsx → pages/block/[block].tsx
@@ -8,7 +8,6 @@ import BackgroundCard from 'components/Card/Background/BackgroundCard'
 import CardInfo, { CardRowItem } from 'components/Card/CardInfo'
 import Container from 'components/Container'
 import Tabs from 'components/Tabs/Tabs'
-import Head from 'next/head'
 import React from 'react'
 import { getStakingValidatorByHex } from 'utils/address'
 import { CardInfoLabels } from 'utils/enum'
@@ -38,23 +37,26 @@ const BlockDetailPage: React.FC<Props> = ({ errorMessage, blockDetail, blockHeig
 					})
 					break
 				case 'committedCouncilNodes': //from
-					const proposerHash = data[key].find(item => item.isProposer).address
-					const proposer = getStakingValidatorByHex(proposerHash) as Proposer
+					const proposerHash = data[key].find(item => item.isProposer)?.address
+					const proposer = proposerHash && (getStakingValidatorByHex(proposerHash) as Proposer)
 					const address =
-						proposer?.initialDelegatorAddress && astraToEth(proposer?.initialDelegatorAddress || '')
-					items.push({
-						label: CardInfoLabels.validatorAddress,
-						type: 'link-copy',
-						contents: [
-							{
-								value: address,
-								link: LinkMaker.address(
-									proposer?.initialDelegatorAddress &&
-										astraToEth(proposer?.initialDelegatorAddress || '')
-								)
-							}
-						]
-					})
+						proposer && proposer.initialDelegatorAddress
+							? astraToEth(proposer?.initialDelegatorAddress || '')
+							: null
+					if (address)
+						items.push({
+							label: CardInfoLabels.validatorAddress,
+							type: 'link-copy',
+							contents: [
+								{
+									value: address,
+									link: LinkMaker.address(
+										proposer?.initialDelegatorAddress &&
+											astraToEth(proposer?.initialDelegatorAddress || '')
+									)
+								}
+							]
+						})
 					break
 				case 'blockHeight':
 					items.push({
@@ -106,11 +108,6 @@ const BlockDetailPage: React.FC<Props> = ({ errorMessage, blockDetail, blockHeig
 
 	return (
 		<Layout>
-			<Head>
-				<title>
-					Block {blockHeight} | {process.env.NEXT_PUBLIC_TITLE}
-				</title>
-			</Head>
 			<Container>
 				<Breadcumbs items={[{ label: 'Blocks', link: LinkMaker.block() }, { label: '#' + blockHeight }]} />
 				{blockDetail ? (
@@ -143,33 +140,31 @@ const BlockDetailPage: React.FC<Props> = ({ errorMessage, blockDetail, blockHeig
 // This gets called on every request
 export async function getServerSideProps({ params }) {
 	const { block: blockHeight } = params
+	let errorMessage
+	let blockDetail
+
 	try {
 		const blockRes = await cosmosApi.get<BlockDetailResponse>(`${API_LIST.BLOCKS}${blockHeight}`)
 
 		if (blockRes?.data?.result) {
-			return { props: { blockDetail: blockRes.data.result, blockHeight } }
+			blockDetail = blockRes.data.result
 		} else {
-			return {
-				props: {
-					errorMessage: '404 Not Found',
-					blockDetail: null,
-					blockHeight
-				}
-			}
+			errorMessage = '404 Not Found'
 		}
 	} catch (e) {
 		Sentry.captureException(e)
-		let errorMessage = e.message
+		errorMessage = e.message
 		if (e instanceof AxiosError) {
-			console.log('error api', e.message, e.code, e?.config?.baseURL, e?.config?.url)
 			if (e.code !== '200') errorMessage = '404 Not Found'
 		}
-		return {
-			props: {
-				errorMessage,
-				blockDetail: null,
-				blockHeight
-			}
+	}
+	return {
+		props: {
+			errorMessage,
+			blockDetail,
+			blockHeight,
+			title: `Astra Block ${blockHeight}`,
+			description: `Astra Block Height ${blockHeight}. The timestamp, block reward, gas used and the number of transactions in the block are detailed on Astra Explorer.`
 		}
 	}
 }