Votes grouping (#832)

* voting grouping & dependencies upgraded

* stylings add to tooltip

* mobile css

* pagination & css fix

* votes grouping in csv file

* requested changes

* decimals for isXTZ

* fix

* fix

package.json

@@ -95,8 +95,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/jest": "^29.5.12",
     "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^18.2.25",
     "@types/react-html-parser": "^2.0.2",
     "@types/react-router-dom": "^5.1.6",
     "@types/yup": "^0.29.11",

src/index.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-deprecated */
+
 import React from "react"
 import ReactDOM from "react-dom"
 import App from "App"

src/modules/explorer/components/ProposalActionsDialog.tsx

@@ -34,7 +34,7 @@ const OptionContainer = styled(Grid)(({ theme }) => ({
   "padding": "35px 42px",
   "marginBottom": 16,
   "cursor": "pointer",
-  "height": 110,
+  "height": 80,
   "&:hover:enabled": {
     background: theme.palette.secondary.dark,
     scale: 1.01,

src/modules/explorer/pages/Config/components/DAOInfoTable.tsx

@@ -6,7 +6,6 @@ import {
   TableBody,
   TableCell,
   TableContainer,
-  TableHead,
   TableRow,
   Typography,
   useMediaQuery,
@@ -28,14 +27,6 @@ const RowValue = styled(Typography)(({ theme }) => ({
   }
 }))
 
-const TableTitle = styled(Typography)(({ theme }) => ({
-  fontWeight: 500,
-  fontSize: 18,
-  [theme.breakpoints.down("sm")]: {
-    fontSize: 16
-  }
-}))
-
 const CustomTableContainer = styled(TableContainer)(({ theme }) => ({
   width: "inherit",
   [theme.breakpoints.down("sm")]: {}
@@ -49,12 +40,6 @@ const CustomTableCell = styled(TableCell)(({ theme }) => ({
   }
 }))
 
-const CustomTableCellTitle = styled(TableCell)(({ theme }) => ({
-  [theme.breakpoints.down("sm")]: {
-    paddingLeft: "16px !important"
-  }
-}))
-
 const CustomTableCellValue = styled(TableCell)(({ theme }) => ({
   [theme.breakpoints.down("sm")]: {
     paddingTop: 0,

src/modules/explorer/pages/Treasury/components/TreasuryDialog.tsx

@@ -26,7 +26,7 @@ const OptionContainer = styled(Grid)(({ theme }) => ({
   "padding": "35px 42px",
   "marginBottom": 16,
   "cursor": "pointer",
-  "height": 110,
+  "height": 80,
   "&:hover:enabled": {
     background: theme.palette.secondary.dark,
     scale: 1.01,

src/modules/lite/explorer/components/DownloadCsvFile.tsx

@@ -1,40 +1,57 @@
 import React, { useEffect, useState } from "react"
 import { Button, Typography } from "@material-ui/core"
 import { ReactComponent as DownloadCSVIcon } from "assets/img/download_csv.svg"
-import { Choice, WalletAddress } from "models/Choice"
-import { mkConfig, generateCsv, download, asString } from "export-to-csv"
-import { writeFile } from "node:fs"
+import { mkConfig, generateCsv, download } from "export-to-csv"
 import { useNotification } from "modules/lite/components/hooks/useNotification"
+import BigNumber from "bignumber.js"
+import { bytes2Char } from "@taquito/utils"
+import dayjs from "dayjs"
+
+interface GroupedVotes {
+  address: string
+  options: any[]
+}
 
 type DownloadCsvFileProps = {
-  data: Choice[]
+  data: GroupedVotes[]
   pollId: string | undefined
   symbol: string
+  decimals: string
+  isXTZ: boolean
 }
 
-export const DownloadCsvFile: React.FC<DownloadCsvFileProps> = ({ data, pollId, symbol }) => {
+export const DownloadCsvFile: React.FC<DownloadCsvFileProps> = ({ data, pollId, symbol, decimals, isXTZ }) => {
   const [votesDetails, setVotesDetails] = useState<any>()
   const openNotification = useNotification()
-
   useEffect(() => {
+    const getTotal = (options: any) => {
+      let total = new BigNumber(0)
+      if (options) {
+        options.map((item: any) => {
+          total = total.plus(new BigNumber(item.balance))
+        })
+      }
+      const formatted = total.div(new BigNumber(10).pow(isXTZ ? 6 : decimals))
+      return formatted
+    }
     const arr: any = []
+
     data.map(item => {
-      item.walletAddresses.map(vote => {
-        const formattedVote = {
-          address: vote.address,
-          choice: item.name,
-          balance: vote.balanceAtReferenceBlock,
-          signature: vote.signature,
-          ipfsStorage: vote.cidLink
-        }
-        return arr.push(formattedVote)
-      })
+      const formattedVote = {
+        address: item.address,
+        choices: item.options.map(item => item.name),
+        balance: getTotal(item.options),
+        signature: item.options[0].signature,
+        ipfsStorage: item.options[0].cidLink,
+        timestamp:
+          item.options[0] && item.options[0].payloadBytes ? bytes2Char(item.options[0].payloadBytes).split(" ")[4] : ""
+      }
+      return arr.push(formattedVote)
     })
     setVotesDetails(arr)
-  }, [data])
+  }, [data, decimals, isXTZ])
 
   const downloadCvs = () => {
-    console.log(votesDetails)
     const csvConfig = mkConfig({
       useKeysAsHeaders: true,
       filename: `proposal-${pollId}`,
@@ -44,11 +61,12 @@ export const DownloadCsvFile: React.FC<DownloadCsvFileProps> = ({ data, pollId,
     const votesData = votesDetails.map((row: any) => {
       return {
         "Address": row.address,
-        "Choice": row.choice,
+        "Choice": row.choices.toLocaleString().replace(",", ", "),
         "Token": symbol,
         "Vote Weight": row.balance,
         "Signature": row.signature,
-        "IPFS Storage Link": row.ipfsStorage
+        "IPFS Storage Link": row.ipfsStorage,
+        "Timestamp": dayjs(row.timestamp).format("LLL").toString()
       }
     })
     try {

src/modules/lite/explorer/components/VoteDetails.tsx

@@ -12,6 +12,7 @@ import {
   calculateWeight,
   calculateWeightXTZ,
   calculateXTZTotal,
+  getGroupedVotes,
   getTotalVoters,
   getTreasuryPercentage,
   nFormatter
@@ -88,6 +89,7 @@ export const VoteDetails: React.FC<{
   const tokenData = useCommunityToken(communityId)
   const { data: isTokenDelegationSupported } = useTokenDelegationSupported(tokenData?.tokenAddress)
   const totalXTZ = calculateXTZTotal(choices)
+  const groupedVotes = getGroupedVotes(choices)
 
   const handleClickOpen = () => {
     setVotes(choices.filter(elem => elem.walletAddresses.length > 0))
@@ -234,8 +236,10 @@ export const VoteDetails: React.FC<{
             )} */}
             {getTotalVoters(choices) > 0 ? (
               <DownloadCsvFile
-                data={choices}
+                data={groupedVotes}
                 pollId={poll?._id}
+                decimals={tokenData?.decimals ? tokenData?.decimals : ""}
+                isXTZ={isXTZ}
                 symbol={isXTZ ? "XTZ" : tokenData?.symbol ? tokenData?.symbol : ""}
               />
             ) : null}
@@ -244,9 +248,10 @@ export const VoteDetails: React.FC<{
           </Grid>
         </LegendContainer>
         <VotesDialog
-          decimals={tokenData?.decimals ? tokenData?.decimals : ""}
+          decimals={tokenData?.decimals}
           symbol={isXTZ ? "XTZ" : tokenData?.symbol ? tokenData?.symbol : ""}
-          choices={votes}
+          choices={choices}
+          groupedVotes={groupedVotes}
           open={open}
           isXTZ={isXTZ}
           handleClose={handleClose}