bond table changes

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<string | undefined | Error>();
   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 (
     <Stack gap={2}>
       <NymCard
@@ -133,32 +150,39 @@ export const BondedMixnode = ({
               </Typography>
               <NodeStatus status={status} />
             </Box>
-            {name && (
-              <Tooltip title={host} arrow>
-                <Typography fontWeight="regular" variant="h6" width="fit-content">
-                  {name}
-                </Typography>
-              </Tooltip>
+            {name?.includes(textWhenNotName) ? null : (
+              <Typography fontWeight="regular" variant="h6" width="fit-content">
+                {name}
+              </Typography>
             )}
-            <IdentityKey identityKey={identityKey} />
+            <IdentityKey identityKey={identityKey} tooltipTitle={host} />
           </Stack>
         }
         Action={
-          isMixnode(mixnode) && (
-            <Tooltip title={mixnode.isUnbonding ? 'You have a pending unbond event. Node settings are disabled.' : ''}>
-              <Box>
-                <Button
-                  variant="text"
-                  color="secondary"
-                  onClick={() => navigate('/bonding/node-settings')}
-                  startIcon={<NodeIcon />}
-                  disabled={mixnode.isUnbonding}
-                >
-                  Node Settings
-                </Button>
-              </Box>
-            </Tooltip>
-          )
+          <Box display="flex" flexDirection="column" alignItems="flex-end" justifyContent="space-between" height={70}>
+            {isMixnode(mixnode) && (
+              <Tooltip
+                title={mixnode.isUnbonding ? 'You have a pending unbond event. Node settings are disabled.' : ''}
+              >
+                <Box>
+                  <Button
+                    variant="text"
+                    color="secondary"
+                    onClick={() => navigate('/bonding/node-settings')}
+                    startIcon={<NodeIcon />}
+                    disabled={mixnode.isUnbonding}
+                  >
+                    Node Settings
+                  </Button>
+                </Box>
+              </Tooltip>
+            )}
+            {nextEpoch instanceof Error ? null : (
+              <Typography fontSize={14} marginRight={1}>
+                Next epoch starts at <b>{nextEpoch}</b>
+              </Typography>
+            )}
+          </Box>
         }
       >
         <NodeTable headers={headers} cells={cells} />

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 }) => (
-  <Stack direction="row">
-    <Typography variant="body2" component="span" fontWeight={400} sx={{ mr: 1, color: 'text.primary' }}>
-      {splice(6, identityKey)}
-    </Typography>
-    <CopyToClipboard value={identityKey} sx={{ fontSize: 18 }} />
-  </Stack>
+export const IdentityKey = ({ identityKey, tooltipTitle }: { identityKey: string; tooltipTitle?: string }) => (
+  <Tooltip title={tooltipTitle || ''} placement="top" arrow>
+    <Stack direction="row" width="fit-content">
+      <Typography variant="body2" component="span" fontWeight={400} sx={{ mr: 1, color: 'text.primary' }}>
+        {splice(6, identityKey)}
+      </Typography>
+      <CopyToClipboard value={identityKey} sx={{ fontSize: 18 }} />
+    </Stack>
+  </Tooltip>
 );

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

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 {

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