display mixnode update fee

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

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import {
   Box,
   Button,
@@ -17,8 +17,8 @@ import { useForm } from 'react-hook-form'
 import { InfoTooltip } from '../../components/InfoToolTip'
 import { TMixnodeBondDetails } from '../../types'
 import { validationSchema } from './validationSchema'
-import { updateMixnode } from '../../requests'
-import { ClientContext } from '../../context/main'
+import { getGasFee, updateMixnode } from '../../requests'
+import { ClientContext, MAJOR_CURRENCY } from '../../context/main'
 
 type TFormData = {
   profitMarginPercent: number
@@ -26,6 +26,7 @@ type TFormData = {
 
 export const SystemVariables = ({ mixnodeDetails }: { mixnodeDetails: TMixnodeBondDetails['mix_node'] }) => {
   const [nodeUpdateResponse, setNodeUpdateResponse] = useState<'success' | 'failed'>()
+  const [configFee, setConfigFee] = useState<string>()
 
   const {
     register,
@@ -36,6 +37,13 @@ export const SystemVariables = ({ mixnodeDetails }: { mixnodeDetails: TMixnodeBo
     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) => {
@@ -107,7 +115,9 @@ export const SystemVariables = ({ mixnodeDetails }: { mixnodeDetails: TMixnodeBo
         ) : nodeUpdateResponse === 'failed' ? (
           <Typography sx={{ color: 'error.main', fontWeight: 600 }}>Node updated failed</Typography>
         ) : (
-          <Box />
+          <Typography sx={{ color: 'nym.fee' }}>
+            Fee for this transaction: {`${configFee} ${MAJOR_CURRENCY}`}{' '}
+          </Typography>
         )}
         <Button
           variant="contained"

nym-wallet/src/requests/index.ts

@@ -10,7 +10,6 @@ import {
   TauriContractStateParams,
   TauriTxResult,
   TCreateAccount,
-  TDelegation,
   TMixnodeBondDetails,
   TPagedDelegations,
   TSignInWithMnemonic,
@@ -50,6 +49,7 @@ export const undelegate = async ({
 
 export const send = async (args: { amount: Coin; address: string; memo: string }): Promise<TauriTxResult> =>
   await invoke('send', args)
+
 export const checkMixnodeOwnership = async (): Promise<boolean> => await invoke('owns_mixnode')
 
 export const checkGatewayOwnership = async (): Promise<boolean> => await invoke('owns_gateway')