unbond modal verification step

nym-wallet/src/components/Bonding/modals/UnbondModal.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Typography, Alert, TextField } from '@mui/material';
-import { useEffect } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { TBondedGateway, TBondedMixnode } from 'src/context';
 import { useGetFee } from 'src/hooks/useGetFee';
 import { isGateway, isMixnode } from 'src/types';
@@ -21,13 +21,54 @@ interface Props {
   onError: (e: string) => void;
 }
 
-type TUnbondModalStep = 1 | 2;
+type TUnbondModalStep = 1 | 2 | 3;
 
-export const UnbondModal = ({ node, onConfirm, onClose, onError }: Props) => {
-  const { fee, isFeeLoading, getFee, feeError } = useGetFee();
-  const [step, setStep] = useState<TUnbondModalStep>(1);
+const UnbondFirstStep = ({ handleVerification, onClose }: { handleVerification: any; onClose: () => void }) => {
   const [verificationText, setVerificationText] = useState<string>('');
 
+  const theme = useTheme();
+
+  return (
+    <SimpleModal
+      open
+      header="Unbond"
+      okLabel="Unbond"
+      okDisabled={!verificationText.toUpperCase().match(/^UNBOND$/)}
+      onOk={handleVerification}
+      onClose={onClose}
+    >
+      <Typography sx={{ fontSize: 14, fontWeight: 600, mb: 3 }}>
+        If you unbond your node you will loose all your delegators!
+      </Typography>
+      <Alert
+        severity="error"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          textAlign: 'center',
+        }}
+      >
+        This action is irreversible and it will not be possible to restore the current state again
+      </Alert>
+      <Typography sx={{ my: 3, fontSize: 14 }}>
+        To unbond, type <span style={{ color: theme.palette.nym.highlight }}>UNBOND</span> in the field below and click
+        UNBOND button
+      </Typography>
+      <TextField
+        type="input"
+        value={verificationText}
+        onChange={(e) => {
+          setVerificationText(e.target.value);
+        }}
+        fullWidth
+      />
+    </SimpleModal>
+  );
+};
+
+const UnbondSecondStep = ({ node, onConfirm, onClose, onError }: Props) => {
+  const { fee, isFeeLoading, getFee, feeError } = useGetFee();
   useEffect(() => {
     if (feeError) {
       onError(feeError);
@@ -51,63 +92,43 @@ export const UnbondModal = ({ node, onConfirm, onClose, onError }: Props) => {
       getFee(simulateVestingUnbondGateway, {});
     }
   }, [node]);
-  console.log('step', step === 1);
+
+  return (
+    <SimpleModal
+      open
+      header="Unbond"
+      subHeader="Unbond and remove your node from the mixnet"
+      okLabel="Unbond"
+      onOk={onConfirm}
+      onClose={onClose}
+    >
+      <ModalListItem label="Amount to unbond" value={`${node.bond.amount} ${node.bond.denom.toUpperCase()}`} divider />
+      {isMixnode(node) && (
+        <ModalListItem
+          label="Operator rewards"
+          value={
+            node.operatorRewards ? `${node.operatorRewards.amount} ${node.operatorRewards.denom.toUpperCase()}` : '-'
+          }
+          divider
+        />
+      )}
+      <ModalFee isLoading={isFeeLoading} fee={fee} divider />
+      <Typography fontSize="small">Tokens will be transferred to the account you are logged in with now</Typography>
+    </SimpleModal>
+  );
+};
+
+export const UnbondModal = ({ node, onConfirm, onClose, onError }: Props) => {
+  const [step, setStep] = useState<TUnbondModalStep>(1);
+
+  const handleVerification = () => {
+    setStep(2);
+  };
+
   return (
     <div>
-      {step === 1 && (
-        <SimpleModal
-          open
-          header="Unbond"
-          subHeader="If you unbond your node you will loose all your delegators!"
-          okLabel="Unbond"
-          okDisabled={Boolean(!verificationText.match('UNBOUND'))}
-          onOk={onConfirm}
-          onClose={onClose}
-        >
-          <Alert severity="error">
-            This action is irreversible and it will not be possible to restore the current state again
-          </Alert>
-          <Typography>
-            To unbond, type <span style={{ color: 'orange' }}>UNBOND</span> in the field below and click UNBOND button
-          </Typography>
-          <TextField
-            type="input"
-            value={verificationText}
-            onChange={(e) => setVerificationText(e.target.value)}
-            autoFocus
-            fullWidth
-          />
-        </SimpleModal>
-      )}
-      {step === 2 && (
-        <SimpleModal
-          open
-          header="Unbond"
-          subHeader="Unbond and remove your node from the mixnet"
-          okLabel="Unbond"
-          onOk={onConfirm}
-          onClose={onClose}
-        >
-          <ModalListItem
-            label="Amount to unbond"
-            value={`${node.bond.amount} ${node.bond.denom.toUpperCase()}`}
-            divider
-          />
-          {isMixnode(node) && (
-            <ModalListItem
-              label="Operator rewards"
-              value={
-                node.operatorRewards
-                  ? `${node.operatorRewards.amount} ${node.operatorRewards.denom.toUpperCase()}`
-                  : '-'
-              }
-              divider
-            />
-          )}
-          <ModalFee isLoading={isFeeLoading} fee={fee} divider />
-          <Typography fontSize="small">Tokens will be transferred to the account you are logged in with now</Typography>
-        </SimpleModal>
-      )}
+      {step === 1 && <UnbondFirstStep handleVerification={handleVerification} onClose={onClose} />}
+      {step === 2 && <UnbondSecondStep onClose={onClose} onConfirm={onConfirm} onError={onError} node={node} />}
     </div>
   );
 };

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

@@ -79,7 +79,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon
             borderRadius: 0,
             bgcolor: 'background.default',
             color: (theme) => theme.palette.nym.nymWallet.text.blue,
-            '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue },
+            '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue, mr: 1 },
           }}
         >
           <strong>Your changes will be ONLY saved on the display.</strong> Remember to change the values on your node’s

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

@@ -46,7 +46,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode
             borderRadius: 0,
             bgcolor: 'background.default',
             color: (theme) => theme.palette.nym.nymWallet.text.blue,
-            '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue },
+            '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue, mr: 1 },
           }}
         >
           <strong>Profit margin can be changed once a month, your changes will be applied in the next interval</strong>

nym-wallet/src/pages/bonding/node-settings/index.tsx

@@ -26,7 +26,6 @@ export const NodeSettings = () => {
   const navigate = useNavigate();
 
   const handleUnbond = async (fee?: FeeDetails) => {
-    navigate('/bonding');
     const tx = await unbond(fee);
     setConfirmationDetails({
       status: 'success',
@@ -36,7 +35,6 @@ export const NodeSettings = () => {
   };
 
   const handleError = (error: string) => {
-    navigate('/bonding');
     setConfirmationDetails({
       status: 'error',
       title: 'An error occurred',

nym-wallet/src/theme/mui-theme.d.ts

@@ -31,6 +31,7 @@ declare module '@mui/material/styles' {
     highlight: string;
     success: string;
     info: string;
+    red: string;
     fee: string;
     background: { light: string; dark: string };
     text: {

nym-wallet/src/theme/theme.tsx

@@ -23,6 +23,7 @@ const nymPalette: NymPalette = {
   highlight: '#FB6E4E',
   success: '#21D073',
   info: '#60D7EF',
+  red: '#DA465B',
   fee: '#967FF0',
   background: { light: '#F4F6F8', dark: '#1D2125' },
   text: {