Skip to content

Commit

Permalink
[#550] new retire as drep flow
Browse files Browse the repository at this point in the history
  • Loading branch information
Sworzen1 committed Mar 25, 2024
1 parent 51e1e22 commit 9357eb8
Show file tree
Hide file tree
Showing 9 changed files with 196 additions and 83 deletions.
26 changes: 14 additions & 12 deletions govtool/frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,36 @@ import { Route, Routes, useNavigate } from "react-router-dom";
import { Modal, ScrollToTop } from "@atoms";
import { PATHS } from "@consts";
import { useCardano, useModal } from "@context";
import { useWalletConnectionListener } from "@hooks";
import {
DashboardCards,
DashboardGovernanceActions,
DashboardGovernanceActionDetails,
} from "@organisms";
import {
ChooseStakeKey,
CreateGovernanceAction,
Dashboard,
ErrorPage,
Home,
GovernanceActions,
DashboardGovernanceActionsCategory,
DelegateTodRep,
RegisterAsdRep,
ErrorPage,
GovernanceActionDetails,
UpdatedRepMetadata,
GovernanceActions,
GovernanceActionsCategory,
DashboardGovernanceActionsCategory,
Home,
RegisterAsdRep,
RegisterAsSoleVoter,
RetireAsDrep,
RetireAsSoleVoter,
UpdatedRepMetadata,
} from "@pages";
import { SetupInterceptors } from "@services";
import {
callAll,
getItemFromLocalStorage,
WALLET_LS_KEY,
removeItemFromLocalStorage,
} from "@utils";
import { SetupInterceptors } from "./services";
import { useWalletConnectionListener } from "./hooks";
import { RegisterAsSoleVoter } from "./pages/RegisterAsSoleVoter";
import { CreateGovernanceAction } from "./pages/CreateGovernanceAction";

export default () => {
const { enable } = useCardano();
Expand Down Expand Up @@ -110,6 +111,7 @@ export default () => {
/>
<Route path={PATHS.delegateTodRep} element={<DelegateTodRep />} />
<Route path={PATHS.registerAsdRep} element={<RegisterAsdRep />} />
<Route path={PATHS.retireAsDrep} element={<RetireAsDrep />} />
<Route
path={PATHS.registerAsSoleVoter}
element={<RegisterAsSoleVoter />}
Expand All @@ -126,8 +128,8 @@ export default () => {
handleClose={
!modals[modal.type].preventDismiss
? callAll(modals[modal.type]?.onClose, () =>
openModal({ type: "none", state: null }),
)
openModal({ type: "none", state: null }),
)
: undefined
}
>
Expand Down
74 changes: 8 additions & 66 deletions govtool/frontend/src/components/organisms/DashboardCards.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useCallback, useMemo, useState } from "react";
import { useCallback, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { Box, CircularProgress } from "@mui/material";
import { Trans } from "react-i18next";

import { IMAGES, PATHS } from "@consts";
import { useCardano, useModal } from "@context";
import { useCardano } from "@context";
import {
useGetAdaHolderVotingPowerQuery,
useScreenDimension,
Expand All @@ -17,8 +17,6 @@ import { correctAdaFormat, formHexToBech32, openInNewTab } from "@utils";

export const DashboardCards = () => {
const {
buildDRepRetirementCert,
buildSignSubmitConwayCertTx,
dRepID,
dRepIDBech32,
isPendingTransaction,
Expand All @@ -28,67 +26,10 @@ export const DashboardCards = () => {
const navigate = useNavigate();
const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey);
const { screenWidth } = useScreenDimension();
const { openModal } = useModal();
const [isRetirementLoading, setIsRetirementLoading] =
useState<boolean>(false);
const { votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey);
const { t } = useTranslation();
const { voter } = useGetVoterInfo();

const retireAsDrep = useCallback(async () => {
try {
setIsRetirementLoading(true);
const isPendingTx = isPendingTransaction();

if (isPendingTx) return;
if (!voter?.deposit) throw new Error("Can not get deposit");

const certBuilder = await buildDRepRetirementCert(
voter.deposit.toString(),
);
const result = await buildSignSubmitConwayCertTx({
certBuilder,
type: "retireAsDrep",
voterDeposit: voter.deposit.toString(),
});
if (result) {
openModal({
type: "statusModal",
state: {
status: "success",
title: t("modals.retirement.title"),
message: t("modals.retirement.message"),
link: `https://adanordic.com/latest_transactions`,
buttonText: t("modals.common.goToDashboard"),
dataTestId: "retirement-transaction-submitted-modal",
},
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
const errorMessage = error.info ? error.info : error;

openModal({
type: "statusModal",
state: {
status: "warning",
message: errorMessage,
buttonText: t("modals.common.goToDashboard"),
title: t("modals.common.oops"),
dataTestId: "retirement-transaction-error-modal",
},
});
} finally {
setIsRetirementLoading(false);
}
}, [
buildDRepRetirementCert,
buildSignSubmitConwayCertTx,
isPendingTransaction,
openModal,
voter?.deposit,
]);

const delegationDescription = useMemo(() => {
const correctAdaRepresentation = correctAdaFormat(votingPower);
if (currentDelegation === dRepID) {
Expand Down Expand Up @@ -416,12 +357,13 @@ export const DashboardCards = () => {
: "register-learn-more-button"
}
description={registrationCardDescription}
firstButtonAction={
voter?.isRegisteredAsDRep
? retireAsDrep
: () => navigateTo(PATHS.registerAsdRep)
firstButtonAction={() =>
navigateTo(
voter?.isRegisteredAsDRep
? PATHS.retireAsDrep
: PATHS.registerAsdRep,
)
}
firstButtonIsLoading={isRetirementLoading}
firstButtonLabel={
pendingTransaction.registerAsDrep || pendingTransaction.retireAsDrep
? ""
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { useCallback, useState } from "react";

import { Typography } from "@atoms";
import { useCardano, useModal } from "@context";
import { useGetVoterInfo, useScreenDimension, useTranslation } from "@hooks";

import { BgCard } from "..";

export const WhatRetirementMeans = ({
onClickCancel,
}: {
onClickCancel: () => void;
}) => {
const {
isPendingTransaction,
buildDRepRetirementCert,
buildSignSubmitConwayCertTx,
} = useCardano();
const { t } = useTranslation();
const { isMobile } = useScreenDimension();
const { closeModal, openModal } = useModal();
const [isRetirementLoading, setIsRetirementLoading] =
useState<boolean>(false);
const { voter } = useGetVoterInfo();

const onSubmit = () => {
onClickCancel();
closeModal();
};

const retireAsDrep = useCallback(async () => {
try {
setIsRetirementLoading(true);
const isPendingTx = isPendingTransaction();
if (isPendingTx) return;
if (!voter?.deposit) throw new Error(t("errors.appCannotGetDeposit"));

const certBuilder = await buildDRepRetirementCert(
voter?.deposit.toString(),
);
const result = await buildSignSubmitConwayCertTx({
certBuilder,
type: "retireAsDrep",
voterDeposit: voter?.deposit.toString(),
});
if (result) {
openModal({
type: "statusModal",
state: {
buttonText: t("modals.common.goToDashboard"),
dataTestId: "retirement-transaction-submitted-modal",
link: "https://adanordic.com/latest_transactions",
message: t("modals.retirement.message"),
onSubmit,
status: "success",
title: t("modals.retirement.title"),
},
});
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
const errorMessage = error.info ? error.info : error;

openModal({
type: "statusModal",
state: {
buttonText: t("modals.common.goToDashboard"),
dataTestId: "retirement-transaction-error-modal",
message: errorMessage,
onSubmit,
status: "warning",
title: t("modals.common.oops"),
},
});
} finally {
setIsRetirementLoading(false);
}
}, [
buildDRepRetirementCert,
buildSignSubmitConwayCertTx,
isPendingTransaction,
openModal,
voter?.deposit,
]);

return (
<BgCard
actionButtonLabel={t("retirement.continue")}
backButtonLabel={t("cancel")}
isLoadingActionButton={isRetirementLoading}
onClickActionButton={retireAsDrep}
onClickBackButton={onClickCancel}
sx={{ pb: isMobile ? undefined : 5, pt: isMobile ? 4 : 8 }}
>
<Typography sx={{ textAlign: "center" }} variant="headline4">
{t("retirement.whatRetirementMeansTitle")}
</Typography>
<Typography
fontWeight={400}
sx={{
pb: isMobile ? 4 : 6,
pt: 4,
textAlign: "center",
whiteSpace: "pre-line",
}}
variant="body1"
>
{t("retirement.whatRetirementMeansDescription")}
</Typography>
</BgCard>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from "./DRepStorageInformation";
export * from "./DRepStoreDataInfo";
export * from "./RegisterAsDRepForm";
export * from "./RolesAndResponsibilities";
export * from "./WhatRetirementMeans";
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ export const RetireAsSoleVoterBox = () => {
const isPendingTx = isPendingTransaction();
if (isPendingTx) return;
if (!voter?.deposit) {
throw new Error("Can not fetch deposit");
throw new Error(t("errors.appCannotGetDeposit"));
}
const certBuilder = await buildDRepRetirementCert(
voter?.deposit?.toString()
voter?.deposit?.toString(),
);
const result = await buildSignSubmitConwayCertTx({
certBuilder,
Expand Down
7 changes: 4 additions & 3 deletions govtool/frontend/src/consts/paths.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
export const PATHS = {
createGovernanceAction: "/create_governance_action",
dashboard: "/dashboard",
dashboardGovernanceActions: "/connected/governance_actions",
dashboardGovernanceActionsAction: "/connected/governance_actions/:proposalId",
dashboardGovernanceActionsCategory:
"/connected/governance_actions/category/:category",
dashboardGovernanceActions: "/connected/governance_actions",
dashboard: "/dashboard",
delegateTodRep: "/delegate",
error: "/error",
faqs: "/faqs",
governanceActions: "/governance_actions",
governanceActionsAction: "/governance_actions/:proposalId",
governanceActionsCategory: "/governance_actions/category/:category",
governanceActionsCategoryAction:
"/governance_actions/category/:category/:proposalId",
governanceActionsCategory: "/governance_actions/category/:category",
guides: "/guides",
home: "/",
registerAsdRep: "/register",
registerAsSoleVoter: "/register_sole_voter",
retireAsDrep: "/retire_drep",
retireAsSoleVoter: "/retire_sole_voter",
stakeKeys: "/stake_keys",
updateMetadata: "/update_metadata",
Expand Down
8 changes: 8 additions & 0 deletions govtool/frontend/src/i18n/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,7 @@ export const en = {
},
errors: {
appCannotCreateTransaction: "Application can not create transaction.",
appCannotGetDeposit: "Can not fetch deposit",
appCannotGetUtxos: "Application can not get utxos",
appCannotGetVkeys: "Application can not get vkey",
checkIsWalletConnected: "Check if the wallet is connected.",
Expand Down Expand Up @@ -498,6 +499,13 @@ export const en = {
},
},
},
retirement: {
continue: "Continue to Retirement",
retireAsDrep: "Retire as a Drep",
whatRetirementMeansTitle: "What Retirement Means",
whatRetirementMeansDescription:
"By retiring you are giving up your voting rights. Voting Power that is delegated to you will remain in place.\n\nADA Holders that have delegated to be able to see that you are retired in the DRep directory. They will be able to re-delegate their Voting Power to another DRep.\n\nYou can still participate in Governance by proposing Governance Actions, by delegating your personal Voting Power to another DRep, or by coming out of retirement, and assuming your previous role as a DRep.\n\nIf you come out of retirement, your DRep ID will be the same as it was before retirement, and your Voting Power will consist of your own ADA balance and what delegated power that remains associated\nto your DRep ID.",
},
slider: {
showAll: "Show all",
viewAll: "View all",
Expand Down
44 changes: 44 additions & 0 deletions govtool/frontend/src/pages/RetireAsDrep.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Box } from "@mui/material";

import { Background } from "@atoms";
import { PATHS } from "@consts";
import { DashboardTopNav, WhatRetirementMeans } from "@organisms";
import { useScreenDimension, useTranslation } from "@hooks";
import { LinkWithIcon } from "@molecules";
import { checkIsWalletConnected } from "@utils";

export const RetireAsDrep = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const { isMobile } = useScreenDimension();

useEffect(() => {
if (checkIsWalletConnected()) {
navigate(PATHS.home);
}
}, []);

const onClickBackToDashboard = () => navigate(PATHS.dashboard);

return (
<Background isReverted>
<Box
sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
>
<DashboardTopNav title={t("retirement.retireAsDrep")} />
<LinkWithIcon
label={t("backToDashboard")}
onClick={onClickBackToDashboard}
sx={{
mb: isMobile ? 0 : 1.5,
ml: isMobile ? 2 : 5,
mt: isMobile ? 3 : 1.5,
}}
/>
<WhatRetirementMeans onClickCancel={onClickBackToDashboard} />
</Box>
</Background>
);
};
Loading

0 comments on commit 9357eb8

Please sign in to comment.