From 3003be5e68b414ea614132e4b6e0ea1c57b5eb9c Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 22 Mar 2022 10:54:31 +0000
Subject: [PATCH] use end epoch for undelegation completion time

---
 .../src/pages/undelegate/UndelegateForm.tsx   | 33 +++++++++++++------
 nym-wallet/src/pages/undelegate/index.tsx     |  2 +-
 nym-wallet/src/requests/queries.ts            |  6 ++--
 nym-wallet/src/types/rust/epoch.ts            |  8 +++--
 nym-wallet/src/types/rust/index.ts            |  1 +
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx b/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
index ba148cd1ad..3a5bb4ba9d 100644
--- a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
+++ b/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
                         }
                       />
diff --git a/nym-wallet/src/pages/undelegate/index.tsx b/nym-wallet/src/pages/undelegate/index.tsx
index 55d63060af..0bfc84170b 100644
--- a/nym-wallet/src/pages/undelegate/index.tsx
+++ b/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 }));
diff --git a/nym-wallet/src/requests/queries.ts b/nym-wallet/src/requests/queries.ts
index ab83cf9c66..8772214948 100644
--- a/nym-wallet/src/requests/queries.ts
+++ b/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;
 };
diff --git a/nym-wallet/src/types/rust/epoch.ts b/nym-wallet/src/types/rust/epoch.ts
index eaa95571ff..fa64c19044 100644
--- a/nym-wallet/src/types/rust/epoch.ts
+++ b/nym-wallet/src/types/rust/epoch.ts
@@ -1,2 +1,6 @@
-
-export interface Epoch { id: number, start: bigint, end: bigint, duration_seconds: bigint, }
\ No newline at end of file
+export interface Epoch {
+  id: number;
+  start: bigint;
+  end: bigint;
+  duration_seconds: bigint;
+}
diff --git a/nym-wallet/src/types/rust/index.ts b/nym-wallet/src/types/rust/index.ts
index 89bb3211c2..d82e3f75c5 100644
--- a/nym-wallet/src/types/rust/index.ts
+++ b/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';