update seo

stargately · Apr 3, 2024 · 98ddbe8 · 98ddbe8
1 parent d92bc7e
commit 98ddbe8
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 19 deletions.
diff --git a/frontend-v2/pages/_document.js b/frontend-v2/pages/_document.js
@@ -1,16 +1,9 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { Provider as StyletronProvider } from "styletron-react";
 import { styletron } from "../src/styletron";
-import { chainConfig } from "../src/common/use-chain-config";
+import { defaultSeoConfig } from "../src/common/seo-head";
 
-const beConfig = {
-  tagline: `${chainConfig.chainName} Blockchain Explorer`,
-  previewImageUrl: "/favicon.svg",
-  title: chainConfig.chainName,
-  description:
-    "Blockroma is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.",
-  twitter: "@stargately",
-};
+const beConfig = defaultSeoConfig;
 
 class MyDocument extends Document {
   static async getInitialProps(context) {

diff --git a/frontend-v2/pages/address/[addressHash].tsx b/frontend-v2/pages/address/[addressHash].tsx
@@ -5,10 +5,12 @@ import { RawNav } from "@/shared/home/components/raw-nav";
 import React from "react";
 import nextI18NextConfig from "../../next-i18next.config.js";
 import { AddressDetailsContainer } from "@/shared/address-details-container/address-details-container";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function AddressHashPage() {
   return (
     <>
+      <SeoHead config={{ title: "Address Details" }} />
       <RawNav />
       <AddressDetailsContainer />
     </>
@@ -20,7 +22,7 @@ export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
     ...(await serverSideTranslations(
       locale ?? "en",
       ["common"],
-      nextI18NextConfig,
+      nextI18NextConfig
     )),
   },
 });

diff --git a/frontend-v2/pages/block/[blockNumber].tsx b/frontend-v2/pages/block/[blockNumber].tsx
@@ -4,10 +4,12 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { RawNav } from "@/shared/home/components/raw-nav";
 import React from "react";
 import nextI18NextConfig from "../../next-i18next.config.js";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function BlockDetailsPage() {
   return (
     <>
+      <SeoHead config={{ title: "Block Details" }} />
       <RawNav />
       <BlockDetailsContainer />
     </>
@@ -19,7 +21,7 @@ export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
     ...(await serverSideTranslations(
       locale ?? "en",
       ["common"],
-      nextI18NextConfig,
+      nextI18NextConfig
     )),
   },
 });

diff --git a/frontend-v2/pages/blocks.tsx b/frontend-v2/pages/blocks.tsx
@@ -3,10 +3,12 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { RawNav } from "@/shared/home/components/raw-nav";
 import { BlksTableContainer } from "@/shared/blks-table-container/blks-table-container";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function BlocksPage() {
   return (
     <div>
+      <SeoHead config={{ title: "Blocks" }} />
       <RawNav />
       <BlksTableContainer />
     </div>

diff --git a/frontend-v2/pages/index.tsx b/frontend-v2/pages/index.tsx
@@ -4,10 +4,12 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { Home } from "@/shared/home";
 import { RawNav } from "@/shared/home/components/raw-nav";
 import { Footer } from "@/shared/common/footer";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function Index() {
   return (
     <div>
+      <SeoHead />
       <RawNav />
       <Home />
       <Footer />

diff --git a/frontend-v2/pages/tokens.tsx b/frontend-v2/pages/tokens.tsx
@@ -3,10 +3,12 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { RawNav } from "@/shared/home/components/raw-nav";
 import { TokensContainer } from "@/shared/token-container/tokens-container";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function TokensPage() {
   return (
     <div>
+      <SeoHead config={{ title: "Tokens" }} />
       <RawNav />
       <TokensContainer />
     </div>

diff --git a/frontend-v2/pages/tx/[txHash].tsx b/frontend-v2/pages/tx/[txHash].tsx
@@ -4,11 +4,13 @@ import { RawNav } from "@/shared/home/components/raw-nav";
 import React from "react";
 import nextI18NextConfig from "../../next-i18next.config.js";
 import { TxDetailsContainer } from "@/shared/tx-details-container/tx-details-container";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function TxHashPage() {
   return (
     <>
       <RawNav />
+      <SeoHead config={{ title: "Transaction Hash Details" }} />
       <TxDetailsContainer />
     </>
   );
@@ -19,7 +21,7 @@ export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
     ...(await serverSideTranslations(
       locale ?? "en",
       ["common"],
-      nextI18NextConfig,
+      nextI18NextConfig
     )),
   },
 });

diff --git a/frontend-v2/pages/txs/index.tsx b/frontend-v2/pages/txs/index.tsx
@@ -5,10 +5,12 @@ import { RawNav } from "@/shared/home/components/raw-nav";
 import React from "react";
 import nextI18NextConfig from "../../next-i18next.config.js";
 import { TxsTableContainer } from "@/shared/txs-table-container/txs-table-container";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export default function TxsPage() {
   return (
     <>
+      <SeoHead config={{ title: "Transactions" }} />
       <RawNav />
       <TxsTableContainer />
     </>
@@ -20,7 +22,7 @@ export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
     ...(await serverSideTranslations(
       locale ?? "en",
       ["common"],
-      nextI18NextConfig,
+      nextI18NextConfig
     )),
   },
 });
diff --git a/frontend-v2/src/common/seo-head.tsx b/frontend-v2/src/common/seo-head.tsx
@@ -0,0 +1,36 @@
+import Head from "next/head";
+import React from "react";
+import { chainConfig } from "@/shared/common/use-chain-config";
+
+export const defaultSeoConfig = {
+  title: chainConfig.chainName,
+  tagline: `${chainConfig.chainName} Blockchain Explorer`,
+  previewImageUrl: "/favicon.svg",
+  description:
+    "Blockroma is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.",
+  twitter: "@stargately",
+};
+
+export const SeoHead: React.FC<{
+  config?: Partial<typeof defaultSeoConfig>;
+}> = (config = { config: defaultSeoConfig }) => {
+  const seoConfig = {
+    ...defaultSeoConfig,
+    ...config.config,
+  };
+  return (
+    <Head>
+      <title>{seoConfig.title}</title>
+      <meta name="twitter:site" content={seoConfig.twitter} />
+      <meta name="twitter:image" content={seoConfig.previewImageUrl} />
+      <meta name="twitter:title" content={seoConfig.title} />
+      <meta name="twitter:description" content={seoConfig.description} />
+      <meta property="og:description" content={seoConfig.description} />
+      <meta
+        property="og:image"
+        name="og:image"
+        content={seoConfig.previewImageUrl}
+      />
+    </Head>
+  );
+};
diff --git a/frontend-v2/src/tx-details-container/tx-details-container.tsx b/frontend-v2/src/tx-details-container/tx-details-container.tsx
@@ -13,6 +13,7 @@ import { DataInput } from "../explorer-components/data-input";
 import { useTranslation } from "next-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { SeoHead } from "@/shared/common/seo-head";
 
 export function TxDetailsContainer(): JSX.Element {
   const { t } = useTranslation("common");
@@ -38,10 +39,20 @@ export function TxDetailsContainer(): JSX.Element {
     return (
       <div className="container-fluid h-100">
         <div className="row h-100 justify-content-center align-items-center">
-          <div className="col-xs-12 text-center" style={{height: "100vh", display: "flex", justifyContent: "center", alignItems: "center"}}>
+          <div
+            className="col-xs-12 text-center"
+            style={{
+              height: "100vh",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
             <div className="message-box">
               <p>Transaction not found. The </p>
-              <button className="btn btn-primary" onClick={() => refetch()}>Refetch</button>
+              <button className="btn btn-primary" onClick={() => refetch()}>
+                Refetch
+              </button>
             </div>
           </div>
         </div>
@@ -56,11 +67,14 @@ export function TxDetailsContainer(): JSX.Element {
   } catch (err) {
     console.error(`failed to calc txFee: ${err}`);
   }
-
+  if (!tx) {
+    // TODO(dora):
+    return <></>;
+  }
   return (
     <main className="pt-4">
-      <p className="alert alert-info" role="alert"/>
-      <p className="alert alert-danger" role="alert"/>
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
       <section className="container">
         <section
           className="fs-14"
@@ -221,7 +235,7 @@ export function TxDetailsContainer(): JSX.Element {
                         {" | "}
                         {format(
                           new Date(tx?.timestamp),
-                          "MMM-d-y hh:mm:ss a x",
+                          "MMM-d-y hh:mm:ss a x"
                         )}{" "}
                         UTC
                       </span>