Update the logic of the input that takes the address to which the cryptocurrency is to be sent

.gitignore

@@ -116,4 +116,7 @@ yarn.lock
 public/sw.js
 public/sw.js.map
 public/workbox-*.js
-public/workbox-*.js.map
+public/workbox-*.js.map
+
+# Wallet
+test-seed-phrase.txt

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 (
     <>
       <Navbar type='modal' title='Testeando' onClose={handleCloseModal} />
@@ -181,7 +213,8 @@ const Component = ({ onClose }) => {
                   value={toAddress}
                   onChange={setToAddress}
                   onClick={setToAddress}
-                  // autoFocus
+                  addressIsValid={addressIsValid}
+                  setAddressIsValid={setAddressIsValid}
                 />
                 <Divider y={16} />
                 <Text align='center'>
@@ -324,7 +357,7 @@ const Component = ({ onClose }) => {
               Cancelar
             </Button>
             {step === 'address' && (
-              <Button onClick={() => toAddress && setStep('token')} isDisabled={!toAddress}>
+              <Button onClick={continueToken}>
                 {loading ? <Spinner /> : 'Continuar'}
               </Button>
             )}
@@ -336,7 +369,7 @@ const Component = ({ onClose }) => {
             {step === 'amount' && (
               <Button
                 onClick={() => setStep('sumary')}
-                isDisabled={!mount || mount === '0' || mount === '0.' || mount === '.' || mount === ','}
+                isDisabled={!mount || mount === '0' || mount === '0.' || mount === '.' || mount === ',' || !addressIsValid}
               >
                 {loading ? <Spinner /> : 'Continuar'}
               </Button>

src/components/InputWithButton/index.jsx

@@ -7,48 +7,61 @@ 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();
 
   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) {
       console.error('Failed to read clipboard contents: ', err);
     }
   };
 
-  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 (
     <Box {...style}>
       <Input
         placeholder={placeholder}
-        value={value && useTruncatedAddress(value)}
-        onChange={(e) => handleValidateAddress(e.target.value)}
+        value={inputValue}
+        onChange={handleValidateAddress}
         autoFocus={!value}
+        style={inputStyle}
       />
       <Box {...buttonBoxStyle}>
         <Button size='small' type='bezeled' onClick={handlePasteAddress} disabled={value}>