diff --git a/frontend/src/components/CreatePaymentForm.tsx b/frontend/src/components/CreatePaymentForm.tsx index 73115b5..8764e42 100644 --- a/frontend/src/components/CreatePaymentForm.tsx +++ b/frontend/src/components/CreatePaymentForm.tsx @@ -15,7 +15,6 @@ import { } from "@/lib/merchant-store"; import { useLocalStorage } from "@/hooks/useLocalStorage"; - const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000"; const USDC_ISSUER = @@ -179,8 +178,7 @@ function SuccessCard({ created, onReset, t }: SuccessCardProps) { useEffect(() => { fireConfetti(); setCanShare( - typeof navigator !== "undefined" && - typeof navigator.share === "function", + typeof navigator !== "undefined" && typeof navigator.share === "function", ); }, []); @@ -284,7 +282,10 @@ function SuccessCard({ created, onReset, t }: SuccessCardProps) { - + {canShare && ( @@ -651,12 +676,28 @@ export default function CreatePaymentForm() { type="text" required value={recipient} - onChange={(e) => setRecipient(e.target.value)} - className="rounded-xl border border-white/10 bg-white/5 p-3 font-mono text-sm text-white placeholder:font-sans placeholder:text-slate-600 focus:border-mint/50 focus:outline-none focus:ring-1 focus:ring-mint/50" + onChange={(e) => { + setRecipient(e.target.value); + setRecipientError(null); + }} + aria-invalid={!!recipientError} + aria-describedby={ + recipientError ? "recipient-error" : undefined + } + className={`rounded-xl border bg-white/5 p-3 font-mono text-sm text-white placeholder:font-sans placeholder:text-slate-600 focus:outline-none focus:ring-1 ${recipientError ? "border-red-500/50 focus:border-red-500/50 focus:ring-red-500/50" : "border-white/10 focus:border-mint/50 focus:ring-mint/50"}`} placeholder={recipientPlaceholder} autoComplete="off" spellCheck={false} /> + {recipientError && ( + + )} {/* Description */} @@ -694,10 +735,11 @@ export default function CreatePaymentForm() {