diff --git a/src/components/AddressChangeRequestModal.tsx b/src/components/AddressChangeRequestModal.tsx index 0dc590a..5d81cc8 100644 --- a/src/components/AddressChangeRequestModal.tsx +++ b/src/components/AddressChangeRequestModal.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import type { AddressChangeRequestInput } from '@/types/addressChangeRequest'; +import { useAddressValidation } from '@/hooks/useAddressValidation'; interface AddressChangeRequestModalProps { invoiceId: string; @@ -25,15 +26,30 @@ export default function AddressChangeRequestModal({ }); const [error, setError] = useState(null); const [success, setSuccess] = useState(false); + const [hasAttemptedSubmit, setHasAttemptedSubmit] = useState(false); + const { + validateAddress, + isValid: isAddressValid, + isLoading: isAddressValidating, + error: addressError, + } = useAddressValidation(); const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value })); + if (name === 'newAddress' && hasAttemptedSubmit) { + validateAddress(value); + } + }; + + const handleAddressBlur = (e: React.FocusEvent) => { + validateAddress(e.target.value); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(null); + setHasAttemptedSubmit(true); // Validate new address is different from old address if (formData.newAddress === formData.oldAddress) { @@ -41,9 +57,9 @@ export default function AddressChangeRequestModal({ return; } - // Validate new address format (basic check for Stellar address) - if (!formData.newAddress.startsWith('G') || formData.newAddress.length !== 56) { - setError('Invalid Stellar address format'); + // Validate new address using Stellar address validation (state populated via blur/change) + if (!formData.newAddress.trim() || !isAddressValid) { + setError(addressError || 'Invalid Stellar address format'); return; } @@ -119,11 +135,16 @@ export default function AddressChangeRequestModal({ name="newAddress" value={formData.newAddress} onChange={handleChange} + onBlur={handleAddressBlur} placeholder="G..." className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" required /> -

Must be a valid Stellar address starting with G

+ {addressError ? ( +

{addressError}

+ ) : ( +

Must be a valid Stellar address starting with G

+ )} {/* Justification */} @@ -158,7 +179,11 @@ export default function AddressChangeRequestModal({