From e8d58ba67639e86c9c2c336f888901b1a702c6af Mon Sep 17 00:00:00 2001 From: Paschal okwuosa Date: Fri, 27 Dec 2024 00:05:25 +0100 Subject: [PATCH 1/3] Add Ethereum address validation with enhanced UI and error messaging --- app/page.tsx | 34 ++++++++++++++++++++++++++++------ package-lock.json | 10 ++++++++++ package.json | 1 + 3 files changed, 39 insertions(+), 6 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 48b6f57..fc6ea45 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,11 +2,20 @@ import Image from "next/image"; import { useState } from "react"; import toast, { Toaster } from "react-hot-toast"; +import { FaExclamationCircle } from 'react-icons/fa'; export default function Home() { - const [address, setAddress] = useState(""); - const [email, setEmail] = useState(""); - const [loading, setLoading] = useState(false); + const [address, setAddress] = useState(""); + const [email, setEmail] = useState(""); + const [loading, setLoading] = useState(false); + const [isValid, setIsValid] = useState(false); + + // Validate Ethereum Address + const validateAddress = (input: string) => { + const isValid = /^0x[a-fA-F0-9]{40}$/.test(input); + setIsValid(isValid); + return isValid; + }; const addToMetamask = async () => { try { @@ -65,6 +74,8 @@ export default function Home() { const faucet = async (address: string) => { setLoading(true); try { + if (!validateAddress(address)) throw new Error('Invalid Ethereum address! Please enter a valid address starting with "0x".'); + const response = await fetch("/api/faucet", { method: "POST", body: JSON.stringify({ @@ -130,11 +141,22 @@ export default function Home() { setAddress(e.target.value)} + onChange={(e) => { + const input = e.target.value; + setAddress(input); + validateAddress(input); + }} required /> + + {!isValid && address && ( +
+ + Invalid Ethereum address! Please enter a valid address starting with "0x". +
+ )}
@@ -158,7 +180,7 @@ export default function Home() { diff --git a/package-lock.json b/package-lock.json index 910501c..30eabd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "react": "19.0.0-rc-69d4b800-20241021", "react-dom": "19.0.0-rc-69d4b800-20241021", "react-hot-toast": "^2.4.1", + "react-icons": "^5.4.0", "viem": "^2.21.35" }, "devDependencies": { @@ -1908,6 +1909,15 @@ "react-dom": ">=16" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index ae8594f..a3c952b 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "19.0.0-rc-69d4b800-20241021", "react-dom": "19.0.0-rc-69d4b800-20241021", "react-hot-toast": "^2.4.1", + "react-icons": "^5.4.0", "viem": "^2.21.35" }, "devDependencies": { From e8cc683be20515f68d3f02507b86f22776e3a0a6 Mon Sep 17 00:00:00 2001 From: Paschal okwuosa Date: Fri, 27 Dec 2024 00:14:38 +0100 Subject: [PATCH 2/3] Feat:Add Ethereum address validation with enhanced UI and error messaging --- app/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index fc6ea45..c7caaab 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -150,7 +150,6 @@ export default function Home() { }} required /> - {!isValid && address && (
From 5f0c1894c1e0e077dc8598495871288743707bfd Mon Sep 17 00:00:00 2001 From: Paschal okwuosa Date: Fri, 27 Dec 2024 22:31:06 +0100 Subject: [PATCH 3/3] Feat:Add email validation logic with dynamic UI feedback --- app/page.tsx | 39 +++++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index c7caaab..baf5293 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,12 +8,20 @@ export default function Home() { const [address, setAddress] = useState(""); const [email, setEmail] = useState(""); const [loading, setLoading] = useState(false); - const [isValid, setIsValid] = useState(false); + const [isValidAddress, setIsValidAddress] = useState(false); + const [isValidEmail, setIsValidEmail] = useState(false); // Validate Ethereum Address - const validateAddress = (input: string) => { + const validateAddress = (input: string): boolean => { const isValid = /^0x[a-fA-F0-9]{40}$/.test(input); - setIsValid(isValid); + setIsValidAddress(isValid); + return isValid; + }; + + // Validate Email Address + const validateEmail = (email: string): boolean => { + const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + setIsValidEmail(isValid); return isValid; }; @@ -76,6 +84,10 @@ export default function Home() { try { if (!validateAddress(address)) throw new Error('Invalid Ethereum address! Please enter a valid address starting with "0x".'); + if(email){ + if(!validateEmail(email)) throw new Error('Invalid Email address! Please enter a valid Email address.'); + } + const response = await fetch("/api/faucet", { method: "POST", body: JSON.stringify({ @@ -141,7 +153,7 @@ export default function Home() { { const input = e.target.value; @@ -150,7 +162,7 @@ export default function Home() { }} required /> - {!isValid && address && ( + {!isValidAddress && address && (
Invalid Ethereum address! Please enter a valid address starting with "0x". @@ -169,17 +181,28 @@ export default function Home() { setEmail(e.target.value)} + onChange={(e) => { + const input = e.target.value; + setEmail(input); + validateEmail(input); + } + } /> + {!isValidEmail && email && ( +
+ + Invalid Email address! Please enter a valid email address. +
+ )}