From e58ccbf1ce9f3ccdef9bfc8ea4251451485c426e Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Wed, 14 Feb 2024 09:37:03 +0100 Subject: [PATCH 01/26] Sole voter information page, without footer --- govtool/frontend/src/App.tsx | 5 + .../components/organisms/SoleVoterInfo.tsx | 108 +++++++++++++++++ govtool/frontend/src/consts/paths.ts | 1 + govtool/frontend/src/i18n/locales/en.ts | 8 ++ .../src/pages/RegisterAsSoleVoter.tsx | 110 ++++++++++++++++++ 5 files changed, 232 insertions(+) create mode 100644 govtool/frontend/src/components/organisms/SoleVoterInfo.tsx create mode 100644 govtool/frontend/src/pages/RegisterAsSoleVoter.tsx diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx index 91dab6356..d48e4d55a 100644 --- a/govtool/frontend/src/App.tsx +++ b/govtool/frontend/src/App.tsx @@ -30,6 +30,7 @@ import { } from "@utils"; import { SetupInterceptors } from "./services"; import { useGetDRepInfo, useWalletConnectionListener } from "./hooks"; +import { RegisterAsSoleVoter } from "./pages/RegisterAsSoleVoter"; export default function App() { const { enable, setDRep, setIsDrepLoading } = useCardano(); @@ -115,6 +116,10 @@ export default function App() { } /> } /> + } + /> } /> } /> } /> diff --git a/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx new file mode 100644 index 000000000..4eb34dafe --- /dev/null +++ b/govtool/frontend/src/components/organisms/SoleVoterInfo.tsx @@ -0,0 +1,108 @@ +import { useMemo } from "react"; +import { Box, Link } from "@mui/material"; + +import { LoadingButton, Button, Typography } from "@atoms"; +import { theme } from "@/theme"; +import { useScreenDimension, useTranslation } from "@hooks"; +import { Trans } from "react-i18next"; +import { openInNewTab } from "@/utils"; +import { useNavigate } from "react-router-dom"; +import { PATHS } from "@consts"; + +export const SoleVoterInfo = () => { + const { + palette: { boxShadow2 }, + } = theme; + const { isMobile, pagePadding, screenWidth } = useScreenDimension(); + const navigate = useNavigate(); + const { t } = useTranslation(); + + const renderBackButton = useMemo(() => { + return ( + + ); + }, [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/consts/paths.ts b/govtool/frontend/src/consts/paths.ts index 645f4e695..8af3a6381 100644 --- a/govtool/frontend/src/consts/paths.ts +++ b/govtool/frontend/src/consts/paths.ts @@ -16,6 +16,7 @@ export const PATHS = { faqs: "/faqs", delegateTodRep: "/delegate", registerAsdRep: "/register", + registerAsSoleVoter: "/register_sole_voter", stakeKeys: "/stake_keys", updateMetadata: "/update_metadata", }; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 9204175a4..68cd48743 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -286,6 +286,13 @@ export const en = { showAll: "Show all", viewAll: "View all", }, + soleVoter: { + 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", + }, system: { sanchoNet: "SanchoNet", sanchoNetIsBeta: @@ -360,6 +367,7 @@ export const en = { back: "Back", backToDashboard: "Back to dashboard", backToList: "Back to the list", + backToDashboard: "Back to dashboard", cancel: "Cancel", clear: "Clear", confirm: "Confirm", diff --git a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx new file mode 100644 index 000000000..370a5fefc --- /dev/null +++ b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx @@ -0,0 +1,110 @@ +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 { WALLET_LS_KEY, getItemFromLocalStorage } from "@/utils/localStorage"; +import { SoleVoterInfo } from "@/components/organisms/SoleVoterInfo"; + +export const RegisterAsSoleVoter = () => { + const { isMobile, screenWidth } = useScreenDimension(); + const navigate = useNavigate(); + const { t } = useTranslation(); + + useEffect(() => { + if ( + !getItemFromLocalStorage(`${WALLET_LS_KEY}_stake_key`) || + !getItemFromLocalStorage(`${WALLET_LS_KEY}_name`) + ) { + navigate(PATHS.home); + } + }, []); + + return ( + + + + + + {isMobile && ( + + + {t("soleVoter.becomeSoleVoter")} + + + )} + navigate(PATHS.dashboard)} + > + arrow + + {t("backToDashboard")} + + + + + {isMobile &&