Merge pull request #377 from viccoder-oops/feat/portfolio-watchlist-delegation-topup-354-355-356-357

feat: portfolio summary card, stream watchlist, delegation UI, and balance top-up prompt

Author: Chuks-coderr

components/DelegatesSection.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const STORAGE_KEY = "sorostream-delegates";
+
+interface Delegate {
+  address: string;
+  addedAt: string;
+  /** Stream IDs this delegate can manage (empty = all streams) */
+  streamIds: string[];
+}
+
+function loadDelegates(): Delegate[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as Delegate[]) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveDelegates(list: Delegate[]): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+}
+
+function truncateAddr(addr: string): string {
+  if (addr.length <= 12) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+
+export default function DelegatesSection() {
+  const [delegates, setDelegates] = useState<Delegate[]>([]);
+  const [input, setInput] = useState("");
+  const [inputError, setInputError] = useState("");
+  const [adding, setAdding] = useState(false);
+
+  useEffect(() => {
+    setDelegates(loadDelegates());
+  }, []);
+
+  function validate(addr: string): string {
+    if (!addr.trim()) return "Address is required.";
+    if (!/^G[A-Z2-7]{55}$/.test(addr.trim()))
+      return "Must be a valid Stellar public key (starts with G, 56 chars).";
+    if (delegates.some((d) => d.address === addr.trim()))
+      return "This address is already a delegate.";
+    return "";
+  }
+
+  async function handleAdd() {
+    const err = validate(input);
+    if (err) { setInputError(err); return; }
+    setAdding(true);
+    // Simulate SDK call
+    await new Promise((r) => setTimeout(r, 500));
+    const next: Delegate[] = [
+      ...delegates,
+      { address: input.trim(), addedAt: new Date().toISOString(), streamIds: [] },
+    ];
+    saveDelegates(next);
+    setDelegates(next);
+    setInput("");
+    setInputError("");
+    setAdding(false);
+  }
+
+  function handleRevoke(address: string) {
+    const next = delegates.filter((d) => d.address !== address);
+    saveDelegates(next);
+    setDelegates(next);
+  }
+
+  return (
+    <div className="bg-gray-800 rounded-xl p-6 space-y-4 mb-8">
+      <div>
+        <h2 className="text-lg font-semibold">Delegation Management</h2>
+        <p className="text-gray-400 text-sm mt-1">
+          Grant other addresses the ability to manage your streams on your behalf.
+        </p>
+      </div>
+
+      {/* Add delegate */}
+      <div className="space-y-2">
+        <label htmlFor="delegate-address" className="text-gray-200 text-sm font-medium block">
+          Delegate Address
+        </label>
+        <div className="flex gap-2">
+          <input
+            id="delegate-address"
+            type="text"
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setInputError(""); }}
+            onKeyDown={(e) => { if (e.key === "Enter") void handleAdd(); }}
+            placeholder="G… (Stellar public key)"
+            className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+            aria-invalid={!!inputError}
+            aria-describedby={inputError ? "delegate-input-error" : undefined}
+          />
+          <button
+            onClick={() => void handleAdd()}
+            disabled={adding}
+            className="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 disabled:opacity-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+          >
+            {adding ? "Adding…" : "Add Delegate"}
+          </button>
+        </div>
+        {inputError && (
+          <p id="delegate-input-error" className="text-red-400 text-xs">{inputError}</p>
+        )}
+      </div>
+
+      {/* Current delegates */}
+      {delegates.length === 0 ? (
+        <p className="text-gray-500 text-sm text-center py-4">No delegates added yet.</p>
+      ) : (
+        <ul className="space-y-2">
+          {delegates.map((d) => (
+            <li
+              key={d.address}
+              className="flex items-center gap-3 bg-gray-700/50 rounded-lg px-4 py-3"
+            >
+              <div className="flex-1 min-w-0">
+                <p className="text-white text-sm font-mono truncate" title={d.address}>
+                  {truncateAddr(d.address)}
+                </p>
+                <p className="text-gray-500 text-xs mt-0.5">
+                  {d.streamIds.length > 0
+                    ? `Can manage streams: ${d.streamIds.join(", ")}`
+                    : "Can manage all streams"}
+                </p>
+              </div>
+              <button
+                onClick={() => handleRevoke(d.address)}
+                className="text-red-400 hover:text-red-300 text-sm px-2 py-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 rounded"
+                aria-label={`Revoke delegate ${d.address}`}
+              >
+                Revoke
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

components/PortfolioSummaryCard.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useMemo } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import type { StreamData } from "@/src/lib/sorostream";
+
+interface PortfolioSummaryCardProps {
+  streams: StreamData[];
+  walletAddress: string | null;
+}
+
+const SECONDS_PER_MONTH = 2592000;
+
+function formatMonthly(stroopsPerSecond: number): string {
+  const monthly = (stroopsPerSecond * SECONDS_PER_MONTH) / 10_000_000;
+  return monthly.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+export default function PortfolioSummaryCard({ streams, walletAddress }: PortfolioSummaryCardProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const { outflow, inflow } = useMemo(() => {
+    const active = streams.filter((s) => s.status === "Active");
+    let out = 0;
+    let inn = 0;
+    for (const s of active) {
+      if (walletAddress && s.sender.includes(walletAddress.slice(0, 5))) {
+        out += s.flowRate;
+      } else if (walletAddress && s.recipient.includes(walletAddress.slice(0, 5))) {
+        inn += s.flowRate;
+      } else {
+        // fallback when no wallet — don't count
+      }
+    }
+    return { outflow: out, inflow: inn };
+  }, [streams, walletAddress]);
+
+  const net = inflow - outflow;
+
+  function applyFilter(type: "outflow" | "inflow" | "net") {
+    const params = new URLSearchParams(searchParams.toString());
+    // Toggle: if already set to this filter clear it
+    if (params.get("flowFilter") === type) {
+      params.delete("flowFilter");
+    } else {
+      params.set("flowFilter", type);
+    }
+    router.replace(`/dashboard?${params.toString()}`);
+  }
+
+  return (
+    <div className="bg-gray-800 rounded-xl p-5 mb-6 border border-gray-700">
+      <h2 className="text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wide">
+        Monthly Portfolio Summary
+      </h2>
+      <div className="grid grid-cols-3 gap-3">
+        {/* Outflow */}
+        <button
+          onClick={() => applyFilter("outflow")}
+          className="flex flex-col items-start p-3 rounded-lg bg-gray-700/50 hover:bg-red-900/20 border border-transparent hover:border-red-700/40 transition-colors text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500"
+          title="Click to filter outgoing streams"
+        >
+          <span className="text-xs text-gray-400 mb-1">Monthly Outflow</span>
+          <span className="text-lg font-bold text-red-400 font-mono">
+            {outflow > 0 ? `-${formatMonthly(outflow)}` : "0.00"}
+          </span>
+        </button>
+
+        {/* Inflow */}
+        <button
+          onClick={() => applyFilter("inflow")}
+          className="flex flex-col items-start p-3 rounded-lg bg-gray-700/50 hover:bg-green-900/20 border border-transparent hover:border-green-700/40 transition-colors text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+          title="Click to filter incoming streams"
+        >
+          <span className="text-xs text-gray-400 mb-1">Monthly Inflow</span>
+          <span className="text-lg font-bold text-green-400 font-mono">
+            {inflow > 0 ? `+${formatMonthly(inflow)}` : "0.00"}
+          </span>
+        </button>
+
+        {/* Net */}
+        <button
+          onClick={() => applyFilter("net")}
+          className="flex flex-col items-start p-3 rounded-lg bg-gray-700/50 hover:bg-blue-900/20 border border-transparent hover:border-blue-700/40 transition-colors text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          title="Click to see net flow"
+        >
+          <span className="text-xs text-gray-400 mb-1">Net Monthly</span>
+          <span
+            className={`text-lg font-bold font-mono ${
+              net > 0 ? "text-green-400" : net < 0 ? "text-red-400" : "text-gray-300"
+            }`}
+          >
+            {net > 0
+              ? `+${formatMonthly(net)}`
+              : net < 0
+              ? `-${formatMonthly(Math.abs(net))}`
+              : "0.00"}
+          </span>
+        </button>
+      </div>
+      <p className="text-xs text-gray-500 mt-3">
+        Based on active streams only. Values estimated over 30 days.
+      </p>
+    </div>
+  );
+}