update settings state

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

@@ -17,7 +17,7 @@ export const Settings = () => {
   const { showSettings, handleShowSettings } = useContext(ClientContext)
   const [selectedTab, setSelectedTab] = useState(0)
 
-  const { mixnodeDetails, status, saturation, rewardEstimation } = useSettingsState(showSettings)
+  const { mixnodeDetails, status, saturation, rewardEstimation, getBondDetails } = useSettingsState(showSettings)
 
   const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab)
 
@@ -47,6 +47,7 @@ export const Settings = () => {
               mixnodeDetails={mixnodeDetails.mix_node}
               saturation={saturation}
               rewardEstimation={rewardEstimation}
+              onUpdate={getBondDetails}
             />
           )}
           {selectedTab === 2 && mixnodeDetails && <NodeStats mixnodeId={mixnodeDetails.mix_node.identity_key} />}

nym-wallet/src/pages/settings/profile.tsx

@@ -1,7 +1,6 @@
+import React from 'react'
 import { Button, Stack, TextField } from '@mui/material'
 import { Box } from '@mui/system'
-import React from 'react'
-import { InfoTooltip } from '../../components/InfoToolTip'
 
 export const Profile = () => {
   return (

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

@@ -19,6 +19,7 @@ import { TMixnodeBondDetails } from '../../types'
 import { validationSchema } from './validationSchema'
 import { getGasFee, updateMixnode } from '../../requests'
 import { ClientContext, MAJOR_CURRENCY } from '../../context/main'
+import { Fee } from '../../components'
 
 type TFormData = {
   profitMarginPercent: number
@@ -28,10 +29,12 @@ export const SystemVariables = ({
   mixnodeDetails,
   saturation,
   rewardEstimation,
+  onUpdate,
 }: {
   mixnodeDetails: TMixnodeBondDetails['mix_node']
   saturation: number
   rewardEstimation: number
+  onUpdate: () => void
 }) => {
   const [nodeUpdateResponse, setNodeUpdateResponse] = useState<'success' | 'failed'>()
   const [configFee, setConfigFee] = useState<string>()
@@ -45,21 +48,16 @@ export const SystemVariables = ({
     defaultValues: { profitMarginPercent: mixnodeDetails.profit_margin_percent.toString() },
   })
 
-  useEffect(() => {
-    ;(async () => {
-      const fee = await getGasFee('UpdateMixnodeConfig')
-      setConfigFee(fee.amount)
-    })()
-  }, [])
+
 
   const { userBalance } = useContext(ClientContext)
 
   const onSubmit = async (data: TFormData) => {
     try {
-      await updateMixnode({ profitMarginPercent: data.profitMarginPercent }).then(() => {
-        userBalance.fetchBalance()
-        setNodeUpdateResponse('success')
-      })
+      await updateMixnode({ profitMarginPercent: data.profitMarginPercent })
+      await userBalance.fetchBalance()
+      onUpdate()
+      setNodeUpdateResponse('success')
     } catch (e) {
       setNodeUpdateResponse('failed')
       console.log(e)
@@ -127,9 +125,7 @@ export const SystemVariables = ({
         ) : nodeUpdateResponse === 'failed' ? (
           <Typography sx={{ color: 'error.main', fontWeight: 600 }}>Node updated failed</Typography>
         ) : (
-          <Typography sx={{ color: 'nym.fee' }}>
-            Fee for this transaction: {`${configFee} ${MAJOR_CURRENCY}`}{' '}
-          </Typography>
+          <Fee feeType="UpdateMixnodeConfig" />
         )}
         <Button
           variant="contained"

nym-wallet/src/pages/settings/useSettingsState.ts

@@ -9,9 +9,9 @@ import {
 } from '../../requests'
 import { TMixnodeBondDetails, MixnodeStatus } from '../../types'
 
-export const useSettingsState = (showSettings: boolean) => {
+export const useSettingsState = (shouldUpdate: boolean) => {
   const [mixnodeDetails, setMixnodeDetails] = useState<TMixnodeBondDetails | null>()
-  const [status, setStatus] = useState<MixnodeStatus>('NotFound')
+  const [status, setStatus] = useState<MixnodeStatus>('not_found')
   const [saturation, setSaturation] = useState<number>(0)
   const [rewardEstimation, setRewardEstimation] = useState<number>(0)
 
@@ -49,18 +49,19 @@ export const useSettingsState = (showSettings: boolean) => {
   }
 
   useEffect(() => {
-    if (showSettings) {
+    if (shouldUpdate) {
       getBondDetails()
       getStatus()
       getStakeSaturation()
       getRewardEstimation()
     }
-  }, [showSettings])
+  }, [shouldUpdate])
 
   return {
     status,
     saturation,
     mixnodeDetails,
     rewardEstimation,
+    getBondDetails,
   }
 }

nym-wallet/src/types/rust/mixnodestatus.ts

@@ -1 +1 @@
-export type MixnodeStatus = "Active" | "Standby" | "Inactive" | "NotFound";
+export type MixnodeStatus = 'active' | 'standby' | 'inactive' | 'not_found'