validation for downloading votes & label for when no votes on dialog

dOrgTech · Feb 25, 2024 · 80424fc · 80424fc
1 parent a193668
commit 80424fc
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 35 deletions.
diff --git a/src/modules/explorer/components/VotersProgress.tsx b/src/modules/explorer/components/VotersProgress.tsx
@@ -133,20 +133,22 @@ export const VotersProgress: React.FC<VotersData> = ({ showButton, daoId, propos
           </Grid>
           {showButton ? (
             <Grid container direction="row" alignItems="center" justifyContent="flex-end">
-              <Grid
-                xs={isMobileSmall ? 6 : 2}
-                item
-                container
-                alignItems="center"
-                justifyContent={isMobileSmall ? "flex-start" : "flex-end"}
-                style={{ cursor: "pointer" }}
-              >
-                <DownloadCSVIcon style={{ marginRight: 8 }} />
-                <Typography color="secondary" onClick={downloadCvs}>
-                  {" "}
-                  Download CSV
-                </Typography>
-              </Grid>
+              {proposal?.voters && proposal?.voters.length > 0 && (
+                <Grid
+                  xs={isMobileSmall ? 6 : 2}
+                  item
+                  container
+                  alignItems="center"
+                  justifyContent={isMobileSmall ? "flex-start" : "flex-end"}
+                  style={{ cursor: "pointer" }}
+                >
+                  <DownloadCSVIcon style={{ marginRight: 8 }} />
+                  <Typography color="secondary" onClick={downloadCvs}>
+                    {" "}
+                    Download CSV
+                  </Typography>
+                </Grid>
+              )}
               <Grid item xs={isMobileSmall ? 6 : 2} container justifyContent="flex-end">
                 <SmallButton onClick={() => setOpen(true)}>View Votes</SmallButton>
               </Grid>

diff --git a/src/modules/explorer/components/VotesTable.tsx b/src/modules/explorer/components/VotesTable.tsx
@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from "react"
-import { Grid, Table, TableBody, TableCell, TableHead, TableRow, useTheme } from "@material-ui/core"
+import { Grid, Table, TableBody, TableCell, TableHead, TableRow, Typography, styled } from "@material-ui/core"
 import { toShortAddress } from "../../../services/contracts/utils"
 import { Blockie } from "modules/common/Blockie"
 import ReactPaginate from "react-paginate"
 import numbro from "numbro"
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore"
 
+const StyledRow = styled(Grid)({
+  paddingLeft: 46,
+  paddingTop: 10,
+  paddingBottom: 10
+})
+
 const titles = ["Address", "Votes"] as const
 
 interface RowData {
@@ -19,7 +25,6 @@ const formatConfig = {
 }
 
 export const VotesTable: React.FC<{ data: RowData[] }> = ({ data }) => {
-  const theme = useTheme()
   const [columns, setColumns] = useState<RowData[]>([])
   const [countAddress, setCountAddress] = useState(0)
   const [countVotes, setCountVotes] = useState(0)
@@ -84,17 +89,27 @@ export const VotesTable: React.FC<{ data: RowData[] }> = ({ data }) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {columns.slice(offset, offset + 6).map((row, i) => (
-            <TableRow key={`votesrow-${i}`}>
-              <TableCell>
-                <Grid item container>
-                  <Blockie address={row.address} size={24} style={{ marginRight: 16 }} />
-                  {toShortAddress(row.address)}
-                </Grid>
-              </TableCell>
-              <TableCell>{numbro(row.votes).format(formatConfig)}</TableCell>
+          {columns.length > 0 ? (
+            columns.slice(offset, offset + 6).map((row, i) => (
+              <TableRow key={`votesrow-${i}`}>
+                <TableCell>
+                  <Grid item container>
+                    <Blockie address={row.address} size={24} style={{ marginRight: 16 }} />
+                    {toShortAddress(row.address)}
+                  </Grid>
+                </TableCell>
+                <TableCell>{numbro(row.votes).format(formatConfig)}</TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <StyledRow item>
+                <Typography color="textPrimary" align="left">
+                  No items
+                </Typography>
+              </StyledRow>
             </TableRow>
-          ))}
+          )}
         </TableBody>
       </Table>
       <Grid container direction="row" justifyContent="flex-end">

diff --git a/src/modules/explorer/pages/ProposalDetails/index.tsx b/src/modules/explorer/pages/ProposalDetails/index.tsx
@@ -34,15 +34,13 @@ import { XTZTransferBadge } from "../../components/XTZTransferBadge"
 import { ProposalTransferBadge } from "modules/explorer/components/ProposalTransferBadge"
 import { useUnstakeVotes } from "../../../../services/contracts/baseDAO/hooks/useUnstakeVotes"
 import { useTezos } from "../../../../services/beacon/hooks/useTezos"
-import { CopyButton } from "modules/common/CopyButton"
 import { ProposalCodeEditorInput } from "modules/explorer/components/ProposalFormInput"
 import Prism, { highlight } from "prismjs"
 import { CodeCollapse } from "modules/explorer/components/CodeCollapse"
 import dayjs from "dayjs"
 import ThumbUpIcon from "@mui/icons-material/ThumbUp"
 import ThumbDownIcon from "@mui/icons-material/ThumbDown"
 import { getStatusDate } from "services/utils/utils"
-import numbro from "numbro"
 
 const TitleText = styled(Typography)({
   fontSize: 36,
@@ -82,8 +80,8 @@ const HistoryItem = styled(Grid)(({ theme }: { theme: Theme }) => ({
   }
 }))
 
-const ProgressText = styled(Typography)(({ textColor }: { textColor: string }) => ({
-  color: textColor,
+const ProgressText = styled(Typography)(({ textcolor }: { textcolor: string }) => ({
+  color: textcolor,
   display: "flex",
   alignItems: "center",
   position: "absolute",
@@ -98,6 +96,10 @@ const ProgressText = styled(Typography)(({ textColor }: { textColor: string }) =
   top: 0
 }))
 
+const ValueText = styled(Typography)({
+  marginLeft: 8
+})
+
 const DetailsText = styled(Typography)({
   wordBreak: "break-all"
 })
@@ -543,7 +545,7 @@ export const ProposalDetails: React.FC = () => {
                     trackStrokeColor={theme.palette.primary.light}
                   >
                     <div className="indicator">
-                      <ProgressText textColor="#81FEB7">
+                      <ProgressText textcolor="#81FEB7">
                         {proposal ? `${formatNumber(votesQuorumPercentage)}%` : "-"}
                       </ProgressText>
                     </div>
@@ -562,6 +564,7 @@ export const ProposalDetails: React.FC = () => {
                 {historyItems.map((item: any, index: number) => {
                   return (
                     <HistoryItem
+                      item
                       container
                       direction="row"
                       key={index}
@@ -618,13 +621,13 @@ export const ProposalDetails: React.FC = () => {
                   {(proposal as LambdaProposal).metadata.lambdaType === "execute_handler" && (
                     <Grid item container alignItems="center" direction={isMobileSmall ? "column" : "row"}>
                       <HighlightedBadge justifyContent="center" alignItems="center" direction="row" container>
-                        <Grid item>
+                        <Grid item container direction="row">
                           <DetailsText variant="body1" color="textPrimary">
                             Execute Function{" "}
-                            <Typography variant="body1" color="secondary" display={"inline"}>
-                              {_.startCase((proposal as LambdaProposal).metadata.lambdaHandler.handler_name)}
-                            </Typography>{" "}
                           </DetailsText>
+                          <ValueText variant="body1" color="secondary" display={"inline"}>
+                            {_.startCase((proposal as LambdaProposal).metadata.lambdaHandler.handler_name)}
+                          </ValueText>{" "}
                         </Grid>
                       </HighlightedBadge>
                     </Grid>