From f0d66fdd888f93e19e4e79a78a2c01e20b7decc4 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Fri, 16 Dec 2022 10:20:04 +0000 Subject: [PATCH 1/2] add epoch info to unbond modal --- .../Bonding/modals/ConfirmationModal.tsx | 3 ++ .../bonding/node-settings/NodeSettings.tsx | 12 +++++-- .../general-settings/ParametersSettings.tsx | 28 +++-------------- nym-wallet/src/utils/index.ts | 31 ++++++++++++++++++- 4 files changed, 48 insertions(+), 26 deletions(-) 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 }; +}; From c509555d15dc7c11ccffcf6e10c3ffdf72fa380e Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Fri, 16 Dec 2022 10:33:14 +0000 Subject: [PATCH 2/2] fix param input layout --- .../settings-pages/general-settings/ParametersSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..45216a7137 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 @@ -223,7 +223,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode Changes to cost will be applied in the next interval. - +