🧖🏻‍♂️📊 ↣ Merge pull request #20 from Signal-K/wb3-6-migrate-proposal-…

…board-from-vite-to

🧖🏻‍♂️📊 ↣ Failure to migrate from Vite to Next

client/src/components/Content/Navbar.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Navbar = () => {
+  return (
+    <div>Navbar</div>
+  )
+}
+
+export default Navbar;

client/src/components/Content/README.md

@@ -0,0 +1 @@
+Components relating to the Lens Protocol UI elements

client/src/components/DisplayProposals.jsx

@@ -1,35 +1,38 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { loader } from '../assets';
 import FundCard from './FundCard';
+import { loader } from '../assets';
 
 const DisplayProposals = ({ title, isLoading, proposals }) => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
+
+  const handleNavigate = (proposal) => {
+    navigate(`/proposal-details/${proposal.title}`, { state: proposal })
+  }
+
+  return (
+    <div>
+      <h1 className="font-epilogue font-semibold text-[18px] text-white text-left">{title} ({proposals.length})</h1>
+
+      <div className="flex flex-wrap mt-[20px] gap-[26px]">
+        {isLoading && (
+          <img src={loader} alt="loader" className="w-[100px] h-[100px] object-contain" />
+        )}
 
-    const handleNavigate = (proposal) => {
-        navigate(`/proposal-details/${proposal.title}`, { state: proposal })
-    }
+        {!isLoading && proposals.length === 0 && (
+          <p className="font-epilogue font-semibold text-[14px] leading-[30px] text-[#818183]">
+            You have not created any proposals yet
+          </p>
+        )}
 
-    return (
-        <div>
-            <h1 className='font-epilogue font-semibold text-[18px] text-white text-left'>{title}: ({proposals.length})</h1>
-            <div className='flex flex-wrap mt-[20px] gap-[26px]'>
-                {isLoading && (
-                    <img src={loader} alt="loader" className='w-[100px] h-[100px] object-contain' />
-                )}
-                {!isLoading && proposals.length === 0 && ( // If there are no proposals matching the query
-                    <p className='font-epilogue font-semibold text-[14px] leading-[39px] text-[#818183]'>
-                        There are no proposals matching this query
-                    </p>
-                )}
-                {!isLoading && proposals.length > 0 && proposals.map((proposal) => <FundCard
-                    key={proposal.id}
-                    {...proposal}
-                    handleClick={() => handleNavigate(proposal)}
-                />)}
-            </div>
-        </div>
-    )
+        {!isLoading && proposals.length > 0 && proposals.map((proposal) => <FundCard 
+          key={proposal.id}
+          {...proposal}
+          handleClick={() => handleNavigate(proposal)}
+        />)}
+      </div>
+    </div>
+  )
 }
 
 export default DisplayProposals;

client/src/context/index.jsx

@@ -55,6 +55,27 @@ export const StateContextProvider = ({ children }) => {
         return filteredProposals;
     }
 
+    const vote = async (pId, amount) => {
+        const data = await contract.call('voteForProposal', pId, { value: ethers.utils.parseEther(amount) });
+
+        return data;
+    }
+
+    const getVotes = async (pId) => {
+        const votes = await contract.call('getVoters', pId);
+        const numberOfVotes = votes[0].length;
+        const parsedVotes = [];
+
+        for (let i = 0; i < numberOfVotes; i++) {
+            parsedVotes.push({
+                donator: donations[0][i],
+                donation: ethers.utils.formatEther(donations[1][i].toString)
+            })
+        }
+
+        return parsedVotes;
+    }
+
     return(
         <StateContext.Provider
             value={{ address,
@@ -63,6 +84,8 @@ export const StateContextProvider = ({ children }) => {
                 createProposal: publishProposal,
                 getProposals,
                 getUserProposals,
+                vote,
+                getVotes,
             }}
         >
             {children}

client/src/pages/ProposalDetails.jsx

@@ -8,14 +8,32 @@ import { thirdweb } from '../assets';
 
 const ProposalDetails = () => {
   const { state } = useLocation();
-  const { getVoters, contract, address } = useStateContext();
+  const { vote, getVotes, contract, address } = useStateContext();
   console.log(state);
 
   const [isLoading, setIsLoading] = useState(false);
   const [amount, setAmount] = useState('');
   const [voters, setVoters] = useState([]); // Array of voters on a specific proposal
   const remainingDays = daysLeft(state.deadline);
 
+  const fetchVoters = async () => {
+    const data = await getVotes(state.pId);
+    setVoters(data);
+  }
+
+  useEffect(() => {
+    if(contract) fetchVoters();
+  }, [contract, address]);
+
+  const handleVote = async () => {
+    setIsLoading(true);
+
+    await vote(state.pId, amount); 
+
+    navigate('/')
+    setIsLoading(false);
+  }
+
   return (
     <div>
       {isLoading && 'Loading...'}
@@ -66,6 +84,31 @@ const ProposalDetails = () => {
             </div>
           </div>
         </div>
+        <div className='flex-1'>
+          <h4 className='font-epilogue font-semibold text-[18px] text-white uppercase'>Votes</h4>
+          <div className='my-[20px] flex flex-col p-4 bg-[#1c1c24] rounded-[10px]'>
+            <p className='font-epilogue font-medium text-[20px] leading-[30px] text-center text-[#808191]'>Vote for this proposal</p>
+            <div className='mt-[30px]'>
+              <input 
+                type="number"
+                placeholder="ETH 0.1"
+                step="0.01"
+                className="w-full py-[10px] sm:px-[20px] px-[15px] outline-none border-[1px] border-[#3a3a43] bg-transparent font-epilogue text-white text-[18px] leading-[30px] placeholder:text-[#4b5264] rounded-[10px]"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+              />
+              <div className='my-[20px] p-4 bg-[#13131a] rounded-[10px]'>
+                <h4 className='font-epilogue font-semibold text-[14px] leading-[22px] text-white'>Vote for this proposal with NO comments or adjustments</h4>
+              </div>
+              <CustomButton
+                btnType='button'
+                title='Vote for proposal'
+                styles='w-full bg-[#8c6dfd]'
+                handleClick={handleVote}
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )

lens/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

lens/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

lens/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

lens/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@thirdweb-dev/react": "^3.6.8",
+    "@thirdweb-dev/sdk": "^3.6.8",
+    "ethers": "^5.7.2",
+    "next": "13.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "eslint": "8.30.0",
+    "eslint-config-next": "13.0.7",
+    "tailwindcss": "^3.2.4"
+  }
+}

lens/pages/_app.jsx

@@ -0,0 +1,11 @@
+import '../styles/globals.css';
+import React from 'react';
+
+// Imports for proposals/voting section
+import { ProposalDetails, CreateProposal, Home, Profile } from './proposals/Home';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp;

lens/pages/index.js

@@ -0,0 +1,69 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing{' '}
+          <code className={styles.code}>pages/index.js</code>
+        </p>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h2>Documentation &rarr;</h2>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h2>Learn &rarr;</h2>
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a
+            href="https://github.com/vercel/next.js/tree/canary/examples"
+            className={styles.card}
+          >
+            <h2>Examples &rarr;</h2>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}
+          >
+            <h2>Deploy &rarr;</h2>
+            <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Powered by{' '}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  )
+}

lens/pages/proposals/Home.jsx

@@ -0,0 +1,32 @@
+/*export { default as Home } from './Home';
+export { default as Profile } from './Profile';
+export { default as CreateProposal } from './CreateProposal';
+export { default as ProposalDetails } from './ProposalDetails';*/
+
+import React, { useState, useEffect } from "react";
+import { useStateContext } from './context';
+//import { DisplayProposals } from './components';
+
+const Home = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [proposals, setProposals] = useState([]); // Empty array, retrieved from the state context from onchain
+
+    const { address, contract, getProposals } = useStateContext(); /*
+    const fetchProposals = async () => { // This is to allow us to call this g.request in the useEffect (as the request is async in /context)
+        setIsLoading(true);
+        const data = await getProposals();
+        setProposals(data);
+        setIsLoading(false);
+    }
+
+    useEffect(() => {
+        if (contract) fetchProposals();
+        console.log(proposals);
+    }, [address, contract]); // Re-called when these change*/
+
+    return (
+        <div>Hello World</div>
+    )
+}
+
+export default Home;