Feat/119 sole voter components unification

govtool/frontend/src/components/molecules/CenteredBoxBottomButtons.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+
+import { Button, LoadingButton } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
+
+interface Props {
+  onBackButton: () => void;
+  onActionButton: () => void;
+  isLoading?: boolean;
+  backButtonText?: string;
+  actionButtonText?: string;
+}
+
+export const CenteredBoxBottomButtons = ({
+  onBackButton,
+  onActionButton,
+  isLoading,
+  backButtonText,
+  actionButtonText,
+}: Props) => {
+  const { isMobile } = useScreenDimension();
+  const { t } = useTranslation();
+
+  const renderBackButton = useMemo(() => {
+    return (
+      <Button
+        data-testid={"back-button"}
+        onClick={onBackButton}
+        size="extraLarge"
+        sx={{
+          px: 6,
+        }}
+        variant="outlined"
+      >
+        {backButtonText ?? t("cancel")}
+      </Button>
+    );
+  }, [isMobile]);
+
+  const renderActionButton = useMemo(() => {
+    return (
+      <LoadingButton
+        data-testid={"register-button"}
+        isLoading={isLoading}
+        onClick={onActionButton}
+        sx={{
+          px: 6,
+          height: 48,
+          fontSize: 16,
+        }}
+        variant="contained"
+      >
+        {actionButtonText ?? t("continue")}
+      </LoadingButton>
+    );
+  }, [isLoading, isMobile]);
+
+  return (
+    <Box
+      display="flex"
+      flexDirection={isMobile ? "column-reverse" : "row"}
+      justifyContent="space-around"
+      mt={6}
+    >
+      {renderBackButton}
+      <Box px={2} py={isMobile ? 1.5 : 0} />
+      {renderActionButton}
+    </Box>
+  );
+};

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<PropsWithChildren<Props>> = ({
+  pageTitle,
+  backButtonText,
+  backButtonPath,
+  isVotingPowerHidden,
+  children,
+}) => {
+  const { isMobile, screenWidth, pagePadding } = useScreenDimension();
+  const navigate = useNavigate();
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+
+  return (
+    <Background isReverted>
+      <Box display={"flex"} minHeight={"100vh"} flexDirection="column">
+        <DashboardTopNav
+          imageSRC={ICONS.appLogoIcon}
+          imageWidth={isMobile ? undefined : 42}
+          imageHeight={isMobile ? 24 : 35}
+          title={pageTitle}
+          isVotingPowerHidden={isVotingPowerHidden}
+        />
+        <Box
+          display={"flex"}
+          justifyContent={"center"}
+          flexDirection={"column"}
+          mt={isMobile ? 0 : 7}
+          height={isMobile ? "100%" : "auto"}
+          sx={{ marginTop: "97px" }}
+        >
+          {isMobile && (
+            <Box borderBottom={1} borderColor={"#fff"}>
+              <Typography
+                variant="body2"
+                sx={{
+                  ml: 2,
+                  my: "26px",
+                  fontSize: "24px",
+                  fontWeight: 400,
+                }}
+              >
+                {pageTitle}
+              </Typography>
+            </Box>
+          )}
+          <Link
+            data-testid={"back-button"}
+            sx={{
+              cursor: "pointer",
+              display: "flex",
+              textDecoration: "none",
+              my: 3,
+              marginLeft: isMobile ? 2 : "40px",
+            }}
+            onClick={() => navigate(backButtonPath)}
+          >
+            <img
+              src={ICONS.arrowLeftThinIcon}
+              alt="arrow"
+              style={{ marginRight: "4px" }}
+            />
+            <Typography
+              variant="body2"
+              color="primary"
+              sx={{
+                fontWeight: 400,
+                paddingTop: "1px",
+              }}
+            >
+              {backButtonText}
+            </Typography>
+          </Link>
+          <Box display={"flex"} justifyContent={"center"}>
+            <Box
+              width={screenWidth < 768 ? "auto" : "52vw"}
+              boxShadow={isMobile ? "" : `2px 2px 20px 0px ${boxShadow2}`}
+              px={pagePadding}
+              py={isMobile ? 3 : 8}
+              borderRadius={"20px"}
+              height="auto"
+            >
+              <Box display="flex" flexDirection="column">
+                {children}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Background>
+  );
+};

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

@@ -1,4 +1,6 @@
 export * from "./ActionCard";
+export * from "./CenteredBoxBottomButtons";
+export * from "./CenteredBoxPageWrapper";
 export * from "./DashboardActionCard";
 export * from "./DataActionsBar";
 export * from "./DRepInfoCard";

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 = () => {
           <Trans
             i18nKey={
               soleVoter?.isRegistered
-                ? "dashboard.cards.youAreSoleVoterDescription"
-                : "dashboard.cards.registerAsSoleVoterDescription"
+                ? "dashboard.soleVoter.youAreSoleVoterDescription"
+                : "dashboard.soleVoter.registerAsSoleVoterDescription"
             }
             values={{ votingPower: correctAdaFormat(votingPower) }}
           />
@@ -426,22 +427,29 @@ 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(
             "https://docs.sanchogov.tools/faqs/what-does-it-mean-to-register-as-a-drep"
           )
         }
         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*/}

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"}
     >
       <Box display={"flex"}>
         {imageSRC ? (
@@ -66,7 +69,7 @@ export const DashboardTopNav = ({
         ) : null}
       </Box>
       <Box display="flex">
-        <VotingPowerChips />
+        {!isVotingPowerHidden && <VotingPowerChips />}
         {isMobile && (
           <IconButton
             data-testid={"open-drawer-button"}

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

@@ -164,7 +164,7 @@ export const GovernanceActionDetailsCard = ({
             <Typography color="neutralGray" variant="caption">
               {t("govActions.details")}
             </Typography>
-            {/* {typeof details === "object" && details !== null ? (
+            {typeof details === "object" && details !== null ? (
               Object.entries(details).map(([key, value]) => {
                 return (
                   <div key={key}>
@@ -179,7 +179,7 @@ export const GovernanceActionDetailsCard = ({
               >
                 {details}
               </Typography>
-            )} */}
+            )}
           </Box>
         </Box>
         <Button

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

@@ -0,0 +1,76 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { PATHS } from "@consts";
+import { RegisterAsSoleVoterBoxContent } from "@organisms";
+import { CenteredBoxBottomButtons } from "@molecules";
+import { useCardano, useModal } from "@context";
+
+export const RegisterAsSoleVoterBox = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const { buildSignSubmitConwayCertTx, buildDRepRegCert } = useCardano();
+  const navigate = useNavigate();
+  const { openModal, closeModal } = useModal();
+  const { t } = useTranslation();
+
+  const onRegister = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      const certBuilder = await buildDRepRegCert();
+      const result = await buildSignSubmitConwayCertTx({
+        certBuilder,
+        type: "soleVoterRegistration",
+        registrationType: "registration",
+      });
+      if (result)
+        openModal({
+          type: "statusModal",
+          state: {
+            status: "success",
+            title: t("modals.registration.title"),
+            message: t("modals.registration.message"),
+            link: "https://adanordic.com/latest_transactions",
+            buttonText: t("modals.common.goToDashboard"),
+            onSubmit: () => {
+              navigate(PATHS.dashboard);
+              closeModal();
+            },
+            dataTestId: "registration-transaction-submitted-modal",
+          },
+        });
+    } catch (e: any) {
+      const errorMessage = e.info ? e.info : e;
+
+      openModal({
+        type: "statusModal",
+        state: {
+          status: "warning",
+          title: t("modals.common.oops"),
+          message: errorMessage,
+          buttonText: t("modals.common.goToDashboard"),
+          onSubmit: () => {
+            navigate(PATHS.dashboard);
+            closeModal();
+          },
+          dataTestId: "registration-transaction-error-modal",
+        },
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [buildSignSubmitConwayCertTx, buildDRepRegCert, openModal]);
+
+  return (
+    <>
+      <RegisterAsSoleVoterBoxContent />
+      <CenteredBoxBottomButtons
+        onBackButton={() => navigate(PATHS.dashboard)}
+        onActionButton={onRegister}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};