Add count animation (#87)

packages/DApp/package.json

@@ -37,6 +37,7 @@
     "@types/mocha": "^8.2.2",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.8",
+    "@types/react-countup": "^4.3.1",
     "@types/react-dom": "^17.0.6",
     "@types/react-router": "^5.1.14",
     "@types/react-router-dom": "^5.1.7",
@@ -58,6 +59,7 @@
     "jsdom-global": "^3.0.2",
     "mocha": "^8.4.0",
     "prettier": "^2.3.0",
+    "react-countup": "^4.4.0",
     "source-map-loader": "^3.0.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.2",

packages/DApp/src/components/votes/VoteChart.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
+import CountUp from 'react-countup'
 import styled from 'styled-components'
 import { Colors } from '../../constants/styles'
 import { addCommas } from '../../helpers/addCommas'
 import { VoteType, voteTypes } from './../../constants/voteTypes'
 import { CurrentVoting } from '../../models/community'
 import { VoteGraphBar } from './VoteGraphBar'
-
 import { formatTimeLeft } from '../../helpers/fomatTimeLeft'
 
 export interface VoteChartProps {
@@ -42,7 +42,12 @@ export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isA
           </p>
           <span>
             {' '}
-            {addCommas(vote.voteAgainst.toNumber())} <span style={{ fontWeight: 'normal' }}>SNT</span>
+            {isAnimation && proposingAmount && selectedVote && selectedVote.type === 0 ? (
+              <CountUp end={votesAgainst + proposingAmount} />
+            ) : (
+              addCommas(votesAgainst)
+            )}{' '}
+            <span style={{ fontWeight: 'normal' }}>SNT</span>
           </span>
         </VoteBox>
         <TimeLeft>{formatTimeLeft(vote.timeLeft)}</TimeLeft>
@@ -52,7 +57,12 @@ export function VoteChart({ vote, voteWinner, proposingAmount, selectedVote, isA
           </p>
           <span>
             {' '}
-            {addCommas(vote.voteFor.toNumber())} <span style={{ fontWeight: 'normal' }}>SNT</span>
+            {isAnimation && proposingAmount && selectedVote && selectedVote.type === 1 ? (
+              <CountUp end={votesFor + proposingAmount} />
+            ) : (
+              addCommas(votesFor)
+            )}{' '}
+            <span style={{ fontWeight: 'normal' }}>SNT</span>
           </span>
         </VoteBox>
       </VotesChart>

yarn.lock

@@ -2274,6 +2274,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
+"@types/react-countup@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-countup/-/react-countup-4.3.1.tgz#5bba8e11c18549c92f9a6efe07e406c92c970f89"
+  integrity sha512-8KwOdVVKhMOdtXJoOg3YXZwWxnFnZtPojNs/DZRlhHTpOYIb1If+9+rVPnwnXDhNhphj5diUCds9E26VtVK8IA==
+  dependencies:
+    react-countup "*"
+
 "@types/react-dom@>=16.9.0":
   version "17.0.7"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.7.tgz#b8ee15ead9e5d6c2c858b44949fdf2ebe5212232"
@@ -4866,6 +4873,11 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+countup.js@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/countup.js/-/countup.js-1.9.3.tgz#ce3e50cd7160441e478f07da31895edcc0f1c9dd"
+  integrity sha1-zj5QzXFgRB5HjwfaMYle3MDxyd0=
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -10957,6 +10969,15 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-countup@*, react-countup@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-countup/-/react-countup-4.4.0.tgz#ca5c0a971c442a06a7bc52f3921ad2e66ba65990"
+  integrity sha512-PSSpvRT5FCjCVh3NzPpz/SgeG8b9LnpfCSO1TEMK8K/GhmxI+s8D/KbxGCFsmmeq+Y0cnf2KepUHssPfH/7iyw==
+  dependencies:
+    countup.js "^1.9.3"
+    prop-types "^15.7.2"
+    warning "^4.0.3"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -13166,6 +13187,13 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"