From 366aaadb016a1bbc9dd2276fb737fd56db7f725d Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 24 Jun 2026 16:18:29 +0100
Subject: [PATCH 1/2] feat: resolve issues #725, #727, #728, #731

- #725: Add vault-critical skeleton components (SharePriceSkeleton, VaultStatSkeleton,
  TransactionRowSkeleton, PortfolioCardSkeleton, AnalyticsWidgetSkeleton) for
  deterministic loading placeholders
- #727: Add wallet session heartbeat via useWalletHeartbeat hook and
  WalletSessionIndicator component with contextual reconnect suggestions
- #728: Add useSharableViewState hook for deterministic query state serialization
  into stable URL params for fully shareable dashboard deep links
- #731: Add useNetworkQuality hook for latency measurement, useAdaptivePolling
  for adaptive cadence based on network quality, and HighLatencyBanner component
  for visual treatment when network degrades
---
 frontend/src/components/HighLatencyBanner.tsx |  73 ++++++++
 frontend/src/components/Skeleton.tsx          |  80 +++++++++
 frontend/src/components/WalletConnect.tsx     |   2 +
 .../src/components/WalletSessionIndicator.tsx | 156 ++++++++++++++++
 frontend/src/components/icons.ts              |   3 +
 frontend/src/hooks/useAdaptivePolling.ts      |  59 ++++++
 frontend/src/hooks/useNetworkQuality.ts       | 118 ++++++++++++
 frontend/src/hooks/useSharableViewState.ts    | 169 ++++++++++++++++++
 frontend/src/hooks/useWalletHeartbeat.ts      |  93 ++++++++++
 frontend/src/i18n/locales/en.ts               |  11 ++
 frontend/src/i18n/locales/es.ts               |  11 ++
 11 files changed, 775 insertions(+)
 create mode 100644 frontend/src/components/HighLatencyBanner.tsx
 create mode 100644 frontend/src/components/WalletSessionIndicator.tsx
 create mode 100644 frontend/src/hooks/useAdaptivePolling.ts
 create mode 100644 frontend/src/hooks/useNetworkQuality.ts
 create mode 100644 frontend/src/hooks/useSharableViewState.ts
 create mode 100644 frontend/src/hooks/useWalletHeartbeat.ts

diff --git a/frontend/src/components/HighLatencyBanner.tsx b/frontend/src/components/HighLatencyBanner.tsx
new file mode 100644
index 00000000..0fdeab54
--- /dev/null
+++ b/frontend/src/components/HighLatencyBanner.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { useNetworkQuality, type NetworkQuality } from "../hooks/useNetworkQuality";
+import { AlertTriangle, Clock, Wifi, X } from "./icons";
+
+const CONFIG: Record<NetworkQuality, { color: string; bg: string; label: string; icon: React.ReactNode }> = {
+  fast: { color: "#22c55e", bg: "rgba(34, 197, 94, 0.1)", label: "Fast network", icon: <Wifi size={14} /> },
+  normal: { color: "var(--text-secondary)", bg: "transparent", label: "Normal network", icon: <Wifi size={14} /> },
+  slow: {
+    color: "#eab308",
+    bg: "rgba(234, 179, 8, 0.1)",
+    label: "Slow network — reduced refresh rate",
+    icon: <Clock size={14} />,
+  },
+  degraded: {
+    color: "#ef4444",
+    bg: "rgba(239, 68, 68, 0.1)",
+    label: "Degraded network — data may be stale",
+    icon: <AlertTriangle size={14} />,
+  },
+};
+
+const HighLatencyBanner: React.FC = () => {
+  const { quality, latencyMs, jitterMs } = useNetworkQuality();
+  const [dismissed, setDismissed] = useState(false);
+
+  if (quality === "fast" || quality === "normal" || dismissed) return null;
+
+  const cfg = CONFIG[quality];
+
+  return (
+    <div
+      role="alert"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: "8px 14px",
+        borderRadius: "8px",
+        background: cfg.bg,
+        border: `1px solid ${cfg.color}33`,
+        color: cfg.color,
+        fontSize: "0.8rem",
+        lineHeight: 1.4,
+        marginBottom: "12px",
+        animation: "fade-in 0.3s ease-out",
+      }}
+    >
+      {cfg.icon}
+      <span style={{ flex: 1 }}>
+        {cfg.label}
+        <span style={{ opacity: 0.7, fontSize: "0.72rem", marginLeft: 8 }}>
+          ({latencyMs}ms{quality === "degraded" ? `, jitter ${jitterMs}ms` : ""})
+        </span>
+      </span>
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        aria-label="Dismiss"
+        style={{
+          all: "unset",
+          cursor: "pointer",
+          opacity: 0.6,
+          display: "flex",
+          padding: 2,
+        }}
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+};
+
+export default HighLatencyBanner;
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index 7c2a31c7..ae5cf1c0 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -165,5 +165,85 @@ export const ChartSkeleton: React.FC = () => {
   );
 };
 
+export const SharePriceSkeleton: React.FC = () => (
+  <div style={{ display: "flex", alignItems: "center", gap: "6px" }} aria-hidden="true">
+    <SkeletonCircle width={16} height={16} />
+    <SkeletonText width="80px" lineHeight="1rem" />
+  </div>
+);
+
+export const VaultStatSkeleton: React.FC = () => (
+  <div aria-hidden="true" style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+    <SkeletonText width="60%" lineHeight="0.75rem" />
+    <SkeletonBlock width="120px" height="1.5rem" borderRadius="var(--radius-sm)" />
+  </div>
+);
+
+export const TransactionRowSkeleton: React.FC = () => (
+  <div
+    aria-hidden="true"
+    className="data-table-row"
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 0",
+      gap: "12px",
+    }}
+  >
+    <div style={{ flex: 2 }}>
+      <SkeletonText width="70%" lineHeight="1rem" />
+      <SkeletonText width="40%" lineHeight="0.75rem" style={{ marginTop: "4px" }} />
+    </div>
+    <div style={{ flex: 1, textAlign: "right" }}>
+      <SkeletonBlock width="80px" height="1rem" borderRadius="var(--radius-sm)" />
+    </div>
+    <div style={{ flex: 1, textAlign: "right" }}>
+      <SkeletonBlock width="60px" height="22px" borderRadius="99px" />
+    </div>
+  </div>
+);
+
+export const PortfolioCardSkeleton: React.FC = () => (
+  <div className="glass-panel" style={{ padding: "20px" }} aria-hidden="true">
+    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "16px" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <SkeletonCircle width={32} height={32} />
+        <div>
+          <SkeletonText width="100px" lineHeight="1rem" />
+          <SkeletonText width="60px" lineHeight="0.75rem" style={{ marginTop: "4px" }} />
+        </div>
+      </div>
+      <div style={{ textAlign: "right" }}>
+        <SkeletonText width="80px" lineHeight="1rem" />
+        <SkeletonText width="50px" lineHeight="0.75rem" style={{ marginTop: "4px" }} />
+      </div>
+    </div>
+    <div
+      style={{
+        height: "1px",
+        background: "var(--border-glass)",
+        marginBottom: "12px",
+      }}
+    />
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <SkeletonText width="50%" lineHeight="0.8rem" />
+      <SkeletonText width="30%" lineHeight="0.8rem" />
+    </div>
+  </div>
+);
+
+export const AnalyticsWidgetSkeleton: React.FC = () => (
+  <div className="glass-panel" style={{ padding: "20px" }} aria-hidden="true">
+    <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }}>
+      <SkeletonCircle width={18} height={18} />
+      <SkeletonText width="140px" lineHeight="1rem" />
+    </div>
+    <SkeletonBlock width="100%" height="48px" borderRadius="var(--radius-sm)" style={{ marginBottom: "12px" }} />
+    <SkeletonText width="80%" lineHeight="0.75rem" />
+    <SkeletonText width="50%" lineHeight="0.75rem" style={{ marginTop: "6px" }} />
+  </div>
+);
+
 // Default export for backward compatibility
 export default SkeletonBlock;
diff --git a/frontend/src/components/WalletConnect.tsx b/frontend/src/components/WalletConnect.tsx
index 4740de62..d917eb4a 100644
--- a/frontend/src/components/WalletConnect.tsx
+++ b/frontend/src/components/WalletConnect.tsx
@@ -22,6 +22,7 @@ import {
   isProviderAvailable,
 } from "../lib/walletSession";
 import WalletReconnectPrompt from "./WalletReconnectPrompt";
+import WalletSessionIndicator from "./WalletSessionIndicator";
 
 const IS_AUTOMATED_TEST =
   typeof process !== "undefined" &&
@@ -233,6 +234,7 @@ const WalletConnect: React.FC<WalletConnectProps> = ({
   if (walletAddress) {
     return (
       <div className="wallet-status flex items-center gap-md">
+        <WalletSessionIndicator walletAddress={walletAddress} />
         <div
           className="glass-panel"
           style={{
diff --git a/frontend/src/components/WalletSessionIndicator.tsx b/frontend/src/components/WalletSessionIndicator.tsx
new file mode 100644
index 00000000..dca948c4
--- /dev/null
+++ b/frontend/src/components/WalletSessionIndicator.tsx
@@ -0,0 +1,156 @@
+import React, { useState, useRef, useCallback } from "react";
+import { useWalletHeartbeat, type HeartbeatState } from "../hooks/useWalletHeartbeat";
+import { RefreshCw, Wifi, WifiOff } from "./icons";
+
+const CONFIG: Record<HeartbeatState, { dot: string; glow: string; labelKey: string }> = {
+  healthy: { dot: "#22c55e", glow: "#22c55e59", labelKey: "wallet.heartbeat.healthy" },
+  degraded: { dot: "#eab308", glow: "#eab30859", labelKey: "wallet.heartbeat.degraded" },
+  unhealthy: { dot: "#ef4444", glow: "#ef444459", labelKey: "wallet.heartbeat.unhealthy" },
+};
+
+function formatLatency(ms: number | null): string {
+  if (ms === null) return "—";
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+interface WalletSessionIndicatorProps {
+  walletAddress: string | null;
+}
+
+const WalletSessionIndicator: React.FC<WalletSessionIndicatorProps> = ({ walletAddress }) => {
+  const { state, latencyMs, lastChecked, consecutiveFailures, refetch } = useWalletHeartbeat(walletAddress);
+  const [show, setShow] = useState(false);
+  const [pos, setPos] = useState<"top" | "bottom">("top");
+  const ref = useRef<HTMLDivElement>(null);
+  const { dot, glow } = CONFIG[state];
+
+  const onEnter = useCallback(() => {
+    if (ref.current) {
+      setPos(ref.current.getBoundingClientRect().top < window.innerHeight / 3 ? "bottom" : "top");
+    }
+    setShow(true);
+  }, []);
+
+  if (!walletAddress) return null;
+
+  return (
+    <>
+      <style>{`
+        @keyframes hb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }
+      `}</style>
+
+      <div
+        ref={ref}
+        style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
+        onMouseEnter={onEnter}
+        onMouseLeave={() => setShow(false)}
+        onFocus={onEnter}
+        onBlur={() => setShow(false)}
+      >
+        <button
+          type="button"
+          onClick={() => void refetch()}
+          aria-label={`Wallet session: ${state}. Latency: ${formatLatency(latencyMs)}`}
+          aria-describedby={show ? "wsi-tooltip" : undefined}
+          style={{
+            all: "unset",
+            cursor: "pointer",
+            width: 10, height: 10,
+            borderRadius: "50%",
+            background: dot,
+            boxShadow: `0 0 0 3px ${glow}`,
+            outline: "revert",
+            outlineOffset: 3,
+            animation: state === "unhealthy" ? "hb-pulse 1.8s ease-in-out infinite"
+                     : state === "degraded" ? "pulseSoft 2.5s ease-in-out infinite"
+                     : "none",
+          }}
+        />
+
+        {show && (
+          <div
+            id="wsi-tooltip"
+            role="tooltip"
+            style={{
+              position: "absolute",
+              ...(pos === "top" ? { bottom: "calc(100% + 10px)" } : { top: "calc(100% + 10px)" }),
+              left: "50%", transform: "translateX(-50%)",
+              minWidth: 200, maxWidth: 260,
+              background: "var(--bg-surface, #1a1a2e)",
+              border: `1px solid ${dot}33`,
+              borderRadius: 8,
+              padding: "10px 14px",
+              fontSize: "0.75rem",
+              color: "var(--text-secondary, #94a3b8)",
+              zIndex: 1000,
+              pointerEvents: "none",
+              whiteSpace: "nowrap",
+            }}
+          >
+            <div style={{ fontWeight: 600, color: dot, marginBottom: 6, fontSize: "0.8rem" }}>
+              {state === "healthy" ? <Wifi size={12} style={{ display: "inline", marginRight: 4 }} /> :
+               state === "unhealthy" ? <WifiOff size={12} style={{ display: "inline", marginRight: 4 }} /> :
+               <RefreshCw size={12} style={{ display: "inline", marginRight: 4 }} />}
+              Wallet {state.charAt(0).toUpperCase() + state.slice(1)}
+            </div>
+
+            <div style={{ lineHeight: 1.4, marginBottom: 4 }}>
+              Latency: {formatLatency(latencyMs)}
+            </div>
+
+            {consecutiveFailures > 0 && (
+              <div style={{ color: "#ef4444", marginBottom: 4 }}>
+                {consecutiveFailures} failed check{consecutiveFailures !== 1 ? "s" : ""}
+              </div>
+            )}
+
+            {state === "unhealthy" && (
+              <div
+                style={{
+                  marginTop: 8,
+                  padding: "6px 8px",
+                  borderRadius: 4,
+                  background: "rgba(239, 68, 68, 0.1)",
+                  color: "#ef4444",
+                  fontSize: "0.7rem",
+                  lineHeight: 1.3,
+                }}
+              >
+                Session may be lost. Open Freighter to reconnect.
+              </div>
+            )}
+
+            {state === "degraded" && (
+              <div
+                style={{
+                  marginTop: 8,
+                  padding: "6px 8px",
+                  borderRadius: 4,
+                  background: "rgba(234, 179, 8, 0.1)",
+                  color: "#eab308",
+                  fontSize: "0.7rem",
+                  lineHeight: 1.3,
+                }}
+              >
+                Wallet responses are slow. Check Freighter connection.
+              </div>
+            )}
+
+            <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 6, fontSize: "0.68rem", opacity: 0.5, marginTop: 6 }}>
+              Last checked {lastChecked ? relativeTime(lastChecked) : "never"}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+function relativeTime(date: Date): string {
+  const s = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (s < 5) return "just now";
+  if (s < 60) return `${s}s ago`;
+  return `${Math.floor(s / 60)}m ago`;
+}
+
+export default WalletSessionIndicator;
diff --git a/frontend/src/components/icons.ts b/frontend/src/components/icons.ts
index 4a28a049..83837286 100644
--- a/frontend/src/components/icons.ts
+++ b/frontend/src/components/icons.ts
@@ -16,11 +16,14 @@ export {
   MessageCircle,
   Moon,
   Printer,
+  RefreshCw,
   ShieldCheck,
   Sun,
   TrendingUp,
   Twitter,
   Wallet,
+  Wifi,
+  WifiOff,
   X,
   DollarSign,
   Percent,
diff --git a/frontend/src/hooks/useAdaptivePolling.ts b/frontend/src/hooks/useAdaptivePolling.ts
new file mode 100644
index 00000000..2f994ee8
--- /dev/null
+++ b/frontend/src/hooks/useAdaptivePolling.ts
@@ -0,0 +1,59 @@
+import { useCallback } from "react";
+import { usePolling } from "./usePolling";
+import { useNetworkQuality, getAdaptiveInterval } from "./useNetworkQuality";
+
+interface UseAdaptivePollingOptions {
+  baseInterval: number;
+  enabled?: boolean;
+  pauseOnHidden?: boolean;
+  pauseOnOffline?: boolean;
+  adaptive?: boolean;
+}
+
+interface UseAdaptivePollingResult {
+  isPolling: boolean;
+  isPaused: boolean;
+  pauseReason: "hidden" | "offline" | "manual" | null;
+  pause: () => void;
+  resume: () => void;
+  forceRefresh: () => void;
+  effectiveInterval: number;
+  quality: ReturnType<typeof useNetworkQuality>["quality"];
+}
+
+export function useAdaptivePolling(
+  refetchFn: () => Promise<unknown>,
+  options: UseAdaptivePollingOptions,
+): UseAdaptivePollingResult {
+  const {
+    baseInterval,
+    enabled = true,
+    pauseOnHidden = true,
+    pauseOnOffline = true,
+    adaptive = true,
+  } = options;
+
+  const { quality } = useNetworkQuality({ enabled: adaptive && enabled });
+
+  const effectiveInterval = adaptive
+    ? getAdaptiveInterval(baseInterval, quality)
+    : baseInterval;
+
+  const polling = usePolling(refetchFn, {
+    interval: effectiveInterval,
+    enabled,
+    pauseOnHidden,
+    pauseOnOffline,
+  });
+
+  const forceRefresh = useCallback(() => {
+    polling.forceRefresh();
+  }, [polling]);
+
+  return {
+    ...polling,
+    forceRefresh,
+    effectiveInterval,
+    quality,
+  };
+}
diff --git a/frontend/src/hooks/useNetworkQuality.ts b/frontend/src/hooks/useNetworkQuality.ts
new file mode 100644
index 00000000..238c952b
--- /dev/null
+++ b/frontend/src/hooks/useNetworkQuality.ts
@@ -0,0 +1,118 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+export type NetworkQuality = "fast" | "normal" | "slow" | "degraded";
+
+export interface NetworkQualityInfo {
+  quality: NetworkQuality;
+  latencyMs: number;
+  jitterMs: number;
+  sampleCount: number;
+}
+
+const SAMPLE_INTERVAL_MS = 30_000;
+const WINDOW_SIZE = 5;
+const FAST_THRESHOLD = 200;
+const NORMAL_THRESHOLD = 800;
+const SLOW_THRESHOLD = 2000;
+
+const PROBE_URL = window.location.origin + "/health";
+const PROBE_TIMEOUT_MS = 5_000;
+
+function classifyLatency(avg: number): NetworkQuality {
+  if (avg < FAST_THRESHOLD) return "fast";
+  if (avg < NORMAL_THRESHOLD) return "normal";
+  if (avg < SLOW_THRESHOLD) return "slow";
+  return "degraded";
+}
+
+export function useNetworkQuality(options?: {
+  probeUrl?: string;
+  intervalMs?: number;
+  enabled?: boolean;
+}): NetworkQualityInfo & { refetch: () => void } {
+  const {
+    probeUrl = PROBE_URL,
+    intervalMs = SAMPLE_INTERVAL_MS,
+    enabled = true,
+  } = options ?? {};
+
+  const [quality, setQuality] = useState<NetworkQuality>("normal");
+  const [latencyMs, setLatencyMs] = useState(0);
+  const [jitterMs, setJitterMs] = useState(0);
+  const [sampleCount, setSampleCount] = useState(0);
+  const samplesRef = useRef<number[]>([]);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const measure = useCallback(async () => {
+    if (!enabled) return;
+
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    const start = performance.now();
+
+    try {
+      await fetch(probeUrl, {
+        method: "HEAD",
+        signal: AbortSignal.any([
+          abortRef.current.signal,
+          AbortSignal.timeout(PROBE_TIMEOUT_MS),
+        ]),
+        cache: "no-store",
+      });
+
+      const elapsed = performance.now() - start;
+      const samples = samplesRef.current;
+
+      samples.push(elapsed);
+      if (samples.length > WINDOW_SIZE) samples.shift();
+
+      const avg = samples.reduce((a, b) => a + b, 0) / samples.length;
+      const jitter = samples.length > 1
+        ? Math.abs(samples[samples.length - 1] - samples[samples.length - 2])
+        : 0;
+
+      setLatencyMs(Math.round(avg));
+      setJitterMs(Math.round(jitter));
+      setSampleCount(samples.length);
+      setQuality(classifyLatency(avg));
+    } catch {
+      const samples = samplesRef.current;
+      samples.push(SLOW_THRESHOLD * 2);
+      if (samples.length > WINDOW_SIZE) samples.shift();
+
+      const avg = samples.reduce((a, b) => a + b, 0) / samples.length;
+      setLatencyMs(Math.round(avg));
+      setQuality(classifyLatency(avg));
+      setSampleCount(samples.length);
+    }
+  }, [enabled, probeUrl]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    void measure();
+    const intervalId = window.setInterval(() => void measure(), intervalMs);
+    return () => {
+      window.clearInterval(intervalId);
+      abortRef.current?.abort();
+    };
+  }, [measure, enabled, intervalMs]);
+
+  return { quality, latencyMs, jitterMs, sampleCount, refetch: measure };
+}
+
+export function getAdaptiveInterval(
+  baseInterval: number,
+  quality: NetworkQuality,
+): number {
+  switch (quality) {
+    case "fast":
+      return baseInterval;
+    case "normal":
+      return baseInterval;
+    case "slow":
+      return Math.min(baseInterval * 2, 120_000);
+    case "degraded":
+      return Math.min(baseInterval * 4, 300_000);
+  }
+}
diff --git a/frontend/src/hooks/useSharableViewState.ts b/frontend/src/hooks/useSharableViewState.ts
new file mode 100644
index 00000000..9b1e4858
--- /dev/null
+++ b/frontend/src/hooks/useSharableViewState.ts
@@ -0,0 +1,169 @@
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+
+export type SortDirection = "asc" | "desc";
+
+export interface ViewFilters {
+  [key: string]: string | string[] | undefined;
+}
+
+export interface SharableViewState {
+  page: number;
+  pageSize: number;
+  sortBy: string;
+  sortDirection: SortDirection;
+  search: string;
+  filters: ViewFilters;
+}
+
+interface UseSharableViewStateOptions {
+  defaultPage?: number;
+  defaultPageSize?: number;
+  defaultSortBy?: string;
+  defaultSortDirection?: SortDirection;
+  defaultFilters?: ViewFilters;
+  filterKeys?: string[];
+}
+
+function parseNumeric(raw: string | null, fallback: number): number {
+  if (raw === null) return fallback;
+  const n = Number(raw);
+  return Number.isFinite(n) && n > 0 ? Math.min(n, 100) : fallback;
+}
+
+function serializeFilters(filters: ViewFilters): Record<string, string> {
+  const sorted: Record<string, string> = {};
+  Object.keys(filters)
+    .sort()
+    .forEach((key) => {
+      const val = filters[key];
+      if (val === undefined || val === "") return;
+      if (Array.isArray(val)) {
+        if (val.length > 0) sorted[key] = val.join(",");
+      } else {
+        sorted[key] = val;
+      }
+    });
+  return sorted;
+}
+
+function deserializeFilters(
+  searchParams: URLSearchParams,
+  defaultFilters: ViewFilters,
+  filterKeys?: string[],
+): ViewFilters {
+  const result: ViewFilters = { ...defaultFilters };
+  const keys = filterKeys ?? Object.keys(defaultFilters);
+
+  keys.forEach((key) => {
+    const raw = searchParams.get(key);
+    if (raw === null) return;
+
+    const defaultVal = defaultFilters[key];
+    if (Array.isArray(defaultVal)) {
+      result[key] = raw.split(",").filter(Boolean);
+    } else {
+      result[key] = raw;
+    }
+  });
+
+  return result;
+}
+
+export function useSharableViewState(options: UseSharableViewStateOptions = {}) {
+  const {
+    defaultPage = 1,
+    defaultPageSize = 25,
+    defaultSortBy = "",
+    defaultSortDirection = "asc",
+    defaultFilters = {},
+    filterKeys,
+  } = options;
+
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const state = useMemo<SharableViewState>(() => {
+    const page = parseNumeric(searchParams.get("p"), defaultPage);
+    const pageSize = parseNumeric(searchParams.get("ps"), defaultPageSize);
+    const sortBy = searchParams.get("sb") ?? defaultSortBy;
+    const rawDir = searchParams.get("sd");
+    const sortDirection: SortDirection =
+      rawDir === "asc" || rawDir === "desc" ? rawDir : defaultSortDirection;
+    const search = searchParams.get("q") ?? "";
+    const filters = deserializeFilters(searchParams, defaultFilters, filterKeys);
+
+    return { page, pageSize, sortBy, sortDirection, search, filters };
+  }, [searchParams, defaultPage, defaultPageSize, defaultSortBy, defaultSortDirection, defaultFilters, filterKeys]);
+
+  const setState = useCallback(
+    (updates: Partial<SharableViewState>) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams();
+
+        const merged = { ...state, ...updates };
+
+        if (merged.page !== defaultPage) next.set("p", String(merged.page));
+        if (merged.pageSize !== defaultPageSize) next.set("ps", String(merged.pageSize));
+        if (merged.sortBy) next.set("sb", merged.sortBy);
+        if (merged.sortDirection !== defaultSortDirection) next.set("sd", merged.sortDirection);
+        if (merged.search) next.set("q", merged.search);
+
+        const serialized = serializeFilters(merged.filters);
+        Object.entries(serialized).forEach(([k, v]) => next.set(k, v));
+
+        const params = new URLSearchParams();
+        Array.from(next.entries())
+          .sort(([a], [b]) => a.localeCompare(b))
+          .forEach(([k, v]) => params.set(k, v));
+
+        return params;
+      });
+    },
+    [setSearchParams, state, defaultPage, defaultPageSize, defaultSortBy, defaultSortDirection],
+  );
+
+  const setPage = useCallback((page: number) => setState({ page }), [setState]);
+  const setPageSize = useCallback((pageSize: number) => setState({ pageSize, page: 1 }), [setState]);
+  const setSearch = useCallback((search: string) => setState({ search, page: 1 }), [setState]);
+
+  const setSort = useCallback(
+    (sortBy: string, sortDirection?: SortDirection) => {
+      if (!sortDirection) {
+        sortDirection = state.sortBy === sortBy && state.sortDirection === "asc" ? "desc" : "asc";
+      }
+      setState({ sortBy, sortDirection, page: 1 });
+    },
+    [setState, state.sortBy, state.sortDirection],
+  );
+
+  const setFilters = useCallback(
+    (newFilters: Partial<ViewFilters>) => {
+      setState({ filters: { ...state.filters, ...newFilters }, page: 1 });
+    },
+    [setState, state.filters],
+  );
+
+  const reset = useCallback(() => {
+    setSearchParams(new URLSearchParams());
+  }, [setSearchParams]);
+
+  const getShareableUrl = useCallback((): string => {
+    const params = new URLSearchParams(searchParams);
+    const sorted = Array.from(params.entries())
+      .sort(([a], [b]) => a.localeCompare(b));
+    const base = window.location.origin + window.location.pathname;
+    return sorted.length > 0 ? `${base}?${sorted.map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&")}` : base;
+  }, [searchParams]);
+
+  return {
+    state,
+    setState,
+    setPage,
+    setPageSize,
+    setSearch,
+    setSort,
+    setFilters,
+    reset,
+    getShareableUrl,
+  };
+}
diff --git a/frontend/src/hooks/useWalletHeartbeat.ts b/frontend/src/hooks/useWalletHeartbeat.ts
new file mode 100644
index 00000000..c2068b54
--- /dev/null
+++ b/frontend/src/hooks/useWalletHeartbeat.ts
@@ -0,0 +1,93 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { isConnected } from "@stellar/freighter-api";
+
+export type HeartbeatState = "healthy" | "degraded" | "unhealthy";
+
+export interface WalletHeartbeat {
+  state: HeartbeatState;
+  latencyMs: number | null;
+  lastChecked: Date | null;
+  consecutiveFailures: number;
+}
+
+const HEARTBEAT_INTERVAL_MS = 15_000;
+const DEGRADED_LATENCY_THRESHOLD_MS = 2_000;
+const UNHEALTHY_CONSECUTIVE_FAILURES = 3;
+
+const INITIAL: WalletHeartbeat = {
+  state: "healthy",
+  latencyMs: null,
+  lastChecked: null,
+  consecutiveFailures: 0,
+};
+
+export function useWalletHeartbeat(
+  walletAddress: string | null,
+  intervalMs = HEARTBEAT_INTERVAL_MS,
+): WalletHeartbeat & { refetch: () => void } {
+  const [heartbeat, setHeartbeat] = useState<WalletHeartbeat>(INITIAL);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const check = useCallback(async () => {
+    if (!walletAddress) {
+      setHeartbeat(INITIAL);
+      return;
+    }
+
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    const start = performance.now();
+
+    try {
+      const result = await isConnected();
+      const elapsed = performance.now() - start;
+
+      if (result?.isConnected) {
+        setHeartbeat((prev) => ({
+          state: elapsed > DEGRADED_LATENCY_THRESHOLD_MS ? "degraded" : "healthy",
+          latencyMs: Math.round(elapsed),
+          lastChecked: new Date(),
+          consecutiveFailures: 0,
+        }));
+      } else {
+        setHeartbeat((prev) => {
+          const failures = prev.consecutiveFailures + 1;
+          return {
+            state: failures >= UNHEALTHY_CONSECUTIVE_FAILURES ? "unhealthy" : "degraded",
+            latencyMs: Math.round(elapsed),
+            lastChecked: new Date(),
+            consecutiveFailures: failures,
+          };
+        });
+      }
+    } catch {
+      setHeartbeat((prev) => {
+        const failures = prev.consecutiveFailures + 1;
+        return {
+          state: failures >= UNHEALTHY_CONSECUTIVE_FAILURES ? "unhealthy" : "degraded",
+          latencyMs: null,
+          lastChecked: new Date(),
+          consecutiveFailures: failures,
+        };
+      });
+    }
+  }, [walletAddress]);
+
+  useEffect(() => {
+    if (!walletAddress) {
+      setHeartbeat(INITIAL);
+      return;
+    }
+
+    void check();
+    const intervalId = window.setInterval(() => void check(), intervalMs);
+
+    return () => {
+      window.clearInterval(intervalId);
+      abortRef.current?.abort();
+    };
+  }, [check, intervalMs, walletAddress]);
+
+  return { ...heartbeat, refetch: check };
+}
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 1c5ab413..89efa27f 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -51,6 +51,11 @@ export const en = {
       checkingStatus: "Looking for an existing Freighter session on this device",
       errorStatus: "Connection failed - try again or check Freighter",
     },
+    heartbeat: {
+      healthy: "Wallet session healthy",
+      degraded: "Wallet session degraded",
+      unhealthy: "Wallet session unhealthy",
+    },
   },
   toast: {
     walletConnected: {
@@ -459,6 +464,12 @@ export const en = {
     searchPlaceholder: "Search asset, vault, issuer...",
     tableCaption: "Portfolio holdings",
   },
+  networkQuality: {
+    fast: "Fast network",
+    normal: "Normal network",
+    slow: "Slow network — reduced refresh rate",
+    degraded: "Degraded network — data may be stale",
+  },
   analytics: {
     tag: "Live Analytics",
     title: "Project Analytics",
diff --git a/frontend/src/i18n/locales/es.ts b/frontend/src/i18n/locales/es.ts
index 719ee730..64a30552 100644
--- a/frontend/src/i18n/locales/es.ts
+++ b/frontend/src/i18n/locales/es.ts
@@ -51,6 +51,11 @@ export const es = {
       checkingStatus: "Buscando una sesión existente de Freighter en este dispositivo",
       errorStatus: "Conexión fallida - intenta de nuevo o verifica Freighter",
     },
+    heartbeat: {
+      healthy: "Sesión de billetera saludable",
+      degraded: "Sesión de billetera degradada",
+      unhealthy: "Sesión de billetera no saludable",
+    },
   },
   toast: {
     walletConnected: {
@@ -445,6 +450,12 @@ export const es = {
     searchPlaceholder: "Buscar activo, bóveda, emisor...",
     tableCaption: "Posiciones del portafolio",
   },
+  networkQuality: {
+    fast: "Red rápida",
+    normal: "Red normal",
+    slow: "Red lenta — frecuencia de actualización reducida",
+    degraded: "Red degradada — los datos pueden estar desactualizados",
+  },
   analytics: {
     tag: "Analítica en vivo",
     title: "Analítica del proyecto",

From 53e8a6c837d5498f53151801f267038277091308 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 25 Jun 2026 21:55:11 +0100
Subject: [PATCH 2/2] fix: remove duplicate imports and function declarations
 in VaultDashboard.tsx

- Removed duplicate confetti import
- Removed duplicate resetWizard and goToReview function declarations
- Removed unused clearVaultFormDraft import
---
 frontend/src/components/VaultDashboard.tsx | 30 +---------------------
 1 file changed, 1 insertion(+), 29 deletions(-)

diff --git a/frontend/src/components/VaultDashboard.tsx b/frontend/src/components/VaultDashboard.tsx
index 5cdaf496..7ff2fde0 100644
--- a/frontend/src/components/VaultDashboard.tsx
+++ b/frontend/src/components/VaultDashboard.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import confetti from "canvas-confetti";
 import {
   Activity,
   AlertCircle,
@@ -45,10 +44,7 @@ import { useOfflineRetryCountdown } from "../hooks/useOfflineRetryCountdown";
 import { useFormFocusFlow } from "../hooks/useFormFocusFlow";
 import { useStaleSubmissionGuard } from "../hooks/useStaleSubmissionGuard";
 import { useTransactionIntent } from "../hooks/useTransactionIntent";
-import {
-  clearVaultFormDraft,
-  saveVaultFormDraft,
-} from "../lib/formDraftStorage";
+import { saveVaultFormDraft } from "../lib/formDraftStorage";
 import { buildDepositSummary, buildWithdrawalSummary } from "../lib/transactionConfirmationBuilder";
 import confetti from "canvas-confetti";
 import TransactionConflictResolver from "./TransactionConflictResolver";
@@ -290,30 +286,6 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [amount]);
 
-  const resetWizard = () => {
-    setValues({ amount: "" });
-    dashboardUrl.setStep("amount");
-    dashboardUrl.setAmount("");
-    setTransactionResult(null);
-    clearVaultFormDraft();
-  };
-
-  const goToReview = () => {
-    if (Object.keys(errors).length > 0) {
-      toast.warning({
-        title: "Please fix validation errors",
-        description: errors.amount || "Please enter a valid amount",
-      });
-      formFocus.focusFirstError();
-      return;
-    }
-
-    dashboardUrl.setStep("review");
-    window.setTimeout(() => {
-      document.getElementById(`vault-${activeTab}-confirm`)?.focus();
-    }, 0);
-  };
-
   useEffect(() => {
     const handleDeposit = () => {
       dashboardUrl.setTab("deposit");