Skip to content

Commit 7e3ba78

Browse files
Jack-kelly-22Jack-kelly-22
committed
moonday;
1 parent e904440 commit 7e3ba78

File tree

10 files changed

+221
-39
lines changed

10 files changed

+221
-39
lines changed

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,13 @@ Notion: https://www.notion.so/4ec48dbaa8c74d20a73aa17e7082c48b?v=13ee683c845d46e
1111
vscode theme alterations in ./vscode/settings
1212
if you wish not to use comment out and add to gitignore
1313
workspace theme will be updated with website theme
14+
15+
16+
### convex infor
17+
18+
-generate client code
19+
'''bash npx convex codegen'''
20+
21+
22+
Interesting Links
23+
UniswapV3 Graph Explorer: https://thegraph.com/hosted-service/subgraph/uniswap/uniswap-v3

‎dao-frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@headlessui/react": "^1.6.0",
67
"@testing-library/jest-dom": "^5.16.4",
78
"@testing-library/react": "^13.1.1",
89
"@testing-library/user-event": "^13.5.0",

‎dao-frontend/src/App.js

+9-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import Metamask from './modals/Metamask';
88
import VoteModal from './modals/VoteModal';
99
import ConnectButton from './components/ConnectButton';
1010
import {mock_proposals} from './mock_proposals';
11-
// import NewProposalModal from './modals/NewProposalModal';
11+
12+
import NewProposalModal from './modals/NewProposalModal';
1213
// import { useQuery, useMutation } from "./convex/_generated";
1314
const user = {
1415
name: "John Doe",
@@ -27,21 +28,22 @@ function App(props) {
2728

2829
const [showVoteModal, setShowVoteModal] = useState(false);
2930
const [selectedProposal, setSelectedProposal] = useState(null);
30-
31-
function prepVote(proposal){
32-
33-
setShowVoteModal(true);
31+
32+
function toggleVoteModal(proposal) {
33+
setSelectedProposal(proposal);
34+
setShowVoteModal(!showVoteModal);
3435
}
3536

3637
return (
3738
<div className="App container">
3839
<body>
40+
{showVoteModal && <VoteModal proposal={selectedProposal} open={true} setOpen={()=>toggleVoteModal(selectedProposal)}/>}
41+
{/* {showNewProposalModal && <NewProposalModal open={true} setOpen={()=>toggleNewProposalModal(selectedProposal)}/>} */}
3942
<ConnectButton/>
4043
<UserHeader {...props.user} />
4144
{/* SHOW active proposals (User should be able to click and vote on these) */}
42-
<ProposalView proposals={mock_proposals} showVoteModal={prepVote} />
45+
<ProposalView proposals={mock_proposals} showVoteModal={toggleVoteModal} />
4346
{/* SHOW Outcomes of non-active Proposals*/}
44-
{showVoteModal && <VoteModal/>}
4547
{/* <NewProposalModal/> */}
4648

4749
</body>

‎dao-frontend/src/components/Proposal.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function Proposal(proposal) {
5656
<p className="text-left text-xl"> {vote.option}</p>
5757
</div>)
5858
})}
59-
<button className="btn bg-transparent hover:bg-green1 hover:text-white outline outline-2 outline-green1 text-lg font-bold text-green1 mx-4">Vote</button>
59+
<button onClick={()=>proposal.showVoteModal(proposal.id)} className="btn bg-transparent hover:bg-green1 hover:text-white outline outline-2 outline-green1 text-lg font-bold text-green1 mx-4">Vote</button>
6060
</div>
6161
</div>
6262
</div>

‎dao-frontend/src/components/ProposalView.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function ProposalView(props) {
77

88
{props.proposals.map(proposal => {
99
return (
10-
<Proposal key={proposal.id} {...proposal} showVoteModal={props.showVoteModal}/>
10+
<Proposal key={proposal.id} {...proposal} showVoteModal={(id) =>props.showVoteModal(id)}/>
1111
)
1212
})}
1313
</div>

‎dao-frontend/src/components/Web3Test.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// // import Web3 from 'web3'
2+
// import React from 'react'
3+
4+
// class Web3Test extends Component {
5+
// // componentWillMount() {
6+
// // this.loadBlockchainData()
7+
// // }
8+
9+
// // async loadBlockchainData() {
10+
// // const web3 = new Web3(Web3.givenProvider || "http://localhost:8545")
11+
// // const accounts = await web3.eth.getAccounts()
12+
// // this.setState({ account: accounts[0] })
13+
// // }
14+
15+
// // constructor(props) {
16+
// // super(props)
17+
// // this.state = { account: '' }
18+
// // }
19+
20+
// render() {
21+
// return (
22+
// <div className="container">
23+
// {/* <h1l>Hello, World!</h1> */}
24+
// <p>Your account: {this.state.account}</p>
25+
// </div>
26+
// );
27+
// }
28+
// }
29+
30+
// export default Web3Test;

‎dao-frontend/src/mock_proposals.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const mock_proposals = [
3131
{ "option": "No", "count": 4 }]
3232
},
3333
{
34-
id: 1,
34+
id: 2,
3535
name: "Make metamask great again",
3636
description: "This is proposal here could go some real meaty text, almost as meaty as the rest of the page",
3737
tags : [prop_tags[0],prop_tags[2]],
@@ -43,7 +43,7 @@ export const mock_proposals = [
4343
{ "option": "No", "count": 4 }]
4444
},
4545
{
46-
id: 1,
46+
id: 3,
4747
name: "Proposal 1",
4848
description: "This is proposal 1",
4949
tags : [prop_tags[0],prop_tags[1]],

‎dao-frontend/src/modals/NewProposal.js

-7
This file was deleted.

‎dao-frontend/src/modals/NewProposalModal.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Fragment, useRef, useState } from 'react'
2+
import { Dialog, Transition } from '@headlessui/react'
3+
4+
5+
function NewProposalModal(props) {
6+
7+
const cancelButtonRef = useRef(null)
8+
return (
9+
<Transition.Root show={props.open} as={Fragment}>
10+
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" onClose={props.setOpen}>
11+
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
12+
<Transition.Child
13+
as={Fragment}
14+
enter="ease-out duration-300"
15+
enterFrom="opacity-0"
16+
enterTo="opacity-100"
17+
leave="ease-in duration-200"
18+
leaveFrom="opacity-100"
19+
leaveTo="opacity-0"
20+
>
21+
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
22+
</Transition.Child>
23+
24+
{/* This element is to trick the browser into centering the modal contents. */}
25+
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
26+
&#8203;
27+
</span>
28+
<Transition.Child
29+
as={Fragment}
30+
enter="ease-out duration-300"
31+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
32+
enterTo="opacity-100 translate-y-0 sm:scale-100"
33+
leave="ease-in duration-200"
34+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
35+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
36+
>
37+
<div className="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
38+
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
39+
<div className="sm:flex sm:items-start">
40+
41+
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
42+
<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
43+
Create a new proposal
44+
</Dialog.Title>
45+
<div className="mt-2">
46+
{/* Creating form for new proposal details */}
47+
{/* Form and label for new proposal title */}
48+
<div className="mt-4">
49+
<label htmlFor="title" className="block text-sm font-medium leading-5 text-gray-700">
50+
Title
51+
</label>
52+
<input
53+
id="title"
54+
type="text"
55+
className="mt-1 form-input block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus-within:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out"
56+
placeholder="Title"
57+
onChange={props.setTitle}
58+
/>
59+
{/* DISPLAY ID OF NEW PROPOSAL */}
60+
<p className='text-lg'> Id: ${props.prev_id}</p>
61+
{/* Include radio weighted, unweighted */}
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
67+
<button
68+
className="rounded-md px-4 py-2 bg-green1 font-bold text-white hover:bg-transparent hover:outline-4 hover:outline-green1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
69+
onClick={() => props.setOpen(false)}
70+
>
71+
Approve
72+
</button>
73+
<button
74+
type="button"
75+
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
76+
onClick={() => props.setOpen(false)}
77+
ref={cancelButtonRef}
78+
>
79+
Deny
80+
</button>
81+
</div>
82+
</div>
83+
</Transition.Child>
84+
</div>
85+
</Dialog>
86+
</Transition.Root>
87+
)
88+
}
89+
90+
export default NewProposalModal;

‎dao-frontend/src/modals/VoteModal.js

+77-21
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import {useState} from 'react';
1+
/* This example requires Tailwind CSS v2.0+ */
2+
import { Fragment, useRef, useState } from 'react'
3+
import { Dialog, Transition } from '@headlessui/react'
4+
// import {useState} from 'react';
25

36
const verify_vote_option = (vote_option) => {
47
if (vote_option === "Yes" || vote_option === "No") {
@@ -8,26 +11,79 @@ const verify_vote_option = (vote_option) => {
811
}
912
}
1013

11-
// SCAFFOLDING FOR VOTE MODAL NOT COMPLETE
12-
function VoteModal(proposal){
13-
// const { proposal } = props.proposal;
14-
return (
15-
<div className='bg-green3'>
16-
<div className="flex flex-col w-full m-3 bg-black bg-opacity-60 text-white rounded-lg">
17-
{/* <p></p>{proposal.title} */}
18-
{proposal.votes.map(vote => {
19-
return (
20-
<div className="flex flex-row">
21-
<input type="checkbox" name={vote.name} value="Yes" />
22-
<label>Yes</label>
23-
<p>Current # {vote.count}</p>
24-
</div>)})}
25-
26-
<div>
27-
<button className='cast-vote'>Cast Vote</button>
28-
29-
</div>
14+
15+
16+
function VoteModal(props) {
17+
18+
const [vote_option, setVoteOption] = useState(null);
19+
20+
21+
const cancelButtonRef = useRef(null)
22+
23+
return (
24+
<Transition.Root show={props.open} as={Fragment}>
25+
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" onClose={props.setOpen}>
26+
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
27+
<Transition.Child
28+
as={Fragment}
29+
enter="ease-out duration-300"
30+
enterFrom="opacity-0"
31+
enterTo="opacity-100"
32+
leave="ease-in duration-200"
33+
leaveFrom="opacity-100"
34+
leaveTo="opacity-0"
35+
>
36+
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
37+
</Transition.Child>
38+
39+
{/* This element is to trick the browser into centering the modal contents. */}
40+
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
41+
&#8203;
42+
</span>
43+
<Transition.Child
44+
as={Fragment}
45+
enter="ease-out duration-300"
46+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
47+
enterTo="opacity-100 translate-y-0 sm:scale-100"
48+
leave="ease-in duration-200"
49+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
50+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
51+
>
52+
<div className="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
53+
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
54+
<div className="flex flex-col">
55+
<div className='flex flex-row'>
56+
<p>Vote on # </p>
57+
<p>{toString(props.proposal.id)}</p>
58+
</div>
59+
<p>{props.proposal.name}</p>
60+
{props.proposal ?? "No proposal??"}
61+
{props.proposal.weighted ? "Weighted" : "Unweighted"}
3062
</div>
31-
</div>);
63+
</div>
64+
<div className='flex flex-row'>
65+
<button
66+
type="button"
67+
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
68+
onClick={() => props.setOpen(false)}
69+
>
70+
Approve
71+
</button>
72+
<button
73+
type="button"
74+
className="rounded-md px-4 py-2 bg-green1 font-bold text-white hover:bg-transparent hover:bg-opacity-0 hover:outline-4 hover:outline-green1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
75+
onClick={() => props.setOpen(false)}
76+
ref={cancelButtonRef}
77+
>
78+
Deny
79+
</button>
80+
</div>
81+
</div>
82+
</Transition.Child>
83+
</div>
84+
</Dialog>
85+
</Transition.Root>
86+
)
3287
}
88+
3389
export default VoteModal;

0 commit comments

Comments
 (0)