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: {