Merge pull request #1266 from edenia/feat/improve-UI-faucet

Feat/improve UI faucet

webapp/src/language/en.json

@@ -201,14 +201,18 @@
     "bpjsonInconsistency": "The bp.json on chain and of chain does not match, review it and make the necessary changes"
   },
   "faucetRoute": {
-    "createAccount": "Create Faucet Account",
-    "newCreatedAccount": "Your new account is",
-    "transferTokensTransaction": "Tokens transferred correctly. Check it on explorer here",
-    "createButton": "Create",
-    "issueTokens": "Issue Tokens",
-    "getTokens": "Get Tokens",
-    "publicKey": "Public Key (Active/Owner)",
-    "accountName": "Account Name"
+    "createAccount": "Create Your Account",
+    "newCreatedAccount": "Congratulations! Your new account has been created:",
+    "transferTokensTransaction": "Tokens have been successfully transferred. View the transaction on the explorer:",
+    "createButton": "Create Your Account",
+    "issueTokens": "Distribute Tokens",
+    "getTokens": "Receive Tokens",
+    "publicKey": "Enter Public Key (Active/Owner)",
+    "accountName": "Choose an Account Name",
+    "invalidAccount": "Enter a valid account name, please.",
+    "emptyFields": "Complete all fields to proceed with account creation.",
+    "accountFormat": "Account name should be 12 characters or fewer. Use lowercase letters (a-z) and numbers (1-5) only.",
+    "keyFormat": "Enter a valid ECC key. You can generate one using cleos or any compatible wallet."
   },
   "ricardianContractRoute": {
     "title": "Block Producer Agreement"

webapp/src/language/es.json

@@ -201,14 +201,18 @@
     "bpjsonInconsistency": "El bp.json on chain y en of chain no coincide revisalo y realiza los cambios necesarios"
   },
   "faucetRoute": {
-    "createAccount": "Crear Cuenta Faucet",
-    "newCreatedAccount": "Su nueva cuenta es",
-    "transferTokensTransaction": "Tokens transferidos correctamente. Puede revisar la transacción aquí",
-    "createButton": "Crear",
-    "issueTokens": "Emitir Tokens",
-    "getTokens": "Obtener Tokens",
-    "publicKey": "Llave pública (Active/Owner)",
-    "accountName": "Nombre de la cuenta"
+    "createAccount": "Cree su Cuenta",
+    "newCreatedAccount": "¡Felicidades! Su nueva cuenta ha sido creada:",
+    "transferTokensTransaction": "Los tokens han sido transferidos exitosamente. Vea la transacción en el explorador:",
+    "createButton": "Cree su Cuenta",
+    "issueTokens": "Distribuya Tokens",
+    "getTokens": "Reciba Tokens",
+    "publicKey": "Introduzca la Clave Pública (Activa/Propietario)",
+    "accountName": "Elija un Nombre de Cuenta",
+    "invalidAccount": "Por favor, introduzca un nombre de cuenta válido.",
+    "emptyFields": "Complete todos los campos para continuar con la creación de la cuenta.",
+    "accountFormat": "El nombre de la cuenta debe tener 12 caracteres o menos. Utilice solo letras minúsculas (a-z) y números (1-5).",
+    "keyFormat": "Introduzca una clave ECC válida. Puede generar una usando cleos o cualquier billetera 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
     }
@@ -129,7 +130,11 @@ const Faucet = () => {
       showMessage({
         type: 'success',
         content: (
-          <a href={eosConfig.blockExplorerUrl.replace('(transaction)', tx)}>
+          <a
+            href={eosConfig.blockExplorerUrl.replace('(transaction)', tx)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             {`${t('transferTokensTransaction')} ${tx.slice(0, 7)}`}
           </a>
         ),
@@ -150,13 +155,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 +184,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 +201,8 @@ const Faucet = () => {
                         ...{ accountName: e.target.value },
                       })
                     }
-                    error={!isValidAccountName(createAccountValues.accountName)}
+                    error={!!createAccountValues.accountName && !isValidAccountName(createAccountValues.accountName)}
+                    helperText={t('accountFormat')}
                     required
                   />
                 </div>
@@ -221,16 +232,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',
-    }
+    },
   },
 })