From b9389f1235af8b5a545d143fe9e25cd57ba14604 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Tue, 7 Sep 2021 21:53:05 +0100 Subject: [PATCH] send updates --- .../src/routes/send/SendConfirmation.tsx | 34 ++- tauri-wallet/src/routes/send/SendError.tsx | 64 +++-- tauri-wallet/src/routes/send/SendForm.tsx | 47 ++-- tauri-wallet/src/routes/send/SendReview.tsx | 28 +-- tauri-wallet/src/routes/send/SendWizard.tsx | 223 +++++++++++------- tauri-wallet/src/routes/send/index.tsx | 2 +- .../src/routes/send/validationSchema.ts | 11 + 7 files changed, 225 insertions(+), 184 deletions(-) create mode 100644 tauri-wallet/src/routes/send/validationSchema.ts diff --git a/tauri-wallet/src/routes/send/SendConfirmation.tsx b/tauri-wallet/src/routes/send/SendConfirmation.tsx index 3116648def..8d3b162096 100644 --- a/tauri-wallet/src/routes/send/SendConfirmation.tsx +++ b/tauri-wallet/src/routes/send/SendConfirmation.tsx @@ -1,26 +1,20 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { Card, CircularProgress, Theme, Typography } from '@material-ui/core' import { CheckCircleOutline } from '@material-ui/icons' import { useTheme } from '@material-ui/styles' +import { SendError } from './SendError' +import { TFormData } from './SendWizard' export const SendConfirmation = ({ - amount, - recipient, - onFinish, + data, + error, + isLoading, }: { - amount: string - recipient: string - onFinish: () => void + data?: Pick + error?: string + isLoading: boolean }) => { const theme: Theme = useTheme() - const [isLoading, setIsLoading] = useState(true) - - useEffect(() => { - setTimeout(() => { - setIsLoading(false) - onFinish() - }, 3000) - }, []) return (
- {isLoading ? ( - - ) : ( + {isLoading && } + {!isLoading && !!error && } + {!isLoading && data && ( <>
- {recipient} + {data.to}
@@ -76,7 +70,7 @@ export const SendConfirmation = ({
- {amount + ' punks'} + {data.amount + ' punks'}
diff --git a/tauri-wallet/src/routes/send/SendError.tsx b/tauri-wallet/src/routes/send/SendError.tsx index 017dc4393a..2fcb9ce5be 100644 --- a/tauri-wallet/src/routes/send/SendError.tsx +++ b/tauri-wallet/src/routes/send/SendError.tsx @@ -1,19 +1,11 @@ -import { Card, CircularProgress, Theme, Typography } from '@material-ui/core' +import React from 'react' +import { Card, 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 }) => { +export const SendError = ({ message }: { message?: string }) => { const theme: Theme = useTheme() - const [isLoading, setIsLoading] = useState(true) - - useEffect(() => { - setTimeout(() => { - setIsLoading(false) - onFinish() - }, 3000) - }, []) return (
void }) => { width: '100%', }} > - {isLoading ? ( - - ) : ( - <> -
- - Transaction failed -
+ <> +
+ + Transaction failed +
- - An error occured during the request - - - )} + + + An error occured during the request {message} + + +
) } diff --git a/tauri-wallet/src/routes/send/SendForm.tsx b/tauri-wallet/src/routes/send/SendForm.tsx index da3692eb25..1f9c6b39c9 100644 --- a/tauri-wallet/src/routes/send/SendForm.tsx +++ b/tauri-wallet/src/routes/send/SendForm.tsx @@ -1,63 +1,56 @@ -import React, { useContext } from 'react' +import React from 'react' import { Grid, InputAdornment, TextField } from '@material-ui/core' -import { ClientContext } from '../../context/main' +import { useFormContext } from 'react-hook-form' -export const SendForm = ({ - formData, - updateRecipAddress, - updateAmount, -}: { - formData: { toAddress: string; sendAmount: string } - updateRecipAddress: (address: string) => void - updateAmount: (amount: string) => void -}) => { - const { clientDetails } = useContext(ClientContext) +export const SendForm = () => { + const { + register, + formState: { errors }, + } = useFormContext() return ( ) => - updateRecipAddress(e.target.value) - } + error={!!errors.recipient} + helperText={errors.recipient?.message} /> punks, }} - 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 index 3a6810ca73..8c85515883 100644 --- a/tauri-wallet/src/routes/send/SendReview.tsx +++ b/tauri-wallet/src/routes/send/SendReview.tsx @@ -1,17 +1,16 @@ +import React from 'react' 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' +import { useFormContext } from 'react-hook-form' +import { TFormData } from './SendWizard' + +export const SendReview = () => { + const { getValues } = useFormContext() + + const values: TFormData = getValues() -export const SendReview = ({ - recipientAddress, - amount, -}: { - recipientAddress: string - amount: string -}) => { - const { clientDetails } = useContext(ClientContext) const theme: Theme = useTheme() + return ( - + - + - + diff --git a/tauri-wallet/src/routes/send/SendWizard.tsx b/tauri-wallet/src/routes/send/SendWizard.tsx index b0ead550bd..ed84c08f73 100644 --- a/tauri-wallet/src/routes/send/SendWizard.tsx +++ b/tauri-wallet/src/routes/send/SendWizard.tsx @@ -1,107 +1,164 @@ -import React, { useState } from 'react' +import React, { useContext, useEffect, useState } from 'react' +import { useForm, FormProvider } from 'react-hook-form' +import { yupResolver } from '@hookform/resolvers/yup' 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' import { SendError } from './SendError' +import { ClientContext } from '../../context/main' +import { validationSchema } from './validationSchema' +import { invoke } from '@tauri-apps/api' + +const defaultValues = { + amount: '', + memo: '', + to: '', +} + +export type TFormData = { + amount: string + memo: string + to: string + from: string +} export const SendWizard = () => { const [activeStep, setActiveStep] = useState(0) - const [toAddress, setToAddress] = useState('') - const [sendAmount, setSendAmount] = useState('') + const [isLoading, setIsLoading] = useState(false) + const [requestError, setRequestError] = useState() + const [confirmedData, setConfirmedData] = + useState<{ amount: string; recipient: string }>() const steps = ['Enter address', 'Review and send', 'Await confirmation'] + + const { clientDetails } = useContext(ClientContext) + const methods = useForm({ + defaultValues: { + ...defaultValues, + from: clientDetails?.client_address!, + }, + resolver: yupResolver(validationSchema), + }) + const theme: Theme = useTheme() - const handleNextStep = () => - setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s)) + const handleNextStep = methods.handleSubmit(() => setActiveStep((s) => s + 1)) - const handlePreviousStep = () => - setActiveStep((s) => (s - 1 >= 0 ? s - 1 : s)) + const handlePreviousStep = () => setActiveStep((s) => s - 1) const handleFinish = () => { + methods.reset() setActiveStep(0) - setSendAmount('') - setToAddress('') + } + + const handleSend = () => { + setIsLoading(true) + setActiveStep((s) => s + 1) + const formState = methods.getValues() + invoke('send', { + address: formState.to, + amount: { denom: 'punk', amount: formState.amount }, + memo: formState.memo, + }) + .then((res) => { + console.log(res) + setActiveStep((s) => s + 1) + setConfirmedData({ + amount: formState.amount, + recipient: formState.to, + }) + + setIsLoading(false) + }) + .catch((e) => { + setRequestError(e) + setIsLoading(false) + console.log(e) + }) } return ( -
- - {steps.map((s, i) => ( - - {s} - - ))} - -
- {activeStep === 0 ? ( - setToAddress(address)} - updateAmount={(amount) => setSendAmount(amount)} - formData={{ sendAmount, toAddress }} - /> - ) : activeStep === 1 ? ( - - ) : sendAmount === 'fail' ? ( - setActiveStep((s) => s + 1)} /> - ) : ( - setActiveStep((s) => s + 1)} - /> - )} -
-
- {activeStep === 1 && ( - - )} - + {steps.map((s, i) => ( + + {s} + + ))} + +
+ {activeStep === 0 ? ( + + ) : activeStep === 1 ? ( + + ) : ( + + )} +
+
+ {activeStep === 1 && ( + + )} + +
-
+ ) } diff --git a/tauri-wallet/src/routes/send/index.tsx b/tauri-wallet/src/routes/send/index.tsx index db998cd8ea..fdbcb884ae 100644 --- a/tauri-wallet/src/routes/send/index.tsx +++ b/tauri-wallet/src/routes/send/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { NymCard } from '../../components' import { SendWizard } from './SendWizard' import { Layout } from '../../layouts' diff --git a/tauri-wallet/src/routes/send/validationSchema.ts b/tauri-wallet/src/routes/send/validationSchema.ts new file mode 100644 index 0000000000..b734db9d24 --- /dev/null +++ b/tauri-wallet/src/routes/send/validationSchema.ts @@ -0,0 +1,11 @@ +import * as Yup from 'yup' +import { validateAmount, validateKey } from '../../utils' + +export const validationSchema = Yup.object().shape({ + to: Yup.string().required(), + amount: Yup.string() + .required() + .test('valid-amount', 'A valid amount is required', (amount) => { + return validateAmount(amount || '0', '1') + }), +})