Update input workers logic

zkemail · Jul 24, 2024 · e5b3301 · e5b3301
1 parent 7df46f2
commit e5b3301
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 18 deletions.
diff --git 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(
     <React.StrictMode>
-      <WagmiConfig config={config}>
-        <RainbowKitProvider chains={[sepolia]} theme={darkTheme()}>
-          <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
-            <GoogleAuthProvider>
-              <App />
-            </GoogleAuthProvider>
-          </GoogleOAuthProvider>
-        </RainbowKitProvider>
-      </WagmiConfig>
+      <ZkRegexProvider
+        clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}
+        zkRegexRegistryUrl="https://registry-dev.zkregex.com"
+      >
+        <WagmiConfig config={config}>
+          <RainbowKitProvider chains={[sepolia]} theme={darkTheme()}>
+            <GoogleOAuthProvider
+              clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}
+            >
+              <GoogleAuthProvider>
+                <App />
+              </GoogleAuthProvider>
+            </GoogleOAuthProvider>
+          </RainbowKitProvider>
+        </WagmiConfig>{" "}
+      </ZkRegexProvider>
     </React.StrictMode>,
     document.getElementById("root")
   );
 } else {
   ReactDOM.render(
     <React.StrictMode>
-      <ZkRegexProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID} zkRegexRegistryUrl="https://registry-dev.zkregex.com">
+      <ZkRegexProvider
+        clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}
+        zkRegexRegistryUrl="https://registry-dev.zkregex.com"
+      >
         <WagmiConfig config={config}>
           <RainbowKitProvider chains={[sepolia]} theme={darkTheme()}>
             <App />

diff --git 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<boolean>(false);
+  const [areInputWorkersCreating, setAreInputWorkerCreating] =
+    useState<boolean>(false);
 
   const [stopwatch, setStopwatch] = useState<Record<string, number>>({
     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,19 +271,40 @@ export const MainPage: React.FC<{}> = (props) => {
   }, []);
 
   const handleGenerateProofRemotely = async () => {
+    setIsRemoteProofGenerationLoading(true);
     const input = await generateInputFromEmail(
       "zk-email/proof-of-twitter-v2",
       emailFull
     );
     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 ? (
+              <div className="loader" style={{ marginLeft: "1rem" }} />
+            ) : (
+              ""
+            )}
           </Button>
           {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
@@ -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') {