Ipfs lite (#813)

* csv votes download

* fix node version

* updated dependencies

package.json

@@ -43,7 +43,7 @@
     "blockies-ts": "^1.0.0",
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.10.4",
-    "export-to-csv": "^1.2.2",
+    "export-to-csv": "^1.2.4",
     "formik": "^2.2.6",
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-lab": "^0.0.8",

src/index.tsx

@@ -9,6 +9,7 @@ import dayjs from "dayjs"
 
 dayjs.extend(localizedFormat)
 
+// eslint-disable-next-line react/no-deprecated
 ReactDOM.render(
   <React.StrictMode>
     <TezosProvider>

src/models/Choice.ts

@@ -9,4 +9,8 @@ export interface Choice {
 export interface WalletAddress {
   address: string
   balanceAtReferenceBlock: string
+  cidLink: string
+  choiceId: string
+  payloadBytes: string
+  signature: string
 }

src/modules/explorer/components/VotersProgress.tsx

@@ -11,6 +11,7 @@ import { SmallButton } from "modules/common/SmallButton"
 import { ReactComponent as DownloadCSVIcon } from "assets/img/download_csv.svg"
 import { mkConfig, generateCsv, download, asString } from "export-to-csv"
 import { writeFile } from "node:fs"
+import { useNotification } from "modules/common/hooks/useNotification"
 
 interface VotersData {
   showButton: boolean
@@ -47,6 +48,7 @@ export const VotersProgress: React.FC<VotersData> = ({ showButton, daoId, propos
   const quorumThreshold = proposal?.quorumThreshold || new BigNumber(0)
   const upVotes = proposal ? proposal.upVotes : new BigNumber(0)
   const downVotes = proposal ? proposal.downVotes : new BigNumber(0)
+  const openNotification = useNotification()
 
   const { upVotesQuorumPercentage, downVotesQuorumPercentage, upVotesSumPercentage, downVotesSumPercentage } =
     useVotesStats({
@@ -67,7 +69,11 @@ export const VotersProgress: React.FC<VotersData> = ({ showButton, daoId, propos
       const csv = generateCsv(csvConfig)(votesData)
       download(csvConfig)(csv)
     } catch (error) {
-      console.warn(`Error downloading csv file: `, error)
+      openNotification({
+        message: `Error downloading csv file`,
+        autoHideDuration: 3000,
+        variant: "error"
+      })
     }
   }
 

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

@@ -0,0 +1,75 @@
+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 { useNotification } from "modules/lite/components/hooks/useNotification"
+
+type DownloadCsvFileProps = {
+  data: Choice[]
+  pollId: string | undefined
+  symbol: string
+}
+
+export const DownloadCsvFile: React.FC<DownloadCsvFileProps> = ({ data, pollId, symbol }) => {
+  const [votesDetails, setVotesDetails] = useState<any>()
+  const openNotification = useNotification()
+
+  useEffect(() => {
+    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)
+      })
+    })
+    setVotesDetails(arr)
+  }, [data])
+
+  const downloadCvs = () => {
+    console.log(votesDetails)
+    const csvConfig = mkConfig({
+      useKeysAsHeaders: true,
+      filename: `proposal-${pollId}`,
+      showTitle: false
+    })
+
+    const votesData = votesDetails.map((row: any) => {
+      return {
+        "Address": row.address,
+        "Choice": row.choice,
+        "Token": symbol,
+        "Vote Weight": row.balance,
+        "Signature": row.signature,
+        "IPFS Storage Link": row.ipfsStorage
+      }
+    })
+    try {
+      const csv = generateCsv(csvConfig)(votesData)
+      download(csvConfig)(csv)
+    } catch (error) {
+      openNotification({
+        message: `Error downloading csv file`,
+        autoHideDuration: 3000,
+        variant: "error"
+      })
+    }
+  }
+
+  return (
+    <Button>
+      <DownloadCSVIcon style={{ marginRight: 8 }} />
+      <Typography color="secondary" onClick={downloadCvs}>
+        {" "}
+        Download CSV
+      </Typography>
+    </Button>
+  )
+}

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React, { useEffect, useMemo, useState } from "react"
-import { Grid, LinearProgress, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core"
+import { Button, Grid, LinearProgress, styled, Typography, useMediaQuery, useTheme } from "@material-ui/core"
 import { GridContainer } from "modules/common/GridContainer"
 import { VotesDialog } from "./VotesDialog"
 import { Poll } from "models/Polls"
@@ -21,6 +21,7 @@ import { useTezos } from "services/beacon/hooks/useTezos"
 import { useCommunityToken } from "../hooks/useCommunityToken"
 import { getTurnoutValue } from "services/utils/utils"
 import { useTokenDelegationSupported } from "services/contracts/token/hooks/useTokenDelegationSupported"
+import { DownloadCsvFile } from "./DownloadCsvFile"
 
 const Container = styled(Grid)(({ theme }) => ({
   background: theme.palette.primary.main,
@@ -193,6 +194,7 @@ export const VoteDetails: React.FC<{
             sm={6}
             lg={6}
             style={{ gap: 10 }}
+            alignItems="baseline"
             justifyContent={isMobileSmall ? "flex-start" : "flex-end"}
           >
             <Typography color="textPrimary" variant="body1">
@@ -214,6 +216,13 @@ export const VoteDetails: React.FC<{
                 % of Total Supply)
               </Typography>
             )}
+            {getTotalVoters(choices) > 0 ? (
+              <DownloadCsvFile
+                data={choices}
+                pollId={poll?._id}
+                symbol={isXTZ ? "XTZ" : tokenData?.symbol ? tokenData?.symbol : ""}
+              />
+            ) : null}
           </Grid>
         </LegendContainer>
         <VotesDialog