Fix ui elements (#81)

packages/proposal-components/src/components/ProposalVoteCard/ProposalVote.tsx

@@ -46,7 +46,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
       {showVoteModal && (
         <Modal heading={votingRoom.question} setShowModal={setShowVoteModal} theme={theme}>
           <VoteModal
-            votingRoom={modifiedVotingRoom}
+            votingRoom={modifiedVotingRoom ?? votingRoom}
             availableAmount={availableAmount}
             selectedVote={selectedVoted}
             proposingAmount={proposingAmount}
@@ -59,7 +59,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
       {showConfirmModal && (
         <Modal heading={votingRoom.question} setShowModal={hideConfirm} theme={theme}>
           <VoteAnimatedModal
-            votingRoom={modifiedVotingRoom}
+            votingRoom={modifiedVotingRoom ?? votingRoom}
             selectedVote={selectedVoted}
             setShowModal={hideConfirm}
             proposingAmount={proposingAmount}
@@ -72,7 +72,7 @@ export function ProposalVote({ votingRoom, theme, availableAmount, hideModalFunc
         <CardHeading />
       )}
 
-      <VoteChart votingRoom={modifiedVotingRoom} selectedVote={selectedVoted} />
+      <VoteChart votingRoom={modifiedVotingRoom ?? votingRoom} selectedVote={selectedVoted} />
 
       <CardButtons>
         {votingRoom.voteWinner ? (

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 (
     <Votes ref={ref}>
@@ -90,7 +90,7 @@ function VoteBox({ won, mobileVersion, voteType, totalVotes, proposingAmount, se
     <VoteBoxWrapper
       style={{
         filter: won ? 'grayscale(1)' : 'none',
-        alignItems: mobileVersion ? (voteType == 1 ? 'flex-start' : 'flex-end') : 'center',
+        alignItems: mobileVersion ? (voteType == 1 ? 'flex-end' : 'flex-start') : 'center',
       }}
     >
       <VoteIcon

packages/proposal-components/src/components/VoteModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import { VoteChart } from './ProposalVoteCard/VoteChart'
 import { DisabledButton, VoteBtnAgainst, VoteBtnFor } from './Buttons'
@@ -28,7 +28,10 @@ export function VoteModal({
 }: VoteModalProps) {
   const disabled = proposingAmount === 0
   const funds = availableAmount > 0
-
+  const onClick = useCallback(async () => {
+    wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount))
+    setShowConfirmModal(true)
+  }, [votingRoom, selectedVote, proposingAmount, wakuVoting])
   return (
     <Column>
       <VoteChart votingRoom={votingRoom} proposingAmount={proposingAmount} selectedVote={selectedVote} />
@@ -40,16 +43,14 @@ export function VoteModal({
 
       {!funds && <DisabledButton>Not enought ABC to vote</DisabledButton>}
 
-      {funds && (
+      {funds && selectedVote === 0 ? (
-        <ModalVoteBtnAgainst
+        <BtnAgainst disabled={disabled} onClick={onClick}>
-          disabled={disabled}
+          Vote Against
-          onClick={async () => {
+        </BtnAgainst>
-            wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount))
+      ) : (
-            setShowConfirmModal(true)
+        <BtnFor disabled={disabled} onClick={onClick}>
-          }}
+          Vote For
-        >
+        </BtnFor>
-          {selectedVote === 0 ? `Vote Against` : `Vote For`}
-        </ModalVoteBtnAgainst>
       )}
     </Column>
   )
@@ -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;
 `

packages/proposal-components/src/components/mobile/ProposalMobile.tsx

@@ -24,7 +24,7 @@ export function ProposalMobile({ wakuVoting, account }: ProposalMobileProps) {
             <ProposalVoteMobile wakuVoting={wakuVoting} availableAmount={tokenBalance} />
           </Route>
           <Route exact path="/creation">
-            <ProposeMobile availableAmount={tokenBalance} />
+            <ProposeMobile availableAmount={tokenBalance} wakuVoting={wakuVoting} />
           </Route>
           <Route exact path="/proposal">
             <Proposal wakuVoting={wakuVoting} account={account} />

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
     <Card>
       <ProposalInfo votingRoom={votingRoom} mobileMode={true} providerName={wakuVoting.providerName} />
       <VoteChartWrap>
-        <VoteChart votingRoom={votingRoom} selectedVote={selectedVoted} />
+        <VoteChart votingRoom={modifiedVotingRoom ?? votingRoom} selectedVote={selectedVoted} />
       </VoteChartWrap>
       {!voteWinner && (
         <VotePropose
@@ -51,6 +53,7 @@ export function ProposalVoteMobile({ wakuVoting, availableAmount }: ProposalVote
               disabled={!account}
               onClick={() => {
                 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
 
       <CardVoteBottom>
         {' '}
-        <VoteSubmitButton votes={15} disabled={!account} onClick={() => null} />
+        <VoteSubmitButton votes={sum.toNumber()} disabled={!account} onClick={() => wakuVoting.commitVotes(votes)} />
       </CardVoteBottom>
     </Card>
   )

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) {
 
           <ProposingBtn
             disabled={proposingAmount === 0}
-            onClick={() => {
+            onClick={async () => {
+              await wakuVoting.createVote(title, text, BigNumber.from(proposingAmount))
               history.push(`/proposal`), setTitle(''), setText('')
             }}
           >

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<VoteMsg[]>([])
   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 }
 }