diff --git a/CHANGELOG.md b/CHANGELOG.md index 72b870526..e7ecfa884 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ As a minor extension, we also keep a semantic version for the `UNRELEASED` changes. ## [Unreleased] +- 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) - i18next library added to FE [Issue 80](https://github.com/IntersectMBO/govtool/issues/80) diff --git a/govtool/frontend/src/components/organisms/BgCard.tsx b/govtool/frontend/src/components/organisms/BgCard.tsx new file mode 100644 index 000000000..98f537eee --- /dev/null +++ b/govtool/frontend/src/components/organisms/BgCard.tsx @@ -0,0 +1,106 @@ +import { useCallback, useMemo } from "react"; +import { useNavigate } from "react-router-dom"; +import { Box } from "@mui/material"; + +import { Button, LoadingButton } from "@atoms"; +import { PATHS } from "@consts"; +import { useScreenDimension, useTranslation } from "@hooks"; +import { theme } from "@/theme"; + +import { BgCardProps } from "./types"; + +export const BgCard = ({ + actionButtonLabel, + backButtonLabel, + children, + isLoadingActionButton, + onClickBackButton, + onClickActionButton, + sx, +}: BgCardProps) => { + const { + palette: { boxShadow2 }, + } = theme; + const { isMobile, screenWidth } = useScreenDimension(); + const navigate = useNavigate(); + const { t } = useTranslation(); + + const navigateToDashboard = useCallback( + () => navigate(PATHS.dashboard), + [navigate] + ); + + const renderBackButton = useMemo(() => { + return ( + + ); + }, [isMobile]); + + const renderContinueButton = useMemo(() => { + return ( + + {actionButtonLabel} + + ); + }, [isLoadingActionButton, isMobile]); + + return ( + = 768 ? "center" : "inherit", + display: "flex", + flex: 1, + flexDirection: "column", + marginTop: isMobile ? "97px" : "137px", + }} + > + 768 ? 600 : undefined} + mb={isMobile ? undefined : 3} + pb={isMobile ? undefined : 10} + pt={isMobile ? 6 : 10} + px={isMobile ? 2 : 18.75} + sx={sx} + > + + {children} + + + {renderBackButton} + {renderContinueButton} + + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx index a67efe9b0..3a68ce015 100644 --- a/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx +++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx @@ -1,139 +1,67 @@ -import { Dispatch, SetStateAction, useMemo } from "react"; -import { useNavigate } from "react-router-dom"; -import { Box, Link } from "@mui/material"; +import { Dispatch, SetStateAction, useCallback } from "react"; +import { Trans } from "react-i18next"; +import { Link } from "@mui/material"; -import { Button, Spacer, Typography } from "@atoms"; -import { PATHS } from "@consts"; +import { Typography } from "@atoms"; +import { useScreenDimension, useTranslation } from "@hooks"; import { - useScreenDimension, - useRegisterAsdRepFormContext, - useTranslation, -} from "@hooks"; -import { theme } from "@/theme"; -import { openInNewTab } from "@utils"; + correctAdaFormat, + getItemFromLocalStorage, + openInNewTab, + PROTOCOL_PARAMS_KEY, +} from "@utils"; -import { ControlledField } from "."; +import { BgCard } from "."; -interface Props { +export const RegisterAsdRepStepOne = ({ + setStep, +}: { setStep: Dispatch>; -} - -export const RegisterAsdRepStepOne = ({ setStep }: Props) => { - const navigate = useNavigate(); +}) => { const { t } = useTranslation(); - const { - palette: { boxShadow2 }, - } = theme; - const { isMobile, pagePadding, screenWidth } = useScreenDimension(); - const { control, errors, isValid, showSubmitButton } = - useRegisterAsdRepFormContext(); + const { isMobile } = useScreenDimension(); - const renderCancelButton = useMemo(() => { - return ( - - ); - }, [isMobile]); + const deposit = getItemFromLocalStorage(PROTOCOL_PARAMS_KEY); - const renderConfirmButton = useMemo(() => { - return ( - - ); - }, [isMobile, isValid, showSubmitButton]); + const onClickContinue = useCallback(() => setStep(2), []); + + const openLearMoreAboutDrep = useCallback( + () => openInNewTab("https://sancho.network/roles/drep"), + [] + ); return ( - - - - {t("registration.optional")} - - - {t("registration.headingStepOne")} - - - {t("registration.descriptionStepOne")} - - - - - - openInNewTab( - "https://docs.sanchogov.tools/faqs/how-to-create-a-metadata-anchor" - ) - } - alignSelf={"center"} - mt={5} - sx={{ cursor: "pointer" }} - > - - {t("forms.howCreateUrlAndHash")} - - - - + {t("registration.rolesAndResponsibilitiesTitle")} + + - {isMobile ? renderConfirmButton : renderCancelButton} - - {isMobile ? renderCancelButton : renderConfirmButton} - - + , + ]} + i18nKey={"registration.rolesAndResponsibilitiesDescription"} + values={{ deposit: correctAdaFormat(deposit.drep_deposit) }} + /> + + ); }; diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx new file mode 100644 index 000000000..72baf20bc --- /dev/null +++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepThree.tsx @@ -0,0 +1,50 @@ +import { Dispatch, SetStateAction, useCallback } from "react"; +import { Box } from "@mui/material"; + +import { Typography } from "@atoms"; +import { + useRegisterAsdRepFormContext, + useScreenDimension, + useTranslation, +} from "@hooks"; + +import { BgCard } from "."; + +interface Props { + setStep: Dispatch>; +} + +export const RegisterAsdRepStepThree = ({ setStep }: Props) => { + const { isLoading, submitForm } = useRegisterAsdRepFormContext(); + const { isMobile } = useScreenDimension(); + const { t } = useTranslation(); + + const onClickBackButton = useCallback(() => setStep(2), []); + + return ( + + + + {t("registration.headingStepTwo")} + + + {t("registration.descriptionStepTwo")} + + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx index b735d50b3..2c1a0f37d 100644 --- a/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx +++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepTwo.tsx @@ -1,100 +1,84 @@ -import { Dispatch, SetStateAction, useMemo } from "react"; -import { Box } from "@mui/material"; +import { Dispatch, SetStateAction, useCallback } from "react"; +import { Box, Link } from "@mui/material"; -import { LoadingButton, Button, Typography } from "@atoms"; -import { theme } from "@/theme"; +import { Spacer, Typography } from "@atoms"; import { - useRegisterAsdRepFormContext, useScreenDimension, + useRegisterAsdRepFormContext, useTranslation, } from "@hooks"; +import { openInNewTab } from "@utils"; + +import { BgCard, ControlledField } from "."; interface Props { setStep: Dispatch>; } export const RegisterAsdRepStepTwo = ({ setStep }: Props) => { - const { - palette: { boxShadow2 }, - } = theme; - const { isLoading, submitForm } = useRegisterAsdRepFormContext(); - const { isMobile, pagePadding, screenWidth } = useScreenDimension(); const { t } = useTranslation(); + const { isMobile } = useScreenDimension(); + const { control, errors } = useRegisterAsdRepFormContext(); - const renderBackButton = useMemo(() => { - return ( - - ); - }, [isMobile]); + const onClickContinue = useCallback(() => setStep(3), []); - const renderRegisterButton = useMemo(() => { - return ( - - {t("registration.register")} - - ); - }, [isLoading, isMobile, submitForm]); + const onClickBackButton = useCallback(() => setStep(1), []); return ( - - - - {t("registration.headingStepTwo")} - - - {t("registration.descriptionStepTwo")} - - - - {isMobile ? renderRegisterButton : renderBackButton} - - {isMobile ? renderBackButton : renderRegisterButton} + {t("registration.optional")} + + + {t("registration.addInformationTitle")} + + + {t("registration.addInformationDescription")} + + + + + + + openInNewTab( + "https://docs.sanchogov.tools/faqs/how-to-create-a-metadata-anchor" + ) + } + alignSelf={"center"} + my={5} + sx={{ cursor: "pointer" }} + > + + {t("forms.howCreateUrlAndHash")} + + - + ); }; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index 8378c5d10..1906a2e23 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -1,3 +1,4 @@ +export * from "./BgCard"; export * from "./ChooseStakeKeyPanel"; export * from "./ChooseWalletModal"; export * from "./DashboardCards"; @@ -17,6 +18,7 @@ export * from "./GovernanceActionsToVote"; export * from "./Hero"; export * from "./HomeCards"; export * from "./RegisterAsdRepStepOne"; +export * from "./RegisterAsdRepStepThree"; export * from "./RegisterAsdRepStepTwo"; export * from "./Slider"; export * from "./StatusModal"; diff --git a/govtool/frontend/src/components/organisms/types.ts b/govtool/frontend/src/components/organisms/types.ts new file mode 100644 index 000000000..4c66d325a --- /dev/null +++ b/govtool/frontend/src/components/organisms/types.ts @@ -0,0 +1,11 @@ +import { SxProps } from "@mui/material"; + +export type BgCardProps = { + actionButtonLabel: string; + backButtonLabel?: string; + children: React.ReactNode; + isLoadingActionButton?: boolean; + onClickBackButton?: () => void; + onClickActionButton: () => void; + sx?: SxProps; +}; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index aa6a71f3e..9204175a4 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -269,15 +269,18 @@ export const en = { }, }, registration: { - descriptionStepOne: + addInformationDescription: "You can include extra information about yourself by adding a URL and its hash.", + addInformationTitle: "Add Information", + becomeADRep: "Become a DRep", descriptionStepTwo: "By clicking register you create your DRep ID within your wallet and become a DRep.\n\nOnce the registration has completed your DRep ID will be shown on your dashboard. You will be able to share your DRep ID so that other ada holders can delegate their voting power to you.", - headingStepOne: "Add Information", headingStepTwo: "Confirm DRep registration", optional: "OPTIONAL", register: "Register", - registerAsDRep: "Register as a DRep", + rolesAndResponsibilitiesDescription: + "DReps are fundamental users that govern the Cardano network. This is an important role which requires work and dedication to fulfil.\n\nA DRep is expected to actively participate in governance and act as a representative of other Cardano members in governance matters. Therefore, DReps will be expected to keep abreast of Governance Actions so they can make informed and wise decisions.\n<0>Learn More about DRep.\n\nPlease register as a DRep if you have time to dedicate to making Cardano a better and more well-governed place.\n\nBecoming a DRep will require a refundable deposit of ₳{{deposit}}.\n\nYou will be refunded your deposit when you retire.", + rolesAndResponsibilitiesTitle: "Roles & Responsibilities", }, slider: { showAll: "Show all", @@ -355,6 +358,7 @@ export const en = { }, abstain: "Abstain", back: "Back", + backToDashboard: "Back to dashboard", backToList: "Back to the list", cancel: "Cancel", clear: "Clear", diff --git a/govtool/frontend/src/pages/RegisterAsdRep.tsx b/govtool/frontend/src/pages/RegisterAsdRep.tsx index 79e3b1c88..791c30feb 100644 --- a/govtool/frontend/src/pages/RegisterAsdRep.tsx +++ b/govtool/frontend/src/pages/RegisterAsdRep.tsx @@ -8,6 +8,7 @@ import { DashboardTopNav, Footer, RegisterAsdRepStepOne, + RegisterAsdRepStepThree, RegisterAsdRepStepTwo, } from "@organisms"; import { @@ -37,25 +38,18 @@ export const RegisterAsdRep = () => { return ( - + - - - {step === 1 && } - {step === 2 && } - - + + {step === 1 && } + {step === 2 && } + {step === 3 && } + {isMobile &&