From cb9eaed6073bc623c9b601100c69adcc8900749a Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Tue, 21 Sep 2021 13:29:07 +0200 Subject: [PATCH] Fix ui elements (#81) --- .../ProposalVoteCard/ProposalVote.tsx | 6 ++-- .../components/ProposalVoteCard/VoteChart.tsx | 4 +-- .../src/components/VoteModal.tsx | 29 ++++++++++--------- .../src/components/mobile/ProposalMobile.tsx | 2 +- .../components/mobile/ProposalVoteMobile.tsx | 10 +++++-- .../src/components/mobile/ProposeMobile.tsx | 8 +++-- .../src/hooks/useRoomWakuVotes.ts | 9 ++++-- 7 files changed, 40 insertions(+), 28 deletions(-) diff --git a/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx b/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx index 26cf631..4539f73 100644 --- a/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx +++ b/packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx @@ -46,7 +46,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc {showVoteModal && ( )} - + {votingRoom.voteWinner ? ( diff --git a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx index 516feb9..6c0a16e 100644 --- a/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx +++ b/packages/proposal-components/src/components/ProposalVoteCard/VoteChart.tsx @@ -40,7 +40,7 @@ export function VoteChart({ votingRoom, proposingAmount, selectedVote, isAnimati } }, [graphWidth, voteSum, proposingAmount]) - const timeLeft = useMemo(() => votingRoom.timeLeft, [votingRoom.timeLeft]) + const timeLeft = useMemo(() => votingRoom.timeLeft * 1000, [votingRoom.timeLeft]) const voteWinner = useMemo(() => votingRoom.voteWinner, [votingRoom.voteWinner]) return ( @@ -90,7 +90,7 @@ function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, se 0 - + const onClick = useCallback(async () => { + wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount)) + setShowConfirmModal(true) + }, [votingRoom, selectedVote, proposingAmount, wakuVoting]) return ( @@ -40,16 +43,14 @@ export function VoteModal({ {!funds && Not enought ABC to vote} - {funds && ( - { - wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount)) - setShowConfirmModal(true) - }} - > - {selectedVote === 0 ? `Vote Against` : `Vote For`} - + {funds && selectedVote === 0 ? ( + + Vote Against + + ) : ( + + Vote For + )} ) @@ -63,11 +64,11 @@ const Column = styled.div` margin-top: 32px; ` -const ModalVoteBtnAgainst = styled(VoteBtnAgainst)` +const BtnAgainst = styled(VoteBtnAgainst)` width: 100%; margin-top: 32px; ` -const ModalVoteBtnFor = styled(VoteBtnFor)` +const BtnFor = styled(VoteBtnFor)` width: 100%; margin-top: 32px; ` diff --git a/packages/proposal-components/src/components/mobile/ProposalMobile.tsx b/packages/proposal-components/src/components/mobile/ProposalMobile.tsx index 2b3dbe6..f90b2e6 100644 --- a/packages/proposal-components/src/components/mobile/ProposalMobile.tsx +++ b/packages/proposal-components/src/components/mobile/ProposalMobile.tsx @@ -24,7 +24,7 @@ export function ProposalMobile({ wakuVoting, account }: ProposalMobileProps) { - + diff --git a/packages/proposal-components/src/components/mobile/ProposalVoteMobile.tsx b/packages/proposal-components/src/components/mobile/ProposalVoteMobile.tsx index c93f0a4..b1e2fc0 100644 --- a/packages/proposal-components/src/components/mobile/ProposalVoteMobile.tsx +++ b/packages/proposal-components/src/components/mobile/ProposalVoteMobile.tsx @@ -8,8 +8,9 @@ import { VoteChart } from '../ProposalVoteCard/VoteChart' import { ProposalInfo } from '../ProposalInfo' import { VotePropose } from '../VotePropose' import { VotesBtns } from '../ProposalVoteCard/ProposalVote' -import { useVotingRoom } from '@status-waku-voting/proposal-hooks' +import { useRoomWakuVotes, useVotingRoom } from '@status-waku-voting/proposal-hooks' import { WakuVoting } from '@status-waku-voting/core' +import { BigNumber } from 'ethers' interface ProposalVoteMobileProps { wakuVoting: WakuVoting availableAmount: number @@ -23,6 +24,7 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote const votingRoom = useVotingRoom(Number(id), wakuVoting) const voteWinner = useMemo(() => votingRoom?.voteWinner, [votingRoom?.voteWinner]) + const { votes, sum, modifiedVotingRoom } = useRoomWakuVotes(votingRoom, wakuVoting) if (!votingRoom) { return <>Loading @@ -32,7 +34,7 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote - + {!voteWinner && ( { setSelectedVoted(0) + wakuVoting.sendVote(votingRoom.id, 0, BigNumber.from(proposingAmount)) }} > Vote Against @@ -59,6 +62,7 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote disabled={!account} onClick={() => { setSelectedVoted(1) + wakuVoting.sendVote(votingRoom.id, 1, BigNumber.from(proposingAmount)) }} > Vote For @@ -69,7 +73,7 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote {' '} - null} /> + wakuVoting.commitVotes(votes)} /> ) diff --git a/packages/proposal-components/src/components/mobile/ProposeMobile.tsx b/packages/proposal-components/src/components/mobile/ProposeMobile.tsx index 3a749ec..536cb92 100644 --- a/packages/proposal-components/src/components/mobile/ProposeMobile.tsx +++ b/packages/proposal-components/src/components/mobile/ProposeMobile.tsx @@ -13,12 +13,15 @@ import { ProposingTextInput, } from '../newVoteModal/ProposeModal' import { VotePropose } from '../VotePropose' +import { BigNumber } from 'ethers' +import { WakuVoting } from '@status-waku-voting/core' interface ProposeVoteModalProps { availableAmount: number + wakuVoting: WakuVoting } -export function ProposeMobile({ availableAmount }: ProposeVoteModalProps) { +export function ProposeMobile({ availableAmount, wakuVoting }: ProposeVoteModalProps) { const insufficientFunds = availableAmount < 10000 const [proposingAmount, setProposingAmount] = useState(0) const [title, setTitle] = useState('') @@ -90,7 +93,8 @@ export function ProposeMobile({ availableAmount }: ProposeVoteModalProps) { { + onClick={async () => { + await wakuVoting.createVote(title, text, BigNumber.from(proposingAmount)) history.push(`/proposal`), setTitle(''), setText('') }} > diff --git a/packages/proposal-hooks/src/hooks/useRoomWakuVotes.ts b/packages/proposal-hooks/src/hooks/useRoomWakuVotes.ts index c1c74d3..29f1b04 100644 --- a/packages/proposal-hooks/src/hooks/useRoomWakuVotes.ts +++ b/packages/proposal-hooks/src/hooks/useRoomWakuVotes.ts @@ -4,7 +4,7 @@ import { VoteMsg } from '@status-waku-voting/core/dist/esm/src/models/VoteMsg' import { utils, BigNumber } from 'ethers' import { VotingRoom } from '@status-waku-voting/core/dist/esm/src/types/PollType' -export function useRoomWakuVotes(votingRoom: VotingRoom, wakuVoting: WakuVoting) { +export function useRoomWakuVotes(votingRoom: VotingRoom | undefined, wakuVoting: WakuVoting) { const [votes, setVotes] = useState([]) const [sum, setSum] = useState(BigNumber.from(0)) const [modifiedVotingRoom, setModifiedVotingRoom] = useState(votingRoom) @@ -12,6 +12,9 @@ export function useRoomWakuVotes(votingRoom: VotingRoom, wakuVoting: WakuVoting) useEffect(() => { const updateVotes = async () => { + if (!votingRoom) { + return + } const newVotes = await wakuVoting.getRoomWakuVotes(votingRoom.id) if (newVotes) { const newHash = utils.id(newVotes.wakuVotes.map((vote) => vote.id).join('')) @@ -24,9 +27,9 @@ export function useRoomWakuVotes(votingRoom: VotingRoom, wakuVoting: WakuVoting) } } updateVotes() - const interval = setInterval(updateVotes, 10000) + const interval = setInterval(updateVotes, 1000) return () => clearInterval(interval) - }, [wakuVoting]) + }, [wakuVoting, votingRoom]) return { votes, sum, modifiedVotingRoom } }