From 1f48a40d87728610e1530d37000dfe7b2c5d4656 Mon Sep 17 00:00:00 2001
From: jo-elimu <1451036+jo-elimu@users.noreply.github.com>
Date: Mon, 1 Jul 2024 13:14:50 +0700
Subject: [PATCH] feat(backend): add attestation handler

refs #34
---
 frontend/src/components/Attestations.tsx      | 96 +++++++++++++++++++
 frontend/src/pages/_app.tsx                   |  3 +-
 .../src/pages/distributions/[queueNumber].tsx |  9 ++
 3 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Attestations.tsx

diff --git a/frontend/src/components/Attestations.tsx b/frontend/src/components/Attestations.tsx
new file mode 100644
index 0000000..c2e10ea
--- /dev/null
+++ b/frontend/src/components/Attestations.tsx
@@ -0,0 +1,96 @@
+import { Address, Avatar, Badge, Identity, Name, getAttestations } from "@coinbase/onchainkit/identity";
+import { useEffect, useState } from "react";
+
+import { base, baseSepolia } from 'wagmi/chains'
+import LoadingIndicator from "./LoadingIndicator";
+import Link from "next/link";
+
+export default function Attestations({ queueIndex }: any) {
+    console.debug("Attestations");
+
+    console.debug("queueIndex:", queueIndex);
+
+    const [data, setData] = useState(null);
+
+    useEffect(() => {
+        fetch("https://base-sepolia.easscan.org/graphql", {
+            method: "POST",
+            headers: {
+                "content-type": "application/json"
+            },
+            body: JSON.stringify({
+                query: `
+                    query AttestationsQuery {
+                        attestations(where: {schemaId: {equals: "0x47ae9f9a75fc6f94927dfcabe6c68ecaad18b8e55db85911b91846017103387e"}}) {
+                            id,
+                            attester,
+                            recipient,
+                            time,
+                            decodedDataJson
+                        }
+                    }
+                `
+            })
+        })
+            .then(response => response.json())
+            .then(result => {
+                console.debug("then");
+                console.debug("result.data:", result.data);
+                setData(result.data);
+            })
+            .catch(error => {
+                console.error("error:", error);
+                // TODO: Handle errors
+            });
+    }, []);
+
+    if (!data) {
+        return <LoadingIndicator />
+    }
+
+    const attestationsData: any = data;
+    console.debug("attestationsData:", attestationsData);
+
+    if (!attestationsData.attestations) {
+        // TODO: Handle errors
+    }
+
+    // const EAS_SCHEMA_ID = "0x47ae9f9a75fc6f94927dfcabe6c68ecaad18b8e55db85911b91846017103387e";
+    // // const attestationOptions = {
+    // //     schemas: [EAS_SCHEMA_ID]
+    // // };
+    // const attestations = getAttestations(address, baseSepolia);
+    // console.log("attestations:", attestations);
+    // return (
+    //     <Identity
+    //         address={address}
+    //         schemaId="0x47ae9f9a75fc6f94927dfcabe6c68ecaad18b8e55db85911b91846017103387e"
+    //         >
+    //         <Avatar className="h-8 w-8 border-2 rounded-full" />
+    //         <Name>
+    //             <Badge />
+    //         </Name>
+    //         <Address />
+    //     </Identity>
+    // )
+
+    return (       
+        attestationsData.attestations.map((attestation: any, i: number) => {
+            return (
+                <div key={i} className="p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
+                    <Name address={attestation.attester} />
+                    <div className="mt-2">
+                        {new Date(attestation.time * 1_000).toISOString().substring(0,10)} {new Date(attestation.time * 1_000).toISOString().substring(11,16)}
+                        <Link href={`https://base-sepolia.easscan.org/attestation/view/${attestation.id}`} target="_blank" className="ml-2">↗</Link>
+                    </div>
+                    <div className="mt-2">
+                        {/* {attestation.decodedDataJson.verified} */}
+                        <span className="px-3 py-1 text-sm text-emerald-400 border-emerald-400 bg-emerald-800 border-2 rounded-2xl">
+                            Verified✅
+                        </span>
+                    </div>
+                </div>
+            )
+        })
+    )
+}
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 7093abb..8499a41 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -2,9 +2,8 @@ import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { WagmiProvider, createConfig, http } from "wagmi";
 import { base, baseSepolia } from 'wagmi/chains'
-// import { wagmiConfig } from "@/config";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RainbowKitProvider, getDefaultConfig, darkTheme, connectorsForWallets } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider, darkTheme, connectorsForWallets } from "@rainbow-me/rainbowkit";
 import { metaMaskWallet, coinbaseWallet } from "@rainbow-me/rainbowkit/wallets";
 
 // Rainbowkit 🌈
diff --git a/frontend/src/pages/distributions/[queueNumber].tsx b/frontend/src/pages/distributions/[queueNumber].tsx
index e3f720a..b2f8c7c 100644
--- a/frontend/src/pages/distributions/[queueNumber].tsx
+++ b/frontend/src/pages/distributions/[queueNumber].tsx
@@ -3,6 +3,7 @@ import MainHeader from "@/components/MainHeader";
 import DistributionSummary from "@/components/DistributionSummary";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import Attestations from "@/components/Attestations";
 
 export default function DistributionDetails() {
   console.debug("DistributionDetails");
@@ -32,6 +33,14 @@ export default function DistributionDetails() {
         <div className="mt-8 p-4 text-2xl bg-zinc-50 dark:bg-zinc-900 rounded-lg">
           <DistributionSummary queueIndex={queueIndex} />
         </div>
+
+        <h2 className="mt-8 text-2xl">
+          Attestations:
+        </h2>
+        
+        <div className="mt-8 text-xl space-y-2">
+          <Attestations queueIndex={queueIndex} />
+        </div>
       </main>
       <MainFooter />
     </>