add minMaxLength validator

src/components/forms/validator.js

@@ -52,6 +52,8 @@ export const mustBeEthereumAddress = (address: Field) => {
   return isAddress ? undefined : 'Address should be a valid Ethereum address'
 }
 
+export const minMaxLength = (minLen: string | number, maxLen: string | number) => (value: string) => (value.length >= +minLen && value.length <= +maxLen ? undefined : `Should be ${minLen} to ${maxLen} symbols`)
+
 export const ADDRESS_REPEATED_ERROR = 'Address already introduced'
 
 export const uniqueAddress = (addresses: string[]) => (value: string) => (addresses.includes(value) ? ADDRESS_REPEATED_ERROR : undefined)

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -14,9 +14,10 @@ import Checkbox from '~/components/forms/Checkbox'
 import GnoForm from '~/components/forms/GnoForm'
 import TextField from '~/components/forms/TextField'
 import Hairline from '~/components/layout/Hairline'
-import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
+import {
+  composeValidators, required, mustBeEthereumAddress, minMaxLength,
+} from '~/components/forms/validator'
 import { type TokenProps, type Token } from '~/logic/tokens/store/model/token'
-import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
 import { addressIsTokenContract, doesntExistInTokenList } from './validators'
 import { styles } from './style'
@@ -130,7 +131,7 @@ const AddCustomToken = (props: Props) => {
                     name="symbol"
                     component={TextField}
                     type="text"
-                    validate={required}
+                    validate={composeValidators(required, minMaxLength(3, 12))}
                     placeholder="Token symbol*"
                     text="Token symbol"
                     className={classes.addressInput}
@@ -147,18 +148,13 @@ const AddCustomToken = (props: Props) => {
                   <Block align="left">
                     <Field name="showForAllSafes" component={Checkbox} type="checkbox" className={classes.checkbox} />
                     <Paragraph weight="bolder" size="md" className={classes.checkboxLabel}>
-                      Display token for all safes
+                      Activate token for all Safes
                     </Paragraph>
                   </Block>
                 </Col>
                 <Col xs={6} layout="column" align="center">
                   <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
-                  <Img
+                  <Img src={TokenPlaceholder} alt="Token image" height={100} />
-                    src={formValues.logoUri || TokenPlaceholder}
-                    onError={setImageToPlaceholder}
-                    alt="Token image"
-                    height={100}
-                  />
                 </Col>
               </Row>
             </Block>

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/utils.js

@@ -13,4 +13,4 @@ export const getSymbolAndDecimalsFromContract = async (tokenAddress: string) =>
   }
 
   return values
-}
+}