From 59557ce58d5420ed1ff4ceee5905c1a04fb5bd85 Mon Sep 17 00:00:00 2001 From: Shubham Gupta Date: Mon, 2 Sep 2024 20:13:01 +0530 Subject: [PATCH] Update proof validating logic --- packages/app/src/pages/MainPage.tsx | 1145 ++++++++++++++------------- 1 file changed, 602 insertions(+), 543 deletions(-) diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx index 67351fb..e63e5db 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, @@ -337,6 +340,7 @@ export const MainPage: React.FC<{}> = (props) => { "zk-email/proof-of-twitter-v2", input ); + setActiveStep(4); } catch (err) { console.log("Something went wrong", err); setIsRemoteProofGenerationLoading(false); @@ -418,47 +422,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 +464,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 +510,235 @@ export const MainPage: React.FC<{}> = (props) => { /> )} - - - {/* --------- LEFT HAND SIDE OF SCREEN --------- */} - -