Merge pull request #519 from charlesbarleyman/feature/issues-511-517-513-515

emdevelopa · web-flow · commit dbf1a92e8dfd · 2026-03-30T13:04:07.000+01:00
Improve dashboard accessibility, validation UX, and skeleton alignment
diff --git a/frontend/src/components/CreatePaymentForm.tsx b/frontend/src/components/CreatePaymentForm.tsx
@@ -8,6 +8,7 @@ import CopyButton from "./CopyButton";
 import { toast } from "sonner";
 import IntegrationCodeSnippets from "./IntegrationCodeSnippets";
 import Link from "next/link";
+import { InfoTooltip } from "./InfoTooltip";
 import {
   useHydrateMerchantStore,
   useMerchantApiKey,
@@ -354,6 +355,7 @@ export default function CreatePaymentForm() {
   const [error, setError] = useState<string | null>(null);
   const [amountError, setAmountError] = useState<string | null>(null);
   const [recipientError, setRecipientError] = useState<string | null>(null);
+  const [webhookUrlError, setWebhookUrlError] = useState<string | null>(null);
   const [created, setCreated] = useState<CreatedPayment | null>(null);
   const apiKey = useMerchantApiKey();
   const hydrated = useMerchantHydrated();
@@ -384,7 +386,41 @@ export default function CreatePaymentForm() {
         label: selectedTrustedAddressLabel,
       })
     : t("recipientPlaceholder", { asset });
-  const descriptionPlaceholder = t("descriptionPlaceholder", { asset });
+  const validateAmount = (value: string) => {
+    const numAmount = parseFloat(value);
+    if (isNaN(numAmount) || numAmount <= 0) {
+      return "Amount must be greater than 0.";
+    }
+    return null;
+  };
+
+  const validateRecipient = (value: string) => {
+    if (!STELLAR_ADDRESS_RE.test(value.trim())) {
+      return "Must be a valid Stellar public key (56 characters, starts with G).";
+    }
+    return null;
+  };
+
+  const validateWebhookUrl = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) return null;
+    try {
+      const parsed = new URL(trimmed);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        return "Webhook URL must start with http:// or https://";
+      }
+    } catch {
+      return "Enter a valid webhook URL.";
+    }
+    return null;
+  };
+
+  const isFormValid =
+    !validateAmount(amount) &&
+    !validateRecipient(recipient) &&
+    !validateWebhookUrl(description) &&
+    amount.trim().length > 0 &&
+    recipient.trim().length > 0;
 
   // ── Rate-limit countdown ──────────────────────────────────
   const [retryAfter, setRetryAfter] = useState(0);
@@ -419,19 +455,15 @@ export default function CreatePaymentForm() {
     setError(null);
 
     // Client-side validation
-    let hasError = false;
+    const nextAmountError = validateAmount(amount);
+    const nextRecipientError = validateRecipient(recipient);
+    const nextWebhookUrlError = validateWebhookUrl(description);
+    setAmountError(nextAmountError);
+    setRecipientError(nextRecipientError);
+    setWebhookUrlError(nextWebhookUrlError);
+    if (nextAmountError || nextRecipientError || nextWebhookUrlError) return;
+
     const numAmount = parseFloat(amount);
-    if (isNaN(numAmount) || numAmount <= 0) {
-      setAmountError("Amount must be greater than 0.");
-      hasError = true;
-    }
-    if (!STELLAR_ADDRESS_RE.test(recipient.trim())) {
-      setRecipientError(
-        "Must be a valid Stellar public key (56 characters, starts with G).",
-      );
-      hasError = true;
-    }
-    if (hasError) return;
 
     setLoading(true);
     try {
@@ -495,6 +527,7 @@ export default function CreatePaymentForm() {
     setError(null);
     setAmountError(null);
     setRecipientError(null);
+    setWebhookUrlError(null);
     setRetryAfter(0);
   };
 
@@ -637,7 +670,7 @@ export default function CreatePaymentForm() {
                 value={amount}
                 onChange={(e) => {
                   setAmount(e.target.value);
-                  setAmountError(null);
+                  setAmountError(validateAmount(e.target.value));
                 }}
                 aria-invalid={!!amountError}
                 aria-describedby={amountError ? "amount-error" : undefined}
@@ -724,6 +757,21 @@ export default function CreatePaymentForm() {
                 className="text-xs font-medium uppercase tracking-wider text-slate-400"
               >
                 {t("recipientAddress")}
+                <InfoTooltip
+                  className="ml-2"
+                  content={
+                    <span>
+                      Use a valid Stellar public key that starts with G and is 56
+                      characters long. Example:
+                      <br />
+                      <code className="text-[11px] text-mint">
+                        GDQP2KPQGKIH...MBCQ4MMR
+                      </code>
+                    </span>
+                  }
+                >
+                  <span tabIndex={0}>What is this?</span>
+                </InfoTooltip>
               </label>
               <input
                 id="recipient"
@@ -732,7 +780,7 @@ export default function CreatePaymentForm() {
                 value={recipient}
                 onChange={(e) => {
                   setRecipient(e.target.value);
-                  setRecipientError(null);
+                  setRecipientError(validateRecipient(e.target.value));
                 }}
                 aria-invalid={!!recipientError}
                 aria-describedby={
@@ -764,15 +812,39 @@ export default function CreatePaymentForm() {
                 <span className="normal-case text-slate-600">
                   ({t("optional")})
                 </span>
+                <InfoTooltip
+                  className="ml-2"
+                  content={
+                    <span>
+                      If you add a webhook URL here, use a full URL like
+                      <br />
+                      <code className="text-[11px] text-mint">
+                        https://example.com/api/webhooks/stellar
+                      </code>
+                    </span>
+                  }
+                >
+                  <span tabIndex={0}>Webhook URL help</span>
+                </InfoTooltip>
               </label>
               <input
                 id="description"
                 type="text"
                 value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="rounded-xl border border-white/10 bg-white/5 p-3 text-white placeholder:text-slate-600 focus:border-mint/50 focus:outline-none focus:ring-1 focus:ring-mint/50"
-                placeholder={descriptionPlaceholder}
+                onChange={(e) => {
+                  setDescription(e.target.value);
+                  setWebhookUrlError(validateWebhookUrl(e.target.value));
+                }}
+                aria-invalid={Boolean(webhookUrlError)}
+                aria-describedby={webhookUrlError ? "webhook-url-error" : undefined}
+                className={`rounded-xl border bg-white/5 p-3 text-white placeholder:text-slate-600 focus:outline-none focus:ring-1 ${webhookUrlError ? "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="Optional memo or webhook URL (https://...)"
               />
+              {webhookUrlError && (
+                <p id="webhook-url-error" className="text-xs text-red-400" role="alert">
+                  {webhookUrlError}
+                </p>
+              )}
             </div>
 
             {/* Branding panel */}
@@ -860,7 +932,7 @@ export default function CreatePaymentForm() {
           {/* Submit */}
           <button
             type="submit"
-            disabled={loading}
+            disabled={loading || !isFormValid}
             className="group relative flex h-12 items-center justify-center rounded-xl bg-mint px-6 font-bold text-black transition-all hover:bg-glow disabled:cursor-not-allowed disabled:opacity-50"
           >
             {loading ? (
diff --git a/frontend/src/components/DashboardSkeleton.tsx b/frontend/src/components/DashboardSkeleton.tsx
@@ -18,12 +18,12 @@ export default function DashboardSkeleton() {
             <section className="flex flex-col gap-4">
               <Skeleton width={180} height={28} borderRadius={6} />
               <div className="grid gap-4 sm:grid-cols-2">
-                {[...Array(2)].map((_, i) => (
+                {[...Array(3)].map((_, i) => (
                   <div key={i} className="rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur">
-                    <Skeleton width={100} height={14} borderRadius={4} />
+                    <Skeleton width={126} height={14} borderRadius={4} />
                     <div className="mt-2 flex items-baseline gap-2">
-                      <Skeleton width={120} height={36} borderRadius={6} />
-                      <Skeleton width={40} height={20} borderRadius={4} />
+                      <Skeleton width={132} height={36} borderRadius={6} />
+                      <Skeleton width={56} height={20} borderRadius={4} />
                     </div>
                   </div>
                 ))}
@@ -41,11 +41,11 @@ export default function DashboardSkeleton() {
                     <Skeleton width={140} height={32} borderRadius={8} />
                   </div>
                 </div>
-                <div className="mt-4 flex gap-2">
+                <div className="flex flex-wrap gap-2">
                   <Skeleton width={60} height={24} borderRadius={12} />
                   <Skeleton width={60} height={24} borderRadius={12} />
                 </div>
-                <div className="mt-4 h-[300px]">
+                <div className="h-[300px]">
                   <Skeleton height="100%" borderRadius={8} />
                 </div>
               </div>
diff --git a/frontend/src/components/DevSandbox.tsx b/frontend/src/components/DevSandbox.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import CopyButton from "@/components/CopyButton";
 import { useMerchantApiKey } from "@/lib/merchant-store";
 import ApiUsageChart from "@/components/ApiUsageChart";
+import { InfoTooltip } from "@/components/InfoTooltip";
 
 type SandboxExample = {
   id: string;
@@ -226,6 +227,22 @@ export default function DevSandbox() {
       <div className="grid gap-4 rounded-xl border border-white/10 bg-black/20 p-4 lg:grid-cols-2">
         <label className="flex flex-col gap-1.5 text-xs uppercase tracking-wider text-slate-400">
           API Base URL
+          <InfoTooltip
+            className="normal-case"
+            content={
+              <span>
+                Use your backend origin for local or deployed testing.
+                <br />
+                Example:
+                <br />
+                <code className="text-[11px] text-mint">
+                  https://api.yourdomain.com
+                </code>
+              </span>
+            }
+          >
+            <span tabIndex={0}>help</span>
+          </InfoTooltip>
           <input
             value={apiBaseUrl}
             onChange={(event) => setApiBaseUrl(event.target.value)}
@@ -235,6 +252,17 @@ export default function DevSandbox() {
 
         <label className="flex flex-col gap-1.5 text-xs uppercase tracking-wider text-slate-400">
           API Key (Optional)
+          <InfoTooltip
+            className="normal-case"
+            content={
+              <span>
+                Required for protected endpoints like create payment, metrics, and
+                list payments.
+              </span>
+            }
+          >
+            <span tabIndex={0}>when needed</span>
+          </InfoTooltip>
           <input
             value={apiKey}
             onChange={(event) => setApiKey(event.target.value)}
diff --git a/frontend/src/components/InfoTooltip.tsx b/frontend/src/components/InfoTooltip.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface InfoTooltipProps {
-  content: string;
+  content: React.ReactNode;
   children: React.ReactNode;
   className?: string;
 }
@@ -20,7 +20,7 @@ export function InfoTooltip({ content, children, className = "" }: InfoTooltipPr
       onFocus={() => setIsVisible(true)}
       onBlur={() => setIsVisible(false)}
     >
-      <span className="cursor-help border-b border-dotted border-white/30 decoration-white/30 transition-colors hover:border-mint hover:text-mint">
+      <span className="cursor-help border-b border-dotted border-white/30 decoration-white/30 transition-colors hover:border-mint hover:text-mint focus-visible:text-mint">
         {children}
       </span>
 
@@ -31,7 +31,7 @@ export function InfoTooltip({ content, children, className = "" }: InfoTooltipPr
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.95, y: 5 }}
             transition={{ duration: 0.15, ease: "easeOut" }}
-            className="absolute bottom-full left-1/2 z-[100] mb-2 w-48 -translate-x-1/2 rounded-lg border border-white/10 bg-[#16171a] p-2.5 text-xs leading-relaxed text-slate-300 shadow-2xl backdrop-blur-md"
+            className="absolute bottom-full left-1/2 z-[100] mb-2 w-64 -translate-x-1/2 rounded-lg border border-white/10 bg-[#16171a] p-2.5 text-xs leading-relaxed text-slate-200 shadow-2xl backdrop-blur-md"
           >
             {content}
             {/* Arrow */}
diff --git a/frontend/src/components/MaskedValue.tsx b/frontend/src/components/MaskedValue.tsx
@@ -94,7 +94,7 @@ export default function MaskedValue({
     <section className={`flex flex-col gap-3 ${className}`.trim()}>
       <div className="flex items-center justify-between">
         {label ? (
-          <h2 className="text-xs font-medium uppercase tracking-wider text-slate-400">
+          <h2 className="text-xs font-medium uppercase tracking-wider text-slate-300">
             {label}
           </h2>
         ) : (
@@ -104,7 +104,7 @@ export default function MaskedValue({
           type="button"
           onClick={toggle}
           aria-label={ariaLabel}
-          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-slate-400 transition-colors hover:bg-white/5 hover:text-white"
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-slate-300 transition-colors hover:bg-white/5 hover:text-white focus-visible:bg-white/10 focus-visible:text-white"
         >
           <EyeIcon open={isRevealed} />
           {isRevealed ? hideLabel : showLabel}
@@ -114,7 +114,7 @@ export default function MaskedValue({
       <div className="flex items-center gap-2 overflow-hidden rounded-xl border border-white/10 bg-black/40 p-1 pl-4">
         <code
           className={`flex-1 truncate font-mono text-sm transition-colors ${
-            isRevealed ? "text-mint" : "text-slate-500"
+            isRevealed ? "text-mint" : "text-slate-300"
           }`}
         >
           {displayValue}
@@ -123,7 +123,7 @@ export default function MaskedValue({
       </div>
 
       {helperText ? (
-        <p className="text-[11px] text-slate-600">{helperText}</p>
+        <p className="text-[11px] text-slate-400">{helperText}</p>
       ) : null}
     </section>
   );
diff --git a/frontend/src/components/MetricsSkeleton.tsx b/frontend/src/components/MetricsSkeleton.tsx
@@ -36,7 +36,7 @@ function SummaryGridSkeleton() {
 
           {/* Value + unit on the same baseline */}
           <div className="mt-2 flex items-baseline gap-2">
-            <Skeleton width={90} height={36} borderRadius={6} />
+            <Skeleton width={104} height={36} borderRadius={6} />
             <Skeleton width={36} height={18} borderRadius={4} />
           </div>
         </div>
@@ -83,7 +83,7 @@ function ChartPanelSkeleton() {
       </div>
 
       {/* ── Chart area ── */}
-      <div className="mt-2 h-[300px]">
+      <div className="h-[300px]">
         <Skeleton height="100%" borderRadius={8} />
       </div>
     </div>
diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
