fix: add missing stamp labels and fix inputs (#634)

* fix issue #630, #606

* fix: Stamp Labels #630, Entering * into amount #606

* #606 Entering * into amount

* fix: inputs eliminating warnings

---------

Co-authored-by: Zoltán Mihály <zolmac@Zoltans-MacBook-Pro.local>

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<string>('')
   const [labelInput, setLabelInput] = useState('')
   const [immutable, setImmutable] = useState(false)
-  const [errors, setErrors] = useState<Record<string, string>>({})
+  const errors: Record<string, string> = {}
   const [submitting, setSubmitting] = useState(false)
 
   const { enqueueSnackbar } = useSnackbar()
@@ -102,41 +102,53 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
     setSubmitting(false)
   }
 
-  useEffect(() => {
+  function validateAmountInput(amountInput: string) {
-    function validate() {
+    let validAmountInput = '0'
-      const errors: Record<string, string> = {}
 
-      if (!depthInput) {
+    if (!amountInput) {
-        errors.depth = 'Required field'
+      errors.amount = 'Required field'
-      } else {
+    } else {
-        const depth = new BigNumber(depthInput)
+      if (amountInput.indexOf('.') > -1) {
-
+        errors.amount = 'Amount must be an integer'
-        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'
       } else {
         const amount = new BigNumber(amountInput)
 
-        if (!amount.isInteger()) {
+        if (amount.isNaN()) {
-          errors.amount = 'Amount must be an integer'
+          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())
+    setAmountInput(validAmountInput)
-  }, [depthInput, amountInput])
+  }
+
+  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 {
         </Typography>
       </Box>
       <Box mb={2}>
-        <SwarmTextInput name="depth" label="Depth" onChange={event => setDepthInput(event.target.value)} />
+        <SwarmTextInput name="depth" label="Depth" onChange={event => validateDepthInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
           <Grid container justifyContent="space-between">
             <Typography>Corresponding file size</Typography>
@@ -164,7 +176,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         </Box>
       </Box>
       <Box mb={2}>
-        <SwarmTextInput name="amount" label="Amount" onChange={event => setAmountInput(event.target.value)} />
+        <SwarmTextInput name="amount" label="Amount" onChange={event => validateAmountInput(event.target.value)} />
         <Box mt={0.25} sx={{ bgcolor: '#f6f6f6' }} p={2}>
           <Grid container justifyContent="space-between">
             <Typography>Corresponding TTL (Time to live)</Typography>
@@ -213,7 +225,7 @@ export function PostageStampCreation({ onFinished }: Props): ReactElement {
         </Grid>
       </Box>
       <SwarmButton
-        disabled={submitting || Object.keys(errors).length > 0}
+        disabled={submitting || errors.depth !== '' || errors.amount !== ''}
         onClick={submit}
         iconType={Check}
         loading={submitting}

src/pages/stamps/PostageStampSelector.tsx

@@ -23,7 +23,10 @@ export function PostageStampSelector({ onSelect, defaultValue }: Props): ReactEl
 
   return (
     <SwarmSelect
-      options={(stamps || []).map(x => ({ 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..."