Merge pull request #473 from Agencybuilds/feature/expiry-countdown

feat(frontend): add expiry countdown to delegations list

Author: ScriptedBro

apps/frontend/app/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import type { Metadata } from "next";
 import { HomeContent } from "../components/HomeContent";
 
@@ -37,6 +38,51 @@ import { WalletConnectButton } from "../components/wallet/WalletConnectButton";
 import { useDelegations } from "../hooks/useDelegations";
 import { useOrders } from "../hooks/useOrders";
 
+import { Button, Card } from "@delego/ui";
+import { useDelegations } from "../hooks/useDelegations";
+import { ExpiryCountdown } from "../components/delegations/ExpiryCountdown";
 export default function HomePage() {
+  const { delegations, loading } = useDelegations();
+  
+  return (
+    <main className="container">
+      <header className="header">
+        <h1>Delego</h1>
+        <p>AI commerce with approval and spending controls</p>
+      </header>
+
+      <section className="grid">
+        <Card title="Delegations">
+          <p>Grant AI agents scoped shopping authority.</p>
+          <div className="flex flex-col gap-2 mt-4 mb-4">
+            {loading ? (
+              <p>Loading delegations...</p>
+            ) : delegations.length === 0 ? (
+              <p>No active delegations.</p>
+            ) : (
+              delegations.map(d => (
+                <div key={d.id} className="flex justify-between items-center p-2 border rounded">
+                  <span>Agent: {d.agentId}</span>
+                  <ExpiryCountdown expiresAt={d.policy.expiresAt} />
+                </div>
+              ))
+            )}
+          </div>
+          <Button variant="primary">Create Delegation</Button>
+        </Card>
+
+        <Card title="Orders">
+          <p>Track purchases initiated by your agents.</p>
+          {/* TODO: List recent orders */}
+        </Card>
+
+        <Card title="Wallet">
+          <p>Connect your Stellar wallet.</p>
+          {/* TODO: Wallet connection via Soroban permissions */}
+          <Button variant="secondary">Connect Wallet</Button>
+        </Card>
+      </section>
+    </main>
+  );
   return <HomeContent />;
 }

apps/frontend/components/delegations/ExpiryCountdown.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ExpiryCountdown } from "./ExpiryCountdown";
+
+describe("ExpiryCountdown", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns null if no expiresAt is provided", () => {
+    const { container } = render(<ExpiryCountdown expiresAt={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("displays correct time remaining", () => {
+    const now = new Date("2026-07-25T10:00:00Z").getTime();
+    vi.setSystemTime(now);
+
+    // 1 hour, 30 minutes, 15 seconds from now
+    const expiresAt = new Date(now + 1000 * (15 + 60 * 30 + 60 * 60 * 1)).toISOString();
+
+    render(<ExpiryCountdown expiresAt={expiresAt} />);
+    
+    const countdown = screen.getByTestId("countdown-timer");
+    expect(countdown.textContent).toContain("1h 30m 15s remaining");
+  });
+
+  it("updates countdown over time", () => {
+    const now = new Date("2026-07-25T10:00:00Z").getTime();
+    vi.setSystemTime(now);
+
+    const expiresAt = new Date(now + 10000).toISOString(); // 10 seconds
+
+    render(<ExpiryCountdown expiresAt={expiresAt} />);
+    
+    expect(screen.getByTestId("countdown-timer").textContent).toContain("10s remaining");
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(screen.getByTestId("countdown-timer").textContent).toContain("8s remaining");
+  });
+
+  it("shows Expired badge when time is up", () => {
+    const now = new Date("2026-07-25T10:00:00Z").getTime();
+    vi.setSystemTime(now);
+
+    const expiresAt = new Date(now - 1000).toISOString(); // 1 second ago
+
+    render(<ExpiryCountdown expiresAt={expiresAt} />);
+    
+    const badge = screen.getByTestId("expired-badge");
+    expect(badge).toBeDefined();
+    expect(badge.textContent).toBe("Expired");
+  });
+
+  it("changes color based on time remaining", () => {
+    const now = new Date("2026-07-25T10:00:00Z").getTime();
+    vi.setSystemTime(now);
+
+    // Red: < 5 minutes
+    const expiresAtRed = new Date(now + 1000 * 60 * 4).toISOString();
+    const { rerender } = render(<ExpiryCountdown expiresAt={expiresAtRed} />);
+    expect(screen.getByTestId("countdown-timer").className).toContain("text-red-500");
+
+    // Orange: < 1 hour
+    const expiresAtOrange = new Date(now + 1000 * 60 * 30).toISOString();
+    rerender(<ExpiryCountdown expiresAt={expiresAtOrange} />);
+    expect(screen.getByTestId("countdown-timer").className).toContain("text-orange-500");
+
+    // Yellow: < 24 hours
+    const expiresAtYellow = new Date(now + 1000 * 60 * 60 * 12).toISOString();
+    rerender(<ExpiryCountdown expiresAt={expiresAtYellow} />);
+    expect(screen.getByTestId("countdown-timer").className).toContain("text-yellow-500");
+
+    // Green: >= 24 hours
+    const expiresAtGreen = new Date(now + 1000 * 60 * 60 * 48).toISOString();
+    rerender(<ExpiryCountdown expiresAt={expiresAtGreen} />);
+    expect(screen.getByTestId("countdown-timer").className).toContain("text-green-500");
+  });
+});

apps/frontend/components/delegations/ExpiryCountdown.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export interface ExpiryCountdownProps {
+  expiresAt: string | Date | number | null;
+}
+
+export function ExpiryCountdown({ expiresAt }: ExpiryCountdownProps) {
+  const [timeLeft, setTimeLeft] = useState<number>(0);
+  const [isExpired, setIsExpired] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!expiresAt) {
+      return;
+    }
+
+    const target = new Date(expiresAt).getTime();
+    
+    const updateCountdown = () => {
+      const now = Date.now();
+      const diff = target - now;
+      if (diff <= 0) {
+        setIsExpired(true);
+        setTimeLeft(0);
+      } else {
+        setIsExpired(false);
+        setTimeLeft(diff);
+      }
+    };
+
+    updateCountdown();
+    const interval = setInterval(updateCountdown, 1000);
+    return () => clearInterval(interval);
+  }, [expiresAt]);
+
+  if (!expiresAt) {
+    return null;
+  }
+
+  if (isExpired) {
+    return <span className="badge badge-expired text-red-500 font-bold" data-testid="expired-badge">Expired</span>;
+  }
+
+  const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
+  const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
+  const seconds = Math.floor((timeLeft / 1000) % 60);
+
+  let colorClass = "text-green-500";
+  // Warning colors
+  if (days === 0 && hours < 24) {
+    colorClass = "text-yellow-500";
+  }
+  if (days === 0 && hours === 0 && minutes < 60) {
+    colorClass = "text-orange-500";
+  }
+  if (days === 0 && hours === 0 && minutes < 5) {
+    colorClass = "text-red-500";
+  }
+
+  const parts: string[] = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0) parts.push(`${minutes}m`);
+  parts.push(`${seconds}s`);
+
+  return (
+    <span className={`countdown ${colorClass}`} data-testid="countdown-timer">
+      {parts.join(" ")} remaining
+    </span>
+  );
+}

packages/types/src/delegation.ts

@@ -23,6 +23,7 @@ export interface Delegation {
   userId: string;
   agentId: string;
   status: DelegationStatus;
+  expires_at_ledger?: number;
   policy: SpendingPolicy;
   createdAt: Date;
   updatedAt: Date;