diff --git a/packages/interface/src/features/signup/components/RegisterEmail.tsx b/packages/interface/src/features/signup/components/RegisterEmail.tsx
index 1221d32..00e4346 100644
--- 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 (
@@ -74,20 +63,20 @@ const RegisterEmail = ({
label="Email address"
name="email"
>
-
+
- )
-}
+ );
+};
-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
index 544bed9..4695c58 100644
--- 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>;
}
-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
index 8859ad9..d262f0d 100644
--- 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();
+ 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 (
@@ -41,9 +54,15 @@ const Register = (): JSX.Element => {
-
+
- {emailField && address && }
+ {emailField && address && (
+
+ )}