get updated mixnode details after bonding/unbonding txs

nym-wallet/src/pages/bond/BondForm.tsx

@@ -20,6 +20,7 @@ import { validationSchema } from './validationSchema'
 import { Coin, Gateway, MixNode } from '../../types'
 import { ClientContext, MAJOR_CURRENCY } from '../../context/main'
 import { checkHasEnoughFunds } from '../../utils'
+import { Fee } from '../../components'
 
 type TBondFormFields = {
   withAdvancedOptions: boolean
@@ -78,12 +79,10 @@ const formatData = (data: TBondFormFields) => {
 
 export const BondForm = ({
   disabled,
-  fees,
   onError,
   onSuccess,
 }: {
   disabled: boolean
-  fees?: { [EnumNodeType.mixnode]: Coin; [EnumNodeType.gateway]?: Coin }
   onError: (message?: string) => void
   onSuccess: (details: { address: string; amount: string }) => void
 }) => {
@@ -99,7 +98,7 @@ export const BondForm = ({
     defaultValues,
   })
 
-  const { userBalance } = useContext(ClientContext)
+  const { userBalance, getBondDetails } = useContext(ClientContext)
 
   const watchNodeType = watch('nodeType', defaultValues.nodeType)
   const watchAdvancedOptions = watch('withAdvancedOptions', defaultValues.withAdvancedOptions)
@@ -114,7 +113,8 @@ export const BondForm = ({
     const pledge = await majorToMinor(data.amount)
 
     await bond({ type: data.nodeType, ownerSignature: data.ownerSignature, data: formattedData, pledge })
-      .then(() => {
+      .then(async () => {
+        await getBondDetails()
         userBalance.fetchBalance()
         onSuccess({ address: data.identityKey, amount: data.amount })
       })
@@ -358,28 +358,19 @@ export const BondForm = ({
               )}
             </>
           )}
-          {fees && (
-            <Grid item xs={12}>
-              <Typography sx={{ color: 'nym.fee' }}>
-                {' '}
-                {`Bonding fee: ${
-                  watchNodeType === EnumNodeType.mixnode ? fees.mixnode.amount : fees?.gateway?.amount
-                } ${MAJOR_CURRENCY}`}
-              </Typography>
-            </Grid>
-          )}
         </Grid>
       </Box>
       <Box
         sx={{
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'flex-end',
+          justifyContent: 'space-between',
           borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
           bgcolor: 'grey.100',
           padding: 2,
         }}
       >
+        {!disabled ? <Fee feeType={EnumNodeType.mixnode ? 'BondMixnode' : 'BondGateway'} /> : <div />}
         <Button
           disabled={isSubmitting || disabled}
           variant="contained"

nym-wallet/src/pages/bond/index.tsx

@@ -4,8 +4,7 @@ import { BondForm } from './BondForm'
 import { NymCard } from '../../components'
 import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus'
 import { Layout } from '../../layouts'
-import { getGasFee, unbond } from '../../requests'
-import { TFee } from '../../types'
+import { unbond } from '../../requests'
 import { useCheckOwnership } from '../../hooks/useCheckOwnership'
 import { ClientContext } from '../../context/main'
 import { SuccessView } from './SuccessView'
@@ -14,19 +13,14 @@ export const Bond = () => {
   const [status, setStatus] = useState(EnumRequestStatus.initial)
   const [error, setError] = useState<string>()
   const [successDetails, setSuccessDetails] = useState<{ amount: string; address: string }>()
-  const [fees, setFees] = useState<TFee>()
 
   const { checkOwnership, ownership } = useCheckOwnership()
-  const { userBalance } = useContext(ClientContext)
+  const { userBalance, getBondDetails } = useContext(ClientContext)
 
   useEffect(() => {
     if (status === EnumRequestStatus.initial) {
       const initialiseForm = async () => {
         await checkOwnership()
-        setFees({
-          mixnode: await getGasFee('BondMixnode'),
-          gateway: await getGasFee('BondGateway'),
-        })
         setStatus(EnumRequestStatus.initial)
       }
       initialiseForm()
@@ -45,7 +39,8 @@ export const Bond = () => {
                 onClick={async () => {
                   setStatus(EnumRequestStatus.loading)
                   await unbond(ownership.nodeType!)
-                  userBalance.fetchBalance()
+                  await getBondDetails()
+                  await userBalance.fetchBalance()
                   setStatus(EnumRequestStatus.initial)
                 }}
                 data-testid="unBond"
@@ -71,7 +66,6 @@ export const Bond = () => {
         )}
         {status === EnumRequestStatus.initial && (
           <BondForm
-            fees={!ownership.hasOwnership ? fees : undefined}
             onError={(e?: string) => {
               setError(e)
               setStatus(EnumRequestStatus.error)

nym-wallet/src/pages/settings/system-variables.tsx

@@ -48,8 +48,6 @@ export const SystemVariables = ({
     defaultValues: { profitMarginPercent: mixnodeDetails.profit_margin_percent.toString() },
   })
 
-
-
   const { userBalance } = useContext(ClientContext)
 
   const onSubmit = async (data: TFormData) => {
@@ -106,7 +104,7 @@ export const SystemVariables = ({
           <DataField
             title="Node stake saturation"
             info="Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is the total amount of tokens available to stakeholders and K is the number of nodes in the reward set."
-            Indicator={<PercentIndicator value={saturation} />}
+            Indicator={<PercentIndicator value={saturation} warning={saturation >= 100} />}
           />
         </Stack>
       </Box>
@@ -159,16 +157,21 @@ const DataField = ({ title, info, Indicator }: { title: string; info: string; In
   </Grid>
 )
 
-const PercentIndicator = ({ value }: { value: number }) => {
+const PercentIndicator = ({ value, warning }: { value: number; warning?: boolean }) => {
   return (
     <Grid container alignItems="center">
       <Grid item xs={2}>
-        <Typography component="span" sx={{ color: 'nym.fee', fontWeight: 600 }}>
+        <Typography component="span" sx={{ color: warning ? 'error.main' : 'nym.fee', fontWeight: 600 }}>
           {value}%
         </Typography>
       </Grid>
       <Grid item xs={10}>
-        <LinearProgress color="inherit" sx={{ color: 'nym.fee' }} variant="determinate" value={value} />
+        <LinearProgress
+          color="inherit"
+          sx={{ color: warning ? 'error.main' : 'nym.fee' }}
+          variant="determinate"
+          value={value < 100 ? value : 100}
+        />
       </Grid>
     </Grid>
   )

nym-wallet/src/pages/unbond/index.tsx

@@ -9,7 +9,7 @@ import { unbond } from '../../requests'
 export const Unbond = () => {
   const [isLoading, setIsLoading] = useState(false)
   const { checkOwnership, ownership } = useCheckOwnership()
-  const { userBalance } = useContext(ClientContext)
+  const { userBalance, getBondDetails } = useContext(ClientContext)
 
   useEffect(() => {
     const initialiseForm = async () => {
@@ -33,6 +33,7 @@ export const Unbond = () => {
                   setIsLoading(true)
                   await unbond(ownership.nodeType)
                   await userBalance.fetchBalance()
+                  await getBondDetails()
                   await checkOwnership()
                   setIsLoading(false)
                 }}

nym-wallet/src/types/global.ts

@@ -7,7 +7,7 @@ export enum EnumNodeType {
 
 export type TNodeOwnership = {
   hasOwnership: boolean
-  nodeType: EnumNodeType
+  nodeType?: EnumNodeType
 }
 
 export type TClientDetails = {