From 2e1164c875b22de351bcb75ec6da8cf446c8502a Mon Sep 17 00:00:00 2001
From: Alain Nicolas <alainncls@users.noreply.github.com>
Date: Wed, 20 Dec 2023 19:22:42 +0100
Subject: [PATCH] feat: Add a title to the website pages (#484)

---
 website/src/App.tsx           |  6 +++---
 website/src/pages/Home.tsx    | 18 ++++++++++++++----
 website/src/pages/Poh.tsx     | 13 +++++++++++--
 website/src/pages/SDKDemo.tsx | 27 +++++++++++++++++++--------
 4 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/website/src/App.tsx b/website/src/App.tsx
index 121cb391..c65b95b3 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -13,9 +13,9 @@ function App() {
         <Navbar />
       </header>
       <Routes>
-        <Route path="*" element={<Home />} />
-        <Route path="/sdk-demo" element={<SDKDemo />} />
-        <Route path="/linea-poh" element={<Poh />} />
+        <Route path="*" element={<Home title={"Verax Attestation Registry"} />} />
+        <Route path="/sdk-demo" element={<SDKDemo title={"Verax | SDK Demo"} />} />
+        <Route path="/linea-poh" element={<Poh title={"Verax | Linea POH"} />} />
       </Routes>
       <footer>
         <Footer />
diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx
index 4d794534..277b9ba0 100644
--- a/website/src/pages/Home.tsx
+++ b/website/src/pages/Home.tsx
@@ -1,7 +1,15 @@
 import veraxLogo from "../assets/verax-logo-circle.svg";
 import "./Home.css";
+import { type FunctionComponent, useEffect } from "react";
 
-function Home() {
+export type HomeProps = {
+  title: string;
+};
+
+export const Home: FunctionComponent<HomeProps> = ({ title }) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
 
   return (
     <>
@@ -12,10 +20,12 @@ function Home() {
       </div>
 
       <h1>Verax Attestation Registry</h1>
-      <p>Verax is a shared registry for storing attestations of public interest on EVM chains,<br /> designed to enhance
-        data discoverability and consumption for dApps across the network. </p>
+      <p>
+        Verax is a shared registry for storing attestations of public interest on EVM chains,
+        <br /> designed to enhance data discoverability and consumption for dApps across the network.{" "}
+      </p>
     </>
   );
-}
+};
 
 export default Home;
diff --git a/website/src/pages/Poh.tsx b/website/src/pages/Poh.tsx
index 3938355f..e6813f8c 100644
--- a/website/src/pages/Poh.tsx
+++ b/website/src/pages/Poh.tsx
@@ -1,3 +1,4 @@
+import type { FunctionComponent } from "react";
 import { useEffect, useState } from "react";
 import "./Poh.css";
 import { ConnectKitButton } from "connectkit";
@@ -5,6 +6,10 @@ import axios from "axios";
 import { useAccount } from "wagmi";
 import { Link } from "react-router-dom";
 
+export type PohProps = {
+  title: string;
+};
+
 type IssuerAttestation = {
   validated: boolean;
   issuerName: string;
@@ -20,7 +25,7 @@ type POHResponse = {
   attestations: IssuerAttestation[];
 };
 
-function Poh() {
+export const Poh: FunctionComponent<PohProps> = ({ title }) => {
   const [pohGroupA, setPohGroupA] = useState<IssuerAttestation[]>();
   const [pohGroupB, setPohGroupB] = useState<IssuerAttestation[]>();
   const [isPoh, setIsPoh] = useState<boolean>();
@@ -35,6 +40,10 @@ function Poh() {
     setPohGroupB(undefined);
   };
 
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
   useEffect(() => {
     const getMyPoh = async () => {
       const { data } = await axios.get<POHResponse>(`https://linea-xp-poh-api.linea.build/poh/${address}`, {
@@ -116,6 +125,6 @@ function Poh() {
       )}
     </>
   );
-}
+};
 
 export default Poh;
diff --git a/website/src/pages/SDKDemo.tsx b/website/src/pages/SDKDemo.tsx
index 339620cd..db2015f4 100644
--- a/website/src/pages/SDKDemo.tsx
+++ b/website/src/pages/SDKDemo.tsx
@@ -1,10 +1,14 @@
-import { useEffect, useState } from "react";
+import { type FunctionComponent, useEffect, useState } from "react";
 import "./SDKDemo.css";
 import { ConnectKitButton } from "connectkit";
 import { Attestation, VeraxSdk } from "@verax-attestation-registry/verax-sdk";
 import { useAccount, useNetwork } from "wagmi";
 
-function SDKDemo() {
+export type SDKDemoProps = {
+  title: string;
+};
+
+export const SDKDemo: FunctionComponent<SDKDemoProps> = ({ title }) => {
   const [attestations, setAttestations] = useState<Attestation[]>([]);
   const [attestationsCounter, setAttestationsCounter] = useState<number>(0);
   const [txHash, setTxHash] = useState<string>("");
@@ -14,9 +18,14 @@ function SDKDemo() {
   const { address, isConnected } = useAccount();
   const { chain } = useNetwork();
 
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
   useEffect(() => {
     if (chain && address) {
-      const sdkConf = chain.id === 59144 ? VeraxSdk.DEFAULT_LINEA_MAINNET_FRONTEND : VeraxSdk.DEFAULT_LINEA_TESTNET_FRONTEND;
+      const sdkConf =
+        chain.id === 59144 ? VeraxSdk.DEFAULT_LINEA_MAINNET_FRONTEND : VeraxSdk.DEFAULT_LINEA_TESTNET_FRONTEND;
       const sdk = new VeraxSdk(sdkConf, address);
       setVeraxSdk(sdk);
     }
@@ -67,7 +76,6 @@ function SDKDemo() {
     }
   };
 
-
   return (
     <>
       <h1>Verax - SDK Demo</h1>
@@ -80,8 +88,9 @@ function SDKDemo() {
         {attestations.length > 0 && (
           <>
             {attestations.map((attestation) => (
-              <pre
-                key={attestation.id}>ID = {shortenHexString(attestation.id)} - Subject = {shortenHexString(attestation.subject)}</pre>
+              <pre key={attestation.id}>
+                ID = {shortenHexString(attestation.id)} - Subject = {shortenHexString(attestation.subject)}
+              </pre>
             ))}
           </>
         )}
@@ -93,12 +102,14 @@ function SDKDemo() {
       </div>
 
       <div className="card">
-        <button onClick={createAnAttestation} disabled={!isConnected}>Create an attestation via a Portal</button>
+        <button onClick={createAnAttestation} disabled={!isConnected}>
+          Create an attestation via a Portal
+        </button>
         {txHash !== "" && <p>{`Transaction with hash ${txHash} sent!`}</p>}
         {error !== "" && <p style={{ color: "red" }}>{error}</p>}
       </div>
     </>
   );
-}
+};
 
 export default SDKDemo;