From 95fd308e7448bf14a1789220b29b2b8c1d6dcf7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Sworze=C5=84?= <b.sworzen@gmail.com>
Date: Wed, 24 Apr 2024 11:50:58 +0200
Subject: [PATCH] fix loaders

---
 .../components/organisms/DashboardCards.tsx   |  74 +++---
 .../src/components/organisms/Footer.tsx       |   3 -
 .../DashboardGovernanceActionsCategory.tsx    | 213 +++++++++---------
 .../frontend/src/pages/GovernanceActions.tsx  |  59 +++--
 .../src/pages/GovernanceActionsCategory.tsx   |  18 +-
 .../src/pages/RegisterAsSoleVoter.tsx         | 144 ++++++++++--
 .../frontend/src/pages/RetireAsSoleVoter.tsx  | 137 +++++++++--
 7 files changed, 456 insertions(+), 192 deletions(-)

diff --git a/govtool/frontend/src/components/organisms/DashboardCards.tsx b/govtool/frontend/src/components/organisms/DashboardCards.tsx
index dcb2d48cc..779cb2276 100644
--- a/govtool/frontend/src/components/organisms/DashboardCards.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardCards.tsx
@@ -42,46 +42,48 @@ export const DashboardCards = () => {
   }
 
   return (
-    <Box
-      sx={{
-        columnGap: 3,
-        display: "grid",
-        gridTemplateColumns:
-          screenWidth < 1280
-            ? "repeat(1, minmax(300px, 530px))"
-            : screenWidth >= 1728
-            ? "repeat(3, minmax(300px, 570px))"
-            : "repeat(2, minmax(300px, 530px))",
-        justifyContent: screenWidth < 1024 ? "center" : "flex-start",
-        px: screenWidth < 640 ? 2 : 5,
-        py: 3,
-        rowGap: 3,
-      }}
-    >
-      <DelegateDashboardCard
-        currentDelegation={currentDelegation}
-        delegateTx={pendingTransaction.delegate}
-        dRepID={dRepID}
-        votingPower={votingPower}
-      />
+    <Box flex={1}>
+      <Box
+        sx={{
+          columnGap: 3,
+          display: "grid",
+          gridTemplateColumns:
+            screenWidth < 1280
+              ? "repeat(1, minmax(300px, 530px))"
+              : screenWidth >= 1728
+              ? "repeat(3, minmax(300px, 570px))"
+              : "repeat(2, minmax(300px, 530px))",
+          justifyContent: screenWidth < 1024 ? "center" : "flex-start",
+          px: screenWidth < 640 ? 2 : 5,
+          py: 3,
+          rowGap: 3,
+        }}
+      >
+        <DelegateDashboardCard
+          currentDelegation={currentDelegation}
+          delegateTx={pendingTransaction.delegate}
+          dRepID={dRepID}
+          votingPower={votingPower}
+        />
 
-      <DRepDashboardCard
-        dRepIDBech32={dRepIDBech32}
-        pendingTransaction={pendingTransaction}
-        voter={voter}
-      />
+        <DRepDashboardCard
+          dRepIDBech32={dRepIDBech32}
+          pendingTransaction={pendingTransaction}
+          voter={voter}
+        />
 
-      <SoleVoterDashboardCard
-        pendingTransaction={pendingTransaction}
-        voter={voter}
-        votingPower={votingPower}
-      />
+        <SoleVoterDashboardCard
+          pendingTransaction={pendingTransaction}
+          voter={voter}
+          votingPower={votingPower}
+        />
 
-      <ListGovActionsDashboardCards />
+        <ListGovActionsDashboardCards />
 
-      <ProposeGovActionDashboardCard
-        createGovActionTx={pendingTransaction.createGovAction}
-      />
+        <ProposeGovActionDashboardCard
+          createGovActionTx={pendingTransaction.createGovAction}
+        />
+      </Box>
     </Box>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/Footer.tsx b/govtool/frontend/src/components/organisms/Footer.tsx
index 086fea35d..cfc2e5862 100644
--- a/govtool/frontend/src/components/organisms/Footer.tsx
+++ b/govtool/frontend/src/components/organisms/Footer.tsx
@@ -47,9 +47,6 @@ export const Footer = () => {
 
   return (
     <>
-      {/* TODO: That box below should not be needed.
-      Footer should be aligned under shared Layout component */}
-      <Box sx={{ flex: 1 }} />
       <Box
         component="footer"
         sx={{
diff --git a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
index 70975a860..c1982d563 100644
--- a/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
+++ b/govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx
@@ -68,118 +68,121 @@ export const DashboardGovernanceActionsCategory = () => {
   return (
     <Background>
       <Box
-        display="flex"
-        flexDirection="column"
-        justifyContent="flex-start"
-        minHeight="100vh"
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          px: isMobile ? 2 : 3.75,
+        }}
       >
-        <Box flex={1}>
-          <Box px={isMobile ? 2 : 3.75} flex={1}>
-            <Link
-              data-testid="back-to-list-link"
-              sx={{
-                cursor: "pointer",
-                display: "flex",
-                textDecoration: "none",
-                margin: "12px 0 28px",
-              }}
-              onClick={() => navigate(PATHS.dashboardGovernanceActions)}
-            >
-              <img
-                src={ICONS.arrowRightIcon}
-                alt="arrow"
-                style={{ marginRight: "12px", transform: "rotate(180deg)" }}
-              />
-              <Typography variant="body2" color="primary" fontWeight={400}>
-                {t("govActions.backToGovActions")}
-              </Typography>
-            </Link>
-            <DataActionsBar
-              {...dataActionsBarProps}
-              isFiltering={false}
-              sortOptions={GOVERNANCE_ACTIONS_SORTING}
-            />
-            <Typography
-              variant="title2"
-              sx={{
-                m: "32px 0 32px",
-              }}
-            >
-              {getProposalTypeLabel(category ?? "")}
-            </Typography>
-            {!mappedData || isEnableLoading || isProposalsLoading ? (
-              <Box display="flex" justifyContent="center" py={4}>
-                <CircularProgress />
+        <Link
+          data-testid="back-to-list-link"
+          sx={{
+            cursor: "pointer",
+            display: "flex",
+            textDecoration: "none",
+            margin: "12px 0 28px",
+          }}
+          onClick={() => navigate(PATHS.dashboardGovernanceActions)}
+        >
+          <img
+            src={ICONS.arrowRightIcon}
+            alt="arrow"
+            style={{ marginRight: "12px", transform: "rotate(180deg)" }}
+          />
+          <Typography variant="body2" color="primary" fontWeight={400}>
+            {t("govActions.backToGovActions")}
+          </Typography>
+        </Link>
+        <DataActionsBar
+          {...dataActionsBarProps}
+          isFiltering={false}
+          sortOptions={GOVERNANCE_ACTIONS_SORTING}
+        />
+        <Typography
+          variant="title2"
+          sx={{
+            m: "32px 0 32px",
+          }}
+        >
+          {getProposalTypeLabel(category ?? "")}
+        </Typography>
+        {!mappedData || isEnableLoading || isProposalsLoading ? (
+          <Box
+            sx={{
+              alignItems: "center",
+              display: "flex",
+              flex: 1,
+              justifyContent: "center",
+              py: 4,
+            }}
+          >
+            <CircularProgress />
+          </Box>
+        ) : !mappedData?.length ? (
+          <EmptyStateGovernanceActionsCategory
+            category={category}
+            isSearch={!!debouncedSearchText.length}
+          />
+        ) : (
+          <Box
+            columnGap="20px"
+            display="grid"
+            gridTemplateColumns={`repeat(auto-fit, minmax(${
+              screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
+            }, 1fr))`}
+          >
+            {mappedData.map((item) => (
+              <Box pb={4.25} key={item.txHash + item.index}>
+                <GovernanceActionCard
+                  {...item}
+                  inProgress={
+                    pendingTransaction.vote?.resourceId ===
+                    `${item.txHash ?? ""}${item.index ?? ""}`
+                  }
+                  onClick={() => {
+                    saveScrollPosition();
+
+                    if (
+                      pendingTransaction.vote?.resourceId ===
+                      item.txHash + item.index
+                    ) {
+                      openInNewTab(
+                        `https://sancho.cexplorer.io/tx/${pendingTransaction.vote.transactionHash}`,
+                      );
+                    } else {
+                      navigate(
+                        generatePath(PATHS.dashboardGovernanceActionsAction, {
+                          proposalId: getFullGovActionId(
+                            item.txHash,
+                            item.index,
+                          ),
+                        }),
+                        {
+                          state: {
+                            ...item,
+                            openedFromCategoryPage: true,
+                          },
+                        },
+                      );
+                    }
+                  }}
+                  txHash={item.txHash}
+                />
               </Box>
-            ) : !mappedData?.length ? (
-              <EmptyStateGovernanceActionsCategory
-                category={category}
-                isSearch={!!debouncedSearchText.length}
-              />
-            ) : (
+            ))}
+            {proposalsHaveNextPage && isProposalsFetchingNextPage && (
               <Box
-                columnGap="20px"
-                display="grid"
-                gridTemplateColumns={`repeat(auto-fit, minmax(${
-                  screenWidth < 420 ? "290px" : isMobile ? "324px" : "350px"
-                }, 1fr))`}
+                display="flex"
+                justifyContent="center"
+                py={4}
+                ref={loadNextPageRef}
               >
-                {mappedData.map((item) => (
-                  <Box pb={4.25} key={item.txHash + item.index}>
-                    <GovernanceActionCard
-                      {...item}
-                      inProgress={
-                        pendingTransaction.vote?.resourceId ===
-                        `${item.txHash ?? ""}${item.index ?? ""}`
-                      }
-                      onClick={() => {
-                        saveScrollPosition();
-
-                        if (
-                          pendingTransaction.vote?.resourceId ===
-                          item.txHash + item.index
-                        ) {
-                          openInNewTab(
-                            `https://sancho.cexplorer.io/tx/${pendingTransaction.vote.transactionHash}`,
-                          );
-                        } else {
-                          navigate(
-                            generatePath(
-                              PATHS.dashboardGovernanceActionsAction,
-                              {
-                                proposalId: getFullGovActionId(
-                                  item.txHash,
-                                  item.index,
-                                ),
-                              },
-                            ),
-                            {
-                              state: {
-                                ...item,
-                                openedFromCategoryPage: true,
-                              },
-                            },
-                          );
-                        }
-                      }}
-                      txHash={item.txHash}
-                    />
-                  </Box>
-                ))}
-                {proposalsHaveNextPage && isProposalsFetchingNextPage && (
-                  <Box
-                    display="flex"
-                    justifyContent="center"
-                    py={4}
-                    ref={loadNextPageRef}
-                  >
-                    <CircularProgress />
-                  </Box>
-                )}
+                <CircularProgress />
               </Box>
             )}
           </Box>
-        </Box>
+        )}
       </Box>
     </Background>
   );
diff --git a/govtool/frontend/src/pages/GovernanceActions.tsx b/govtool/frontend/src/pages/GovernanceActions.tsx
index 69375331b..95a6f114a 100644
--- a/govtool/frontend/src/pages/GovernanceActions.tsx
+++ b/govtool/frontend/src/pages/GovernanceActions.tsx
@@ -49,13 +49,23 @@ export const GovernanceActions = () => {
     <Background>
       <ScrollToManage />
       <Box
-        display="flex"
-        flexDirection="column"
-        justifyContent="flex-start"
-        minHeight="100vh"
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          minHeight: "100vh",
+        }}
       >
         <TopNav />
-        <Box flex={1} mt={isMobile ? 3.25 : 6.25} overflow="hidden">
+        <Box
+          sx={{
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            mt: isMobile ? 3.25 : 6.25,
+            overflow: "hidden",
+          }}
+        >
           <Typography
             sx={{ mb: isMobile ? 3.75 : 6, px: pagePadding }}
             variant={isMobile ? "title1" : "headline3"}
@@ -71,32 +81,43 @@ export const GovernanceActions = () => {
               }}
             />
           )}
-          <Box flex={1} px={pagePadding}>
+          <Box
+            sx={{
+              display: "flex",
+              flex: 1,
+              flexDirection: "column",
+              px: pagePadding,
+            }}
+          >
             <DataActionsBar
               {...dataActionsBarProps}
               filterOptions={GOVERNANCE_ACTIONS_FILTERS}
               filtersTitle={t("govActions.filterTitle")}
               sortOptions={GOVERNANCE_ACTIONS_SORTING}
             />
-            <Box height={isMobile ? 60 : 80} />
+
             {!proposals || isProposalsLoading ? (
               <Box
-                alignItems="center"
-                display="flex"
-                flex={1}
-                height="100%"
-                justifyContent="center"
+                sx={{
+                  alignItems: "center",
+                  display: "flex",
+                  flex: 1,
+                  justifyContent: "center",
+                }}
               >
                 <CircularProgress />
               </Box>
             ) : (
-              <GovernanceActionsToVote
-                filters={chosenFilters}
-                onDashboard={false}
-                searchPhrase={debouncedSearchText}
-                sorting={chosenSorting}
-                proposals={proposals}
-              />
+              <>
+                <Box height={isMobile ? 60 : 80} />
+                <GovernanceActionsToVote
+                  filters={chosenFilters}
+                  onDashboard={false}
+                  searchPhrase={debouncedSearchText}
+                  sorting={chosenSorting}
+                  proposals={proposals}
+                />
+              </>
             )}
           </Box>
         </Box>
diff --git a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
index b849b46d2..b78b013cd 100644
--- a/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
+++ b/govtool/frontend/src/pages/GovernanceActionsCategory.tsx
@@ -83,8 +83,14 @@ export const GovernanceActionsCategory = () => {
         minHeight="100vh"
       >
         <TopNav />
-        <Box flex={1} mt={isMobile ? 3.25 : 6.25} overflow="hidden">
-          <Box px={pagePadding} flex={1}>
+        <Box
+          flex={1}
+          mt={isMobile ? 3.25 : 6.25}
+          overflow="hidden"
+          display="flex"
+          flexDirection="column"
+        >
+          <Box px={pagePadding} flex={1} display="flex" flexDirection="column">
             <Link
               data-testid="back-to-list-link"
               sx={{
@@ -167,7 +173,13 @@ export const GovernanceActionsCategory = () => {
                 </Box>
               )
             ) : (
-              <Box py={4} display="flex" justifyContent="center">
+              <Box
+                alignItems="center"
+                py={4}
+                display="flex"
+                justifyContent="center"
+                flex={1}
+              >
                 <CircularProgress />
               </Box>
             )}
diff --git a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
index 822d809ce..ad387b4da 100644
--- a/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
+++ b/govtool/frontend/src/pages/RegisterAsSoleVoter.tsx
@@ -1,15 +1,89 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Trans } from "react-i18next";
+import { Box, Link } from "@mui/material";
 
+import { Background, Typography } from "@atoms";
 import { PATHS } from "@consts";
-import { RegisterAsSoleVoterBox } from "@organisms";
-import { useTranslation } from "@hooks";
-import { CenteredBoxPageWrapper } from "@molecules";
-import { checkIsWalletConnected } from "@/utils";
+import { useCardano, useModal } from "@context";
+import {
+  useGetVoterInfo,
+  useScreenDimension,
+  useTranslation,
+  useWalletErrorModal,
+} from "@hooks";
+import { LinkWithIcon } from "@molecules";
+import { BgCard, DashboardTopNav, Footer } from "@organisms";
+import {
+  PROTOCOL_PARAMS_KEY,
+  checkIsWalletConnected,
+  correctAdaFormat,
+  getItemFromLocalStorage,
+  openInNewTab,
+} from "@utils";
 
 export const RegisterAsSoleVoter = () => {
+  const epochParams = getItemFromLocalStorage(PROTOCOL_PARAMS_KEY);
   const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+  const { voter } = useGetVoterInfo();
+  const openWalletErrorModal = useWalletErrorModal();
+  const { buildSignSubmitConwayCertTx, buildDRepRegCert, buildDRepUpdateCert } =
+    useCardano();
+  const { openModal, closeModal } = useModal();
+
+  const onRegister = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      const certBuilder = voter?.isRegisteredAsDRep
+        ? await buildDRepUpdateCert()
+        : await buildDRepRegCert();
+      const result = await buildSignSubmitConwayCertTx({
+        certBuilder,
+        type: "registerAsSoleVoter",
+      });
+      if (result) {
+        openModal({
+          type: "statusModal",
+          state: {
+            status: "success",
+            title: t("modals.registration.title"),
+            message: t("modals.registration.message"),
+            link: `https://sancho.cexplorer.io/tx/${result}`,
+            buttonText: t("modals.common.goToDashboard"),
+            onSubmit: () => {
+              navigate(PATHS.dashboard);
+              closeModal();
+            },
+            dataTestId: "registration-transaction-submitted-modal",
+          },
+        });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      openWalletErrorModal({
+        error,
+        buttonText: t("modals.common.goToDashboard"),
+        onSumbit: () => navigate(PATHS.dashboard),
+        dataTestId: "registration-transaction-error-modal",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    buildSignSubmitConwayCertTx,
+    buildDRepRegCert,
+    openModal,
+    voter?.isRegisteredAsDRep,
+  ]);
+
+  const navigateToDashboard = useCallback(
+    () => navigate(PATHS.dashboard),
+    [navigate],
+  );
 
   useEffect(() => {
     if (checkIsWalletConnected()) {
@@ -18,13 +92,57 @@ export const RegisterAsSoleVoter = () => {
   }, []);
 
   return (
-    <CenteredBoxPageWrapper
-      pageTitle={t("soleVoter.becomeSoleVoter")}
-      backButtonText={t("backToDashboard")}
-      backButtonPath={PATHS.dashboard}
-      isVotingPowerHidden
-    >
-      <RegisterAsSoleVoterBox />
-    </CenteredBoxPageWrapper>
+    <Background isReverted>
+      <Box
+        sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
+      >
+        <DashboardTopNav
+          isVotingPowerHidden
+          title={t("soleVoter.becomeSoleVoter")}
+        />
+        <LinkWithIcon
+          label={t("backToDashboard")}
+          onClick={navigateToDashboard}
+          sx={{
+            mb: isMobile ? 0 : 1.5,
+            ml: isMobile ? 2 : 5,
+            mt: isMobile ? 3 : 1.5,
+          }}
+        />
+        <BgCard
+          actionButtonLabel={t("continue")}
+          backButtonLabel={t("cancel")}
+          onClickActionButton={onRegister}
+          isLoadingActionButton={isLoading}
+        >
+          <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
+            {t("soleVoter.registerHeading")}
+          </Typography>
+          <Typography
+            fontWeight={400}
+            sx={{
+              mb: 7,
+              mt: isMobile ? 4 : 10,
+              textAlign: "center",
+              whiteSpace: "pre-line",
+            }}
+            variant="body1"
+          >
+            <Trans
+              i18nKey="soleVoter.registerDescription"
+              values={{ deposit: correctAdaFormat(epochParams.drep_deposit) }}
+              components={[
+                <Link
+                  onClick={() => openInNewTab("https://sancho.network/")}
+                  sx={{ cursor: "pointer" }}
+                  key="0"
+                />,
+              ]}
+            />
+          </Typography>
+        </BgCard>
+        <Footer />
+      </Box>
+    </Background>
   );
 };
diff --git a/govtool/frontend/src/pages/RetireAsSoleVoter.tsx b/govtool/frontend/src/pages/RetireAsSoleVoter.tsx
index 7b8fde1cc..369575572 100644
--- a/govtool/frontend/src/pages/RetireAsSoleVoter.tsx
+++ b/govtool/frontend/src/pages/RetireAsSoleVoter.tsx
@@ -1,15 +1,84 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Trans } from "react-i18next";
+import { Box, Link } from "@mui/material";
 
+import { Background, Typography } from "@atoms";
 import { PATHS } from "@consts";
-import { RetireAsSoleVoterBox } from "@organisms";
-import { useTranslation } from "@hooks";
-import { useNavigate } from "react-router-dom";
-import { CenteredBoxPageWrapper } from "@molecules";
-import { checkIsWalletConnected } from "@/utils";
+import { useCardano, useModal } from "@context";
+import {
+  useGetVoterInfo,
+  useScreenDimension,
+  useTranslation,
+  useWalletErrorModal,
+} from "@hooks";
+import { LinkWithIcon } from "@molecules";
+import { BgCard, DashboardTopNav, Footer } from "@organisms";
+import { checkIsWalletConnected, correctAdaFormat, openInNewTab } from "@utils";
 
 export const RetireAsSoleVoter = () => {
   const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+  const { voter } = useGetVoterInfo();
+  const openWalletErrorModal = useWalletErrorModal();
+  const { buildSignSubmitConwayCertTx, buildDRepRetirementCert } = useCardano();
+  const { openModal, closeModal } = useModal();
+
+  const onRetire = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      if (!voter?.deposit) {
+        throw new Error(t("errors.appCannotGetDeposit"));
+      }
+      const certBuilder = await buildDRepRetirementCert(
+        voter?.deposit?.toString(),
+      );
+      const result = await buildSignSubmitConwayCertTx({
+        certBuilder,
+        type: "retireAsSoleVoter",
+        voterDeposit: voter?.deposit?.toString(),
+      });
+      if (result) {
+        openModal({
+          type: "statusModal",
+          state: {
+            status: "success",
+            title: t("modals.retirement.title"),
+            message: t("modals.retirement.message"),
+            link: `https://sancho.cexplorer.io/tx/${result}`,
+            buttonText: t("modals.common.goToDashboard"),
+            dataTestId: "retirement-transaction-submitted-modal",
+            onSubmit: () => {
+              navigate(PATHS.dashboard);
+              closeModal();
+            },
+          },
+        });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      openWalletErrorModal({
+        error,
+        buttonText: t("modals.common.goToDashboard"),
+        onSumbit: () => navigate(PATHS.dashboard),
+        dataTestId: "retirement-transaction-error-modal",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    buildDRepRetirementCert,
+    buildSignSubmitConwayCertTx,
+    openModal,
+    voter?.deposit,
+  ]);
+
+  const navigateToDashboard = useCallback(
+    () => navigate(PATHS.dashboard),
+    [navigate],
+  );
 
   useEffect(() => {
     if (checkIsWalletConnected()) {
@@ -18,12 +87,54 @@ export const RetireAsSoleVoter = () => {
   }, []);
 
   return (
-    <CenteredBoxPageWrapper
-      pageTitle={t("soleVoter.retireSoleVoter")}
-      backButtonText={t("backToDashboard")}
-      backButtonPath={PATHS.dashboard}
-    >
-      <RetireAsSoleVoterBox />
-    </CenteredBoxPageWrapper>
+    <Background isReverted>
+      <Box
+        sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
+      >
+        <DashboardTopNav title={t("soleVoter.retireSoleVoter")} />
+        <LinkWithIcon
+          label={t("backToDashboard")}
+          onClick={navigateToDashboard}
+          sx={{
+            mb: isMobile ? 0 : 1.5,
+            ml: isMobile ? 2 : 5,
+            mt: isMobile ? 3 : 1.5,
+          }}
+        />
+        <BgCard
+          actionButtonLabel={t("continue")}
+          backButtonLabel={t("cancel")}
+          onClickActionButton={onRetire}
+          isLoadingActionButton={isLoading}
+        >
+          <Typography sx={{ mt: 1, textAlign: "center" }} variant="headline4">
+            {t("soleVoter.retirementHeading")}
+          </Typography>
+          <Typography
+            fontWeight={400}
+            sx={{
+              mb: 7,
+              mt: isMobile ? 4 : 10,
+              textAlign: "center",
+              whiteSpace: "pre-line",
+            }}
+            variant="body1"
+          >
+            <Trans
+              i18nKey="soleVoter.retirementDescription"
+              values={{ deposit: correctAdaFormat(voter?.deposit) }}
+              components={[
+                <Link
+                  onClick={() => openInNewTab("https://sancho.network/")}
+                  sx={{ cursor: "pointer", textDecoration: "none" }}
+                  key="0"
+                />,
+              ]}
+            />
+          </Typography>
+        </BgCard>
+        <Footer />
+      </Box>
+    </Background>
   );
 };