diff --git a/src/pages/stamps/PostageStampCreation.tsx b/src/pages/stamps/PostageStampCreation.tsx index 8f66886..0089f4b 100644 --- a/src/pages/stamps/PostageStampCreation.tsx +++ b/src/pages/stamps/PostageStampCreation.tsx @@ -32,7 +32,8 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { const [amountInput, setAmountInput] = useState('') const [labelInput, setLabelInput] = useState('') const [immutable, setImmutable] = useState(false) - const errors: Record = {} + const [depthError, setDepthError] = useState('') + const [amountError, setAmountError] = useState('') const [submitting, setSubmitting] = useState(false) const { enqueueSnackbar } = useSnackbar() @@ -106,19 +107,19 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { let validAmountInput = '0' if (!amountInput) { - errors.amount = 'Required field' + setAmountError('Required field') } else { if (amountInput.indexOf('.') > -1) { - errors.amount = 'Amount must be an integer' + setAmountError('Amount must be an integer') } else { const amount = new BigNumber(amountInput) if (amount.isNaN()) { - errors.amount = 'Amount must contain only digits' + setAmountError('Amount must contain only digits') } else if (amount.isLessThanOrEqualTo(0)) { - errors.amount = 'Amount must be greater than 0' + setAmountError('Amount must be greater than 0') } else { - errors.amount = '' + setAmountError('') validAmountInput = amountInput } } @@ -131,18 +132,18 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { let validDepthInput = '0' if (!depthInput) { - errors.depth = 'Required field' + setDepthError('Required field') } else { const depth = new BigNumber(depthInput) if (!depth.isInteger()) { - errors.depth = 'Depth must be an integer' + setDepthError('Depth must be an integer') } else if (depth.isLessThan(17)) { - errors.depth = 'Minimal depth is 17' + setDepthError('Minimal depth is 17') } else if (depth.isGreaterThan(255)) { - errors.depth = 'Depth has to be at most 255' + setDepthError('Depth has to be at most 255') } else { - errors.depth = '' + setDepthError('') validDepthInput = depthInput } } @@ -171,18 +172,20 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { Corresponding file size - {!errors.depth && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'} + {!depthError && depthInput ? getFileSize(parseInt(depthInput, 10)) : '-'} + {depthError && {depthError}} validateAmountInput(event.target.value)} /> Corresponding TTL (Time to live) - {!errors.amount && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'} + {!amountError && amountInput ? getTtl(Number.parseInt(amountInput, 10)) : '-'} + {amountError && {amountError}} setLabelInput(event.target.value)} /> @@ -218,14 +221,14 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement { Indicative Price - {!errors.amount && !errors.depth && amountInput && depthInput + {!amountError && !depthError && amountInput && depthInput ? getPrice(parseInt(depthInput, 10), BigInt(amountInput)) : '-'}