feat: real-time on-chain balance and event activity feed

src/app/dashboard/dashboard.module.css

@@ -80,3 +80,7 @@
   padding: 0.6rem 1.5rem; border-radius: var(--radius); font-weight: 600;
   cursor: pointer;
 }
+
+.feedSection {
+  margin-top: 2.5rem;
+}

src/app/dashboard/page.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 import { useWallet }  from '@/context/WalletContext';
 import { useStreams }  from '@/hooks/useStreams';
 import { StreamCard } from '@/components/molecules/StreamCard';
+import { ActivityFeed } from '@/components/organisms/ActivityFeed';
 import {
   DEFAULT_QUERY,
   SORT_OPTIONS,
@@ -142,6 +143,11 @@ export default function Dashboard() {
           ))}
         </div>
       )}
+
+      {/* Activity feed */}
+      <div className={styles.feedSection}>
+        <ActivityFeed walletAddress={address} />
+      </div>
     </div>
   );
 }

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

@@ -6,6 +6,7 @@ import { useStreamBalance }   from '@/hooks/useStreamBalance';
 import { useToast }           from '@/context/ToastContext';
 import { useContract }        from '@/hooks/useContract';
 import { streams }            from '@/lib/contracts';
+import { ActivityFeed }       from '@/components/organisms/ActivityFeed';
 import styles                 from './stream.module.css';
 
 function fmt(stroops: bigint): string {
@@ -20,7 +21,9 @@ export default function StreamDetail() {
   const { execute, loading: txLoading, error: txError } = useContract();
   const { stream, loading, error } = useStream(id);
 
-  const balance = useStreamBalance(
+  const { balance, syncing } = useStreamBalance(
+    stream?.contractStreamId ?? '',
+    address ?? '',
     stream ? BigInt(stream.ratePerSecond) : 0n,
     stream ? BigInt(stream.withdrawn)     : 0n,
     stream?.startTime ?? 0,
@@ -49,7 +52,10 @@ export default function StreamDetail() {
 
       <div className={styles.balanceCard}>
         <p className={styles.balanceLabel}>Withdrawable Balance</p>
-        <p className={styles.balanceValue}>{fmt(balance)} XLM</p>
+        <p className={styles.balanceValue}>
+          {fmt(balance)} XLM
+          {syncing && <span className={styles.syncingBadge}>syncing</span>}
+        </p>
         <p className={styles.balanceRate}>{perDay} XLM/day</p>
       </div>
 
@@ -80,7 +86,10 @@ export default function StreamDetail() {
                 if (!address) return;
                 toast.info('Confirm withdrawal in Freighter…');
                 const result = await execute(() => streams.withdrawStream(stream.contractStreamId, address));
-                if (result) toast.success(`Withdrawal confirmed! Tx: ${result.hash.slice(0, 12)}…`);
+                if (result) {
+                  toast.success(`Withdrawal confirmed! Tx: ${result.hash.slice(0, 12)}…`);
+                  router.refresh();
+                }
               }}
             >
               {txLoading ? 'Withdrawing…' : `Withdraw ${fmt(balance)} XLM`}
@@ -108,6 +117,10 @@ export default function StreamDetail() {
           )}
         </div>
       )}
+
+      <div className={styles.feedSection}>
+        <ActivityFeed walletAddress={address ?? undefined} />
+      </div>
     </div>
   );
 }

src/app/streams/[id]/stream.module.css

@@ -55,3 +55,34 @@
   font-weight: 600;
 }
 .notFound { text-align: center; margin-top: 6rem; color: var(--text-muted); }
+
+.loading { text-align: center; margin-top: 6rem; color: var(--text-muted); }
+.backBtn {
+  background: none; border: none; color: var(--text-muted); cursor: pointer;
+  font-size: 0.85rem; margin-bottom: 1rem; padding: 0;
+}
+.backBtn:hover { color: var(--text); }
+.error { color: var(--danger); font-size: 0.85rem; margin-bottom: 0.75rem; }
+.notParty { color: var(--text-muted); font-size: 0.85rem; text-align: center; width: 100%; }
+
+.syncingBadge {
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: rgba(255,255,255,0.2);
+  border-radius: 9999px;
+  padding: 0.15em 0.6em;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.feedSection {
+  margin-top: 2rem;
+}

src/components/organisms/ActivityFeed.module.css

@@ -0,0 +1,189 @@
+.container {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem 0.75rem;
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.refreshBtn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  border-radius: var(--radius);
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.refreshBtn:hover { color: var(--text); border-color: var(--text-muted); }
+.refreshBtn:disabled { opacity: 0.4; cursor: default; }
+
+/* ── Filters ────────────────────────────────────────────────────────────── */
+
+.filters {
+  display: flex;
+  gap: 0.4rem;
+  padding: 0 1.25rem 0.75rem;
+  overflow-x: auto;
+}
+
+.chip {
+  flex-shrink: 0;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  border-radius: 9999px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.chip:hover { border-color: var(--text-muted); color: var(--text); }
+.chipActive {
+  background: var(--accent, #a78bfa);
+  border-color: var(--accent, #a78bfa);
+  color: #fff;
+}
+
+/* ── Event list ─────────────────────────────────────────────────────────── */
+
+.list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--border);
+  transition: background 0.1s;
+}
+.row:first-child { border-top: none; }
+.row:hover { background: rgba(255, 255, 255, 0.03); }
+
+.icon {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.infoTop {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  font-size: 0.85rem;
+}
+
+.type {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.direction {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 9999px;
+  padding: 0.1em 0.5em;
+}
+
+.infoBottom {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0.15rem 0 0;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.addr { font-family: monospace; }
+.dot { opacity: 0.4; }
+.time { opacity: 0.7; }
+
+.right {
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.amount {
+  font-family: monospace;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.explorerLink {
+  font-size: 0.7rem;
+  color: var(--accent, #a78bfa);
+  text-decoration: none;
+  opacity: 0.7;
+}
+.explorerLink:hover { opacity: 1; }
+
+/* ── Footer ─────────────────────────────────────────────────────────────── */
+
+.loadMore {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--border);
+  color: var(--accent, #a78bfa);
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.loadMore:hover { background: rgba(255, 255, 255, 0.03); }
+.loadMore:disabled { opacity: 0.4; cursor: default; }
+
+.count {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  padding: 0.5rem;
+  margin: 0;
+}
+
+.error {
+  color: var(--danger, #ef4444);
+  font-size: 0.8rem;
+  padding: 0.75rem 1.25rem;
+  margin: 0;
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  padding: 2rem 1.25rem;
+  margin: 0;
+}