feat: As a User, I want to check my POH status (#462)

website/package.json

@@ -17,7 +17,7 @@
   "type": "module",
   "scripts": {
     "build": "tsc && vite build",
-    "dev": "vite",
+    "dev": "vite --force",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

website/src/App.css

@@ -35,7 +35,7 @@
 }
 
 .card {
-    padding: 0.5em;
+    padding: 0.2em;
 }
 
 .read-the-docs {

website/src/App.tsx

@@ -7,7 +7,6 @@ import Navbar from "./components/Navbar.tsx";
 import Footer from "./components/Footer.tsx";
 
 function App() {
-
   return (
     <HashRouter>
       <header>
@@ -16,7 +15,7 @@ function App() {
       <Routes>
         <Route path="*" element={<Home />} />
         <Route path="/sdk-demo" element={<SDKDemo />} />
-        <Route path="/poh-linea" element={<Poh />} />
+        <Route path="/linea-poh" element={<Poh />} />
       </Routes>
       <footer>
         <Footer />

website/src/components/Navbar.tsx

@@ -2,15 +2,20 @@ import { NavLink } from "react-router-dom";
 import "./Navbar.css";
 
 function Navbar() {
-
   return (
     <nav className="navbar navbar-light">
       <div className="container">
         <ul className="nav navbar-nav pull-xs-right">
           <li className="nav-item">
             <NavLink className="navbar-brand" to="/" end>
               Home
-            </NavLink></li>
+            </NavLink>
+          </li>
+          <li className="nav-item">
+            <NavLink className="navbar-brand" to="/linea-poh" end>
+              Linea POH
+            </NavLink>
+          </li>
         </ul>
       </div>
     </nav>

website/src/index.css

@@ -32,8 +32,8 @@ body {
 }
 
 h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
+    font-size: 3em;
+    line-height: 1;
 }
 
 button {

website/src/pages/Poh.css

@@ -0,0 +1,17 @@
+/* container */
+.responsive-two-column-grid {
+    display: block;
+}
+
+/* columns */
+.responsive-two-column-grid > * {
+    padding: 1rem;
+}
+
+/* tablet breakpoint */
+@media (min-width: 768px) {
+    .responsive-two-column-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+}

website/src/pages/Poh.tsx

@@ -1,55 +1,96 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./Poh.css";
 import { ConnectKitButton } from "connectkit";
 import axios from "axios";
 import { useAccount } from "wagmi";
+import { Link } from "react-router-dom";
+
+type IssuerAttestation = {
+  validated: boolean;
+  issuerName: string;
+  issuerSlugName: string;
+  issuerDescription: string;
+  issuerWebsiteUrl: string;
+  issuerLogoUrl: string;
+  group: number;
+};
+
+type POHResponse = {
+  poh: boolean;
+  attestations: IssuerAttestation[];
+};
 
 function Poh() {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [poh, setPoh] = useState<any[]>();
+  const [pohGroupA, setPohGroupA] = useState<IssuerAttestation[]>();
+  const [pohGroupB, setPohGroupB] = useState<IssuerAttestation[]>();
   const [isPoh, setIsPoh] = useState<boolean>();
   const [didCallPoh, setDidCallPoh] = useState<boolean>(false);
 
   const { address, isConnected } = useAccount();
 
-  const getMyPoh = async () => {
-    const { data } = await axios.get(
-      `https://linea-xp-poh-api.dev.linea.build/poh/${address}`,
-      {
+  const initPage = () => {
+    setDidCallPoh(false);
+    setIsPoh(false);
+    setPohGroupA(undefined);
+    setPohGroupB(undefined);
+  };
+
+  useEffect(() => {
+    const getMyPoh = async () => {
+      const { data } = await axios.get<POHResponse>(`https://linea-xp-poh-api.linea.build/poh/${address}`, {
         headers: {
           "Content-Type": "application/json",
           Accept: "application/json",
         },
       });
-    setDidCallPoh(true);
-    setIsPoh(data.poh);
-    setPoh(data.attestations);
+      setDidCallPoh(true);
+      setIsPoh(data.poh);
+      setPohGroupA(data.attestations.filter((attestation) => attestation.group === 1));
+      setPohGroupB(data.attestations.filter((attestation) => attestation.group === 2));
+    };
+
+    isConnected && address ? getMyPoh() : initPage();
+  }, [isConnected, address]);
+
+  const displayPohGroup = (pohGroup?: IssuerAttestation[]) => {
+    return (
+      <>
+        {pohGroup?.map((poh) => (
+          <div key={poh.issuerSlugName} className="card">
+            <Link to={poh.issuerWebsiteUrl} target={"_blank"}>
+              {poh.issuerName}
+            </Link>
+            {poh.validated ? ` ✅` : ` ❌`}
+          </div>
+        ))}
+      </>
+    );
   };
 
   return (
     <>
       <h1>Linea - POH</h1>
-      <p>To check your Proof-of-Humanity status: connect your wallet then click on "Get my POH status".</p>
+      {!didCallPoh && <p>To check your Proof-of-Humanity status, please connect your wallet.</p>}
       <div className="card" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
         <ConnectKitButton />
       </div>
 
-      {isConnected &&
-        <div className="card">
-          <button onClick={getMyPoh}>Get my POH status</button>
-        </div>
-      }
-
-      {didCallPoh &&
-        <div className="card">
-          POH status: {isPoh ? `✅` : `❌`}
-        </div>
-      }
-
-      {poh?.map((poh, index) => (<div key={`${poh.issuerSlugName}-${index}`} className="card">
-        {poh.issuerName}: {poh.validated ? `✅` : `❌`}
-      </div>))
-      }
+      {didCallPoh && (
+        <>
+          <div className="card">Global POH status {isPoh ? ` ✅` : ` ❌`}</div>
+
+          <div className="responsive-two-column-grid">
+            <div>
+              <div className="card">Group 1</div>
+              {displayPohGroup(pohGroupA)}
+            </div>
+            <div>
+              <div className="card">Group 2</div>
+              {displayPohGroup(pohGroupB)}
+            </div>
+          </div>
+        </>
+      )}
     </>
   );
 }