From bfbb61d83c54730b204fbd022f9b5cda2fa72c9b Mon Sep 17 00:00:00 2001 From: mehditorabiv Date: Tue, 27 Aug 2024 12:38:18 +0300 Subject: [PATCH] decrypt attestations and show list of identifiers --- src/pages/Identifiers/Identifiers.tsx | 249 ++++++++++++++------------ src/services/eas/query.ts | 16 +- 2 files changed, 147 insertions(+), 118 deletions(-) diff --git a/src/pages/Identifiers/Identifiers.tsx b/src/pages/Identifiers/Identifiers.tsx index 45dbaa0..7d32639 100644 --- a/src/pages/Identifiers/Identifiers.tsx +++ b/src/pages/Identifiers/Identifiers.tsx @@ -1,4 +1,4 @@ -/* eslint-disable react/no-array-index-key */ +import React, { useEffect, useState, useCallback } from 'react'; import { List, ListItem, @@ -14,82 +14,141 @@ import { import VerifiedIcon from '@mui/icons-material/Verified'; import { FaDiscord, FaGoogle } from 'react-icons/fa'; import { useNavigate } from 'react-router-dom'; -// import { useState } from 'react'; -// import { decryptAttestation, getAttestations } from '../../libs/oci'; -// import { useAccount } from 'wagmi'; -// import useLit from '../../hooks/LitProvider'; -// import useSessionSigs from '../../hooks/useSessionSigs'; -// import { useSigner } from '../../utils/eas-wagmi-utils'; -// import { GraphQLClient, gql } from 'graphql-request'; -// import { useQuery } from '@tanstack/react-query'; -// import { -// SchemaDecodedItem, -// SchemaEncoder, -// } from '@ethereum-attestation-service/eas-sdk'; +import clsx from 'clsx'; import { useGetAttestations } from '../../services/eas/query'; +import { decodeAttestationData, IAttestation } from '../../libs/oci'; -const identifiers = [ - { name: 'Discord', icon: FaDiscord, verified: false, color: 'text-blue-500' }, - { name: 'Google', icon: FaGoogle, verified: false, color: 'text-red-500' }, -]; - -export function Identifiers() { - const { data } = useGetAttestations(); - console.log({ data }); +interface IdentifierItemProps { + identifier: { + name: string; + icon: React.ElementType; + verified: boolean; + }; + onRevoke: (name: string) => void; + onConnect: (name: string) => void; +} - // const { litNodeClient } = useLit(); - // const { chainId } = useAccount(); - // const { sessionSigs, createSessionSigs } = useSessionSigs(); - // const [decryptedData, setDecryptedData] = useState(null); +const IdentifierItem: React.FC = ({ + identifier, + onRevoke, + onConnect, +}) => ( + + + + + + + + {identifier.verified && ( + + )} + {identifier.name} + + } + sx={{ ml: 2 }} + /> + + {identifier.verified ? ( + + ) : ( + + )} + + + + +); - // const signer = useSigner(); - // const { isConnected, address } = useAccount(); +export function Identifiers() { + const [identifiers, setIdentifiers] = useState([ + { + name: 'Discord', + icon: FaDiscord, + verified: false, + }, + { name: 'Google', icon: FaGoogle, verified: false }, + ]); + + const [attestations, setAttestations] = useState< + (IAttestation & { provider?: string })[] + >([]); + const { data: attestationsResponse } = useGetAttestations(); + + useEffect(() => { + if (!attestationsResponse) { + console.error('No attestations found'); + return; + } + + const attestationsData = attestationsResponse.map((attestation) => { + const decodedData = decodeAttestationData(attestation.data); + + const providerData = decodedData.find((data) => data.name === 'provider'); + + return { + ...attestation, + provider: + typeof providerData?.value.value === 'string' + ? providerData.value.value + : undefined, + decodedData, + }; + }); + + setAttestations(attestationsData); + }, [attestationsResponse]); + + useEffect(() => { + const updatedIdentifiers = identifiers.map((identifier) => { + const matchingAttestation = attestations.find( + (attestation) => + (attestation.provider as string)?.toLowerCase() === + identifier.name.toLowerCase() + ); + + return { + ...identifier, + verified: !!matchingAttestation, + }; + }); + + setIdentifiers(updatedIdentifiers); + }, [attestations]); const navigate = useNavigate(); - const handleRevoke = (identifier: string) => { + const handleRevoke = useCallback((identifier: string) => { console.log(`Revoke attestation for ${identifier}`); - }; - - const handleConnect = (identifier: string) => { - console.log(`Connect identifier for ${identifier}`); - navigate(`/identifiers/${identifier.toLowerCase()}/attestation`); - }; - - // const fetchAttestations = async () => { - // if (!address) throw new Error('No address found'); - - // const attestations = await getAttestations(address as `0x${string}`); - // console.log({ attestations }); - - // return attestations; - // }; - - // useEffect(() => { - // if (isConnected && signer && chainId && litNodeClient) { - // console.log(litNodeClient, 'litNodeClient'); - - // createSessionSigs({ signer, chainId, litNodeClient }); - // } - // }, [signer, isConnected, litNodeClient, chainId, createSessionSigs]); - - // useEffect(() => { - // if (!sessionSigs) return; - // const decrypt = async () => { - // if (!sessionSigs) throw new Error('No sessionSigs found'); - - // const attestations = await fetchAttestations(); - - // const decryptedSecrets = await Promise.all( - // attestations.map(async (attestation) => { - // return decryptAttestation(litNodeClient, attestation, sessionSigs); - // }) - // ); - // setDecryptedData(decryptedSecrets); - // }; - - // decrypt(); - // }, [sessionSigs]); + }, []); + + const handleConnect = useCallback( + (identifier: string) => { + console.log(`Connect identifier for ${identifier}`); + navigate(`/identifiers/${identifier.toLowerCase()}/attestation`); + }, + [navigate] + ); return (
@@ -100,55 +159,19 @@ export function Identifiers() { - + Actions - {identifiers.map((identifier, index) => ( - - - - - - - - {identifier.verified && ( - - )} - {identifier.name} -
- } - style={{ marginLeft: 16 }} - /> - - {identifier.verified ? ( - - ) : ( - - )} - - - - + {identifiers.map((identifier) => ( + ))} diff --git a/src/services/eas/query.ts b/src/services/eas/query.ts index 5592d0e..c5d921e 100644 --- a/src/services/eas/query.ts +++ b/src/services/eas/query.ts @@ -2,9 +2,14 @@ import { useQuery } from '@tanstack/react-query'; import { gql } from 'graphql-request'; import { ATTESTER_ADDRESS, graphQLClient } from '.'; import { EAS_SCHEMA_ID } from '../../utils/contracts/eas/constants'; +import { IAttestation } from '../../libs/oci'; + +interface AttestationsResponse { + attestations: IAttestation[]; +} export const useGetAttestations = () => { - return useQuery({ + return useQuery({ queryKey: ['getAttestations'], queryFn: async () => { const query = gql` @@ -39,11 +44,12 @@ export const useGetAttestations = () => { schemaId: EAS_SCHEMA_ID, }; - const attestedResults = await graphQLClient.request(query, variables); - - console.log({ attestedResults }); + const attestedResults = await graphQLClient.request( + query, + variables + ); - return attestedResults; + return attestedResults.attestations; }, }); };