@@ -16,3 +16,20 @@ node_modules
 
 # Rust build artifacts
 contracts/target/
+
+# Test snapshots
+contracts/streaming/test_snapshots/
+
+# Vitest
+*.snap
+coverage/
+
+# TypeScript build info
+tsconfig.tsbuildinfo
+
+# Editor
+.vscode/
+.idea/
+
+# OS
+Thumbs.db
@@ -1,17 +1,17 @@
 'use client'
 
-import { useState } from 'react'
+import { Suspense, useCallback } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { Search, Download } from 'lucide-react'
 import { RequireWallet } from '@/components/layout/require-wallet'
 import { Button } from '@/components/ui/button'
 import { streamsToCSV, downloadCSV } from '@/lib/export'
 import { StreamCard } from '@/components/streams/stream-card'
 import { EmptyStreams } from '@/components/streams/empty-state'
-import { StreamStatusBadge } from '@/components/streams/stream-status-badge'
 import { Input } from '@/components/ui/input'
 import { useStreams } from '@/hooks/use-streams'
 import { useNow } from '@/hooks/use-now'
-import { getStreamStatus, shortenAddress } from '@/lib/stream-utils'
+import { getStreamStatus } from '@/lib/stream-utils'
 import type { StreamStatus } from '@/types/stream'
 
 const STATUS_FILTERS: { label: string; value: StreamStatus | 'all' }[] = [
@@ -22,25 +22,53 @@ const STATUS_FILTERS: { label: string; value: StreamStatus | 'all' }[] = [
   { label: 'Cancelled', value: 'cancelled' },
 ]
 
+const TOKEN_OPTIONS = ['all', 'XLM', 'USDC', 'EURC'] as const
+
 function StreamsPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
   const { all } = useStreams()
   const now = useNow(5000)
-  const [search, setSearch] = useState('')
-  const [statusFilter, setStatusFilter] = useState<StreamStatus | 'all'>('all')
+
+  const search = searchParams.get('q') ?? ''
+  const statusFilter = (searchParams.get('status') ?? 'all') as StreamStatus | 'all'
+  const tokenFilter = searchParams.get('token') ?? 'all'
+
+  const setParam = useCallback(
+    (key: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString())
+      if (!value || value === 'all') {
+        params.delete(key)
+      } else {
+        params.set(key, value)
+      }
+      router.replace(`?${params.toString()}`, { scroll: false })
+    },
+    [router, searchParams],
+  )
+
+  const clearFilters = useCallback(() => {
+    router.replace('?', { scroll: false })
+  }, [router])
 
   const filtered = all.filter((s) => {
     const matchesStatus =
       statusFilter === 'all' || getStreamStatus(s, now) === statusFilter
+    const matchesToken =
+      tokenFilter === 'all' ||
+      s.token.symbol.toUpperCase() === tokenFilter.toUpperCase()
     const q = search.toLowerCase()
     const matchesSearch =
       !q ||
       s.id.includes(q) ||
       s.sender.toLowerCase().includes(q) ||
       s.recipient.toLowerCase().includes(q) ||
       s.token.symbol.toLowerCase().includes(q)
-    return matchesStatus && matchesSearch
+    return matchesStatus && matchesToken && matchesSearch
   })
 
+  const hasFilters = search || statusFilter !== 'all' || tokenFilter !== 'all'
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -66,21 +94,42 @@ function StreamsPage() {
       </div>
 
       {/* Filters */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div className="relative flex-1 sm:max-w-xs">
-          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder="Search by address or token…"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="pl-9"
-          />
+      <div className="flex flex-col gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <div className="relative flex-1 sm:max-w-xs">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search by address or token…"
+              value={search}
+              onChange={(e) => setParam('q', e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          {/* Token filter */}
+          <div className="flex flex-wrap gap-2">
+            {TOKEN_OPTIONS.map((t) => (
+              <button
+                key={t}
+                onClick={() => setParam('token', t)}
+                className={
+                  'rounded-full border px-3 py-1 text-xs font-medium transition-colors ' +
+                  (tokenFilter === t
+                    ? 'border-primary bg-primary/10 text-primary'
+                    : 'border-border bg-card text-muted-foreground hover:text-foreground')
+                }
+              >
+                {t === 'all' ? 'All tokens' : t}
+              </button>
+            ))}
+          </div>
         </div>
+
+        {/* Status filter */}
         <div className="flex flex-wrap gap-2">
           {STATUS_FILTERS.map((f) => (
             <button
               key={f.value}
-              onClick={() => setStatusFilter(f.value)}
+              onClick={() => setParam('status', f.value)}
               className={
                 'rounded-full border px-3 py-1 text-xs font-medium transition-colors ' +
                 (statusFilter === f.value
@@ -96,11 +145,11 @@ function StreamsPage() {
 
       {/* Results */}
       {filtered.length === 0 ? (
-        search || statusFilter !== 'all' ? (
+        hasFilters ? (
           <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border bg-card/40 px-6 py-16 text-center">
             <p className="text-sm font-medium">No streams match your filters</p>
             <button
-              onClick={() => { setSearch(''); setStatusFilter('all') }}
+              onClick={clearFilters}
               className="mt-2 text-xs text-primary hover:underline"
             >
               Clear filters
@@ -123,7 +172,9 @@ function StreamsPage() {
 export default function StreamsRoute() {
   return (
     <RequireWallet>
-      <StreamsPage />
+      <Suspense>
+        <StreamsPage />
+      </Suspense>
     </RequireWallet>
   )
 }
@@ -2,10 +2,11 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Plus, Moon, Sun, Monitor, Network } from 'lucide-react'
+import { Plus, Moon, Sun, Monitor, Network, AlertTriangle } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Brand } from '@/components/brand'
 import { useNetwork } from '@/components/providers/network-provider'
+import { useWalletContext } from '@/components/providers/wallet-provider'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -25,8 +26,9 @@ const NAV_LINKS = [
 
 export function Navbar() {
   const pathname = usePathname()
-  const { setTheme, theme } = useTheme()
+  const { setTheme } = useTheme()
   const { network, setNetwork } = useNetwork()
+  const { networkMismatch, walletNetwork, isConnected } = useWalletContext()
 
   return (
     <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-xl">
@@ -57,7 +59,13 @@ export function Navbar() {
         </nav>
 
         <div className="ml-auto flex items-center gap-2">
-          <Button asChild variant="ghost" size="sm" className="gap-1.5">
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="gap-1.5"
+            disabled={networkMismatch}
+          >
             <Link href="/app/create">
               <Plus className="size-4" />
               <span className="hidden sm:inline">New stream</span>
@@ -110,6 +118,17 @@ export function Navbar() {
         </div>
       </div>
 
+      {/* Network mismatch banner */}
+      {isConnected && networkMismatch && (
+        <div className="flex items-center gap-2 border-t border-yellow-500/30 bg-yellow-500/10 px-4 py-2 text-sm text-yellow-600 dark:text-yellow-400">
+          <AlertTriangle className="size-4 shrink-0" />
+          <span>
+            Your wallet is on <strong>{walletNetwork}</strong> — please switch to{' '}
+            <strong>{network}</strong> in Freighter settings. Transactions are disabled until you switch.
+          </span>
+        </div>
+      )}
+
       {/* Mobile nav */}
       <nav className="flex items-center gap-1 border-t border-border px-4 py-2 md:hidden">
         {NAV_LINKS.map((link) => {
 
@@ -37,6 +37,8 @@ interface WalletContextValue {
   connecting: boolean
   reconnecting: boolean
   isConnected: boolean
+  networkMismatch: boolean
+  walletNetwork: string | null
   connect: (walletId: string) => Promise<void>
   disconnect: () => void
   signTransaction: (xdr: string, network?: NetworkName) => Promise<string>
@@ -52,23 +54,30 @@ async function connectFreighter(): Promise<string> {
   if (!connected.isConnected) {
     throw new Error('Freighter is not installed. Please install the Freighter extension.')
   }
-  // Request access prompts the user to approve
   await requestAccess()
   const result = await getAddress()
   if (result.error) throw new Error(result.error)
   return result.address
 }
 
+async function getFreighterNetwork(): Promise<string | null> {
+  try {
+    const { getNetwork } = await import('@stellar/freighter-api')
+    const result = await getNetwork()
+    if (result.error) return null
+    return result.network ?? null
+  } catch {
+    return null
+  }
+}
+
 async function signWithFreighter(xdr: string, networkPassphrase: string): Promise<string> {
   const { signTransaction } = await import('@stellar/freighter-api')
-  const result = await signTransaction(xdr, {
-    networkPassphrase,
-  })
+  const result = await signTransaction(xdr, { networkPassphrase })
   if (result.error) throw new Error(result.error)
   return result.signedTxXdr
 }
 
-// Stubs for wallets that need a dedicated SDK — shows a helpful message
 async function connectStub(name: string): Promise<string> {
   throw new Error(
     `${name} connection requires the ${name} browser extension. Install it and refresh.`,
@@ -85,13 +94,22 @@ async function connectWallet(id: string): Promise<string> {
   }
 }
 
+// Maps Freighter network names → our NetworkName
+function normalizeFreighterNetwork(raw: string): NetworkName | null {
+  const lower = raw.toLowerCase()
+  if (lower.includes('test')) return 'testnet'
+  if (lower === 'mainnet' || lower === 'public' || lower.includes('public')) return 'mainnet'
+  return null
+}
+
 // ─── Provider ─────────────────────────────────────────────────────────────────
 
 export function WalletProvider({ children }: { children: ReactNode }) {
   const [address, setAddress] = useState<string | null>(null)
   const [walletId, setWalletId] = useState<string | null>(null)
   const [connecting, setConnecting] = useState(false)
   const [reconnecting, setReconnecting] = useState(true)
+  const [walletNetwork, setWalletNetwork] = useState<string | null>(null)
   const { network } = useNetwork()
 
   // Auto-reconnect on mount using persisted walletId
@@ -105,6 +123,29 @@ export function WalletProvider({ children }: { children: ReactNode }) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // Poll Freighter's active network while connected
+  useEffect(() => {
+    if (!address || walletId !== 'freighter') {
+      setWalletNetwork(null)
+      return
+    }
+    let cancelled = false
+    const check = () => {
+      getFreighterNetwork().then((net) => {
+        if (!cancelled) setWalletNetwork(net)
+      })
+    }
+    check()
+    const interval = setInterval(check, 5000)
+    return () => { cancelled = true; clearInterval(interval) }
+  }, [address, walletId])
+
+  const networkMismatch = useMemo(() => {
+    if (!address || walletId !== 'freighter' || !walletNetwork) return false
+    const normalized = normalizeFreighterNetwork(walletNetwork)
+    return normalized !== null && normalized !== network
+  }, [address, walletId, walletNetwork, network])
+
   const connect = useCallback(async (id: string) => {
     setConnecting(true)
     try {
@@ -121,6 +162,7 @@ export function WalletProvider({ children }: { children: ReactNode }) {
   const disconnect = useCallback(() => {
     setAddress(null)
     setWalletId(null)
+    setWalletNetwork(null)
     localStorage.removeItem('walletId')
     setSentryUser(null)
   }, [])
@@ -149,11 +191,13 @@ export function WalletProvider({ children }: { children: ReactNode }) {
       connecting,
       reconnecting,
       isConnected: address !== null,
+      networkMismatch,
+      walletNetwork,
       connect,
       disconnect,
       signTransaction,
     }),
-    [address, walletId, connecting, reconnecting, connect, disconnect, signTransaction],
+    [address, walletId, connecting, reconnecting, networkMismatch, walletNetwork, connect, disconnect, signTransaction],
   )
 
   return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>