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