From 81f36e8da7d0c8ff9d82ee86b98f0fdcc097a0ff Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Thu, 8 Sep 2022 13:36:44 +0200
Subject: [PATCH] some refactor

---
 .../src/pages/bonding/node-settings/index.tsx | 26 ++++++++++++++-----
 .../node-settings/node-settings.constant.tsx  |  1 +
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx
index bf25e8c3fb..bfc33ef3e8 100644
--- a/nym-wallet/src/pages/bonding/node-settings/index.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx
@@ -22,8 +22,8 @@ export const NodeSettings = () => {
 
   const theme = useTheme();
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
+  const handleChange = (event: React.SyntheticEvent, tab: number) => {
+    setValue(tab);
   };
 
   const { network } = useContext(AppContext);
@@ -32,6 +32,16 @@ export const NodeSettings = () => {
 
   const navigate = useNavigate();
 
+  const handleCloseUnboundModal = () => {
+    if (nodeSettingsNav.length === 1) {
+      navigate('/bonding');
+    } else if (nodeSettingsNav[0] === 'Unbond') {
+      setValue(1);
+    } else {
+      setValue(0);
+    }
+  };
+
   const handleUnbond = async (fee?: FeeDetails) => {
     const tx = await unbond(fee);
     setConfirmationDetails({
@@ -48,7 +58,6 @@ export const NodeSettings = () => {
       subtitle: error,
     });
   };
-
   return (
     <PageLayout>
       <NymCard
@@ -107,9 +116,14 @@ export const NodeSettings = () => {
         }
       >
         <Divider />
-        {value === 0 && bondedNode && <NodeGeneralSettings bondedNode={bondedNode} />}
-        {value === 1 && bondedNode && (
-          <UnbondModal node={bondedNode} onClose={() => setValue(0)} onConfirm={handleUnbond} onError={handleError} />
+        {nodeSettingsNav[value] === 'General' && bondedNode && <NodeGeneralSettings bondedNode={bondedNode} />}
+        {nodeSettingsNav[value] === 'Unbond' && bondedNode && (
+          <UnbondModal
+            node={bondedNode}
+            onClose={handleCloseUnboundModal}
+            onConfirm={handleUnbond}
+            onError={handleError}
+          />
         )}
         {confirmationDetails && confirmationDetails.status === 'success' && (
           <ConfirmationDetailsModal
diff --git a/nym-wallet/src/pages/bonding/node-settings/node-settings.constant.tsx b/nym-wallet/src/pages/bonding/node-settings/node-settings.constant.tsx
index e7edea2bb6..d03d795e65 100644
--- a/nym-wallet/src/pages/bonding/node-settings/node-settings.constant.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/node-settings.constant.tsx
@@ -1 +1,2 @@
+// If we want to hide a tab we can remove the tab from the bellow array
 export const nodeSettingsNav = ['General', 'Unbond'];