send wizard updates

tauri-wallet/src/components/Confirmation.tsx

@@ -7,15 +7,15 @@ import { Alert, AlertTitle } from '@material-ui/lab'
 type ConfirmationProps = {
   isLoading: boolean
   progressMessage: string
-  successMessage: string
+  SuccessMessage: React.ReactNode
   failureMessage: string
-  error: Error
+  error: Error | null
 }
 
 export const Confirmation = ({
   isLoading,
   progressMessage,
-  successMessage,
+  SuccessMessage,
   failureMessage,
   error,
 }: ConfirmationProps) => {
@@ -31,7 +31,7 @@ export const Confirmation = ({
   ) : (
     <>
       {error === null ? (
-        <Alert severity="success">{successMessage}</Alert>
+        SuccessMessage
       ) : (
         <Alert severity="error">
           <AlertTitle>{error.name}</AlertTitle>

tauri-wallet/src/routes/balance.tsx

@@ -5,6 +5,7 @@ import { Layout, NymCard, Page } from '../components'
 import { NoClientError } from '../components/NoClientError'
 import { Confirmation } from '../components/Confirmation'
 import { ClientContext } from '../context/main'
+import { Alert } from '@material-ui/lab'
 
 export const Balance = () => {
   const { client } = useContext(ClientContext)
@@ -21,25 +22,37 @@ export const Balance = () => {
                   isLoading={false}
                   error={null}
                   progressMessage="Checking balance..."
-                  successMessage={'The current balance is ' + client.balance}
+                  SuccessMessage={
+                    <Alert
+                      severity="success"
+                      action={
+                        <div
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                          }}
+                        >
+                          <Button
+                            size="small"
+                            variant="contained"
+                            color="primary"
+                            type="submit"
+                            onClick={() => {}}
+                            disabled={false}
+                            disableElevation
+                            startIcon={<Refresh />}
+                          >
+                            Refresh
+                          </Button>
+                        </div>
+                      }
+                    >
+                      {'The current balance is ' + client.balance}
+                    </Alert>
+                  }
                   failureMessage="Failed to check the account balance!"
                 />
               </Grid>
-              <Grid item>
-                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    type="submit"
-                    onClick={() => {}}
-                    disabled={false}
-                    disableElevation
-                    startIcon={<Refresh />}
-                  >
-                    Refresh
-                  </Button>
-                </div>
-              </Grid>
             </Grid>
           )}
         </NymCard>

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

@@ -47,7 +47,11 @@ export const SendConfirmation = ({
             }}
           >
             <CheckCircleOutline
-              style={{ fontSize: 50, color: theme.palette.success.main }}
+              style={{
+                fontSize: 50,
+                color: theme.palette.success.main,
+                marginBottom: theme.spacing(1),
+              }}
             />
             <Typography>Transaction complete</Typography>
           </div>
@@ -69,11 +73,11 @@ export const SendConfirmation = ({
             <div style={{ display: 'flex' }}>
               <div style={{ width: '33%' }}>
                 <Typography style={{ color: theme.palette.grey[600] }}>
-                  mount
+                  Amount
                 </Typography>
               </div>
               <div>
-                <Typography>{amount}</Typography>
+                <Typography>{amount + ' punks'}</Typography>
               </div>
             </div>
           </Card>

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

@@ -0,0 +1,57 @@
+import { Card, CircularProgress, Theme, Typography } from '@material-ui/core'
+import { ErrorOutline } from '@material-ui/icons'
+import { Alert } from '@material-ui/lab'
+import { useTheme } from '@material-ui/styles'
+import React, { useEffect, useState } from 'react'
+
+export const SendError = ({ onFinish }: { onFinish: () => void }) => {
+  const theme: Theme = useTheme()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false)
+      onFinish()
+    }, 3000)
+  }, [])
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      {isLoading ? (
+        <CircularProgress size={48} />
+      ) : (
+        <>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginBottom: theme.spacing(4),
+            }}
+          >
+            <ErrorOutline
+              style={{ fontSize: 50, color: theme.palette.error.main }}
+            />
+            <Typography>Transaction failed</Typography>
+          </div>
+
+          <Card
+            variant="outlined"
+            style={{ width: '100%', padding: theme.spacing(2) }}
+          >
+            <Alert severity="error">An error occured during the request</Alert>
+          </Card>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -4,6 +4,7 @@ import { useTheme } from '@material-ui/styles'
 import { SendForm } from './SendForm'
 import { SendReview } from './SendReview'
 import { SendConfirmation } from './SendConfirmation'
+import { SendError } from './SendError'
 
 export const SendWizard = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -13,19 +14,18 @@ export const SendWizard = () => {
   const steps = ['Enter address', 'Review and send', 'Await confirmation']
   const theme: Theme = useTheme()
 
-  const handleNextStep = () => {
-    if (activeStep === 2) {
-      setActiveStep(0)
-      setSendAmount('')
-      setToAddress('')
-    } else {
-      setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s))
-    }
-  }
+  const handleNextStep = () =>
+    setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s))
 
   const handlePreviousStep = () =>
     setActiveStep((s) => (s - 1 >= 0 ? s - 1 : s))
 
+  const handleFinish = () => {
+    setActiveStep(0)
+    setSendAmount('')
+    setToAddress('')
+  }
+
   return (
     <div>
       <Stepper
@@ -41,7 +41,6 @@ export const SendWizard = () => {
       <div
         style={{
           minHeight: 300,
-
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -55,6 +54,8 @@ export const SendWizard = () => {
           />
         ) : activeStep === 1 ? (
           <SendReview recipientAddress={toAddress} amount={sendAmount} />
+        ) : sendAmount === 'fail' ? (
+          <SendError onFinish={() => setActiveStep((s) => s + 1)} />
         ) : (
           <SendConfirmation
             amount={sendAmount}
@@ -83,12 +84,12 @@ export const SendWizard = () => {
           variant={activeStep > 0 ? 'contained' : 'text'}
           color={activeStep > 0 ? 'primary' : 'default'}
           disableElevation
-          onClick={handleNextStep}
+          onClick={activeStep === 3 ? handleFinish : handleNextStep}
           disabled={!(toAddress.length > 0 && sendAmount.length > 0)}
         >
           {activeStep === 1
             ? 'Send'
-            : activeStep === steps.length - 1
+            : activeStep === steps.length
             ? 'Finish'
             : 'Next'}
         </Button>