Feat/improve UI faucet

webapp/src/language/en.json

@@ -197,11 +197,15 @@
     "createAccount": "Create Faucet Account",
     "newCreatedAccount": "Your new account is",
     "transferTokensTransaction": "Tokens transferred correctly. Check it on explorer here",
-    "createButton": "Create",
+    "createButton": "Create Account",
     "issueTokens": "Issue Tokens",
     "getTokens": "Get Tokens",
     "publicKey": "Public Key (Active/Owner)",
-    "accountName": "Account Name"
+    "accountName": "Account Name",
+    "invalidAccount": "Please enter a valid account name",
+    "emptyFields": "Fill out the fields to create an account",
+    "accountFormat": "Must be 12 or less characters and can contain from 'a' to 'z' in lowercase and numbers from 1 to 5",
+    "keyFormat": "Please enter a ECC valid key. Generate it with cleos or a compatible wallet"
   },
   "ricardianContractRoute": {
     "title": "Block Producer Agreement"

webapp/src/language/es.json

@@ -203,11 +203,15 @@
     "createAccount": "Crear Cuenta Faucet",
     "newCreatedAccount": "Su nueva cuenta es",
     "transferTokensTransaction": "Tokens transferidos correctamente. Puede revisar la transacción aquí",
-    "createButton": "Crear",
+    "createButton": "Crear Cuenta",
     "issueTokens": "Emitir Tokens",
     "getTokens": "Obtener Tokens",
     "publicKey": "Llave pública (Active/Owner)",
-    "accountName": "Nombre de la cuenta"
+    "accountName": "Nombre de la cuenta",
+    "invalidAccount": "Ingrese un nombre de cuenta válido",
+    "emptyFields": "Rellene todos los campos para crear la cuenta",
+    "accountFormat": "Debe tener 12 caracteres o menos y puede contener desde la letra 'a' a la 'z' en minúsculas y números del 1 al 5",
+    "keyFormat": "Ingrese una llave ECC válida. Puede generarla con cleos o cualquier wallet compatible"
   },
   "ricardianContractRoute": {
     "title": "Acuerdo de Productor de Bloques"

webapp/src/routes/Faucet/index.js

@@ -25,12 +25,13 @@ const useStyles = makeStyles(styles)
 const Faucet = () => {
   const classes = useStyles()
   const { t } = useTranslation('faucetRoute')
+  const isUltraTestnet = eosConfig.networkName === 'ultra-testnet'
   const [, { showMessage }] = useSnackbarMessageState()
   const [account, setAccount] = useState('')
   const [createAccountValues, setCreateAccountValues] = useState({})
   const [transferTokensTransaction, setTransferTokensTransaction] = useState('')
   const [createFaucetAccount, { loading: loadingCreateAccount }] = useMutation(
-    CREATE_ACCOUNT_MUTATION(eosConfig.networkName !== 'ultra-testnet'),
+    CREATE_ACCOUNT_MUTATION(!isUltraTestnet),
   )
   const [transferFaucetTokens, { loading: loadingTransferFaucetTokens }] =
     useMutation(TRANFER_FAUCET_TOKENS_MUTATION)
@@ -42,23 +43,23 @@ const Faucet = () => {
     if (
       !reCaptchaToken ||
       !createAccountValues.publicKey ||
-      (eosConfig.networkName !== 'ultra-testnet' &&
+      (!isUltraTestnet &&
         !createAccountValues.accountName)
     ) {
       showMessage({
         type: 'error',
-        content: 'Fill out the fields to create an account',
+        content: t('emptyFields'),
       })
       return
     }
 
     if (
-      eosConfig.networkName !== 'ultra-testnet' &&
+      !isUltraTestnet &&
       !isValidAccountName(createAccountValues.accountName)
     ) {
       showMessage({
         type: 'error',
-        content: 'Please enter a valid account name',
+        content: t('invalidAccount'),
       })
       return
     }
@@ -102,12 +103,12 @@ const Faucet = () => {
 
     const reCaptchaToken = await executeRecaptcha?.('submit')
 
-    if (!reCaptchaToken || !account) return
+    if (!reCaptchaToken) return
 
-    if (!isValidAccountName(account)) {
+    if (!account || !isValidAccountName(account)) {
       showMessage({
         type: 'error',
-        content: 'Please enter a valid account name',
+        content: t('invalidAccount'),
       })
       return
     }
@@ -150,13 +151,18 @@ const Faucet = () => {
   }
 
   const isValidAccountName = name => {
-    const regex = /^[.12345abcdefghijklmnopqrstuvwxyz]+$/i
+    const regex = /^[.12345abcdefghijklmnopqrstuvwxyz]+$/
 
     return name?.length < 13 && regex.test(name)
   }
 
   return (
-    <div className={classes.test}>
+    <div
+      className={classes.test}
+      style={{
+        height: isUltraTestnet ? '250px' : '375px',
+      }}
+    >
       <div className={classes.card}>
         <Card>
           <CardContent>
@@ -174,11 +180,11 @@ const Faucet = () => {
                       ...{ publicKey: e.target.value },
                     })
                   }
-                  error={!createAccountValues.publicKey}
+                  helperText={t('keyFormat')}
                   required
                 />
               </div>
-              {eosConfig.networkName !== 'ultra-testnet' && (
+              {!isUltraTestnet && (
                 <div>
                   <TextField
                     key="action-field-issue-tokens"
@@ -191,7 +197,8 @@ const Faucet = () => {
                         ...{ accountName: e.target.value },
                       })
                     }
-                    error={!isValidAccountName(createAccountValues.accountName)}
+                    error={!!createAccountValues.accountName && !isValidAccountName(createAccountValues.accountName)}
+                    helperText={t('accountFormat')}
                     required
                   />
                 </div>
@@ -221,16 +228,17 @@ const Faucet = () => {
       <div className={classes.card}>
         <Card>
           <CardContent>
-            <Typography variant="h5">{t('issueTokens')}</Typography>
+            <Typography variant="h5">{`${t('issueTokens')} (500 ${eosConfig.tokenSymbol})`}</Typography>
             <div className={classes.formControl}>
               <div>
                 <TextField
                   key="action-field-issue-tokens"
-                  label={`${t('account')} (500 ${eosConfig.tokenSymbol})`}
+                  label={`${t('accountName')}`}
                   variant="outlined"
                   value={account}
                   onChange={(e) => setAccount(e.target.value)}
-                  error={!isValidAccountName(account)}
+                  error={!!account && !isValidAccountName(account)}
+                  helperText={t('accountFormat')}
                   required
                 />
               </div>

webapp/src/routes/Faucet/styles.js

@@ -1,21 +1,30 @@
 export default (theme) => ({
   formControl: {
-    margin: theme.spacing(2),
+    margin: theme.spacing(6, 4, 4),
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(4),
+    minHeight: '150px',
+    justifyContent: 'center',
+    '& .MuiFormControl-root': {
+      width: '300px',
+    },
   },
   test: {
     display: 'flex',
+    justifyContent: 'center',
     [theme.breakpoints.down('md')]: {
-      display: 'block',
+      flexWrap: 'wrap',
+      height: '100% !important',
     },
+    marginBottom: theme.spacing(4),
   },
   card: {
     padding: '10px',
     height: '100%',
     '& .MuiPaper-root': {
+      height: '100%',
       boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
-    }
+    },
   },
 })