Fix ui elements (#81)

2021-09-21 13:29:07 +02:00 · 2021-09-21 13:29:07 +02:00 · cb9eaed607
parent 6d28e1fae9
commit cb9eaed607
7 changed files with 40 additions and 28 deletions
--- 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 && (
        <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 ? (
--- 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 (
    <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
--- a/packages/proposal-components/src/components/VoteModal.tsx
+++ b/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 && (
-        <ModalVoteBtnAgainst
-          disabled={disabled}
-          onClick={async () => {
-            wakuVoting.sendVote(votingRoom.id, selectedVote, BigNumber.from(proposingAmount))
-            setShowConfirmModal(true)
-          }}
-        >
-          {selectedVote === 0 ? `Vote Against` : `Vote For`}
-        </ModalVoteBtnAgainst>
+      {funds && selectedVote === 0 ? (
+        <BtnAgainst disabled={disabled} onClick={onClick}>
+          Vote Against
+        </BtnAgainst>
+      ) : (
+        <BtnFor disabled={disabled} onClick={onClick}>
+          Vote For
+        </BtnFor>
      )}
    </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;
 `
--- 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) {
            <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} />
--- 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
    <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>
  )
--- 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) {

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