[#379] create the propose a governance action card

IntersectMBO · Mar 7, 2024 · 89aae6c · 89aae6c
1 parent c4daf59
commit 89aae6c
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 88 deletions.
diff --git a/govtool/frontend/public/images/ProposeGovAction.png b/govtool/frontend/public/images/ProposeGovAction.png
diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
@@ -57,8 +57,8 @@ export default function App() {
   const checkTheWalletIsActive = useCallback(() => {
     const hrefCondition =
       window.location.pathname === PATHS.home ||
-      window.location.pathname === PATHS.governance_actions ||
-      window.location.pathname === PATHS.governance_actions_action;
+      window.location.pathname === PATHS.governanceActions ||
+      window.location.pathname === PATHS.governanceActionsAction;
 
     const walletName = getItemFromLocalStorage(`${WALLET_LS_KEY}_name`);
     if (window.cardano) {
@@ -90,34 +90,34 @@ export default function App() {
       <Routes>
         <Route path={PATHS.home} element={<Home />} />
         <Route
-          path={PATHS.governance_actions}
+          path={PATHS.governanceActions}
           element={<GovernanceActions />}
         ></Route>
         <Route
-          path={PATHS.governance_actions_category}
+          path={PATHS.governanceActionsCategory}
           element={<GovernanceActionsCategory />}
         />
         <Route
-          path={PATHS.governance_actions_action}
+          path={PATHS.governanceActionsAction}
           element={<GovernanceActionDetails />}
         />
         <Route element={<Dashboard />}>
           <Route path={PATHS.dashboard} element={<DashboardCards />} />
           <Route
-            path={PATHS.dashboard_governance_actions}
+            path={PATHS.dashboardGovernanceActions}
             element={<DashboardGovernanceActions />}
           />
           <Route
-            path={PATHS.dashboard_governance_actions_action}
+            path={PATHS.dashboardGovernanceActionsAction}
             element={<DashboardGovernanceActionDetails />}
           />
           <Route
-            path={PATHS.dashboard_governance_actions_category}
+            path={PATHS.dashboardGovernanceActionsCategory}
             element={<DashboardGovernanceActionsCategory />}
           />
         </Route>
         <Route
-          path={PATHS.create_governance_action}
+          path={PATHS.createGovernanceAction}
           element={<CreateGovernanceAction />}
         />
         <Route path={PATHS.delegateTodRep} element={<DelegateTodRep />} />

diff --git a/govtool/frontend/src/components/atoms/ScrollToManage.tsx b/govtool/frontend/src/components/atoms/ScrollToManage.tsx
@@ -25,8 +25,8 @@ export const ScrollToManage = () => {
       window.scrollTo(0, pathMap.get(pathname)!);
     } else {
       if (
-        pathname === PATHS.dashboard_governance_actions ||
-        pathname === PATHS.governance_actions
+        pathname === PATHS.dashboardGovernanceActions ||
+        pathname === PATHS.governanceActions
       ) {
         pathMap.set(pathname, 0);
       }
@@ -37,8 +37,8 @@ export const ScrollToManage = () => {
   useEffect(() => {
     const fn = debounce(() => {
       if (
-        pathname === PATHS.dashboard_governance_actions ||
-        pathname === PATHS.governance_actions
+        pathname === PATHS.dashboardGovernanceActions ||
+        pathname === PATHS.governanceActions
       ) {
         pathMap.set(pathname, window.scrollY);
       }

diff --git a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
@@ -255,7 +255,7 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
           )}-change-your-vote`}
           onClick={() =>
             navigate(
-              PATHS.dashboard_governance_actions_action.replace(
+              PATHS.dashboardGovernanceActionsAction.replace(
                 ":proposalId",
                 getFullGovActionId(proposal.txHash, proposal.index)
               ),

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -503,15 +503,15 @@ export const DashboardCards = () => {
             "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
           )
         }
-        secondButtonVariant={"outlined"}
+        secondButtonVariant="outlined"
         imageURL={IMAGES.soleVoterImage}
       />
       {/* REGISTARTION AS SOLE VOTER CARD END*/}
       {/* GOV ACTIONS LIST CARD */}
       <DashboardActionCard
         dataTestidFirstButton="view-governance-actions-button"
         description={t("dashboard.govActions.description")}
-        firstButtonAction={() => navigate(PATHS.dashboard_governance_actions)}
+        firstButtonAction={() => navigate(PATHS.dashboardGovernanceActions)}
         firstButtonLabel={t(
           `dashboard.govActions.${
             voter?.isRegisteredAsDRep ? "reviewAndVote" : "view"
@@ -521,6 +521,31 @@ export const DashboardCards = () => {
         title={t("dashboard.govActions.title")}
       />
       {/* GOV ACTIONS LIST CARD END*/}
+      {/* GOV ACTIONS LIST CARD */}
+      <DashboardActionCard
+        dataTestidFirstButton="propose-governance-actions-button"
+        description={t("dashboard.proposeGovernanceAction.description")}
+        // TODO: add isPendingGovernanceAction to the context
+        // inProgress={isPendingGovernanceAction}
+        firstButtonAction={() => navigate(PATHS.createGovernanceAction)}
+        firstButtonLabel={t(
+          `dashboard.proposeGovernanceAction.${
+            // TODO: add isPendingGovernanceAction to the context
+            // isPendingGovernanceAction ? "propose" : "viewGovernanceActions"
+            `propose`
+          }`
+        )}
+        secondButtonLabel={t("learnMore")}
+        secondButtonAction={() =>
+          openInNewTab(
+            "https://docs.sanchogov.tools/faqs/what-is-a-governance-action"
+          )
+        }
+        secondButtonVariant="outlined"
+        imageURL={IMAGES.proposeGovActionImage}
+        title={t("dashboard.proposeGovernanceAction.title")}
+      />
+      {/* GOV ACTIONS LIST CARD END*/}
     </Box>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
@@ -46,7 +46,7 @@ export const DashboardGovernanceActionDetails = () => {
   const breadcrumbs = [
     <NavLink
       key="1"
-      to={PATHS.dashboard_governance_actions}
+      to={PATHS.dashboardGovernanceActions}
       style={{ textDecorationColor: "#0033AD" }}
     >
       <Typography color="primary" fontWeight={300} fontSize={12}>
@@ -87,10 +87,10 @@ export const DashboardGovernanceActionDetails = () => {
         onClick={() =>
           navigate(
             state && state.openedFromCategoryPage
-              ? generatePath(PATHS.dashboard_governance_actions_category, {
+              ? generatePath(PATHS.dashboardGovernanceActionsCategory, {
                   category: state.type,
                 })
-              : PATHS.dashboard_governance_actions,
+              : PATHS.dashboardGovernanceActions,
             {
               state: {
                 isVotedListOnLoad: state && state.vote ? true : false,

diff --git a/govtool/frontend/src/components/organisms/GovernanceActionsToVote.tsx b/govtool/frontend/src/components/organisms/GovernanceActionsToVote.tsx
@@ -113,15 +113,15 @@ export const GovernanceActionsToVote = ({
                               : navigate(
                                   onDashboard
                                     ? generatePath(
-                                        PATHS.dashboard_governance_actions_action,
+                                        PATHS.dashboardGovernanceActionsAction,
                                         {
                                           proposalId: getFullGovActionId(
                                             item.txHash,
                                             item.index
                                           ),
                                         }
                                       )
-                                    : PATHS.governance_actions_action.replace(
+                                    : PATHS.governanceActionsAction.replace(
                                         ":proposalId",
                                         getFullGovActionId(
                                           item.txHash,

diff --git a/govtool/frontend/src/components/organisms/HomeCards.tsx b/govtool/frontend/src/components/organisms/HomeCards.tsx
@@ -35,12 +35,19 @@ export const HomeCards = () => {
   );
 
   const onClickLearnMoreAboutSoleVoterRegistration = useCallback(
-    () => openInNewTab("https://www.google.com"),
+    // TODO: Update the link
+    () => openInNewTab("https://docs.sanchogov.tools/"),
+    []
+  );
+
+  const onClickLearnMoreAboutProposingGovAction = useCallback(
+    // TODO: Update the link
+    () => openInNewTab("https://docs.sanchogov.tools/"),
     []
   );
 
   const navigateToGovActions = useCallback(
-    () => navigate(PATHS.governance_actions),
+    () => navigate(PATHS.governanceActions),
     [navigate]
   );
 
@@ -67,59 +74,75 @@ export const HomeCards = () => {
       <ActionCard
         dataTestIdFirstButton="delegate-connect-wallet-button"
         dataTestIdSecondButton="delegate-learn-more-button"
-        description={t("home.cards.delegateDescription")}
+        description={t("home.cards.delegate.description")}
         firstButtonAction={openWalletModal}
-        firstButtonLabel={t("home.cards.delegateFirstButtonLabel")}
+        firstButtonLabel={t("home.cards.delegate.firstButtonLabel")}
         imageHeight={80}
         imageURL={IMAGES.govActionDelegateImage}
         imageWidth={115}
         secondButtonAction={onClickLearnMoreAboutDelegation}
         secondButtonLabel={t("learnMore")}
-        title={t("home.cards.delegateTitle")}
+        title={t("home.cards.delegate.title")}
       />
       {/* DELEGATE CARD END*/}
       {/* REGISTER AS DREP CARD */}
       <ActionCard
         dataTestIdFirstButton="register-connect-wallet-button"
         dataTestIdSecondButton="register-learn-more-button"
-        description={t("home.cards.registerAsDRepDescription")}
+        description={t("home.cards.registerAsDRep.description")}
         firstButtonAction={openWalletModal}
-        firstButtonLabel={t("home.cards.registerAsDRepFirstButtonLabel")}
+        firstButtonLabel={t("home.cards.registerAsDRep.firstButtonLabel")}
         imageHeight={80}
         imageURL={IMAGES.govActionRegisterImage}
         imageWidth={70}
         secondButtonAction={onClickLearnMoreAboutDRepRegistration}
         secondButtonLabel={t("learnMore")}
-        title={t("home.cards.registerAsDRepTitle")}
+        title={t("home.cards.registerAsDRep.title")}
       />
       {/* REGISTER AS DREP CARD END */}
       {/* REGISTER AS SOLE VOTER CARD */}
       <ActionCard
         dataTestIdFirstButton="register-as-sole-voter-button"
         dataTestIdSecondButton="lear-more-about-sole-voter-button"
-        description={t("home.cards.registerAsSoleVoterDescription")}
+        description={t("home.cards.registerAsSoleVoter.description")}
         firstButtonAction={openWalletModal}
-        firstButtonLabel={t("home.cards.registerAsSoleVoterFirstButtonLabel")}
+        firstButtonLabel={t("home.cards.registerAsSoleVoter.firstButtonLabel")}
         imageHeight={84}
         imageURL={IMAGES.soleVoterImage}
         imageWidth={84}
         secondButtonAction={onClickLearnMoreAboutSoleVoterRegistration}
         secondButtonLabel={t("learnMore")}
-        title={t("home.cards.registerAsSoleVoterTitle")}
+        title={t("home.cards.registerAsSoleVoter.title")}
       />
       {/* REGISTER AS SOLE VOTER CARD END */}
       {/* GOV ACTIONS CARD */}
       <ActionCard
         dataTestIdFirstButton="move-to-governance-actions-button"
-        description={t("home.cards.governaneActionsDescription")}
+        description={t("home.cards.governanceActions.description")}
         firstButtonAction={navigateToGovActions}
-        firstButtonLabel={t("home.cards.governanceActionsFirstButtonLabel")}
-        imageHeight={80}
+        firstButtonLabel={t("home.cards.governanceActions.firstButtonLabel")}
+        imageHeight={84}
         imageURL={IMAGES.govActionListImage}
-        imageWidth={80}
-        title={t("home.cards.governaneActionsTitle")}
+        imageWidth={84}
+        title={t("home.cards.governanceActions.title")}
       />
-      {/* GOV ACTIONS CARD */}
+      {/* GOV ACTIONS CARD  END*/}
+      {/* PROPOSE GOV ACTION CARD  */}
+      <ActionCard
+        dataTestIdFirstButton="propose-a-governance-action-button"
+        description={t("home.cards.proposeAGovernanceAction.description")}
+        firstButtonAction={openWalletModal}
+        firstButtonLabel={t(
+          "home.cards.proposeAGovernanceAction.firstButtonLabel"
+        )}
+        imageHeight={84}
+        imageURL={IMAGES.proposeGovActionImage}
+        imageWidth={84}
+        secondButtonAction={onClickLearnMoreAboutProposingGovAction}
+        secondButtonLabel={t("learnMore")}
+        title={t("home.cards.proposeAGovernanceAction.title")}
+      />
+      {/* PROPOSE GOV ACTION CARD  END*/}
     </Box>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/Slider.tsx b/govtool/frontend/src/components/organisms/Slider.tsx
@@ -105,12 +105,12 @@ export const Slider = ({
             onClick={() =>
               onDashboard
                 ? navigate(
-                    generatePath(PATHS.dashboard_governance_actions_category, {
+                    generatePath(PATHS.dashboardGovernanceActionsCategory, {
                       category: navigateKey,
                     })
                   )
                 : navigate(
-                    generatePath(PATHS.governance_actions_category, {
+                    generatePath(PATHS.governanceActionsCategory, {
                       category: navigateKey,
                     })
                   )
@@ -157,15 +157,12 @@ export const Slider = ({
               onClick={() =>
                 onDashboard
                   ? navigate(
-                      generatePath(
-                        PATHS.dashboard_governance_actions_category,
-                        {
-                          category: navigateKey,
-                        }
-                      )
+                      generatePath(PATHS.dashboardGovernanceActionsCategory, {
+                        category: navigateKey,
+                      })
                     )
                   : navigate(
-                      generatePath(PATHS.governance_actions_category, {
+                      generatePath(PATHS.governanceActionsCategory, {
                         category: navigateKey,
                       })
                     )

diff --git a/govtool/frontend/src/consts/images.ts b/govtool/frontend/src/consts/images.ts
@@ -4,12 +4,13 @@ export const IMAGES = {
   bgBlue: "/images/BGBlue.png",
   bgOrange: "/images/BGOrange.png",
   errorPageImage: "/images/ErrorPageImage.png",
-  heroImage: "/images/HeroImage.png",
-  soleVoterImage: "/images/GovActionsSoleVoter.png",
   govActionDefaultImage: "/images/GovActionDefault.png",
   govActionDelegateImage: "/images/GovActionDelegate.png",
   govActionListImage: "/images/GovActionList.png",
   govActionRegisterImage: "/images/GovActionRegister.png",
+  heroImage: "/images/HeroImage.png",
+  proposeGovActionImage: "/images/ProposeGovAction.png",
+  soleVoterImage: "/images/GovActionsSoleVoter.png",
   successImage: "/images/Success.png",
   warningImage: "/images/Warning.png",
   warningYellowImage: "/images/WarningYellow.png",

diff --git a/govtool/frontend/src/consts/navItems.ts b/govtool/frontend/src/consts/navItems.ts
@@ -10,7 +10,7 @@ export const NAV_ITEMS = [
   },
   {
     dataTestId: "governance-actions-link",
-    navTo: PATHS.governance_actions,
+    navTo: PATHS.governanceActions,
     label: "Governance Actions",
     newTabLink: null,
   },
@@ -40,7 +40,7 @@ export const CONNECTED_NAV_ITEMS = [
   {
     dataTestId: "governance-actions-link",
     label: "Governance Actions",
-    navTo: PATHS.dashboard_governance_actions,
+    navTo: PATHS.dashboardGovernanceActions,
     activeIcon: ICONS.governanceActionsActiveIcon,
     icon: ICONS.governanceActionsIcon,
     newTabLink: null,

diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
@@ -1,19 +1,18 @@
 export const PATHS = {
-  create_governance_action: "/create_governance_action",
-  dashboard_governance_actions_action:
-    "/connected/governance_actions/:proposalId",
-  dashboard_governance_actions_category:
+  createGovernanceAction: "/create_governance_action",
+  dashboardGovernanceActionsAction: "/connected/governance_actions/:proposalId",
+  dashboardGovernanceActionsCategory:
     "/connected/governance_actions/category/:category",
-  dashboard_governance_actions: "/connected/governance_actions",
+  dashboardGovernanceActions: "/connected/governance_actions",
   dashboard: "/dashboard",
   delegateTodRep: "/delegate",
   error: "/error",
   faqs: "/faqs",
-  governance_actions_action: "/governance_actions/:proposalId",
-  governance_actions_category_action:
+  governanceActions: "/governance_actions",
+  governanceActionsAction: "/governance_actions/:proposalId",
+  governanceActionsCategoryAction:
     "/governance_actions/category/:category/:proposalId",
-  governance_actions_category: "/governance_actions/category/:category",
-  governance_actions: "/governance_actions",
+  governanceActionsCategory: "/governance_actions/category/:category",
   guides: "/guides",
   home: "/",
   registerAsdRep: "/register",

diff --git a/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx b/govtool/frontend/src/hooks/forms/useVoteActionForm.tsx
@@ -110,7 +110,7 @@ export const useVoteActionForm = () => {
         });
         if (result) {
           addSuccessAlert("Vote submitted");
-          navigate(PATHS.dashboard_governance_actions, {
+          navigate(PATHS.dashboardGovernanceActions, {
             state: {
               isVotedListOnLoad: state && state.vote ? true : false,
             },