send wizard update

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

@@ -0,0 +1,79 @@
+import { Card, CircularProgress, Theme, Typography } from '@material-ui/core'
+import { CheckCircleOutline } from '@material-ui/icons'
+import { useTheme } from '@material-ui/styles'
+import React, { useEffect, useState } from 'react'
+import { SendReviewField } from './SendReview'
+
+export const SendConfirmation = ({
+  amount,
+  recipient,
+}: {
+  amount: string
+  recipient: string
+}) => {
+  const theme: Theme = useTheme()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    setTimeout(() => setIsLoading(false), 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),
+            }}
+          >
+            <CheckCircleOutline
+              style={{ fontSize: 50, color: theme.palette.success.main }}
+            />
+            <Typography>Transaction complete</Typography>
+          </div>
+
+          <Card
+            variant="outlined"
+            style={{ width: '100%', padding: theme.spacing(2) }}
+          >
+            <div style={{ display: 'flex', marginBottom: theme.spacing(2) }}>
+              <div style={{ width: '33%' }}>
+                <Typography style={{ color: theme.palette.grey[600] }}>
+                  Recipient
+                </Typography>
+              </div>
+              <div style={{ wordBreak: 'break-all' }}>
+                <Typography>{recipient}</Typography>
+              </div>
+            </div>
+            <div style={{ display: 'flex' }}>
+              <div style={{ width: '33%' }}>
+                <Typography style={{ color: theme.palette.grey[600] }}>
+                  mount
+                </Typography>
+              </div>
+              <div>
+                <Typography>{amount}</Typography>
+              </div>
+            </div>
+          </Card>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -37,7 +37,6 @@ export const SendForm = ({
           label="Recipient address"
           fullWidth
           autoFocus
-          helperText="Required"
           value={formData.toAddress}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             updateRecipAddress(e.target.value)
@@ -55,7 +54,6 @@ export const SendForm = ({
           InputProps={{
             endAdornment: <InputAdornment position="end">punks</InputAdornment>,
           }}
-          helperText="Required"
           value={formData.sendAmount}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             updateAmount(e.target.value)

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

@@ -11,28 +11,34 @@ export const SendReview = ({
   amount: string
 }) => {
   const { client } = useContext(ClientContext)
+  const theme: Theme = useTheme()
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={12}>
-        <SendReviewField title="From" subtitle={client.address} />
+    <Card
+      variant="outlined"
+      style={{ width: '100%', padding: theme.spacing(2) }}
+    >
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <SendReviewField title="From" subtitle={client.address} />
+        </Grid>
+        <Grid item xs={12}>
+          <Divider light />
+        </Grid>
+        <Grid item xs={12}>
+          <SendReviewField title="To" subtitle={recipientAddress} />
+        </Grid>
+        <Grid item xs={12}>
+          <Divider light />
+        </Grid>
+        <Grid item xs={12}>
+          <SendReviewField title="Amount" subtitle={amount} />
+        </Grid>
       </Grid>
-      <Grid item xs={12}>
-        <Divider light />
-      </Grid>
-      <Grid item xs={12}>
-        <SendReviewField title="To" subtitle={recipientAddress} />
-      </Grid>
-      <Grid item xs={12}>
-        <Divider light />
-      </Grid>
-      <Grid item xs={12}>
-        <SendReviewField title="Amount" subtitle={amount} />
-      </Grid>
-    </Grid>
+    </Card>
   )
 }
 
-const SendReviewField = ({
+export const SendReviewField = ({
   title,
   subtitle,
 }: {
@@ -41,11 +47,11 @@ const SendReviewField = ({
 }) => {
   const theme: Theme = useTheme()
   return (
-    <div style={{ marginBottom: theme.spacing(2) }}>
-      <Typography>{title}</Typography>
-      <Typography variant="h6" style={{ wordBreak: 'break-all' }}>
-        {subtitle}
+    <>
+      <Typography style={{ color: theme.palette.grey[600] }}>
+        {title}
       </Typography>
-    </div>
+      <Typography style={{ wordBreak: 'break-all' }}>{subtitle}</Typography>
+    </>
   )
 }

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

@@ -3,6 +3,7 @@ import { Button, Step, StepLabel, Stepper, Theme } from '@material-ui/core'
 import { useTheme } from '@material-ui/styles'
 import { SendForm } from './SendForm'
 import { SendReview } from './SendReview'
+import { SendConfirmation } from './SendConfirmation'
 
 export const SendWizard = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -12,8 +13,15 @@ export const SendWizard = () => {
   const steps = ['Enter address', 'Review and send', 'Await confirmation']
   const theme: Theme = useTheme()
 
-  const handleNextStep = () =>
-    setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s))
+  const handleNextStep = () => {
+    if (activeStep === 2) {
+      setActiveStep(0)
+      setSendAmount('')
+      setToAddress('')
+    } else {
+      setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s))
+    }
+  }
 
   const handlePreviousStep = () =>
     setActiveStep((s) => (s - 1 >= 0 ? s - 1 : s))
@@ -45,8 +53,10 @@ export const SendWizard = () => {
             updateAmount={(amount) => setSendAmount(amount)}
             formData={{ sendAmount, toAddress }}
           />
-        ) : (
+        ) : activeStep === 1 ? (
           <SendReview recipientAddress={toAddress} amount={sendAmount} />
+        ) : (
+          <SendConfirmation amount={sendAmount} recipient={toAddress} />
         )}
       </div>
       <div
@@ -56,15 +66,17 @@ export const SendWizard = () => {
           justifyContent: 'flex-end',
         }}
       >
+        {activeStep === 1 && (
+          <Button
+            disableElevation
+            style={{ marginRight: theme.spacing(1) }}
+            onClick={handlePreviousStep}
+          >
+            Back
+          </Button>
+        )}
         <Button
-          disableElevation
-          style={{ marginRight: theme.spacing(1) }}
-          onClick={handlePreviousStep}
-        >
-          Back
-        </Button>
-        <Button
-          variant="contained"
+          variant={activeStep > 0 ? 'contained' : 'text'}
           color={activeStep > 0 ? 'primary' : 'default'}
           disableElevation
           onClick={handleNextStep}
@@ -73,7 +85,7 @@ export const SendWizard = () => {
           {activeStep === 1
             ? 'Send'
             : activeStep === steps.length - 1
-            ? 'Send again'
+            ? 'Finish'
             : 'Next'}
         </Button>
       </div>