Merge branch 'feat/2130-tables-update' of github.com:nymtech/nym into feat/2130-tables-update

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 | 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,43 @@ 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} />
+            <Tooltip title={host} placement="top" arrow>
+              <Box width="fit-content">
+                <IdentityKey identityKey={identityKey} />
+              </Box>
+            </Tooltip>
           </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/Delegation/DelegationItem.tsx

@@ -29,15 +29,18 @@ export const DelegationItem = ({
 }) => {
   const operatingCost = isDelegation(item) && item.cost_params?.interval_operating_cost;
 
+  const tooltipText = () => {
+    if (nodeIsUnbonded) {
+      return 'This node has unbonded and it does not exist anymore. You need to undelegate from it to get your stake and outstanding rewards (if any) back.';
+    } else if (item.uses_vesting_contract_tokens) {
+      return 'Delegation made with locked tockens';
+    } else {
+      return '';
+    }
+  };
+
   return (
-    <Tooltip
-      arrow
-      title={
-        nodeIsUnbonded
-          ? 'This node has unbonded and it does not exist anymore. You need to undelegate from it to get your stake and outstanding rewards (if any) back.'
-          : ''
-      }
-    >
+    <Tooltip arrow title={tooltipText()}>
       <TableRow key={item.node_identity} sx={{ color: !item.node_identity ? 'error.main' : 'inherit' }}>
         <TableCell sx={{ color: 'inherit', pr: 1 }} padding="normal">
           {nodeIsUnbonded ? (

nym-wallet/src/pages/bonding/node-settings/settings-pages/general-settings/ParametersSettings.tsx

@@ -1,24 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import {
-  Button,
-  Divider,
-  Typography,
-  TextField,
-  InputAdornment,
-  Grid,
-  CircularProgress,
-  Box,
-  FormHelperText,
-} from '@mui/material';
+import { Button, Divider, Typography, TextField, InputAdornment, Grid, Box, FormHelperText } from '@mui/material';
 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 +17,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';
@@ -39,7 +28,6 @@ import { LoadingModal } from 'src/components/Modals/LoadingModal';
 export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode }): JSX.Element => {
   const [openConfirmationModal, setOpenConfirmationModal] = useState<boolean>(false);
   const [intervalTime, setIntervalTime] = useState<string>();
-  const [nextEpoch, setNextEpoch] = useState<string>();
   const [pendingUpdates, setPendingUpdates] = useState<MixNodeCostParams>();
   const { clientDetails } = useContext(AppContext);
   const theme = useTheme();
@@ -63,27 +51,13 @@ 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 } = await getIntervalAsDate();
+      setIntervalTime(intervalTime);
+    } catch {
+      console.log('cant retrieve next interval');
+    }
   };
 
   const getPendingEvents = async () => {
@@ -107,7 +81,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
   };
 
   useEffect(() => {
-    getIntervalAsDate();
+    getNextInterval();
     getPendingEvents();
   }, []);
 
@@ -137,7 +111,16 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
   };
 
   return (
-    <Grid container xs item>
+    <Grid
+      container
+      xs
+      item
+      sx={{
+        '& .MuiGrid-item': {
+          pl: 0,
+        },
+      }}
+    >
       {fee && (
         <ConfirmTx
           open
@@ -152,9 +135,6 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
       <Alert
         title={
           <>
-            <Box component="span" sx={{ fontWeight: 600, mr: 2 }}>
-              {`Next epoch ${nextEpoch}`}
-            </Box>
             <Box component="span" sx={{ fontWeight: 600 }}>{`Next interval: ${intervalTime}`}</Box>
           </>
         }
@@ -206,7 +186,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
             </Grid>
           )}
         </Grid>
-        <Divider flexItem />
+        <Divider flexItem sx={{ position: 'relative', left: '-24px', width: 'calc(100% + 24px)' }} />
         <Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3} spacing={1}>
           <Grid item>
             <Typography variant="body1" sx={{ fontWeight: 600, mb: 1 }}>
@@ -249,7 +229,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
             </Grid>
           </Grid>
         </Grid>
-        <Divider flexItem />
+        <Divider flexItem sx={{ position: 'relative', left: '-24px', width: 'calc(100% + 24px)' }} />
         <Grid container justifyContent="end">
           <Button
             size="large"

nym-wallet/src/pages/delegation/index.tsx

@@ -18,7 +18,7 @@ import { DelegationListItemActions } from '../../components/Delegation/Delegatio
 import { RedeemModal } from '../../components/Rewards/RedeemModal';
 import { DelegationModal, DelegationModalProps } from '../../components/Delegation/DelegationModal';
 import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
-import { toPercentIntegerString } from '../../utils';
+import { toPercentIntegerString, getIntervalAsDate } from 'src/utils';
 
 const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: object) =>
   isStorybook
@@ -36,9 +36,9 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
   const [confirmationModalProps, setConfirmationModalProps] = useState<DelegationModalProps | undefined>();
   const [currentDelegationListActionItem, setCurrentDelegationListActionItem] = useState<DelegationWithEverything>();
   const [saturationError, setSaturationError] = useState<{ action: 'compound' | 'delegate'; saturation: string }>();
+  const [nextEpoch, setNextEpoch] = useState<string | Error>();
 
   const theme = useTheme();
-
   const {
     clientDetails,
     network,
@@ -75,6 +75,15 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     };
   };
 
+  const getNextInterval = async () => {
+    try {
+      const { nextEpoch } = await getIntervalAsDate();
+      setNextEpoch(nextEpoch);
+    } catch {
+      setNextEpoch(Error());
+    }
+  };
+
   // Refresh the rewards and delegations periodically when page is mounted
   useEffect(() => {
     const timer = setInterval(refresh, 1 * 60 * 1000); // every 1 minute
@@ -83,6 +92,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
 
   useEffect(() => {
     refresh();
+    getNextInterval();
   }, [clientDetails, confirmationModalProps]);
 
   const handleDelegationItemActionClick = (item: DelegationWithEverything, action: DelegationListItemActions) => {
@@ -332,35 +342,45 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     <>
       <Paper elevation={0} sx={{ p: 3, mt: 4 }}>
         <Stack spacing={3}>
-          <Box display="flex" justifyContent="space-between" alignItems="center">
-            <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
-              Delegations
-            </Typography>
+          <Box display="flex" justifyContent="space-between">
+            {' '}
+            <Box display="flex" flexDirection="column">
+              <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
+                Delegations
+              </Typography>
+              {!!delegations?.length && (
+                <Link
+                  href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
+                  target="_blank"
+                  rel="noreferrer"
+                  text="Network Explorer"
+                  fontSize={14}
+                  fontWeight={theme.palette.mode === 'light' ? 400 : 600}
+                  noIcon
+                  marginTop={1.5}
+                />
+              )}
+            </Box>
             {!!delegations?.length && (
-              <Link
-                href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
-                target="_blank"
-                rel="noreferrer"
-                text="Network Explorer"
-                fontSize={14}
-                fontWeight={theme.palette.mode === 'light' ? 400 : 600}
-                noIcon
-              />
+              <Button
+                variant="contained"
+                disableElevation
+                onClick={() => setShowNewDelegationModal(true)}
+                sx={{ py: 1.5, px: 5, color: 'primary.contrastText', height: 'fit-content' }}
+              >
+                Delegate
+              </Button>
             )}
           </Box>
 
           {!!delegations?.length && (
             <Box display="flex" justifyContent="space-between" alignItems="end">
               <RewardsSummary isLoading={isLoading} totalDelegation={totalDelegations} totalRewards={totalRewards} />
-
-              <Button
-                variant="contained"
-                disableElevation
-                onClick={() => setShowNewDelegationModal(true)}
-                sx={{ py: 1.5, px: 5, color: 'primary.contrastText' }}
-              >
-                Delegate
-              </Button>
+              {nextEpoch instanceof Error ? null : (
+                <Typography fontSize={14}>
+                  Next epoch starts at <b>{nextEpoch}</b>
+                </Typography>
+              )}
             </Box>
           )}
           {delegationsComponent(delegations)}

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,
+        }),
+        'dd/MM/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 };
+};