get bond details when settings is opened or settings tab changes

nym-wallet/src/pages/bond/validationSchema.ts

@@ -15,17 +15,21 @@ export const validationSchema = Yup.object().shape({
     .test('valid-id-key', 'A valid identity key is required', function (value) {
       return validateKey(value || '', 32)
     }),
+
   sphinxKey: Yup.string()
     .required('A sphinx key is required')
     .test('valid-sphinx-key', 'A valid sphinx key is required', function (value) {
       return validateKey(value || '', 32)
     }),
+
   ownerSignature: Yup.string()
     .required('Signature is required')
     .test('valid-signature', 'A valid signature is required', function (value) {
       return validateKey(value || '', 64)
     }),
+
   profitMarginPercent: Yup.number().required('Profit Percentage is required').min(0).max(100),
+
   amount: Yup.string()
     .required('An amount is required')
     .test('valid-amount', `Pledge error`, async function (value) {
@@ -41,16 +45,19 @@ export const validationSchema = Yup.object().shape({
       }
       return true
     }),
+
   host: Yup.string()
     .required('A host is required')
     .test('valid-host', 'A valid host is required', function (value) {
       return !!value ? isValidHostname(value) : false
     }),
+
   version: Yup.string()
     .required('A version is required')
     .test('valid-version', 'A valid version is required', function (value) {
       return !!value ? validateVersion(value) : false
     }),
+
   location: Yup.lazy((value) => {
     if (!!value) {
       return Yup.string()
@@ -61,21 +68,25 @@ export const validationSchema = Yup.object().shape({
     }
     return Yup.mixed().notRequired()
   }),
+
   mixPort: Yup.number()
     .required('A mixport is required')
     .test('valid-mixport', 'A valid mixport is required', function (value) {
       return !!value ? validateRawPort(value) : false
     }),
+
   verlocPort: Yup.number()
     .required('A verloc port is required')
     .test('valid-verloc', 'A valid verloc port is required', function (value) {
       return !!value ? validateRawPort(value) : false
     }),
+
   httpApiPort: Yup.number()
     .required('A http-api port is required')
     .test('valid-http', 'A valid http-api port is required', function (value) {
       return !!value ? validateRawPort(value) : false
     }),
+
   clientsPort: Yup.number()
     .required('A clients port is required')
     .test('valid-clients', 'A valid clients port is required', function (value) {

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Alert, Box, Dialog } from '@mui/material'
 import { NymCard } from '../../components'
 import { ClientContext } from '../../context/main'
@@ -15,11 +15,15 @@ const tabs = ['Profile', 'System variables', 'Node stats']
 export const Settings = () => {
   const [selectedTab, setSelectedTab] = useState(0)
 
-  const { mixnodeDetails, showSettings, handleShowSettings, getBondDetails } = useContext(ClientContext)
+  const { mixnodeDetails, showSettings, getBondDetails, handleShowSettings } = useContext(ClientContext)
   const { status, saturation, rewardEstimation, inclusionProbability } = useSettingsState(showSettings)
 
   const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab)
 
+  useEffect(() => {
+    getBondDetails()
+  }, [showSettings, selectedTab])
+
   return showSettings ? (
     <Dialog open={true} onClose={handleShowSettings} maxWidth="md" fullWidth>
       <NymCard
@@ -39,13 +43,11 @@ export const Settings = () => {
               You don't currently have a node running
             </Alert>
           )}
-          {selectedTab === 0 && mixnodeDetails && <Profile />}
-          {selectedTab === 1 && mixnodeDetails && (
+          {selectedTab === 0 && <Profile />}
+          {selectedTab === 1 && (
             <SystemVariables
-              mixnodeDetails={mixnodeDetails.mix_node}
               saturation={saturation}
               rewardEstimation={rewardEstimation}
-              onUpdate={getBondDetails}
               inclusionProbability={inclusionProbability}
             />
           )}