feat: Soroban contract event subscription + invoice comparison (#119, #120)

app/dashboard/investor/layout.tsx

@@ -1,4 +1,13 @@
 import type { Metadata } from "next";
+import dynamic from "next/dynamic";
+
+const ContractEventSubscriber = dynamic(
+  () =>
+    import("@/components/marketplace/ContractEventSubscriber").then(
+      (m) => m.ContractEventSubscriber
+    ),
+  { ssr: false, loading: () => null }
+);
 
 export const metadata: Metadata = {
   title: "Investor Dashboard",
@@ -29,5 +38,10 @@ export const metadata: Metadata = {
 import { ConnectWalletGuard } from "@/components/layout/ConnectWalletGuard";
 
 export default function InvestorDashboardLayout({ children }: { children: React.ReactNode }) {
-  return <ConnectWalletGuard>{children}</ConnectWalletGuard>;
+  return (
+    <ConnectWalletGuard>
+      <ContractEventSubscriber />
+      {children}
+    </ConnectWalletGuard>
+  );
 }

app/marketplace/layout.tsx

@@ -1,4 +1,13 @@
 import type { Metadata } from "next";
+import dynamic from "next/dynamic";
+
+const ContractEventSubscriber = dynamic(
+  () =>
+    import("@/components/marketplace/ContractEventSubscriber").then(
+      (m) => m.ContractEventSubscriber
+    ),
+  { ssr: false, loading: () => null }
+);
 
 export const metadata: Metadata = {
   title: "Invoice Marketplace",
@@ -27,5 +36,10 @@ export const metadata: Metadata = {
 };
 
 export default function MarketplaceLayout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
+  return (
+    <>
+      <ContractEventSubscriber />
+      {children}
+    </>
+  );
 }

app/marketplace/page.tsx

@@ -32,6 +32,7 @@ import { cn } from "@/lib/utils";
 import { sanitizeQueryParam } from "@/lib/security";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
 import { RangeSlider } from "@/components/ui/range-slider";
+import { ComparisonBar } from "@/components/marketplace/ComparisonBar";
 
 // ─── Filter Options ──────────────────────────────────────────────────────────
 
@@ -767,6 +768,8 @@ function MarketplaceContent() {
           </div>
         </div>
       )}
+      {/* Fixed comparison bar — renders above the page when invoices are selected */}
+      <ComparisonBar />
     </Container>
   );
 }

components/invoice/InvoiceCard.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { Calendar, Users, TrendingUp, MapPin, ArrowRight, Clock } from "lucide-react";
+import { Calendar, Users, TrendingUp, MapPin, ArrowRight, Clock, GitCompareArrows } from "lucide-react";
 import { RiskBadge, Badge } from "@/components/ui/badge";
 import { InvoiceFundingProgress } from "@/components/ui/progress";
 import { Button } from "@/components/ui/button";
@@ -20,6 +20,7 @@ import useCountdown from "@/hooks/useCountdown";
 import CountdownTimer from "@/components/ui/CountdownTimer";
 import { InvoiceStatusBadge } from "./InvoiceStatusBadge";
 import { DebtorDisplay } from "./DebtorDisplay";
+import { useInvoiceStore } from "@/store/invoiceStore";
 import type { Invoice } from "@/types";
 
 interface InvoiceCardProps {
@@ -70,6 +71,9 @@ export function InvoiceCard({ invoice, index = 0, updatedAt }: InvoiceCardProps)
   const flag = getFlagEmoji(metadata.jurisdiction);
   const countryName = JURISDICTION_NAMES[metadata.jurisdiction] || metadata.jurisdiction;
   const queryClient = useQueryClient();
+  const { comparisonList, toggleComparison } = useInvoiceStore();
+  const isInComparison = comparisonList.includes(invoice.id);
+  const comparisonFull = comparisonList.length >= 3 && !isInComparison;
 
   // Check if invoice is expired
   const countdown = useCountdown(listingExpiry);
@@ -83,6 +87,12 @@ export function InvoiceCard({ invoice, index = 0, updatedAt }: InvoiceCardProps)
     });
   };
 
+  const handleCompareToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!comparisonFull) toggleComparison(invoice.id);
+  };
+
   return (
     <Link
       href={`/marketplace/${invoice.id}`}
@@ -202,7 +212,31 @@ export function InvoiceCard({ invoice, index = 0, updatedAt }: InvoiceCardProps)
               Fund Invoice
             </Button>
           ) : null}
-        </div>
+
+          {/* Compare toggle button */}
+          <button
+            onClick={handleCompareToggle}
+            disabled={comparisonFull}
+            className={cn(
+              "mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors relative z-20",
+              isInComparison
+                ? "border-primary/40 bg-primary/10 text-primary hover:bg-primary/20"
+                : comparisonFull
+                  ? "border-border/30 bg-transparent text-muted-foreground/40 cursor-not-allowed"
+                  : "border-border bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-primary/5 hover:text-primary"
+            )}
+            aria-label={
+              isInComparison
+                ? `Remove ${metadata.debtorName} from comparison`
+                : comparisonFull
+                  ? "Comparison list is full (max 3)"
+                  : `Add ${metadata.debtorName} to comparison`
+            }
+            aria-pressed={isInComparison}
+          >
+            <GitCompareArrows className="h-3.5 w-3.5" />
+            {isInComparison ? "Remove from Compare" : "Add to Compare"}
+          </button>        </div>
 
         {/* Hover overlay CTA */}
         <div className="absolute inset-0 bg-zinc-950/75 backdrop-blur-xs opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-center justify-center pointer-events-none">

components/marketplace/ComparisonBar.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+/**
+ * ComparisonBar — fixed bottom bar showing invoices selected for comparison.
+ *
+ * Appears when 1+ invoices are in the comparison list. Shows invoice chips
+ * with remove buttons and a "Compare" CTA that opens the ComparisonTable.
+ * Supports shareable URLs with comparison invoice IDs.
+ */
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, GitCompareArrows, Share2, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useInvoiceStore } from "@/store/invoiceStore";
+import { cn } from "@/lib/utils";
+import { ComparisonTable } from "./ComparisonTable";
+
+const MAX_COMPARISON = 3;
+
+export function ComparisonBar() {
+  const { comparisonList, invoices, removeFromComparison, clearComparison } =
+    useInvoiceStore();
+  const [tableOpen, setTableOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const router = useRouter();
+
+  const selectedInvoices = comparisonList
+    .map((id) => invoices.find((inv) => inv.id === id))
+    .filter(Boolean) as NonNullable<ReturnType<typeof invoices.find>>[];
+
+  // Sync comparison list from URL on mount (shareable links)
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    const compareParam = searchParams.get("compare");
+    if (compareParam) {
+      const ids = compareParam.split(",").filter(Boolean).slice(0, MAX_COMPARISON);
+      const { toggleComparison, comparisonList: current } = useInvoiceStore.getState();
+      ids.forEach((id) => {
+        if (!current.includes(id)) toggleComparison(id);
+      });
+      // Auto-open the table when arriving via a share link
+      if (ids.length >= 2) setTableOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleShare = async () => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("compare", comparisonList.join(","));
+    try {
+      await navigator.clipboard.writeText(url.toString());
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback: update URL without clipboard
+      router.replace(`${url.pathname}?${url.searchParams.toString()}`, {
+        scroll: false,
+      });
+    }
+  };
+
+  if (comparisonList.length === 0) return null;
+
+  return (
+    <>
+      {/* Comparison Table Modal */}
+      <AnimatePresence>
+        {tableOpen && (
+          <ComparisonTable
+            invoices={selectedInvoices}
+            onClose={() => setTableOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Fixed Bottom Bar */}
+      <motion.div
+        initial={{ y: 100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: 100, opacity: 0 }}
+        transition={{ type: "spring", stiffness: 300, damping: 30 }}
+        className="fixed bottom-0 left-0 right-0 z-40 border-t border-border bg-card/95 backdrop-blur-md shadow-2xl"
+        role="region"
+        aria-label="Invoice comparison bar"
+      >
+        <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-3 sm:px-6">
+          {/* Label */}
+          <div className="hidden shrink-0 sm:flex items-center gap-2">
+            <GitCompareArrows className="h-4 w-4 text-primary" />
+            <span className="text-sm font-semibold text-foreground">
+              Compare
+            </span>
+            <span className="text-xs text-muted-foreground">
+              ({comparisonList.length}/{MAX_COMPARISON})
+            </span>
+          </div>
+
+          {/* Invoice chips */}
+          <div className="flex flex-1 items-center gap-2 overflow-x-auto">
+            {selectedInvoices.map((invoice) => (
+              <motion.div
+                key={invoice.id}
+                layout
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-xs font-medium text-foreground"
+              >
+                <span className="max-w-[120px] truncate">
+                  {invoice.metadata.debtorName}
+                </span>
+                <span className="text-primary font-semibold">
+                  {invoice.terms.apr.toFixed(1)}%
+                </span>
+                <button
+                  onClick={() => removeFromComparison(invoice.id)}
+                  className="ml-0.5 rounded-full p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                  aria-label={`Remove ${invoice.metadata.debtorName} from comparison`}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </motion.div>
+            ))}
+
+            {/* Empty slots */}
+            {Array.from({ length: MAX_COMPARISON - comparisonList.length }).map(
+              (_, i) => (
+                <div
+                  key={`empty-${i}`}
+                  className="flex shrink-0 items-center justify-center rounded-lg border border-dashed border-border/50 px-4 py-1.5 text-xs text-muted-foreground/50"
+                >
+                  + Add
+                </div>
+              )
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex shrink-0 items-center gap-2">
+            <button
+              onClick={handleShare}
+              className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+              aria-label="Copy shareable comparison link"
+            >
+              {copied ? (
+                <Check className="h-3.5 w-3.5 text-green-500" />
+              ) : (
+                <Share2 className="h-3.5 w-3.5" />
+              )}
+              <span className="hidden sm:inline">
+                {copied ? "Copied!" : "Share"}
+              </span>
+            </button>
+
+            <button
+              onClick={clearComparison}
+              className="rounded-lg border border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+              aria-label="Clear all comparisons"
+            >
+              Clear
+            </button>
+
+            <Button
+              size="sm"
+              onClick={() => setTableOpen(true)}
+              disabled={comparisonList.length < 2}
+              className={cn(
+                "gap-1.5",
+                comparisonList.length < 2 && "opacity-50 cursor-not-allowed"
+              )}
+              aria-label={
+                comparisonList.length < 2
+                  ? "Select at least 2 invoices to compare"
+                  : "Open comparison table"
+              }
+            >
+              <GitCompareArrows className="h-3.5 w-3.5" />
+              Compare
+              {comparisonList.length >= 2 && (
+                <span className="ml-0.5 rounded-full bg-primary-foreground/20 px-1.5 py-0.5 text-[10px] font-bold">
+                  {comparisonList.length}
+                </span>
+              )}
+            </Button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+}