From d02562c2910147e9f93206d3eed9120ddbf22f75 Mon Sep 17 00:00:00 2001 From: fabiolalombardim Date: Tue, 30 Apr 2024 14:40:47 +0200 Subject: [PATCH 1/2] new ui implemented --- .../components/ChoiceItemSelected.tsx | 20 +-- .../lite/explorer/components/CreatorBadge.tsx | 16 +- .../components/ProposalDetailCard.tsx | 148 ++++++++++-------- .../lite/explorer/components/VoteDetails.tsx | 63 +++++--- .../explorer/pages/ProposalDetails/index.tsx | 83 ++++++---- 5 files changed, 186 insertions(+), 144 deletions(-) diff --git a/src/modules/lite/explorer/components/ChoiceItemSelected.tsx b/src/modules/lite/explorer/components/ChoiceItemSelected.tsx index 317a74b6..7a4546c7 100644 --- a/src/modules/lite/explorer/components/ChoiceItemSelected.tsx +++ b/src/modules/lite/explorer/components/ChoiceItemSelected.tsx @@ -3,18 +3,22 @@ import { Button, Divider, Grid, styled, Theme, Typography, useMediaQuery, useThe import { Choice } from "models/Choice" const StyledContainer = styled(Grid)(({ theme }: { theme: Theme }) => ({ - borderRadius: 4, + borderRadius: 8, minHeight: 75, - border: "1px solid", - borderColor: theme.palette.primary.light, - cursor: "pointer" + border: "none", + cursor: "pointer", + backgroundColor: theme.palette.primary.main })) +const Text = styled(Typography)({ + fontWeight: 300 +}) + const StyledButton = styled(Button)({ "width": "100%", "minHeight": "inherit", "&:hover": { - background: "rgba(129, 254, 183, 0.62)" + background: "#2d433c" } }) @@ -60,7 +64,7 @@ export const ChoiceItemSelected: React.FC<{ isPartOfVotes() ? { border: "1px solid", - borderColor: theme.palette.secondary.main, + borderColor: "#2D433C", backgroundColor: "#334d43" } : {} @@ -75,9 +79,7 @@ export const ChoiceItemSelected: React.FC<{ return }} > - - {choice.name} - + {choice.name} ) diff --git a/src/modules/lite/explorer/components/CreatorBadge.tsx b/src/modules/lite/explorer/components/CreatorBadge.tsx index 58d02a25..d2f60d6b 100644 --- a/src/modules/lite/explorer/components/CreatorBadge.tsx +++ b/src/modules/lite/explorer/components/CreatorBadge.tsx @@ -1,22 +1,18 @@ import React from "react" -import { Grid, Typography } from "@material-ui/core" +import { Grid, Typography, styled } from "@material-ui/core" import { Blockie } from "modules/common/Blockie" import { toShortAddress } from "services/contracts/utils" +const Text = styled(Typography)(({ theme }) => ({ + color: theme.palette.primary.light +})) export const CreatorBadge: React.FC<{ address: string | undefined }> = ({ address }) => { return ( - - by - - - - + - - {toShortAddress(address || "")} - + {toShortAddress(address || "")} diff --git a/src/modules/lite/explorer/components/ProposalDetailCard.tsx b/src/modules/lite/explorer/components/ProposalDetailCard.tsx index 78154080..26397f4c 100644 --- a/src/modules/lite/explorer/components/ProposalDetailCard.tsx +++ b/src/modules/lite/explorer/components/ProposalDetailCard.tsx @@ -3,15 +3,24 @@ import { Grid, styled, Typography, Link, useTheme, useMediaQuery, Popover, withS import { GridContainer } from "modules/common/GridContainer" import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge" import { CreatorBadge } from "./CreatorBadge" -import { FileCopyOutlined, MoreHoriz, ShareOutlined } from "@material-ui/icons" -import Share from "assets/img/share.svg" -import { CommunityBadge } from "./CommunityBadge" -import LinkIcon from "assets/img/link.svg" +import { FileCopyOutlined } from "@material-ui/icons" import { Poll } from "models/Polls" import dayjs from "dayjs" import { useNotification } from "modules/common/hooks/useNotification" import ReactHtmlParser from "react-html-parser" +const Title = styled(Typography)({ + fontSize: 32, + fontWeight: 600 +}) + +const Subtitle = styled(Typography)(({ theme }) => ({ + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" /* 28.8px */, + color: theme.palette.primary.light +})) + const LogoItem = styled("img")(({ theme }) => ({ cursor: "pointer", [theme.breakpoints.down("sm")]: { @@ -21,8 +30,12 @@ const LogoItem = styled("img")(({ theme }) => ({ const TextContainer = styled(Typography)(({ theme }) => ({ display: "flex", + color: theme.palette.primary.light, alignItems: "center", gap: 10, + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" /* 28.8px */, marginRight: 8, [theme.breakpoints.down("sm")]: { marginTop: 20 @@ -32,6 +45,10 @@ const TextContainer = styled(Typography)(({ theme }) => ({ const EndTextContainer = styled(Typography)(({ theme }) => ({ display: "flex", alignItems: "center", + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" /* 28.8px */, + color: theme.palette.primary.light, gap: 10, marginRight: 8, [theme.breakpoints.down("sm")]: { @@ -40,12 +57,20 @@ const EndTextContainer = styled(Typography)(({ theme }) => ({ })) const EndText = styled(Typography)(({ theme }) => ({ + color: theme.palette.primary.light, + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" /* 28.8px */, [theme.breakpoints.down("sm")]: { marginTop: 20 } })) const Divider = styled(Typography)(({ theme }) => ({ + color: theme.palette.primary.light, + fontSize: 18, + fontWeight: 300, + lineHeight: "160%" /* 28.8px */, marginLeft: 8, marginRight: 8, [theme.breakpoints.down("sm")]: { @@ -69,6 +94,12 @@ const CopyIcon = styled(FileCopyOutlined)({ cursor: "pointer" }) +const LinearContainer = styled(GridContainer)({ + background: "inherit !important", + backgroundColor: "inherit !important", + padding: "0px 0px 24px 0px" +}) + const CustomPopover = withStyles({ paper: { "marginTop": 10, @@ -81,6 +112,19 @@ const CustomPopover = withStyles({ } })(Popover) +const DescriptionContainer = styled(Grid)(({ theme }) => ({ + background: theme.palette.secondary.light, + padding: "40px 48px 42px 48px", + borderRadius: 8, + marginTop: 20, + gap: 32 +})) + +const DescriptionText = styled(Typography)({ + fontSize: 24, + fontWeight: 600 +}) + export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: string }> = ({ poll, daoId }) => { const theme = useTheme() const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) @@ -111,8 +155,8 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin return ( <> - - + + - - {poll?.name} - + {poll?.name} + + + - + - - - - Share - - - - - - Copy link - - + Off-Chain Proposal • Created by + + + - - - - - + + Created + {dayjs(Number(poll?.startTime)).format("LL")} + • + + {poll?.isActive === "closed" ? "Closed" : "End date"}{" "} + + {dayjs(Number(poll?.endTime)).format("ll")} + - - - - Start date:{" "} - - - {dayjs(Number(poll?.startTime)).format("lll")} - - - - - End date:{" "} - - - {dayjs(Number(poll?.endTime)).format("lll")} - - - - - - {ReactHtmlParser(poll?.description ? poll?.description : "")} - - + + Details + + {ReactHtmlParser(poll?.description ? poll?.description : "")} + - {poll?.externalLink ? ( + {/* {poll?.externalLink ? ( {poll?.externalLink} - ) : null} + ) : null} */} - + ) } diff --git a/src/modules/lite/explorer/components/VoteDetails.tsx b/src/modules/lite/explorer/components/VoteDetails.tsx index e8060394..d4bf5a76 100644 --- a/src/modules/lite/explorer/components/VoteDetails.tsx +++ b/src/modules/lite/explorer/components/VoteDetails.tsx @@ -22,18 +22,33 @@ import { useCommunityToken } from "../hooks/useCommunityToken" import { getTurnoutValue } from "services/utils/utils" import { useTokenDelegationSupported } from "services/contracts/token/hooks/useTokenDelegationSupported" import { DownloadCsvFile } from "./DownloadCsvFile" +import { SmallButton } from "modules/common/SmallButton" + +const DescriptionText = styled(Typography)({ + fontSize: 24, + fontWeight: 600 +}) + +const TotalText = styled(Typography)({ + fontSize: 18, + fontWeight: 600 +}) + +const TotalValue = styled(Typography)({ + fontSize: 18, + fontWeight: 300 +}) const Container = styled(Grid)(({ theme }) => ({ - background: theme.palette.primary.main, + background: theme.palette.secondary.light, borderRadius: 8 })) const TitleContainer = styled(Grid)(({ theme }) => ({ - paddingTop: 18, - paddingLeft: 46, - paddingRight: 46, - paddingBottom: 18, - borderBottom: `0.3px solid ${theme.palette.primary.light}`, + padding: "40px 48px 10px", + borderRadius: 8, + marginTop: 20, + gap: 32, [theme.breakpoints.down("sm")]: { padding: "18px 25px" } @@ -41,12 +56,15 @@ const TitleContainer = styled(Grid)(({ theme }) => ({ const LinearContainer = styled(GridContainer)({ paddingBottom: 0, - minHeight: 110 + minHeight: 70, + background: "inherit !important" }) const LegendContainer = styled(GridContainer)({ minHeight: 30, - paddingBottom: 0 + paddingBottom: 0, + alignItems: "center", + background: "inherit" }) const GraphicsContainer = styled(Grid)({ @@ -105,14 +123,12 @@ export const VoteDetails: React.FC<{ return ( - - Results - + Votes {choices && choices.map((choice: Choice, index) => ( - + @@ -172,12 +188,12 @@ export const VoteDetails: React.FC<{ - handleClickOpen()}> - {getTotalVoters(choices)} - - handleClickOpen()}> - Votes - + handleClickOpen()}> + Total Votes: + + + {numbro(calculateProposalTotal(choices, isXTZ ? 6 : tokenData?.decimals)).format(formatConfig)} + {isTokenDelegationSupported && turnout && !poll?.isXTZ ? ( ({turnout.toFixed(2)} % Turnout) @@ -194,13 +210,10 @@ export const VoteDetails: React.FC<{ sm={6} lg={6} style={{ gap: 10 }} - alignItems="baseline" + alignItems="center" justifyContent={isMobileSmall ? "flex-start" : "flex-end"} > - - {numbro(calculateProposalTotal(choices, isXTZ ? 6 : tokenData?.decimals)).format(formatConfig)} - - + {/* {isXTZ ? "XTZ" : poll?.tokenSymbol} {!poll?.isXTZ && ( @@ -215,7 +228,7 @@ export const VoteDetails: React.FC<{ .toString()} % of Total Supply) - )} + )} */} {getTotalVoters(choices) > 0 ? ( ) : null} + + setOpen(true)}> View Votes ({ + background: theme.palette.secondary.light, + borderRadius: 8 +})) + export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { const { proposalId } = useParams<{ proposalId: string @@ -149,48 +159,53 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { Back to community - + {choices && choices.length > 0 ? ( - - - {choices.map((choice, index) => { - return ( - - ) - })} - - {poll?.isActive === ProposalStatus.ACTIVE ? ( - - ) : null} - + {choices.map((choice, index) => { + return ( + + ) + })} + + {poll?.isActive === ProposalStatus.ACTIVE ? ( + + ) : null} + + ) : null} - + {poll && poll !== undefined ? ( Date: Sat, 25 May 2024 21:15:04 +0200 Subject: [PATCH 2/2] rpc node updated & loading for casting vote --- .../lite/explorer/components/Choices.tsx | 1 - .../explorer/pages/ProposalDetails/index.tsx | 38 ++++++++++++------- src/services/beacon/utils.ts | 2 +- src/theme/index.ts | 3 ++ 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/modules/lite/explorer/components/Choices.tsx b/src/modules/lite/explorer/components/Choices.tsx index f41e85f6..fbb9b458 100644 --- a/src/modules/lite/explorer/components/Choices.tsx +++ b/src/modules/lite/explorer/components/Choices.tsx @@ -20,7 +20,6 @@ import { useDAOID } from "modules/explorer/pages/DAO/router" import { useDAO } from "services/services/dao/hooks/useDAO" import { useTokenVoteWeight } from "services/contracts/token/hooks/useTokenVoteWeight" import { useCommunity } from "../hooks/useCommunity" -import BigNumber from "bignumber.js" const ChoicesContainer = styled(Grid)(({ theme }) => ({ marginTop: 24, diff --git a/src/modules/lite/explorer/pages/ProposalDetails/index.tsx b/src/modules/lite/explorer/pages/ProposalDetails/index.tsx index 76a594fa..ca13c79a 100644 --- a/src/modules/lite/explorer/pages/ProposalDetails/index.tsx +++ b/src/modules/lite/explorer/pages/ProposalDetails/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react" -import { Button, Grid, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core" +import { CircularProgress, Grid, Typography, styled, useMediaQuery, useTheme } from "@material-ui/core" import { ProposalDetailCard } from "../../components/ProposalDetailCard" import { GridContainer } from "modules/common/GridContainer" import { ChoiceItemSelected } from "../../components/ChoiceItemSelected" @@ -14,13 +14,13 @@ import { usePollChoices } from "../../hooks/usePollChoices" import { useCommunity } from "../../hooks/useCommunity" import { useSinglePoll } from "../../hooks/usePoll" import { ProposalStatus } from "../../components/ProposalTableRowStatusBadge" -import { BackButton } from "modules/lite/components/BackButton" import { voteOnLiteProposal } from "services/services/lite/lite-services" import { useDAO } from "services/services/dao/hooks/useDAO" import { useTokenVoteWeight } from "services/contracts/token/hooks/useTokenVoteWeight" import BigNumber from "bignumber.js" import { ArrowBackIosOutlined } from "@material-ui/icons" import { useIsMember } from "../../hooks/useIsMember" +import { SmallButton } from "modules/common/SmallButton" const DescriptionText = styled(Typography)({ fontSize: 24, @@ -81,6 +81,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { const { network } = useTezos() const [selectedVotes, setSelectedVotes] = useState([]) const isMember = useIsMember(network, community?.tokenAddress || "", account) + const [isLoading, setIsLoading] = useState(false) const votingPower = poll?.isXTZ ? voteWeight?.votingXTZWeight : voteWeight?.votingWeight @@ -104,7 +105,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { if (!wallet) { return } - + setIsLoading(true) try { const publicKey = (await wallet?.client.getActiveAccount())?.publicKey const { signature, payloadBytes } = await getSignature(account, wallet, JSON.stringify(votesData)) @@ -114,6 +115,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { autoHideDuration: 3000, variant: "error" }) + setIsLoading(false) return } const resp = await voteOnLiteProposal(signature, publicKey, payloadBytes) @@ -126,7 +128,9 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { }) setRefresh(Math.random()) setSelectedVotes([]) + setIsLoading(false) } else { + setIsLoading(false) console.log("Error: ", response.message) openNotification({ message: response.message, @@ -136,6 +140,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { return } } catch (error) { + setIsLoading(false) console.log("error: ", error) openNotification({ message: `Could not submit vote, Please Try Again!`, @@ -166,7 +171,7 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { {choices && choices.length > 0 ? ( <> - + Options @@ -190,16 +195,21 @@ export const ProposalDetails: React.FC<{ id: string }> = ({ id }) => { })} {poll?.isActive === ProposalStatus.ACTIVE ? ( - + !isLoading ? ( + saveVote()} + style={{ marginTop: 20 }} + > + {votingPower && votingPower.gt(new BigNumber(0)) ? "Cast your vote" : "No Voting Weight"} + + ) : ( + + ) ) : null} diff --git a/src/services/beacon/utils.ts b/src/services/beacon/utils.ts index 179ae0ff..c9779ed9 100644 --- a/src/services/beacon/utils.ts +++ b/src/services/beacon/utils.ts @@ -10,7 +10,7 @@ export const ALICE_PRIV_KEY = "edsk3QoqBuvdamxouPhin7swCvkQNgq4jP5KZPbwWNnwdZpSp export const rpcNodes: Record = { mainnet: "https://mainnet.api.tez.ie", - ghostnet: "https://ghostnet.tezos.marigold.dev" + ghostnet: "https://ghostnet.smartpy.io" } export const getTezosNetwork = (): Network => { diff --git a/src/theme/index.ts b/src/theme/index.ts index fa4c0a9c..164e773e 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -261,6 +261,9 @@ export const theme = createTheme({ color: "#bfc5ca !important", background: "inherit !important" } + }, + containedSecondary: { + backgroundColor: "#4ed092" } }, MuiInputBase: {