feat: BetForm empty state

src/components/EmptyState.tsx

@@ -6,7 +6,7 @@ import { Sparkles } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 
-export * from "@/components/EmptyState"
+
 
 export interface StellarWaveEmptyStateProps {
   title?: string

src/pages/BetForm.test.tsx

@@ -49,4 +49,11 @@ describe("BetForm", () => {
       expect(screen.getByText(/Bet placed successfully!/i)).toBeInTheDocument();
     });
   });
+
+  it("renders the empty state when campaign is not active", () => {
+    render(<BetForm campaignActive={false} />);
+    expect(screen.getByText(/No Stellar Wave data yet/i)).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { name: /Place Your Bet/i })).not.toBeInTheDocument();
+  });
 });
+

src/pages/BetForm.tsx

@@ -3,10 +3,15 @@ import { LiveRegion } from "@/components/LiveRegion";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
+import { StellarWaveEmptyState } from "@/components/EmptyState";
 
 type FormState = "idle" | "submitting" | "success" | "error";
 
-export default function BetForm() {
+export interface BetFormProps {
+  campaignActive?: boolean;
+}
+
+export default function BetForm({ campaignActive = true }: BetFormProps = {}) {
   const [formState, setFormState] = useState<FormState>("idle");
   const [announcement, setAnnouncement] = useState("");
   const [amount, setAmount] = useState("");
@@ -33,9 +38,13 @@ export default function BetForm() {
 
   return (
     <div className="mx-auto max-w-md p-4 sm:p-6 lg:p-8">
-      <LiveRegion message={announcement} />
+      {!campaignActive ? (
+        <StellarWaveEmptyState />
+      ) : (
+        <>
+          <LiveRegion message={announcement} />
 
-      <Card className="overflow-hidden border-border/60 bg-card/80 shadow-sm">
+          <Card className="overflow-hidden border-border/60 bg-card/80 shadow-sm">
         <CardContent className="p-4 sm:p-6">
           <h2 className="mb-4 text-xl font-semibold text-foreground">Place Your Bet</h2>
 
@@ -86,6 +95,7 @@ export default function BetForm() {
           )}
         </CardContent>
       </Card>
+      )}
     </div>
   );
 }