use correct project page and add TODOs (#36)

* use correct project page and add TODOs

* address feedback

README.md

@@ -45,28 +45,16 @@ git clone https://github.com/scaffold-eth/OP-RetroPGF3-Discovery-Voting.git
 cd OP-RetroPGF3-Discovery-Voting
 yarn install
 ```
-2. TODO: Set up mongodb connection
+2. Copy the .env.example file and change name to .env.local. Set the MONGO_URI to the database you are using.
 
-3. Run a local network in the first terminal:
-
-```
-yarn chain
-```
-
-This command starts a local Ethereum network using Hardhat. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `hardhat.config.ts`.
-
-4. On a second terminal, start your NextJS app:
+3. In the terminal, start your the project:
 
 ```
 yarn start
 ```
 
 Visit your app on: `http://localhost:3000`.
 
-5. Give yourself funds
-
-TODO - Will we run a script or... ?
-
 ## Deploying to Vercel
 
 **Hint**: We recommend connecting your GitHub repo to Vercel (through the Vercel UI) so it gets automatically deployed when pushing to `main`.

packages/nextjs/components/project/ProjectHeader.tsx

@@ -1,6 +1,6 @@
-// TODO: re-enable type checking for file after we wire database to components
+// TODO add type checking to file by removing next line, reliant on fixing EditDistributionModal
 // @ts-nocheck
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import AlreadyOnBallotConflictModal from "../op/modals/AlreadyOnBallotConflictModal";
 import EditDistributionModal from "../op/modals/EditDistributionModal";
@@ -18,13 +18,16 @@ import {
   FolderIcon,
 } from "@heroicons/react/24/outline";
 import { ArrowUturnRightIcon, CheckCircleIcon, FlagIcon } from "@heroicons/react/24/solid";
+import { useBallot } from "~~/context/BallotContext";
+import { ProjectDocument } from "~~/models/Project";
 
-export const ProjectHeader = () => {
-  const handle = "@orbiter_finance";
+// TODO: This component is half-using db and half using stubbed data, need point to db for any stubbed data
+const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
+  const handle = project && project.twitterLink ? `@${project.twitterLink.replace("https://twitter.com/", "")}` : "";
   const [addVote, setAddVote] = useState(false);
   const [addressCopied, setAddressCopied] = useState(false);
   const [openLikedModal, setopenLikedModal] = useState(false);
-  const [voteAmount, setVoteAmount] = useState("");
+  const [voteAmount, setVoteAmount] = useState(0);
   const [addBallot, setAddBallot] = useState(false);
   const [editBallot, setEditBallot] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -77,7 +80,7 @@ export const ProjectHeader = () => {
     setAddBallot(false);
     setIsLoading(true);
     setAddVote(false);
-    setVoteAmount("35,416");
+    setVoteAmount(0); // TODO: Get from state
     setTimeout(() => {
       // Spoofed API request to add to ballot
       setIsLoading(false);
@@ -90,6 +93,7 @@ export const ProjectHeader = () => {
   };
 
   const handleSaveBallot = () => {
+    // TODO: Need to save input data to state
     setLoadingMessage("Saving distribution");
     setSuccessMessage("Distribution changed successfully");
     setEditBallot(false);
@@ -110,6 +114,19 @@ export const ProjectHeader = () => {
     setAddBallot(!close && !edit);
   };
 
+  const { state } = useBallot();
+
+  useEffect(() => {
+    if (!state) return;
+    setVoteAmount(0);
+    const isAddedToBallot = () => {
+      state.projects.forEach(x => {
+        if (x.id === project._id) setVoteAmount(x.allocation);
+      });
+    };
+    isAddedToBallot();
+  }, [project, state]);
+
   return (
     <div className="mx-auto">
       <div className="max-w-full mx-auto">
@@ -132,15 +149,15 @@ export const ProjectHeader = () => {
             alt="project image"
           />
           <div className="ml-[20px] mt-[-50px] flex-wrap">
-            <h1 className="pt-20 font-semibold sm:text-xl md:text-2xl  lg:text-4xl  leading-11">Orbiter Finance</h1>
+            <h1 className="pt-20 font-semibold sm:text-xl md:text-2xl  lg:text-4xl  leading-11">{project.name}</h1>
             <div className="flex justify-between flex-wrap">
               <>
                 <div className="flex items-center gap-8 flex-wrap">
                   <a
                     href="#"
                     className="bg-gradient-to-r from-OPred to-purple inline-block text-transparent bg-clip-text"
                   >
-                    @orbiter_finance
+                    {handle}
                   </a>
 
                   {addressCopied ? (
@@ -166,17 +183,17 @@ export const ProjectHeader = () => {
                   )}
 
                   <div className="h-[18px] border-l-2 border-neutral  mx-[6px] "></div>
-                  <a href="https://twitter.com" target="_blank" rel="noreferrer">
+                  <a href={project.twitterLink} target="_blank" rel="noreferrer">
                     <IconContext.Provider value={{ color: "twitterBlue", className: "h-7 w-7 " }}>
                       <AiOutlineTwitter />
                     </IconContext.Provider>
                   </a>
-                  <a href="https://github.com" target="_blank" rel="noreferrer">
+                  <a href={project.githubLink} target="_blank" rel="noreferrer">
                     <IconContext.Provider value={{ className: "h-6 w-6 " }}>
                       <AiOutlineGithub />
                     </IconContext.Provider>
                   </a>
-                  <a href="https://buidlguidl.com/" target="_blank" rel="noreferrer">
+                  <a href={project.websiteUrl} target="_blank" rel="noreferrer">
                     <IconContext.Provider value={{ className: "h-6 w-6 " }}>
                       <BsGlobe />
                     </IconContext.Provider>
@@ -239,11 +256,10 @@ export const ProjectHeader = () => {
               edit={() => handleAddOrEditModal(false, true)}
             />
           )}
-
+          {/* TODO: Fix this EditDistributionModal */}
           {editBallot && (
             <EditDistributionModal
               onClose={() => handleAddOrEditModal(true)}
-              handleSaveBallot={handleSaveBallot}
               userTotal={userData.totalOP}
               projectList={projectDataHandle}
               edit={() => handleAddOrEditModal(false, true)}
@@ -256,3 +272,5 @@ export const ProjectHeader = () => {
     </div>
   );
 };
+
+export default ProjectHeader;

packages/nextjs/components/scaffold-eth/Contract/WriteOnlyFunctionForm.tsx

@@ -60,7 +60,6 @@ export const WriteOnlyFunctionForm = ({ abiFunction, onChange, contractAddress }
     setDisplayedTxResult(txResult);
   }, [txResult]);
 
-  // TODO use `useMemo` to optimize also update in ReadOnlyFunctionForm
   const inputs = abiFunction.inputs.map((input, inputIndex) => {
     const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
     return (

packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx

@@ -5,7 +5,6 @@ import { Address } from "viem";
 import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
 import { CommonInputProps, InputBase } from "~~/components/scaffold-eth";
 
-// ToDo:  move this function to an utility file
 const isENS = (address = "") => address.endsWith(".eth") || address.endsWith(".xyz");
 
 /**