more fees work

tauri-wallet/src/routes/bond/index.tsx

@@ -10,16 +10,15 @@ import {
 } from '../../components/RequestStatus'
 import { Layout } from '../../layouts'
 import { getGasFee } from '../../requests'
-import { Coin, EnumNodeType } from '../../types'
+import { TFee } from '../../types'
 
 export const Bond = () => {
   const [status, setStatus] = useState(EnumRequestStatus.loading)
   const [message, setMessage] = useState<string>()
+  const [fees, setFees] = useState<TFee>()
 
   const theme: Theme = useTheme()
 
-  const [fees, setFees] = useState<{ [key in EnumNodeType]: Coin }>()
-
   useEffect(() => {
     const getFees = async () => {
       const mixnode = await getGasFee('BondMixnode')

tauri-wallet/src/routes/delegate/DelegateForm.tsx

@@ -11,10 +11,11 @@ import {
 } from '@material-ui/core'
 import { useForm } from 'react-hook-form'
 import { NodeTypeSelector } from '../../components/NodeTypeSelector'
-import { EnumNodeType } from '../../types/global'
+import { EnumNodeType, TFee } from '../../types'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { validationSchema } from './validationSchema'
 import { invoke } from '@tauri-apps/api'
+import { Alert } from '@material-ui/lab'
 
 type TDelegateForm = {
   nodeType: EnumNodeType
@@ -29,9 +30,11 @@ const defaultValues: TDelegateForm = {
 }
 
 export const DelegateForm = ({
+  fees,
   onError,
   onSuccess,
 }: {
+  fees: TFee
   onError: (message?: string) => void
   onSuccess: (message?: string) => void
 }) => {
@@ -68,11 +71,22 @@ export const DelegateForm = ({
     <FormControl fullWidth>
       <div style={{ padding: theme.spacing(3, 5) }}>
         <Grid container spacing={3}>
-          <Grid item xs={12}>
-            <NodeTypeSelector
-              nodeType={watchNodeType}
-              setNodeType={(nodeType) => setValue('nodeType', nodeType)}
-            />
+          <Grid container item xs={12} justifyContent="space-between">
+            <Grid item>
+              <NodeTypeSelector
+                nodeType={watchNodeType}
+                setNodeType={(nodeType) => setValue('nodeType', nodeType)}
+              />
+            </Grid>
+            <Grid item>
+              <Alert severity="info">
+                {`A fee of ${
+                  watchNodeType === EnumNodeType.mixnode
+                    ? fees.mixnode.amount
+                    : fees.gateway.amount
+                } PUNK will apply to this transaction`}
+              </Alert>
+            </Grid>
           </Grid>
           <Grid item xs={12}>
             <TextField

tauri-wallet/src/routes/delegate/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { Button, Theme } from '@material-ui/core'
+import React, { useEffect, useState } from 'react'
+import { Box, Button, CircularProgress, Theme } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
 import { DelegateForm } from './DelegateForm'
 import { Layout } from '../../layouts'
@@ -9,12 +9,30 @@ import {
   RequestStatus,
 } from '../../components/RequestStatus'
 import { Alert } from '@material-ui/lab'
+import { TFee } from '../../types'
+import { getGasFee } from '../../requests'
 
 export const Delegate = () => {
   const [status, setStatus] = useState<EnumRequestStatus>(
     EnumRequestStatus.initial
   )
   const [message, setMessage] = useState<string>()
+  const [isLoading, setIsLoading] = useState(true)
+  const [fees, setFees] = useState<TFee>()
+
+  useEffect(() => {
+    const getFees = async () => {
+      const mixnode = await getGasFee('DelegateToMixnode')
+      const gateway = await getGasFee('DelegateToGateway')
+      setFees({
+        mixnode: mixnode,
+        gateway: gateway,
+      })
+      setIsLoading(false)
+    }
+
+    getFees()
+  }, [])
 
   const theme: Theme = useTheme()
   return (
@@ -24,9 +42,21 @@ export const Delegate = () => {
         subheader="Delegate to mixnode or gateway"
         noPadding
       >
+        {isLoading && (
+          <Box
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: theme.spacing(3),
+            }}
+          >
+            <CircularProgress size={48} />
+          </Box>
+        )}
         <>
-          {status === EnumRequestStatus.initial && (
+          {status === EnumRequestStatus.initial && fees && (
             <DelegateForm
+              fees={fees}
               onError={(message?: string) => {
                 setStatus(EnumRequestStatus.error)
                 setMessage(message)

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

@@ -8,12 +8,13 @@ import {
   TextField,
   Theme,
 } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
 import { useTheme } from '@material-ui/styles'
 import { invoke } from '@tauri-apps/api'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { validationSchema } from './validationSchema'
 import { NodeTypeSelector } from '../../components/NodeTypeSelector'
-import { EnumNodeType } from '../../types/global'
+import { EnumNodeType, TFee } from '../../types'
 
 type TFormData = {
   nodeType: EnumNodeType
@@ -26,9 +27,11 @@ const defaultValues = {
 }
 
 export const UndelegateForm = ({
+  fees,
   onError,
   onSuccess,
 }: {
+  fees: TFee
   onError: (message?: string) => void
   onSuccess: (message?: string) => void
 }) => {
@@ -52,38 +55,26 @@ export const UndelegateForm = ({
 
   const theme: Theme = useTheme()
 
-  const handleAmountChange = (event: any) => {
-    // don't ask me about that. javascript works in mysterious ways
-    // and this is apparently a good way of checking if string
-    // is purely made of numeric characters
-    // const parsed = +event.target.value
-    // if (isNaN(parsed)) {
-    //   setIsValidAmount(false)
-    // } else {
-    //   try {
-    //     const allocationCheck = { error: undefined, message: '' }
-    //     if (allocationCheck.error) {
-    //       setAllocationWarning(allocationCheck.message)
-    //       setIsValidAmount(false)
-    //     } else {
-    //       setAllocationWarning(allocationCheck.message)
-    //       setIsValidAmount(true)
-    //     }
-    //   } catch {
-    //     setIsValidAmount(false)
-    //   }
-    // }
-  }
-
   return (
     <FormControl fullWidth>
       <div style={{ padding: theme.spacing(3, 5) }}>
         <Grid container spacing={3} direction="column">
-          <Grid item xs={12}>
-            <NodeTypeSelector
-              nodeType={watchNodeType}
-              setNodeType={(nodeType) => setValue('nodeType', nodeType)}
-            />
+          <Grid container item xs={12} justifyContent="space-between">
+            <Grid item>
+              <NodeTypeSelector
+                nodeType={watchNodeType}
+                setNodeType={(nodeType) => setValue('nodeType', nodeType)}
+              />
+            </Grid>
+            <Grid item>
+              <Alert severity="info">
+                {`A fee of ${
+                  watchNodeType === EnumNodeType.mixnode
+                    ? fees.mixnode.amount
+                    : fees.gateway.amount
+                } PUNK will apply to this transaction`}
+              </Alert>
+            </Grid>
           </Grid>
           <Grid item xs={12}>
             <TextField

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

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import { Alert } from '@material-ui/lab'
+import { useTheme } from '@material-ui/styles'
 import { NymCard } from '../../components'
 import { UndelegateForm } from './UndelegateForm'
 import { Layout } from '../../layouts'
@@ -6,13 +8,33 @@ import {
   EnumRequestStatus,
   RequestStatus,
 } from '../../components/RequestStatus'
-import { Alert } from '@material-ui/lab'
+import { Box, CircularProgress, Theme } from '@material-ui/core'
+import { getGasFee } from '../../requests'
+import { TFee } from '../../types'
 
 export const Undelegate = () => {
   const [message, setMessage] = useState<string>()
   const [status, setStaus] = useState<EnumRequestStatus>(
     EnumRequestStatus.initial
   )
+  const [isLoading, setIsLoading] = useState(true)
+  const [fees, setFees] = useState<TFee>()
+
+  useEffect(() => {
+    const getFees = async () => {
+      const mixnode = await getGasFee('UndelegateFromMixnode')
+      const gateway = await getGasFee('UndelegateFromGateway')
+      setFees({
+        mixnode: mixnode,
+        gateway: gateway,
+      })
+      setIsLoading(false)
+    }
+
+    getFees()
+  }, [])
+
+  const theme: Theme = useTheme()
 
   return (
     <Layout>
@@ -21,9 +43,21 @@ export const Undelegate = () => {
         subheader="Undelegate from a mixnode or gateway"
         noPadding
       >
+        {isLoading && (
+          <Box
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: theme.spacing(3),
+            }}
+          >
+            <CircularProgress size={48} />
+          </Box>
+        )}
         <>
-          {status === EnumRequestStatus.initial && (
+          {status === EnumRequestStatus.initial && fees && (
             <UndelegateForm
+              fees={fees}
               onError={(message) => {
                 setMessage(message)
                 setStaus(EnumRequestStatus.error)

tauri-wallet/src/types/global.ts

@@ -1,3 +1,5 @@
+import { Coin } from '.'
+
 export enum EnumNodeType {
   mixnode = 'mixnode',
   gateway = 'gateway',
@@ -20,3 +22,5 @@ export type TSignInWithMnemonic = {
 export type TCreateAccount = {
   mnemonic: string
 } & TSignInWithMnemonic
+
+export type TFee = { [key in EnumNodeType]: Coin }