feat(frontend): Freighter auto-reconnect and wallet session UX (#250)

- Auto-discover Freighter on load with bounded retries; respect manual disconnect via sessionStorage
- Shorter poll interval in automated tests; skip blocking reconnect UI in test env
- Stabilize App wallet handlers with useCallback for effect dependencies
- Add i18n strings for wallet checking state (en/es)
- Repair VaultDashboard deposit/withdraw form structure; restore cap context wiring
- TypeScript and Zod v4 schema fixes for production build; misc test/lint cleanups

Closes #250

Made-with: Cursor

Author: Senior Engineer

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { lazy, Suspense, useState } from "react";
+import { lazy, Suspense, useCallback, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import Navbar from "./components/Navbar";
@@ -53,13 +53,13 @@ function AppContent() {
   const [walletAddress, setWalletAddress] = useState<string | null>(null);
   const { data: usdcBalance = 0 } = useUsdcBalance(walletAddress);
 
-  const handleConnect = (address: string) => {
+  const handleConnect = useCallback((address: string) => {
     setWalletAddress(address);
-  };
+  }, []);
 
-  const handleDisconnect = () => {
+  const handleDisconnect = useCallback(() => {
     setWalletAddress(null);
-  };
+  }, []);
 
 
   return (
@@ -89,10 +89,7 @@ function AppContent() {
               <Route
                 path="/portfolio"
                 element={
-                  <Portfolio
-                    walletAddress={walletAddress}
-                    usdcBalance={usdcBalance}
-                  />
+                  <Portfolio walletAddress={walletAddress} />
                 }
               />
               <Route

frontend/src/components/Navbar.test.tsx

@@ -8,16 +8,12 @@ import { MemoryRouter } from 'react-router-dom';
 describe('Navbar', () => {
     const mockOnConnect = vi.fn();
     const mockOnDisconnect = vi.fn();
-    const mockOnNavigate = vi.fn();
-
     it('renders the navbar with navigation links', () => {
         render(
             <MemoryRouter>
                 <ToastProvider>
                     <ThemeProvider>
                         <Navbar
-                            currentPath="/"
-                            onNavigate={mockOnNavigate}
                             walletAddress={null}
                             onConnect={mockOnConnect}
                             onDisconnect={mockOnDisconnect}
@@ -34,14 +30,12 @@ describe('Navbar', () => {
         expect(screen.getByText('Portfolio')).toBeInTheDocument();
     });
 
-    it('renders the wallet connect button', () => {
+    it('renders the wallet connect button', async () => {
         render(
             <MemoryRouter>
                 <ToastProvider>
                     <ThemeProvider>
                         <Navbar
-                            currentPath="/"
-                            onNavigate={mockOnNavigate}
                             walletAddress={null}
                             onConnect={mockOnConnect}
                             onDisconnect={mockOnDisconnect}
@@ -51,7 +45,7 @@ describe('Navbar', () => {
             </MemoryRouter>
         );
 
-        expect(screen.getByText(/Connect Freighter/i)).toBeInTheDocument();
+        expect(await screen.findByText(/Connect Freighter/i)).toBeInTheDocument();
     });
 
     it('shows the truncated wallet address when connected', () => {
@@ -62,8 +56,6 @@ describe('Navbar', () => {
                 <ToastProvider>
                     <ThemeProvider>
                         <Navbar
-                            currentPath="/portfolio"
-                            onNavigate={mockOnNavigate}
                             walletAddress={fullAddress}
                             onConnect={mockOnConnect}
                             onDisconnect={mockOnDisconnect}

frontend/src/components/Navbar.tsx

@@ -5,8 +5,6 @@ import { Layers } from './icons';
 import { useTranslation } from '../i18n';
 
 interface NavbarProps {
-    currentPath: '/' | '/analytics' | '/portfolio';
-    onNavigate: (path: '/' | '/analytics' | '/portfolio') => void;
     walletAddress: string | null;
     usdcBalance?: number;
     onConnect: (address: string) => void;

frontend/src/components/PageHeader.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { ChevronRight } from "./icons";
-import Badge, { BadgeColor } from "./Badge";
-import { usePageHeadingFocus } from "../hooks/usePageHeadingFocus";
 import Badge from "./Badge";
 import type { BadgeColor } from "./Badge";
+import { usePageHeadingFocus } from "../hooks/usePageHeadingFocus";
 
 export interface Breadcrumb {
   label: string;

frontend/src/components/VaultDashboard.test.tsx

@@ -182,6 +182,8 @@ describe("VaultDashboard", () => {
     await waitFor(() => {
       expect(screen.getByRole("alert")).toHaveTextContent("Data unavailable");
     }, { timeout: 3000 });
-    expect(screen.getByRole("alert")).toHaveTextContent("Failed to load vault data");
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "We could not reach the server. Check your connection and try again.",
+    );
   });
 });

frontend/src/components/VaultDashboard.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Activity, ShieldCheck, TrendingUp, Wallet as WalletIcon, AlertTriangle, Info } from "./icons";
-import { useState, useEffect } from "react";
-import { Activity, ShieldCheck, TrendingUp, Wallet as WalletIcon, Loader2 } from "./icons";
-import { hasCustomRpcConfig, networkConfig } from "../config/network";
 import { useVault } from "../context/VaultContext";
 import ApiStatusBanner from "./ApiStatusBanner";
 import VaultPerformanceChart from "./VaultPerformanceChart";
@@ -11,9 +8,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 import { FormField, SubmitButton } from "../forms";
 import CopyButton from "./CopyButton";
 import { useDepositMutation, useWithdrawMutation } from "../hooks/useVaultMutations";
-import TransactionStatus, { type ActionStatus } from "./TransactionStatus";
-import { useDepositMutation, useWithdrawMutation } from "../hooks/useVaultMutations";
-import CopyButton from "./CopyButton";
 
 interface VaultDashboardProps {
   walletAddress: string | null;
@@ -51,23 +45,20 @@ const VaultCapWarning: React.FC<{ utilization: number; isReached: boolean }> = (
   );
 };
 
-function buildFakeTxHash(walletAddress: string, action: "deposit" | "withdraw", amount: number): string {
-  const seed = `${walletAddress}-${action}-${amount.toFixed(2)}-${Date.now()}`;
-  let hash = "";
-  for (let i = 0; i < 64; i += 1) {
-    const code = seed.charCodeAt(i % seed.length);
-    hash += ((code + i * 13) % 16).toString(16);
-  }
-  return hash;
-}
-
-const STATUS_VISIBLE_MS = 12000;
-
 const VaultDashboard: React.FC<VaultDashboardProps> = ({
   walletAddress,
   usdcBalance = 0,
 }) => {
-  const { formattedTvl, formattedApy, summary, error, isLoading } = useVault();
+  const {
+    formattedTvl,
+    formattedApy,
+    summary,
+    error,
+    isLoading,
+    utilization,
+    isCapWarning,
+    isCapReached,
+  } = useVault();
   const toast = useToast();
   const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit");
   const [amount, setAmount] = useState("");
@@ -87,11 +78,7 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
     return () => window.removeEventListener('TRIGGER_DEPOSIT', handleTrigger);
   }, []);
 
-  const isProcessing = depositMutation.isPending
-    ? "deposit"
-    : withdrawMutation.isPending
-      ? "withdraw"
-      : null;
+  const isBusy = depositMutation.isPending || withdrawMutation.isPending;
 
   const availableBalance = walletAddress ? usdcBalance : 0;
   const strategy = summary.strategy;
@@ -302,67 +289,38 @@ const VaultDashboard: React.FC<VaultDashboardProps> = ({
                         onClick={() => setAmount(availableBalance.toFixed(2))}
                         disabled={!walletAddress || availableBalance <= 0 || isBusy || (tab === "deposit" && isCapReached)}
                       >
-                <div style={{ marginBottom: "24px" }}>
-                  <div className="flex justify-between items-center" style={{ marginBottom: "16px" }}>
-                    <div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>
-                      {tab === "deposit" ? "Amount to deposit" : "Amount to withdraw"}
-                    </div>
-                    <div style={{ color: "var(--text-secondary)", fontSize: "0.85rem" }}>
-                      Balance: <span style={{ color: "var(--text-primary)", fontWeight: 600 }}>{availableBalance.toFixed(2)}</span>
-                    </div>
-                  </div>
-
-                  <div className="input-group">
-                    <div className="input-wrapper">
-                      <span style={{ color: "var(--text-secondary)", paddingRight: "12px", borderRight: "1px solid var(--border-glass)", marginRight: "16px" }}>USDC</span>
-                      <input className="input-field" type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} disabled={isProcessing !== null} />
-                      <button className="btn-max" onClick={() => setAmount(availableBalance.toFixed(2))} disabled={!walletAddress || availableBalance <= 0 || isProcessing !== null}>
                         MAX
                       </button>
                     </div>
-                  </div>
 
-                  <SubmitButton
-                    loading={isBusy && activeTab === tab}
-                    disabled={!walletAddress || isBusy || !amount || Number(amount) <= 0 || (tab === "deposit" && isCapReached)}
-                    label={tab === "deposit" ? (isCapReached ? "Vault is full" : "Approve & Deposit") : "Withdraw Funds"}
-                    loadingLabel="Waiting for confirmation..."
-                  />
-                </form>
-                </div>
+                    <div className="glass-panel" style={{ padding: "14px 16px", background: "rgba(0, 0, 0, 0.15)", marginBottom: "16px" }}>
+                      <div className="flex justify-between items-center" style={{ marginBottom: "6px" }}>
+                        <span style={{ color: "var(--text-secondary)", fontSize: "0.86rem" }}>Estimated protocol fee</span>
+                        <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
+                          {isValidAmount ? `${estimatedFee.toFixed(4)} USDC` : "0.0000 USDC"}
+                        </span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span style={{ color: "var(--text-secondary)", fontSize: "0.82rem" }}>
+                          {tab === "deposit" ? "Estimated net deposit" : "Estimated net withdrawal"}
+                        </span>
+                        <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
+                          {isValidAmount ? `${estimatedNetAmount.toFixed(4)} USDC` : "0.0000 USDC"}
+                        </span>
+                      </div>
+                      <div style={{ marginTop: "6px", color: "var(--text-secondary)", fontSize: "0.75rem" }}>
+                        Network fee: {summary.networkFeeEstimate}
+                      </div>
+                    </div>
 
-                <div className="glass-panel" style={{ padding: "14px 16px", background: "rgba(0, 0, 0, 0.15)", marginBottom: "16px" }}>
-                  <div className="flex justify-between items-center" style={{ marginBottom: "6px" }}>
-                    <span style={{ color: "var(--text-secondary)", fontSize: "0.86rem" }}>Estimated protocol fee</span>
-                    <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
-                      {isValidAmount ? `${estimatedFee.toFixed(4)} USDC` : "0.0000 USDC"}
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span style={{ color: "var(--text-secondary)", fontSize: "0.82rem" }}>
-                      {tab === "deposit" ? "Estimated net deposit" : "Estimated net withdrawal"}
-                    </span>
-                    <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
-                      {isValidAmount ? `${estimatedNetAmount.toFixed(4)} USDC` : "0.0000 USDC"}
-                    </span>
-                  </div>
-                  <div style={{ marginTop: "6px", color: "var(--text-secondary)", fontSize: "0.75rem" }}>
-                    Network fee: {summary.networkFeeEstimate}
+                    <SubmitButton
+                      loading={isBusy && activeTab === tab}
+                      disabled={!walletAddress || isBusy || !amount || Number(amount) <= 0 || (tab === "deposit" && isCapReached)}
+                      label={tab === "deposit" ? (isCapReached ? "Vault is full" : "Approve & Deposit") : "Withdraw Funds"}
+                      loadingLabel="Processing Transaction..."
+                    />
                   </div>
-                </div>
-
-                <button className="btn btn-primary" style={{ width: "100%", padding: "16px" }} onClick={() => handleTransaction(tab)} disabled={isProcessing !== null || !amount || Number(amount) <= 0}>
-                  {isProcessing === tab ? "Processing Transaction..." : tab === "deposit" ? "Approve & Deposit" : "Withdraw Funds"}
-                <button className="btn btn-primary" style={{ width: "100%", padding: "16px", display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }} onClick={() => handleTransaction(tab)} disabled={isProcessing !== null || !amount || Number(amount) <= 0}>
-                  {isProcessing === tab ? (
-                    <>
-                      <Loader2 size={16} className="spin" style={{ animation: "spin 0.9s linear infinite" }} />
-                      Processing Transaction...
-                    </>
-                  ) : (
-                    tab === "deposit" ? "Approve & Deposit" : "Withdraw Funds"
-                  )}
-                </button>
+                </form>
               </TabsContent>
             ))}
           </Tabs>

frontend/src/components/VaultPerformanceChart.tsx

@@ -3,7 +3,7 @@ import { TrendingUp } from "./icons";
 import { useVaultHistory } from "../hooks/useVaultData";
 
 const VaultPerformanceChart: React.FC = () => {
-  const { data = [] } = useVaultHistory();
+  useVaultHistory();
 
   return (
     <div style={{ width: "100%" }}>