status badge

.gitignore

@@ -1,20 +1,19 @@
-node_modules/
-dist/
-.DS_Store
-*.log
-.env
-.env.local
-coverage/
-frontend/.vite/
-contracts/target/
-contracts/.stellar/
-backend/data/
-.current_bench.tmp
-.bench_results.tmp
-
-# Generated Soroban contract bindings are committed to the repository
-# Regenerate with: CONTRACT_ID=$(cat contracts/contract_id.txt) npm run gen:bindings
-# See docs/CONTRACT_BINDINGS.md for the full workflow.
-
-# Deployed contract ID (changes per deployment, not committed)
-contracts/contract_id.txt
+node_modules/
+dist/
+.DS_Store
+*.log
+coverage/
+frontend/.vite/
+contracts/target/
+contracts/.stellar/
+backend/data/
+.current_bench.tmp
+.bench_results.tmp
+
+# Generated Soroban contract bindings are committed to the repository
+# Regenerate with: CONTRACT_ID=$(cat contracts/contract_id.txt) npm run gen:bindings
+# See docs/CONTRACT_BINDINGS.md for the full workflow.
+
+# Deployed contract ID (changes per deployment, not committed)
+contracts/contract_id.txt
+config.bat

frontend/src/components/StatusBadge.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "vitest";
+import { StatusBadge, STATUS_CONFIG } from "./StatusBadge";
+import { StreamStatus } from "../types/stream";
+
+describe("StatusBadge Component", () => {
+  const statuses: StreamStatus[] = [
+    "scheduled",
+    "active",
+    "completed",
+    "canceled",
+    "paused",
+  ];
+
+  it.each(statuses)("renders distinct badge, icon, and actionable tooltip for status '%s'", (status) => {
+    const { container } = render(<StatusBadge status={status} />);
+    const badge = screen.getByRole("status");
+    const config = STATUS_CONFIG[status];
+
+    // Label check
+    expect(badge).toHaveTextContent(status);
+
+    // Color-coded badge class check
+    expect(badge).toHaveClass(config.badgeClass);
+
+    // Actionable tooltip title & aria-label check
+    expect(badge).toHaveAttribute("title", config.description);
+    expect(badge).toHaveAttribute(
+      "aria-label",
+      `${config.label} status: ${config.description}`
+    );
+
+    // Icon presence check (accessible: not color-only)
+    const icon = screen.getByTestId(`icon-${status}`);
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("applies specific badge classes for all 5 statuses", () => {
+    expect(STATUS_CONFIG.scheduled.badgeClass).toBe("badge-scheduled");
+    expect(STATUS_CONFIG.active.badgeClass).toBe("badge-active");
+    expect(STATUS_CONFIG.completed.badgeClass).toBe("badge-completed");
+    expect(STATUS_CONFIG.canceled.badgeClass).toBe("badge-canceled");
+    expect(STATUS_CONFIG.paused.badgeClass).toBe("badge-paused");
+  });
+
+  it("provides actionable explanation in tooltips", () => {
+    expect(STATUS_CONFIG.scheduled.description).toContain("start");
+    expect(STATUS_CONFIG.active.description).toContain("pause or cancel");
+    expect(STATUS_CONFIG.paused.description).toContain("resume or cancel");
+    expect(STATUS_CONFIG.completed.description).toContain("finalized");
+    expect(STATUS_CONFIG.canceled.description).toContain("returned");
+  });
+});

frontend/src/components/StatusBadge.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import { StreamStatus } from "../types/stream";
+
+export interface StatusBadgeProps {
+  status: StreamStatus;
+  className?: string;
+}
+
+export const STATUS_CONFIG: Record<
+  StreamStatus,
+  {
+    label: string;
+    badgeClass: string;
+    description: string;
+    icon: React.ReactNode;
+  }
+> = {
+  scheduled: {
+    label: "scheduled",
+    badgeClass: "badge-scheduled",
+    description:
+      "Scheduled: Stream starts at a future date/time. You can edit start time or cancel before it starts.",
+    icon: (
+      <svg
+        className="status-badge-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        data-testid="icon-scheduled"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+    ),
+  },
+  active: {
+    label: "active",
+    badgeClass: "badge-active",
+    description:
+      "Active: Stream is streaming funds in real-time. You can pause or cancel the stream.",
+    icon: (
+      <svg
+        className="status-badge-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        data-testid="icon-active"
+      >
+        <polygon points="5 3 19 12 5 21 5 3" />
+      </svg>
+    ),
+  },
+  paused: {
+    label: "paused",
+    badgeClass: "badge-paused",
+    description:
+      "Paused: Stream is temporarily stopped. You can resume or cancel the stream.",
+    icon: (
+      <svg
+        className="status-badge-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        data-testid="icon-paused"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="10" y1="15" x2="10" y2="9" />
+        <line x1="14" y1="15" x2="14" y2="9" />
+      </svg>
+    ),
+  },
+  completed: {
+    label: "completed",
+    badgeClass: "badge-completed",
+    description:
+      "Completed: All funds have been successfully streamed and vested. Stream is finalized.",
+    icon: (
+      <svg
+        className="status-badge-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        data-testid="icon-completed"
+      >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <polyline points="22 4 12 14.01 9 11.01" />
+      </svg>
+    ),
+  },
+  canceled: {
+    label: "canceled",
+    badgeClass: "badge-canceled",
+    description:
+      "Canceled: Stream was stopped before completion and unvested funds were returned.",
+    icon: (
+      <svg
+        className="status-badge-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        data-testid="icon-canceled"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>
+    ),
+  },
+};
+
+export function StatusBadge({ status, className = "" }: StatusBadgeProps) {
+  const config = STATUS_CONFIG[status] ?? {
+    label: status,
+    badgeClass: "badge-unknown",
+    description: `Status: ${status}`,
+    icon: null,
+  };
+
+  return (
+    <span
+      role="status"
+      className={`badge status-badge ${config.badgeClass} ${className}`.trim()}
+      title={config.description}
+      aria-label={`${config.label} status: ${config.description}`}
+      tabIndex={0}
+    >
+      {config.icon}
+      <span className="status-badge-label">{config.label}</span>
+    </span>
+  );
+}