updated ux, fixed queries to only fetch attestation made using this a…

src/app/_components/ManageAttestation.tsx

@@ -16,8 +16,13 @@ import { useCallback, useMemo } from "react";
 import { formatTime } from "@/lib/formatTime";
 import { useRouter } from "next/navigation";
 import { trimAddress } from "@/lib/trimAddress";
+import { useSigner } from "@/hooks/useSigner";
 const ManageAttestation: NextPage = () => {
   const { attestations, loading, error } = useGetAttestations();
+  const signer = useSigner();
+  const userWalletAddress = useMemo(() => {
+    return signer?.getAddress();
+  }, [signer]);
 
   const router = useRouter();
   const handleNavigateById = useCallback(
@@ -101,14 +106,23 @@ const ManageAttestation: NextPage = () => {
   if (error) {
     return <p>{error.message}</p>;
   }
+  if (!userWalletAddress) {
+    return (
+      <div className=" h-full w-full">
+        <div className="flex items-center justify-normal">
+          <p> Please connect your wallet to view attestations</p>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div>
       <Table>
         <TableCaption>
-          {attestations
-            ? "A list of your attestations"
-            : "Please connect wallet"}
+          {attestations && attestations.length === 0
+            ? "No attestations found"
+            : "Manage Attestations"}
         </TableCaption>
         <TableHeader>{renderTableHeader()}</TableHeader>
         <TableBody>{renderTableRows()}</TableBody>

src/app/_components/Navbar.tsx

@@ -12,10 +12,8 @@ import Link from "next/link";
 
 function Navbar() {
   const navItems = [
-    { label: "History", href: "/history" },
     { label: "PGP Score", href: "/pgp-score" },
     { label: "Manage", href: "/manage" },
-    { label: "Search", href: "/search" },
   ];
 
   return (

src/app/_components/PGPKeyForm.tsx

@@ -12,6 +12,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { getKeyFingerprint } from "@/lib/getKeyFingerprint";
 import { Separator } from "@/components/ui/separator";
+import { THIRD_PARTY_ATTESTATION_SCHEMA_UID } from "@/hooks/useAttestationCreation";
 
 type InputType = "publicKey" | "fingerprint";
 
@@ -86,9 +87,7 @@ export const PGPKeyForm: React.FC = () => {
       <div>
         <div className="description-text">
           <div>Third party Attestation Schema</div>
-          <div>
-            UID:0xa2bcb9b27c17c609a12e38f848118af93fcd7d6ea6f6f7d4cb234ce33e568c63
-          </div>
+          <div>UID:{THIRD_PARTY_ATTESTATION_SCHEMA_UID}</div>
         </div>
       </div>
       <Separator />

src/app/_components/SearchAttestation.tsx

@@ -81,13 +81,14 @@ const SearchAttestation: React.FC = () => {
   };
 
   return (
-    <div className="w-full p-4">
+    <div className="w-full ">
+      <h1 className="text-2xl p-4 font-bold">Search Attestation</h1>
       <Input
         type="text"
         value={searchKey}
         onChange={handleInputChange}
         placeholder="Enter attestation UID or fingerprint"
-        className="w-full p-2 mb-4 border rounded-md"
+        className="w-full p-8 mb-4 border rounded-md"
       />
       {loading && <p>Loading...</p>}
       {error && <p className="text-red-500">{error.message}</p>}

src/app/page.tsx

@@ -22,6 +22,7 @@ const App: React.FC = () => {
   return (
     // <Layout>
     <div className="space-y-8">
+      <SearchAttestation />
       <Card>
         <CardHeader>
           <CardTitle>PGP Attestation Schemas</CardTitle>

src/components/Layout.tsx

@@ -4,9 +4,9 @@ import Footer from "./Footer";
 
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
-    <div className="min-h-screen bg-gray-100 text-gray-900">
+    <div className="flex flex-col min-h-screen bg-gray-100 text-gray-900">
       <Header />
-      <main className="min-h-96 container mx-auto py-8 my-12 bg-white shadow-custom-drop-shadow rounded-[20px] ">
+      <main className="flex-grow container mx-auto py-8 my-12 bg-white shadow-custom-drop-shadow rounded-[20px]">
         {children}
       </main>
       <Footer />

src/hooks/useAttestationCreation.ts

@@ -13,26 +13,25 @@ export const THIRD_PARTY_ATTESTATION_SCHEMA =
   "string publicKeyOrFingerprint, uint8 trustLevel, string metadata, uint256 timestamp";
 
 export const SELF_ATTESTATION_SCHEMA_ENCODER = new SchemaEncoder(
-  SELF_ATTESTATION_SCHEMA,
+  SELF_ATTESTATION_SCHEMA
 );
 export const THIRD_PARTY_ATTESTATION_SCHEMA_ENCODER = new SchemaEncoder(
-  THIRD_PARTY_ATTESTATION_SCHEMA,
+  THIRD_PARTY_ATTESTATION_SCHEMA
 );
 
 export const SELF_ATTESTATION_SCHEMA_UID = keccak256(
   encodePacked(
     ["string", "address", "bool"],
-    [SELF_ATTESTATION_SCHEMA, zeroAddress, true],
-  ),
+    [SELF_ATTESTATION_SCHEMA, zeroAddress, true]
+  )
 );
 
 export const THIRD_PARTY_ATTESTATION_SCHEMA_UID = keccak256(
   encodePacked(
     ["string", "address", "bool"],
-    [THIRD_PARTY_ATTESTATION_SCHEMA, zeroAddress, true],
-  ),
+    [THIRD_PARTY_ATTESTATION_SCHEMA, zeroAddress, true]
+  )
 );
-
 export const useAttestationCreation = () => {
   const { eas } = useEASConnection();
 
@@ -70,14 +69,14 @@ export const useAttestationCreation = () => {
 
       return await tx.wait();
     },
-    [eas],
+    [eas]
   );
 
   const createThirdPartyAttestation = useCallback(
     async (
       publicKeyOrFingerprint: string,
       trustLevel: number,
-      metadata: string,
+      metadata: string
     ): Promise<string> => {
       if (!eas) throw new Error("EAS not initialized");
 
@@ -110,7 +109,7 @@ export const useAttestationCreation = () => {
 
       return await tx.wait();
     },
-    [eas],
+    [eas]
   );
 
   return { createSelfAttestation, createThirdPartyAttestation };

src/lib/graphql/queries.ts

@@ -1,8 +1,22 @@
+import {
+  SELF_ATTESTATION_SCHEMA_UID,
+  THIRD_PARTY_ATTESTATION_SCHEMA_UID,
+} from "@/hooks/useAttestationCreation";
 import { gql } from "urql";
 
 export const ATTESTATIONS_FOR_SPECIFIC_ATTESTER = gql`
   query AttestationsForSpecificAttester($attester: String!) {
-    attestations(where: { attester: { equals: $attester } }) {
+    attestations(
+      where: {
+        attester: { equals: $attester }
+        schemaId: {
+          in: [
+            "${THIRD_PARTY_ATTESTATION_SCHEMA_UID}"
+            "${SELF_ATTESTATION_SCHEMA_UID}"
+          ]
+        }
+      }
+    ) {
       id
       attester
       recipient
@@ -21,9 +35,14 @@ export const ATTESTATIONS_FOR_SPECIFIC_KEY = gql`
   query ($publicKeyOrFingerprintOrUid: String!) {
     selfAttestations: attestations(
       where: {
-        OR: [
-          { id: { equals: $publicKeyOrFingerprintOrUid } }
-          { decodedDataJson: { contains: $publicKeyOrFingerprintOrUid } }
+        AND: [
+          { schemaId: { equals: "${SELF_ATTESTATION_SCHEMA_UID}" } }
+          {
+            OR: [
+              { id: { equals: $publicKeyOrFingerprintOrUid } }
+              { decodedDataJson: { contains: $publicKeyOrFingerprintOrUid } }
+            ]
+          }
         ]
       }
     ) {
@@ -35,9 +54,14 @@ export const ATTESTATIONS_FOR_SPECIFIC_KEY = gql`
     }
     thirdPartyAttestations: attestations(
       where: {
-        OR: [
-          { id: { equals: $publicKeyOrFingerprintOrUid } }
-          { decodedDataJson: { contains: $publicKeyOrFingerprintOrUid } }
+        AND: [
+          { schemaId: { equals: "${THIRD_PARTY_ATTESTATION_SCHEMA_UID}" } }
+          {
+            OR: [
+              { id: { equals: $publicKeyOrFingerprintOrUid } }
+              { decodedDataJson: { contains: $publicKeyOrFingerprintOrUid } }
+            ]
+          }
         ]
       }
       orderBy: { timeCreated: desc }