[#382] add create governance action information screen

govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx

@@ -26,7 +26,7 @@ export const ChooseGovernanceActionType = ({
   const isContinueButtonDisabled = !watch("type");
 
   const onClickContinue = () => {
-    setStep(2);
+    setStep(3);
   };
 
   // TODO: Add tooltips when they will be available

govtool/frontend/src/components/organisms/CreateGovernanceActionForm.tsx

@@ -44,11 +44,11 @@ export const CreateGovernanceActionForm = ({
   );
 
   const onClickContinue = () => {
-    setStep(3);
+    setStep(4);
   };
 
   const onClickBack = () => {
-    setStep(1);
+    setStep(2);
   };
 
   const renderGovernanceActionField = () => {

govtool/frontend/src/components/organisms/RegisterAsdRepStepOne.tsx

@@ -27,7 +27,7 @@ export const RegisterAsdRepStepOne = ({
 
   const onClickContinue = useCallback(() => setStep(2), []);
 
-  const openLearMoreAboutDrep = useCallback(
+  const openLearnMoreAboutDrep = useCallback(
     () => openInNewTab("https://sancho.network/roles/drep"),
     []
   );
@@ -57,7 +57,7 @@ export const RegisterAsdRepStepOne = ({
           components={[
             <Link
               key="1"
-              onClick={openLearMoreAboutDrep}
+              onClick={openLearnMoreAboutDrep}
               sx={{ cursor: "pointer" }}
             />,
           ]}

govtool/frontend/src/components/organisms/WhatGovernanceActionIsAbout.tsx

@@ -0,0 +1,60 @@
+import { Dispatch, SetStateAction, useCallback } from "react";
+import { Trans } from "react-i18next";
+
+import { Typography } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
+import {
+  correctAdaFormat,
+  getItemFromLocalStorage,
+  PROTOCOL_PARAMS_KEY,
+} from "@utils";
+
+import { BgCard } from ".";
+
+type WhatGovernanceActionIsAboutProps = {
+  onClickCancel: () => void;
+  setStep: Dispatch<SetStateAction<number>>;
+};
+
+export const WhatGovernanceActionIsAbout = ({
+  setStep,
+  onClickCancel,
+}: WhatGovernanceActionIsAboutProps) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+
+  const deposit = getItemFromLocalStorage(PROTOCOL_PARAMS_KEY);
+
+  const onClickContinue = useCallback(() => setStep(2), []);
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      backButtonLabel={t("cancel")}
+      onClickActionButton={onClickContinue}
+      onClickBackButton={onClickCancel}
+      sx={{ paddingBottom: isMobile ? undefined : 3 }}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.creatingAGovernanceAction")}
+      </Typography>
+      <Typography
+        fontWeight={400}
+        sx={{
+          pb: isMobile ? 6 : 4,
+          pt: 4,
+          textAlign: "center",
+          whiteSpace: "pre-line",
+        }}
+        variant="body1"
+      >
+        <Trans
+          i18nKey="createGovernanceAction.creatingAGovernanceActionDescription"
+          values={{
+            deposit: correctAdaFormat(deposit.gov_action_deposit),
+          }}
+        />
+      </Typography>
+    </BgCard>
+  );
+};

govtool/frontend/src/components/organisms/index.ts

@@ -21,14 +21,15 @@ export * from "./GovernanceActionDetailsCard";
 export * from "./GovernanceActionsToVote";
 export * from "./Hero";
 export * from "./HomeCards";
+export * from "./WhatGovernanceActionIsAbout";
+export * from "./RegisterAsSoleVoterBox";
+export * from "./RegisterAsSoleVoterBoxContent";
 export * from "./RegisterAsdRepStepOne";
 export * from "./RegisterAsdRepStepThree";
 export * from "./RegisterAsdRepStepTwo";
-export * from "./Slider";
-export * from "./RegisterAsSoleVoterBoxContent";
-export * from "./RegisterAsSoleVoterBox";
-export * from "./RetireAsSoleVoterBoxContent";
 export * from "./RetireAsSoleVoterBox";
+export * from "./RetireAsSoleVoterBoxContent";
+export * from "./Slider";
 export * from "./StatusModal";
 export * from "./TopNav";
 export * from "./VotingPowerModal";

govtool/frontend/src/i18n/locales/en.ts

@@ -133,6 +133,10 @@ export const en = {
       formTitle: "Governance Action details",
       references: "References and Supporting Information",
       title: "Create a Governance Action",
+      creatingAGovernanceAction:
+        "Creating a Governance Action: What you need to know",
+      creatingAGovernanceActionDescription:
+        "To create a Governance Action, you will need to:\n\n• Fill out a form with the relevant data\n• Pay a refundable deposit of <strong>₳{{deposit}}</strong>\n• Store the metadata of your Governance Action at your own expense.\n\nYour deposit will be refunded to your wallet when the Governance Action is either enacted or expired.\n\nThe deposit will not affect your Voting Power.",
     },
     delegation: {
       description:

govtool/frontend/src/pages/CreateGovernanceAction.tsx

@@ -17,6 +17,7 @@ import {
   CreateGovernanceActionForm,
   DashboardTopNav,
   Footer,
+  WhatGovernanceActionIsAbout,
 } from "@organisms";
 import { checkIsWalletConnected } from "@utils";
 
@@ -73,12 +74,18 @@ export const CreateGovernanceAction = () => {
         />
         <FormProvider {...methods}>
           {step === 1 && (
+            <WhatGovernanceActionIsAbout
+              onClickCancel={onClickBackToDashboard}
+              setStep={setStep}
+            />
+          )}
+          {step === 2 && (
             <ChooseGovernanceActionType
               onClickCancel={onClickBackToDashboard}
               setStep={setStep}
             />
           )}
-          {step === 2 && <CreateGovernanceActionForm setStep={setStep} />}
+          {step === 3 && <CreateGovernanceActionForm setStep={setStep} />}
         </FormProvider>
         {isMobile && <Footer />}
       </Box>