diff --git a/webapp/src/language/en.json b/webapp/src/language/en.json index b7eb5530..1ae0c286 100644 --- a/webapp/src/language/en.json +++ b/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" diff --git a/webapp/src/language/es.json b/webapp/src/language/es.json index 7e3c9340..44e742f7 100644 --- a/webapp/src/language/es.json +++ b/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" diff --git a/webapp/src/routes/Faucet/index.js b/webapp/src/routes/Faucet/index.js index 1c6a8fb7..dd7172eb 100644 --- a/webapp/src/routes/Faucet/index.js +++ b/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: ( - + {`${t('transferTokensTransaction')} ${tx.slice(0, 7)}`} ), @@ -150,13 +155,18 @@ const Faucet = () => { } const isValidAccountName = name => { - const regex = /^[.12345abcdefghijklmnopqrstuvwxyz]+$/i + const regex = /^[.12345abcdefghijklmnopqrstuvwxyz]+$/ return name?.length < 13 && regex.test(name) } return ( -
+
@@ -174,11 +184,11 @@ const Faucet = () => { ...{ publicKey: e.target.value }, }) } - error={!createAccountValues.publicKey} + helperText={t('keyFormat')} required />
- {eosConfig.networkName !== 'ultra-testnet' && ( + {!isUltraTestnet && (
{ ...{ accountName: e.target.value }, }) } - error={!isValidAccountName(createAccountValues.accountName)} + error={!!createAccountValues.accountName && !isValidAccountName(createAccountValues.accountName)} + helperText={t('accountFormat')} required />
@@ -221,16 +232,17 @@ const Faucet = () => {
- {t('issueTokens')} + {`${t('issueTokens')} (500 ${eosConfig.tokenSymbol})`}
setAccount(e.target.value)} - error={!isValidAccountName(account)} + error={!!account && !isValidAccountName(account)} + helperText={t('accountFormat')} required />
diff --git a/webapp/src/routes/Faucet/styles.js b/webapp/src/routes/Faucet/styles.js index b775ee3d..03c5538b 100644 --- a/webapp/src/routes/Faucet/styles.js +++ b/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', - } + }, }, })