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 7aa7407a48..c5a8437e2a 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
@@ -18,7 +18,6 @@ import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField'
import { add, format, fromUnixTime } from 'date-fns';
import { isMixnode } from 'src/types';
import {
- getCurrentInterval,
getPendingIntervalEvents,
simulateUpdateMixnodeCostParams,
simulateVestingUpdateMixnodeCostParams,
@@ -35,6 +34,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);
@@ -63,27 +63,9 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
defaultValues,
});
- const getIntervalAsDate = async () => {
- const interval = await getCurrentInterval();
- const secondsToNextInterval =
- Number(interval.epochs_in_interval - interval.current_epoch_id) * Number(interval.epoch_length_seconds);
-
- setIntervalTime(
- format(
- add(new Date(), {
- seconds: secondsToNextInterval,
- }),
- 'MM/dd/yyyy HH:mm',
- ),
- );
- setNextEpoch(
- format(
- add(fromUnixTime(Number(interval.current_epoch_start_unix)), {
- seconds: Number(interval.epoch_length_seconds),
- }),
- 'HH:mm',
- ),
- );
+ const getCurrentInterval = async () => {
+ const { nextEpoch } = await getIntervalAsDate();
+ setNextEpoch(nextEpoch);
};
const getPendingEvents = async () => {
@@ -107,7 +89,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
};
useEffect(() => {
- getIntervalAsDate();
+ getCurrentInterval();
getPendingEvents();
}, []);
diff --git a/nym-wallet/src/utils/index.ts b/nym-wallet/src/utils/index.ts
index 49d56c6f72..10cae9455a 100644
--- a/nym-wallet/src/utils/index.ts
+++ b/nym-wallet/src/utils/index.ts
@@ -2,9 +2,16 @@ import { appWindow } from '@tauri-apps/api/window';
import bs58 from 'bs58';
import Big from 'big.js';
import { valid } from 'semver';
+import { add, format, fromUnixTime } from 'date-fns';
import { isValidRawCoin, DecCoin, MixNodeCostParams } from '@nymproject/types';
import { TPoolOption } from 'src/components';
-import { getDefaultMixnodeCostParams, getLockedCoins, getSpendableCoins, userBalance } from '../requests';
+import {
+ getCurrentInterval,
+ getDefaultMixnodeCostParams,
+ getLockedCoins,
+ getSpendableCoins,
+ userBalance,
+} from '../requests';
import { Console } from './console';
export const validateKey = (key: string, bytesLength: number): boolean => {
@@ -198,3 +205,25 @@ export const unymToNym = (unym: string | Big, dp = 4) => {
}
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 };
+};