feat: add bounty creation, connect to The Graph

packages/nextjs/app/_components/BountyCreator/BountyCreator.module.scss

@@ -7,3 +7,12 @@
   }
   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.25);
 }
+
+.BountyCreator {
+  background: rgba(54, 54, 88, 0.75);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}

packages/nextjs/app/_components/BountyCreator/BountyCreator.tsx

@@ -1,11 +1,33 @@
+// @ts-nocheck
 import { useState } from "react";
 import Backdrop from "../Backdrop";
 import styles from "./BountyCreator.module.scss";
 import { AnimatePresence, motion } from "framer-motion";
-import { IoIosDownload } from "react-icons/io";
+import { IoIosAddCircle } from "react-icons/io";
+import useBounties from "~~/hooks/useBounties";
 
 const BountyCreator = () => {
   const [openCreator, setOpenCreator] = useState<boolean>(false);
+
+  const { createBounty, approve } = useBounties();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const bounty = {
+      name: e.target[0].value,
+      description: e.target[1].value,
+      mediaURI: e.target[2].value,
+      reward: e.target[3].value,
+      maxProgress: parseInt(e.target[4].value),
+      duration: parseInt(e.target[5].value),
+      judgeTime: 14000,
+    };
+    await approve().then(() => {
+      createBounty(bounty);
+    });
+    alert("Bounty created! Reload the page to see it.");
+  };
+
   return (
     <div>
       <button
@@ -14,16 +36,38 @@ const BountyCreator = () => {
       >
         <div className="flex gap-2 align-center justify-center text-center">
           {/* @ts-ignore */}
-          <IoIosDownload className="mt-auto mb-auto" /> <span>Create Bounty</span>
+          <IoIosAddCircle className="mt-auto mb-auto" /> <span>Create Bounty</span>
         </div>
       </button>
       <AnimatePresence>
         {openCreator && (
           <motion.div>
             <Backdrop onClick={() => setOpenCreator(false)}>
-              <div
-                className={`flex flex-col gap-2 bg-slate-800 p-10 w-[100%] minh-[400px] rounded justify-between`}
-              ></div>
+              <form
+                onSubmit={handleSubmit}
+                className={`${styles.BountyCreator} flex flex-col gap-2 bg-slate-800 p-10 w-[400px] minh-[400px] rounded justify-between`}
+              >
+                <h2>Create a bounty</h2>
+                <input className="p-2 rounded" placeholder="Name" required></input>
+                <textarea
+                  className="p-2 h-[8rem] rounded"
+                  placeholder="Description (max. 256 characters)"
+                  required
+                ></textarea>
+                <input className="p-2 rounded" placeholder="Resource URL" required></input>
+                <input className="p-2 rounded" placeholder="Reward (ETH)" required type="number"></input>
+                <input className="p-2 rounded" placeholder="Participants" required type="number"></input>
+                <input className="p-2 rounded" placeholder="Bounty Duration (in blocks)" required type="number"></input>
+                <button
+                  type="submit"
+                  className={`w-[100%] bg-indigo-400 rounded pb-2 pt-2 ${styles.button} text-center`}
+                >
+                  <div className="flex gap-2 align-center justify-center text-center">
+                    {/* @ts-ignore */}
+                    <IoIosAddCircle className="mt-auto mb-auto" /> <span>Create</span>
+                  </div>
+                </button>
+              </form>
             </Backdrop>
           </motion.div>
         )}

packages/nextjs/app/_components/BountyList/BountyList.tsx

@@ -14,8 +14,6 @@ const BountyList: React.FC<BountyListProps> = () => {
 
   const { bounties, bountyCount } = useBounties();
 
-  console.log(bounties);
-
   return (
     <div className="p-8 w-[100%]">
       <p className="text-left ml-0">{parseInt(bountyCount)} bounties found</p>

packages/nextjs/app/layout.tsx

@@ -12,8 +12,8 @@ export const metadata = getMetadata({
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning lang="en">
-      <body className="w-[100vw] overflow-hidden">
-        <video className="fixed absolute z-0 top-[0px] left-0 scale-150 overflow-hidden" autoPlay muted loop>
+      <body className="w-[100vw] overflow-x-hidden">
+        <video className="fixed absolute z-0 top-[0px] left-0 scale-150 overflow-x-hidden" autoPlay muted loop>
           <source src="/animation.mp4" type="video/mp4"></source>
         </video>
         <div className="bg-[#000000a3]">

packages/nextjs/app/page.tsx

@@ -1,21 +1,11 @@
 "use client";
 
-import { useEffect, useRef } from "react";
 import BountyCreator from "./_components/BountyCreator";
 import BountyList from "./_components/BountyList";
 import data from "./_components/BountyList/data.json";
 import type { NextPage } from "next";
 
 const Home: NextPage = () => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    if (videoRef.current) {
-      // document.querySelector("video").defaultPlaybackRate = 0.5;
-      // document.querySelector("video").playbackRate = 0.5;
-      // videoRef?.current?.setAttribute("defaultPlaybackRate", "0.5");
-    }
-  }, []);
   return (
     <>
       <div className="w-[100vw] h-[100vh] overflow-x-hidden bg-[#00000033]">

packages/nextjs/components/Footer.tsx

@@ -28,15 +28,6 @@ export const Footer = () => {
                 </div>
               </div>
             )}
-            {isLocalNetwork && (
-              <>
-                <Faucet />
-                <Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
-                  <MagnifyingGlassIcon className="h-4 w-4" />
-                  <span>Block Explorer</span>
-                </Link>
-              </>
-            )}
           </div>
           <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
         </div>

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -54,7 +54,7 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac
     setMounted(true);
   }, []);
 
-  const subgraphUri = "http://localhost:8000/subgraphs/name/scaffold-eth/your-contract";
+  const subgraphUri = "http://localhost:8000/subgraphs/name/scaffold-eth/think2earn";
   const apolloClient = new ApolloClient({
     uri: subgraphUri,
     cache: new InMemoryCache(),

packages/nextjs/contracts/deployedContracts.ts

@@ -7,13 +7,18 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     Think2Earn: {
-      address: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
+      address: "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9",
       abi: [
+        {
+          inputs: [],
+          stateMutability: "nonpayable",
+          type: "constructor",
+        },
         {
           anonymous: false,
           inputs: [
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "bountyId",
               type: "uint256",
@@ -32,7 +37,7 @@ const deployedContracts = {
           anonymous: false,
           inputs: [
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "bountyId",
               type: "uint256",
@@ -49,6 +54,12 @@ const deployedContracts = {
               name: "description",
               type: "string",
             },
+            {
+              indexed: false,
+              internalType: "string",
+              name: "mediaURI",
+              type: "string",
+            },
             {
               indexed: false,
               internalType: "uint256",
@@ -74,7 +85,7 @@ const deployedContracts = {
               type: "uint256",
             },
             {
-              indexed: true,
+              indexed: false,
               internalType: "address",
               name: "creator",
               type: "address",
@@ -87,17 +98,23 @@ const deployedContracts = {
           anonymous: false,
           inputs: [
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "bountyId",
               type: "uint256",
             },
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "submissionId",
               type: "uint256",
             },
+            {
+              indexed: false,
+              internalType: "address",
+              name: "submitter",
+              type: "address",
+            },
             {
               indexed: false,
               internalType: "bytes32",
@@ -112,7 +129,7 @@ const deployedContracts = {
           anonymous: false,
           inputs: [
             {
-              indexed: true,
+              indexed: false,
               internalType: "address",
               name: "sender",
               type: "address",
@@ -131,13 +148,13 @@ const deployedContracts = {
           anonymous: false,
           inputs: [
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "bountyId",
               type: "uint256",
             },
             {
-              indexed: true,
+              indexed: false,
               internalType: "uint256",
               name: "submissionId",
               type: "uint256",
@@ -280,7 +297,7 @@ const deployedContracts = {
             },
             {
               internalType: "string",
-              name: "_mediaURIHash",
+              name: "_mediaURI",
               type: "string",
             },
             {
@@ -317,6 +334,88 @@ const deployedContracts = {
           stateMutability: "view",
           type: "function",
         },
+        {
+          inputs: [],
+          name: "getBounties",
+          outputs: [
+            {
+              components: [
+                {
+                  internalType: "string",
+                  name: "name",
+                  type: "string",
+                },
+                {
+                  internalType: "string",
+                  name: "description",
+                  type: "string",
+                },
+                {
+                  internalType: "string",
+                  name: "mediaURIHash",
+                  type: "string",
+                },
+                {
+                  internalType: "uint256",
+                  name: "reward",
+                  type: "uint256",
+                },
+                {
+                  internalType: "uint256",
+                  name: "duration",
+                  type: "uint256",
+                },
+                {
+                  internalType: "uint256",
+                  name: "judgeTime",
+                  type: "uint256",
+                },
+                {
+                  internalType: "uint256",
+                  name: "maxProgress",
+                  type: "uint256",
+                },
+                {
+                  internalType: "uint256",
+                  name: "creationBlock",
+                  type: "uint256",
+                },
+                {
+                  internalType: "address",
+                  name: "creator",
+                  type: "address",
+                },
+                {
+                  internalType: "bool",
+                  name: "isActive",
+                  type: "bool",
+                },
+                {
+                  components: [
+                    {
+                      internalType: "address",
+                      name: "submitter",
+                      type: "address",
+                    },
+                    {
+                      internalType: "bytes32",
+                      name: "eegDataHash",
+                      type: "bytes32",
+                    },
+                  ],
+                  internalType: "struct Think2EarnBountyFactoryV1.Submission[]",
+                  name: "submissions",
+                  type: "tuple[]",
+                },
+              ],
+              internalType: "struct Think2Earn.Bounty[]",
+              name: "",
+              type: "tuple[]",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
         {
           inputs: [],
           name: "getBountyCount",
@@ -395,6 +494,11 @@ const deployedContracts = {
               name: "submissionsLength",
               type: "uint256",
             },
+            {
+              internalType: "uint256",
+              name: "currentProgress",
+              type: "uint256",
+            },
           ],
           stateMutability: "view",
           type: "function",

packages/nextjs/hooks/queries.ts

@@ -0,0 +1,23 @@
+import { gql } from "@apollo/client";
+
+export const GET_BOUNTIES = gql`
+  query MyQuery {
+    bounties {
+      id
+      isActive
+      creationBlock
+      creator
+      description
+      duration
+      judgeTime
+      maxProgress
+      mediaURIHash
+      name
+      numAcceptedSubmissions
+      reward
+      submissions {
+        id
+      }
+    }
+  }
+`;