Fix mobile vote animations (#163)

packages/DApp/package.json

@@ -19,7 +19,7 @@
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "humanize-duration": "^3.27.0",
-    "js-waku": "^0.8.1",
+    "js-waku": "^0.9.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

packages/DApp/src/componentsMobile/CardVoteMobile.tsx

@@ -1,5 +1,5 @@
 import { useContractFunction, useEthers } from '@usedapp/core'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { VotesBtns, VoteBtn } from '../components/Button'
 import { CardVoteBlock, CardHeading } from '../components/Card'
@@ -21,12 +21,14 @@ import { DetailedVotingRoom } from '../models/smartContract'
 import arrowDown from '../assets/images/arrowDown.svg'
 import { useSendWakuVote } from '../hooks/useSendWakuVote'
 import { WrapperBottom, WrapperTop } from '../constants/styles'
+import { useRoomAggregateVotes } from '../hooks/useRoomAggregateVotes'
 
 interface CardVoteMobileProps {
   room: DetailedVotingRoom
 }
 
 export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
+  const [vote, setVote] = useState(voting.fromRoom(room))
   const { account } = useEthers()
 
   const selectedVoted = voteTypes['Add'].for
@@ -34,8 +36,7 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
   const { votingContract } = useContracts()
 
   const finalizeVoting = useContractFunction(votingContract, 'finalizeVotingRoom')
-
-  const vote = voting.fromRoom(room)
+  room = useRoomAggregateVotes(room, false)
 
   const voteConstants = voteTypes[vote.type]
 
@@ -49,10 +50,13 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
   const isDisabled = room.details.votingHistory.length === 0
   const sendWakuVote = useSendWakuVote()
 
+  useEffect(() => {
+    setVote(voting.fromRoom(room))
+  }, [JSON.stringify(room)])
+
   if (!vote) {
     return <CardVoteBlock />
   }
-
   return (
     <CardVoteBlock>
       {winner ? (
@@ -85,10 +89,26 @@ export const CardVoteMobile = ({ room }: CardVoteMobileProps) => {
           </VoteBtnFinal>
         ) : (
           <VotesBtns>
-            <VoteBtn disabled={!account} onClick={() => sendWakuVote(proposingAmount, room.roomNumber, 0)}>
+            <VoteBtn
+              disabled={!account}
+              onClick={async () => {
+                await sendWakuVote(proposingAmount, room.roomNumber, 0)
+                setVote((vote) => {
+                  return { ...vote, voteAgainst: vote.voteAgainst.add(proposingAmount) }
+                })
+              }}
+            >
               {voteConstants.against.text} <span>{voteConstants.against.icon}</span>
             </VoteBtn>
-            <VoteBtn disabled={!account} onClick={() => sendWakuVote(proposingAmount, room.roomNumber, 1)}>
+            <VoteBtn
+              disabled={!account}
+              onClick={async () => {
+                await sendWakuVote(proposingAmount, room.roomNumber, 1)
+                setVote((vote) => {
+                  return { ...vote, voteFor: vote.voteFor.add(proposingAmount) }
+                })
+              }}
+            >
               {voteConstants.for.text} <span>{voteConstants.for.icon}</span>
             </VoteBtn>
           </VotesBtns>

packages/DApp/src/componentsMobile/VotingCardCover.tsx

@@ -6,12 +6,14 @@ import voting from '../helpers/voting'
 import { getVotingWinner } from '../helpers/voting'
 import { VoteChart } from '../components/votes/VoteChart'
 import { useHistory } from 'react-router'
+import { useRoomAggregateVotes } from '../hooks/useRoomAggregateVotes'
 
 interface VotingCardCoverProps {
   room: DetailedVotingRoom
 }
 
 export function VotingCardCover({ room }: VotingCardCoverProps) {
+  room = useRoomAggregateVotes(room, false)
   const vote = voting.fromRoom(room)
   const winner = getVotingWinner(vote)
   const history = useHistory()

yarn.lock

@@ -2227,9 +2227,11 @@
   integrity sha512-rS27+EkB/RE1Iz3u0XtVL5q36MGDWbgYe7zWiodyKNUnthxY0rukK5V36eiUCtCisB7NN8zKYH6DO2M37qxFEQ==
 
 "@types/debug@^4.1.5":
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.6.tgz#0b7018723084918a865eff99249c490505df2163"
-  integrity sha512-7fDOJFA/x8B+sO1901BmHlf5dE1cxBU8mRXj8QOEDnn16hhGJv/IHxJtZhvsabZsIMn0eLIyeOKAeqSNJJYTpA==
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
+  integrity sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==
+  dependencies:
+    "@types/ms" "*"
 
 "@types/eslint-scope@^3.7.0":
   version "3.7.0"
@@ -2340,6 +2342,11 @@
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.2.tgz#91daa226eb8c2ff261e6a8cbf8c7304641e095e0"
   integrity sha512-Lwh0lzzqT5Pqh6z61P3c3P5nm6fzQK/MMHl9UKeneAeInVflBSz1O2EkX6gM6xfJd7FBXBY5purtLx7fUiZ7Hw==
 
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/node-fetch@^2.5.5":
   version "2.5.10"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.10.tgz#9b4d4a0425562f9fcea70b12cb3fcdd946ca8132"
@@ -2354,9 +2361,9 @@
   integrity sha512-7EIraBEyRHEe7CH+Fm1XvgqU6uwZN8Q7jppJGcqjROMT29qhAuuOxYB1uEY5UMYQKEmA5D+5tBnhdaPXSsLONA==
 
 "@types/node@>=13.7.0":
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.0.tgz#2c219eaa3b8d1e4d04f4dd6e40bc68c7467d5272"
-  integrity sha512-HrJuE7Mlqcjj+00JqMWpZ3tY8w7EUd+S0U3L1+PQSWiXZbOgyQDvi+ogoUxaHApPJq5diKxYBQwA3iIlNcPqOg==
+  version "16.4.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.3.tgz#c01c1a215721f6dec71b47d88b4687463601ba48"
+  integrity sha512-GKM4FLMkWDc0sfx7tXqPWkM6NBow1kge0fgQh0bOnlqo4iT1kvTvMEKE0c1RtUGnbLlGRXiAA8SumE//90uKAg==
 
 "@types/node@^12.12.6":
   version "12.20.15"
@@ -8499,10 +8506,10 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-waku@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/js-waku/-/js-waku-0.8.1.tgz#481443a929552dc116f7695b0f5a040130ac4a0a"
-  integrity sha512-llbc4ZRDpjS8BnWwdtwbdVY2/J5sgiyuzR2l0b/PihP+1QTrItukQ7TrgE/Ioj7aO2E8I+YUGMm/f/O1up/yMQ==
+js-waku@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/js-waku/-/js-waku-0.9.0.tgz#0e62d3097bd4d53fd281151252bf09d77a6e0297"
+  integrity sha512-bWKxWDz834VF+/4eqyM14+yidWMp90V5jUr8BUmB4GdbodYpHi4Y6lNsR8i+0y4+vuYwZbXOxU+RWjnePjA6Yg==
   dependencies:
     axios "^0.21.1"
     debug "^4.3.1"