store submitted email + minor loading improvements

privacy-scaling-explorations · Sep 5, 2024 · 16bc9d7 · 16bc9d7
1 parent cf99087
commit 16bc9d7
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 46 deletions.
diff --git a/packages/interface/src/features/signup/components/RegisterEmail.tsx b/packages/interface/src/features/signup/components/RegisterEmail.tsx
@@ -1,62 +1,51 @@
-import { Dispatch, SetStateAction, useState } from "react"
-import { toast } from "sonner"
+import { useState } from "react";
+import { toast } from "sonner";
 
-import { config } from "~/config"
-import { Form, FormControl, FormSection } from "~/components/ui/Form"
-import { Input } from "~/components/ui/Input"
-import { EmailFieldSchema, EmailField } from "../types"
-import { Button } from "~/components/ui/Button"
-import { Spinner } from "~/components/ui/Spinner"
+import { config } from "~/config";
+import { Form, FormControl, FormSection } from "~/components/ui/Form";
+import { Input } from "~/components/ui/Input";
+import { EmailFieldSchema, EmailField } from "../types";
+import { Button } from "~/components/ui/Button";
+import { Spinner } from "~/components/ui/Spinner";
 
 interface IRegisterEmailProps {
-  emailField:
-  | {
-    email: string
-  }
-  | undefined
-  setEmail: Dispatch<
-    SetStateAction<
-      | {
-        email: string
-      }
-      | undefined
-    >
-  >
+  otpVerified: boolean;
+  setEmail: (emailField: EmailField) => void;
 }
 
 const RegisterEmail = ({
-  emailField,
+  otpVerified,
   setEmail,
 }: IRegisterEmailProps): JSX.Element => {
-  const [registering, setRegistering] = useState(false)
+  const [registering, setRegistering] = useState(false);
 
   const registerEmail = async (emailField: EmailField) => {
     try {
-      setRegistering(true)
+      setRegistering(true);
       const response = await fetch(`${config.backendUrl}/send-otp`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(emailField),
-      })
-      const json = await response.json()
+      });
+      const json = await response.json();
 
       if (!response.ok) {
-        console.log(response.status)
-        console.error(json)
-        toast.error((json.errors && json.errors[0]) ?? json.message)
+        console.log(response.status);
+        console.error(json);
+        toast.error((json.errors && json.errors[0]) ?? json.message);
       } else {
-        setEmail(emailField)
-        toast.success(`OTP has been sent to ${emailField.email}`)
+        setEmail(emailField);
+        toast.success(`OTP has been sent to ${emailField.email}`);
       }
     } catch (error: any) {
-      console.error(error)
-      toast.error("An unexpected error occured registering your email")
+      console.error(error);
+      toast.error("An unexpected error occured registering your email");
     } finally {
-      setRegistering(false)
+      setRegistering(false);
     }
-  }
+  };
 
   return (
     <div className="w-72 sm:w-96">
@@ -74,20 +63,20 @@ const RegisterEmail = ({
             label="Email address"
             name="email"
           >
-            <Input placeholder="[email protected] | aa@ethereum.org" />
+            <Input placeholder="[email protected] | alice@ethereum.org" />
           </FormControl>
           <Button
             suppressHydrationWarning
             size="auto"
             type="submit"
-            variant={emailField ? "disabled" : "secondary"}
+            variant={otpVerified ? "disabled" : "secondary"}
           >
             {registering ? <Spinner className="h-6 w-6" /> : "Submit"}
           </Button>
         </FormSection>
       </Form>
     </div>
-  )
-}
+  );
+};
 
-export default RegisterEmail
+export default RegisterEmail;
diff --git a/packages/interface/src/features/signup/components/VerifyOtp.tsx b/packages/interface/src/features/signup/components/VerifyOtp.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { Address, encodeAbiParameters, parseAbiParameters } from "viem";
@@ -23,16 +23,21 @@ interface IVerifyOtpProps {
   emailField: {
     email: string;
   };
+  otpVerified: boolean;
+  setOtpVerified: Dispatch<SetStateAction<boolean>>;
 }
 
-const VerifyOtp = ({ emailField }: IVerifyOtpProps): JSX.Element => {
+const VerifyOtp = ({
+  emailField,
+  otpVerified,
+  setOtpVerified,
+}: IVerifyOtpProps): JSX.Element => {
   const { address, smartAccount, smartAccountClient } = useSmartAccount();
   const signer = useEthersSigner({ client: smartAccountClient });
   const { updateEligibility } = useMaci();
   const router = useRouter();
 
   const [loading, setLoading] = useState(false);
-  const [otpVerified, setOtpVerified] = useState(false);
 
   const verifyOtp = async (otpField: OtpField) => {
     if (!address) {
@@ -71,6 +76,7 @@ const VerifyOtp = ({ emailField }: IVerifyOtpProps): JSX.Element => {
       console.log(response.status);
       console.error(json);
       toast.error((json.errors && json.errors[0]) ?? json.message);
+      setLoading(false);
     } else {
       toast.success("OTP verified - now joining Semaphore group");
       setOtpVerified(true);

diff --git a/packages/interface/src/pages/signup/register.tsx b/packages/interface/src/pages/signup/register.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { format } from "date-fns";
 
 import { EligibilityDialog } from "~/components/EligibilityDialog";
@@ -15,6 +15,19 @@ const Register = (): JSX.Element => {
   const { address } = useSmartAccount();
 
   const [emailField, setEmail] = useState<EmailField>();
+  const [otpVerified, setOtpVerified] = useState(false);
+
+  const handleSetEmail = (emailField: EmailField) => {
+    setEmail(emailField);
+    localStorage.setItem("email", emailField.email);
+  };
+
+  useEffect(() => {
+    const email = localStorage.getItem("email");
+    if (email) {
+      setEmail({ email });
+    }
+  }, []);
 
   return (
     <Layout type="home">
@@ -41,9 +54,15 @@ const Register = (): JSX.Element => {
           </span>
         </p>
 
-        <RegisterEmail emailField={emailField} setEmail={setEmail} />
+        <RegisterEmail otpVerified={otpVerified} setEmail={handleSetEmail} />
 
-        {emailField && address && <VerifyOtp emailField={emailField} />}
+        {emailField && address && (
+          <VerifyOtp
+            emailField={emailField}
+            otpVerified={otpVerified}
+            setOtpVerified={setOtpVerified}
+          />
+        )}
       </div>
 
       <FAQList />