diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx index 67351fb..b881891 100644 --- a/packages/app/src/pages/MainPage.tsx +++ b/packages/app/src/pages/MainPage.tsx @@ -35,13 +35,12 @@ import { useZkEmailSDK } from "@zk-email/zk-email-sdk"; import { calculateSignalLength, circuitOutputToArgs } from "../utils"; import { Hex } from "viem"; - import { Box, Grid, Typography } from "@mui/material"; -import Stepper from '../components/Stepper' -import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'; +import Stepper from "../components/Stepper"; +import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; import Video from "../components/Video"; import Nav from "../components/Nav"; -import {useTheme} from "@mui/material"; +import { useTheme } from "@mui/material"; import StatusTag from "../components/StatusTag"; const CIRCUIT_NAME = "twitter"; @@ -149,6 +148,9 @@ export const MainPage: React.FC<{}> = (props) => { isRemoteProofVerificationLoading, setIsRemoteProofVerificationLoading, ] = useState(false); + const [proofGenerationMethod, setProofGenerationMethod] = useState< + "local" | "remote" + >("local"); const [stopwatch, setStopwatch] = useState>({ startedDownloading: 0, @@ -324,6 +326,7 @@ export const MainPage: React.FC<{}> = (props) => { const handleGenerateProofRemotely = async () => { setIsRemoteProofGenerationLoading(true); + setProofGenerationMethod("remote"); const input = await generateInputFromEmail( "zk-email/proof-of-twitter-v2", emailFull, @@ -418,47 +421,41 @@ export const MainPage: React.FC<{}> = (props) => { ); }; - - - - - const theme = useTheme() + const theme = useTheme(); const [counter, setCounter] = useState(0); - - const [steps, setSteps] = useState<[string, 'completed' | 'uncompleted'][]>([ - ['SEND RESET EMAIL', 'completed'], - ['COPY/PASTE DKIM SIG', 'uncompleted'], - ['ADD ADDRESS', 'uncompleted'], - ['PROVE', 'uncompleted'], - ['VERIFY & MINT', 'uncompleted'] + const [steps, setSteps] = useState<[string, "completed" | "uncompleted"][]>([ + ["SEND RESET EMAIL", "completed"], + ["COPY/PASTE DKIM SIG", "uncompleted"], + ["ADD ADDRESS", "uncompleted"], + ["PROVE", "uncompleted"], + ["VERIFY & MINT", "uncompleted"], ]); const [activeStep, setActiveStep] = useState(0); const markStepCompleted = (index: number) => { - setSteps(prevSteps => { + setSteps((prevSteps) => { const newSteps = [...prevSteps]; - newSteps[index][1] = 'completed'; + newSteps[index][1] = "completed"; return newSteps; }); }; const markStepUncompleted = (index: number) => { - setSteps(prevSteps => { + setSteps((prevSteps) => { const newSteps = [...prevSteps]; - newSteps[index][1] = 'uncompleted'; + newSteps[index][1] = "uncompleted"; return newSteps; }); }; - useEffect(() => { let interval: NodeJS.Timeout; - if (status === 'generating-proof') { + if (status === "generating-proof") { interval = setInterval(() => { - setCounter(prevCounter => prevCounter + 1); + setCounter((prevCounter) => prevCounter + 1); }, 1000); } else { setCounter(0); @@ -466,53 +463,43 @@ export const MainPage: React.FC<{}> = (props) => { return () => clearInterval(interval); }, [status]); - useEffect(() => { // i'm not sure if this if statement check is correct, after the && // i want to make sure the user actually put something in the 'Full Email with Headers' section OR if they logged in with Google they actually selected an email and it's not the default localStorage.emailFull=DOMException // this code works but there's probably a better check? - if (emailFull != '' && emailFull != 'DOMException') { + if (emailFull != "" && emailFull != "DOMException") { markStepCompleted(1); // Mark 'COPY/PASTE DKIM SIG' step as completed } else { markStepUncompleted(1); // Mark 'COPY/PASTE DKIM SIG' step as uncompleted } }, [emailFull]); - useEffect(() => { - if (ethereumAddress != '') { + if (ethereumAddress != "") { markStepCompleted(2); // Mark 'ADD ADDRESS' step as completed } else { markStepUncompleted(2); // Mark 'ADD ADDRESS' step as uncompleted } }, [ethereumAddress]); - useEffect(() => { - if (status === 'done' || status === 'proof-files-downloaded-successfully') { + if (status === "done" || status === "proof-files-downloaded-successfully") { markStepCompleted(3); // Mark 'PROVE' step as completed } else { - // markStepUncompleted(3); // Mark 'PROVE' step as uncompleted + // markStepUncompleted(3); // Mark 'PROVE' step as uncompleted } }, [status]); - const [isOverlayVisible, setIsOverlayVisible] = useState(false); useEffect(() => { - if (status === 'generating-proof') { + if (status === "generating-proof") { setIsOverlayVisible(true); } else { setIsOverlayVisible(false); } }, [status]); - - - - - - return ( {isOverlayVisible && } @@ -522,195 +509,235 @@ export const MainPage: React.FC<{}> = (props) => { /> )} - - - {/* --------- LEFT HAND SIDE OF SCREEN --------- */} - -