implemented sismo connect button to verify

frontend/components/post/NewPost.tsx

@@ -11,6 +11,9 @@ import UserInfo from "../user/UserInfo";
 import PostForm from "./PostForm";
 import { POST_TITLES } from "@/utils/constants";
 import Modal from "../Modal";
+import SismoConnect from "../user/SismoConnect";
+import { sendTx } from "@/utils/sendTx";
+import toast from "react-hot-toast";
 
 export default function NewPost({
     web3StorageAccessToken,
@@ -25,18 +28,16 @@ export default function NewPost({
     const { address } = useAccount();
     const { data: isVerified, refetch: refetchVerified } = useIsVerified(address);
     const [type, setType] = useState<PostType|undefined>(undefined);
-    const [needVerify, setNeedVerify] = useState(false)
 
     const selectType = (selected: PostType) => {
         setType(selected);
-        if ((isVerified as number) < 2) {
-            setNeedVerify(true)
-        }
     }
 
     let title;
-    if (needVerify) {
-        title = isVerified == 0 ? 'Please verify you are a project owner first' : 'Please wait to be verified'
+    if (isVerified == 0) {
+        title = 'Please verify you are a project owner first'
+    } else if (isVerified == 1) {
+        title = 'Please verify you starred ShuaJJ/Cryptopia repo via Sismo Connect to finish verification'
     } else if (type) {
         title = POST_TITLES[type] ?? 'Please upload a cool image and enter the content';
     } else {
@@ -62,31 +63,51 @@ export default function NewPost({
     const userProps = { ...props, contract: userContract, refetch };
     const postProps = { ...props, contract: postContract, type: type ?? 'announcement', refetch: refetchPosts };
 
+    const verifySismo = async (response: string) => {
+        if (!walletClient || !publicClient || !address || !userContract) {
+            toast.error('Please make sure you are connected', { position: 'top-center' })
+            return;
+        }
+
+        const verified = await sendTx(
+            'Verify Github Star',
+            address,
+            userContract,
+            'verifySismoConnectResponse',
+            publicClient,
+            walletClient,
+            addRecentTransaction,
+            [response]
+        );
+
+        if (verified) {
+            refetch();
+        }
+    }
+
     const modalBody = () => {
-        if (needVerify && isVerified == 0) {
+        if (isVerified == 0) {
             return <UserInfo { ...userProps } />
-        }else if (!needVerify && type) {
+        } else if (isVerified == 1) {
+            return <SismoConnect callback={verifySismo} />
+        } else if (type) {
             return <PostForm { ...postProps } />
-        } else if (!type) {
-            return <TypeSelect onSelect={selectType} />
         }
 
-        return null;
+        return <TypeSelect onSelect={selectType} />
     }
 
 
     return (
         <Modal close={() => {
             setType(undefined);
-            setNeedVerify(false);
             setShow(false);
         }}>
             {type && (
                 <div 
                     className="absolute left-3 top-3 inline-block p-4"
                     onClick={() => { 
                         setType(undefined);
-                        setNeedVerify(false); 
                     }}
                 >
                     <Image src={backIcon} alt="back" />

frontend/components/user/SismoConnect.tsx

@@ -1,63 +1,25 @@
-// Next.js https://nextjs.org/docs/getting-started/installation
-// in src/page.tsx 
 "use client";
 
 import {
   SismoConnectButton,
   AuthType,
-  SismoConnectResponse,
-  ClaimType,
 } from "@sismo-core/sismo-connect-react";
 
-export default function Home() {
+export default function SismoConnect({callback}: {callback: (response: string) => void}) {
   return (
     <SismoConnectButton
       config={{
-        appId: "0xf4977993e52606cfd67b7a1cde717069", // replace with your appId
-        vault: {
-          // For development purposes insert the Data Sources that you want to impersonate here
-          // Never use this in production
-          impersonate: [
-            // EVM
-            "leo21.sismo.eth",
-            "0xA4C94A6091545e40fc9c3E0982AEc8942E282F38",
-            "0x1b9424ed517f7700e7368e34a9743295a225d889",
-            "0x82fbed074f62386ed43bb816f748e8817bf46ff7",
-            "0xc281bd4db5bf94f02a8525dca954db3895685700",
-            // Github
-            "github:leo21",
-            // Twitter
-            "twitter:leo21_eth",
-            // Telegram
-            "telegram:leo21",
-          ],
-        },
-        // displayRawResponse: true,
+        appId: "0x5dc7f3d6e3a6bd3ae49fcfc876ecf217", // replace with your appId
       }}
-      // request proof of Data Sources ownership (e.g EVM, GitHub, twitter or telegram)
       auths={[{ authType: AuthType.GITHUB }]}
-      // request zk proof that Data Source are part of a group
-      // (e.g NFT ownership, Dao Participation, GitHub commits)
       claims={[
-        // ENS DAO Voters
-        { groupId: "0x85c7ee90829de70d0d51f52336ea4722" }, 
-        // Gitcoin passport with at least a score of 15
-        { groupId: "0x1cde61966decb8600dfd0749bd371f12", value: 15, claimType: ClaimType.GTE }
+        // Starred repo 
+        { groupId: "0xfd931046287010533fccee33b62514a4" }, 
       ]} 
-      // request message signature from users.
-      signature={{ message: "I vote Yes to Privacy" }}
-      // retrieve the Sismo Connect Reponse from the user's Sismo data vault
-      onResponse={async (response: SismoConnectResponse) => {
-        const res = await fetch("/api/verify", {
-          method: "POST",
-          body: JSON.stringify(response),
-        });
-        console.log(await res.json());
+      signature={{ message: "I starred the project repo" }}
+      onResponseBytes={async (response: string) => {
+        callback(response);
       }}
-      // reponse in bytes to call a contract
-      // onResponseBytes={async (response: string) => {
-      //   console.log(response);
-      // }}
     />
   );
 }

frontend/components/user/UserInfo.tsx

@@ -224,7 +224,7 @@ export default function UserInfo({
                 onClick={createPost}
                 loading={loading}
             >
-                Submit for verification
+                Next
             </MainButton>
         </div>
     )