WeAreNewt · arttu0 · Nov 7, 2022 · Nov 7, 2022 · Nov 7, 2022 · Nov 7, 2022
diff --git a/contracts/remappings.txt b/contracts/remappings.txt
@@ -1,3 +1,2 @@
-@solmate/=lib/solmate/src/
 forge-std/=lib/forge-std/src/
 @openzeppelin/=lib/openzeppelin-contracts/contracts/
diff --git a/frontend/src/components/ElegibilityBanner.tsx b/frontend/src/components/ElegibilityBanner.tsx
@@ -1,9 +1,11 @@
 const EligibilityBanner: React.FC = () => {
   return (
-    <div className="flex flex-row w-2/3 h-[65px] bg-gray-800 text-[#FFFFFF] justify-center items-center">
-      your wallet is not eligible to participate in the voting of these values
-    </div>
-  )
+      <>
+          <div className="flex flex-row w-2/3 h-[65px] bg-gray-800 text-[#FFFFFF] justify-center items-center">
+              your wallet is not eligible to participate in the voting of these values
+          </div>
+      </>
+  );
 }
 
 export default EligibilityBanner
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
diff --git a/frontend/src/components/ProposalInfo.tsx b/frontend/src/components/ProposalInfo.tsx
@@ -8,41 +8,42 @@ const ProposalInfo: React.FC<ProposalProps> = ({ id }) => {
   const { proposal } = useProposalData();
 
   return (
-    <div className="flex flex-col items-start w-full ml-2/3">
+    <div className="flex flex-col items-start w-full ml-48">
       <div>
         <p className="flex flex-row">
-          proposal by{' '}
+          <div>proposal by {' '}</div>
           <a
             href="https://etherscan.io/address/0x14306f86629e6bc885375a1f81611a4208316b2b"
             target="_blank"
             rel="noreferrer"
+            className="text-0500FC"
           >
             {' '}
-            {proposal.owner}
+            <a href={`https://polygonscan.com/address/{proposal.owner}`} target="blank">{proposal.owner}</a>
           </a>
         </p>
-        <p className="flex flex-row">
+        <p className="flex flex-row text-gray-800">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod
         </p>
       </div>
       <div className="mt-16">
-        <p className="flex flex-row">original </p>
-        <p className="flex flex-row">
+        <p className="flex flex-row text-black">original </p>
+        <p className="flex flex-row text-gray-800">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod
         </p>
       </div>
 
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center gap-52 mt-16">
         <div className="flex flex-col">
-          <p>voting starts</p>
-          <p>uwu</p>
+          <p className="text-black">voting starts</p>
+          <p className="text-gray-800">Jul 31, 2022, 11:00 AM</p>
         </div>
 
         <div className="flex flex-col">
-          <p>voting end</p>
-          <p>uwu</p>
+          <p className="leading-6 font-medium">voting ends</p>
+          <p className="text-gray-800">Aug 7, 2022, 11:00 AM</p>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/ValueTable.tsx b/frontend/src/components/ValueTable.tsx
@@ -1,8 +1,13 @@
 import { useValueData } from '../hooks'
 import Router from 'next/router'
+import { AddModal } from "../components/modals/AddModal"
+import { ChangeModal } from "../components/modals/ChangeModal";
+import { useState } from 'react'
 
 const ValueTable: React.FC = () => {
   const { values } = useValueData()
+  const [showAdd, setShowAdd] = useState(false);
+  const [showChange, setShowChange] = useState(false);
 
   return (
     <div className="flex flex-col items-center justify-center w-2/3">
@@ -23,12 +28,12 @@ const ValueTable: React.FC = () => {
               <td className="group-hover:text-red p-3  text-gray-800 group-hover:text-white">
                 {value.id}
               </td>
-              <td className="p-3 text-gray-800 group-hover:text-white">
+              <td onClick={() => Router.push('proposal/' + value.id)} className="p-3 text-gray-800 group-hover:text-white">
                 {value.value}
               </td>
               <td className="p-3">
                 <button
-                  onClick={() => Router.push('proposal/' + value.id)}
+                  onClick={() => setShowChange(true)}
                   className="bg-gray-600 text-white rounded-full w-56 h-10 self-stretch flex-grow invisible group-hover:visible"
                   type="button"
                 >
@@ -39,10 +44,12 @@ const ValueTable: React.FC = () => {
           ))}
         </tbody>
       </table>
-
+      <AddModal show={showAdd} setShow={setShowAdd} />
+      <ChangeModal show={showChange} setShow={setShowChange}/>
       <button
         className="flex flex-row justify-center items-center bg-gray-600 text-white rounded-full w-56 h-10 mt-4"
         type="button"
+        onClick={() => setShowAdd(true)}
       >
         add value
       </button>

diff --git a/frontend/src/components/modals/AddModal.tsx b/frontend/src/components/modals/AddModal.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+
+type AddModalProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+};
+
+export const AddModal: React.FC<AddModalProps> = ({
+  show,
+  setShow,
+}: AddModalProps) => {
+  const [status, setStatus] = useState(0);
+  const [proposal, setProposal] = useState('');
+
+  // const { isLoading: writeLoading, write } = useContractWrite({
+  //   mode: 'recklesslyUnprepared',
+  //   address: '',
+  //   abi: ,
+  //   functionName: '',
+  // });
+
+  const addValue = async () => {
+    console.log(proposal)
+    try {
+      // write?.({recklesslySetUnpreparedArgs: [proposal]})
+      let res = new Promise(function(resolve, reject) {
+        setTimeout(() => {
+          console.log('done')
+          setStatus(1)
+        }, 4000);
+      });
+
+      res.then(
+        result => alert(result), 
+        error => alert(error) 
+      );
+    } catch {
+
+    }
+  };
+
+  return (
+    <div
+      onMouseDown={() => setShow(false)}
+      className={`${
+        show ? "block" : "hidden"
+      } fixed h-screen w-screen z-20 flex items-center justify-center create-btn-gradient-transparent px-4 lg:px-0 top-0 left-0`}
+    >
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        className={`${
+          status ? "h-[200px]" : " h-[432px]"
+        } flex flex-col items-center w-[530px] rounded-[10px]`}
+        style={{ boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)" }}
+      >
+        {status === 0 ? (
+          // No state
+          <div className="flex flex-col w-full px-5 mt-6">
+            <b className="flex flex-row font-medium text-base leading-6">
+              propose adding value
+            </b>
+            <textarea
+              className="flex flex-row box-border border rounded-lg border-solid border-gray-1000 resize-none focus:outline-none text-gray-600 px-py mt-4 h-[300px] left-[23px] top-[70px] px-[10px] py-[10px]"
+              // defaultValue={"your proposal text here"}
+              placeholder="your proposal text here"
+              onChange={(e) => setProposal(e.target.value)}
+            />
+            <button
+              onClick={addValue}
+              className="flex flex-row bg-gray-600 text-white rounded-full w-56 h-10 justify-center items-center mt-2 ml-auto"
+              type="button"
+            >
+              propose add
+            </button>
+          </div>
+        ) : (
+          // Success state
+          <div className="flex flex-col w-full px-5 mt-6 items-center">
+            <b className="flex flex-row font-medium text-base leading-6 mr-auto mt-3">
+              changes reflected!
+            </b>
+            <p className="flex flex-row text-gray-600 top-[83px] mr-auto mt-3">
+              your proposal is now live
+            </p>
+            <button
+              onClick={() => setStatus(0)}
+              className=" flex flex-row bg-gray-600 text-white rounded-full w-56 h-10 justify-center items-center mt-6"
+              type="button"
+            >
+              go to proposal
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/modals/ChangeModal.tsx b/frontend/src/components/modals/ChangeModal.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { useContractWrite } from "wagmi";
+
+type AddModalProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+};
+
+export const ChangeModal: React.FC<AddModalProps> = ({
+  show,
+  setShow,
+}: AddModalProps) => {
+
+  const [proposal, setProposal] = useState('');
+  const [loading, setLoading] = useState('');
+
+  // const { isLoading: writeLoading, write } = useContractWrite({
+  //   mode: 'recklesslyUnprepared',
+  //   address: '',
+  //   abi: ,
+  //   functionName: '',
+  // });
+
+  const proposeChange = async () => {
+    try {
+      // write?.({recklesslySetUnpreparedArgs: [proposal]})
+      setLoading('- transaction loading')
+      console.log(proposal)
+      let res = new Promise(function(resolve, reject) {
+        setTimeout(() => {
+          console.log('done')
+          setLoading('- transaction complete')
+        }, 4000);
+      });
+
+      res.then(
+        result => alert(result), 
+        error => alert(error) 
+      );
+    } catch(error) {
+      console.log(error);
+  }
+  };
+
+  return (
+    <div
+      onMouseDown={() => setShow(false)}
+      className={`${
+        show ? "block" : "hidden"
+      } fixed h-screen w-screen z-20 flex items-center justify-center create-btn-gradient-transparent px-4 lg:px-0 top-0 left-0`}
+    >
+      <div
+        className="flex flex-col items-center w-[530px] h-[432px] rounded-[10px]"
+        onMouseDown={(e) => e.stopPropagation()}
+        style={{ boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)" }}
+      >
+        <button
+          className="flex flex-row justify-center items-center bg-gray-600 text-white rounded-full w-56 h-10 mt-4"
+          type="button"
+        >
+          propose removal
+        </button>
+        <div className="mt-5 mb-5">
+          <div className="flex flex-row items-center">
+            <svg
+              width="216"
+              height="1"
+              viewBox="0 0 216 1"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="flex flex-col mr-4"
+            >
+              <line y1="0.5" x2="215.142" y2="0.5" stroke="#838383" />
+            </svg>
+            or
+            <svg
+              width="216"
+              height="1"
+              viewBox="0 0 216 1"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="flex flex-col ml-4"
+            >
+              <line y1="0.5" x2="215.142" y2="0.5" stroke="#838383" />
+            </svg>
+          </div>
+        </div>
+        <div className="flex flex-col w-full px-5">
+          <b className="flex flex-row font-medium text-base leading-6">
+            propose change {loading} 
+          </b>
+          <textarea
+            className="flex flex-row box-border border rounded-lg border-solid border-gray-1000 resize-none focus:outline-none text-gray-600 px-py mt-4 h-[200px] left-[23px] top-[186px] px-[10px] py-[10px]"
+            // defaultValue={"your proposal text here"}
+            placeholder="your proposal text here"
+            onChange={(e) => setProposal(e.target.value)}
+          ></textarea>
+          <button
+            className=" flex flex-row bg-gray-600 text-white rounded-full w-56 h-10 justify-center items-center mt-2 ml-auto"
+            type="button"
+            onClick={proposeChange}
+          >
+            propose change
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/modals.tsx b/frontend/src/pages/modals.tsx
@@ -0,0 +1,33 @@
+import { AddModal } from "../components/modals/AddModal"
+import { ChangeModal } from "../components/modals/ChangeModal";
+import type { NextPage } from 'next'
+import { useState } from 'react';
+
+const Modals: NextPage = () => {
+
+  const [showAdd, setShowAdd] = useState(false);
+  const [showChange, setShowChange] = useState(false);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <button
+          onClick={() => setShowAdd(true)}
+          className=" flex flex-row bg-gray-600 text-white rounded-full w-56 h-10 justify-center items-center mt-2 ml-auto"
+          type="button"
+        >
+          Open add modal
+        </button>
+        <button
+          onClick={() => setShowChange(true)}
+          className=" flex flex-row bg-gray-600 text-white rounded-full w-56 h-10 justify-center items-center mt-2 ml-auto"
+          type="button"
+        >
+          Open change modal
+        </button>
+        <AddModal show={showAdd} setShow={setShowAdd}/>
+        <ChangeModal show={showChange} setShow={setShowChange}/>
+    </div>
+  )
+}
+
+export default Modals
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -9,8 +9,10 @@ module.exports = {
         400: '#939393',
         600: '#686868',
         800: '#4D4D4D',
+        1000: '#838383',
       },
       white: '#FFFFFF',
+      black: '#000000',
     },
     fontWeight: '500',
     fontSize: '20px',

diff --git a/package-lock.json b/package-lock.json