From efce89c5ca335edf31af8187a889b63190d1eb92 Mon Sep 17 00:00:00 2001
From: misrasamuelisiguzor-oss <misrasamuelisiguzor@gmail.com>
Date: Wed, 27 May 2026 22:14:18 +0000
Subject: [PATCH] feat: transaction status component, claim winnings hook,
 error pages, dark mode toggle

---
 frontend/src/app/create/page.tsx              |  6 +-
 frontend/src/app/error.tsx                    | 29 ++++++
 frontend/src/app/governance/[id]/page.tsx     | 12 +--
 frontend/src/app/governance/new/page.tsx      |  6 +-
 frontend/src/app/layout.tsx                   | 10 +-
 frontend/src/app/not-found.tsx                | 17 ++++
 frontend/src/app/payer/page.tsx               |  8 +-
 frontend/src/components/layout/Header.tsx     |  4 +-
 .../src/components/layout/ThemeToggle.tsx     | 49 ++++++++++
 .../src/components/ui/TransactionStatus.tsx   | 96 +++++++++++++++++++
 frontend/src/components/ui/TxStatusToast.tsx  | 11 ++-
 frontend/src/hooks/useBet.ts                  |  2 +-
 frontend/src/hooks/useClaimWinnings.ts        | 63 ++++++++++++
 frontend/src/hooks/useMarket.ts               | 17 ++++
 frontend/src/hooks/usePortfolio.ts            |  9 +-
 frontend/src/services/wallet.ts               | 73 ++++++++++++++
 frontend/src/types/index.ts                   |  6 +-
 frontend/tailwind.config.ts                   |  1 +
 18 files changed, 396 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/app/error.tsx
 create mode 100644 frontend/src/app/not-found.tsx
 create mode 100644 frontend/src/components/layout/ThemeToggle.tsx
 create mode 100644 frontend/src/components/ui/TransactionStatus.tsx
 create mode 100644 frontend/src/hooks/useClaimWinnings.ts

diff --git a/frontend/src/app/create/page.tsx b/frontend/src/app/create/page.tsx
index 9c257022..ccad2277 100644
--- a/frontend/src/app/create/page.tsx
+++ b/frontend/src/app/create/page.tsx
@@ -69,7 +69,7 @@ export default function CreateMarketPage() {
       return;
     }
 
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
 
     try {
       const hash = await createMarket({
@@ -169,10 +169,10 @@ export default function CreateMarketPage() {
         </div>
         <button
           type="submit"
-          disabled={txStatus.status === 'pending'}
+          disabled={['signing','broadcasting','confirming'].includes(txStatus.status)}
           className="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 rounded font-semibold"
         >
-          {txStatus.status === 'pending' ? 'Creating...' : 'Create Market'}
+          {['signing','broadcasting','confirming'].includes(txStatus.status) ? 'Creating...' : 'Create Market'}
         </button>
       </form>
       <TxStatusToast txStatus={txStatus} onDismiss={() => setTxStatus({ hash: null, status: 'idle', error: null })} />
diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
new file mode 100644
index 00000000..af9d6ce9
--- /dev/null
+++ b/frontend/src/app/error.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function ErrorPage({ error, reset }: ErrorPageProps): JSX.Element {
+  useEffect(() => {
+    // Log to error reporting service in production
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className="min-h-[60vh] flex flex-col items-center justify-center px-4 text-center">
+      <p className="text-5xl mb-4">⚠️</p>
+      <h1 className="text-2xl font-bold text-white mb-2">Something went wrong</h1>
+      <p className="text-gray-400 mb-8">An unexpected error occurred. Please try again.</p>
+      <button
+        onClick={reset}
+        className="bg-amber-500 hover:bg-amber-400 text-black font-semibold px-6 py-2.5 rounded-xl transition-colors"
+      >
+        Try again
+      </button>
+    </main>
+  );
+}
diff --git a/frontend/src/app/governance/[id]/page.tsx b/frontend/src/app/governance/[id]/page.tsx
index ff6426a8..f56a6e33 100644
--- a/frontend/src/app/governance/[id]/page.tsx
+++ b/frontend/src/app/governance/[id]/page.tsx
@@ -53,7 +53,7 @@ export default function ProposalDetail({ params }: { params: { id: string } }) {
 
   const handleVote = async (vote: VoteType) => {
     if (!connectedAddress) return;
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
     try {
       const hash = await voteProposal(proposal.id, vote);
       setTxStatus({ hash, status: 'success', error: null });
@@ -75,7 +75,7 @@ export default function ProposalDetail({ params }: { params: { id: string } }) {
   };
 
   const handleExecute = async () => {
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
     try {
       const hash = await executeProposal(proposal.id);
       setTxStatus({ hash, status: 'success', error: null });
@@ -121,7 +121,7 @@ export default function ProposalDetail({ params }: { params: { id: string } }) {
             {proposal.status === 'Passed' && (
               <button 
                 onClick={handleExecute}
-                disabled={txStatus.status === 'pending'}
+                disabled={['signing','broadcasting','confirming'].includes(txStatus.status)}
                 className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 text-white rounded font-medium transition-colors"
               >
                 Execute Proposal
@@ -198,21 +198,21 @@ export default function ProposalDetail({ params }: { params: { id: string } }) {
                   <div className="flex flex-col gap-3">
                     <button
                       onClick={() => handleVote('for')}
-                      disabled={proposal.status !== 'Active' || hasVoted || txStatus.status === 'pending'}
+                      disabled={proposal.status !== 'Active' || hasVoted || ['signing','broadcasting','confirming'].includes(txStatus.status)}
                       className="w-full py-2.5 bg-green-500/10 text-green-400 border border-green-500/50 hover:bg-green-500/20 disabled:opacity-50 disabled:cursor-not-allowed rounded font-medium transition-colors"
                     >
                       Vote For
                     </button>
                     <button
                       onClick={() => handleVote('against')}
-                      disabled={proposal.status !== 'Active' || hasVoted || txStatus.status === 'pending'}
+                      disabled={proposal.status !== 'Active' || hasVoted || ['signing','broadcasting','confirming'].includes(txStatus.status)}
                       className="w-full py-2.5 bg-red-500/10 text-red-400 border border-red-500/50 hover:bg-red-500/20 disabled:opacity-50 disabled:cursor-not-allowed rounded font-medium transition-colors"
                     >
                       Vote Against
                     </button>
                     <button
                       onClick={() => handleVote('abstain')}
-                      disabled={proposal.status !== 'Active' || hasVoted || txStatus.status === 'pending'}
+                      disabled={proposal.status !== 'Active' || hasVoted || ['signing','broadcasting','confirming'].includes(txStatus.status)}
                       className="w-full py-2.5 bg-gray-500/10 text-gray-400 border border-gray-500/50 hover:bg-gray-500/20 disabled:opacity-50 disabled:cursor-not-allowed rounded font-medium transition-colors"
                     >
                       Abstain
diff --git a/frontend/src/app/governance/new/page.tsx b/frontend/src/app/governance/new/page.tsx
index 652e75e2..5ef83f56 100644
--- a/frontend/src/app/governance/new/page.tsx
+++ b/frontend/src/app/governance/new/page.tsx
@@ -106,7 +106,7 @@ export default function NewProposalPage() {
         return;
     }
 
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
 
     try {
       const hash = await createProposal({
@@ -245,10 +245,10 @@ export default function NewProposalPage() {
 
         <button
           type="submit"
-          disabled={txStatus.status === 'pending' || isLoadingBalance || balanceILN < MIN_ILN_REQUIRED}
+          disabled={['signing','broadcasting','confirming'].includes(txStatus.status) || isLoadingBalance || balanceILN < MIN_ILN_REQUIRED}
           className="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded font-semibold transition-colors"
         >
-          {txStatus.status === 'pending' ? 'Submitting...' : 'Submit Proposal'}
+          {['signing','broadcasting','confirming'].includes(txStatus.status) ? 'Submitting...' : 'Submit Proposal'}
         </button>
       </form>
 
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index ce982ace..0d2750f9 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -18,7 +18,15 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {
   return (
     <html lang="en" className={inter.className}>
-      <body className="bg-gray-950 text-white min-h-screen">
+      {/* Inline script runs before paint to set dark/light class — prevents flash */}
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){var t=localStorage.getItem('boxmeout_theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');})();`,
+          }}
+        />
+      </head>
+      <body className="bg-gray-950 dark:bg-gray-950 text-white dark:text-white min-h-screen">
         <Header />
         {children}
       </body>
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
new file mode 100644
index 00000000..ca66cbb2
--- /dev/null
+++ b/frontend/src/app/not-found.tsx
@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+export default function NotFound(): JSX.Element {
+  return (
+    <main className="min-h-[60vh] flex flex-col items-center justify-center px-4 text-center">
+      <p className="text-6xl font-black text-amber-500 mb-4">404</p>
+      <h1 className="text-2xl font-bold text-white mb-2">Page not found</h1>
+      <p className="text-gray-400 mb-8">The page you're looking for doesn't exist.</p>
+      <Link
+        href="/"
+        className="bg-amber-500 hover:bg-amber-400 text-black font-semibold px-6 py-2.5 rounded-xl transition-colors"
+      >
+        Back to Markets
+      </Link>
+    </main>
+  );
+}
diff --git a/frontend/src/app/payer/page.tsx b/frontend/src/app/payer/page.tsx
index 2c56cf8a..5fa17a04 100644
--- a/frontend/src/app/payer/page.tsx
+++ b/frontend/src/app/payer/page.tsx
@@ -74,7 +74,7 @@ export default function PayerDashboard() {
   const handleSettleConfirm = async () => {
     if (!selectedInvoice) return;
     
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
     
     try {
       const hash = await markPaid(selectedInvoice.id);
@@ -216,17 +216,17 @@ export default function PayerDashboard() {
               <div className="flex gap-3">
                 <button
                   onClick={() => setSelectedInvoice(null)}
-                  disabled={txStatus.status === 'pending'}
+                  disabled={['signing','broadcasting','confirming'].includes(txStatus.status)}
                   className="flex-1 py-2.5 bg-gray-800 hover:bg-gray-700 text-white rounded font-medium transition-colors"
                 >
                   Cancel
                 </button>
                 <button
                   onClick={handleSettleConfirm}
-                  disabled={txStatus.status === 'pending'}
+                  disabled={['signing','broadcasting','confirming'].includes(txStatus.status)}
                   className="flex-1 py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 text-white rounded font-medium transition-colors flex justify-center items-center gap-2"
                 >
-                  {txStatus.status === 'pending' ? (
+                  {['signing','broadcasting','confirming'].includes(txStatus.status) ? (
                     <>
                       <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                       Settling...
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index dfd3b227..8e1a6933 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState, useEffect } from 'react';
 import { WalletButton } from './WalletButton';
+import { ThemeToggle } from './ThemeToggle';
 
 const NETWORK = process.env.NEXT_PUBLIC_STELLAR_NETWORK ?? 'testnet';
 const IS_MAINNET = NETWORK === 'mainnet';
@@ -41,7 +42,7 @@ export function Header(): JSX.Element {
           <button onClick={dismissBanner} className="ml-auto text-white/80 hover:text-white font-bold">✕</button>
         </div>
       )}
-      <header className="sticky top-0 z-40 bg-gray-950 border-b border-gray-800">
+      <header className="sticky top-0 z-40 bg-gray-950 dark:bg-gray-950 border-b border-gray-800 dark:border-gray-800">
         <div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
           <Link href="/" className="font-black text-amber-500 text-xl tracking-tight">BOXMEOUT</Link>
 
@@ -58,6 +59,7 @@ export function Header(): JSX.Element {
               {IS_MAINNET ? 'MAINNET' : 'TESTNET'}
             </span>
 
+            <ThemeToggle />
             <WalletButton />
 
             {/* Mobile hamburger */}
diff --git a/frontend/src/components/layout/ThemeToggle.tsx b/frontend/src/components/layout/ThemeToggle.tsx
new file mode 100644
index 00000000..77fb009b
--- /dev/null
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+const LS_KEY = 'boxmeout_theme';
+
+function getInitialTheme(): 'dark' | 'light' {
+  if (typeof window === 'undefined') return 'dark';
+  const stored = localStorage.getItem(LS_KEY);
+  if (stored === 'dark' || stored === 'light') return stored;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function ThemeToggle(): JSX.Element {
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const initial = getInitialTheme();
+    setTheme(initial);
+    document.documentElement.classList.toggle('dark', initial === 'dark');
+  }, []);
+
+  const toggle = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+    localStorage.setItem(LS_KEY, next);
+    document.documentElement.classList.toggle('dark', next === 'dark');
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      className="flex items-center justify-center w-9 h-9 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
+    >
+      {theme === 'dark' ? (
+        // Sun icon
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4.22 1.78a1 1 0 011.42 1.42l-.71.7a1 1 0 11-1.42-1.41l.71-.71zM18 9a1 1 0 110 2h-1a1 1 0 110-2h1zM4.22 15.78a1 1 0 001.42-1.42l-.71-.7a1 1 0 00-1.42 1.41l.71.71zM3 10a1 1 0 100 2H2a1 1 0 100-2h1zm1.22-5.78a1 1 0 00-1.42 1.42l.71.7a1 1 0 001.42-1.41l-.71-.71zM10 15a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm5.78 1.78a1 1 0 001.42-1.42l-.71-.7a1 1 0 00-1.42 1.41l.71.71zM10 7a3 3 0 100 6 3 3 0 000-6z" clipRule="evenodd" />
+        </svg>
+      ) : (
+        // Moon icon
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/frontend/src/components/ui/TransactionStatus.tsx b/frontend/src/components/ui/TransactionStatus.tsx
new file mode 100644
index 00000000..e1a6aed7
--- /dev/null
+++ b/frontend/src/components/ui/TransactionStatus.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import type { TxStatus } from '../../types';
+import { TX_PENDING_STATES } from '../../types';
+import { stellarExplorerUrl } from '../../services/wallet';
+
+const PENDING_LABELS: Record<string, string> = {
+  signing: 'Waiting for signature…',
+  broadcasting: 'Broadcasting to network…',
+  confirming: 'Confirming on Stellar…',
+};
+
+interface TransactionStatusProps {
+  txStatus: TxStatus;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+}
+
+export function TransactionStatus({ txStatus, onRetry, onDismiss }: TransactionStatusProps): JSX.Element | null {
+  const { status, hash, error } = txStatus;
+
+  if (status === 'idle') return null;
+
+  const isPending = (TX_PENDING_STATES as readonly string[]).includes(status);
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="rounded-xl border p-4 flex items-start gap-3 text-sm
+        bg-gray-900 border-gray-700 dark:bg-gray-900 dark:border-gray-700"
+    >
+      {isPending && (
+        <>
+          <svg
+            className="animate-spin h-5 w-5 text-amber-400 shrink-0 mt-0.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+          </svg>
+          <p className="text-gray-200">{PENDING_LABELS[status]}</p>
+        </>
+      )}
+
+      {status === 'success' && (
+        <>
+          <svg className="h-5 w-5 text-green-400 shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+          </svg>
+          <div className="flex-1">
+            <p className="font-semibold text-green-400">Transaction confirmed!</p>
+            {hash && (
+              <a
+                href={stellarExplorerUrl('tx', hash)}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-amber-400 underline break-all text-xs mt-1 block"
+              >
+                View on Stellar Explorer ↗
+              </a>
+            )}
+          </div>
+          {onDismiss && (
+            <button onClick={onDismiss} aria-label="Dismiss" className="text-gray-400 hover:text-white">✕</button>
+          )}
+        </>
+      )}
+
+      {status === 'error' && (
+        <>
+          <svg className="h-5 w-5 text-red-400 shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+          </svg>
+          <div className="flex-1">
+            <p className="font-semibold text-red-400">Transaction failed</p>
+            {error && <p className="text-gray-300 mt-0.5">{error}</p>}
+            {onRetry && (
+              <button
+                onClick={onRetry}
+                className="mt-2 text-xs bg-red-600 hover:bg-red-500 text-white px-3 py-1 rounded-lg transition-colors"
+              >
+                Retry
+              </button>
+            )}
+          </div>
+          {onDismiss && (
+            <button onClick={onDismiss} aria-label="Dismiss" className="text-gray-400 hover:text-white">✕</button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/TxStatusToast.tsx b/frontend/src/components/ui/TxStatusToast.tsx
index 0b0dc071..e6b1017b 100644
--- a/frontend/src/components/ui/TxStatusToast.tsx
+++ b/frontend/src/components/ui/TxStatusToast.tsx
@@ -18,12 +18,19 @@ export function TxStatusToast({ txStatus, onDismiss }: TxStatusToastProps): JSX.
 
   if (txStatus.status === 'idle') return <></>;
 
+  const isPending = ['signing', 'broadcasting', 'confirming'].includes(txStatus.status);
+  const pendingLabel = txStatus.status === 'signing'
+    ? 'Waiting for signature…'
+    : txStatus.status === 'broadcasting'
+    ? 'Broadcasting…'
+    : 'Confirming on Stellar…';
+
   return (
     <div className="fixed bottom-4 right-4 z-50 max-w-sm w-full bg-gray-900 text-white rounded-xl shadow-xl p-4 flex items-start gap-3">
-      {txStatus.status === 'pending' && (
+      {isPending && (
         <>
           <span className="animate-spin text-xl">⏳</span>
-          <p className="text-sm">Transaction pending…</p>
+          <p className="text-sm">{pendingLabel}</p>
         </>
       )}
       {txStatus.status === 'success' && (
diff --git a/frontend/src/hooks/useBet.ts b/frontend/src/hooks/useBet.ts
index 8409d17b..05b16b4f 100644
--- a/frontend/src/hooks/useBet.ts
+++ b/frontend/src/hooks/useBet.ts
@@ -54,7 +54,7 @@ export function useBet(market: Market): UseBetResult {
     if (!xlm || xlm <= 0) return;
     setError(null);
     setIsSubmitting(true);
-    setTxStatus({ hash: null, status: 'pending', error: null });
+    setTxStatus({ hash: null, status: 'signing', error: null });
     try {
       const hash = await submitBet(market.market_id, side, xlm);
       setTxStatus({ hash, status: 'success', error: null });
diff --git a/frontend/src/hooks/useClaimWinnings.ts b/frontend/src/hooks/useClaimWinnings.ts
new file mode 100644
index 00000000..90d4a621
--- /dev/null
+++ b/frontend/src/hooks/useClaimWinnings.ts
@@ -0,0 +1,63 @@
+// ============================================================
+// BOXMEOUT — useClaimWinnings Hook
+// ============================================================
+
+import { useState, useCallback } from 'react';
+import type { TxStatus } from '../types';
+import { submitClaimWithStages } from '../services/wallet';
+import { useAppStore } from '../store';
+
+export interface UseClaimWinningsResult {
+  claimWinnings: (marketId: string) => Promise<void>;
+  txStatus: TxStatus;
+  txHash: string | null;
+  error: string | null;
+  reset: () => void;
+}
+
+const IDLE: TxStatus = { hash: null, status: 'idle', error: null };
+
+export function useClaimWinnings(): UseClaimWinningsResult {
+  const [txStatus, setTxStatus] = useState<TxStatus>(IDLE);
+  const [txHash, setTxHash] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { setTxStatus: setStoreTxStatus } = useAppStore();
+
+  const claimWinnings = useCallback(async (marketId: string) => {
+    setError(null);
+    setTxHash(null);
+
+    const update = (status: TxStatus) => {
+      setTxStatus(status);
+      setStoreTxStatus(status);
+    };
+
+    update({ hash: null, status: 'signing', error: null });
+
+    try {
+      const hash = await submitClaimWithStages(marketId, (stage) => {
+        update({ hash: null, status: stage, error: null });
+      });
+
+      setTxHash(hash);
+      update({ hash, status: 'success', error: null });
+
+      // Invalidate caches so useBets and useMarket refetch fresh data
+      // Both hooks use useEffect with no external cache — trigger by dispatching a custom event
+      window.dispatchEvent(new CustomEvent('boxmeout:claim_success', { detail: { marketId } }));
+    } catch (e: any) {
+      const msg = e?.message ?? 'Claim failed';
+      setError(msg);
+      update({ hash: null, status: 'error', error: msg });
+    }
+  }, [setStoreTxStatus]);
+
+  const reset = useCallback(() => {
+    setTxStatus(IDLE);
+    setStoreTxStatus(IDLE);
+    setTxHash(null);
+    setError(null);
+  }, [setStoreTxStatus]);
+
+  return { claimWinnings, txStatus, txHash, error, reset };
+}
diff --git a/frontend/src/hooks/useMarket.ts b/frontend/src/hooks/useMarket.ts
index 236057e4..27e84edc 100644
--- a/frontend/src/hooks/useMarket.ts
+++ b/frontend/src/hooks/useMarket.ts
@@ -63,5 +63,22 @@ export function useMarket(market_id: string): UseMarketResult {
     };
   }, [market_id]);
 
+  // Refresh when a claim succeeds for this market
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.marketId === market_id) {
+        setMarket(null);
+        setIsLoading(true);
+        fetchMarketById(market_id)
+          .then(setMarket)
+          .catch(setError)
+          .finally(() => setIsLoading(false));
+      }
+    };
+    window.addEventListener('boxmeout:claim_success', handler);
+    return () => window.removeEventListener('boxmeout:claim_success', handler);
+  }, [market_id]);
+
   return { market, isLoading, error };
 }
diff --git a/frontend/src/hooks/usePortfolio.ts b/frontend/src/hooks/usePortfolio.ts
index 3016bc44..79f78926 100644
--- a/frontend/src/hooks/usePortfolio.ts
+++ b/frontend/src/hooks/usePortfolio.ts
@@ -50,8 +50,15 @@ export function usePortfolio(): UsePortfolioResult {
 
   useEffect(() => { load(); }, [load]);
 
+  // Refresh when useClaimWinnings hook fires a successful claim
+  useEffect(() => {
+    const handler = () => { load(); };
+    window.addEventListener('boxmeout:claim_success', handler);
+    return () => window.removeEventListener('boxmeout:claim_success', handler);
+  }, [load]);
+
   const runClaim = useCallback(async (fn: () => Promise<string>) => {
-    setClaimTxStatus({ hash: null, status: 'pending', error: null });
+    setClaimTxStatus({ hash: null, status: 'signing', error: null });
     try {
       const hash = await fn();
       setClaimTxStatus({ hash, status: 'success', error: null });
diff --git a/frontend/src/services/wallet.ts b/frontend/src/services/wallet.ts
index 9f7aecca..c031e5c3 100644
--- a/frontend/src/services/wallet.ts
+++ b/frontend/src/services/wallet.ts
@@ -195,6 +195,79 @@ export async function submitClaim(market_contract_address: string): Promise<stri
   ]);
 }
 
+export type TxStageCallback = (stage: 'signing' | 'broadcasting' | 'confirming') => void;
+
+/**
+ * Like submitClaim but calls onStage at each phase so the UI can show granular status.
+ */
+export async function submitClaimWithStages(
+  market_contract_address: string,
+  onStage: TxStageCallback,
+): Promise<string> {
+  const address = getConnectedAddress();
+  if (!address) throw new Error('WalletNotConnected');
+  const token = process.env.NEXT_PUBLIC_XLM_TOKEN_ADDRESS;
+  if (!token) throw new Error('NEXT_PUBLIC_XLM_TOKEN_ADDRESS not set');
+
+  const server = new SorobanRpc.Server(SOROBAN_RPC_URL);
+  const account = await server.getAccount(address);
+  const contract = new Contract(market_contract_address);
+
+  const tx = new TransactionBuilder(account, {
+    fee: BASE_FEE,
+    networkPassphrase: NETWORK_PASSPHRASE,
+  })
+    .addOperation(
+      contract.call(
+        'claim_winnings',
+        new Address(address).toScVal(),
+        new Address(token).toScVal(),
+      ),
+    )
+    .setTimeout(30)
+    .build();
+
+  const preparedTx = await server.prepareTransaction(tx);
+  const txXdr = preparedTx.toXDR();
+
+  const freighter = (window as any).freighter;
+  if (!freighter) throw new WalletNotInstalledError();
+
+  onStage('signing');
+  let signedTxXdr: string;
+  try {
+    const result = await freighter.signTransaction(txXdr, { networkPassphrase: NETWORK_PASSPHRASE });
+    signedTxXdr = result.signedTxXdr;
+  } catch (error) {
+    throw new WalletSignError(error instanceof Error ? error.message : 'User rejected transaction signing');
+  }
+
+  onStage('broadcasting');
+  const submitRes = await server.sendTransaction(
+    TransactionBuilder.fromXDR(signedTxXdr, NETWORK_PASSPHRASE),
+  );
+
+  if (submitRes.status === 'ERROR') {
+    throw new TxSubmissionError(
+      `Network rejected transaction: ${submitRes.errorResult?.toString() || 'Unknown error'}`,
+      submitRes.errorResult,
+    );
+  }
+
+  onStage('confirming');
+  let getRes = await server.getTransaction(submitRes.hash);
+  for (let i = 0; i < 20 && getRes.status === 'NOT_FOUND'; i++) {
+    await new Promise((r) => setTimeout(r, 1500));
+    getRes = await server.getTransaction(submitRes.hash);
+  }
+
+  if (getRes.status !== 'SUCCESS') {
+    throw new TxSubmissionError(`Transaction failed with status: ${getRes.status}`, getRes);
+  }
+
+  return submitRes.hash;
+}
+
 export async function submitRefund(market_contract_address: string): Promise<string> {
   const bettor = getConnectedAddress();
   if (!bettor) throw new Error('WalletNotConnected');
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index cba88816..8197b6aa 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -78,10 +78,14 @@ export interface MarketStats {
 
 export interface TxStatus {
   hash: string | null;
-  status: 'idle' | 'pending' | 'success' | 'error';
+  status: 'idle' | 'signing' | 'broadcasting' | 'confirming' | 'success' | 'error';
   error: string | null;
 }
 
+/** Pending states that show a spinner */
+export const TX_PENDING_STATES = ['signing', 'broadcasting', 'confirming'] as const;
+export type TxPendingState = (typeof TX_PENDING_STATES)[number];
+
 // ─── Governance ──────────────────────────────────────────────────────────────
 
 export type ProposalType = 
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 22328f57..c964e8c7 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: ['./src/**/*.{ts,tsx}'],
+  darkMode: 'class',
   theme: { extend: {} },
   plugins: [],
 };