Refactor code

.next/build-manifest.json

@@ -28,11 +28,6 @@
       "static/chunks/webpack.js",
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
-    ],
-    "/next/dist/pages/_error": [
-      "static/chunks/webpack.js",
-      "static/chunks/main.js",
-      "static/chunks/pages/next/dist/pages/_error.js"
     ]
   },
   "ampFirstPages": []

.next/server/pages-manifest.json

@@ -2,7 +2,5 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
-  "/next/dist/pages/_error": "pages/next/dist/pages/_error.js",
-  "/": "pages/index.js",
-  "/api": "pages/api.js"
+  "/": "pages/index.js"
 }

src/pages/index.tsx

@@ -12,19 +12,6 @@ function Home(): React.ReactNode {
   const [success, setSuccess] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (value) {
-      setTouched(true);
-    }
-
-    setIsValid(verifyEthAddress(value));
-  }, [value]);
-
-  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    await requestFunds();
-  };
-
   const getContractBalance = async () => {
     try {
       const { data } = await axios.get('/api');
@@ -48,6 +35,30 @@ function Home(): React.ReactNode {
     setLoading(false);
   };
 
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!isValid) {
+      return setError('Invalid wallet address.');
+    }
+
+    await requestFunds();
+  };
+
+  useEffect(() => {
+    if (value) {
+      setTouched(true);
+    }
+
+    setIsValid(verifyEthAddress(value));
+  }, [value]);
+
+  useEffect(() => {
+    if (!isValid) {
+      setError('');
+    }
+  }, [value]);
+
   useEffect(() => {
     getContractBalance();
   }, []);