start adding gas fees

tauri-wallet/src/context/main.tsx

@@ -1,9 +1,11 @@
+import { invoke } from '@tauri-apps/api'
 import React, { createContext, useCallback, useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
-import { TClientDetails } from '../types'
+import { Coin, TClientDetails } from '../types'
 
 type TClientContext = {
   clientDetails?: TClientDetails
+  gasPrice?: Coin
   logIn: (clientDetails: TClientDetails) => void
   logOut: () => void
 }
@@ -16,6 +18,7 @@ export const ClientContextProvider = ({
   children: React.ReactNode
 }) => {
   const [clientDetails, setClientDetails] = useState<TClientDetails>()
+  const [gasPrice, setGasPrice] = useState<Coin>()
 
   const history = useHistory()
 
@@ -23,8 +26,12 @@ export const ClientContextProvider = ({
     !clientDetails ? history.push('/signin') : history.push('/bond')
   }, [clientDetails])
 
-  const logIn = (clientDetails: TClientDetails) =>
+  const logIn = async (clientDetails: TClientDetails) => {
+    await invoke('get_gas_price')
+      .then((res) => setGasPrice(res as Coin))
+      .catch((e) => console.log(e))
     setClientDetails(clientDetails)
+  }
 
   const logOut = () => setClientDetails(undefined)
 
@@ -32,6 +39,7 @@ export const ClientContextProvider = ({
     <ClientContext.Provider
       value={{
         clientDetails,
+        gasPrice,
         logIn,
         logOut,
       }}

tauri-wallet/src/routes/send/SendReview.tsx

@@ -1,20 +1,25 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Card, Divider, Grid, Theme, Typography } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
 import { useFormContext } from 'react-hook-form'
-import { TFormData } from './SendWizard'
+import { ClientContext } from '../../context/main'
 
 export const SendReview = () => {
+  const { gasPrice } = useContext(ClientContext)
   const { getValues } = useFormContext()
 
-  const values: TFormData = getValues()
+  const values = getValues()
 
   const theme: Theme = useTheme()
 
   return (
     <Card
       variant="outlined"
-      style={{ width: '100%', padding: theme.spacing(2) }}
+      style={{
+        width: '100%',
+        padding: theme.spacing(2),
+        margin: theme.spacing(3, 0),
+      }}
     >
       <Grid container spacing={2}>
         <Grid item xs={12}>
@@ -32,6 +37,15 @@ export const SendReview = () => {
         <Grid item xs={12}>
           <SendReviewField title="Amount" subtitle={values.amount} />
         </Grid>
+        <Grid item xs={12}>
+          <Divider light />
+        </Grid>
+        <Grid item xs={12}>
+          <SendReviewField
+            title="Transfer fee"
+            subtitle={gasPrice?.amount + ' PUNK'}
+          />
+        </Grid>
       </Grid>
     </Card>
   )
@@ -42,7 +56,7 @@ export const SendReviewField = ({
   subtitle,
 }: {
   title: string
-  subtitle: string
+  subtitle?: string
 }) => {
   const theme: Theme = useTheme()
   return (

tauri-wallet/src/routes/send/SendWizard.tsx

@@ -3,12 +3,12 @@ import { useForm, FormProvider } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { Button, Step, StepLabel, Stepper, Theme } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
+import { invoke } from '@tauri-apps/api'
 import { SendForm } from './SendForm'
 import { SendReview } from './SendReview'
 import { SendConfirmation } from './SendConfirmation'
 import { ClientContext } from '../../context/main'
 import { validationSchema } from './validationSchema'
-import { invoke } from '@tauri-apps/api'
 import { TauriTxResult } from '../../types/rust/tauritxresult'
 
 const defaultValues = {

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

@@ -6,7 +6,7 @@ import { Layout } from '../../layouts'
 export const Send = () => {
   return (
     <Layout>
-      <NymCard title="Send tokens" noPadding>
+      <NymCard title="Send PUNK" noPadding>
         <SendWizard />
       </NymCard>
     </Layout>