feat: frontend solution pupup logic draft

Author: imiskii

frontend/package.json

@@ -18,6 +18,7 @@
     "@libp2p/interfaces": "^3.3.2",
     "@tanstack/react-query": "^5.85.5",
     "@types/circomlibjs": "^0.1.6",
+    "@types/snarkjs": "^0.7.9",
     "buffer": "^6.0.3",
     "circomlibjs": "^0.1.2",
     "ethers": "^6.15.0",
@@ -26,6 +27,7 @@
     "process": "^0.11.10",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "snarkjs": "^0.7.5",
     "util": "^0.12.5"
   },
   "devDependencies": {

frontend/src/components/SolutionPopUp.tsx

@@ -3,13 +3,13 @@ import Popup from "./PopUp";
 import "../styles/SolutionPopUp.css"
 
 type SolutionPopUpProps = {
-  onSubmit: (data: string) => void;
+  onSubmit: (data: number) => void;
   isOpen: boolean;
   onClose: () => void;
 }
 
 function SolutionPopUp({ onSubmit, isOpen, onClose }: SolutionPopUpProps) {
-  const [solution, setSolution] = useState<string>("")
+  const [solution, setSolution] = useState<number>(0)
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -21,7 +21,7 @@ function SolutionPopUp({ onSubmit, isOpen, onClose }: SolutionPopUpProps) {
       <form className="solution-form" onSubmit={handleSubmit}>
         <label>
           Secreat
-          <input type="text" value={solution} onChange={(e) => setSolution(e.target.value)} required />
+          <input type="number" value={solution} onChange={(e) => setSolution(Number(e.target.value))} required />
         </label>
         <button type="submit">
           Submit solution

frontend/src/containers/SolutionPopUpContainer.tsx

@@ -1,17 +1,85 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import SolutionPopUp from "../components/SolutionPopUp";
 import { FilledButton } from "../components/Buttons";
 import { useAlert } from "../context/AlertContext";
+import { useWallet } from "../context/WalletContext";
+import computeCommit from "../utils/computeCommit";
+import TaskManagerAbi from "../../../abi/TaskManagerAbi.json";
+import * as snarkjs from "snarkjs";
 
 
 function SolutionPopUpContainer() {
   const [isOpen, setIsOpen] = useState(false);
+  const [contractAddress, setContractAddress] = useState<string>("");
+  //const { signer, account } = useWallet();
   const { showAlert } = useAlert();
 
+  // Fetch contract address once when popup opens
+  useEffect(() => {
+    if (isOpen) {
+      (async () => {
+        try {
+          const res = await fetch("/api/contract-address");
+          const json = await res.json();
+          setContractAddress(json.address);
+        } catch (e) {
+          showAlert("error", "Failed to fetch contract address", 4000);
+        }
+      })();
+    }
+  }, [isOpen]);
 
-  const handleSolutionSubmit = (solution: string) => {
+  const handleSolutionSubmit = async (solution: number) => {
+    /*
+    // Call TaskManager smart contract
+    try {
+      if (!signer) throw new Error("Wallet not connected");
+      const contract = new (window as any).ethers.Contract(
+        contractAddress,
+        TaskManagerAbi,
+        signer
+      );
 
+      // TODO: Missing taskId and salt. Need to fetch them from backend with other task data!
+      // TODO: Fix input
+      // Prepare input for the circuit
+      const commit = await computeCommit(BigInt(solution), salt);
+      const input = {
+        solution: BigInt(solution),
+        taskId: BigInt(taskId),
+        taskSalt: salt,
+        commit: commit,
+        recipient: account
+      };
+            
+      const { proof, publicSignals } = await snarkjs.groth16.fullProve(input, "/TaskProof.wasm", "/TaskProof_final.zkey");
+      // build calldata
+      const calldata = await snarkjs.groth16.exportSolidityCallData(proof, publicSignals);
+      const argv = calldata.replace(/["[\]\s]/g, "").split(",").map(x => BigInt(x).toString());
+
+      const a = [argv[0], argv[1]];
+      const b = [[argv[2], argv[3]], [argv[4], argv[5]]];
+      const c = [argv[6], argv[7]];
+      const publicInputs = argv.slice(8); // should be [commit, taskId, taskSalt, recipient]
+
+      const tx = await contract.solveTask(
+        taskId,
+        account, // My wallet address
+        a,
+        b,
+        c,
+        publicInputs
+      );
+      await tx.wait();
+      showAlert("success", `Task solved`, 4000);
+    } catch (e) {
+      console.log(e);
+      showAlert("error", "Failed to call smart contract", 4000);
+      return;
+    }
+    setIsOpen(false);
     showAlert("info", `Task solution: "${solution}" subbmited!`, 4000);
+    */
   }