changes

frontend/src/components/VaultDashboard.emptystate.test.tsx

@@ -0,0 +1,188 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import VaultDashboard from "./VaultDashboard";
+import { VaultProvider } from "../context/VaultContext";
+import { ToastProvider } from "../context/ToastContext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "react-router-dom";
+import * as portfolioHooks from "../hooks/usePortfolioData";
+import * as vaultDataHooks from "../hooks/useVaultData";
+import * as tokenAllowanceHooks from "../hooks/useTokenAllowance";
+import type { UseQueryResult } from "@tanstack/react-query";
+import type { PortfolioHolding } from "../lib/portfolioApi";
+import type { VaultSummary } from "../lib/vaultApi";
+
+// ── Mocks ──────────────────────────────────────────────────────────────────
+
+vi.mock("../hooks/usePortfolioData", () => ({
+  usePortfolioHoldings: vi.fn(),
+}));
+
+vi.mock("../hooks/useVaultData", () => ({
+  useVaultSummary: vi.fn(),
+  useVaultHistory: vi.fn(),
+}));
+
+vi.mock("../hooks/useTokenAllowance", () => ({
+  useTokenAllowance: vi.fn(),
+}));
+
+// ── Shared mock data ───────────────────────────────────────────────────────
+
+const mockSummary: VaultSummary = {
+  tvl: 12450800,
+  depositCap: 15000000,
+  apy: 8.45,
+  participantCount: 1248,
+  monthlyGrowthPct: 12.5,
+  strategyStabilityPct: 99.9,
+  assetLabel: "Sovereign Debt",
+  exchangeRate: 1.084,
+  networkFeeEstimate: "~0.00001 XLM",
+  updatedAt: "2026-03-25T10:00:00.000Z",
+  contractPaused: false,
+  strategy: {
+    id: "stellar-benji",
+    name: "Franklin BENJI Connector",
+    issuer: "Franklin Templeton",
+    network: "Stellar",
+    rpcUrl: "https://soroban-testnet.stellar.org",
+    status: "active",
+    description: "Connector strategy.",
+  },
+};
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function renderDashboard(
+  walletAddress: string | null,
+  usdcBalance = 0,
+) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <ToastProvider>
+          <VaultProvider>
+            <VaultDashboard
+              walletAddress={walletAddress}
+              usdcBalance={usdcBalance}
+            />
+          </VaultProvider>
+        </ToastProvider>
+      </QueryClientProvider>
+    </MemoryRouter>,
+  );
+}
+
+// ── Tests ──────────────────────────────────────────────────────────────────
+
+describe("VaultDashboard — empty state", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    vi.mocked(portfolioHooks.usePortfolioHoldings).mockReturnValue({
+      data: [],
+      isLoading: false,
+    } as unknown as UseQueryResult<PortfolioHolding[], Error>);
+
+    vi.mocked(vaultDataHooks.useVaultSummary).mockReturnValue({
+      data: mockSummary,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as unknown as UseQueryResult<VaultSummary, Error>);
+
+    vi.mocked(vaultDataHooks.useVaultHistory).mockReturnValue({
+      data: [
+        { date: "2026-03-20", value: 1.0 },
+        { date: "2026-03-25", value: 1.084 },
+      ],
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as unknown as UseQueryResult<{ date: string; value: number }[], Error>);
+
+    vi.mocked(tokenAllowanceHooks.useTokenAllowance).mockReturnValue({
+      allowance: 0,
+      approvalStatus: "idle",
+      needsApproval: vi.fn().mockReturnValue(false),
+      approve: vi.fn().mockResolvedValue(undefined),
+      resetApproval: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("shows the empty state when wallet is connected and balance is zero", async () => {
+    renderDashboard("GABC123", 0);
+
+    await waitFor(() => {
+      expect(screen.getByText("No deposits yet.")).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText(
+        /Start earning yield by depositing USDC into our high-efficiency vaults\./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("renders the Deposit Now CTA in the empty state", async () => {
+    renderDashboard("GABC123", 0);
+
+    await waitFor(
+      () => {
+        expect(screen.getByRole("button", { name: "Deposit Now" })).toBeInTheDocument();
+      },
+      { timeout: 8000 },
+    );
+  });
+
+  it("Deposit Now CTA dispatches TRIGGER_DEPOSIT event", async () => {
+    const dispatchSpy = vi.spyOn(window, "dispatchEvent");
+    renderDashboard("GABC123", 0);
+
+    const cta = await screen.findByRole("button", { name: "Deposit Now" });
+    fireEvent.click(cta);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "TRIGGER_DEPOSIT" }),
+    );
+  });
+
+  it("does NOT show the empty state when balance is non-zero", async () => {
+    renderDashboard("GABC123", 1250.5);
+
+    // Give async effects time to settle
+    await waitFor(() => {
+      expect(screen.queryByText("No deposits yet.")).not.toBeInTheDocument();
+    });
+  });
+
+  it("does NOT show the empty state while loading is in progress", () => {
+    vi.mocked(vaultDataHooks.useVaultSummary).mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+      refetch: vi.fn(),
+    } as unknown as UseQueryResult<VaultSummary, Error>);
+
+    renderDashboard("GABC123", 0);
+
+    expect(screen.queryByText("No deposits yet.")).not.toBeInTheDocument();
+  });
+
+  it("does NOT show the empty state when wallet is not connected", () => {
+    renderDashboard(null, 0);
+
+    expect(screen.queryByText("No deposits yet.")).not.toBeInTheDocument();
+    // Wallet overlay should be shown instead
+    expect(screen.getByText(/Wallet Not Connected/i)).toBeInTheDocument();
+  });
+});

frontend/src/components/VaultDashboard.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { 
-  Activity, 
-  AlertCircle, 
+import {
+  Activity,
+  AlertCircle,
+  AlertTriangle,
   Check,
-  ShieldCheck, 
-  TrendingUp, 
-  Wallet as WalletIcon, 
   Loader2,
-  Share2
+  Share2,
+  ShieldCheck,
+  TrendingUp,
+  Wallet as WalletIcon,
 } from "./icons";
 import Skeleton from "./Skeleton";
 import { useVault } from "../context/VaultContext";
@@ -23,8 +24,8 @@ import { useTokenAllowance } from "../hooks/useTokenAllowance";
 import CopyButton from "./CopyButton";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { useFeeEstimate } from "../hooks/useFeeEstimate";
-import { AlertTriangle } from "./icons";
 import HelpIcon from "./ui/HelpIcon";
+import EmptyState from "./ui/EmptyState";
 
 /**
  * Valid transaction tabs in the vault dashboard.
@@ -548,6 +549,19 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
               <CopyButton value={strategy.id} label="strategy ID" />
             </div>
           </div>
+
+          {/* Empty state: wallet connected, loading done, no USDC balance */}
+          {!isLoading && walletAddress && usdcBalance === 0 && (
+            <EmptyState
+              title="No deposits yet."
+              description="Start earning yield by depositing USDC into our high-efficiency vaults."
+              icon={<TrendingUp />}
+              actionLabel="Deposit Now"
+              onAction={() => {
+                window.dispatchEvent(new Event("TRIGGER_DEPOSIT"));
+              }}
+            />
+          )}
         </div>
       </div>
 

frontend/src/components/icons.ts

@@ -5,26 +5,27 @@ export {
   AlertCircle,
   Check,
   Copy,
+  Facebook,
   Info,
   Layers,
+  LineChart,
+  Link,
   Loader2,
   LogOut,
   Menu,
+  MessageCircle,
   Moon,
   Printer,
   ShieldCheck,
   Sun,
   TrendingUp,
+  Twitter,
   Wallet,
   X,
   DollarSign,
   Percent,
   Briefcase,
   Share2,
-  Link,
-  MessageCircle,
-  Twitter,
-  Facebook,
   PackageOpen,
   Inbox,
   PackageSearch,