diff --git a/tauri-wallet/src/routes/send.tsx b/tauri-wallet/src/routes/send.tsx
deleted file mode 100644
index ea73a17089..0000000000
--- a/tauri-wallet/src/routes/send.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { Layout, Page } from '../components'
-
-export const Send = () => {
- return (
-
-
- <>
- Send
- >
-
-
- )
-}
diff --git a/tauri-wallet/src/routes/send/SendForm.tsx b/tauri-wallet/src/routes/send/SendForm.tsx
new file mode 100644
index 0000000000..7e0b76d531
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ ) =>
+ updateRecipAddress(e.target.value)
+ }
+ />
+
+
+ punks,
+ }}
+ helperText="Required"
+ value={formData.sendAmount}
+ onChange={(e: React.ChangeEvent) =>
+ updateAmount(e.target.value)
+ }
+ />
+
+
+ )
+}
diff --git a/tauri-wallet/src/routes/send/SendReview.tsx b/tauri-wallet/src/routes/send/SendReview.tsx
new file mode 100644
index 0000000000..1ec1d5248e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const SendReviewField = ({
+ title,
+ subtitle,
+}: {
+ title: string
+ subtitle: string
+}) => {
+ const theme: Theme = useTheme()
+ return (
+
+ {title}
+
+ {subtitle}
+
+
+ )
+}
diff --git a/tauri-wallet/src/routes/send/SendWizard.tsx b/tauri-wallet/src/routes/send/SendWizard.tsx
new file mode 100644
index 0000000000..0879639a5f
--- /dev/null
+++ b/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 (
+
+
+ {steps.map((s) => (
+
+ {s}
+
+ ))}
+
+
+ {activeStep === 0 ? (
+ setToAddress(address)}
+ updateAmount={(amount) => setSendAmount(amount)}
+ formData={{ sendAmount, toAddress }}
+ />
+ ) : (
+
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/tauri-wallet/src/routes/send/index.tsx b/tauri-wallet/src/routes/send/index.tsx
new file mode 100644
index 0000000000..0aacd91114
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+ )
+}
diff --git a/tauri-wallet/src/theme.tsx b/tauri-wallet/src/theme.tsx
index c5332bfb6d..26a2c03d40 100644
--- a/tauri-wallet/src/theme.tsx
+++ b/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: {