diff --git a/nym-wallet/src/components/Bonding/modals/ConfirmationModal.tsx b/nym-wallet/src/components/Bonding/modals/ConfirmationModal.tsx
index 9a3c683b55..53439a8e8c 100644
--- a/nym-wallet/src/components/Bonding/modals/ConfirmationModal.tsx
+++ b/nym-wallet/src/components/Bonding/modals/ConfirmationModal.tsx
@@ -14,6 +14,7 @@ export type ConfirmationDetailProps = {
export const ConfirmationDetailsModal = ({
title,
subtitle,
+ children,
txUrl,
status,
onClose,
@@ -23,6 +24,7 @@ export const ConfirmationDetailsModal = ({
onClose: () => void;
sx?: SxProps;
backdropProps?: object;
+ children?: React.ReactNode;
}) => {
if (status === 'error') {
;
@@ -45,6 +47,7 @@ export const ConfirmationDetailsModal = ({
{title}
{subtitle}
+ {children}
{txUrl && }
diff --git a/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
index 798993dc49..2a9ef67f13 100644
--- a/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx
@@ -18,6 +18,7 @@ import { NodeUnbondPage } from './settings-pages/NodeUnbondPage';
import { createNavItems } from './node-settings.constant';
import { isMixnode } from 'src/types';
import { ApyPlayground } from './apy-playground';
+import { getIntervalAsDate } from 'src/utils';
export const NodeSettings = () => {
const theme = useTheme();
@@ -26,7 +27,7 @@ export const NodeSettings = () => {
const navigate = useNavigate();
const location = useLocation();
- const [confirmationDetails, setConfirmationDetails] = useState();
+ const [confirmationDetails, setConfirmationDetails] = useState();
const [value, setValue] = React.useState('General');
const handleChange = (event: React.SyntheticEvent, tab: string) => {
setValue(tab);
@@ -40,9 +41,11 @@ export const NodeSettings = () => {
const handleUnbond = async (fee?: FeeDetails) => {
const tx = await unbond(fee);
+ const { nextEpoch } = await getIntervalAsDate();
setConfirmationDetails({
status: 'success',
title: 'Unbond successful',
+ subtitle: `This operation will complete when the new epoch starts at: ${nextEpoch}`,
txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`,
});
};
@@ -135,7 +138,12 @@ export const NodeSettings = () => {
setConfirmationDetails(undefined);
navigate('/bonding');
}}
- />
+ >
+
+ You should NOT shutdown your {isMixnode(bondedNode) ? 'mix node' : 'gateway'} until the unbond process is
+ complete
+
+
)}
diff --git a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx
index e927a3eebc..21550d0efa 100644
--- a/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx
@@ -24,6 +24,7 @@ import { AppContext } from 'src/context';
import { useGetFee } from 'src/hooks/useGetFee';
import { ConfirmTx } from 'src/components/ConfirmTX';
import { LoadingModal } from 'src/components/Modals/LoadingModal';
+import { getIntervalAsDate } from 'src/utils';
export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode }): JSX.Element => {
const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
@@ -51,14 +52,14 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
defaultValues,
});
- const getNextInterval = async () => {
+
+ const getCurrentInterval = async () => {
try {
const { intervalTime } = await getIntervalAsDate();
setIntervalTime(intervalTime);
} catch {
console.log('cant retrieve next interval');
}
- };
const getPendingEvents = async () => {
const events = await getPendingIntervalEvents();
@@ -81,7 +82,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
};
useEffect(() => {
- getNextInterval();
+ getCurrentInterval();
getPendingEvents();
}, []);
@@ -203,7 +204,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
Changes to cost will be applied in the next interval.
-
+
{
}
return nym;
};
+
+export const getIntervalAsDate = async () => {
+ const interval = await getCurrentInterval();
+ const secondsToNextInterval =
+ Number(interval.epochs_in_interval - interval.current_epoch_id) * Number(interval.epoch_length_seconds);
+
+ const nextInterval = format(
+ add(new Date(), {
+ seconds: secondsToNextInterval,
+ }),
+ 'MM/dd/yyyy HH:mm',
+ );
+
+ const nextEpoch = format(
+ add(fromUnixTime(Number(interval.current_epoch_start_unix)), {
+ seconds: Number(interval.epoch_length_seconds),
+ }),
+ 'HH:mm',
+ );
+
+ return { nextEpoch, nextInterval };
+};