diff --git a/tauri-wallet/src/components/Confirmation.tsx b/tauri-wallet/src/components/Confirmation.tsx index 23736d8878..593eed90af 100644 --- a/tauri-wallet/src/components/Confirmation.tsx +++ b/tauri-wallet/src/components/Confirmation.tsx @@ -7,15 +7,15 @@ import { Alert, AlertTitle } from '@material-ui/lab' type ConfirmationProps = { isLoading: boolean progressMessage: string - successMessage: string + SuccessMessage: React.ReactNode failureMessage: string - error: Error + error: Error | null } export const Confirmation = ({ isLoading, progressMessage, - successMessage, + SuccessMessage, failureMessage, error, }: ConfirmationProps) => { @@ -31,7 +31,7 @@ export const Confirmation = ({ ) : ( <> {error === null ? ( - {successMessage} + SuccessMessage ) : ( {error.name} diff --git a/tauri-wallet/src/routes/balance.tsx b/tauri-wallet/src/routes/balance.tsx index 05f7c03ed2..c226537907 100644 --- a/tauri-wallet/src/routes/balance.tsx +++ b/tauri-wallet/src/routes/balance.tsx @@ -5,6 +5,7 @@ import { Layout, NymCard, Page } from '../components' import { NoClientError } from '../components/NoClientError' import { Confirmation } from '../components/Confirmation' import { ClientContext } from '../context/main' +import { Alert } from '@material-ui/lab' export const Balance = () => { const { client } = useContext(ClientContext) @@ -21,25 +22,37 @@ export const Balance = () => { isLoading={false} error={null} progressMessage="Checking balance..." - successMessage={'The current balance is ' + client.balance} + SuccessMessage={ + + + + } + > + {'The current balance is ' + client.balance} + + } failureMessage="Failed to check the account balance!" /> - -
- -
-
)} diff --git a/tauri-wallet/src/routes/send/SendConfirmation.tsx b/tauri-wallet/src/routes/send/SendConfirmation.tsx index e9195cc87b..20ace6b782 100644 --- a/tauri-wallet/src/routes/send/SendConfirmation.tsx +++ b/tauri-wallet/src/routes/send/SendConfirmation.tsx @@ -47,7 +47,11 @@ export const SendConfirmation = ({ }} > Transaction complete @@ -69,11 +73,11 @@ export const SendConfirmation = ({
- mount + Amount
- {amount} + {amount + ' punks'}
diff --git a/tauri-wallet/src/routes/send/SendError.tsx b/tauri-wallet/src/routes/send/SendError.tsx new file mode 100644 index 0000000000..017dc4393a --- /dev/null +++ b/tauri-wallet/src/routes/send/SendError.tsx @@ -0,0 +1,57 @@ +import { Card, CircularProgress, 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 }) => { + const theme: Theme = useTheme() + const [isLoading, setIsLoading] = useState(true) + + useEffect(() => { + setTimeout(() => { + setIsLoading(false) + onFinish() + }, 3000) + }, []) + + return ( +
+ {isLoading ? ( + + ) : ( + <> +
+ + Transaction failed +
+ + + An error occured during the request + + + )} +
+ ) +} diff --git a/tauri-wallet/src/routes/send/SendWizard.tsx b/tauri-wallet/src/routes/send/SendWizard.tsx index 592e3c2004..0eab276951 100644 --- a/tauri-wallet/src/routes/send/SendWizard.tsx +++ b/tauri-wallet/src/routes/send/SendWizard.tsx @@ -4,6 +4,7 @@ import { useTheme } from '@material-ui/styles' import { SendForm } from './SendForm' import { SendReview } from './SendReview' import { SendConfirmation } from './SendConfirmation' +import { SendError } from './SendError' export const SendWizard = () => { const [activeStep, setActiveStep] = useState(0) @@ -13,19 +14,18 @@ export const SendWizard = () => { const steps = ['Enter address', 'Review and send', 'Await confirmation'] const theme: Theme = useTheme() - const handleNextStep = () => { - if (activeStep === 2) { - setActiveStep(0) - setSendAmount('') - setToAddress('') - } else { - setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s)) - } - } + const handleNextStep = () => + setActiveStep((s) => (s + 1 < steps.length ? s + 1 : s)) const handlePreviousStep = () => setActiveStep((s) => (s - 1 >= 0 ? s - 1 : s)) + const handleFinish = () => { + setActiveStep(0) + setSendAmount('') + setToAddress('') + } + return (
{
{ /> ) : activeStep === 1 ? ( + ) : sendAmount === 'fail' ? ( + setActiveStep((s) => s + 1)} /> ) : ( { variant={activeStep > 0 ? 'contained' : 'text'} color={activeStep > 0 ? 'primary' : 'default'} disableElevation - onClick={handleNextStep} + onClick={activeStep === 3 ? handleFinish : handleNextStep} disabled={!(toAddress.length > 0 && sendAmount.length > 0)} > {activeStep === 1 ? 'Send' - : activeStep === steps.length - 1 + : activeStep === steps.length ? 'Finish' : 'Next'}