add send wizard

tauri-wallet/src/routes/send.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Layout, Page } from '../components'
-
-export const Send = () => {
-  return (
-    <Page>
-      <Layout>
-        <>
-          <h1>Send</h1>
-        </>
-      </Layout>
-    </Page>
-  )
-}

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

@@ -0,0 +1,67 @@
+import React, { useContext } from 'react'
+import { Grid, InputAdornment, TextField, Typography } from '@material-ui/core'
+import { ClientContext } from '../../context/main'
+
+export const SendForm = ({
+  formData,
+  updateRecipAddress,
+  updateAmount,
+}: {
+  formData: { toAddress: string; sendAmount: string }
+  updateRecipAddress: (address: string) => void
+  updateAmount: (amount: string) => void
+}) => {
+  const { client } = useContext(ClientContext)
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12}>
+        <TextField
+          required
+          variant="outlined"
+          id="sender"
+          name="sender"
+          label="Sender address"
+          fullWidth
+          value={client.address}
+          disabled={true}
+        />
+      </Grid>
+
+      <Grid item xs={12}>
+        <TextField
+          required
+          variant="outlined"
+          id="recipient"
+          name="recipient"
+          label="Recipient address"
+          fullWidth
+          autoFocus
+          helperText="Required"
+          value={formData.toAddress}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            updateRecipAddress(e.target.value)
+          }
+        />
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        <TextField
+          required
+          variant="outlined"
+          id="amount"
+          name="amount"
+          label="Amount"
+          fullWidth
+          InputProps={{
+            endAdornment: <InputAdornment position="end">punks</InputAdornment>,
+          }}
+          helperText="Required"
+          value={formData.sendAmount}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            updateAmount(e.target.value)
+          }
+        />
+      </Grid>
+    </Grid>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { Card, Divider, Grid, Theme, Typography } from '@material-ui/core'
+import { useTheme } from '@material-ui/styles'
+import React, { useContext } from 'react'
+import { ClientContext } from '../../context/main'
+
+export const SendReview = ({
+  recipientAddress,
+  amount,
+}: {
+  recipientAddress: string
+  amount: string
+}) => {
+  const { client } = useContext(ClientContext)
+  return (
+    <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>
+  )
+}
+
+const SendReviewField = ({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle: string
+}) => {
+  const theme: Theme = useTheme()
+  return (
+    <div style={{ marginBottom: theme.spacing(2) }}>
+      <Typography>{title}</Typography>
+      <Typography variant="h6" style={{ wordBreak: 'break-all' }}>
+        {subtitle}
+      </Typography>
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { Button, Step, StepLabel, Stepper, Theme } from '@material-ui/core'
+import { useTheme } from '@material-ui/styles'
+import { SendForm } from './SendForm'
+import { SendReview } from './SendReview'
+
+export const SendWizard = () => {
+  const [activeStep, setActiveStep] = useState(0)
+  const [toAddress, setToAddress] = useState('')
+  const [sendAmount, setSendAmount] = useState('')
+
+  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 handlePreviousStep = () =>
+    setActiveStep((s) => (s - 1 >= 0 ? s - 1 : s))
+
+  return (
+    <div>
+      <Stepper
+        activeStep={activeStep}
+        style={{ background: theme.palette.grey[50] }}
+      >
+        {steps.map((s) => (
+          <Step>
+            <StepLabel>{s}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+      <div
+        style={{
+          minHeight: 300,
+
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {activeStep === 0 ? (
+          <SendForm
+            updateRecipAddress={(address) => setToAddress(address)}
+            updateAmount={(amount) => setSendAmount(amount)}
+            formData={{ sendAmount, toAddress }}
+          />
+        ) : (
+          <SendReview recipientAddress={toAddress} amount={sendAmount} />
+        )}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <Button
+          disableElevation
+          style={{ marginRight: theme.spacing(1) }}
+          onClick={handlePreviousStep}
+        >
+          Back
+        </Button>
+        <Button
+          variant="contained"
+          color={activeStep > 0 ? 'primary' : 'default'}
+          disableElevation
+          onClick={handleNextStep}
+          disabled={!(toAddress.length > 0 && sendAmount.length > 0)}
+        >
+          {activeStep === 1
+            ? 'Send'
+            : activeStep === steps.length - 1
+            ? 'Send again'
+            : 'Next'}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Layout, NymCard, Page } from '../../components'
+import { SendWizard } from './SendWizard'
+
+export const Send = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard title="Send tokens">
+          <SendWizard />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}

tauri-wallet/src/theme.tsx

@@ -8,15 +8,15 @@ export const theme = createTheme({
   },
   overrides: {
     MuiButton: {
+      root: {
+        borderRadius: 50,
+        padding: '12px 24px',
+      },
       containedPrimary: {
         color: 'white',
-        borderRadius: 50,
       },
-      contained: {
-        padding: '12px 24px',
-      },
-      containedSizeLarge: {
-        padding: '12px 24px',
+      text: {
+        padding: 'default',
       },
     },
     MuiOutlinedInput: {