fix: claim page - single button flow (auth+claim in one tap)

No auto-sign, no two-step. User sees one green button:
'Claim $0.10 USDC' → taps → sign popup → auth → claim → done.
All from a user-initiated click event.

Author: CloudLobster

web/src/pages/Claim.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAccount, useConnect, useSignMessage } from 'wagmi';
 
@@ -27,129 +27,74 @@ export default function Claim() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
-  // Auth + claim state
-  const [token, setToken] = useState('');
-  const [handle, setHandle] = useState('');
-  const [step, setStep] = useState<'idle' | 'checking' | 'need-register' | 'ready' | 'claiming' | 'success'>('idle');
-  const [regHandle, setRegHandle] = useState('');
-  const [regError, setRegError] = useState('');
+  const [status, setStatus] = useState('');
+  const [statusError, setStatusError] = useState('');
   const [claimResult, setClaimResult] = useState<any>(null);
-  const [claimError, setClaimError] = useState('');
 
   // Fetch claim info
   useEffect(() => {
     if (!id) return;
     fetch(`${API_BASE}/api/claim/${id}`)
       .then(r => r.json())
-      .then(data => {
-        if (data.error) setError(data.error);
-        else setClaim(data);
-      })
+      .then(data => { if (data.error) setError(data.error); else setClaim(data); })
       .catch(() => setError('Failed to load claim'))
       .finally(() => setLoading(false));
   }, [id]);
 
-  // When wallet connects → auto authenticate
-  useEffect(() => {
-    if (!address || token) return;
-    autoAuth(address);
-  }, [address]);
+  // One-click: auth + claim in a single user-initiated action
+  const handleAuthAndClaim = useCallback(async () => {
+    if (!address || !id) return;
+    setStatusError('');
 
-  async function autoAuth(wallet: string) {
-    setStep('checking');
-    setClaimError('');
     try {
-      // 1. Check if registered
-      const checkRes = await fetch(`${API_BASE}/api/register/check/${wallet}`);
+      // 1. Check registration
+      setStatus('Checking account...');
+      const checkRes = await fetch(`${API_BASE}/api/register/check/${address}`);
       const checkData = await checkRes.json();
 
-      if (!checkData.registered || !checkData.handle) {
-        setStep('need-register');
+      if (!checkData.registered) {
+        setStatus('');
+        setStatusError('No BaseMail account found. Please register at basemail.ai first, then come back to claim.');
         return;
       }
 
       // 2. SIWE auth
-      setHandle(checkData.handle);
+      setStatus('Preparing sign-in...');
       const startRes = await fetch(`${API_BASE}/api/auth/start`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ address: wallet }),
+        body: JSON.stringify({ address }),
       });
       const { nonce, message } = await startRes.json();
-      let signature: string;
-      try {
-        signature = await signMessageAsync({ message });
-      } catch {
-        throw new Error('Wallet signature failed — tap the button below to retry');
-      }
 
+      setStatus('Please sign in your wallet...');
+      const signature = await signMessageAsync({ message });
+
+      setStatus('Verifying...');
       const verifyRes = await fetch(`${API_BASE}/api/auth/verify`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ address: wallet, signature, nonce, message }),
+        body: JSON.stringify({ address, signature, nonce, message }),
       });
       const verifyData = await verifyRes.json();
+      if (!verifyData.token) throw new Error(verifyData.error || 'Authentication failed');
 
-      if (verifyData.token) {
-        setToken(verifyData.token);
-        if (verifyData.handle) setHandle(verifyData.handle);
-        setStep('ready');
-      } else {
-        throw new Error(verifyData.error || 'Auth failed');
-      }
-    } catch (e: any) {
-      setClaimError(e.message || 'Authentication failed');
-      setStep('idle');
-    }
-  }
-
-  async function handleRegister() {
-    if (!address || !regHandle) return;
-    setRegError('');
-    try {
-      // SIWE + register in one flow
-      const startRes = await fetch(`${API_BASE}/api/auth/start`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ address }),
-      });
-      const { nonce, message } = await startRes.json();
-      const signature = await signMessageAsync({ message });
-
-      const regRes = await fetch(`${API_BASE}/api/register`, {
+      // 3. Claim
+      setStatus('Claiming USDC...');
+      const claimRes = await fetch(`${API_BASE}/api/claim/${id}`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ wallet: address, handle: regHandle, signature, nonce }),
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${verifyData.token}` },
       });
-      const regData = await regRes.json();
-      if (!regRes.ok) throw new Error(regData.error || 'Registration failed');
+      const claimData = await claimRes.json();
+      if (!claimRes.ok) throw new Error(claimData.error || 'Claim failed');
 
-      setToken(regData.token);
-      setHandle(regData.handle || regHandle);
-      setStep('ready');
+      setClaimResult({ ...claimData, handle: verifyData.handle || checkData.handle });
+      setStatus('');
     } catch (e: any) {
-      setRegError(e.message);
+      setStatusError(e.message || 'Failed');
+      setStatus('');
     }
-  }
-
-  async function handleClaim() {
-    if (!token || !id) return;
-    setStep('claiming');
-    setClaimError('');
-    try {
-      const res = await fetch(`${API_BASE}/api/claim/${id}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-      });
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || 'Claim failed');
-      setClaimResult(data);
-      setStep('success');
-    } catch (e: any) {
-      setClaimError(e.message);
-      setStep('ready');
-    }
-  }
+  }, [address, id, signMessageAsync]);
 
   const networkLabel = claim?.network === 'base-mainnet' ? 'Base' : 'Base Sepolia (Testnet)';
   const explorerBase = claim?.network === 'base-mainnet' ? 'https://basescan.org' : 'https://sepolia.basescan.org';
@@ -164,7 +109,6 @@ export default function Claim() {
   return (
     <div className="min-h-screen bg-[#0a0a0f] flex items-center justify-center p-4">
       <div className="max-w-md w-full">
-        {/* Logo */}
         <div className="text-center mb-6">
           <a href="/" className="text-2xl font-bold text-white">
             <span className="text-purple-400">Base</span>Mail
@@ -179,7 +123,7 @@ export default function Claim() {
               <div className="text-4xl mb-3">❌</div>
               <p className="text-red-400">{error}</p>
             </div>
-          ) : claim && step === 'success' && claimResult ? (
+          ) : claim && claimResult ? (
             /* ── Success ── */
             <div className="text-center py-6">
               <div className="text-5xl mb-4">✅</div>
@@ -188,24 +132,20 @@ export default function Claim() {
                 <span className="text-white font-bold text-2xl">${claim.amount_usdc.toFixed(2)}</span> USDC
               </p>
               <p className="text-gray-500 text-sm mb-4">
-                From {claim.sender} → {claimResult.claimer}
+                From {claim.sender} → {claimResult.handle || claimResult.claimer}
               </p>
               {claimResult.release_tx && (
-                <a
-                  href={`${explorerBase}/tx/${claimResult.release_tx}`}
+                <a href={`${explorerBase}/tx/${claimResult.release_tx}`}
                   target="_blank" rel="noopener noreferrer"
-                  className="text-purple-400 hover:text-purple-300 text-xs underline block mb-4"
-                >
+                  className="text-purple-400 hover:text-purple-300 text-xs underline block mb-4">
                   View transaction on BaseScan ↗
                 </a>
               )}
               <p className="text-gray-500 text-xs mb-4">
                 A receipt email has been delivered to your BaseMail inbox.
               </p>
-              <button
-                onClick={() => navigate('/dashboard')}
-                className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition"
-              >
+              <button onClick={() => navigate('/dashboard')}
+                className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition">
                 Open Dashboard
               </button>
             </div>
@@ -243,78 +183,29 @@ export default function Claim() {
                     <p>Claimed USDC will appear as a receipt email in your BaseMail inbox.</p>
                   </div>
 
-                  {/* Step 1: Connect wallet */}
                   {!isConnected ? (
+                    /* Connect wallet */
                     <div className="space-y-2">
                       {connectors.map((connector) => (
-                        <button
-                          key={connector.id}
+                        <button key={connector.id}
                           onClick={() => connect({ connector })}
-                          className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition"
-                        >
+                          className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition">
                           🔗 Connect {connector.name}
                         </button>
                       ))}
                     </div>
-                  ) : step === 'checking' ? (
-                    <div className="text-center text-gray-400 py-4 animate-pulse">
-                      Checking account...
-                    </div>
-                  ) : step === 'need-register' ? (
-                    /* Register new account */
-                    <div>
-                      <p className="text-gray-400 text-sm mb-3">
-                        Create a free BaseMail account to claim your USDC:
-                      </p>
-                      <div className="flex gap-2 mb-2">
-                        <input
-                          type="text"
-                          value={regHandle}
-                          onChange={(e) => setRegHandle(e.target.value.toLowerCase().replace(/[^a-z0-9]/g, ''))}
-                          placeholder="choose a handle"
-                          className="flex-1 bg-[#0a0a0f] border border-gray-700 rounded-lg px-3 py-2.5 text-white font-mono text-sm focus:outline-none focus:border-purple-500"
-                        />
-                        <span className="text-gray-500 text-sm self-center">@basemail.ai</span>
-                      </div>
-                      {regError && <p className="text-red-400 text-xs mb-2">{regError}</p>}
-                      <button
-                        onClick={handleRegister}
-                        disabled={!regHandle || regHandle.length < 3}
-                        className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition disabled:opacity-50"
-                      >
-                        Create Account & Claim
-                      </button>
-                    </div>
-                  ) : step === 'ready' ? (
-                    /* Authenticated — claim button */
-                    <div>
-                      <p className="text-gray-400 text-sm mb-3">
-                        Claiming as <span className="text-white font-mono">{handle}@basemail.ai</span>
-                      </p>
-                      <button
-                        onClick={handleClaim}
-                        className="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-500 transition"
-                      >
-                        ✅ Claim ${claim.amount_usdc.toFixed(2)} USDC
-                      </button>
-                    </div>
-                  ) : step === 'claiming' ? (
-                    <div className="text-center text-gray-400 py-4 animate-pulse">
-                      Claiming USDC...
-                    </div>
+                  ) : status ? (
+                    /* Processing */
+                    <div className="text-center text-gray-400 py-4 animate-pulse">{status}</div>
                   ) : (
-                    /* idle — retry auth */
-                    <div>
-                      <button
-                        onClick={() => address && autoAuth(address)}
-                        className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium hover:bg-purple-500 transition"
-                      >
-                        ✍️ Authenticate & Claim
-                      </button>
-                    </div>
+                    /* One button does everything: auth + claim */
+                    <button onClick={handleAuthAndClaim}
+                      className="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-500 transition">
+                      ✅ Claim ${claim.amount_usdc.toFixed(2)} USDC
+                    </button>
                   )}
 
-                  {claimError && <p className="text-red-400 text-sm mt-3">{claimError}</p>}
+                  {statusError && <p className="text-red-400 text-sm mt-3">{statusError}</p>}
                 </>
               )}
             </>