diff --git a/.gitignore b/.gitignore index 5248935..aee1339 100644 --- a/.gitignore +++ b/.gitignore @@ -116,4 +116,7 @@ yarn.lock public/sw.js public/sw.js.map public/workbox-*.js -public/workbox-*.js.map \ No newline at end of file +public/workbox-*.js.map + +# Wallet +test-seed-phrase.txt \ No newline at end of file diff --git a/src/components/FullModal/Send/index.tsx b/src/components/FullModal/Send/index.tsx index 18db9d5..7fce474 100644 --- a/src/components/FullModal/Send/index.tsx +++ b/src/components/FullModal/Send/index.tsx @@ -50,6 +50,7 @@ const Component = ({ onClose }) => { // Price const [price, setPrice] = useState({ eth: 0, dai: 0 }); const [gasPrice, setGasPrice] = useState(); + const [addressIsValid, setAddressIsValid] = useState(false); useEffect(() => { // setLoading(true); @@ -81,6 +82,11 @@ const Component = ({ onClose }) => { !gasPrice && !price.eth && !price.dai && init(); }, [gasPrice, totalTokensUSD]); + useEffect(() => { + setToAddress(null) + setAddressIsValid(false) + }, []); + // Send transaction const handleSendTransaction = async () => { setLoading(true); @@ -121,7 +127,7 @@ const Component = ({ onClose }) => { if (enterPress) { switch (step) { case 'address': - toAddress && setStep('token'); + toAddress !== null && toAddress !== '' && addressIsValid && setStep('token'); break; case 'token': tokenSelected && setStep('amount'); @@ -167,6 +173,32 @@ const Component = ({ onClose }) => { setMount(null); }; + const continueToken = () => { + if (toAddress === null || toAddress === '') { + toast({ + title: 'Advertencia', + description: 'El campo de texto está vacío', + status: 'warning', + position: 'top', + duration: '2000', + isClosable: true + }); + } + + if (!addressIsValid && toAddress !== null && toAddress !== '') { + toast({ + title: 'Error', + description: 'La dirección de esta billetera es incorrecta o inválida', + status: 'error', + position: 'top', + duration: '2000', + isClosable: true + }); + } + + if (toAddress && addressIsValid) setStep('token'); + } + return ( <> @@ -181,7 +213,8 @@ const Component = ({ onClose }) => { value={toAddress} onChange={setToAddress} onClick={setToAddress} - // autoFocus + addressIsValid={addressIsValid} + setAddressIsValid={setAddressIsValid} /> @@ -324,7 +357,7 @@ const Component = ({ onClose }) => { Cancelar {step === 'address' && ( - )} @@ -336,7 +369,7 @@ const Component = ({ onClose }) => { {step === 'amount' && ( diff --git a/src/components/InputWithButton/index.jsx b/src/components/InputWithButton/index.jsx index 1c83471..f11efac 100644 --- a/src/components/InputWithButton/index.jsx +++ b/src/components/InputWithButton/index.jsx @@ -7,7 +7,7 @@ import Input from 'src/components/Shared/Input'; import useTruncatedAddress from 'src/hooks/useTruncatedAddress'; const Component = (props) => { - const { placeholder, value, onChange, onClick } = props; + const { placeholder, value, onChange, onClick, addressIsValid, setAddressIsValid } = props; // Chakra const toast = useToast(); @@ -15,14 +15,27 @@ const Component = (props) => { const handlePasteAddress = async () => { try { const text = await navigator.clipboard.readText(); - const addressIsValid = ethers.utils.isAddress(text); + const isValid = ethers.utils.isAddress(text); + setAddressIsValid(isValid); - if (addressIsValid) { + if (isValid) { onClick(text); + toast({ + title: 'Perfecto', + description: 'La dirección de esta billetera es correcta', + status: 'success', + position: 'top', + duration: '2000', + isClosable: true + }); } else { toast({ - description: 'La address parece ser incorrecta.', - status: 'warning', + title: 'Error', + description: 'La dirección de esta billetera es incorrecta o inválida', + status: 'error', + position: 'top', + duration: '2000', + isClosable: true }); } } catch (err) { @@ -30,25 +43,25 @@ const Component = (props) => { } }; - const handleValidateAddress = (value) => { - const addressIsValid = ethers.utils.isAddress(value); - if (addressIsValid) { - onChange(value); - } - // else { - // toast({ - // description: 'La address parece ser incorrecta.', - // status: 'warning', - // }); - // } + const handleValidateAddress = ({ target: { value } }) => { + const isValid = ethers.utils.isAddress(value); + setAddressIsValid(isValid); + onChange(value); }; + const truncated = addressIsValid && value !== null && value !== ''; + const inputValue = truncated ? useTruncatedAddress(value) : value; + const style = { position: 'relative', display: 'flex', width: '100%', }; + const inputStyle = { + paddingRight: '90px' + }; + const buttonBoxStyle = { position: 'absolute', zIndex: 1, @@ -57,16 +70,17 @@ const Component = (props) => { display: 'flex', height: '100%', - alignItems: 'center', + alignItems: 'center' }; return ( handleValidateAddress(e.target.value)} + value={inputValue} + onChange={handleValidateAddress} autoFocus={!value} + style={inputStyle} />