From a928233de8e0e6ccda1f03b0596e39bb8e010736 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= Date: Tue, 27 Feb 2024 11:10:14 +0100 Subject: [PATCH] [#216] add Automated Voting Options component --- CHANGELOG.md | 4 + .../molecules/AutomatedVotingCard.tsx | 100 ++++++++++++++++++ .../src/components/molecules/index.ts | 1 + .../src/components/molecules/types.ts | 8 ++ .../organisms/AutomatedVotingOptions.tsx | 70 ++++++++++++ .../src/components/organisms/index.ts | 1 + govtool/frontend/src/i18n/locales/en.ts | 12 ++- 7 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx create mode 100644 govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 0188ff91d..d04b1b09e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,10 @@ changes. - Added `isRegisteredAsSoleVoter` and `wasRegisteredAsSoleVoter` fields to the drep/info response [Issue 212](https://github.com/IntersectMBO/govtool/issues/212) - Abandoning registration as DRep [Issue 151](https://github.com/IntersectMBO/govtool/issues/151) - Abandoning GA creation [Issue 359](https://github.com/IntersectMBO/govtool/issues/359) +- Choose GA type - GA Submiter [Issue 358](https://github.com/IntersectMBO/govtool/issues/358) +- Create Automated Voting Options component [Issue 216](https://github.com/IntersectMBO/govtool/issues/216) +- Change step 3 components [Issue 152](https://github.com/intersectMBO/govtool/issues/152) +- Add possibility to vote on behalf of myself - Sole Voter [Issue 119](https://github.com/IntersectMBO/govtool/issues/119) - Create DRep registration page about roles [Issue 205](https://github.com/IntersectMBO/govtool/issues/205) - Create Checkbox component. Improve Field and ControlledField [Issue 177](https://github.com/IntersectMBO/govtool/pull/177) - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81) diff --git a/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx b/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx new file mode 100644 index 000000000..7deef9a44 --- /dev/null +++ b/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx @@ -0,0 +1,100 @@ +import { Box, Divider } from "@mui/material"; + +import { AutomatedVotingCardProps } from "./types"; +import { Button, Spacer, Typography } from "@atoms"; +import { useScreenDimension, useTranslation } from "@hooks"; + +export const AutomatedVotingCard = ({ + description, + onClickDelegate, + onClickInfo, + title, + votingPower, +}: AutomatedVotingCardProps) => { + const { isMobile, screenWidth } = useScreenDimension(); + const { t } = useTranslation(); + + return ( + + + {title} + + {description} + + + + + + {t("dRepDirectory.votingPower")} + + + ₳ + {votingPower} + + + + + + + + + + ); +}; diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts index b87a802df..f412bbe21 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -1,4 +1,5 @@ export * from "./ActionCard"; +export * from "./AutomatedVotingCard"; export * from "./Card"; export * from "./CenteredBoxBottomButtons"; export * from "./CenteredBoxPageWrapper"; diff --git a/govtool/frontend/src/components/molecules/types.ts b/govtool/frontend/src/components/molecules/types.ts index 5e817df41..fca7303b4 100644 --- a/govtool/frontend/src/components/molecules/types.ts +++ b/govtool/frontend/src/components/molecules/types.ts @@ -13,3 +13,11 @@ export type StepProps = { layoutStyles?: SxProps; stepNumber: number | string; }; + +export type AutomatedVotingCardProps = { + description: string; + onClickDelegate: () => void; + onClickInfo: () => void; + title: string; + votingPower: string | number; +}; diff --git a/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx b/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx new file mode 100644 index 000000000..4848be2de --- /dev/null +++ b/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx @@ -0,0 +1,70 @@ +import { useState } from "react"; +import { Box } from "@mui/material"; + +import { Spacer, Typography } from "@atoms"; +import { ICONS } from "@consts"; +import { useTranslation } from "@hooks"; +import { AutomatedVotingCard } from "@molecules"; + +export const AutomatedVotingOptions = () => { + const [isOpen, setIsOpen] = useState(false); + const { t } = useTranslation(); + + const handleOpen = () => { + setIsOpen((prev) => !prev); + }; + + return ( + + + {t("dRepDirectory.automatedVotingOptions")} + arrow + + {isOpen ? ( + <> + + {}} + onClickInfo={() => {}} + title={t("dRepDirectory.abstainCardTitle")} + votingPower={"99,111,111"} + /> + + {}} + onClickInfo={() => {}} + title={t("dRepDirectory.noConfidenceTitle")} + votingPower={"99,111,111"} + /> + + ) : null} + + ); +}; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index 57b806873..aa7c6cc50 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -1,3 +1,4 @@ +export * from "./AutomatedVotingOptions"; export * from "./BgCard"; export * from "./ChooseStakeKeyPanel"; export * from "./ChooseWalletModal"; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 166d05af5..747d1b4bf 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -249,6 +249,15 @@ export const en = { title: "Delegate to myself", }, }, + dRepDirectory: { + abstainCardDescription: "Select this to vote ABSTAIN to every vote.", + abstainCardTitle: "Abstain from Every Vote", + automatedVotingOptions: "Automated Voting Options", + noConfidenceDescription: + "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals", + noConfidenceTitle: "Signal No Confidence on Every Vote", + votingPower: "Voting Power", + }, errorPage: { backToDashboard: "Back to dashboard", backToHomepage: "Back to homepage", @@ -552,7 +561,8 @@ export const en = { continue: "Continue", delegate: "Delegate", here: "here", - inProgress: "In Progress", + info: "Info", + inProgress: "In progress", learnMore: "Learn more", loading: "Loading...", myDRepId: "My DRep ID:",