Merge pull request #28 from daqhris/fix-state-persistence-issue

Fix state persistence issue and update IdentityVerification component

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.

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>

pages/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { useLocalStorage } from "usehooks-ts";
 import EventAttendanceVerification from "../components/EventAttendanceVerification";
 import IdentityVerification from "../components/IdentityVerification";
 import OnchainAttestation from "../components/OnchainAttestation";
@@ -14,20 +15,25 @@ const stageDescriptions = {
 };
 
 const Home: React.FC = () => {
-  const [currentStage, setCurrentStage] = useState<Stage>("identity");
-  const [completedStages, setCompletedStages] = useState<Stage[]>([]);
+  const [currentStage, setCurrentStage] = useLocalStorage<Stage>("currentStage", "identity");
+  const [completedStages, setCompletedStages] = useLocalStorage<Stage[]>("completedStages", []);
 
   useEffect(() => {
     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);
     }
   };