From e8db0551a63ff44bf1b1d47957a2b788e1511b5b Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 14 Feb 2024 16:34:14 +0700 Subject: [PATCH 1/5] feat: quorum information on vote section --- CHANGELOG.md | 1 + .../components/VoteQuorumCircle.tsx | 2 +- ...rviewQuorumText.tsx => VoteQuorumText.tsx} | 17 ++- .../components/VpPercentCard.tsx | 45 +++++++ .../VotingOverview.tsx | 2 +- .../VotingOverviewQuorum.tsx | 6 +- .../components/vote-details/index.tsx | 18 ++- .../voting-period/VotingQuorum.tsx | 121 ++++++++++++++++++ .../voting-period/VpPercentQuorum.tsx | 0 .../vote-details/voting-period/index.tsx | 20 +-- src/lib/pages/proposal-details/index.tsx | 7 +- 11 files changed, 208 insertions(+), 31 deletions(-) rename src/lib/pages/proposal-details/components/{proposal-overview/proposal-period-overview/VotingOverviewQuorumText.tsx => VoteQuorumText.tsx} (79%) create mode 100644 src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx create mode 100644 src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index ac5bf413a..217d61b6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#783](https://github.com/alleslabs/celatone-frontend/pull/783) Quorum status on vote details section - [#782](https://github.com/alleslabs/celatone-frontend/pull/782) Show proposal details on vote details section tabs - [#779](https://github.com/alleslabs/celatone-frontend/pull/779) Proposal period overview voting - no with veto alert - [#778](https://github.com/alleslabs/celatone-frontend/pull/778) Proposal period overview voting diff --git a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx index 3f2cf1db9..4103493d9 100644 --- a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx +++ b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx @@ -51,7 +51,7 @@ export const VoteQuorumCircle = ({ {!isCompact && ( ( @@ -20,23 +21,25 @@ const Established = () => ( ); -export const VotingOverviewQuorumText = ({ +export const VoteQuorumText = ({ status, quorum, totalVotes, -}: VotingOverviewQuorumTextProps) => { + isCompact, +}: VoteQuorumTextProps) => { + const fontVariant = isCompact ? "body2" : "body1"; const quorumPercent = formatPrettyPercent(quorum); const isPassingQuorum = totalVotes.gte(quorum); if (status === ProposalStatus.VOTING_PERIOD) return isPassingQuorum ? ( - + The proposal has successfully met the voting{" "} {quorumPercent} quorum and will be after the voting period ends. ) : ( - + The proposal required{" "} {quorumPercent} vote quorum to establish. @@ -44,13 +47,13 @@ export const VotingOverviewQuorumText = ({ ); return isPassingQuorum ? ( - + The proposal has successfully met the voting{" "} {quorumPercent} quorum and{" "} . ) : ( - + This proposal{" "} ( + + + + {name} + + + + {formatPrettyPercent(ratio.toNumber())} + + + ({d0Formatter(power, "0")}) + + + + + +); diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx index b1fd2ad6a..f5cf4be9a 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx @@ -45,7 +45,7 @@ const VotingOverviewBody = ({ ); if (isLoading) return ; - if (!params || !votesInfo) return ; + if (!params || !votesInfo) return ; return ( <> diff --git a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx index 851d0dccf..bb05ea931 100644 --- a/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx +++ b/src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverviewQuorum.tsx @@ -2,6 +2,7 @@ import { Box, Divider, Flex, Text } from "@chakra-ui/react"; import { VoteQuorumBadge } from "../../VoteQuorumBadge"; import { VoteQuorumCircle } from "../../VoteQuorumCircle"; +import { VoteQuorumText } from "../../VoteQuorumText"; import { CustomIcon } from "lib/components/icon"; import { Tooltip } from "lib/components/Tooltip"; import { @@ -15,8 +16,6 @@ import type { } from "lib/types"; import { dateFromNow, formatPrettyPercent, formatUTC } from "lib/utils"; -import { VotingOverviewQuorumText } from "./VotingOverviewQuorumText"; - interface VotingOverviewQuorumProps { proposalData: ProposalData; params: ProposalParams; @@ -82,10 +81,11 @@ export const VotingOverviewQuorum = ({ -
diff --git a/src/lib/pages/proposal-details/components/vote-details/index.tsx b/src/lib/pages/proposal-details/components/vote-details/index.tsx index 6da497586..6a28c32ee 100644 --- a/src/lib/pages/proposal-details/components/vote-details/index.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/index.tsx @@ -8,18 +8,26 @@ import { } from "@chakra-ui/react"; import { useMobile } from "lib/app-provider"; -import type { ProposalData } from "lib/types"; +import type { + Option, + ProposalData, + ProposalParams, + ProposalVotesInfo, +} from "lib/types"; import { DepositPeriodSection } from "./deposit-period/DepositPeriodSection"; import { VoteDetailsAccordionItem } from "./VoteDetailsAccordionItem"; import { VoteDetailsTab } from "./VoteDetailsTab"; import { VotingPeriod } from "./voting-period"; -interface VoteDetailsProps { +export interface VoteDetailsProps { proposalData: ProposalData; + votesInfo: Option; + params: Option; + isLoading: boolean; } -export const VoteDetails = ({ proposalData }: VoteDetailsProps) => { +export const VoteDetails = ({ proposalData, ...props }: VoteDetailsProps) => { const isMobile = useMobile(); return isMobile ? ( @@ -29,7 +37,7 @@ export const VoteDetails = ({ proposalData }: VoteDetailsProps) => { - + @@ -52,7 +60,7 @@ export const VoteDetails = ({ proposalData }: VoteDetailsProps) => { - + diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx new file mode 100644 index 000000000..03a5523f8 --- /dev/null +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx @@ -0,0 +1,121 @@ +import { Divider, Flex, Heading, Spacer, Text } from "@chakra-ui/react"; +import big from "big.js"; + +import type { VoteDetailsProps } from ".."; +import { ErrorFetchingProposalInfos } from "../../ErrorFetchingProposalInfos"; +import { VoteQuorumBadge } from "../../VoteQuorumBadge"; +import { VoteQuorumCircle } from "../../VoteQuorumCircle"; +import { VoteQuorumText } from "../../VoteQuorumText"; +import { VpPercentCard } from "../../VpPercentCard"; +import { useMobile } from "lib/app-provider"; +import { Loading } from "lib/components/Loading"; +import { + extractParams, + normalizeVotesInfo, +} from "lib/pages/proposal-details/utils"; + +export const VotingQuorum = ({ + proposalData, + params, + votesInfo, + isLoading, +}: VoteDetailsProps) => { + const isMobile = useMobile(); + if (isLoading) return ; + if (!params || !votesInfo) return ; + + const { quorum } = extractParams(params, proposalData.isExpedited); + const { abstain, nonAbstainVotes, totalVotes } = + normalizeVotesInfo(votesInfo); + + const votes = votesInfo.yes.add(votesInfo.no).add(votesInfo.noWithVeto); + const allVotes = votes.add(votesInfo.abstain); + + return ( + + + {isMobile ? ( + <> + + + Quorum + + + ) : ( + <> + + Vote Participations + + + + + * Voting power displayed in bracket + + + )} + + {isMobile && } + + + + + + + + + + + + + + ); +}; diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx index 99000789b..6440e604f 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/index.tsx @@ -1,6 +1,7 @@ import { Button, Flex, Grid, GridItem, useDisclosure } from "@chakra-ui/react"; import type { ReactNode } from "react"; +import type { VoteDetailsProps } from ".."; import { useMobile } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import { TableTitle } from "lib/components/table"; @@ -9,6 +10,7 @@ import { useProposalAnswerCounts } from "lib/services/proposalService"; import { ProposalVotesPanel } from "./ProposalVotesPanel"; import { ValidatorVotesPanel } from "./ValidatorVotesPanel"; import { ProposalVotesTable } from "./votes-table"; +import { VotingQuorum } from "./VotingQuorum"; export const ContentContainer = ({ children, @@ -30,16 +32,12 @@ export const ContentContainer = ({ ); -interface VotingPeriodProps { - id: number; -} - -export const VotingPeriod = ({ id }: VotingPeriodProps) => { +export const VotingPeriod = ({ proposalData, ...props }: VoteDetailsProps) => { const isMobile = useMobile(); const validatorVoteDisclosure = useDisclosure(); const allVoteDisclosure = useDisclosure(); - const { data: answers } = useProposalAnswerCounts(id); + const { data: answers } = useProposalAnswerCounts(proposalData.id); return ( @@ -64,11 +62,7 @@ export const VotingPeriod = ({ id }: VotingPeriodProps) => { > {/* Vote Participations */} - {!isMobile && } - Vote Participations Lorem ipsum dolor sit amet consectetur adipisicing - elit. Soluta pariatur eveniet ducimus quasi veritatis labore aut - minima adipisci sit sed ratione laboriosam dolorum suscipit tenetur - reiciendis voluptatum, aliquid quam ullam! + {/* Vote Results */} @@ -121,7 +115,7 @@ export const VotingPeriod = ({ id }: VotingPeriodProps) => { @@ -139,7 +133,7 @@ export const VotingPeriod = ({ id }: VotingPeriodProps) => { diff --git a/src/lib/pages/proposal-details/index.tsx b/src/lib/pages/proposal-details/index.tsx index 3998e3ab3..7da2db87e 100644 --- a/src/lib/pages/proposal-details/index.tsx +++ b/src/lib/pages/proposal-details/index.tsx @@ -80,7 +80,12 @@ const ProposalDetailsBody = ({ /> - + From 580ed2d9b0af0952615186c8ddd0a7c62dc451bd Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 14 Feb 2024 16:37:16 +0700 Subject: [PATCH 2/5] fix: changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 217d61b6b..8b9f04fad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features -- [#783](https://github.com/alleslabs/celatone-frontend/pull/783) Quorum status on vote details section +- [#785](https://github.com/alleslabs/celatone-frontend/pull/785) Quorum status on vote details section - [#782](https://github.com/alleslabs/celatone-frontend/pull/782) Show proposal details on vote details section tabs - [#779](https://github.com/alleslabs/celatone-frontend/pull/779) Proposal period overview voting - no with veto alert - [#778](https://github.com/alleslabs/celatone-frontend/pull/778) Proposal period overview voting From 2895e09573f359ce9ba081f620a068ce99560e27 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 14 Feb 2024 18:04:48 +0700 Subject: [PATCH 3/5] fix: wrong header --- .../pages/proposal-details/components/VoteQuorumCircle.tsx | 5 +---- .../components/vote-details/voting-period/VotingQuorum.tsx | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx index 4103493d9..e62a93952 100644 --- a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx +++ b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx @@ -19,10 +19,7 @@ export const VoteQuorumCircle = ({ const nonAbstainVotesAngle = nonAbstainVotes.toNumber() * 360; const totalVotesAngle = totalVotes.toNumber() * 360; - const totalVotesPercent = formatPrettyPercent( - totalVotes.toNumber(), - isCompact ? 1 : 2 - ); + const totalVotesPercent = formatPrettyPercent(totalVotes.toNumber(), 1); const quorumAngle = quorum * 360; const quorumPercent = formatPrettyPercent(quorum); diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx index 03a5523f8..5362b8906 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/VotingQuorum.tsx @@ -94,7 +94,7 @@ export const VotingQuorum = ({ isCompact={isMobile} /> Date: Wed, 14 Feb 2024 18:11:43 +0700 Subject: [PATCH 4/5] fix: color --- .../pages/proposal-details/components/VoteQuorumCircle.tsx | 4 +++- .../components/vote-details/voting-period/VotingQuorum.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx index e62a93952..d24f5c58c 100644 --- a/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx +++ b/src/lib/pages/proposal-details/components/VoteQuorumCircle.tsx @@ -8,6 +8,7 @@ interface VoteQuorumCircleProps { nonAbstainVotes: Big; totalVotes: Big; isCompact: boolean; + isBgGray?: boolean; } export const VoteQuorumCircle = ({ @@ -15,6 +16,7 @@ export const VoteQuorumCircle = ({ nonAbstainVotes, totalVotes, isCompact, + isBgGray, }: VoteQuorumCircleProps) => { const nonAbstainVotesAngle = nonAbstainVotes.toNumber() * 360; @@ -48,7 +50,7 @@ export const VoteQuorumCircle = ({ {!isCompact && ( Date: Wed, 14 Feb 2024 18:38:21 +0700 Subject: [PATCH 5/5] fix: remove empty file --- .../components/vote-details/voting-period/VpPercentQuorum.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/VpPercentQuorum.tsx deleted file mode 100644 index e69de29bb..000000000