diff --git a/src/pages/stamps/PostageStampCreation.tsx b/src/pages/stamps/PostageStampCreation.tsx index a9ac3fb..8f66886 100644 --- a/src/pages/stamps/PostageStampCreation.tsx +++ b/src/pages/stamps/PostageStampCreation.tsx @@ -2,7 +2,7 @@ import { PostageBatchOptions } from '@ethersphere/bee-js' import { Box, Grid, Typography } from '@material-ui/core' import BigNumber from 'bignumber.js' import { useSnackbar } from 'notistack' -import { ReactElement, useContext, useEffect, useState } from 'react' +import { ReactElement, useContext, useState } from 'react' import Check from 'remixicon-react/CheckLineIcon' import { SwarmButton } from '../../components/SwarmButton' import { SwarmSelect } from '../../components/SwarmSelect' @@ -32,7 +32,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { const [amountInput, setAmountInput] = useState('') const [labelInput, setLabelInput] = useState('') const [immutable, setImmutable] = useState(false) - const [errors, setErrors] = useState>({}) + const errors: Record = {} const [submitting, setSubmitting] = useState(false) const { enqueueSnackbar } = useSnackbar() @@ -102,41 +102,53 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { setSubmitting(false) } - useEffect(() => { - function validate() { - const errors: Record = {} + function validateAmountInput(amountInput: string) { + let validAmountInput = '0' - if (!depthInput) { - errors.depth = 'Required field' - } else { - const depth = new BigNumber(depthInput) - - if (!depth.isInteger()) { - errors.depth = 'Depth must be an integer' - } else if (depth.isLessThan(17)) { - errors.depth = 'Minimal depth is 17' - } else if (depth.isGreaterThan(255)) { - errors.depth = 'Depth has to be at most 255' - } - } - - if (!amountInput) { - errors.amount = 'Required field' + if (!amountInput) { + errors.amount = 'Required field' + } else { + if (amountInput.indexOf('.') > -1) { + errors.amount = 'Amount must be an integer' } else { const amount = new BigNumber(amountInput) - if (!amount.isInteger()) { - errors.amount = 'Amount must be an integer' + if (amount.isNaN()) { + errors.amount = 'Amount must contain only digits' } else if (amount.isLessThanOrEqualTo(0)) { errors.amount = 'Amount must be greater than 0' + } else { + errors.amount = '' + validAmountInput = amountInput } } - - return errors } - setErrors(validate()) - }, [depthInput, amountInput]) + setAmountInput(validAmountInput) + } + + function validateDepthInput(depthInput: string) { + let validDepthInput = '0' + + if (!depthInput) { + errors.depth = 'Required field' + } else { + const depth = new BigNumber(depthInput) + + if (!depth.isInteger()) { + errors.depth = 'Depth must be an integer' + } else if (depth.isLessThan(17)) { + errors.depth = 'Minimal depth is 17' + } else if (depth.isGreaterThan(255)) { + errors.depth = 'Depth has to be at most 255' + } else { + errors.depth = '' + validDepthInput = depthInput + } + } + + setDepthInput(validDepthInput) + } return ( <> @@ -155,7 +167,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { - setDepthInput(event.target.value)} /> + validateDepthInput(event.target.value)} /> Corresponding file size @@ -164,7 +176,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { - setAmountInput(event.target.value)} /> + validateAmountInput(event.target.value)} /> Corresponding TTL (Time to live) @@ -213,7 +225,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { 0} + disabled={submitting || errors.depth !== '' || errors.amount !== ''} onClick={submit} iconType={Check} loading={submitting} diff --git a/src/pages/stamps/PostageStampSelector.tsx b/src/pages/stamps/PostageStampSelector.tsx index 0c45289..b391bdc 100644 --- a/src/pages/stamps/PostageStampSelector.tsx +++ b/src/pages/stamps/PostageStampSelector.tsx @@ -23,7 +23,10 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl return ( ({ label: x.batchID.slice(0, 8), value: x.batchID }))} + options={(stamps || []).map(x => ({ + label: x.label ? x.batchID.slice(0, 8) + ' - ' + x.label : x.batchID.slice(0, 8), + value: x.batchID, + }))} onChange={event => onChange(event.target.value as string)} defaultValue={defaultValue} placeholder="Please select a postage stamp..."