Merge branch 'main' into cleanup-unnecessary-code

PR_MESSAGE.md

@@ -0,0 +1 @@
+This pull request includes changes that address various improvements and updates to the codebase. Significant refactoring has been done to enhance functionality, improve error handling, and update dependencies. These changes are crucial for the ongoing development and maintenance of the application.

README.md

@@ -1,17 +1,17 @@
-# MissionEnrolment2024: Onchain Attestation and Verification
+# MissionEnrollment2024: Onchain Attestation and Verification
 
-MissionEnrolment2024 is a decentralized application (dApp) that leverages blockchain technology to create immutable attestations for mission enrolment.
+MissionEnrollment2024 is a decentralized application (dApp) that leverages blockchain technology to create immutable attestations for mission enrollment.
 Built with Next.js, React, and the Ethereum Attestation Service (EAS), this project aims to provide a transparent and decentralized platform for verifying mission participation and achievements.
 
 ## SuperHack 2024
 
 This dApp was developed during [SuperHack 2024](https://ethglobal.com/events/superhack2024), an online async hackathon organized by [ETHGlobal](https://ethglobal.com/).
 The event took place from August 2nd to August 16th, 2024, bringing together developers, designers, and blockchain enthusiasts to collaborate on innovative projects.
-MissionEnrolment2024 showcases the potential of blockchain technology in creating verifiable and transparent systems for mission-based activities on Ethereum.
+MissionEnrollment2024 showcases the potential of blockchain technology in creating verifiable and transparent systems for mission-based activities on Ethereum.
 
 ## Features
 
-- **Onchain Attestations**: Creates immutable records of mission enrolment using the Ethereum Attestation Service (EAS).
+- **Onchain Attestations**: Creates immutable records of mission enrollment using the Ethereum Attestation Service (EAS).
 - **ENS Integration**: Supports Ethereum Name Service for user-friendly addressing.
 - **ETHGlobal POAPs Retrieval**: Verifies attendance at ETHGlobal events through Proof of Attendance Protocol tokens.
 - **Interactive Single-Page Application**: Offers a streamlined user experience with stage-based components.
@@ -79,21 +79,21 @@ MissionEnrolment2024 showcases the potential of blockchain technology in creatin
 
 ## Usage
 
-MissionEnrolment2024 provides a streamlined single-page application flow for mission enrolment, verification, and NFT migration:  
+MissionEnrollment2024 provides a streamlined single-page application flow for mission enrollment, verification, and NFT migration:
 
 1. Connect your Ethereum wallet to the application using the "Connect Wallet" button.
-2. Navigate through the mission enrolment stages:
+2. Navigate through the mission enrollment stages:
    a. Enter your ENS (Ethereum Name Service) name or Ethereum address for identity verification.
    b. The application will automatically retrieve and verify your ETHGlobal POAPs to confirm event attendance.
    c. Review the details of your mission participation, including verified events and achievements.
-3. Create an onchain attestation for your mission enrolment:
+3. Create an onchain attestation for your mission enrollment:
    a. Click the "Create Attestation" button to initiate the process.
    b. Sign the attestation transaction using your connected wallet.
    c. Wait for the transaction to be confirmed on the Ethereum network.
 4. Once confirmed, view your attestation details, which are now immutably recorded on the blockchain.
-5. Explore the "Recent Attestations" section to see other verified mission enrolments and the growing community of participants.
+5. Explore the "Recent Attestations" section to see other verified mission enrollments and the growing community of participants.
 
-This streamlined process ensures a transparent and verifiable record of your mission enrolment, leveraging the security and immutability of blockchain technology. The single-page application design provides a seamless user experience throughout the entire enrolment and verification process.
+This streamlined process ensures a transparent and verifiable record of your mission enrollment, leveraging the security and immutability of blockchain technology. The single-page application design provides a seamless user experience throughout the entire enrollment and verification process.
 
 ## Disclaimer
 

components/IdentityVerification.tsx

@@ -47,21 +47,30 @@ const IdentityVerification: React.FC<{ onVerified: (address: string) => void }>
     <div className="p-4 bg-white shadow rounded-lg">
       <h2 className="text-2xl font-bold mb-4">Identity Verification</h2>
       <p className="mb-4">Please enter your ENS name or Ethereum address:</p>
-      <input
-        type="text"
-        value={inputAddress}
-        onChange={e => setInputAddress(e.target.value)}
-        className="w-full max-w-md p-2 border rounded mb-4"
-        placeholder="vitalik.eth or 0x..."
-        disabled={isVerifying}
-      />
-      {isLoading && <p className="text-blue-500 mb-2">Resolving...</p>}
-      {ensName && <p className="mb-2">Resolved ENS Name: {ensName}</p>}
-      {ensAddress && <p className="mb-2">Resolved Address: {ensAddress}</p>}
+      <div className="relative">
+        <input
+          type="text"
+          value={inputAddress}
+          onChange={(e) => setInputAddress(e.target.value)}
+          className="w-full max-w-md p-2 border rounded mb-4"
+          placeholder="vitalik.eth or 0x..."
+          disabled={isVerifying}
+        />
+        {isLoading && (
+          <span className="absolute right-3 top-2 text-blue-500">
+            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </span>
+        )}
+      </div>
+      {ensName && <p className="mb-2 text-green-600">Resolved ENS Name: {ensName}</p>}
+      {ensAddress && <p className="mb-2 text-green-600">Resolved Address: {ensAddress}</p>}
       <button
         onClick={handleVerify}
-        disabled={isVerifying || !inputAddress || isLoading}
-        className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 disabled:bg-gray-300"
+        disabled={isVerifying || !inputAddress.trim() || isLoading}
+        className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 disabled:bg-gray-300 transition-colors duration-200"
       >
         {isVerifying ? "Verifying..." : "Verify"}
       </button>

contracts/AttestationService.sol

@@ -11,7 +11,7 @@ contract AttestationService is Ownable {
     IEAS private immutable eas;
     ISchemaRegistry private immutable schemaRegistry;
 
-    bytes32 public missionEnrolmentSchema;
+    bytes32 public missionEnrollmentSchema;
 
     event SchemaCreated(bytes32 indexed schemaId);
     event AttestationCreated(bytes32 indexed attestationId, address indexed recipient);
@@ -21,15 +21,15 @@ contract AttestationService is Ownable {
         schemaRegistry = ISchemaRegistry(_schemaRegistry);
     }
 
-    function createMissionEnrolmentSchema() external onlyOwner {
+    function createMissionEnrollmentSchema() external onlyOwner {
         string memory schema = "address userAddress,uint256 tokenId,uint256 timestamp";
         bytes32 schemaId = schemaRegistry.register(schema, ISchemaResolver(address(0)), true);
-        missionEnrolmentSchema = schemaId;
+        missionEnrollmentSchema = schemaId;
         emit SchemaCreated(schemaId);
     }
 
-    function createMissionEnrolmentAttestation(address recipient, uint256 tokenId) external returns (bytes32) {
-        require(missionEnrolmentSchema != bytes32(0), "Schema not created");
+    function createMissionEnrollmentAttestation(address recipient, uint256 tokenId) external returns (bytes32) {
+        require(missionEnrollmentSchema != bytes32(0), "Schema not created");
 
         bytes memory data = abi.encode(recipient, tokenId, block.timestamp);
 

pages/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import EventAttendanceVerification from "../components/EventAttendanceVerification";
+import { useLocalStorage } from "usehooks-ts";
+import EventAttendanceProof from "../components/EventAttendanceProof";
 import IdentityVerification from "../components/IdentityVerification";
 import OnchainAttestation from "../components/OnchainAttestation";
 
@@ -17,8 +18,8 @@ interface POAPEvent {
 const stageDescriptions = {
   identity: "Verify your identity using ENS or Ethereum address",
   attendance: "Confirm your attendance proof for ETHGlobal Brussels 2024",
-  attestation: "Create an onchain attestation of your mission enrolment",
-  complete: "Mission enrolment completed successfully",
+  attestation: "Create an onchain attestation of your mission enrollment",
+  complete: "Mission enrollment completed successfully",
 };
 
 const Home: React.FC = () => {
@@ -30,13 +31,18 @@ const Home: React.FC = () => {
     if (completedStages.length === 0 && currentStage !== "identity") {
       setCurrentStage("identity");
     }
-  }, [completedStages, currentStage]);
+  }, [completedStages, currentStage, setCurrentStage]);
 
   const handleStageCompletion = (stage: Stage) => {
-    setCompletedStages(prev => [...prev, stage]);
+    const newCompletedStages = [...completedStages, stage];
+    setCompletedStages(newCompletedStages);
+    localStorage.setItem('completedStages', JSON.stringify(newCompletedStages));
+
     const currentIndex = stages.indexOf(stage);
     if (currentIndex < stages.length - 1) {
-      setCurrentStage(stages[currentIndex + 1]);
+      const nextStage = stages[currentIndex + 1];
+      setCurrentStage(nextStage);
+      localStorage.setItem('currentStage', nextStage);
     }
   };
 
@@ -79,15 +85,14 @@ const Home: React.FC = () => {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-8">Mission Enrolment 2024</h1>
+      <h1 className="text-3xl font-bold mb-8">Mission Enrollment 2024</h1>
       <div className="mb-8 p-4 bg-blue-100 rounded-lg">
         <h2 className="text-xl font-semibold mb-2">
           Current Stage: {currentStage.charAt(0).toUpperCase() + currentStage.slice(1)}
         </h2>
         <p className="text-lg">{stageDescriptions[currentStage]}</p>
-        <p className="mt-2 text-sm text-blue-700">
-          Complete this stage to proceed to the next step of your mission enrolment.
-        </p>
+        <p className="mt-2 text-sm text-blue-700">Complete this stage to proceed to the next step of your mission enrollment.</p>
+
       </div>
       {renderCurrentStage()}
       <div className="mt-8">