ref: Refactor Statement component and adjust challenge 4

packages/nextjs/app/engineering/circom/[slug]/page.tsx

@@ -26,9 +26,9 @@ export default async function Page({ params }: PageProps) {
 
         {params.slug !== "1" && (
           <>
-            <Statement />
+            <Statement challengeId={challengeId} />
             <hr className="border-0 h-px bg-blue-500 shadow-[0_0_10px_2px_rgba(59,130,246,0.7)]" />
-            <Verifier />
+            <Verifier challengeId={challengeId} />
             <hr className="border-0 h-px bg-blue-500 shadow-[0_0_10px_2px_rgba(59,130,246,0.7)] mb-10" />
           </>
         )}

packages/nextjs/app/engineering/circom/page.tsx

@@ -26,7 +26,7 @@ const Home: NextPage = () => {
           <div key={rowIndex} className="flex flex-row items-center mb-8">
             {row.map((step, index) => {
               // TODO: Implement the logic to lock the challenges
-              const isLocked = step.id > 2;
+              const isLocked = step.id > 2 && step.id !== 4;
               const content = (
                 <div className={`flex flex-col items-center mx-4 ${isLocked ? "opacity-50" : ""} group`}>
                   <div className="flex flex-col items-center">

packages/nextjs/components/Statement.tsx

@@ -1,19 +1,29 @@
-const Statement = () => {
-  return (
-    <div className="w-full max-w-[64rem] p-4 bg-gray-700 rounded-lg mb-6 font-play shadow-lg">
-      <div className="mb-4">
-        <h3 className="text-white text-xl font-bold">Statements</h3>
-        <ul className="text-gray-300">
-          <li>- Knights always tell the truth.</li>
-          <li>- Knaves always lie.</li>
-        </ul>
-      </div>
-      <div className="mb-4">
-        <p className="text-gray-300">Character A: B is a knave.</p>
-        <p className="text-gray-300">Character B: A and I are of opposite types.</p>
-      </div>
-    </div>
-  );
+import React from "react";
+// Import the statement for every challenge
+import Challenge2Content from "../public/challenges/challenge_2/statement";
+import Challenge4Content from "../public/challenges/challenge_4/statement";
+
+type StatementProps = {
+  challengeId: string;
+};
+
+const NotFoundContent = () => <p>Challenge not found</p>;
+
+const Statement = ({ challengeId }: StatementProps) => {
+  let ChallengeContent;
+
+  switch (challengeId) {
+    case "2":
+      ChallengeContent = Challenge2Content;
+      break;
+    case "4":
+      ChallengeContent = Challenge4Content;
+      break;
+    default:
+      ChallengeContent = NotFoundContent;
+  }
+
+  return <ChallengeContent />;
 };
 
 export default Statement;

packages/nextjs/components/Verifier.tsx

@@ -2,16 +2,25 @@
 
 import React, { useState } from "react";
 import Image from "next/image";
-import { generateAndVerifyProof } from "~~/utils/generateAndVerifyProof";
+import { generateAndVerifyProof2, generateAndVerifyProof4 } from "~~/utils/generateAndVerifyProof";
 
-function Verifier() {
+type VerifierProps = {
+  challengeId: string;
+};
+
+function Verifier({ challengeId }: VerifierProps) {
   const [characterA, setCharacterA] = useState(0);
   const [characterB, setCharacterB] = useState(0);
   const [result, setResult] = useState("No proof yet");
 
   const verify = async () => {
-    const result = (await generateAndVerifyProof(characterA, characterB)) ? "Valid proof" : "Invalid proof";
-    setResult(result);
+    if (challengeId == "2") {
+      const result = (await generateAndVerifyProof2(characterA, characterB)) ? "Valid proof" : "Invalid proof";
+      setResult(result);
+    } else if (challengeId == "4") {
+      const result = (await generateAndVerifyProof4(characterA, characterB)) ? "Valid proof" : "Invalid proof";
+      setResult(result);
+    }
   };
 
   return (

packages/nextjs/public/challenges/challenge_2/statement.js

@@ -0,0 +1,17 @@
+const Challenge2Content = () => (
+  <div className="w-full max-w-[64rem] p-4 bg-gray-700 rounded-lg mb-6 font-play shadow-lg">
+    <div className="mb-4">
+      <h3 className="text-white text-xl font-bold">Statements</h3>
+      <ul className="text-gray-300">
+        <li>- Knights always tell the truth.</li>
+        <li>- Knaves always lie.</li>
+      </ul>
+    </div>
+    <div className="mb-4">
+      <p className="text-gray-300">Character A: B is a knave.</p>
+      <p className="text-gray-300">Character B: A and I are of opposite types.</p>
+    </div>
+  </div>
+);
+
+export default Challenge2Content;

packages/nextjs/public/challenges/challenge_4/statement.js

@@ -0,0 +1,17 @@
+const Challenge4Content = () => (
+  <div className="w-full max-w-[64rem] p-4 bg-gray-700 rounded-lg mb-6 font-play shadow-lg">
+    <div className="mb-4">
+      <h3 className="text-white text-xl font-bold">Statements</h3>
+      <ul className="text-gray-300">
+        <li>- Knights always tell the truth.</li>
+        <li>- Knaves always lie.</li>
+      </ul>
+    </div>
+    <div className="mb-4">
+      <p className="text-gray-300">Character A: B is a knave.</p>
+      <p className="text-gray-300">Character B: A and I are of opposite types.</p>
+    </div>
+  </div>
+);
+
+export default Challenge4Content;

packages/nextjs/utils/generateAndVerifyProof.ts

@@ -1,6 +1,6 @@
-import { groth16 } from "snarkjs";
+import { groth16, plonk } from "snarkjs";
 
-export async function generateAndVerifyProof(a: number, b: number) {
+export async function generateAndVerifyProof2(a: number, b: number) {
   try {
     const input = {
       A_is_knight: a, // Ensure 'a' is either "Knight" or "Knave"
@@ -23,3 +23,27 @@ export async function generateAndVerifyProof(a: number, b: number) {
     return 0;
   }
 }
+
+export async function generateAndVerifyProof4(a: number, b: number) {
+  try {
+    const input = {
+      A_is_knight: a, // Ensure 'a' is either "Knight" or "Knave"
+      B_is_knight: b, // Ensure 'b' is either "Knight" or "Knave"
+    };
+
+    const { proof, publicSignals } = await plonk.fullProve(
+      input,
+      "/challenges/challenge_4/files/Knightsknaves.wasm",
+      "/challenges/challenge_4/files/knightsknaves_0000.zkey",
+    );
+
+    const vKey = await fetch("/challenges/challenge_4/files/verification_key.json").then(response => response.json());
+    const isValid = await plonk.verify(vKey, publicSignals, proof);
+
+    console.log(`Is the proof valid? ${isValid}`);
+    return isValid ? 1 : 0;
+  } catch (error) {
+    console.error("Error generating or verifying proof:", error);
+    return 0;
+  }
+}