add epoch info to unbond modal

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') {
     <ErrorModal open message={subtitle} onClose={onClose} />;
@@ -45,6 +47,7 @@ export const ConfirmationDetailsModal = ({
           {title}
         </Typography>
         <Typography>{subtitle}</Typography>
+        {children}
         {txUrl && <Link href={txUrl} target="_blank" sx={{ ml: 1 }} text="View on blockchain" />}
       </Stack>
     </ConfirmationModal>

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<ConfirmationDetailProps>();
+  const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps | undefined>();
   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');
             }}
-          />
+          >
+            <Typography fontWeight="bold">
+              You should NOT shutdown your {isMixnode(bondedNode) ? 'mix node' : 'gateway'} until the unbond process is
+              complete
+            </Typography>
+          </ConfirmationDetailsModal>
         )}
       </NymCard>
     </PageLayout>

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<boolean>(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();
   }, []);
 

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 };
+};