Add wallet persistence, RPC error boundary, skeleton loading, and status filters (#530)

Closes #464, #465, #466, #467

Co-authored-by: Emmanuel Chukwunyere <emmanuelanalaba@gmail.com>

Author: SYMBAxx

src/app/dashboard/loading.tsx

@@ -17,7 +17,7 @@ export default function DashboardLoading() {
       </div>
 
       <div className="flex flex-col gap-4">
-        {[...Array(3)].map((_, i) => (
+        {[...Array(8)].map((_, i) => (
           <SkeletonCard key={i} />
         ))}
       </div>

src/app/dashboard/page.tsx

@@ -1,5 +1,25 @@
 import { Suspense } from "react";
 import DashboardClient from "@/components/DashboardClient";
+import { SkeletonCard } from "@/components/Skeleton";
+
+/**
+ * Dashboard page with streaming SSR.
+ * The page shell renders immediately, and invoice cards stream in as they load.
+ * Wrapped in Suspense because DashboardClient reads/writes the `status`
+ * filter via useSearchParams(), which Next.js requires a boundary for.
+ */
+export default async function DashboardPage() {
+  return (
+    <main className="max-w-3xl mx-auto w-full px-4 sm:px-6 py-16 overflow-x-hidden">
+      <Suspense
+        fallback={
+          <div className="flex flex-col gap-4">
+            {[...Array(8)].map((_, i) => (
+              <SkeletonCard key={i} />
+            ))}
+          </div>
+        }
+      >
 import { InvoiceListSkeleton } from "@/components/Skeleton";
 
 export const metadata = {

src/app/invoice/[id]/page.tsx

@@ -33,6 +33,18 @@ import DeadlineExtensionPanel from "@/components/DeadlineExtensionPanel";
 import SuccessAnimation from "@/components/SuccessAnimation";
 import RecipientPayoutTracker from "@/components/RecipientPayoutTracker";
 import CloneLineageTree from "@/components/CloneLineageTree";
+import TransferOwnershipModal from "@/components/TransferOwnershipModal";
+import StellarErrorBoundary from "@/components/error/StellarErrorBoundary";
+import { useStellarQuery } from "@/hooks/useStellarQuery";
+
+const POLL_MS = 10_000;
+
+// Extend the SDK Invoice type with vesting fields (not yet in published SDK)
+type InvoiceWithVesting = Invoice & {
+  vestingCliff?: number;    // unix timestamp (seconds)
+  claimed?: string[];       // addresses that have claimed
+  extensionVotes?: number;  // current votes to extend deadline
+};
 import CountdownTimer from "@/components/CountdownTimer";
 import SplitCalculator from "@/components/SplitCalculator";
 import InvoiceTagEditor from "@/components/invoice/InvoiceTagEditor";
@@ -90,6 +102,21 @@ function showToast(message: string, type: "success" | "error" | "info" = "info")
   }
 }
 
+/**
+ * Runs a live invoice RPC read for as long as the Pay section is mounted.
+ * A genuine child of StellarErrorBoundary — the query's render-phase throw
+ * on exhausted failure only propagates to boundaries wrapping this
+ * component's own subtree, not to whatever renders InvoiceDetailPage.
+ */
+function PaySectionRpcGate({ id, children }: { id: string; children: React.ReactNode }) {
+  useStellarQuery(() => splitClient.getInvoice(id), [id]);
+  return <>{children}</>;
+}
+
+/**
+ * Invoice detail page — shows status, payment progress, Pay button,
+ * reminder system, and webhook configuration (creator only).
+ */
 export default function InvoiceDetailPage({ params }: Props) {
   const { id } = params;
   const router = useRouter();
@@ -790,6 +817,15 @@ export default function InvoiceDetailPage({ params }: Props) {
 
       {/* Pay button → opens modal */}
       {invoice.status === "Pending" && publicKey && (
+        <StellarErrorBoundary>
+        <PaySectionRpcGate id={id}>
+        <section aria-labelledby="pay-heading" className="mb-8">
+          <div className="flex items-center gap-3 mb-4 flex-wrap">
+            <h2 id="pay-heading" className="text-lg font-semibold">Pay toward this invoice</h2>
+            <CooldownBadge expiresAt={cooldownExpiresAt} />
+          </div>
+          <PaymentMethodSelector onMethodChange={setPaymentMethod} />
+          <form onSubmit={handlePay} className="flex flex-col gap-4">
         <section className="mb-8 bg-gray-800/60 border border-gray-700 rounded-xl p-6">
           <h2 className="text-lg font-semibold text-white mb-4">Pay Toward Invoice</h2>
           <PaymentMethodSelector
@@ -827,6 +863,8 @@ export default function InvoiceDetailPage({ params }: Props) {
             </button>
           </form>
         </section>
+        </PaySectionRpcGate>
+        </StellarErrorBoundary>
       )}
 
       {showConfidentialFlow && (invoice as any).confidential && publicKey && (

src/app/layout.tsx

@@ -3,6 +3,10 @@ import Script from "next/script";
 import "./globals.css";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { AccessibilityProvider } from "@/contexts/AccessibilityContext";
+import { WalletProvider } from "@/contexts/WalletContext";
+import ThemeToggle from "@/components/ThemeToggle";
+import NotificationCenter from "@/components/NotificationCenter";
+import WalletConnect from "@/components/WalletConnect";
 import Navbar from "@/components/Navbar";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import OnboardingFlow from "@/components/OnboardingFlow";
@@ -104,6 +108,67 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
+    <html lang="en" suppressHydrationWarning>
+      <Script
+        id="accessibility-bootstrap"
+        strategy="beforeInteractive"
+        dangerouslySetInnerHTML={{ __html: accessibilityBootstrap }}
+      />
+      <body className="min-h-screen bg-gray-950 text-gray-100 antialiased overflow-x-hidden">
+        <ThemeProvider>
+          <AccessibilityProvider>
+            <WalletProvider>
+            <I18nProvider>
+            <header className="sticky top-0 z-40 flex items-center justify-between gap-2 px-4 sm:px-6 py-3 bg-gray-950/80 backdrop-blur border-b border-gray-800 min-w-0">
+              <a href="/" className="font-bold text-base sm:text-lg tracking-tight shrink-0 min-h-11 inline-flex items-center">
+                StellarSplit
+              </a>
+              <a
+                href="/groups"
+                className="text-sm text-gray-400 hover:text-gray-200 transition-colors px-2 min-h-11 inline-flex items-center"
+              >
+                Groups
+              </a>
+              <a
+                href="/address-book"
+                className="text-sm text-gray-400 hover:text-gray-200 transition-colors px-2 min-h-11 inline-flex items-center whitespace-nowrap"
+              >
+                <span className="sm:hidden">Contacts</span>
+                <span className="hidden sm:inline">Address Book</span>
+              </a>
+              <a
+                href="/leaderboard"
+                className="text-sm text-gray-400 hover:text-gray-200 transition-colors px-2 min-h-11 inline-flex items-center"
+              >
+                Leaderboard
+              </a>
+              <a
+                href="/settings/accessibility"
+                className="text-sm text-gray-400 hover:text-gray-200 transition-colors px-2 min-h-11 inline-flex items-center"
+              >
+                Accessibility
+              </a>
+              <ThemeToggle />
+              <SimulationModeToggle />
+              <NotificationCenter />
+              <WalletConnect compact />
+            </header>
+            <SimulationBanner />
+            <UpgradeBanner />
+            <ErrorBoundary>{children}</ErrorBoundary>
+            <OnboardingFlow />
+            <RecipientOnboarding />
+            <Script id="register-sw" strategy="afterInteractive">
+              {`if ("serviceWorker" in navigator) {
+              window.addEventListener("load", function () {
+                navigator.serviceWorker.register("/sw.js");
+              });
+            }`}
+            </Script>
+            </I18nProvider>
+            </WalletProvider>
+          </AccessibilityProvider>
+        </ThemeProvider>
     // dir="ltr" is set here as scaffold; I18nProvider will update it client-side when RTL locales (ar/he) are added
     <html lang="en" dir="ltr" suppressHydrationWarning>
       <head>

src/components/DashboardClient.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useMemo, useCallback } from "react";
 import Link from "next/link";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useRouter, useSearchParams } from "next/navigation";
 import { getFreighterPublicKey } from "@/lib/freighter";
 import { splitClient } from "@/lib/stellar";
@@ -12,6 +13,7 @@ import { useActivityFeed } from "@/hooks/useActivityFeed";
 import InvoiceShareQRModal from "@/components/InvoiceShareQRModal";
 import { InvoiceListSkeleton, SkeletonCard } from "@/components/Skeleton";
 import BatchPayModal from "@/components/BatchPayModal";
+import StatusFilterChips from "@/components/invoice/StatusFilterChips";
 import { setBulkReminders, type BulkReminderResult } from "@/lib/reminders";
 import { getOrAssignDisplayNumber } from "@/lib/invoiceNumbering";
 import { formatAmount } from "@stellar-split/sdk";
@@ -23,6 +25,9 @@ import {
   SORT_OPTIONS,
   filterDashboardInvoices,
   getDashboardPresetCounts,
+  INVOICE_STATUS_FILTERS,
+  type DashboardPresetId,
+  type InvoiceStatusFilter,
   sortInvoices,
   filterByDateRange,
   type DashboardPresetId,
@@ -111,6 +116,35 @@ export default function DashboardClient() {
   const [compareMode, setCompareMode] = useState(false);
   const [compareSelected, setCompareSelected] = useState<Set<string>>(new Set());
 
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const selectedStatuses = useMemo<InvoiceStatusFilter[]>(() => {
+    const raw = searchParams.get("status");
+    if (!raw) return [];
+    return raw
+      .split(",")
+      .filter((s): s is InvoiceStatusFilter =>
+        INVOICE_STATUS_FILTERS.includes(s as InvoiceStatusFilter),
+      );
+  }, [searchParams]);
+
+  const toggleStatus = (status: InvoiceStatusFilter) => {
+    const next = selectedStatuses.includes(status)
+      ? selectedStatuses.filter((s) => s !== status)
+      : [...selectedStatuses, status];
+    const params = new URLSearchParams(searchParams.toString());
+    if (next.length > 0) {
+      params.set("status", next.join(","));
+    } else {
+      params.delete("status");
+    }
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  };
+
+  // Get wallet public key
   useEffect(() => {
     getFreighterPublicKey()
       .then(setPublicKey)
@@ -284,6 +318,13 @@ export default function DashboardClient() {
     setBulkReminderResults(null);
   };
 
+  const clearFilters = () => {
+    setActivePreset("all");
+    setSearchValue("");
+    setNumericResult(null);
+    if (searchParams.get("status")) {
+      router.replace(pathname, { scroll: false });
+    }
   const toggleCompareSelect = (id: string) => {
     if (compareSelected.size >= 2 && !compareSelected.has(id)) {
       return; // Max 2 invoices
@@ -308,6 +349,24 @@ export default function DashboardClient() {
     }
   };
 
+  const pendingInvoices = invoices.filter((inv) => inv.status === "Pending");
+  const selectedInvoices = invoices.filter((inv) => selected.has(inv.id));
+  const presetCounts = useMemo(
+    () => getDashboardPresetCounts(invoices, publicKey),
+    [invoices, publicKey],
+  );
+  const visibleInvoices = useMemo(
+    () =>
+      filterDashboardInvoices(
+        invoices,
+        publicKey,
+        activePreset,
+        searchValue,
+        undefined,
+        selectedStatuses,
+      ),
+    [invoices, publicKey, activePreset, searchValue, selectedStatuses],
+  );
   const handleScheduleBulkReminders = () => {
     if (!reminderDateTime || reminderSelected.size === 0) return;
     const results = setBulkReminders(
@@ -530,6 +589,9 @@ export default function DashboardClient() {
         </div>
       </div>
 
+      <StatusFilterChips selected={selectedStatuses} onToggle={toggleStatus} />
+
+      <div className="flex flex-wrap items-center gap-2 mb-6">
       {/* Summary Stats */}
       {!loading && invoices.length > 0 && (
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
@@ -567,6 +629,35 @@ export default function DashboardClient() {
           </svg>
           Filters {isFiltered && <span className="ml-1 rounded-full bg-indigo-600 text-white text-xs px-1.5 py-0.5">on</span>}
         </button>
+        {DASHBOARD_PRESETS.map((preset) => {
+          const isActive = activePreset === preset.id;
+          const count = presetCounts[preset.id] ?? 0;
+
+          return (
+            <button
+              key={preset.id}
+              type="button"
+              onClick={() => handlePresetToggle(preset.id)}
+              className={`rounded-full px-3 py-1.5 text-sm font-semibold transition-colors ${
+                isActive
+                  ? "bg-indigo-600 text-white"
+                  : "bg-gray-800 text-gray-300 hover:bg-gray-700"
+              }`}
+              aria-pressed={isActive}
+            >
+              <span>{preset.label}</span>
+              <span className="ml-2 rounded-full bg-white/15 px-2 py-0.5 text-xs">
+                {count}
+              </span>
+            </button>
+          );
+        })}
+        {(activePreset !== "all" || searchValue.trim().length > 0 || selectedStatuses.length > 0) && (
+          <button
+            type="button"
+            onClick={clearFilters}
+            className="rounded-full border border-gray-700 px-3 py-1.5 text-sm font-semibold text-gray-300 transition-colors hover:bg-gray-800"
+          >
         {isFiltered && (
           <button type="button" onClick={clearFilters} className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
             Clear filters
@@ -624,6 +715,11 @@ export default function DashboardClient() {
 
       {/* Invoice grid */}
       {loading && invoices.length === 0 ? (
+        <div className="flex flex-col gap-4">
+          {[...Array(8)].map((_, i) => (
+            <SkeletonCard key={i} />
+          ))}
+        </div>
         <InvoiceListSkeleton />
       ) : invoices.length === 0 ? (
         <div className="rounded-xl border border-gray-800 bg-gray-900/60 p-12 text-center">
@@ -634,6 +730,17 @@ export default function DashboardClient() {
           </Link>
         </div>
       ) : visibleInvoices.length === 0 ? (
+        <div className="rounded-xl border border-gray-800 bg-gray-900/60 p-6 text-center">
+          <p className="text-gray-400">
+            {activePreset !== "all"
+              ? DASHBOARD_PRESETS.find((preset) => preset.id === activePreset)
+                  ?.emptyState ?? "No invoices match this view."
+              : searchValue.trim()
+              ? "No invoices match your search."
+              : selectedStatuses.length > 0
+              ? "No invoices match the selected status."
+              : "No invoices found. Create your first one!"}
+          </p>
         <div className="rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/60 p-6 text-center">
           <p className="text-gray-400">No invoices match the current filters.</p>
         </div>