diff --git a/nym-wallet/src/components/Bonding/BondedMixnode.tsx b/nym-wallet/src/components/Bonding/BondedMixnode.tsx index 6ff0151b29..69b37b64f5 100644 --- a/nym-wallet/src/components/Bonding/BondedMixnode.tsx +++ b/nym-wallet/src/components/Bonding/BondedMixnode.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Box, Button, Chip, Stack, Tooltip, Typography } from '@mui/material'; import { Link } from '@nymproject/react/link/Link'; @@ -11,6 +11,9 @@ import { Node as NodeIcon } from '../../svg-icons/node'; import { Cell, Header, NodeTable } from './NodeTable'; import { BondedMixnodeActions, TBondedMixnodeActions } from './BondedMixnodeActions'; import { NodeStats } from './NodeStats'; +import { getIntervalAsDate } from 'src/utils'; + +const textWhenNotName = 'This node has not yet set a name'; const headers: Header[] = [ { @@ -63,6 +66,7 @@ export const BondedMixnode = ({ network?: Network; onActionSelect: (action: TBondedMixnodeActions) => void; }) => { + const [nextEpoch, setNextEpoch] = useState(); const navigate = useNavigate(); const { name, @@ -78,6 +82,15 @@ export const BondedMixnode = ({ identityKey, host, } = mixnode; + + const getNextInterval = async () => { + try { + const { nextEpoch } = await getIntervalAsDate(); + setNextEpoch(nextEpoch); + } catch { + setNextEpoch(Error()); + } + }; const cells: Cell[] = [ { cell: `${stake.amount} ${stake.denom}`, @@ -121,6 +134,10 @@ export const BondedMixnode = ({ }, ]; + useEffect(() => { + getNextInterval(); + }, []); + return ( - {name && ( - - - {name} - - + {name?.includes(textWhenNotName) ? null : ( + + {name} + )} - + } Action={ - isMixnode(mixnode) && ( - - - - - - ) + + {isMixnode(mixnode) && ( + + + + + + )} + {nextEpoch instanceof Error ? null : ( + + Next epoch starts at {nextEpoch} + + )} + } > diff --git a/nym-wallet/src/components/IdentityKey.tsx b/nym-wallet/src/components/IdentityKey.tsx index bca08ab68c..372a6bf40d 100644 --- a/nym-wallet/src/components/IdentityKey.tsx +++ b/nym-wallet/src/components/IdentityKey.tsx @@ -1,13 +1,15 @@ import React from 'react'; -import { Stack, Typography } from '@mui/material'; +import { Stack, Typography, Tooltip } from '@mui/material'; import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard'; import { splice } from 'src/utils'; -export const IdentityKey = ({ identityKey }: { identityKey: string }) => ( - - - {splice(6, identityKey)} - - - +export const IdentityKey = ({ identityKey, tooltipTitle }: { identityKey: string; tooltipTitle?: string }) => ( + + + + {splice(6, identityKey)} + + + + ); 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..ba98640ddb 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 @@ -15,10 +15,8 @@ import { import { useTheme } from '@mui/material/styles'; import { CurrencyDenom, MixNodeCostParams } from '@nymproject/types'; import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField'; -import { add, format, fromUnixTime } from 'date-fns'; import { isMixnode } from 'src/types'; import { - getCurrentInterval, getPendingIntervalEvents, simulateUpdateMixnodeCostParams, simulateVestingUpdateMixnodeCostParams, @@ -29,6 +27,7 @@ import { TBondedMixnode } from 'src/context/bonding'; import { SimpleModal } from 'src/components/Modals/SimpleModal'; import { bondedNodeParametersValidationSchema } from 'src/components/Bonding/forms/mixnodeValidationSchema'; import { Console } from 'src/utils/console'; +import { getIntervalAsDate } from 'src/utils'; import { Alert } from 'src/components/Alert'; import { ChangeMixCostParams } from 'src/pages/bonding/types'; import { AppContext } from 'src/context'; @@ -63,27 +62,14 @@ 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 getNextInterval = async () => { + try { + const { intervalTime, nextEpoch } = await getIntervalAsDate(); + setNextEpoch(nextEpoch); + setIntervalTime(intervalTime); + } catch { + console.log('cant retrieve next interval'); + } }; const getPendingEvents = async () => { @@ -107,7 +93,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode }; useEffect(() => { - getIntervalAsDate(); + getNextInterval(); getPendingEvents(); }, []); diff --git a/nym-wallet/src/utils/index.ts b/nym-wallet/src/utils/index.ts index 49d56c6f72..7e8cdca1f5 100644 --- a/nym-wallet/src/utils/index.ts +++ b/nym-wallet/src/utils/index.ts @@ -7,6 +7,8 @@ import { TPoolOption } from 'src/components'; import { getDefaultMixnodeCostParams, getLockedCoins, getSpendableCoins, userBalance } from '../requests'; import { Console } from './console'; +export * from './nextEpoch'; + export const validateKey = (key: string, bytesLength: number): boolean => { // it must be a valid base58 key try { diff --git a/nym-wallet/src/utils/nextEpoch.ts b/nym-wallet/src/utils/nextEpoch.ts new file mode 100644 index 0000000000..799cf635fd --- /dev/null +++ b/nym-wallet/src/utils/nextEpoch.ts @@ -0,0 +1,23 @@ +import { getCurrentInterval } from 'src/requests'; +import { add, format, fromUnixTime } from 'date-fns'; + +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 intervalTime = 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 { intervalTime, nextEpoch }; +}; \ No newline at end of file