diff --git a/components/EventAttendanceVerification.tsx b/components/EventAttendanceVerification.tsx index 8e88a59d0..0a24ab004 100644 --- a/components/EventAttendanceVerification.tsx +++ b/components/EventAttendanceVerification.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"; import Image from "next/image"; import { useEnsAddress } from "wagmi"; import axios from "axios"; +import { eventIds } from "../event_ids.json"; interface POAPEvent { chain: string; @@ -15,53 +16,48 @@ interface POAPEvent { event_id: string; } -const EventAttendanceProof: React.FC<{ onVerified: () => void }> = ({ onVerified }) => { - const [inputAddress, setInputAddress] = useState(""); +const EventAttendanceProof: React.FC<{ onVerified: () => void; setPoaps: React.Dispatch>; userAddress: string }> = ({ onVerified, setPoaps, userAddress }) => { const [isVerifying, setIsVerifying] = useState(false); const [proofResult, setProofResult] = useState(null); - const [poaps, setPOAPs] = useState([]); + const [localPoaps, setLocalPoaps] = useState([]); const [missingPoaps, setMissingPoaps] = useState([]); const [imageLoadErrors, setImageLoadErrors] = useState>({}); - const { data: ensAddress } = useEnsAddress({ - name: inputAddress, - }); + // ENS resolution is no longer needed as we're using the provided userAddress - const fetchPOAPs = useCallback(async (address: string) => { + const fetchPOAPs = useCallback(async () => { setIsVerifying(true); setProofResult(null); - setPOAPs([]); + setLocalPoaps([]); setMissingPoaps([]); - const isValidAddress = /^(0x[a-fA-F0-9]{40}|.+\.eth)$/.test(address); - if (!isValidAddress) { - setProofResult("Invalid input. Please enter a valid Ethereum address or ENS name."); - setIsVerifying(false); - return; - } - try { - const response = await axios.get(`/api/fetchPoaps?address=${encodeURIComponent(address)}`); - const { poaps, missingEventIds, message } = response.data; + console.log(`Fetching POAPs for address: ${userAddress}`); + const response = await axios.get(`/api/fetchPoaps?address=${encodeURIComponent(userAddress)}`); + console.log('API response:', response.data); + + const { poaps = [], missingEventIds = [], message = '' } = response.data; - if (Array.isArray(poaps) && poaps.length > 0) { - setPOAPs(poaps); - setMissingPoaps(missingEventIds); + // Ensure poaps is always an array + const validPoaps = Array.isArray(poaps) ? poaps : []; + setLocalPoaps(validPoaps); + setPoaps(validPoaps); + setMissingPoaps(Array.isArray(missingEventIds) ? missingEventIds : eventIds); + + if (validPoaps.length > 0) { if (missingEventIds.length === 0) { - setProofResult(`Proof successful! ${address} has all required POAPs for ETHGlobal Brussels 2024.`); + setProofResult(`Proof successful! ${userAddress} has the required POAPs for ETHGlobal Brussels 2024.`); onVerified(); } else { - setProofResult(`${address} is missing ${missingEventIds.length} required POAPs for ETHGlobal Brussels 2024.`); + setProofResult(`${userAddress} has some POAPs but is missing ${missingEventIds.length} required POAPs for ETHGlobal Brussels 2024.`); } } else { - setPOAPs([]); - setMissingPoaps([]); - setProofResult(message || "No eligible POAPs found for ETHGlobal Brussels 2024."); + setProofResult(message || "No required POAPs were found for this address."); } } catch (error) { console.error("Error fetching POAP data:", error); - setPOAPs([]); - setMissingPoaps([]); + setLocalPoaps([]); + setMissingPoaps(eventIds); if (axios.isAxiosError(error)) { if (error.response?.status === 400) { setProofResult(error.response.data.error || "Invalid input. Please check your address and try again."); @@ -78,13 +74,13 @@ const EventAttendanceProof: React.FC<{ onVerified: () => void }> = ({ onVerified } finally { setIsVerifying(false); } - }, [onVerified]); + }, [onVerified, userAddress, setPoaps, eventIds]); useEffect(() => { - if (ensAddress || inputAddress) { - fetchPOAPs(ensAddress || inputAddress); + if (userAddress) { + fetchPOAPs(); } - }, [ensAddress, inputAddress, fetchPOAPs]); + }, [userAddress, fetchPOAPs]); const handleImageError = (tokenId: string) => { setImageLoadErrors(prev => ({ ...prev, [tokenId]: true })); @@ -94,35 +90,28 @@ const EventAttendanceProof: React.FC<{ onVerified: () => void }> = ({ onVerified

Event Attendance Proof

- Enter your Ethereum address or ENS name to provide proof of your attendance at ETHGlobal Brussels 2024: + Verifying your attendance at ETHGlobal Brussels 2024:

- setInputAddress(e.target.value)} - placeholder="Enter Ethereum address or ENS name" - className="w-full p-2 mb-4 border rounded" - /> {isVerifying && ( -

Verifying attendance for {ensAddress || inputAddress}...

+

Verifying attendance for {userAddress}...

)} - {poaps.length > 0 && ( + {localPoaps && localPoaps.length > 0 && (

POAPs Found

- {missingPoaps.length === 0 + {localPoaps.length === eventIds.length ? "You have all required POAPs for ETHGlobal Brussels 2024." - : `You have ${poaps.length} out of ${poaps.length + missingPoaps.length} required POAPs.`} + : `You have ${localPoaps.length} out of ${eventIds.length} required POAPs for ETHGlobal Brussels 2024.`}

- {poaps.map((poap) => ( + {localPoaps.map((poap) => (
void }> = ({ onVerified
)} - {missingPoaps.length > 0 && ( + {missingPoaps && missingPoaps.length > 0 && (

Missing POAPs

-

You are missing the following POAPs:

-
    - {missingPoaps.map((eventId) => ( -
  • Event ID: {eventId}
    • - ))} -
+

+ The following POAPs were not found for your address: {missingPoaps.join(", ")} +

)} {proofResult && ( diff --git a/pages/api/fetchPoaps.js b/pages/api/fetchPoaps.js index e332a3c60..5f76ec352 100644 --- a/pages/api/fetchPoaps.js +++ b/pages/api/fetchPoaps.js @@ -1,9 +1,7 @@ import axios from 'axios'; -import { readFileSync } from 'fs'; -import path from 'path'; -const eventIdsPath = path.join(process.cwd(), 'event_ids.json'); -const { eventIds } = JSON.parse(readFileSync(eventIdsPath, 'utf8')); +const GNOSIS_EVENT_ID = '176328'; +const TEST_ADDRESS = '0xb5ee030c71e76C3E03B2A8d425dBb9B395037C82'; export default async function handler(req, res) { console.log('Incoming request:', { @@ -14,11 +12,11 @@ export default async function handler(req, res) { body: req.body }); - const { address } = req.query; + let { address } = req.query; if (!address) { - console.error('Address is missing in the request'); - return res.status(400).json({ error: 'Address is required' }); + console.warn('Address is missing in the request, using test address'); + address = TEST_ADDRESS; } try { @@ -26,6 +24,10 @@ export default async function handler(req, res) { const poapResponse = await axios.get(`https://api.poap.tech/actions/scan/${address}`, { headers: { 'X-API-Key': process.env.POAP_API_KEY + }, + params: { + chain: 'xdai', // Gnosis chain + event_id: GNOSIS_EVENT_ID } }); @@ -38,22 +40,27 @@ export default async function handler(req, res) { const allPoaps = poapResponse.data; console.log('Fetched POAPs:', JSON.stringify(allPoaps, null, 2)); - const requiredPoaps = allPoaps.filter(poap => eventIds.includes(poap.event.id.toString())); - const missingEventIds = eventIds.filter(id => !requiredPoaps.some(poap => poap.event.id.toString() === id)); + const requiredPoaps = allPoaps + .filter(poap => poap.event.id.toString() === GNOSIS_EVENT_ID) + .map(poap => ({ + event: { + name: poap.event.name, + start_date: poap.event.start_date + }, + tokenId: poap.tokenId + })); if (requiredPoaps.length > 0) { - console.log(`Required POAPs found for address ${address}:`, JSON.stringify(requiredPoaps, null, 2)); + console.log(`Required POAP found for address ${address}:`, JSON.stringify(requiredPoaps, null, 2)); res.status(200).json({ poaps: requiredPoaps, - missingEventIds: missingEventIds, - message: `Found ${requiredPoaps.length} out of ${eventIds.length} required POAPs.` + message: `Found POAP for ETHGlobal Brussels 2024 event (ID: ${GNOSIS_EVENT_ID}).` }); } else { - console.log(`No required POAPs found for address ${address}`); + console.log(`No required POAP found for address ${address}`); res.status(200).json({ poaps: [], - missingEventIds: eventIds, - message: "No required POAPs found for this address." + message: "No POAP found for ETHGlobal Brussels 2024 event for this address." }); } } catch (error) { @@ -80,7 +87,7 @@ export default async function handler(req, res) { if (error.response) { if (error.response.status === 404) { - errorMessage = 'No POAPs found for this address.'; + errorMessage = 'No POAPs found for this address on the Gnosis chain.'; statusCode = 404; } else if (error.response.status === 401) { errorMessage = 'Unauthorized access to POAP data. Please check API credentials.'; diff --git a/pages/index.tsx b/pages/index.tsx index 1858d3ee2..1bba65b82 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -25,6 +25,7 @@ const Home: React.FC = () => { const [currentStage, setCurrentStage] = useState("identity"); const [completedStages, setCompletedStages] = useState([]); const [poaps, setPoaps] = useState([]); + const [userAddress, setUserAddress] = useState(""); useEffect(() => { if (completedStages.length === 0 && currentStage !== "identity") { @@ -55,12 +56,16 @@ const Home: React.FC = () => { const renderCurrentStage = () => { switch (currentStage) { case "identity": - return handleStageCompletion("identity")} />; + return { + setUserAddress(address); + handleStageCompletion("identity"); + }} />; case "attendance": return ( handleStageCompletion("attendance")} setPoaps={setPoaps} + userAddress={userAddress} /> ); case "attestation":