From b0b96be66773258519348a4bd9bd971072b9c19e Mon Sep 17 00:00:00 2001 From: "harshmittal.dev" Date: Fri, 1 Nov 2024 06:17:20 +0530 Subject: [PATCH] updated ux, fixed queries to only fetch attestation made using this app , update search attestation --- src/app/_components/ManageAttestation.tsx | 20 ++++++++++-- src/app/_components/Navbar.tsx | 2 -- src/app/_components/PGPKeyForm.tsx | 5 ++- src/app/_components/SearchAttestation.tsx | 5 +-- src/app/page.tsx | 1 + src/app/search/page.tsx | 12 ------- src/components/Layout.tsx | 4 +-- src/hooks/useAttestationCreation.ts | 19 ++++++------ src/lib/graphql/queries.ts | 38 ++++++++++++++++++----- 9 files changed, 65 insertions(+), 41 deletions(-) delete mode 100644 src/app/search/page.tsx diff --git a/src/app/_components/ManageAttestation.tsx b/src/app/_components/ManageAttestation.tsx index 9e8f3cd..423be27 100644 --- a/src/app/_components/ManageAttestation.tsx +++ b/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

{error.message}

; } + if (!userWalletAddress) { + return ( +
+
+

Please connect your wallet to view attestations

+
+
+ ); + } return (
- {attestations - ? "A list of your attestations" - : "Please connect wallet"} + {attestations && attestations.length === 0 + ? "No attestations found" + : "Manage Attestations"} {renderTableHeader()}{renderTableRows()} diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx index 5a1e30a..4041194 100644 --- a/src/app/_components/Navbar.tsx +++ b/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 ( diff --git a/src/app/_components/PGPKeyForm.tsx b/src/app/_components/PGPKeyForm.tsx index 404cbda..3fd43c7 100644 --- a/src/app/_components/PGPKeyForm.tsx +++ b/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 = () => {
Third party Attestation Schema
-
- UID:0xa2bcb9b27c17c609a12e38f848118af93fcd7d6ea6f6f7d4cb234ce33e568c63 -
+
UID:{THIRD_PARTY_ATTESTATION_SCHEMA_UID}
diff --git a/src/app/_components/SearchAttestation.tsx b/src/app/_components/SearchAttestation.tsx index 796c42a..8112d08 100644 --- a/src/app/_components/SearchAttestation.tsx +++ b/src/app/_components/SearchAttestation.tsx @@ -81,13 +81,14 @@ const SearchAttestation: React.FC = () => { }; return ( -
+
+

Search Attestation

{loading &&

Loading...

} {error &&

{error.message}

} diff --git a/src/app/page.tsx b/src/app/page.tsx index 03d8955..3eae922 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -22,6 +22,7 @@ const App: React.FC = () => { return ( //
+ PGP Attestation Schemas diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx deleted file mode 100644 index dee1b46..0000000 --- a/src/app/search/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import SearchAttestation from "../_components/SearchAttestation"; - -function SearchPage() { - return ( -
- -
- ); -} - -export default SearchPage; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 54024ad..e31298c 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -4,9 +4,9 @@ import Footer from "./Footer"; const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => { return ( -
+
-
+
{children}
diff --git a/src/hooks/useAttestationCreation.ts b/src/hooks/useAttestationCreation.ts index 6253373..c3afeba 100644 --- a/src/hooks/useAttestationCreation.ts +++ b/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 => { if (!eas) throw new Error("EAS not initialized"); @@ -110,7 +109,7 @@ export const useAttestationCreation = () => { return await tx.wait(); }, - [eas], + [eas] ); return { createSelfAttestation, createThirdPartyAttestation }; diff --git a/src/lib/graphql/queries.ts b/src/lib/graphql/queries.ts index 061be9b..eb48a28 100644 --- a/src/lib/graphql/queries.ts +++ b/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 }