diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx index c951041..d50683d 100644 --- a/packages/app/src/index.tsx +++ b/packages/app/src/index.tsx @@ -34,22 +34,32 @@ const config = createConfig({ if (import.meta.env.VITE_GOOGLE_CLIENT_ID) { ReactDOM.render( - - - - - - - - - + + + + + + + + + + {" "} + , document.getElementById("root") ); } else { ReactDOM.render( - + diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx index 606267a..cd0516b 100644 --- a/packages/app/src/pages/MainPage.tsx +++ b/packages/app/src/pages/MainPage.tsx @@ -92,6 +92,10 @@ export const MainPage: React.FC<{}> = (props) => { | "proof-files-downloaded-successfully" | "sent" >("not-started"); + const [isRemoteProofGenerationLoading, setIsRemoteProofGenerationLoading] = + useState(false); + const [areInputWorkersCreating, setAreInputWorkerCreating] = + useState(false); const [stopwatch, setStopwatch] = useState>({ startedDownloading: 0, @@ -199,6 +203,7 @@ export const MainPage: React.FC<{}> = (props) => { useEffect(() => { if (!inputWorkers["zk-email/proof-of-twitter-v2"]) { + setAreInputWorkerCreating(true); createInputWorker("zk-email/proof-of-twitter-v2"); } }, []); @@ -266,6 +271,7 @@ export const MainPage: React.FC<{}> = (props) => { }, []); const handleGenerateProofRemotely = async () => { + setIsRemoteProofGenerationLoading(true); const input = await generateInputFromEmail( "zk-email/proof-of-twitter-v2", emailFull @@ -273,12 +279,32 @@ export const MainPage: React.FC<{}> = (props) => { const body = Buffer.from(input.emailBody).toString("utf-8"); console.log("input", input); console.log(input); - const proofRes = await generateProofRemotely( - "zk-email/proof-of-twitter-v2", - input - ); - console.log(proofRes); + try { + const proofRes = await generateProofRemotely( + "zk-email/proof-of-twitter-v2", + input + ); + } catch (err) { + console.log("Something went wrong", err); + setIsRemoteProofGenerationLoading(false); + } finally { + } }; + useEffect(() => { + if (proofStatus[Object.keys(proofStatus)[0]]?.status == "COMPLETED") { + setIsRemoteProofGenerationLoading(false); + setProof(JSON.stringify(proofStatus[Object.keys(proofStatus)[0]].proof)); + setPublicSignals( + JSON.stringify(proofStatus[Object.keys(proofStatus)[0]].publicOutput) + ); + } + }, [proofStatus]); + + useEffect(() => { + if (inputWorkers["zk-email/proof-of-twitter-v2"]) { + setAreInputWorkerCreating(false); + } + }, [inputWorkers]); console.log(inputWorkers); @@ -463,7 +489,8 @@ export const MainPage: React.FC<{}> = (props) => { displayMessage !== "Prove" || emailFull.length === 0 || ethereumAddress.length === 0 || - status !== "proof-files-downloaded-successfully" + status !== "proof-files-downloaded-successfully" || + isRemoteProofGenerationLoading } onClick={async () => { const emailBuffer = rawEmailToBuffer(emailFull); // Cleaned email as buffer @@ -540,8 +567,18 @@ export const MainPage: React.FC<{}> = (props) => { disabled={!inputWorkers["zk-email/proof-of-twitter-v2"]} data-testid="remote-prove-button" onClick={handleGenerateProofRemotely} + disabled={ + areInputWorkersCreating || + emailFull.length === 0 || + isRemoteProofGenerationLoading + } > - Generate Proof Remotely + Generate Proof Remotely{" "} + {isRemoteProofGenerationLoading || areInputWorkersCreating ? ( +
+ ) : ( + "" + )} {displayMessage === "Downloading compressed proving files... (this may take a few minutes)" && ( diff --git a/packages/app/zk-regex-sdk/index.tsx b/packages/app/zk-regex-sdk/index.tsx index c7f9669..28764ab 100644 --- a/packages/app/zk-regex-sdk/index.tsx +++ b/packages/app/zk-regex-sdk/index.tsx @@ -54,6 +54,7 @@ function ZkRegexProvider({children, clientId, zkRegexRegistryUrl}: ProvidersProp } }); const data = await res.json(); + console.log(data) setProofStatus((prev) => ({...prev, [data.id]:data})); if (data.pollUrl) { poolForProofStatus(data.pollUrl) @@ -62,7 +63,7 @@ function ZkRegexProvider({children, clientId, zkRegexRegistryUrl}: ProvidersProp } async function poolForProofStatus(url: string) { - const res = await fetch(url); + const res = await fetch(zkRegexRegistryUrl + url); const data = await res.json(); setProofStatus((prev) => ({...prev, [data.id]:data})); if (data.status !== 'COMPLETED') {