diff --git a/govtool/frontend/src/components/organisms/BgCard.tsx b/govtool/frontend/src/components/organisms/BgCard.tsx
new file mode 100644
index 000000000..0432965fa
--- /dev/null
+++ b/govtool/frontend/src/components/organisms/BgCard.tsx
@@ -0,0 +1,137 @@
+import { useCallback, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box, Link } from "@mui/material";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+
+import { Button, Typography } from "@atoms";
+import { PATHS } from "@consts";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { theme } from "@/theme";
+
+import { BgCardProps } from "./types";
+
+export const BgCard = ({
+ actionButtonLabel,
+ children,
+ onClickBackButton,
+ onClickActionButton,
+ sx,
+ title,
+}: 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 (
+
+ );
+ }, [isMobile]);
+
+ return (
+ = 768 ? "center" : "inherit",
+ marginTop: screenWidth < 1440 ? "97px" : "137px",
+ display: screenWidth < 1440 ? "flex" : "grid",
+ ...(screenWidth < 1440 && {
+ flexDirection: "column",
+ }),
+ ...(screenWidth >= 1440 && { gridTemplateColumns: "1fr auto 1fr" }),
+ }}
+ >
+ {isMobile && (
+
+
+ {title}
+
+
+ )}
+
+
+
+ {t("backToDashboard")}
+
+
+ 768 ? 600 : undefined}
+ px={isMobile ? 2 : 18.75}
+ pt={isMobile ? 6 : 10}
+ pb={3}
+ sx={sx}
+ >
+
+ {children}
+
+
+ {isMobile ? renderContinueButton : renderBackButton}
+
+ {isMobile ? renderBackButton : renderContinueButton}
+
+
+
+ );
+};
diff --git a/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx b/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx
index a67efe9b0..e9cf6e093 100644
--- a/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx
+++ b/govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx
@@ -1,139 +1,61 @@
-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), [setStep]);
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}
-
-
+ openInNewTab("https://sancho.network/")}
+ sx={{ cursor: "pointer" }}
+ />,
+ ]}
+ i18nKey={"registration.rolesAndResponsibilitiesDescription"}
+ values={{ deposit: correctAdaFormat(deposit) }}
+ />
+
+
);
};
diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts
index 8378c5d10..63712a617 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";
diff --git a/govtool/frontend/src/components/organisms/types.ts b/govtool/frontend/src/components/organisms/types.ts
new file mode 100644
index 000000000..36adf5698
--- /dev/null
+++ b/govtool/frontend/src/components/organisms/types.ts
@@ -0,0 +1,10 @@
+import { SxProps } from "@mui/material";
+
+export type BgCardProps = {
+ actionButtonLabel: string;
+ children: React.ReactNode;
+ onClickBackButton?: () => void;
+ onClickActionButton: () => void;
+ sx?: SxProps;
+ title: string;
+};
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
index aa6a71f3e..511b8211d 100644
--- a/govtool/frontend/src/i18n/locales/en.ts
+++ b/govtool/frontend/src/i18n/locales/en.ts
@@ -269,15 +269,15 @@ export const en = {
},
},
registration: {
- descriptionStepOne:
- "You can include extra information about yourself by adding a URL and its hash.",
+ rolesAndResponsibilitiesTitle: "Roles & Responsibilities",
+ 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.",
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",
+ becomeADRep: "Become a DRep",
},
slider: {
showAll: "Show all",
@@ -355,6 +355,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..ad5332273 100644
--- a/govtool/frontend/src/pages/RegisterAsdRep.tsx
+++ b/govtool/frontend/src/pages/RegisterAsdRep.tsx
@@ -37,25 +37,17 @@ export const RegisterAsdRep = () => {
return (
-
+
-
-
- {step === 1 && }
- {step === 2 && }
-
-
+
+ {step === 1 && }
+ {step === 2 && }
+
{isMobile && }