From f026085e2e36d8e0ffcf43eea59999383c7cdc2e Mon Sep 17 00:00:00 2001
From: Shubham Gupta <shubham.gupta2956@gmail.com>
Date: Mon, 2 Sep 2024 20:13:01 +0530
Subject: [PATCH] Update proof validating logic and remove commented code

---
 packages/app/src/components/Button.tsx        |    2 -
 .../app/src/components/DragAndDropTextBox.tsx |   48 -
 .../app/src/components/EmailInputMethod.tsx   |   38 -
 .../app/src/components/LabeledTextArea.tsx    |  101 --
 packages/app/src/components/Layout.tsx        |   23 -
 packages/app/src/components/NumberedStep.tsx  |   38 -
 packages/app/src/components/ProgressBar.tsx   |   55 -
 .../app/src/components/SingleLineInput.tsx    |   42 -
 packages/app/src/components/Stepper.tsx       |  592 ---------
 packages/app/src/components/TopBanner.tsx     |   21 -
 packages/app/src/components/Video.tsx         |   36 -
 packages/app/src/pages/MainPage.tsx           | 1145 +++++++++--------
 12 files changed, 602 insertions(+), 1539 deletions(-)

diff --git a/packages/app/src/components/Button.tsx b/packages/app/src/components/Button.tsx
index f194d84..90f1deb 100644
--- a/packages/app/src/components/Button.tsx
+++ b/packages/app/src/components/Button.tsx
@@ -1,5 +1,3 @@
-
-
 import React from 'react';
 import styled from "styled-components";
 import { useTheme, Button as MuiButton } from "@mui/material";
diff --git a/packages/app/src/components/DragAndDropTextBox.tsx b/packages/app/src/components/DragAndDropTextBox.tsx
index 5402db5..da86c67 100644
--- a/packages/app/src/components/DragAndDropTextBox.tsx
+++ b/packages/app/src/components/DragAndDropTextBox.tsx
@@ -1,51 +1,3 @@
-// import React from "react";
-// import styled from 'styled-components';
-// import { useDragAndDrop } from '../hooks/useDragAndDrop';
-
-// const DragAndDropTextBoxWrapper = styled.div`
-// 	display: flex;
-// 	flex-direction: column;
-// 	align-items: center;
-// 	border: 2px dashed #ccc;
-// 	padding: 20px;
-// `;
-
-// type Props = {
-// 	onFileDrop: (file: File) => void;
-// };
-
-// const DragAndDropTextBox: React.FC<Props> = ({onFileDrop}) => {
-//     const {
-// 		dragging,
-// 		handleDragEnter,
-// 		handleDragLeave,
-// 		handleDragOver,
-// 		handleDrop,
-// 		handleDragEnd,
-// 	} = useDragAndDrop();
-
-// 	return (
-// 		<DragAndDropTextBoxWrapper
-// 			onDragEnter={handleDragEnter}
-// 			onDragLeave={handleDragLeave}
-// 			onDragOver={handleDragOver}
-// 			onDragEnd={handleDragEnd}
-// 			onDrop={(e) => handleDrop(e, onFileDrop)}
-// 		>
-// 			{dragging ? (
-// 				<div>Drop here</div>
-// 			) : (
-// 				<div>Drop .eml file here</div>
-// 			)}
-// 		</DragAndDropTextBoxWrapper>
-// 	);
-// };
-
-// export default DragAndDropTextBox;
-
-
-
-
 import React from "react";
 import styled, { css, ThemeProvider } from 'styled-components';
 import { useTheme } from "@mui/material/styles";
diff --git a/packages/app/src/components/EmailInputMethod.tsx b/packages/app/src/components/EmailInputMethod.tsx
index 38f3ff0..8bfeebb 100644
--- a/packages/app/src/components/EmailInputMethod.tsx
+++ b/packages/app/src/components/EmailInputMethod.tsx
@@ -1,41 +1,3 @@
-// import { useState } from "react";
-// import { Button, OutlinedButton } from "./Button";
-
-// const EmailInputMethod = ({
-//   onClickGoogle,
-//   onClickEMLFile,
-// }: {
-//   onClickGoogle: () => void;
-//   onClickEMLFile: () => void;
-// }) => {
-//   return (
-//     <div
-//       style={{
-//         display: "flex",
-//         flexDirection: "column",
-//         justifyContent: "center",
-//         gap: 16,
-//         alignItems: "center",
-//       }}
-//     >
-//       <Button onClick={onClickGoogle}>Sign in with Google</Button>
-//       or
-//       <OutlinedButton
-//         data-testid="upload-email-eml-file-button"
-//         onClick={() => {
-//           onClickEMLFile();
-//         }}
-//       >
-//         Upload email .eml file{" "}
-//       </OutlinedButton>
-//     </div>
-//   );
-// };
-
-// export default EmailInputMethod;
-
-
-
 import { Button, OutlinedButton } from "./Button";
 
 interface EmailInputMethodProps {
diff --git a/packages/app/src/components/LabeledTextArea.tsx b/packages/app/src/components/LabeledTextArea.tsx
index a4dc935..adf5ca7 100644
--- a/packages/app/src/components/LabeledTextArea.tsx
+++ b/packages/app/src/components/LabeledTextArea.tsx
@@ -1,104 +1,3 @@
-// import _ from "lodash";
-// import React, { CSSProperties } from "react";
-// import styled from "styled-components";
-// import { Col } from "./Layout";
-
-// export const LabeledTextArea: React.FC<{
-//   style?: CSSProperties;
-//   className?: string;
-//   label: string;
-//   value: string;
-//   warning?: string;
-//   warningColor?: string;
-//   disabled?: boolean;
-//   disabledReason?: string;
-//   secret?: boolean;
-//   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-// }> = ({
-//   style,
-//   warning,
-//   warningColor,
-//   disabled,
-//   disabledReason,
-//   label,
-//   value,
-//   onChange,
-//   className,
-//   secret,
-// }) => {
-//   return (
-//     <LabeledTextAreaContainer
-//       className={_.compact(["labeledTextAreaContainer", className]).join(" ")}
-//     >
-//       <Label>{label}</Label>
-//       {warning && (
-//         <span className="warning" style={{ color: warningColor }}>
-//           {warning}
-//         </span>
-//       )}
-//       <TextArea
-//         style={style}
-//         aria-label={label} 
-//         title={disabled ? disabledReason : ""}
-//         disabled={disabled}
-//         value={value}
-//         onChange={onChange}
-//       />
-
-//       {secret && (
-//         <div className="secret">Hover to reveal public info sent to chain</div>
-//       )}
-//     </LabeledTextAreaContainer>
-//   );
-// };
-
-// const Label = styled.label`
-//   color: rgba(255, 255, 255, 0.8);
-// `;
-
-// const LabeledTextAreaContainer = styled(Col)`
-//   height: 15vh;
-//   border-radius: 4px;
-//   position: relative;
-//   gap: 8px;
-//   & .warning {
-//     color: #bd3333;
-//     font-size: 80%;
-//   }
-//   .secret {
-//     position: absolute;
-//     width: 100%;
-//     height: 100%;
-//     background: #171717;
-//     border: 1px dashed rgba(255, 255, 255, 0.5);
-//     color: rgba(255, 255, 255, 0.8);
-//     user-select: none;
-//     pointer-events: none;
-//     opacity: 0.95;
-//     justify-content: center;
-//     display: flex;
-//     align-items: center;
-//     transition: opacity 0.3s ease-in-out;
-//   }
-//   &:hover .secret,
-//   & :focus + .secret {
-//     opacity: 0;
-//   }
-// `;
-
-// const TextArea = styled.textarea`
-//   border: 1px solid rgba(255, 255, 255, 0.3);
-//   background: rgba(0, 0, 0, 0.3);
-//   border-radius: 4px;
-//   height: 480px;
-// 	padding: 16px;
-// 	transition: all 0.2s ease-in-out;
-// 	resize: none;
-//   &:hover {
-// 		border: 1px solid rgba(255, 255, 255, 0.8);
-// `;
-
-
 import _ from "lodash";
 import React, { CSSProperties } from "react";
 import styled, { ThemeProvider, css } from "styled-components";
diff --git a/packages/app/src/components/Layout.tsx b/packages/app/src/components/Layout.tsx
index 6bd341f..24664cc 100644
--- a/packages/app/src/components/Layout.tsx
+++ b/packages/app/src/components/Layout.tsx
@@ -1,26 +1,3 @@
-// import styled from "styled-components";
-
-// export const Row = styled.div`
-//   display: flex;
-//   align-items: center;
-// `;
-
-// export const Col = styled.div`
-//   display: flex;
-//   flex-direction: column;
-// `;
-
-// export const RowSpaceBetween = styled(Row)`
-//   justify-content: space-between;
-// `;
-
-// export const CenterAllDiv = styled.div`
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-// `;
-
-
 import styled from "styled-components";
 
 export const Row = styled.div`
diff --git a/packages/app/src/components/NumberedStep.tsx b/packages/app/src/components/NumberedStep.tsx
index ef01744..ac0f6bb 100644
--- a/packages/app/src/components/NumberedStep.tsx
+++ b/packages/app/src/components/NumberedStep.tsx
@@ -1,41 +1,3 @@
-// import styled from "styled-components";
-// import { CenterAllDiv, Row } from "./Layout";
-
-// export const NumberedStep: React.FC<{
-//   step: number;
-//   children: React.ReactNode;
-// }> = ({ step, children }) => {
-//   return (
-//     <NumberedStepContainer>
-//       <NumberedStepLabel>
-//         <span>{step}</span>
-//       </NumberedStepLabel>
-//       <NumberedStepText>{children}</NumberedStepText>
-//     </NumberedStepContainer>
-//   );
-// };
-
-// const NumberedStepContainer = styled(Row)`
-//   background: rgba(255, 255, 255, 0.05);
-//   width: 100%;
-//   gap: 1rem;
-//   border-radius: 4px;
-//   padding: 8px;
-//   color: #fff;
-// `;
-
-// const NumberedStepLabel = styled(CenterAllDiv)`
-//   background: rgba(255, 255, 255, 0.2);
-//   border-radius: 4px;
-//   width: 24px;
-//   height: 24px;
-//   min-width: 24px;
-//   border: 1px solid rgba(255, 255, 255, 0.3);
-// `;
-
-// const NumberedStepText = styled.span``;
-
-
 import styled from "styled-components";
 import { CenterAllDiv, Row } from "./Layout";
 
diff --git a/packages/app/src/components/ProgressBar.tsx b/packages/app/src/components/ProgressBar.tsx
index d137599..43563dd 100644
--- a/packages/app/src/components/ProgressBar.tsx
+++ b/packages/app/src/components/ProgressBar.tsx
@@ -1,58 +1,3 @@
-// import styled from "styled-components";
-
-// export interface ProgressBarProps {
-//   width: number;
-//   label?: string;
-// }
-
-// export const ProgressBar: React.FC<ProgressBarProps> = ({ width, label }) => {
-//   return (
-//     <ProgressBarContainer>
-//       {label && (
-//         <LabelContainer>
-//           <span>{label}</span>
-//         </LabelContainer>
-//       )}
-//       <ProgressBarFill width={width} />
-//     </ProgressBarContainer>
-//   );
-// };
-
-// const ProgressBarContainer = styled.div`
-//   background: linear-gradient(
-//     90deg,
-//     #4860b0 51.26%,
-//     #51589f 86.64%,
-//     #5a518f 100%
-//   );
-//   border-radius: 4px;
-//   height: 32px;
-//   position: relative;
-//   width: 100%;
-// `;
-
-// const ProgressBarFill = styled.div<{ width: number }>`
-//   background: #7796ff;
-//   border-radius: 4px;
-//   height: 32px;
-//   width: ${(props) => props.width}%;
-// `;
-
-// const LabelContainer = styled.div`
-//   display: flex;
-//   position: absolute;
-//   top: 50%;
-//   left: 50%;
-//   transform: translate(-50%, -50%);
-//   align-items: center;
-//   justify-content: center;
-//   font-weight: 600;
-//   font-size: 0.9rem;
-//   letter-spacing: -0.02em;
-//   color: #fff;
-// `;
-
-
 import styled from "styled-components";
 
 export interface ProgressBarProps {
diff --git a/packages/app/src/components/SingleLineInput.tsx b/packages/app/src/components/SingleLineInput.tsx
index aa9572d..a0de8f7 100644
--- a/packages/app/src/components/SingleLineInput.tsx
+++ b/packages/app/src/components/SingleLineInput.tsx
@@ -1,45 +1,3 @@
-// import styled from "styled-components";
-// import { Col } from "./Layout";
-
-// export const SingleLineInput: React.FC<{
-//   label: string;
-//   value: any;
-//   onChange: (e: any) => void;
-// }> = ({ label, onChange, value }) => {
-//   return (
-//     <InputContainer>
-//       <label
-//         style={{
-//           color: "rgba(255, 255, 255, 0.8)",
-//         }}
-//       >
-//         {label}
-//       </label>
-//       <Input onChange={onChange} value={value} placeholder={label} />
-//     </InputContainer>
-//   );
-// };
-
-// const InputContainer = styled(Col)`
-//   gap: 8px;
-// `;
-
-// const Input = styled.input`
-//   border: 1px solid rgba(255, 255, 255, 0.4);
-//   background: rgba(0, 0, 0, 0.3);
-//   border-radius: 4px;
-//   padding: 8px;
-//   height: 32px;
-//   display: flex;
-//   align-items: center;
-//   color: #fff;
-//   transition: all 0.2s ease-in-out;
-//   &:hover {
-//     border: 1px solid rgba(255, 255, 255, 0.8);
-//   }
-// `;
-
-
 import React from 'react';
 import styled from "styled-components";
 import { useTheme, TextField, Box, Typography } from "@mui/material";
diff --git a/packages/app/src/components/Stepper.tsx b/packages/app/src/components/Stepper.tsx
index 3f9fdee..007fb24 100644
--- a/packages/app/src/components/Stepper.tsx
+++ b/packages/app/src/components/Stepper.tsx
@@ -1,595 +1,3 @@
-// import React, { useState } from 'react';
-// import { Stepper, Step, StepLabel, Button, Box } from '@mui/material';
-
-// const steps = [
-//   'Send Reset Email',
-//   'Copy/Paste DKIM Sig',
-//   'Add Address',
-//   'Prove',
-//   'Verify & Mint'
-// ];
-
-// const StepperComponent: React.FC = () => {
-//   const [activeStep, setActiveStep] = useState<number>(0);
-
-//   const handleNext = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
-//   };
-
-//   const handleBack = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-//   };
-
-//   const handleStep = (step: number) => () => {
-//     setActiveStep(step);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%' }}>
-//       <Stepper activeStep={activeStep}>
-//         {steps.map((label, index) => (
-//           <Step key={label} onClick={handleStep(index)}>
-//             <StepLabel>{label}</StepLabel>
-//           </Step>
-//         ))}
-//       </Stepper>
-//       <Box sx={{ mt: 2 }}>
-//         {activeStep === steps.length ? (
-//           <div>
-//             <p>All steps completed</p>
-//             <Button onClick={() => setActiveStep(0)}>Reset</Button>
-//           </div>
-//         ) : (
-//           <div>
-//             <div>
-//               <Button
-//                 disabled={activeStep === 0}
-//                 onClick={handleBack}
-//                 sx={{ mt: 1, mr: 1 }}
-//               >
-//                 Back
-//               </Button>
-//               <Button
-//                 variant="contained"
-//                 onClick={handleNext}
-//                 sx={{ mt: 1, mr: 1 }}
-//               >
-//                 {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-//               </Button>
-//             </div>
-//           </div>
-//         )}
-//       </Box>
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
-
-
-
-
-
-
-
-
-// import React, { useState } from 'react';
-// import { Stepper, Step, StepLabel, Button, Box, Typography } from '@mui/material';
-// import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-// const steps = [
-//   'Send Reset Email',
-//   'Copy/Paste DKIM Sig',
-//   'Add Address',
-//   'Prove',
-//   'Verify & Mint'
-// ];
-
-// const StepperComponent: React.FC = () => {
-//   const [activeStep, setActiveStep] = useState<number>(0);
-
-//   const handleNext = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
-//   };
-
-//   const handleBack = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-//   };
-
-//   const handleStep = (step: number) => () => {
-//     setActiveStep(step);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%' }}>
-//       <Stepper activeStep={activeStep} alternativeLabel>
-//         {steps.map((label, index) => (
-//           <Step key={label} onClick={handleStep(index)} sx={{ cursor: 'pointer' }}>
-//             <StepLabel>
-//               <Typography variant="body1" component="span" sx={{ fontWeight: activeStep === index ? 'bold' : 'regular' }}>
-//                 {label}
-//               </Typography>
-//             </StepLabel>
-//             {index < steps.length - 1 && <ArrowForwardIosIcon sx={{ fontSize: 12, verticalAlign: 'middle', marginLeft: 1, marginRight: 1 }} />}
-//           </Step>
-//         ))}
-//       </Stepper>
-//       <Box sx={{ mt: 2 }}>
-//         {activeStep === steps.length ? (
-//           <div>
-//             <p>All steps completed</p>
-//             <Button onClick={() => setActiveStep(0)}>Reset</Button>
-//           </div>
-//         ) : (
-//           <div>
-//             <div>
-//               <Button
-//                 disabled={activeStep === 0}
-//                 onClick={handleBack}
-//                 sx={{ mt: 1, mr: 1 }}
-//               >
-//                 Back
-//               </Button>
-//               <Button
-//                 variant="contained"
-//                 onClick={handleNext}
-//                 sx={{ mt: 1, mr: 1 }}
-//               >
-//                 {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-//               </Button>
-//             </div>
-//           </div>
-//         )}
-//       </Box>
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
-
-
-
-
-
-
-
-// import React, { useState } from 'react';
-// import { Box, Typography, IconButton } from '@mui/material';
-// import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-// const steps = [
-//   'Send Reset Email',
-//   'Copy/Paste DKIM Sig',
-//   'Add Address',
-//   'Prove',
-//   'Verify & Mint'
-// ];
-
-// const StepperComponent: React.FC = () => {
-//   const [activeStep, setActiveStep] = useState<number>(0);
-
-//   const handleStep = (step: number) => () => {
-//     setActiveStep(step);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
-//       {steps.map((label, index) => (
-//         <React.Fragment key={label}>
-//           <Box
-//             onClick={handleStep(index)}
-//             sx={{
-//               cursor: 'pointer',
-//               display: 'flex',
-//               alignItems: 'center'
-//             }}
-//           >
-//             <Typography
-//               variant="body1"
-//               component="span"
-//               sx={{
-//                 fontWeight: activeStep === index ? 'bold' : 'regular',
-//                 color: activeStep === index ? 'black' : 'gray',
-//                 borderBottom: activeStep === index ? '2px solid black' : 'none',
-//                 paddingBottom: '2px'
-//               }}
-//             >
-//               {label}
-//             </Typography>
-//           </Box>
-//           {index < steps.length - 1 && (
-//             <ArrowForwardIosIcon sx={{ fontSize: 12, verticalAlign: 'middle', marginLeft: 1, marginRight: 1, color: 'gray' }} />
-//           )}
-//         </React.Fragment>
-//       ))}
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
-
-
-
-// import React, { useState } from 'react';
-// import { Box, Typography } from '@mui/material';
-// import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-// const steps = [
-//   'SEND RESET EMAIL',
-//   'COPY/PASTE DKIM SIG',
-//   'ADD ADDRESS',
-//   'PROVE',
-//   'VERIFY & MINT'
-// ];
-
-// const StepperComponent: React.FC = () => {
-//   const [activeStep, setActiveStep] = useState<number>(0);
-
-//   const handleStep = (step: number) => () => {
-//     setActiveStep(step);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%', position: 'relative', marginY: '50px'}}>
-//       {/* Light grey bar */}
-//       <Box
-//         sx={{
-//           position: 'absolute',
-//           top: '100%',
-//           left: 0,
-//           right: 0,
-//           height: '2px',
-//           backgroundColor: '#e0e0e0',
-//           zIndex: 1,
-//           transform: 'translateY(-50%)'
-//         }}
-//       />
-
-//       <Box sx={{ display: 'flex', alignItems: 'center', position: 'relative', zIndex: 2 }}>
-//         {steps.map((label, index) => (
-//           <React.Fragment key={label}>
-//             <Box
-//               onClick={handleStep(index)}
-//               sx={{
-//                 cursor: 'pointer',
-//                 display: 'flex',
-//                 alignItems: 'center',
-//                 position: 'relative',
-//                 padding: '0 10px'
-//               }}
-//             >
-//               <Typography
-//                 variant="body1"
-//                 component="span"
-//                 sx={{
-//                   fontWeight: activeStep === index ? 'bold' : 'regular',
-//                   color: activeStep === index ? 'black' : 'gray',
-//                   borderBottom: activeStep === index ? '2px solid black' : 'none',
-//                   paddingBottom: '2px'
-//                 }}
-//               >
-//                 {label}
-//               </Typography>
-//             </Box>
-//             {index < steps.length - 1 && (
-//               <ArrowForwardIosIcon sx={{ fontSize: 12, verticalAlign: 'middle', color: 'gray' }} />
-//             )}
-//           </React.Fragment>
-//         ))}
-//       </Box>
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
-
-
-
-
-
-
-
-
-
-
-
-// import React, { ReactNode } from 'react';
-// import { Box, Typography, Button } from '@mui/material';
-// import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-// interface StepperComponentProps {
-//   children: ReactNode;
-//   steps: string[];
-//   activeStep: number;
-//   setActiveStep: (step: number) => void;
-// }
-
-// const StepperComponent: React.FC<StepperComponentProps> = ({
-//   children,
-//   steps,
-//   activeStep,
-//   setActiveStep
-// }) => {
-//   const handleStep = (step: number) => () => {
-//     setActiveStep(step);
-//   };
-
-//   const handleNext = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep + 1);
-//   };
-
-//   const handleBack = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%', position: 'relative', marginY: '50px' }}>
-//       <Box />
-//       {/* Light grey bar */}
-//       <Box
-//         sx={{
-//           display: 'flex',
-//           alignItems: 'center',
-//           position: 'relative',
-//           zIndex: 2,
-//           borderBottom: '1px solid #e0e0e0',
-//         }}
-//       >
-//         {steps.map((label, index) => (
-//           <React.Fragment key={label}>
-//             <Box
-//               onClick={handleStep(index)}
-//               sx={{
-//                 cursor: 'pointer',
-//                 display: 'flex',
-//                 alignItems: 'center',
-//                 position: 'relative',
-//                 padding: '0 10px',
-//               }}
-//             >
-//               <Typography
-//                 variant="body1"
-//                 component="span"
-//                 sx={{
-//                   fontWeight: activeStep === index ? 'bold' : 'regular',
-//                   color: activeStep === index ? 'black' : 'gray',
-//                   borderBottom: activeStep === index ? '2px solid black' : 'none',
-//                   paddingBottom: '2px',
-//                   fontSize: { xs: '9px', sm: '10px', md: '11px', lg: '12px' }
-//                 }}
-//               >
-//                 {label}
-//               </Typography>
-//             </Box>
-//             {index < steps.length - 1 && (
-//               <ArrowForwardIosIcon sx={{ fontSize: 12, verticalAlign: 'middle', color: 'gray' }} />
-//             )}
-//           </React.Fragment>
-//         ))}
-//       </Box>
-
-//       <Box sx={{ marginTop: '20px' }}>
-//         {children}
-//       </Box>
-
-//       <Box sx={{ display: 'flex', width: '220px', justifyContent: 'space-between', marginTop: '20px' }}>
-//         {activeStep !== 0 && (
-//           <Button
-//             variant="outlined"
-//             onClick={handleBack}
-//             sx={{
-//               textTransform: 'none',
-//               fontWeight: 'regular',
-//               padding: '10px 35px',
-//               border: '1px solid #1C1C1C',
-//               marginY: '9px',
-//               color: '#1C1C1C',
-//               '&:hover':{
-//                 backgroundColor: '#1C1C1C',
-//                 color: '#ffffff'
-//               },
-//               '&.Mui-disabled': {
-//                 backgroundColor: '#ffffff', // Change to desired disabled background color
-//                 color: '#1C1C1C', // Change to desired disabled text color
-//                 border: '1px solid #757575' // Change to desired disabled border color
-//               }
-//             }}
-//           >
-//             Back
-//           </Button>
-//         )}
-
-
-//       {activeStep !== 4 && (
-//         <Button
-//           variant="contained"
-//           onClick={handleNext}
-//           disabled={activeStep === steps.length - 1}
-//           sx={{
-//             textTransform: 'none',
-//             fontWeight: 'regular',
-//             padding: '10px 35px',
-//             backgroundColor: '#1C1C1C',
-//             border: '1px solid #1C1C1C',
-//             marginY: '9px',
-//             color: '#ffffff',
-//             '&.Mui-disabled': {
-//               backgroundColor: '#ffffff', // Change to desired disabled background color
-//               color: '#1C1C1C', // Change to desired disabled text color
-//               border: '1px solid #757575', // Change to desired disabled border color
-//             }
-//           }}
-//         >
-//           Next
-//         </Button>
-//       )}
-//       </Box>
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
-
-
-
-
-
-// import React, { useState, ReactNode } from 'react';
-// import { Box, Typography, Button } from '@mui/material';
-// import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-
-// interface StepperComponentProps {
-//   children: ReactNode;
-//   steps: string[];
-//   activeStep: number;
-//   setActiveStep: (step: number) => void;
-// }
-
-// const StepperComponent: React.FC<StepperComponentProps> = ({
-//   children,
-//   steps,
-//   activeStep,
-//   setActiveStep
-// }) => {
-//   const [completedSteps, setCompletedSteps] = useState<boolean[]>(new Array(steps.length).fill(false));
-
-//   const handleStep = (step: number) => () => {
-//     if (step <= activeStep || completedSteps[step - 1]) {
-//       setActiveStep(step);
-//     }
-//   };
-
-//   const handleNext = () => {
-//     if (activeStep < steps.length - 1 && completedSteps.slice(0, activeStep).every(completed => completed)) {
-//       setCompletedSteps((prevCompletedSteps) => {
-//         const newCompletedSteps = [...prevCompletedSteps];
-//         newCompletedSteps[activeStep] = true;
-//         return newCompletedSteps;
-//       });
-//       setActiveStep((prevActiveStep) => prevActiveStep + 1);
-//     }
-//   };
-
-//   const handleBack = () => {
-//     setActiveStep((prevActiveStep) => prevActiveStep - 1);
-//   };
-
-//   return (
-//     <Box sx={{ width: '100%', position: 'relative', marginY: '50px' }}>
-//       <Box />
-//       {/* Light grey bar */}
-//       <Box
-//         sx={{
-//           display: 'flex',
-//           alignItems: 'center',
-//           position: 'relative',
-//           zIndex: 2,
-//           borderBottom: '1px solid #e0e0e0',
-//         }}
-//       >
-//         {steps.map((label, index) => {
-//           const isStepDisabled = !(index <= activeStep || completedSteps[index - 1]);
-//           return (
-//             <React.Fragment key={label}>
-//               <Box
-//                 onClick={handleStep(index)}
-//                 sx={{
-//                   cursor: isStepDisabled ? 'not-allowed' : 'pointer',
-//                   display: 'flex',
-//                   alignItems: 'center',
-//                   position: 'relative',
-//                   padding: '0 10px',
-//                 }}
-//               >
-//                 <Typography
-//                   variant="body1"
-//                   component="span"
-//                   sx={{
-//                     fontWeight: activeStep === index ? 'bold' : 'regular',
-//                     color: activeStep === index ? 'black' : 'gray',
-//                     borderBottom: activeStep === index ? '2px solid black' : 'none',
-//                     paddingBottom: '2px',
-//                     fontSize: { xs: '9px', sm: '10px', md: '11px', lg: '12px' }
-//                   }}
-//                 >
-//                   {label}
-//                 </Typography>
-//               </Box>
-//               {index < steps.length - 1 && (
-//                 <ArrowForwardIosIcon sx={{ fontSize: 12, verticalAlign: 'middle', color: 'gray' }} />
-//               )}
-//             </React.Fragment>
-//           );
-//         })}
-//       </Box>
-
-//       <Box sx={{ marginTop: '20px' }}>
-//         {children}
-//       </Box>
-
-//       <Box sx={{ display: 'flex', width: '220px', justifyContent: 'space-between', marginTop: '20px' }}>
-//         {activeStep !== 0 && (
-//           <Button
-//             variant="outlined"
-//             onClick={handleBack}
-//             sx={{
-//               textTransform: 'none',
-//               fontWeight: 'regular',
-//               padding: '10px 35px',
-//               border: '1px solid #1C1C1C',
-//               marginY: '9px',
-//               color: '#1C1C1C',
-//               '&:hover':{
-//                 backgroundColor: '#1C1C1C',
-//                 color: '#ffffff'
-//               },
-//               '&.Mui-disabled': {
-//                 backgroundColor: '#ffffff', // Change to desired disabled background color
-//                 color: '#1C1C1C', // Change to desired disabled text color
-//                 border: '1px solid #757575' // Change to desired disabled border color
-//               }
-//             }}
-//           >
-//             Back
-//           </Button>
-//         )}
-
-
-//       {activeStep !== steps.length - 1 && (
-//         <Button
-//           variant="contained"
-//           onClick={handleNext}
-//           disabled={!completedSteps.slice(0, activeStep).every(completed => completed)}
-//           sx={{
-//             textTransform: 'none',
-//             fontWeight: 'regular',
-//             padding: '10px 35px',
-//             backgroundColor: '#1C1C1C',
-//             border: '1px solid #1C1C1C',
-//             marginY: '9px',
-//             color: '#ffffff',
-//             '&.Mui-disabled': {
-//               backgroundColor: '#ffffff', // Change to desired disabled background color
-//               color: '#1C1C1C', // Change to desired disabled text color
-//               border: '1px solid #757575', // Change to desired disabled border color
-//             }
-//           }}
-//         >
-//           Next
-//         </Button>
-//       )}
-//       </Box>
-//     </Box>
-//   );
-// };
-
-// export default StepperComponent;
-
 import React, { ReactNode } from 'react';
 import { Box, Typography, Button, useTheme } from '@mui/material';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
diff --git a/packages/app/src/components/TopBanner.tsx b/packages/app/src/components/TopBanner.tsx
index 08e1aa0..9f8fba5 100644
--- a/packages/app/src/components/TopBanner.tsx
+++ b/packages/app/src/components/TopBanner.tsx
@@ -1,24 +1,3 @@
-// import styled from "styled-components";
-
-// export const TopBanner: React.FC<{ message: string }> = ({ message }) => {
-//   return <Container>{message}</Container>;
-// };
-
-// const Container = styled.div`
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   position: fixed;
-//   top: 0;
-//   left: 0;
-//   right: 0;
-//   width: 100%;
-//   padding: 16px;
-//   background: #8742f5;
-//   color: #fff;
-//   font-weight: 500;
-// `;
-
 import styled from "styled-components";
 
 export const TopBanner: React.FC<{ message: string }> = ({ message }) => {
diff --git a/packages/app/src/components/Video.tsx b/packages/app/src/components/Video.tsx
index 69c3f16..2766c17 100644
--- a/packages/app/src/components/Video.tsx
+++ b/packages/app/src/components/Video.tsx
@@ -14,39 +14,3 @@ const Video: React.FC = () => {
 }
 
 export default Video;
-
-
-
-
-
-/* YOUTUBE VIDEO VERSION BELOW */
-
-
-
-
-
-// import React from 'react';
-// import { Box } from '@mui/material';
-
-// const Video: React.FC = () => {
-//   return (
-//     <Box sx={{ position: 'relative', width: '100%', paddingTop: '56.25%' /* 16:9 Aspect Ratio */ }}>
-//       <iframe
-//         src="https://www.youtube.com/embed/GEWuGtsjATw"
-//         style={{
-//           position: 'absolute',
-//           top: 0,
-//           left: 0,
-//           width: '100%',
-//           height: '100%',
-//           border: 0,
-//         }}
-//         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-//         allowFullScreen
-//         title="YouTube Video"
-//       ></iframe>
-//     </Box>
-//   );
-// }
-
-// export default Video;
\ No newline at end of file
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<boolean>(false);
+  const [proofGenerationMethod, setProofGenerationMethod] = useState<
+    "local" | "remote"
+  >("local");
 
   const [stopwatch, setStopwatch] = useState<Record<string, number>>({
     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<number>(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 (
     <Grid container>
       {isOverlayVisible && <Overlay> </Overlay>}
@@ -522,195 +510,235 @@ export const MainPage: React.FC<{}> = (props) => {
         />
       )}
 
-
-
-
       {/* --------- LEFT HAND SIDE OF SCREEN --------- */}
-      <Grid item xs={12} md={6} sx={{   height: '100vh', overflowY: 'auto', backgroundColor:'#ffbfbf', background:'radial-gradient(70.71% 70.71% at 50% 50%, #FFF 19%, rgba(255, 255, 255, 0.00) 61%), linear-gradient(38deg, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.69) 100%), linear-gradient(45deg, #FFF 10%, rgba(255, 255, 255, 0.00) 23.5%), linear-gradient(36deg, #FFF 12.52%, rgba(255, 255, 255, 0.00) 76.72%), linear-gradient(214deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 220, 234, 0.40) 37.53%, rgba(255, 255, 255, 0.00) 71%), linear-gradient(212deg, rgba(255, 255, 255, 0.00) 15%, #E4F1FE 72.5%, rgba(255, 255, 255, 0.00) 91.5%)'}}>
-        <Nav splitscreen={true}/>
-        <Box sx={{backgroundColor:'#FFFFFF', padding:'20px', color:'#000000', minHeight:'650px', paddingX:{sm: '40px', md:'60px'}}} >
-        <Stepper
-          steps={steps}
-          activeStep={activeStep}
-          setActiveStep={setActiveStep}
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          height: "100vh",
+          overflowY: "auto",
+          backgroundColor: "#ffbfbf",
+          background:
+            "radial-gradient(70.71% 70.71% at 50% 50%, #FFF 19%, rgba(255, 255, 255, 0.00) 61%), linear-gradient(38deg, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.69) 100%), linear-gradient(45deg, #FFF 10%, rgba(255, 255, 255, 0.00) 23.5%), linear-gradient(36deg, #FFF 12.52%, rgba(255, 255, 255, 0.00) 76.72%), linear-gradient(214deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 220, 234, 0.40) 37.53%, rgba(255, 255, 255, 0.00) 71%), linear-gradient(212deg, rgba(255, 255, 255, 0.00) 15%, #E4F1FE 72.5%, rgba(255, 255, 255, 0.00) 91.5%)",
+        }}
+      >
+        <Nav splitscreen={true} />
+        <Box
+          sx={{
+            backgroundColor: "#FFFFFF",
+            padding: "20px",
+            color: "#000000",
+            minHeight: "650px",
+            paddingX: { sm: "40px", md: "60px" },
+          }}
         >
-
-          {/* --------- SEND TWITTER PASSWORD RESET EMAIL SECTION - STEP 0 --------- */}
-          {activeStep ==0 && (
-            <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
-              <Typography variant='h1' sx={{marginBottom:'20px'}}>SEND TWITTER PASSWORD RESET EMAIL</Typography>
-              <Typography>Send yourself a password reset email from Twitter. <br></br>(Reminder: Twitter name with emoji might fail to pass DKIM verification)</Typography>
-              {/* <Typography sx={{marginTop:'20px', fontWeight:'bold', color:'red'}}>{message}</Typography>  */}
-            </Box>
-          )}
-          {/* --------- END OF: SEND TWITTER PASSWORD RESET EMAIL SECTION - STEP 0 --------- */}
-
-
-
-
-
-
-          {/* --------- COPY & PASTE THE EMAIL DKIM SIG - STEP 1 --------- */}
-          {activeStep ==1 && (
-            <Box>
-              <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
-                <Typography variant='h1' sx={{marginBottom:'20px'}}>COPY & PASTE THE EMAIL DKIM SIG</Typography>
-                <Typography>In your inbox, find the email from Twitter and click the three dot menu, then "Show original" then "Copy to clipboard". If on Outlook, download the original email as .eml and copy it instead. Copy paste or drop that into the box below. Note that we cannot use this to phish you: we do not know your password, and we never get this email info because we have no server at all. We are actively searching for a less sketchy email.</Typography>
+          <Stepper
+            steps={steps}
+            activeStep={activeStep}
+            setActiveStep={setActiveStep}
+          >
+            {/* --------- SEND TWITTER PASSWORD RESET EMAIL SECTION - STEP 0 --------- */}
+            {activeStep == 0 && (
+              <Box sx={{ marginTop: "100px", marginBottom: "40px" }}>
+                <Typography variant="h1" sx={{ marginBottom: "20px" }}>
+                  SEND TWITTER PASSWORD RESET EMAIL
+                </Typography>
+                <Typography>
+                  Send yourself a password reset email from Twitter. <br></br>
+                  (Reminder: Twitter name with emoji might fail to pass DKIM
+                  verification)
+                </Typography>
+                {/* <Typography sx={{marginTop:'20px', fontWeight:'bold', color:'red'}}>{message}</Typography>  */}
               </Box>
-
-              <Column>
-              <SubHeader>Input</SubHeader>
-              {inputMethod || !import.meta.env.VITE_GOOGLE_CLIENT_ID ? null : (
-                  <EmailInputMethod
-                    highlighted={true}
-                    onClickGoogle={() => {
-                      try {
-                        setIsFetchEmailLoading(true);
-                        setInputMethod("GOOGLE");
-                        googleLogIn();
-                      } catch (e) {
-                        console.log(e);
-                        setIsFetchEmailLoading(false);
-                      }
-                    }}
-                    onClickEMLFile={() => {
-                      setInputMethod("EML_FILE");
-                    }}
-                  />
-                )}
-                {inputMethod ? (
-                  <TextButton onClick={() => setInputMethod(null)}>
-                    ←{"  "}Go Back
-                  </TextButton>
-                ) : null}
-                {inputMethod === "GOOGLE" ? (
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      flexDirection: "column",
-                      padding: "1.25rem",
-                    }}
-                  >
-                    {isFetchEmailLoading ? (
-                      <div className="loader" />
-                    ) : (
-                      <>
-                      <Typography variant="h6" sx={{ marginBottom: '1rem' }}>
-                      Select the "Password Reset Request" Email from Twitter!
-                      </Typography>
-                      {fetchedEmails.map((email, index) => (
-                        <Box
-                          sx={{
-                            borderBottom: "1px solid lightgrey",
-                            width: "100%",
-                            padding: "0 1rem",
-                            display: "flex",
-                            justifyContent: "space-between",
-                            cursor: 'pointer',
-                            borderTop: index === 0 ? "1px solid white" : "none", // Conditional border top
-                          }}
-                          onClick={() => {
-                            setEmailFull(email.decodedContents);
-                          }}
-                        >
-                          <Typography 
-                            sx={{   
-                              overflow: 'hidden', 
-                              padding: "0.7rem 0rem",                          
-                              color:
-                                  email.decodedContents === emailFull
-                                    ? theme.palette.accent.main
-                                    : theme.palette.secondary.main
-                          }}>
-                            {email.subject}
-                          </Typography>
-                          <Typography 
-                            sx={{
-                              flex:'end', 
-                              marginRight:'0px', 
-                              width:'100px', 
-                              textAlign:'right',
-                              overflow: 'hidden', 
-                              padding: "0.7rem 0rem",                          
-                              color:
-                                  email.decodedContents === emailFull
-                                    ? theme.palette.accent.main
-                                    : theme.palette.secondary.main
-                          }}>
-                            {formatDateTime(email.internalDate)}
-                          </Typography>
-                        </Box>
-                      ))}
-                      </>
-                    )}
-                    
-                  </div>
-                ) : null}
-                {inputMethod === "EML_FILE" ||
-                !import.meta.env.VITE_GOOGLE_CLIENT_ID ? (
-                  <>
-                    {" "}
-                    <DragAndDropTextBox onFileDrop={onFileDrop} highlighted={true}/>
-                    <h3
+            )}
+            {/* --------- END OF: SEND TWITTER PASSWORD RESET EMAIL SECTION - STEP 0 --------- */}
+
+            {/* --------- COPY & PASTE THE EMAIL DKIM SIG - STEP 1 --------- */}
+            {activeStep == 1 && (
+              <Box>
+                <Box sx={{ marginTop: "100px", marginBottom: "40px" }}>
+                  <Typography variant="h1" sx={{ marginBottom: "20px" }}>
+                    COPY & PASTE THE EMAIL DKIM SIG
+                  </Typography>
+                  <Typography>
+                    In your inbox, find the email from Twitter and click the
+                    three dot menu, then "Show original" then "Copy to
+                    clipboard". If on Outlook, download the original email as
+                    .eml and copy it instead. Copy paste or drop that into the
+                    box below. Note that we cannot use this to phish you: we do
+                    not know your password, and we never get this email info
+                    because we have no server at all. We are actively searching
+                    for a less sketchy email.
+                  </Typography>
+                </Box>
+
+                <Column>
+                  <SubHeader>Input</SubHeader>
+                  {inputMethod ||
+                  !import.meta.env.VITE_GOOGLE_CLIENT_ID ? null : (
+                    <EmailInputMethod
+                      highlighted={true}
+                      onClickGoogle={() => {
+                        try {
+                          setIsFetchEmailLoading(true);
+                          setInputMethod("GOOGLE");
+                          googleLogIn();
+                        } catch (e) {
+                          console.log(e);
+                          setIsFetchEmailLoading(false);
+                        }
+                      }}
+                      onClickEMLFile={() => {
+                        setInputMethod("EML_FILE");
+                      }}
+                    />
+                  )}
+                  {inputMethod ? (
+                    <TextButton onClick={() => setInputMethod(null)}>
+                      ←{"  "}Go Back
+                    </TextButton>
+                  ) : null}
+                  {inputMethod === "GOOGLE" ? (
+                    <div
                       style={{
-                        textAlign: "center",
-                        marginTop: "0rem",
-                        marginBottom: "0rem",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        flexDirection: "column",
+                        padding: "1.25rem",
                       }}
                     >
-                      OR
-                    </h3>
-                    <LabeledTextArea
-                      highlighted={true}
-                      label="Full Email with Headers"
-                      value={emailFull}
-                      onChange={(e) => {
-                        setEmailFull(e.currentTarget.value);
-                      }}
+                      {isFetchEmailLoading ? (
+                        <div className="loader" />
+                      ) : (
+                        <>
+                          <Typography
+                            variant="h6"
+                            sx={{ marginBottom: "1rem" }}
+                          >
+                            Select the "Password Reset Request" Email from
+                            Twitter!
+                          </Typography>
+                          {fetchedEmails.map((email, index) => (
+                            <Box
+                              sx={{
+                                borderBottom: "1px solid lightgrey",
+                                width: "100%",
+                                padding: "0 1rem",
+                                display: "flex",
+                                justifyContent: "space-between",
+                                cursor: "pointer",
+                                borderTop:
+                                  index === 0 ? "1px solid white" : "none", // Conditional border top
+                              }}
+                              onClick={() => {
+                                setEmailFull(email.decodedContents);
+                              }}
+                            >
+                              <Typography
+                                sx={{
+                                  overflow: "hidden",
+                                  padding: "0.7rem 0rem",
+                                  color:
+                                    email.decodedContents === emailFull
+                                      ? theme.palette.accent.main
+                                      : theme.palette.secondary.main,
+                                }}
+                              >
+                                {email.subject}
+                              </Typography>
+                              <Typography
+                                sx={{
+                                  flex: "end",
+                                  marginRight: "0px",
+                                  width: "100px",
+                                  textAlign: "right",
+                                  overflow: "hidden",
+                                  padding: "0.7rem 0rem",
+                                  color:
+                                    email.decodedContents === emailFull
+                                      ? theme.palette.accent.main
+                                      : theme.palette.secondary.main,
+                                }}
+                              >
+                                {formatDateTime(email.internalDate)}
+                              </Typography>
+                            </Box>
+                          ))}
+                        </>
+                      )}
+                    </div>
+                  ) : null}
+                  {inputMethod === "EML_FILE" ||
+                  !import.meta.env.VITE_GOOGLE_CLIENT_ID ? (
+                    <>
+                      {" "}
+                      <DragAndDropTextBox
+                        onFileDrop={onFileDrop}
+                        highlighted={true}
+                      />
+                      <h3
+                        style={{
+                          textAlign: "center",
+                          marginTop: "0rem",
+                          marginBottom: "0rem",
+                        }}
+                      >
+                        OR
+                      </h3>
+                      <LabeledTextArea
+                        highlighted={true}
+                        label="Full Email with Headers"
+                        value={emailFull}
+                        onChange={(e) => {
+                          setEmailFull(e.currentTarget.value);
+                        }}
+                      />
+                    </>
+                  ) : null}
+
+                  {displayMessage ===
+                    "Downloading compressed proving files... (this may take a few minutes)" && (
+                    <ProgressBar
+                      width={downloadProgress * 10}
+                      label={`${downloadProgress} / 10 items`}
                     />
-                  </>
-                ) : null}
-
-
-
-              {displayMessage ===
-                "Downloading compressed proving files... (this may take a few minutes)" && (
-                <ProgressBar
-                  width={downloadProgress * 10}
-                  label={`${downloadProgress} / 10 items`}
-                />
-              )}
-              <ProcessStatus status={status}>
-                {status !== "not-started" ? (
-                  <div>
-                    Status:
-                    <span data-testid={"status-" + status}>{status}</span>
-                  </div>
-                ) : (
-                  <div data-testid={"status-" + status}></div>
-                )}
-                <TimerDisplay timers={stopwatch} />
-              </ProcessStatus>
-              </Column>
-              </Box>          
-              )}
-          {/* --------- END OF: COPY & PASTE THE EMAIL DKIM SIG - STEP 1 --------- */}
-          
-
-
-
-          {/* --------- ADD ETHEREUM ADDRESS TO SECURE PROOF - STEP 2 --------- */}
-          {activeStep ==2 && (
-            <Box>
-              <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
-                <Typography variant='h1' sx={{marginBottom:'20px'}}>ADD ETHEREUM ADDRESS TO SECURE PROOF</Typography>
-                <Typography>Paste in your sending Ethereum address. This ensures that no one else can "steal" your proof for another account (frontrunning protection!). Click "Prove". Note it is completely client side and open source, and no server ever sees your private information.</Typography>
+                  )}
+                  <ProcessStatus status={status}>
+                    {status !== "not-started" ? (
+                      <div>
+                        Status:
+                        <span data-testid={"status-" + status}>{status}</span>
+                      </div>
+                    ) : (
+                      <div data-testid={"status-" + status}></div>
+                    )}
+                    <TimerDisplay timers={stopwatch} />
+                  </ProcessStatus>
+                </Column>
               </Box>
-
-              <Column>
-                <SubHeader>Input</SubHeader>
+            )}
+            {/* --------- END OF: COPY & PASTE THE EMAIL DKIM SIG - STEP 1 --------- */}
+
+            {/* --------- ADD ETHEREUM ADDRESS TO SECURE PROOF - STEP 2 --------- */}
+            {activeStep == 2 && (
+              <Box>
+                <Box sx={{ marginTop: "100px", marginBottom: "40px" }}>
+                  <Typography variant="h1" sx={{ marginBottom: "20px" }}>
+                    ADD ETHEREUM ADDRESS TO SECURE PROOF
+                  </Typography>
+                  <Typography>
+                    Paste in your sending Ethereum address. This ensures that no
+                    one else can "steal" your proof for another account
+                    (frontrunning protection!). Click "Prove". Note it is
+                    completely client side and open source, and no server ever
+                    sees your private information.
+                  </Typography>
+                </Box>
+
+                <Column>
+                  <SubHeader>Input</SubHeader>
                   <>
                     <LabeledTextArea
                       disabled={true}
@@ -721,341 +749,382 @@ export const MainPage: React.FC<{}> = (props) => {
                       }}
                     />
                   </>
-          
-                <SingleLineInput
-                  highlighted={true}
-                  label="Ethereum Address"
-                  value={ethereumAddress}
-                  onChange={(e) => {
-                    setEthereumAddress(e.currentTarget.value);
-                    setExternalInputs({...externalInputs,address: e.target.value,});
-                  }}
-                />
-
-                {displayMessage ===
-                  "Downloading compressed proving files... (this may take a few minutes)" && (
-                  <ProgressBar
-                    width={downloadProgress * 10}
-                    label={`${downloadProgress} / 10 items`}
+
+                  <SingleLineInput
+                    highlighted={true}
+                    label="Ethereum Address"
+                    value={ethereumAddress}
+                    onChange={(e) => {
+                      setEthereumAddress(e.currentTarget.value);
+                      setExternalInputs({
+                        ...externalInputs,
+                        address: e.target.value,
+                      });
+                    }}
                   />
-                )}
-                <ProcessStatus status={status}>
-                  {status !== "not-started" ? (
-                    <div>
-                      Status:
-                      <span data-testid={"status-" + status}>{status}</span>
-                    </div>
-                  ) : (
-                    <div data-testid={"status-" + status}></div>
-                  )}
-                  <TimerDisplay timers={stopwatch} />
-                </ProcessStatus>
-              </Column>
-            </Box>          
-          )}
-          {/* --------- END OF: ADD ETHEREUM ADDRESS TO SECURE PROOF - STEP 2 --------- */}
-
-
-
-
-
-
-          {/* --------- GENERATE PROOF USING INPUTS - STEP 3 --------- */}
-          {activeStep ==3 && (
-          <Box>
-            <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
-              <Typography variant='h1' sx={{marginBottom:'20px'}}>GENERATE PROOF USING INPUTS</Typography>
-              <Typography>Click "Prove". Note it is completely client side and open source, and no server ever sees your private information.</Typography>
-            </Box>
-
-            <Column>
-            <SubHeader>Input</SubHeader>
-                <LabeledTextArea
-                  disabled={true}
-                  label="Full Email with Headers"
-                  value={emailFull}
-                  onChange={(e) => {
-                    setEmailFull(e.currentTarget.value);
-                  }}
-                />
-                <SingleLineInput
-                  disabled={true}
-                  label="Ethereum Address"
-                  value={ethereumAddress}
-                  onChange={(e) => {
-                    setEthereumAddress(e.currentTarget.value);
-                    setExternalInputs({...externalInputs, address: e.target.value,});
-                  }}
-                />
-                <Button
-                  highlighted={true}
-                  data-testid="prove-button"
-                  disabled={
-                    displayMessage !== "Prove" ||
-                    emailFull.length === 0 ||
-                    ethereumAddress.length === 0 ||
-                    status !== "proof-files-downloaded-successfully"  ||  isRemoteProofGenerationLoading
-                  }
-                  onClick={async () => {
-                    let input: ITwitterCircuitInputs;
-                    try {
-                      setDisplayMessage("Generating proof...");
-                      setStatus("generating-input");
-
-                      input = await generateTwitterVerifierCircuitInputs(
-                        Buffer.from(emailFull),
-                        ethereumAddress
-                      );
 
-                      console.log("Generated input:", JSON.stringify(input));
-                    } catch (e) {
-                      console.log("Error generating input", e);
-                      setDisplayMessage("Prove");
-                      setStatus("error-bad-input");
-                      return;
+                  {displayMessage ===
+                    "Downloading compressed proving files... (this may take a few minutes)" && (
+                    <ProgressBar
+                      width={downloadProgress * 10}
+                      label={`${downloadProgress} / 10 items`}
+                    />
+                  )}
+                  <ProcessStatus status={status}>
+                    {status !== "not-started" ? (
+                      <div>
+                        Status:
+                        <span data-testid={"status-" + status}>{status}</span>
+                      </div>
+                    ) : (
+                      <div data-testid={"status-" + status}></div>
+                    )}
+                    <TimerDisplay timers={stopwatch} />
+                  </ProcessStatus>
+                </Column>
+              </Box>
+            )}
+            {/* --------- END OF: ADD ETHEREUM ADDRESS TO SECURE PROOF - STEP 2 --------- */}
+
+            {/* --------- GENERATE PROOF USING INPUTS - STEP 3 --------- */}
+            {activeStep == 3 && (
+              <Box>
+                <Box sx={{ marginTop: "100px", marginBottom: "40px" }}>
+                  <Typography variant="h1" sx={{ marginBottom: "20px" }}>
+                    GENERATE PROOF USING INPUTS
+                  </Typography>
+                  <Typography>
+                    Click "Prove". Note it is completely client side and open
+                    source, and no server ever sees your private information.
+                  </Typography>
+                </Box>
+
+                <Column>
+                  <SubHeader>Input</SubHeader>
+                  <LabeledTextArea
+                    disabled={true}
+                    label="Full Email with Headers"
+                    value={emailFull}
+                    onChange={(e) => {
+                      setEmailFull(e.currentTarget.value);
+                    }}
+                  />
+                  <SingleLineInput
+                    disabled={true}
+                    label="Ethereum Address"
+                    value={ethereumAddress}
+                    onChange={(e) => {
+                      setEthereumAddress(e.currentTarget.value);
+                      setExternalInputs({
+                        ...externalInputs,
+                        address: e.target.value,
+                      });
+                    }}
+                  />
+                  <Button
+                    highlighted={true}
+                    data-testid="prove-button"
+                    disabled={
+                      displayMessage !== "Prove" ||
+                      emailFull.length === 0 ||
+                      ethereumAddress.length === 0 ||
+                      status !== "proof-files-downloaded-successfully" ||
+                      isRemoteProofGenerationLoading
                     }
+                    onClick={async () => {
+                      let input: ITwitterCircuitInputs;
+                      try {
+                        setDisplayMessage("Generating proof...");
+                        setStatus("generating-input");
+                        setProofGenerationMethod("local");
 
-                    console.time("zk-gen");
-                    recordTimeForActivity("startedProving");
-                    setDisplayMessage(
-                      "Starting proof generation (this will take 6-10 minutes & ~5GB RAM)"
-                    );
-                    setStatus("generating-proof");
-                    console.log("Starting proof generation");
-                    // alert("Generating proof, will fail due to input");
-
-
-                    const { proof, publicSignals } = await generateProof(
-                      input,
-                      // @ts-ignore
-                      import.meta.env.VITE_CIRCUIT_ARTIFACTS_URL,
-                      CIRCUIT_NAME
-                    );
-
-
-
-
-                    //const proof = JSON.parse('{"pi_a": ["19201501460375869359786976350200749752225831881815567077814357716475109214225", "11505143118120261821370828666956392917988845645366364291926723724764197308214", "1"], "pi_b": [["17114997753466635923095897108905313066875545082621248342234075865495571603410", "7192405994185710518536526038522451195158265656066550519902313122056350381280"], ["13696222194662648890012762427265603087145644894565446235939768763001479304886", "2757027655603295785352548686090997179551660115030413843642436323047552012712"], ["1", "0"]], "pi_c": ["6168386124525054064559735110298802977718009746891233616490776755671099515304", "11077116868070103472532367637450067545191977757024528865783681032080180232316", "1"], "protocol": "groth16", "curve": "bn128"}');
-                    //const publicSignals = JSON.parse('["0", "0", "0", "0", "0", "0", "0", "0", "32767059066617856", "30803244233155956", "0", "0", "0", "0", "27917065853693287", "28015", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "113659471951225", "0", "0", "1634582323953821262989958727173988295", "1938094444722442142315201757874145583", "375300260153333632727697921604599470", "1369658125109277828425429339149824874", "1589384595547333389911397650751436647", "1428144289938431173655248321840778928", "1919508490085653366961918211405731923", "2358009612379481320362782200045159837", "518833500408858308962881361452944175", "1163210548821508924802510293967109414", "1361351910698751746280135795885107181", "1445969488612593115566934629427756345", "2457340995040159831545380614838948388", "2612807374136932899648418365680887439", "16021263889082005631675788949457422", "299744519975649772895460843780023483", "3933359104846508935112096715593287", "556307310756571904145052207427031380052712977221"]');
-                    console.log("Finished proof generation");
-                    console.timeEnd("zk-gen");
-                    recordTimeForActivity("finishedProving");
-
-                    console.log("publicSignals", publicSignals);
-
-                    // alert("Done generating proof");
-                    setProof(JSON.stringify(proof));
-                    // let kek = publicSignals.map((x: string) => BigInt(x));
-                    // let soln = packedNBytesToString(kek.slice(0, 12));
-                    // let soln2 = packedNBytesToString(kek.slice(12, 147));
-                    // let soln3 = packedNBytesToString(kek.slice(147, 150));
-                    // setPublicSignals(`From: ${soln}\nTo: ${soln2}\nUsername: ${soln3}`);
-                    setPublicSignals(JSON.stringify(publicSignals));
-
-                if (!input) {
-                  setStatus("error-failed-to-prove");
-                  return;
-                }
-                setLastAction("sign");
-                setDisplayMessage("Finished computing ZK proof");
-                setStatus("done");
-                try {
-                  (window as any).cJson = JSON.stringify(input);
-                  console.log(
-                    "wrote circuit input to window.cJson. Run copy(cJson)"
-                  );
-                } catch (e) {
-                  console.error(e);
-                }
-              }}
-            >
-              {displayMessage}
-            </Button>
-            <Button
-              data-testid="remote-prove-button"
-              onClick={handleGenerateProofRemotely}
-              disabled={ areInputWorkersCreating || emailFull.length === 0 || isRemoteProofGenerationLoading || !inputWorkers["zk-email/proof-of-twitter-v2"]}
-            >
-              Generate Proof Remotely{" "}
-              {isRemoteProofGenerationLoading || areInputWorkersCreating ? 
-              (
-                <div className="loader" style={{ marginLeft: "1rem" }} />
-              ) : ( 
-                ""
-              )}
-            </Button>
-
-            {displayMessage ===
-              "Downloading compressed proving files... (this may take a few minutes)" && (
-              <ProgressBar
-                width={downloadProgress * 10}
-                label={`${downloadProgress} / 10 items`}
-              />
-            )}
-            <ProcessStatus status={status}>
-              {status !== "not-started" ? (
-                <div>
-                  Status:
-                  <span data-testid={"status-" + status}>{status}</span>
-                </div>
-              ) : (
-                <div data-testid={"status-" + status}></div>
-              )}
-              <TimerDisplay timers={stopwatch} />
-              {/* {status === 'generating-proof' && <CounterDisplay>Elapsed Time: {counter}s</CounterDisplay>} */}
-            </ProcessStatus>
-            </Column>
-            </Box>   
-                  
-          )}
-          {/* --------- END OF: GENERATE PROOF USING INPUTS - STEP 3 --------- */}
-
-
-
-          {/* --------- VERIFY & MINT ON CHAIN TWITTER BADGE - STEP 4 --------- */}
-          {activeStep ==4 && (
-            <Box>
-              <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
-                <Typography variant='h1' sx={{marginBottom:'20px'}}>VERIFY & MINT ON CHAIN TWITTER BADGE</Typography>
-                <Typography>Click "Verify" and then "Mint Twitter Badge On-Chain", and approve to mint the NFT badge that proves Twitter ownership! Note that it is 700K gas right now so only feasible on Sepolia, though we intend to reduce this soon.</Typography>
-              </Box>
+                        input = await generateTwitterVerifierCircuitInputs(
+                          Buffer.from(emailFull),
+                          ethereumAddress
+                        );
 
+                        console.log("Generated input:", JSON.stringify(input));
+                      } catch (e) {
+                        console.log("Error generating input", e);
+                        setDisplayMessage("Prove");
+                        setStatus("error-bad-input");
+                        return;
+                      }
+
+                      console.time("zk-gen");
+                      recordTimeForActivity("startedProving");
+                      setDisplayMessage(
+                        "Starting proof generation (this will take 6-10 minutes & ~5GB RAM)"
+                      );
+                      setStatus("generating-proof");
+                      console.log("Starting proof generation");
+                      // alert("Generating proof, will fail due to input");
 
-              <Column>
-                <SubHeader>Output</SubHeader>
-                {verificationMessage && (
-                  <StatusTag statusMessage={verificationMessage} statusPassed={verificationPassed}/>
-                )}
-                <LabeledTextArea
-                  label="Proof Output"
-                  value={proof}
-                  onChange={(e) => {
-                    setProof(e.currentTarget.value);
-                  }}
-                />
-                <LabeledTextArea
-                  label="Public Info Sent On Chain"
-                  value={publicSignals}
-                  // secret
-                  onChange={(e) => {
-                    setPublicSignals(e.currentTarget.value);
-                  }}
-                />
-                <Button
-                  highlighted={verificationMessage!='Passed!'}
-                  disabled={emailFull.trim().length === 0 || proof.length === 0}
-                  onClick={async () => {
-                    try {
-                      setLastAction("verify");
-                      let ok = true;
-                      const res: boolean = await verifyProof(
-                        JSON.parse(proof),
-                        JSON.parse(publicSignals),
+                      const { proof, publicSignals } = await generateProof(
+                        input,
                         // @ts-ignore
                         import.meta.env.VITE_CIRCUIT_ARTIFACTS_URL,
                         CIRCUIT_NAME
                       );
-                      console.log(res);
-                      if (!res) throw Error("Verification failed!");
-                      setVerificationMessage("Passed!");
-                      setVerificationPassed(ok);
-                    } catch (er: any) {
-                      setVerificationMessage("Failed to verify " + er.toString());
-                      setVerificationPassed(false);
-                    }
-                  }}
-                >
-                  Verify
-                </Button>
-                <Button
-                  highlighted={verificationMessage === 'Passed!' || isSuccess}
-                  // disabled={!verificationPassed || isLoading || isSuccess || !write}
-                  disabled={ !verificationPassed || isPending || isSuccess || !writeContract}
-                  onClick={async () => {
-                    if (isSuccess) {
-                      window.open(`https://sepolia.etherscan.io/tx/${data?.hash}`, "_blank");
-                    } else {
-                      setStatus("sending-on-chain");
-                      writeContract({
-                        // @ts-ignore
-                        address: import.meta.env.VITE_CONTRACT_ADDRESS,
-                        abi: abi,
-                        functionName: "mint",
-                        args: [
-                        reformatProofForChain(proof),
-                        publicSignals ? JSON.parse(publicSignals) : [],  
-                        ],
-                      });
+
+                      //const proof = JSON.parse('{"pi_a": ["19201501460375869359786976350200749752225831881815567077814357716475109214225", "11505143118120261821370828666956392917988845645366364291926723724764197308214", "1"], "pi_b": [["17114997753466635923095897108905313066875545082621248342234075865495571603410", "7192405994185710518536526038522451195158265656066550519902313122056350381280"], ["13696222194662648890012762427265603087145644894565446235939768763001479304886", "2757027655603295785352548686090997179551660115030413843642436323047552012712"], ["1", "0"]], "pi_c": ["6168386124525054064559735110298802977718009746891233616490776755671099515304", "11077116868070103472532367637450067545191977757024528865783681032080180232316", "1"], "protocol": "groth16", "curve": "bn128"}');
+                      //const publicSignals = JSON.parse('["0", "0", "0", "0", "0", "0", "0", "0", "32767059066617856", "30803244233155956", "0", "0", "0", "0", "27917065853693287", "28015", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "113659471951225", "0", "0", "1634582323953821262989958727173988295", "1938094444722442142315201757874145583", "375300260153333632727697921604599470", "1369658125109277828425429339149824874", "1589384595547333389911397650751436647", "1428144289938431173655248321840778928", "1919508490085653366961918211405731923", "2358009612379481320362782200045159837", "518833500408858308962881361452944175", "1163210548821508924802510293967109414", "1361351910698751746280135795885107181", "1445969488612593115566934629427756345", "2457340995040159831545380614838948388", "2612807374136932899648418365680887439", "16021263889082005631675788949457422", "299744519975649772895460843780023483", "3933359104846508935112096715593287", "556307310756571904145052207427031380052712977221"]');
+                      console.log("Finished proof generation");
+                      console.timeEnd("zk-gen");
+                      recordTimeForActivity("finishedProving");
+
+                      console.log("publicSignals", publicSignals);
+
+                      // alert("Done generating proof");
+                      setProof(JSON.stringify(proof));
+                      // let kek = publicSignals.map((x: string) => BigInt(x));
+                      // let soln = packedNBytesToString(kek.slice(0, 12));
+                      // let soln2 = packedNBytesToString(kek.slice(12, 147));
+                      // let soln3 = packedNBytesToString(kek.slice(147, 150));
+                      // setPublicSignals(`From: ${soln}\nTo: ${soln2}\nUsername: ${soln3}`);
+                      setPublicSignals(JSON.stringify(publicSignals));
+
+                      if (!input) {
+                        setStatus("error-failed-to-prove");
+                        return;
+                      }
+                      setLastAction("sign");
+                      setDisplayMessage("Finished computing ZK proof");
+                      setStatus("done");
+                      setActiveStep(4);
+                      try {
+                        (window as any).cJson = JSON.stringify(input);
+                        console.log(
+                          "wrote circuit input to window.cJson. Run copy(cJson)"
+                        );
+                      } catch (e) {
+                        console.error(e);
+                      }
+                    }}
+                  >
+                    {displayMessage}
+                  </Button>
+                  <Button
+                    data-testid="remote-prove-button"
+                    onClick={handleGenerateProofRemotely}
+                    disabled={
+                      areInputWorkersCreating ||
+                      emailFull.length === 0 ||
+                      isRemoteProofGenerationLoading ||
+                      !inputWorkers["zk-email/proof-of-twitter-v2"]
                     }
-                  }}
-                  endIcon={isSuccess ? <ArrowOutwardIcon /> : null}
-                >
-                  {isSuccess
-                    ? "SUCCESSFULLY SENT ON CHAIN"
-                    : isPending
-                    ? "Confirm in wallet"
-                    : false
-                    ? "Connect Wallet first, scroll to top!"
-                    : verificationPassed
-                    ? "Mint Twitter badge on-chain"
-                    : "Verify first, before minting on-chain!"}
-                </Button>
-
-                <Button
-                  disabled={!proofStatus[Object.keys(proofStatus)[0]]}
-                  onClick={async () => {
-                  try {
-                    verifyRemoteProof(entry.id);
-                  } catch (er: any) {
-                    setVerificationMessage("Failed to verify " + er.toString());
-                    setVerificationPassed(false);
-                  }}}
-                >
-                  Verify Remote proof
-                  {isRemoteProofVerificationLoading ? (
-                    <div className="loader" style={{ marginLeft: "1rem" }} />
-                  ) : (
-                    ""
+                  >
+                    Generate Proof Remotely{" "}
+                    {isRemoteProofGenerationLoading ||
+                    areInputWorkersCreating ? (
+                      <div className="loader" style={{ marginLeft: "1rem" }} />
+                    ) : (
+                      ""
+                    )}
+                  </Button>
+
+                  {displayMessage ===
+                    "Downloading compressed proving files... (this may take a few minutes)" && (
+                    <ProgressBar
+                      width={downloadProgress * 10}
+                      label={`${downloadProgress} / 10 items`}
+                    />
+                  )}
+                  <ProcessStatus status={status}>
+                    {status !== "not-started" ? (
+                      <div>
+                        Status:
+                        <span data-testid={"status-" + status}>{status}</span>
+                      </div>
+                    ) : (
+                      <div data-testid={"status-" + status}></div>
+                    )}
+                    <TimerDisplay timers={stopwatch} />
+                    {/* {status === 'generating-proof' && <CounterDisplay>Elapsed Time: {counter}s</CounterDisplay>} */}
+                  </ProcessStatus>
+                </Column>
+              </Box>
+            )}
+            {/* --------- END OF: GENERATE PROOF USING INPUTS - STEP 3 --------- */}
+
+            {/* --------- VERIFY & MINT ON CHAIN TWITTER BADGE - STEP 4 --------- */}
+            {activeStep == 4 && (
+              <Box>
+                <Box sx={{ marginTop: "100px", marginBottom: "40px" }}>
+                  <Typography variant="h1" sx={{ marginBottom: "20px" }}>
+                    VERIFY & MINT ON CHAIN TWITTER BADGE
+                  </Typography>
+                  <Typography>
+                    Click "Verify" and then "Mint Twitter Badge On-Chain", and
+                    approve to mint the NFT badge that proves Twitter ownership!
+                    Note that it is 700K gas right now so only feasible on
+                    Sepolia, though we intend to reduce this soon.
+                  </Typography>
+                </Box>
+
+                <Column>
+                  <SubHeader>Output</SubHeader>
+                  {verificationMessage && (
+                    <StatusTag
+                      statusMessage={verificationMessage}
+                      statusPassed={verificationPassed}
+                    />
+                  )}
+                  <LabeledTextArea
+                    label="Proof Output"
+                    value={proof}
+                    onChange={(e) => {
+                      setProof(e.currentTarget.value);
+                    }}
+                  />
+                  <LabeledTextArea
+                    label="Public Info Sent On Chain"
+                    value={publicSignals}
+                    // secret
+                    onChange={(e) => {
+                      setPublicSignals(e.currentTarget.value);
+                    }}
+                  />
+                  {proofGenerationMethod === "local" && (
+                    <>
+                      <Button
+                        highlighted={verificationMessage != "Passed!"}
+                        disabled={
+                          emailFull.trim().length === 0 || proof.length === 0
+                        }
+                        onClick={async () => {
+                          try {
+                            setLastAction("verify");
+                            let ok = true;
+                            const res: boolean = await verifyProof(
+                              JSON.parse(proof),
+                              JSON.parse(publicSignals),
+                              // @ts-ignore
+                              import.meta.env.VITE_CIRCUIT_ARTIFACTS_URL,
+                              CIRCUIT_NAME
+                            );
+                            console.log(res);
+                            if (!res) throw Error("Verification failed!");
+                            setVerificationMessage("Passed!");
+                            setVerificationPassed(ok);
+                          } catch (er: any) {
+                            setVerificationMessage(
+                              "Failed to verify " + er.toString()
+                            );
+                            setVerificationPassed(false);
+                          }
+                        }}
+                      >
+                        Verify
+                      </Button>
+                      <Button
+                        highlighted={
+                          verificationMessage === "Passed!" || isSuccess
+                        }
+                        // disabled={!verificationPassed || isLoading || isSuccess || !write}
+                        disabled={
+                          !verificationPassed ||
+                          isPending ||
+                          isSuccess ||
+                          !writeContract
+                        }
+                        onClick={async () => {
+                          if (isSuccess) {
+                            window.open(
+                              `https://sepolia.etherscan.io/tx/${data?.hash}`,
+                              "_blank"
+                            );
+                          } else {
+                            setStatus("sending-on-chain");
+                            writeContract({
+                              // @ts-ignore
+                              address: import.meta.env.VITE_CONTRACT_ADDRESS,
+                              abi: abi,
+                              functionName: "mint",
+                              args: [
+                                reformatProofForChain(proof),
+                                publicSignals ? JSON.parse(publicSignals) : [],
+                              ],
+                            });
+                          }
+                        }}
+                        endIcon={isSuccess ? <ArrowOutwardIcon /> : null}
+                      >
+                        {isSuccess
+                          ? "SUCCESSFULLY SENT ON CHAIN"
+                          : isPending
+                          ? "Confirm in wallet"
+                          : false
+                          ? "Connect Wallet first, scroll to top!"
+                          : verificationPassed
+                          ? "Mint Twitter badge on-chain"
+                          : "Verify first, before minting on-chain!"}
+                      </Button>
+                    </>
+                  )}
+
+                  {proofGenerationMethod === "remote" && (
+                    <>
+                      <Button
+                        disabled={!proofStatus[Object.keys(proofStatus)[0]]}
+                        onClick={async () => {
+                          try {
+                            verifyRemoteProof(entry.id);
+                          } catch (er: any) {
+                            setVerificationMessage(
+                              "Failed to verify " + er.toString()
+                            );
+                            setVerificationPassed(false);
+                          }
+                        }}
+                      >
+                        Verify Remote proof
+                        {isRemoteProofVerificationLoading ? (
+                          <div
+                            className="loader"
+                            style={{ marginLeft: "1rem" }}
+                          />
+                        ) : (
+                          ""
+                        )}
+                      </Button>
+                    </>
                   )}
-                </Button>
-                {isSuccess && (
-                  <div>
-                    Transaction:{" "}
-                    <a href={"https://sepolia.etherscan.io/tx/" + data?.hash}>
-                      {data?.hash}
-                    </a>
-                  </div>
-                )}
-              </Column>
-            </Box>
-          )}
-          {/* --------- END OF: VERIFY & MINT ON CHAIN TWITTER BADGE - STEP 4 --------- */}
-      
-        </Stepper>
+                  {isSuccess && (
+                    <div>
+                      Transaction:{" "}
+                      <a href={"https://sepolia.etherscan.io/tx/" + data?.hash}>
+                        {data?.hash}
+                      </a>
+                    </div>
+                  )}
+                </Column>
+              </Box>
+            )}
+            {/* --------- END OF: VERIFY & MINT ON CHAIN TWITTER BADGE - STEP 4 --------- */}
+          </Stepper>
         </Box>
       </Grid>
       {/* --------- END OF: LEFT HAND SIDE OF SCREEN --------- */}
 
-
-
-
-
       {/* --------- RIGHT HAND SIDE OF SCREEN FOR INSTRUCTION VIDEO OR ACCOMPANING GRAPHICS  --------- */}
-      <Grid item xs={12} md={6} sx={{ maxHeight: '100vh',     overflow: 'hidden', backgroundColor:'#C3C3C3' }}>
-        <Video/>
+      <Grid
+        item
+        xs={12}
+        md={6}
+        sx={{
+          maxHeight: "100vh",
+          overflow: "hidden",
+          backgroundColor: "#C3C3C3",
+        }}
+      >
+        <Video />
       </Grid>
       {/* --------- END OF: RIGHT SIDE FOR INSTRUCTION VIDEO OR ACCOMPANING GRAPHICS  --------- */}
-
     </Grid>
   );
 };
 
-
-
-
-
-
-
 const ProcessStatus = styled.div<{ status: string }>`
   font-size: 8px;
   padding: 8px;
@@ -1097,12 +1166,6 @@ const TimerDisplay = ({ timers }: { timers: Record<string, number> }) => {
   );
 };
 
-
-
-
-
-
-
 const CounterDisplay = styled.div`
   font-size: 12px;
   font-weight: bold;
@@ -1124,20 +1187,16 @@ const SubHeader = styled(Header)`
   color: "#000000";
 `;
 
-
-
 const Column = styled(Col)`
   width: fit;
   gap: 1rem;
   align-self: flex-start;
-  background: #FFFFFC;
+  background: #fffffc;
   padding: 2rem;
   border-radius: 10px;
-  border: 1px solid #C7C7C7;
+  border: 1px solid #c7c7c7;
 `;
 
-
-
 const Overlay = styled.div`
   position: fixed;
   top: 0;