From 0ab158bed19cf154962a462224d58af41732e4f8 Mon Sep 17 00:00:00 2001
From: mitchellecm7 <obidikechukwuagozie1@gmail.com>
Date: Mon, 30 Mar 2026 15:06:14 -0700
Subject: [PATCH] feat(frontend): add Activity page and timeline component
 styles

---
 app/activity/page.tsx               | 188 ++++++++++++++++++++
 app/components/ActivityTimeline.tsx | 261 ++++++++++++++++++++++++++++
 app/page.tsx                        |  22 ---
 package-lock.json                   |  23 +--
 4 files changed, 458 insertions(+), 36 deletions(-)
 create mode 100644 app/activity/page.tsx
 create mode 100644 app/components/ActivityTimeline.tsx
 delete mode 100644 app/page.tsx

diff --git a/app/activity/page.tsx b/app/activity/page.tsx
new file mode 100644
index 0000000..3a75991
--- /dev/null
+++ b/app/activity/page.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import React, { useState } from "react";
+import { ActivityTimeline, StreamEvent } from "../components/ActivityTimeline";
+
+const MOCK_EVENTS: StreamEvent[] = [
+  {
+    id: "evt-001",
+    type: "created",
+    streamId: "0x3a4f...c82e",
+    streamName: "Payroll · Alice → Bob",
+    timestamp: "2025-03-28T09:15:00Z",
+    amount: "2,500.00",
+    token: "USDC",
+  },
+  {
+    id: "evt-002",
+    type: "started",
+    streamId: "0x3a4f...c82e",
+    streamName: "Payroll · Alice → Bob",
+    timestamp: "2025-03-28T09:16:42Z",
+    amount: "2,500.00",
+    token: "USDC",
+  },
+  {
+    id: "evt-003",
+    type: "created",
+    streamId: "0xf10b...77d1",
+    streamName: "Grant · DAO → Dev Fund",
+    timestamp: "2025-03-29T14:03:10Z",
+    amount: "10,000.00",
+    token: "STRM",
+  },
+  {
+    id: "evt-004",
+    type: "settled",
+    streamId: "0x3a4f...c82e",
+    streamName: "Payroll · Alice → Bob",
+    timestamp: "2025-03-30T00:00:00Z",
+    amount: "2,500.00",
+    token: "USDC",
+  },
+  {
+    id: "evt-005",
+    type: "stopped",
+    streamId: "0xf10b...77d1",
+    streamName: "Grant · DAO → Dev Fund",
+    timestamp: "2025-03-30T08:45:22Z",
+  },
+];
+
+type FilterType = "all" | "created" | "started" | "settled" | "stopped";
+
+const FILTER_OPTIONS: { value: FilterType; label: string }[] = [
+  { value: "all", label: "All" },
+  { value: "created", label: "Created" },
+  { value: "started", label: "Started" },
+  { value: "settled", label: "Settled" },
+  { value: "stopped", label: "Stopped" },
+];
+
+export default function ActivityPage() {
+  const [filter, setFilter] = useState<FilterType>("all");
+  const [useMock, setUseMock] = useState(true);
+
+  const source = useMock ? MOCK_EVENTS : [];
+  const filtered =
+    filter === "all" ? source : source.filter((e) => e.type === filter);
+
+  return (
+    <main
+      style={{
+        minHeight: "100vh",
+        background: "#0d1117",
+        color: "#f9fafb",
+        fontFamily:
+          "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif",
+        padding: "2rem 1rem",
+      }}
+    >
+      <div style={{ maxWidth: "640px", margin: "0 auto" }}>
+
+        {/* header */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "baseline",
+            justifyContent: "space-between",
+            marginBottom: "2rem",
+            flexWrap: "wrap",
+            gap: "0.5rem",
+          }}
+        >
+          <div>
+            <h1
+              style={{
+                margin: 0,
+                fontSize: "1.375rem",
+                fontWeight: 600,
+                letterSpacing: "-0.01em",
+                color: "#f9fafb",
+              }}
+            >
+              Activity
+            </h1>
+            <p style={{ margin: "0.25rem 0 0", fontSize: "0.8125rem", color: "#6b7280" }}>
+              Stream lifecycle events
+            </p>
+          </div>
+
+          {/* demo toggle */}
+          <button
+            onClick={() => setUseMock((v) => !v)}
+            style={{
+              fontSize: "0.75rem",
+              background: "rgba(255,255,255,0.05)",
+              border: "1px solid rgba(255,255,255,0.1)",
+              borderRadius: "0.375rem",
+              color: "#9ca3af",
+              padding: "0.375rem 0.75rem",
+              cursor: "pointer",
+            }}
+          >
+            {useMock ? "Show empty state" : "Show mock events"}
+          </button>
+        </div>
+
+        {/* filter tabs */}
+        <div
+          role="tablist"
+          aria-label="Filter events"
+          style={{
+            display: "flex",
+            gap: "0.25rem",
+            marginBottom: "1.5rem",
+            background: "rgba(255,255,255,0.04)",
+            border: "1px solid rgba(255,255,255,0.07)",
+            borderRadius: "0.5rem",
+            padding: "0.25rem",
+          }}
+        >
+          {FILTER_OPTIONS.map(({ value, label }) => {
+            const active = filter === value;
+            return (
+              <button
+                key={value}
+                role="tab"
+                aria-selected={active}
+                onClick={() => setFilter(value)}
+                style={{
+                  flex: 1,
+                  fontSize: "0.8125rem",
+                  fontWeight: active ? 500 : 400,
+                  padding: "0.375rem 0.5rem",
+                  borderRadius: "0.375rem",
+                  border: "none",
+                  background: active ? "rgba(255,255,255,0.1)" : "transparent",
+                  color: active ? "#f9fafb" : "#6b7280",
+                  cursor: "pointer",
+                  transition: "background 0.15s, color 0.15s",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* count badge */}
+        {filtered.length > 0 && (
+          <p
+            style={{
+              fontSize: "0.75rem",
+              color: "#6b7280",
+              margin: "0 0 1rem",
+            }}
+          >
+            {filtered.length} event{filtered.length !== 1 ? "s" : ""}
+          </p>
+        )}
+
+        {/* timeline */}
+        <ActivityTimeline events={filtered} />
+      </div>
+    </main>
+  );
+}
diff --git a/app/components/ActivityTimeline.tsx b/app/components/ActivityTimeline.tsx
new file mode 100644
index 0000000..569064c
--- /dev/null
+++ b/app/components/ActivityTimeline.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import React from "react";
+
+export type StreamEventType = "created" | "started" | "settled" | "stopped";
+
+export interface StreamEvent {
+  id: string;
+  type: StreamEventType;
+  streamId: string;
+  streamName?: string;
+  timestamp: string; // ISO string
+  amount?: string;
+  token?: string;
+}
+
+interface ActivityTimelineProps {
+  events: StreamEvent[];
+}
+
+const EVENT_META: Record<
+  StreamEventType,
+  { label: string; color: string; dot: string; bg: string }
+> = {
+  created: {
+    label: "Stream Created",
+    color: "#60a5fa",
+    dot: "#3b82f6",
+    bg: "rgba(59,130,246,0.08)",
+  },
+  started: {
+    label: "Stream Started",
+    color: "#34d399",
+    dot: "#10b981",
+    bg: "rgba(16,185,129,0.08)",
+  },
+  settled: {
+    label: "Stream Settled",
+    color: "#a78bfa",
+    dot: "#8b5cf6",
+    bg: "rgba(139,92,246,0.08)",
+  },
+  stopped: {
+    label: "Stream Stopped",
+    color: "#f87171",
+    dot: "#ef4444",
+    bg: "rgba(239,68,68,0.08)",
+  },
+};
+
+function formatTimestamp(iso: string): string {
+  const date = new Date(iso);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function EventIcon({ type }: { type: StreamEventType }) {
+  const icons: Record<StreamEventType, JSX.Element> = {
+    created: (
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.5" />
+        <path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    ),
+    started: (
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path d="M4 3l7 4-7 4V3z" fill="currentColor" />
+      </svg>
+    ),
+    settled: (
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path d="M3 7l3 3 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+    stopped: (
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <rect x="3" y="3" width="8" height="8" rx="1.5" fill="currentColor" />
+      </svg>
+    ),
+  };
+  return icons[type];
+}
+
+export function ActivityTimeline({ events }: ActivityTimelineProps) {
+  if (events.length === 0) {
+    return (
+      <div
+        data-testid="activity-empty"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "4rem 2rem",
+          gap: "0.75rem",
+          opacity: 0.45,
+        }}
+      >
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+          <rect x="1" y="1" width="38" height="38" rx="10" stroke="#6b7280" strokeWidth="1.5" strokeDasharray="4 3" />
+          <path d="M13 20h14M20 13v14" stroke="#6b7280" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+        <p style={{ margin: 0, fontSize: "0.875rem", color: "#9ca3af", letterSpacing: "0.02em" }}>
+          No activity yet
+        </p>
+        <p style={{ margin: 0, fontSize: "0.75rem", color: "#6b7280" }}>
+          Stream events will appear here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <ol
+      data-testid="activity-timeline"
+      style={{ listStyle: "none", margin: 0, padding: 0, position: "relative" }}
+    >
+      {/* vertical line */}
+      <li
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          left: "1.125rem",
+          top: "1.5rem",
+          bottom: "1.5rem",
+          width: "1px",
+          background: "linear-gradient(to bottom, transparent, #374151 10%, #374151 90%, transparent)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {events.map((event, i) => {
+        const meta = EVENT_META[event.type];
+        return (
+          <li
+            key={event.id}
+            data-testid={`event-item-${event.type}`}
+            style={{
+              display: "flex",
+              gap: "1rem",
+              padding: "0.25rem 0",
+              marginBottom: i < events.length - 1 ? "0.25rem" : 0,
+              position: "relative",
+            }}
+          >
+            {/* dot */}
+            <div
+              style={{
+                flexShrink: 0,
+                width: "2.25rem",
+                display: "flex",
+                alignItems: "flex-start",
+                paddingTop: "0.875rem",
+                justifyContent: "center",
+                zIndex: 1,
+              }}
+            >
+              <span
+                style={{
+                  width: "2rem",
+                  height: "2rem",
+                  borderRadius: "50%",
+                  background: meta.bg,
+                  border: `1.5px solid ${meta.dot}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: meta.color,
+                  flexShrink: 0,
+                }}
+              >
+                <EventIcon type={event.type} />
+              </span>
+            </div>
+
+            {/* card */}
+            <div
+              style={{
+                flex: 1,
+                background: "rgba(255,255,255,0.03)",
+                border: "1px solid rgba(255,255,255,0.07)",
+                borderRadius: "0.625rem",
+                padding: "0.75rem 1rem",
+                marginBottom: "0.5rem",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "baseline",
+                  justifyContent: "space-between",
+                  gap: "0.5rem",
+                  flexWrap: "wrap",
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: "0.8125rem",
+                    fontWeight: 600,
+                    color: meta.color,
+                    letterSpacing: "0.03em",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  {meta.label}
+                </span>
+                <time
+                  dateTime={event.timestamp}
+                  style={{ fontSize: "0.75rem", color: "#6b7280", flexShrink: 0 }}
+                >
+                  {formatTimestamp(event.timestamp)}
+                </time>
+              </div>
+
+              <p
+                style={{
+                  margin: "0.25rem 0 0",
+                  fontSize: "0.875rem",
+                  color: "#d1d5db",
+                  fontFamily: "monospace",
+                  wordBreak: "break-all",
+                }}
+              >
+                {event.streamName ?? event.streamId}
+              </p>
+
+              {(event.amount || event.token) && (
+                <p style={{ margin: "0.375rem 0 0", fontSize: "0.8125rem", color: "#9ca3af" }}>
+                  {event.amount && (
+                    <span style={{ color: "#e5e7eb", fontWeight: 500 }}>
+                      {event.amount}
+                    </span>
+                  )}
+                  {event.amount && event.token && " "}
+                  {event.token && (
+                    <span
+                      style={{
+                        background: "rgba(255,255,255,0.06)",
+                        border: "1px solid rgba(255,255,255,0.1)",
+                        borderRadius: "0.25rem",
+                        padding: "0.1rem 0.375rem",
+                        fontSize: "0.75rem",
+                        color: "#9ca3af",
+                      }}
+                    >
+                      {event.token}
+                    </span>
+                  )}
+                </p>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index df5e12e..0000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-export default function Home() {
-  return (
-    <main
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "2rem",
-      }}
-    >
-      <h1 style={{ fontSize: "2rem", marginBottom: "0.5rem" }}>StreamPay</h1>
-      <p style={{ color: "var(--muted)", marginBottom: "1.5rem" }}>
-        Payment streaming on Stellar
-      </p>
-      <p style={{ maxWidth: "32ch", textAlign: "center" }}>
-        Connect your wallet to create and manage payment streams.
-      </p>
-    </main>
-  );
-}
diff --git a/package-lock.json b/package-lock.json
index 517eb7d..e015dd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -2106,7 +2105,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2292,7 +2292,6 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -2304,7 +2303,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -2385,7 +2383,6 @@
       "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.0",
         "@typescript-eslint/types": "8.57.0",
@@ -2906,7 +2903,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3461,7 +3457,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4034,7 +4029,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/domexception": {
       "version": "4.0.0",
@@ -4344,7 +4340,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7285,6 +7280,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -8056,6 +8052,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -8071,6 +8068,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8184,7 +8182,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8197,7 +8194,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8211,7 +8207,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redent": {
       "version": "3.0.0",
@@ -9112,7 +9109,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9344,7 +9340,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"