use end epoch for undelegation completion time

nym-wallet/src/pages/undelegate/UndelegateForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import {
   ListItem,
@@ -12,10 +12,10 @@ import {
   TextField,
 } from '@mui/material';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { addHours, format } from 'date-fns';
+import { format } from 'date-fns';
 import { validationSchema } from './validationSchema';
-import { EnumNodeType, PendingUndelegate, TDelegation } from '../../types';
-import { undelegate, vestingUnelegateFromMixnode } from '../../requests';
+import { EnumNodeType, Epoch, PendingUndelegate, TDelegation } from '../../types';
+import { getCurrentEpoch, undelegate, vestingUnelegateFromMixnode } from '../../requests';
 import { Fee } from '../../components';
 
 type TFormData = {
@@ -49,6 +49,15 @@ export const UndelegateForm = ({
     resolver: yupResolver(validationSchema),
   });
 
+  const [currentEndEpoch, setCurrentEndEpoch] = useState<Epoch['end']>();
+
+  useEffect(() => {
+    (async () => {
+      const epoch = await getCurrentEpoch();
+      setCurrentEndEpoch(epoch.end);
+    })();
+  }, []);
+
   const onSubmit = async (data: TFormData) => {
     let res;
     try {
@@ -83,23 +92,27 @@ export const UndelegateForm = ({
               render={() => (
                 <Autocomplete
                   disabled={isSubmitting}
-                  getOptionDisabled={(opt) => pendingUndelegations?.some((item) => item.mix_identity === opt) || false}
-                  options={delegations?.map((d) => d.node_identity) || []}
+                  getOptionDisabled={(opt) =>
+                    pendingUndelegations?.some((item) => item.mix_identity === opt.node_identity) || false
+                  }
+                  options={delegations || []}
                   renderOption={(props, opt) => (
                     <ListItem
                       {...props}
                       onClick={(e: React.MouseEvent<HTMLLIElement>) => {
-                        setValue('identity', opt);
+                        setValue('identity', opt.node_identity);
                         props.onClick!(e);
                       }}
                       disablePadding
                       disableGutters
                     >
                       <ListItemText
-                        primary={opt}
+                        primary={opt.node_identity}
                         secondary={
-                          pendingUndelegations?.some((item) => item.mix_identity === opt)
-                            ? `Pending - Expected time of completion: ${format(addHours(new Date(), 1), 'HH:00')}`
+                          pendingUndelegations?.some((item) => item.mix_identity === opt.node_identity)
+                            ? `Pending - Expected time of completion: ${
+                                currentEndEpoch ? format(new Date(Number(currentEndEpoch) * 1000), 'HH:mm') : 'N/A'
+                              }`
                             : undefined
                         }
                       />

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

@@ -24,7 +24,7 @@ export const Undelegate = () => {
       const mixnodeDelegations = await getReverseMixDelegations();
       const pendingEvents = await getPendingDelegations();
       await getCurrentEpoch();
-      console.log({ mixnodeDelegations, pendingEvents });
+
       const pendingUndelegationEvents = pendingEvents
         .filter((evt): evt is { Undelegate: PendingUndelegate } => 'Undelegate' in evt)
         .map((e) => ({ ...e.Undelegate }));

nym-wallet/src/requests/queries.ts

@@ -10,6 +10,7 @@ import {
   StakeSaturationResponse,
   TMixnodeBondDetails,
   TPagedDelegations,
+  Epoch,
 } from '../types';
 
 export const getReverseMixDelegations = async (): Promise<TPagedDelegations> => {
@@ -74,8 +75,7 @@ export const userBalance = async (): Promise<Balance> => {
   return res;
 };
 
-export const getCurrentEpoch = async (): Promise<any> => {
-  const res: any = await invoke('get_current_epoch');
-  console.log(res);
+export const getCurrentEpoch = async (): Promise<Epoch> => {
+  const res: Epoch = await invoke('get_current_epoch');
   return res;
 };

nym-wallet/src/types/rust/epoch.ts

@@ -1,2 +1,6 @@
-
-export interface Epoch { id: number, start: bigint, end: bigint, duration_seconds: bigint, }
+export interface Epoch {
+  id: number;
+  start: bigint;
+  end: bigint;
+  duration_seconds: bigint;
+}

nym-wallet/src/types/rust/index.ts

@@ -22,3 +22,4 @@ export * from './pledgedata';
 export * from './vestingperiod';
 export * from './pendingundelegate';
 export * from './delegationevent';
+export * from './epoch';