undelegate page update

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

@@ -1,6 +1,16 @@
 import React, { useContext, useEffect } from 'react'
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Alert, Autocomplete, Button, CircularProgress, FormControl, Grid, TextField } from '@mui/material'
+import {
+  Box,
+  Alert,
+  Autocomplete,
+  Button,
+  CircularProgress,
+  FormControl,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { validationSchema } from './validationSchema'
 import { EnumNodeType, TFee } from '../../types'
@@ -63,13 +73,6 @@ export const UndelegateForm = ({
     <FormControl fullWidth>
       <Box sx={{ p: [3, 5] }}>
         <Grid container spacing={3} direction="column">
-          <Grid container item xs={12} justifyContent="space-between">
-            <Grid item>
-              <Alert severity="info" data-testid="fee-amount">
-                {`A fee of ${fees.mixnode.amount} punk will apply to this transaction`}
-              </Alert>
-            </Grid>
-          </Grid>
           <Grid item xs={12}>
             <Controller
               control={control}
@@ -96,6 +99,9 @@ export const UndelegateForm = ({
               )}
             />
           </Grid>
+          <Grid item xs={12}>
+            <Typography sx={{ color: 'nym.info' }}>Fee for this transaction: {fees.mixnode.amount} punk</Typography>
+          </Grid>
         </Grid>
       </Box>
       <Box

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

@@ -2,10 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { NymCard } from '../../components'
 import { UndelegateForm } from './UndelegateForm'
 import { Layout } from '../../layouts'
-import {
-  EnumRequestStatus,
-  RequestStatus,
-} from '../../components/RequestStatus'
+import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus'
 import { Alert, AlertTitle, Box, Button, CircularProgress } from '@mui/material'
 import { getGasFee, getReverseMixDelegations } from '../../requests'
 import { TFee, TDelegation } from '../../types'
@@ -16,9 +13,7 @@ export type TDelegations = {
 
 export const Undelegate = () => {
   const [message, setMessage] = useState<string>()
-  const [status, setStatus] = useState<EnumRequestStatus>(
-    EnumRequestStatus.initial,
-  )
+  const [status, setStatus] = useState<EnumRequestStatus>(EnumRequestStatus.initial)
   const [isLoading, setIsLoading] = useState(true)
   const [fees, setFees] = useState<TFee>()
   const [delegations, setDelegations] = useState<TDelegations>()
@@ -53,11 +48,7 @@ export const Undelegate = () => {
 
   return (
     <Layout>
-      <NymCard
-        title="Undelegate"
-        subheader="Undelegate from a mixnode"
-        noPadding
-      >
+      <NymCard title="Undelegate" subheader="Undelegate from a mixnode" noPadding>
         {isLoading && (
           <Box
             sx={{
@@ -96,9 +87,7 @@ export const Undelegate = () => {
                 Success={
                   <Alert severity="success">
                     {' '}
-                    <AlertTitle data-testid="undelegate-success">
-                      Undelegation complete
-                    </AlertTitle>
+                    <AlertTitle data-testid="undelegate-success">Undelegation complete</AlertTitle>
                     {message}
                   </Alert>
                 }