From af1d6f168781827a992aa1db530b8a785a2b1371 Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Tue, 20 Feb 2024 11:44:03 +0100 Subject: [PATCH 1/3] Sole Voter transactions added and UI components unification --- .../frontend/public/icons/ArrowLeftThin.svg | 5 + .../components/molecules/BottomBoxButtons.tsx | 75 ++ .../molecules/CenteredBoxPageWrapper.tsx | 108 ++ .../src/components/molecules/index.ts | 2 + .../components/organisms/DashboardCards.tsx | 24 +- .../components/organisms/DashboardTopNav.tsx | 5 +- .../organisms/GovernanceActionDetailsCard.tsx | 4 +- .../organisms/RegisterAsSoleVoterBox.tsx | 76 ++ .../RegisterAsSoleVoterBoxContent.tsx | 48 + .../organisms/RetireAsSoleVoterBox.tsx | 86 ++ .../organisms/RetireAsSoleVoterBoxContent.tsx | 43 + .../components/organisms/SoleVoterInfo.tsx | 108 -- .../src/components/organisms/index.ts | 7 +- govtool/frontend/src/consts/icons.ts | 1 + govtool/frontend/src/context/wallet.tsx | 112 +- govtool/frontend/src/context/walletUtils.ts | 2 +- govtool/frontend/src/i18n/locales/en.ts | 76 +- .../src/pages/RegisterAsSoleVoter.tsx | 103 +- .../frontend/src/pages/RetireAsSoleVoter.tsx | 178 +--- govtool/frontend/src/utils/localStorage.ts | 2 + govtool/frontend/yarn.lock | 986 +++++++++++------- 21 files changed, 1241 insertions(+), 810 deletions(-) create mode 100644 govtool/frontend/public/icons/ArrowLeftThin.svg create mode 100644 govtool/frontend/src/components/molecules/BottomBoxButtons.tsx create mode 100644 govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx create mode 100644 govtool/frontend/src/components/organisms/RegisterAsSoleVoterBox.tsx create mode 100644 govtool/frontend/src/components/organisms/RegisterAsSoleVoterBoxContent.tsx create mode 100644 govtool/frontend/src/components/organisms/RetireAsSoleVoterBox.tsx create mode 100644 govtool/frontend/src/components/organisms/RetireAsSoleVoterBoxContent.tsx delete mode 100644 govtool/frontend/src/components/organisms/SoleVoterInfo.tsx diff --git a/govtool/frontend/public/icons/ArrowLeftThin.svg b/govtool/frontend/public/icons/ArrowLeftThin.svg new file mode 100644 index 000000000..38c648693 --- /dev/null +++ b/govtool/frontend/public/icons/ArrowLeftThin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/govtool/frontend/src/components/molecules/BottomBoxButtons.tsx b/govtool/frontend/src/components/molecules/BottomBoxButtons.tsx new file mode 100644 index 000000000..c54a6627c --- /dev/null +++ b/govtool/frontend/src/components/molecules/BottomBoxButtons.tsx @@ -0,0 +1,75 @@ +import { useMemo } from "react"; +import { Box } from "@mui/material"; + +import { Button, LoadingButton } from "@atoms"; +import { useScreenDimension, useTranslation } from "@hooks"; + +interface Props { + leftButtonAction: () => void; + rightButtonAction: () => void; + rightButtonIsLoading?: boolean; + leftButtonText?: string; + rightButtonText?: string; +} + +export const BottomBoxButtons = ({ + leftButtonAction, + rightButtonAction, + rightButtonIsLoading, + leftButtonText, + rightButtonText, +}: Props) => { + const { isMobile } = useScreenDimension(); + const { t } = useTranslation(); + + const renderBackButton = useMemo(() => { + return ( + + ); + }, [isMobile]); + + const renderRegisterButton = useMemo(() => { + return ( + + {rightButtonText ?? t("continue")} + + ); + }, [rightButtonIsLoading, isMobile]); + + return ( + + {isMobile ? renderRegisterButton : renderBackButton} + + {isMobile ? renderBackButton : renderRegisterButton} + + ); +}; diff --git a/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx b/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx new file mode 100644 index 000000000..dc9cbe0da --- /dev/null +++ b/govtool/frontend/src/components/molecules/CenteredBoxPageWrapper.tsx @@ -0,0 +1,108 @@ +import { FC, PropsWithChildren } from "react"; +import { Box, Link } from "@mui/material"; + +import { Background, Typography } from "@atoms"; +import { ICONS } from "@consts"; +import { DashboardTopNav } from "@organisms"; +import { useScreenDimension } from "@hooks"; +import { useNavigate } from "react-router-dom"; +import { theme } from "@/theme"; + +interface Props { + pageTitle: string; + backButtonText: string; + backButtonPath: string; + isVotingPowerHidden?: boolean; +} +export const CenteredBoxPageWrapper: FC> = ({ + pageTitle, + backButtonText, + backButtonPath, + isVotingPowerHidden, + children, +}) => { + const { isMobile, screenWidth, pagePadding } = useScreenDimension(); + const navigate = useNavigate(); + const { + palette: { boxShadow2 }, + } = theme; + + return ( + + + + + {isMobile && ( + + + {pageTitle} + + + )} + navigate(backButtonPath)} + > + arrow + + {backButtonText} + + + + + + {children} + + + + + + + ); +}; diff --git a/govtool/frontend/src/components/molecules/index.ts b/govtool/frontend/src/components/molecules/index.ts index 4fc87340a..cb5e9115b 100644 --- a/govtool/frontend/src/components/molecules/index.ts +++ b/govtool/frontend/src/components/molecules/index.ts @@ -1,4 +1,6 @@ export * from "./ActionCard"; +export * from "./BottomBoxButtons"; +export * from "./CenteredBoxPageWrapper"; export * from "./DashboardActionCard"; export * from "./DataActionsBar"; export * from "./DRepInfoCard"; diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx index c91cd44c1..7019e8868 100644 --- a/govtool/frontend/src/components/organisms/DashboardCards.tsx +++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx @@ -1,3 +1,4 @@ +import { useCallback, useMemo, useState } from "react"; import { useNavigate } from "react-router-dom"; import { Box, CircularProgress } from "@mui/material"; import { Trans } from "react-i18next"; @@ -11,7 +12,6 @@ import { useTranslation, } from "@hooks"; import { DashboardActionCard } from "@molecules"; -import { useCallback, useMemo, useState } from "react"; import { correctAdaFormat, formHexToBech32, openInNewTab } from "@utils"; export const DashboardCards = () => { @@ -26,6 +26,7 @@ export const DashboardCards = () => { isDrepLoading, isPendingTransaction, registerTransaction, + soleVoterTransaction, stakeKey, soleVoter, } = useCardano(); @@ -411,8 +412,8 @@ export const DashboardCards = () => { @@ -426,10 +427,18 @@ export const DashboardCards = () => { } firstButtonLabel={t( soleVoter?.isRegistered - ? "dashboard.cards.retire" - : "dashboard.registration.register" + ? "dashboard.soleVoter.retire" + : "dashboard.soleVoter.register" )} firstButtonVariant={soleVoter?.isRegistered ? "outlined" : "contained"} + secondButtonVariant={ + soleVoterTransaction?.transactionHash + ? "outlined" + : soleVoter?.isRegistered + ? "text" + : "outlined" + } + inProgress={!!soleVoterTransaction?.transactionHash} imageURL={IMAGES.soleVoterImage} secondButtonAction={() => openInNewTab( @@ -437,11 +446,10 @@ export const DashboardCards = () => { ) } secondButtonLabel={t("learnMore")} - secondButtonVariant="outlined" title={t( soleVoter?.isRegistered - ? "dashboard.cards.youAreSoleVoterTitle" - : "dashboard.cards.registerAsSoleVoterTitle" + ? "dashboard.soleVoter.youAreSoleVoterTitle" + : "dashboard.soleVoter.registerAsSoleVoterTitle" )} /> {/* REGISTARTION AS SOLE VOTER CARD END*/} diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx index 5bf0a3be4..b02a4c2ae 100644 --- a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx +++ b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx @@ -15,6 +15,7 @@ type DashboardTopNavProps = { imageHeight?: number; title: string; isDrawer?: boolean; + isVotingPowerHidden?: boolean; }; const DRAWER_PADDING = 2; @@ -25,6 +26,7 @@ export const DashboardTopNav = ({ imageSRC, imageWidth, imageHeight, + isVotingPowerHidden, }: DashboardTopNavProps) => { const { isMobile, screenWidth } = useScreenDimension(); const { dRep } = useCardano(); @@ -47,6 +49,7 @@ export const DashboardTopNav = ({ zIndex={100} flex={1} width={"fill-available"} + height={"48px"} > {imageSRC ? ( @@ -66,7 +69,7 @@ export const DashboardTopNav = ({ ) : null} - + {!isVotingPowerHidden && } {isMobile && ( {t("govActions.details")} - {/* {typeof details === "object" && details !== null ? ( + {typeof details === "object" && details !== null ? ( Object.entries(details).map(([key, value]) => { return (
@@ -179,7 +179,7 @@ export const GovernanceActionDetailsCard = ({ > {details} - )} */} + )} - ); - }, [isMobile]); - - const renderRegisterButton = useMemo(() => { - return ( - {}} - sx={{ - borderRadius: 50, - textTransform: "none", - px: 6, - width: isMobile ? "100%" : "auto", - height: 48, - }} - variant="contained" - > - {t("soleVoter.continueToRegister")} - - ); - }, [ - // isLoading, - isMobile, - ]); - - return ( - - - - {t("soleVoter.heading")} - - - openInNewTab("https://sancho.network/")} - sx={{ cursor: "pointer" }} - key="0" - />, - ]} - /> - - - - {isMobile ? renderRegisterButton : renderBackButton} - - {isMobile ? renderBackButton : renderRegisterButton} - - - ); -}; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index 8378c5d10..0fef3de02 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -1,5 +1,6 @@ export * from "./ChooseStakeKeyPanel"; export * from "./ChooseWalletModal"; +export * from "./ControlledField"; export * from "./DashboardCards"; export * from "./DashboardCards"; export * from "./DashboardGovernanceActionDetails"; @@ -19,8 +20,10 @@ export * from "./HomeCards"; export * from "./RegisterAsdRepStepOne"; export * from "./RegisterAsdRepStepTwo"; export * from "./Slider"; +export * from "./RegisterAsSoleVoterBoxContent"; +export * from "./RegisterAsSoleVoterBox"; +export * from "./RetireAsSoleVoterBoxContent"; +export * from "./RetireAsSoleVoterBox"; export * from "./StatusModal"; export * from "./TopNav"; export * from "./VotingPowerModal"; - -export * from "./ControlledField"; diff --git a/govtool/frontend/src/consts/icons.ts b/govtool/frontend/src/consts/icons.ts index c6facbf60..93574c43b 100644 --- a/govtool/frontend/src/consts/icons.ts +++ b/govtool/frontend/src/consts/icons.ts @@ -2,6 +2,7 @@ export const ICONS = { appLogoIcon: "/icons/AppLogo.svg", arrowDownIcon: "/icons/ArrowDown.svg", arrowRightIcon: "/icons/ArrowRight.svg", + arrowLeftThinIcon: "/icons/ArrowLeftThin.svg", checkCircleIcon: "/icons/CheckCircle.svg", closeDrawerIcon: "/icons/CloseIcon.svg", closeIcon: "/icons/Close.svg", diff --git a/govtool/frontend/src/context/wallet.tsx b/govtool/frontend/src/context/wallet.tsx index 584711ab5..e07549a63 100644 --- a/govtool/frontend/src/context/wallet.tsx +++ b/govtool/frontend/src/context/wallet.tsx @@ -66,6 +66,7 @@ import { SANCHO_INFO_KEY, VOTE_TRANSACTION_KEY, checkIsMaintenanceOn, + REGISTER_SOLE_VOTER_TRANSACTION_KEY, } from "@utils"; import { getEpochParams, getTransactionStatus } from "@services"; import { @@ -121,7 +122,7 @@ interface CardanoContext { }: { certBuilder?: CertificatesBuilder; votingBuilder?: VotingBuilder; - type?: "delegation" | "registration" | "vote"; + type?: "delegation" | "registration" | "soleVoterRegistration" | "vote"; proposalId?: string; registrationType?: DRepActionType; }) => Promise; @@ -144,6 +145,9 @@ interface CardanoContext { ) => Promise; delegateTransaction: TransactionHistoryItem; registerTransaction: TransactionHistoryItem & { type: DRepActionType }; + soleVoterTransaction: TransactionHistoryItem & { + type: Omit; + }; delegateTo: string; voteTransaction: TransactionHistoryItem & { proposalId: string }; isPendingTransaction: () => boolean; @@ -206,6 +210,9 @@ function CardanoProvider(props: Props) { const [registerTransaction, setRegisterTransaction] = useState< TransactionHistoryItem & { type: DRepActionType } >({ time: undefined, transactionHash: "", type: "" }); + const [soleVoterTransaction, setSoleVoterTransaction] = useState< + TransactionHistoryItem & { type: Omit } + >({ time: undefined, transactionHash: "", type: "" }); const [voteTransaction, setVoteTransaction] = useState< { proposalId: string } & TransactionHistoryItem >({ time: undefined, transactionHash: "", proposalId: "" }); @@ -217,6 +224,7 @@ function CardanoProvider(props: Props) { const isPendingTransaction = useCallback(() => { if ( registerTransaction?.transactionHash || + soleVoterTransaction?.transactionHash || delegateTransaction?.transactionHash || voteTransaction?.transactionHash ) { @@ -241,6 +249,7 @@ function CardanoProvider(props: Props) { delegateTransaction?.transactionHash, openModal, registerTransaction?.transactionHash, + soleVoterTransaction?.transactionHash, voteTransaction?.transactionHash, ]); @@ -251,6 +260,11 @@ function CardanoProvider(props: Props) { const registerTransaction = JSON.parse( getItemFromLocalStorage(REGISTER_TRANSACTION_KEY + `_${stakeKey}`) ); + const soleVoterTransaction = JSON.parse( + getItemFromLocalStorage( + REGISTER_SOLE_VOTER_TRANSACTION_KEY + `_${stakeKey}` + ) + ); const voteTransaction = JSON.parse( getItemFromLocalStorage(VOTE_TRANSACTION_KEY + `_${stakeKey}`) ); @@ -263,6 +277,9 @@ function CardanoProvider(props: Props) { if (registerTransaction?.transactionHash) { setRegisterTransaction(registerTransaction); } + if (soleVoterTransaction?.transactionHash) { + setSoleVoterTransaction(soleVoterTransaction); + } if (voteTransaction?.transactionHash) { setVoteTransaction(voteTransaction); } @@ -383,6 +400,71 @@ function CardanoProvider(props: Props) { let interval = setInterval(checkRegisterTransaction, REFRESH_TIME); checkRegisterTransaction(); } + if (soleVoterTransaction?.transactionHash) { + const checkRegisterTransaction = async () => { + const resetRegisterTransaction = () => { + clearInterval(interval); + removeItemFromLocalStorage( + REGISTER_SOLE_VOTER_TRANSACTION_KEY + `_${stakeKey}` + ); + setSoleVoterTransaction({ + time: undefined, + transactionHash: "", + type: "", + }); + }; + const status = await getTransactionStatus( + soleVoterTransaction.transactionHash + ); + if (status.transactionConfirmed) { + if (isEnabled) { + await setLimitedRegistrationInterval( + 3000, + 10, + dRepID, + soleVoterTransaction.type, + setDRep + ).then((isRegistered) => { + if (soleVoterTransaction.type === "registration") { + if (isRegistered) { + addSuccessAlert(t("alerts.soleVoterRegistration.success")); + } else { + addWarningAlert( + t("alerts.soleVoterRegistration.refreshPage") + ); + } + } else if (soleVoterTransaction.type === "retirement") { + if (!isRegistered) { + addSuccessAlert(t("alerts.soleVoterRetirement.success")); + } else { + addWarningAlert(t("alerts.soleVoterRetirement.refreshPage")); + } + } + }); + } + resetRegisterTransaction(); + } + if ( + new Date().getTime() - + new Date(soleVoterTransaction?.time).getTime() > + TIME_TO_EXPIRE_TRANSACTION + ) { + resetRegisterTransaction(); + if (isEnabled) + addErrorAlert( + t( + `alerts.${ + soleVoterTransaction.type === "retirement" + ? "retirement.failed" + : "registration.failed" + }` + ) + ); + } + }; + let interval = setInterval(checkRegisterTransaction, REFRESH_TIME); + checkRegisterTransaction(); + } if (voteTransaction?.transactionHash) { const checkVoteTransaction = async () => { const resetVoteTransaction = () => { @@ -416,11 +498,17 @@ function CardanoProvider(props: Props) { isEnabled && (voteTransaction?.transactionHash || registerTransaction?.transactionHash || + soleVoterTransaction?.transactionHash || delegateTransaction?.transactionHash) ) { addWarningAlert(t("alerts.transactionInProgress"), 10000); } - }, [delegateTransaction, registerTransaction, voteTransaction]); + }, [ + delegateTransaction, + registerTransaction, + soleVoterTransaction, + voteTransaction, + ]); const getChangeAddress = async (enabledApi: CardanoApiWallet) => { try { @@ -721,7 +809,7 @@ function CardanoProvider(props: Props) { }: { certBuilder?: CertificatesBuilder; votingBuilder?: VotingBuilder; - type?: "delegation" | "registration" | "vote"; + type?: "delegation" | "registration" | "soleVoterRegistration" | "vote"; proposalId?: string; registrationType?: DRepActionType; }) => { @@ -844,6 +932,21 @@ function CardanoProvider(props: Props) { }) ); } + if (type === "soleVoterRegistration" && registrationType !== "update") { + setSoleVoterTransaction({ + time: new Date(), + transactionHash: resultHash, + type: registrationType ?? "", + }); + setItemToLocalStorage( + REGISTER_SOLE_VOTER_TRANSACTION_KEY + `_${stakeKey}`, + JSON.stringify({ + time: new Date(), + transactionHash: resultHash, + type: registrationType, + }) + ); + } if (type === "delegation") { setDelegateTransaction({ time: new Date(), @@ -894,6 +997,7 @@ function CardanoProvider(props: Props) { walletApi, getUtxos, registerTransaction.transactionHash, + soleVoterTransaction.transactionHash, delegateTransaction.transactionHash, voteTransaction.transactionHash, stakeKey, @@ -1143,6 +1247,7 @@ function CardanoProvider(props: Props) { buildVoteDelegationCert, delegateTransaction, registerTransaction, + soleVoterTransaction, delegateTo, voteTransaction, isPendingTransaction, @@ -1177,6 +1282,7 @@ function CardanoProvider(props: Props) { buildVoteDelegationCert, delegateTransaction, registerTransaction, + soleVoterTransaction, delegateTo, voteTransaction, isPendingTransaction, diff --git a/govtool/frontend/src/context/walletUtils.ts b/govtool/frontend/src/context/walletUtils.ts index 5bf0be32a..e722e4c84 100644 --- a/govtool/frontend/src/context/walletUtils.ts +++ b/govtool/frontend/src/context/walletUtils.ts @@ -6,7 +6,7 @@ export const setLimitedRegistrationInterval = ( intervalTime: number, attemptsNumber: number, dRepID: string, - transactionType: DRepActionType, + transactionType: DRepActionType | Omit, setDRep: (key: undefined | DRepInfo) => void ): Promise => { return new Promise(async (resolve) => { diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index a9816f8b4..889fa5be4 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -23,6 +23,16 @@ export const en = { "You have successfully retired from being a DRep! Please refresh the page.", success: "You have successfully retired from being a DRep!", }, + soleVoterRegistration: { + refreshPage: + "You have successfully registered as a Sole Voter! Please refresh the page.", + success: "You have successfully registered as a Sole Voter!", + }, + soleVoterRetirement: { + refreshPage: + "You have successfully retired from being a Sole Voter! Please refresh the page.", + success: "You have successfully retired from being a SoleVoter!", + }, voting: { failed: "Vote transaction failed", success: "You have successfully voted!", @@ -37,11 +47,8 @@ export const en = { headingTwo: "See Active Governance Actions", delegation: { changeDelegation: "Change delegation", - connectToDelegate: "Connect to delegate", delegateOwnPower: "If you want to delegate your own voting power of ₳{{ada}}.", - description: - "If you want to delegate to a DRep or select a default option.", dRepDelegatedTo: "DRep you delegated to", toDRep: "You have delegated your voting power of ₳{{ada}} to a selected DRep.", @@ -72,23 +79,11 @@ export const en = { title: "Governance Actions", view: "View governance actions", }, - cards: { - retire: "Retire", - youAreSoleVoterTitle: "You are a Sole Voter", - youAreSoleVoterDescription: - "Your Voting Power of ₳{{votingPower}} can be used to vote.", - registerAsSoleVoterTitle: "Become a Sole Voter", - registerAsSoleVoterDescription: - "Vote on Governance Actions using your own voting power of ₳{{votingPower}}.", - }, registration: { changeMetadata: "Change metadata", - connectToRegister: "Connect to register", dRepRegistration: "DRep Registration", dRepRetirement: "DRep Retirement", dRepUpdate: "DRep Update", - description: - "If you want to directly participate in voting and have other ada holders delegate their voting power to you.", holdersCanDelegate: "Ada holders can delegate their voting power to you.", ifYouWant: @@ -105,24 +100,15 @@ export const en = { "The retirement process is ongoing. This may take several minutes.", youAreRegistered: "You are Registered as a DRep", }, - }, - home: { - cards: { - delegateDescription: "Find a DRep to vote on your behalf.", - delegateFirstButtonLabel: "View DRep Direcotry", - delegateTitle: "Delegate your Voting Power", - governaneActionsDescription: - "See all the Governance Actions submitted on chain. ", - governanceActionsFirstButtonLabel: "View Governance Actions", - governaneActionsTitle: "View Governance Actions", - registerAsDRepDescription: - "Accept delegated voting power from other ADA holders, and combine it with your own voting power. Vote with the accumulated Power on Governance Actions.", - registerAsDRepFirstButtonLabel: "Connect to Register", - registerAsDRepTitle: "Become a DRep", + soleVoter: { + register: "Register", registerAsSoleVoterDescription: - "Vote on Governance Actions using your own voting power", - registerAsSoleVoterFirstButtonLabel: "Connect to Register", + "Vote on Governance Actions using your own voting power of ₳{{votingPower}}.", registerAsSoleVoterTitle: "Become a Sole Voter", + retire: "Retire", + youAreSoleVoterDescription: + "Your Voting Power of ₳{{votingPower}} can be used to vote.", + youAreSoleVoterTitle: "You are a Sole Voter", }, }, delegation: { @@ -246,6 +232,25 @@ export const en = { }, headline: "SanchoNet \n Governance Tool", }, + home: { + cards: { + delegateDescription: "Find a DRep to vote on your behalf.", + delegateFirstButtonLabel: "View DRep Direcotry", + delegateTitle: "Delegate your Voting Power", + governaneActionsDescription: + "See all the Governance Actions submitted on chain. ", + governanceActionsFirstButtonLabel: "View Governance Actions", + governaneActionsTitle: "View Governance Actions", + registerAsDRepDescription: + "Accept delegated voting power from other ADA holders, and combine it with your own voting power. Vote with the accumulated Power on Governance Actions.", + registerAsDRepFirstButtonLabel: "Connect to Register", + registerAsDRepTitle: "Become a DRep", + registerAsSoleVoterDescription: + "Vote on Governance Actions using your own voting power", + registerAsSoleVoterFirstButtonLabel: "Connect to Register", + registerAsSoleVoterTitle: "Become a Sole Voter", + }, + }, menu: { faqs: "FAQs", guides: "Guides", @@ -317,13 +322,12 @@ export const en = { soleVoter: { retireSoleVoter: "Retire as a Sole Voter", becomeSoleVoter: "Become a Sole Voter", - continueToRegister: "Continue to register", - description: - "A Sole Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of ADA in their connected wallet. <0>Learn More about Sole Voter.\n\nBecoming a Sole Voter will require a refundable deposit of ₳2.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)", - heading: "What this Means", + registerDescription: + "A Sole Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of ADA in their connected wallet. <0>Learn More about Sole Voter.\n\nBecoming a Sole Voter will require a refundable deposit of ₳{{deposit}}.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)", + registerHeading: "What this Means", retirementHeading: "What Retirement Means", retirementDescription: - "By Retiring you are giving up your Voting Power. You will not be able to vote on any Governance Actions. Your deposit of {{deposit}} ADA will be refunded.\n\nYou can at any time in the future re-register to become a Sole Voter, or you can delegate your Voting Power to someone else, or become a DRep.\n\n<0>These options are listed in our Guides here: <1>Voting options and Roles", + "By Retiring you are giving up your Voting Power. You will not be able to vote on any Governance Actions. Your deposit of {{deposit}} ADA will be refunded.\n\nYou can at any time in the future re-register to become a Sole Voter, or you can delegate your Voting Power to someone else, or become a DRep.\n\nThese options are listed in our Guides here: <0>Voting options and Roles", }, system: { sanchoNet: "SanchoNet", diff --git a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx index 370a5fefc..ea7018a85 100644 --- a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx +++ b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx @@ -1,16 +1,13 @@ import { useEffect } from "react"; -import { Box, Link } from "@mui/material"; - -import { Background, Typography } from "@atoms"; -import { ICONS, PATHS } from "@consts"; -import { DashboardTopNav, Footer } from "@organisms"; -import { useScreenDimension, useTranslation } from "@hooks"; import { useNavigate } from "react-router-dom"; + +import { PATHS } from "@consts"; +import { RegisterAsSoleVoterBox } from "@organisms"; +import { useTranslation } from "@hooks"; import { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils/localStorage"; -import { SoleVoterInfo } from "@/components/organisms/SoleVoterInfo"; +import { CenteredBoxPageWrapper } from "@molecules"; export const RegisterAsSoleVoter = () => { - const { isMobile, screenWidth } = useScreenDimension(); const navigate = useNavigate(); const { t } = useTranslation(); @@ -24,87 +21,13 @@ export const RegisterAsSoleVoter = () => { }, []); return ( - - - - - - {isMobile && ( - - - {t("soleVoter.becomeSoleVoter")} - - - )} - navigate(PATHS.dashboard)} - > - arrow - - {t("backToDashboard")} - - - - - {isMobile &&