Frontend

frontend_assignment/components/form.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import styles from "../styles/Home.module.css";
+
+type FormData = {
+  name: string;
+  age: number;
+  address: string;
+};
+
+const schema = yup
+  .object()
+  .shape({
+    name: yup.string().required(),
+    age: yup.number().positive().integer().required(),
+    address: yup.string().required(),
+  })
+  .required();
+
+export default function App() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+  });
+
+  const onSubmit: SubmitHandler<FormData> = (data) => {
+    console.log("data = ", { data });
+    reset();
+  };
+
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          name
+          <input {...register("name")} />
+          <p>{errors.name?.message}</p>
+          age
+          <input {...register("age")} />
+          <p>{errors.age?.message}</p>
+          address
+          <input {...register("address")} />
+          <p>{errors.address?.message}</p>
+          <input type="submit" value="submit" />
+        </form>
+      </main>
+    </div>
+  );
+}

frontend_assignment/package.json

@@ -17,13 +17,20 @@
         "lint": "next lint"
     },
     "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@hookform/resolvers": "^2.8.10",
+        "@material-ui/core": "^4.12.4",
         "@metamask/detect-provider": "^1.2.0",
+        "@mui/material": "^5.8.1",
         "@zk-kit/identity": "^1.4.1",
         "@zk-kit/protocols": "^1.11.0",
         "assert": "^2.0.0",
         "next": "12.0.10",
         "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "react-dom": "17.0.2",
+        "react-hook-form": "^7.31.2",
+        "yup": "^0.32.11"
     },
     "devDependencies": {
         "@appliedzkp/semaphore-contracts": "^0.8.0",

frontend_assignment/pages/_app.tsx

@@ -1,8 +1,11 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Form from "../components/form";
+import Index from "../pages/index";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  // return <Form />;
+  return <Index />;
 }
 
-export default MyApp
+export default MyApp;

frontend_assignment/pages/index.tsx

@@ -1,83 +1,127 @@
-import detectEthereumProvider from "@metamask/detect-provider"
-import { Strategy, ZkIdentity } from "@zk-kit/identity"
-import { generateMerkleProof, Semaphore } from "@zk-kit/protocols"
-import { providers } from "ethers"
-import Head from "next/head"
-import React from "react"
-import styles from "../styles/Home.module.css"
-
-export default function Home() {
-    const [logs, setLogs] = React.useState("Connect your wallet and greet!")
-
-    async function greet() {
-        setLogs("Creating your Semaphore identity...")
-
-        const provider = (await detectEthereumProvider()) as any
-
-        await provider.request({ method: "eth_requestAccounts" })
-
-        const ethersProvider = new providers.Web3Provider(provider)
-        const signer = ethersProvider.getSigner()
-        const message = await signer.signMessage("Sign this message to create your identity!")
-
-        const identity = new ZkIdentity(Strategy.MESSAGE, message)
-        const identityCommitment = identity.genIdentityCommitment()
-        const identityCommitments = await (await fetch("./identityCommitments.json")).json()
-
-        const merkleProof = generateMerkleProof(20, BigInt(0), identityCommitments, identityCommitment)
-
-        setLogs("Creating your Semaphore proof...")
-
-        const greeting = "Hello world"
-
-        const witness = Semaphore.genWitness(
-            identity.getTrapdoor(),
-            identity.getNullifier(),
-            merkleProof,
-            merkleProof.root,
-            greeting
-        )
-
-        const { proof, publicSignals } = await Semaphore.genProof(witness, "./semaphore.wasm", "./semaphore_final.zkey")
-        const solidityProof = Semaphore.packToSolidityProof(proof)
-
-        const response = await fetch("/api/greet", {
-            method: "POST",
-            body: JSON.stringify({
-                greeting,
-                nullifierHash: publicSignals.nullifierHash,
-                solidityProof: solidityProof
-            })
-        })
-
-        if (response.status === 500) {
-            const errorMessage = await response.text()
-
-            setLogs(errorMessage)
-        } else {
-            setLogs("Your anonymous greeting is onchain :)")
-        }
+import detectEthereumProvider from "@metamask/detect-provider";
+import { Strategy, ZkIdentity } from "@zk-kit/identity";
+import { generateMerkleProof, Semaphore } from "@zk-kit/protocols";
+import { providers } from "ethers";
+import Head from "next/head";
+import React from "react";
+import styles from "../styles/Home.module.css";
+
+//additional packages
+import { useForm, SubmitHandler } from "react-hook-form";
+
+export default function Home(greeting: string) {
+  const [logs, setLogs] = React.useState("Connect your wallet and greet!");
+
+  async function greet(greeting: string) {
+    console.log("greeting = ", greeting);
+    setLogs("Creating your Semaphore identity...");
+
+    const provider = (await detectEthereumProvider()) as any;
+    console.log(provider);
+
+    await provider.request({ method: "eth_requestAccounts" });
+
+    const ethersProvider = new providers.Web3Provider(provider);
+    const signer = ethersProvider.getSigner();
+    const message = await signer.signMessage(
+      "Sign this message to create your identity!"
+    );
+
+    const identity = new ZkIdentity(Strategy.MESSAGE, message);
+    console.log("identity = ", identity);
+
+    const identityCommitment = identity.genIdentityCommitment();
+
+    const identityCommitments = await (
+      await fetch("./identityCommitments.json")
+    ).json();
+
+    const merkleProof = generateMerkleProof(
+      20,
+      BigInt(0),
+      identityCommitments,
+      identityCommitment
+    );
+
+    setLogs("Creating your Semaphore proof...");
+
+    // const greeting = "Hello world";
+    console.log("greeting = ", greeting);
+
+    const witness = Semaphore.genWitness(
+      identity.getTrapdoor(),
+      identity.getNullifier(),
+      merkleProof,
+      merkleProof.root,
+      greeting
+    );
+
+    const { proof, publicSignals } = await Semaphore.genProof(
+      witness,
+      "./semaphore.wasm",
+      "./semaphore_final.zkey"
+    );
+    const solidityProof = Semaphore.packToSolidityProof(proof);
+
+    const response = await fetch("/api/greet", {
+      method: "POST",
+      body: JSON.stringify({
+        greeting,
+        nullifierHash: publicSignals.nullifierHash,
+        solidityProof: solidityProof,
+      }),
+    });
+
+    window.alert(greeting);
+
+    if (response.status === 500) {
+      const errorMessage = await response.text();
+
+      setLogs(errorMessage);
+    } else {
+      setLogs("Your anonymous greeting is onchain :)");
     }
-
-    return (
-        <div className={styles.container}>
-            <Head>
-                <title>Greetings</title>
-                <meta name="description" content="A simple Next.js/Hardhat privacy application with Semaphore." />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-
-            <main className={styles.main}>
-                <h1 className={styles.title}>Greetings</h1>
-
-                <p className={styles.description}>A simple Next.js/Hardhat privacy application with Semaphore.</p>
-
-                <div className={styles.logs}>{logs}</div>
-
-                <div onClick={() => greet()} className={styles.button}>
-                    Greet
-                </div>
-            </main>
-        </div>
-    )
+  }
+
+  type Inputs = {
+    greeting: string;
+  };
+
+  const { register, handleSubmit } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => greet(data.greeting);
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Greetings</title>
+        <meta
+          name="description"
+          content="A simple Next.js/Hardhat privacy application with Semaphore."
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Greetings</h1>
+
+        <p className={styles.description}>
+          A simple Next.js/Hardhat privacy application with Semaphore.
+        </p>
+
+        <div className={styles.logs}>{logs}</div>
+        {/* 
+        <div onClick={() => greet()} className={styles.button}>
+          Greet
+        </div> */}
+
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.button}>
+          <input defaultValue="Greeting Message" {...register("greeting")} />
+          <div>
+            <input type="submit" value="Bloadcast" />
+          </div>
+        </form>
+      </main>
+    </div>
+  );
 }