From b2ce142c17855449a2f3327f324c01593ef51fe4 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 30 May 2022 22:06:23 +0100
Subject: [PATCH] integrate modal divider with modal component

---
 .../components/Delegation/DelegateModal.tsx   | 24 ++++++++++---------
 .../components/Delegation/ModalListItem.tsx   | 18 +++++++++-----
 .../components/Delegation/Modals.stories.tsx  |  8 +++----
 .../components/Delegation/UndelegateModal.tsx |  7 +++---
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/nym-wallet/src/components/Delegation/DelegateModal.tsx b/nym-wallet/src/components/Delegation/DelegateModal.tsx
index e34a056727..bfd3f67344 100644
--- a/nym-wallet/src/components/Delegation/DelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/DelegateModal.tsx
@@ -22,9 +22,9 @@ export const DelegateModal: React.FC<{
   buttonText?: string;
   rewardInterval: string;
   accountBalance?: string;
-  estimatedMonthlyReward: number;
-  profitMarginPercentage: number | null;
-  nodeUptimePercentage: number | null;
+  estimatedReward?: number;
+  profitMarginPercentage?: number | null;
+  nodeUptimePercentage?: number | null;
   fee: number;
   currency: CurrencyDenom;
   initialAmount?: string;
@@ -41,7 +41,7 @@ export const DelegateModal: React.FC<{
   rewardInterval,
   accountBalance,
   fee,
-  estimatedMonthlyReward,
+  estimatedReward,
   currency,
   profitMarginPercentage,
   nodeUptimePercentage,
@@ -131,19 +131,21 @@ export const DelegateModal: React.FC<{
         <Typography fontWeight={600}>Account balance</Typography>
         <Typography fontWeight={600}>{accountBalance}</Typography>
       </Stack>
-      <ModalListItem label="Rewards payout interval" value={rewardInterval} />
-      <ModalDivider />
+      <ModalListItem label="Rewards payout interval" value={rewardInterval} hidden divider />
       <ModalListItem
         label="Node profit margin"
         value={`${profitMarginPercentage ? profitMarginPercentage + '%' : '-'}`}
+        hidden={profitMarginPercentage === undefined}
+        divider
       />
-      <ModalDivider />
-      <ModalListItem label="Node uptime" value={`${nodeUptimePercentage ? nodeUptimePercentage + '%' : '-'}`} />
-      <ModalDivider />
       <ModalListItem
-        label="Est. monthly reward for 10 NYM delegation"
-        value={`${estimatedMonthlyReward} ${currency}`}
+        label="Node uptime"
+        value={`${nodeUptimePercentage ? nodeUptimePercentage + '%' : '-'}`}
+        hidden={nodeUptimePercentage === undefined}
+        divider
       />
+
+      <ModalListItem label="Node est. reward per epoch" value={`${estimatedReward} ${currency}`} hidden divider />
       <Stack direction="row" justifyContent="space-between" mt={4}>
         <Typography fontSize="smaller" color={(theme) => theme.palette.nym.fee}>
           Fee for this transaction:
diff --git a/nym-wallet/src/components/Delegation/ModalListItem.tsx b/nym-wallet/src/components/Delegation/ModalListItem.tsx
index 13a99ef64f..24da1f7506 100644
--- a/nym-wallet/src/components/Delegation/ModalListItem.tsx
+++ b/nym-wallet/src/components/Delegation/ModalListItem.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
+import { ModalDivider } from '../Modals/ModalDivider';
 
 export const ModalListItem: React.FC<{
   label: string;
+  divider?: boolean;
+  hidden?: boolean;
   value: React.ReactNode;
-}> = ({ label, value }) => (
-  <Stack direction="row" justifyContent="space-between">
-    <Typography fontSize="smaller">{label}:</Typography>
-    <Typography fontSize="smaller">{value}</Typography>
-  </Stack>
+}> = ({ label, value, hidden, divider }) => (
+  <Box sx={{ display: hidden ? 'none' : 'block' }}>
+    <Stack direction="row" justifyContent="space-between">
+      <Typography fontSize="smaller">{label}:</Typography>
+      <Typography fontSize="smaller">{value}</Typography>
+    </Stack>
+    {divider && <ModalDivider />}
+  </Box>
 );
diff --git a/nym-wallet/src/components/Delegation/Modals.stories.tsx b/nym-wallet/src/components/Delegation/Modals.stories.tsx
index e27bd9b1c3..7a46833599 100644
--- a/nym-wallet/src/components/Delegation/Modals.stories.tsx
+++ b/nym-wallet/src/components/Delegation/Modals.stories.tsx
@@ -52,7 +52,7 @@ export const Delegate = () => {
         onOk={async () => setOpen(false)}
         currency="NYM"
         fee={0.004375}
-        estimatedMonthlyReward={50.423}
+        estimatedReward={50.423}
         accountBalance={'425.2345053'}
         nodeUptimePercentage={99.28394}
         profitMarginPercentage={11.12334234}
@@ -74,8 +74,7 @@ export const DelegateBelowMinimum = () => {
         onOk={async () => setOpen(false)}
         currency="NYM"
         fee={0.004375}
-        estimatedMonthlyReward={50.423}
-        accountBalance={'425.2345053'}
+        estimatedReward={425.2345053}
         nodeUptimePercentage={99.28394}
         profitMarginPercentage={11.12334234}
         rewardInterval="weekly"
@@ -99,7 +98,7 @@ export const DelegateMore = () => {
         buttonText="Delegate more"
         currency="NYM"
         fee={0.004375}
-        estimatedMonthlyReward={50.423}
+        estimatedReward={50.423}
         accountBalance={'425.2345053'}
         nodeUptimePercentage={99.28394}
         profitMarginPercentage={11.12334234}
@@ -123,6 +122,7 @@ export const Undelegate = () => {
         fee={0.004375}
         amount={150}
         identityKey="AA6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyxx"
+        proxy={null}
       />
     </>
   );
diff --git a/nym-wallet/src/components/Delegation/UndelegateModal.tsx b/nym-wallet/src/components/Delegation/UndelegateModal.tsx
index 4fa5c43306..d37e013adb 100644
--- a/nym-wallet/src/components/Delegation/UndelegateModal.tsx
+++ b/nym-wallet/src/components/Delegation/UndelegateModal.tsx
@@ -6,15 +6,16 @@ import { SimpleModal } from '../Modals/SimpleModal';
 export const UndelegateModal: React.FC<{
   open: boolean;
   onClose?: () => void;
-  onOk?: (identityKey: string) => void;
+  onOk?: (identityKey: string, proxy: string | null) => void;
   identityKey: string;
   amount: number;
   fee: number;
   currency: string;
-}> = ({ identityKey, open, onClose, onOk, amount, fee, currency }) => {
+  proxy: string | null;
+}> = ({ identityKey, open, onClose, onOk, amount, fee, currency, proxy }) => {
   const handleOk = () => {
     if (onOk) {
-      onOk(identityKey);
+      onOk(identityKey, proxy);
     }
   };
   return (