add gas fees to bond form

tauri-wallet/src/components/NymCard.tsx

@@ -1,19 +1,12 @@
 import React from 'react'
 import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
 
-export const NymCard = ({
-  title,
-  subheader,
-  Action,
-  noPadding,
-  children,
-}: {
+export const NymCard: React.FC<{
   title: string
   subheader?: string
   Action?: React.ReactNode
   noPadding?: boolean
-  children: React.ReactElement
-}) => {
+}> = ({ title, subheader, Action, noPadding, children }) => {
   const theme = useTheme()
   return (
     <Card variant="outlined">

tauri-wallet/src/components/RequestStatus.tsx

@@ -3,10 +3,10 @@ import { CircularProgress, Theme } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
 
 export enum EnumRequestStatus {
-  initial,
-  error,
-  loading,
-  success,
+  initial = 'initial',
+  error = 'error',
+  loading = 'loading',
+  success = 'success',
 }
 
 export const RequestStatus = ({

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

@@ -16,8 +16,9 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import { EnumNodeType } from '../../types/global'
 import { NodeTypeSelector } from '../../components/NodeTypeSelector'
 import { validationSchema } from './validationSchema'
-import { Gateway, MixNode } from '../../types'
+import { Coin, Gateway, MixNode } from '../../types'
 import { invoke } from '@tauri-apps/api'
+import { Alert } from '@material-ui/lab'
 
 type TBondFormFields = {
   withAdvancedOptions: boolean
@@ -74,9 +75,11 @@ const formatData = (data: TBondFormFields) => {
 }
 
 export const BondForm = ({
+  fees,
   onError,
   onSuccess,
 }: {
+  fees: { [key in EnumNodeType]: Coin }
   onError: (message?: string) => void
   onSuccess: (message?: string) => void
 }) => {
@@ -117,15 +120,26 @@ export const BondForm = ({
     <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)
-                if (nodeType === EnumNodeType.mixnode)
-                  setValue('location', undefined)
-              }}
-            />
+          <Grid container item justifyContent="space-between">
+            <Grid item>
+              <NodeTypeSelector
+                nodeType={watchNodeType}
+                setNodeType={(nodeType) => {
+                  setValue('nodeType', nodeType)
+                  if (nodeType === EnumNodeType.mixnode)
+                    setValue('location', undefined)
+                }}
+              />
+            </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/bond/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 { Alert } from '@material-ui/lab'
 import { useTheme } from '@material-ui/styles'
 import { BondForm } from './BondForm'
@@ -9,63 +9,93 @@ import {
   RequestStatus,
 } from '../../components/RequestStatus'
 import { Layout } from '../../layouts'
+import { getGasFee } from '../../requests'
+import { Coin, EnumNodeType } from '../../types'
 
 export const Bond = () => {
-  const [status, setStatus] = useState(EnumRequestStatus.initial)
+  const [status, setStatus] = useState(EnumRequestStatus.loading)
   const [message, setMessage] = useState<string>()
 
   const theme: Theme = useTheme()
 
+  const [fees, setFees] = useState<{ [key in EnumNodeType]: Coin }>()
+
+  useEffect(() => {
+    const getFees = async () => {
+      const mixnode = await getGasFee('BondMixnode')
+      const gateway = await getGasFee('BondGateway')
+      setFees({
+        mixnode: mixnode,
+        gateway: gateway,
+      })
+      setStatus(EnumRequestStatus.initial)
+    }
+
+    getFees()
+  }, [])
+
+  console.log(fees, status, message)
   return (
     <Layout>
       <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
-        <>
-          {status === EnumRequestStatus.initial && (
-            <BondForm
-              onError={(e?: string) => {
-                setMessage(e)
-                setStatus(EnumRequestStatus.error)
-              }}
-              onSuccess={(message?: string) => {
-                setMessage(message)
-                setStatus(EnumRequestStatus.success)
-              }}
+        {status === EnumRequestStatus.loading && (
+          <Box
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              padding: theme.spacing(3),
+            }}
+          >
+            <CircularProgress size={48} />
+          </Box>
+        )}
+        {status === EnumRequestStatus.initial && (
+          <BondForm
+            fees={fees!}
+            onError={(e?: string) => {
+              setMessage(e)
+              setStatus(EnumRequestStatus.error)
+            }}
+            onSuccess={(message?: string) => {
+              setMessage(message)
+              setStatus(EnumRequestStatus.success)
+            }}
+          />
+        )}
+        {(status === EnumRequestStatus.error ||
+          status === EnumRequestStatus.success) && (
+          <>
+            <RequestStatus
+              status={status}
+              Success={
+                <Alert severity="success">Successfully bonded node</Alert>
+              }
+              Error={
+                <Alert severity="error">
+                  An error occurred with the request: {message}
+                </Alert>
+              }
             />
-          )}
-          {status !== EnumRequestStatus.initial && (
-            <>
-              <RequestStatus
-                status={status}
-                Success={
-                  <Alert severity="success">Successfully bonded node</Alert>
-                }
-                Error={
-                  <Alert severity="error">
-                    An error occurred with the request: {message}
-                  </Alert>
-                }
-              />
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'flex-end',
-                  borderTop: `1px solid ${theme.palette.grey[200]}`,
-                  background: theme.palette.grey[100],
-                  padding: theme.spacing(2),
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                borderTop: `1px solid ${theme.palette.grey[200]}`,
+                background: theme.palette.grey[100],
+                padding: theme.spacing(2),
+              }}
+            >
+              <Button
+                onClick={() => {
+                  setStatus(EnumRequestStatus.initial)
                 }}
               >
-                <Button
-                  onClick={() => {
-                    setStatus(EnumRequestStatus.initial)
-                  }}
-                >
-                  Resend?
-                </Button>
-              </div>
-            </>
-          )}
-        </>
+                Resend?
+              </Button>
+            </div>
+          </>
+        )}
       </NymCard>
     </Layout>
   )

tauri-wallet/src/routes/sign-in.tsx

@@ -13,7 +13,6 @@ import {
 import { Alert } from '@material-ui/lab'
 import { useTheme } from '@material-ui/styles'
 import { ArrowBack, CheckCircleOutline } from '@material-ui/icons'
-import { invoke } from '@tauri-apps/api'
 import logo from '../images/logo-background.svg'
 import logo_alt from '../images/logo.png'
 import { ClientContext } from '../context/main'
@@ -74,7 +73,9 @@ const SignInContent = ({
 }: {
   showCreateAccount: () => void
 }) => {
-  const [mnemonic, setMnemonic] = useState<string>()
+  const [mnemonic, setMnemonic] = useState<string>(
+    'alley mutual arrange escape army vacuum cherry ozone frame steel current smile dad subject primary foster lazy want perfect fury general eye cannon motor'
+  )
   const [inputError, setInputError] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
 

tauri-wallet/src/types/rust/index.ts

@@ -5,3 +5,4 @@ export * from './gateway'
 export * from './mixnode'
 export * from './tauritxresult'
 export * from './transactiondetails'
+export * from './operation'