From 19e5b7ce1cf1b5eb9b4e428f8ed8374ab1171154 Mon Sep 17 00:00:00 2001
From: Topmatrix Mor <Topmatrixmor2014@gmail.com>
Date: Tue, 21 Jul 2026 01:31:52 +0000
Subject: [PATCH] feat(wallet): integrate @stellar/freighter-api with network
 switching & connection management (#21)

- Add comprehensive useWallet hook with connect/disconnect/network detection
- Enhance ConnectButton with loading spinner and error states
- Enhance WalletButton with network display, chevron, and i18n props
- Refactor Navbar to use useWallet, removing local connection state
- Create reusable DashboardSidebar component (replaces 4 page duplicates)
- Add Wallet i18n keys for en/es locales
- Ensure CI passes: lint, typecheck, and build all green
---
 components/atoms/connect-button/index.tsx     |  57 +++++-
 .../atoms/connect-button/style.module.css     |  60 ++++++-
 components/atoms/wallet-button/index.tsx      | 115 +++++++++---
 .../molecules/dashboard-sidebar/index.tsx     |  95 ++++++++++
 components/molecules/index.tsx                |   1 +
 components/molecules/wallet-data/index.tsx    |  18 +-
 components/organisms/navbar/index.tsx         |  58 +++++--
 hooks/index.ts                                |   7 +-
 hooks/useAccount.ts                           |  43 ++---
 hooks/useWallet.ts                            | 163 ++++++++++++++++++
 messages/en.json                              |  10 ++
 messages/es.json                              |  10 ++
 pages/dashboard.tsx                           |  62 +------
 pages/dashboard/disputes.tsx                  |  33 +---
 pages/dashboard/profile.tsx                   |  33 +---
 pages/dashboard/settings.tsx                  |  33 +---
 16 files changed, 568 insertions(+), 230 deletions(-)
 create mode 100644 components/molecules/dashboard-sidebar/index.tsx
 create mode 100644 hooks/useWallet.ts

diff --git a/components/atoms/connect-button/index.tsx b/components/atoms/connect-button/index.tsx
index eb8bfa1..6453618 100644
--- a/components/atoms/connect-button/index.tsx
+++ b/components/atoms/connect-button/index.tsx
@@ -1,20 +1,59 @@
-import React from 'react'
+import { useState } from 'react'
 import { setAllowed } from '@stellar/freighter-api'
 import styles from './style.module.css'
 
 export interface ConnectButtonProps {
   label: string
   isHigher?: boolean
+  /** Called after a successful setAllowed + wallet connection is detected */
+  onConnect?: () => void
 }
 
-export function ConnectButton({ label, isHigher }: ConnectButtonProps) {
+/**
+ * Renders a "Connect Wallet" button that triggers the Freighter permission flow.
+ *
+ * - Shows a loading spinner while the connection is in progress
+ * - Displays inline error text if the connection fails
+ * - Fires `onConnect` so parents can refresh state after a successful connect
+ */
+export function ConnectButton({ label, isHigher, onConnect }: ConnectButtonProps) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleClick() {
+    setLoading(true)
+    setError(null)
+    try {
+      await setAllowed()
+      onConnect?.()
+    } catch (err) {
+      const msg =
+        err instanceof Error ? err.message : 'Failed to connect wallet'
+      setError(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
-    <button
-      className={styles.button}
-      style={{ height: isHigher ? 50 : 38 }}
-      onClick={setAllowed}
-    >
-      {label}
-    </button>
+    <div className={styles.wrapper}>
+      <button
+        className={`${styles.button} ${loading ? styles.loading : ''}`}
+        style={{ height: isHigher ? 50 : 38, minWidth: isHigher ? 240 : undefined }}
+        onClick={handleClick}
+        disabled={loading}
+        aria-busy={loading}
+      >
+        {loading ? (
+          <span className={styles.spinner} aria-hidden="true" />
+        ) : null}
+        <span>{loading ? 'Connecting…' : label}</span>
+      </button>
+      {error && (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      )}
+    </div>
   )
 }
diff --git a/components/atoms/connect-button/style.module.css b/components/atoms/connect-button/style.module.css
index fb19c15..f17b660 100644
--- a/components/atoms/connect-button/style.module.css
+++ b/components/atoms/connect-button/style.module.css
@@ -1,3 +1,10 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
 .button {
   display: flex;
   flex-direction: row;
@@ -14,8 +21,55 @@
   line-height: 22px;
   color: #ffffff;
   cursor: pointer;
+  transition: background 0.15s, opacity 0.15s, transform 0.12s;
+}
+
+.button:hover:not(:disabled) {
+  background: #2d2440;
+  transform: translateY(-1px);
+}
+
+.button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
-.higher {
-    height: 58px;
-}
\ No newline at end of file
+.button.loading {
+  opacity: 0.85;
+}
+
+
+
+/* ── Spinner ────────────────────────────────────── */
+
+.spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Error ──────────────────────────────────────── */
+
+.error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #ef4444;
+  text-align: center;
+  max-width: 240px;
+}
diff --git a/components/atoms/wallet-button/index.tsx b/components/atoms/wallet-button/index.tsx
index 0251c09..e7515ae 100644
--- a/components/atoms/wallet-button/index.tsx
+++ b/components/atoms/wallet-button/index.tsx
@@ -1,41 +1,61 @@
-import { useState, useRef, useEffect } from 'react';
-import { setAllowed } from '@stellar/freighter-api';
+import { useState, useRef, useEffect } from 'react'
+import { setAllowed } from '@stellar/freighter-api'
 
 interface WalletButtonProps {
-  address: string;
-  onDisconnect: () => void;
+  address: string
+  /** The Stellar network name, e.g. "Test SDF Network ; September 2015" */
+  network?: string | null
+  /** Called when the user clicks "Disconnect" in the dropdown */
+  onDisconnect: () => void
+  /** Label for the switch-account menu item */
+  switchAccountLabel?: string
+  /** Label for the disconnect menu item */
+  disconnectLabel?: string
 }
 
 /**
- * Shows the connected wallet address and a dropdown with options to switch
- * accounts or disconnect. Clicking outside closes the menu.
+ * Shows the connected wallet address and a dropdown with:
+ * - Current network indicator
+ * - Switch account (re-opens Freighter permission popup)
+ * - Disconnect (clears local connection state)
+ *
+ * Clicking outside closes the dropdown.
  */
-export function WalletButton({ address, onDisconnect }: WalletButtonProps) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+export function WalletButton({
+  address,
+  network,
+  onDisconnect,
+  switchAccountLabel = 'Switch account',
+  disconnectLabel = 'Disconnect',
+}: WalletButtonProps) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false);
+        setOpen(false)
       }
     }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
 
-  const displayName = `${address.slice(0, 4)}...${address.slice(-4)}`;
+  const displayName = `${address.slice(0, 4)}...${address.slice(-4)}`
+
+  // Derive a short, human-readable network label
+  const networkLabel = deriveNetworkLabel(network)
 
   function handleSwap() {
-    setOpen(false);
+    setOpen(false)
     // Re-invoking setAllowed opens the Freighter permission popup so the user
     // can approve a different profile without disconnecting first.
-    void setAllowed();
+    void setAllowed()
   }
 
   function handleDisconnect() {
-    setOpen(false);
-    onDisconnect();
+    setOpen(false)
+    onDisconnect()
   }
 
   return (
@@ -46,31 +66,80 @@ export function WalletButton({ address, onDisconnect }: WalletButtonProps) {
         aria-haspopup="true"
         className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
       >
-        <span className="w-2 h-2 rounded-full bg-green-500" aria-hidden="true" />
+        {/* Connection indicator */}
+        <span
+          className="w-2 h-2 rounded-full bg-green-500"
+          aria-hidden="true"
+          title="Connected"
+        />
         {displayName}
+        {/* Chevron */}
+        <svg
+          className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform ${
+            open ? 'rotate-180' : ''
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
       </button>
 
       {open && (
         <div
           role="menu"
-          className="absolute right-0 mt-1 w-44 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg py-1 z-50"
+          className="absolute right-0 mt-1 w-56 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg py-1 z-50"
         >
+          {/* Network badge */}
+          {networkLabel && (
+            <div className="px-3 py-2 border-b border-gray-100 dark:border-gray-800">
+              <div className="flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-400 flex-shrink-0" />
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  {networkLabel}
+                </span>
+              </div>
+            </div>
+          )}
+
           <button
             role="menuitem"
             onClick={handleSwap}
             className="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
           >
-            Switch account
+            {switchAccountLabel}
           </button>
+
           <button
             role="menuitem"
             onClick={handleDisconnect}
             className="w-full text-left px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
           >
-            Disconnect
+            {disconnectLabel}
           </button>
         </div>
       )}
     </div>
-  );
+  )
+}
+
+// ── Helpers ────────────────────────────────────────────────────
+
+/** Derive a short display label from the network passphrase or name. */
+function deriveNetworkLabel(
+  network: string | null | undefined,
+): string | null {
+  if (!network) return null
+  if (network.includes('Test')) return 'Testnet'
+  if (network.includes('Future')) return 'Futurenet'
+  if (network.includes('Public')) return 'Mainnet'
+  // Fallback: return the first segment
+  return network.split(';')[0]?.trim() || network
 }
diff --git a/components/molecules/dashboard-sidebar/index.tsx b/components/molecules/dashboard-sidebar/index.tsx
new file mode 100644
index 0000000..ecc3677
--- /dev/null
+++ b/components/molecules/dashboard-sidebar/index.tsx
@@ -0,0 +1,95 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useAccount } from '../../../hooks'
+
+interface NavItem {
+  label: string
+  href: string
+  icon: string
+  description: string
+}
+
+interface DashboardSidebarProps {
+  items: NavItem[]
+  open: boolean
+  onClose: () => void
+}
+
+/**
+ * Shared sidebar used by all dashboard sub-pages.
+ *
+ * Renders navigation links and a connected-wallet info card at the bottom
+ * driven by the Freighter `useAccount` hook.
+ */
+export function DashboardSidebar({ items, open, onClose }: DashboardSidebarProps) {
+  const router = useRouter()
+  const account = useAccount()
+
+  const isActive = (href: string) => router.pathname === href
+
+  return (
+    <>
+      {/* Mobile backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      <aside
+        className={`
+          fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transition-transform duration-300
+          ${open ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+        `}
+      >
+        <nav className="p-4 space-y-1">
+          {items.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onClose}
+              className={`
+                flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors group
+                ${
+                  isActive(item.href)
+                    ? 'bg-indigo-50 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300'
+                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                }
+              `}
+            >
+              <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-sm">{item.label}</div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">
+                  {item.description}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </nav>
+
+        {/* Wallet info section */}
+        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800">
+          <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
+            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+              Connected Wallet
+            </div>
+            {account ? (
+              <div className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
+                <span className="text-sm font-mono text-gray-900 dark:text-gray-100 truncate">
+                  {account.displayName}
+                </span>
+              </div>
+            ) : (
+              <div className="text-sm text-gray-400 dark:text-gray-500 italic">
+                Not connected
+              </div>
+            )}
+          </div>
+        </div>
+      </aside>
+    </>
+  )
+}
diff --git a/components/molecules/index.tsx b/components/molecules/index.tsx
index 8ad6fde..90305eb 100644
--- a/components/molecules/index.tsx
+++ b/components/molecules/index.tsx
@@ -4,3 +4,4 @@ export * from './wallet-data'
 export * from './deposits'
 export * from './usd-converter'
 export * from './file-upload'
+export * from './dashboard-sidebar'
diff --git a/components/molecules/wallet-data/index.tsx b/components/molecules/wallet-data/index.tsx
index 8215735..8aeac00 100644
--- a/components/molecules/wallet-data/index.tsx
+++ b/components/molecules/wallet-data/index.tsx
@@ -1,21 +1,29 @@
 import React from 'react'
-import { useAccount, useIsMounted} from '../../../hooks'
+import { useWallet, useIsMounted } from '../../../hooks'
 import { ConnectButton } from '../../atoms'
 import styles from './style.module.css'
 
-// TODO: Eliminate flash of unconnected content on loading
+/**
+ * Displays connected wallet address and network or a connect button.
+ *
+ * Uses `useWallet` so it picks up network and connection state automatically.
+ */
 export function WalletData() {
   const mounted = useIsMounted()
-  const account = useAccount()
+  const { account, connect } = useWallet()
+
+  if (!mounted) {
+    return <ConnectButton label="Connect Wallet" />
+  }
 
   return (
     <>
-      {mounted && account ? (
+      {account ? (
         <div className={styles.displayData}>
           <div className={styles.card}>{account.displayName}</div>
         </div>
       ) : (
-        <ConnectButton label="Connect Wallet" />
+        <ConnectButton label="Connect Wallet" onConnect={connect} />
       )}
     </>
   )
diff --git a/components/organisms/navbar/index.tsx b/components/organisms/navbar/index.tsx
index bbd89e6..f460b35 100644
--- a/components/organisms/navbar/index.tsx
+++ b/components/organisms/navbar/index.tsx
@@ -6,7 +6,7 @@ import { ThemeToggle } from '../../atoms/theme-toggle';
 import { LocaleSwitcher } from '../../atoms/locale-switcher';
 import { ConnectButton } from '../../atoms/connect-button';
 import { WalletButton } from '../../atoms/wallet-button';
-import { useAccount } from '../../../hooks/useAccount';
+import { useWallet } from '../../../hooks';
 
 const NAV_LINKS = [
   { key: 'home',        href: '/'            },
@@ -20,17 +20,49 @@ export function Navbar() {
   const [open, setOpen] = useState(false);
   const router = useRouter();
   const t = useTranslations('Nav');
-  const account = useAccount();
+  const tw = useTranslations('Wallet');
+  const {
+    account,
+    network,
+    isBusy,
+    error: walletError,
+    connect,
+    disconnect,
+  } = useWallet();
 
-  // useAccount state is driven by Freighter events; clearing it locally is
-  // enough to reflect a disconnect since there is no server-side session.
-  const [disconnected, setDisconnected] = useState(false);
-  const handleDisconnect = useCallback(() => setDisconnected(true), []);
-  const effectiveAccount = disconnected ? null : account;
+  const handleConnect = useCallback(() => {
+    connect();
+  }, [connect]);
+
+  const handleDisconnect = useCallback(() => {
+    disconnect();
+  }, [disconnect]);
 
   const toggle = () => setOpen((v) => !v);
   const close  = () => setOpen(false);
 
+  const walletSection = account ? (
+    <WalletButton
+      address={account.address}
+      network={network?.network}
+      onDisconnect={handleDisconnect}
+      switchAccountLabel={tw('switchAccount')}
+      disconnectLabel={tw('disconnect')}
+    />
+  ) : (
+    <div className="flex flex-col items-center gap-1">
+      <ConnectButton
+        label={t('connectWallet')}
+        onConnect={handleConnect}
+      />
+      {isBusy && !walletError && (
+        <span className="text-xs text-gray-400 dark:text-gray-500">
+          {tw('connecting')}
+        </span>
+      )}
+    </div>
+  );
+
   return (
     <nav className="sticky top-0 z-50 flex items-center justify-between px-6 h-16 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 shadow-sm">
       {/* Brand */}
@@ -60,11 +92,7 @@ export function Navbar() {
       <div className="hidden md:flex items-center gap-3">
         <LocaleSwitcher />
         <ThemeToggle />
-        {effectiveAccount ? (
-          <WalletButton address={effectiveAccount.address} onDisconnect={handleDisconnect} />
-        ) : (
-          <ConnectButton label={t('connectWallet')} />
-        )}
+        {walletSection}
       </div>
 
       {/* Hamburger */}
@@ -102,11 +130,7 @@ export function Navbar() {
           <div className="mt-3 flex items-center gap-3 pt-3 border-t border-gray-100 dark:border-gray-800">
             <LocaleSwitcher />
             <ThemeToggle />
-            {effectiveAccount ? (
-              <WalletButton address={effectiveAccount.address} onDisconnect={handleDisconnect} />
-            ) : (
-              <ConnectButton label={t('connectWallet')} />
-            )}
+            {walletSection}
           </div>
         </div>
       )}
diff --git a/hooks/index.ts b/hooks/index.ts
index 09793c9..b24803c 100644
--- a/hooks/index.ts
+++ b/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from "./useAccount";
+export * from "./useWallet";
 export * from "./useIsMounted";
-export * from './useSubscription';
-export * from './useUSDCPrice';
-export * from './useUserProfile';
+export * from "./useSubscription";
+export * from "./useUSDCPrice";
+export * from "./useUserProfile";
diff --git a/hooks/useAccount.ts b/hooks/useAccount.ts
index 8fb4d1e..a1f878e 100644
--- a/hooks/useAccount.ts
+++ b/hooks/useAccount.ts
@@ -1,37 +1,14 @@
-import { useEffect, useState, useCallback } from "react";
-import { isConnected, getUserInfo } from "@stellar/freighter-api";
+import { useWallet, AccountInfo } from "./useWallet";
 
-export interface AccountInfo {
-  address: string;
-  displayName: string;
-}
+// Re-export AccountInfo for backward compatibility
+export type { AccountInfo };
 
+/**
+ * Convenience hook that returns only the connected account info.
+ *
+ * For full wallet state (network, connect/disconnect, loading/error states)
+ * use {@link useWallet} from `hooks/useWallet` instead.
+ */
 export function useAccount(): AccountInfo | null {
-  const [address, setAddress] = useState<string | null>(null);
-
-  const syncAccount = useCallback(async () => {
-    try {
-      const connected = await isConnected();
-      if (!connected) {
-        setAddress(null);
-        return;
-      }
-      const user = await getUserInfo();
-      setAddress(user?.publicKey ?? null);
-    } catch {
-      setAddress(null);
-    }
-  }, []);
-
-  useEffect(() => {
-    syncAccount();
-    const interval = setInterval(syncAccount, 2000);
-    return () => clearInterval(interval);
-  }, [syncAccount]);
-
-  if (!address) return null;
-  return {
-    address,
-    displayName: `${address.slice(0, 4)}...${address.slice(-4)}`,
-  };
+  return useWallet().account;
 }
diff --git a/hooks/useWallet.ts b/hooks/useWallet.ts
new file mode 100644
index 0000000..5732d4d
--- /dev/null
+++ b/hooks/useWallet.ts
@@ -0,0 +1,163 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+import {
+  isConnected,
+  getUserInfo,
+  getNetworkDetails,
+  isAllowed,
+} from "@stellar/freighter-api";
+
+export interface AccountInfo {
+  address: string;
+  displayName: string;
+}
+
+export interface NetworkInfo {
+  network: string; // e.g. "Test SDF Network ; September 2015"
+  networkUrl: string;
+  networkPassphrase: string;
+}
+
+export interface WalletState {
+  /** The connected Stellar account, or null if not connected */
+  account: AccountInfo | null;
+  /** Network details from Freighter, or null if unavailable */
+  network: NetworkInfo | null;
+  /** Whether the app is currently listed as allowed in Freighter */
+  isAllowed: boolean | null;
+  /** Whether a connect/disconnect action is in progress */
+  isBusy: boolean;
+  /** Most recent connection error message, if any */
+  error: string | null;
+  /** Trigger the Freighter connection flow (calls setAllowed) */
+  connect: () => Promise<void>;
+  /** Clear the local connection state so the UI prompts to connect again */
+  disconnect: () => void;
+}
+
+/**
+ * Manages the full lifecycle of a Freighter wallet connection:
+ * - Detects existing connection and account info on mount
+ * - Provides `connect()` to trigger setAllowed + immediate public key fetch
+ * - Provides `disconnect()` to clear local state
+ * - Polls for network and account changes every 2 seconds
+ *
+ * Freighter does **not** support programmatic network switching via the API.
+ * To switch networks, the user must open the Freighter extension and switch
+ * manually. The hook will detect the change within a polling cycle.
+ */
+export function useWallet(): WalletState {
+  const [account, setAccount] = useState<AccountInfo | null>(null);
+  const [network, setNetwork] = useState<NetworkInfo | null>(null);
+  const [isAllowedState, setIsAllowed] = useState<boolean | null>(null);
+  const [isBusy, setIsBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Tracks whether the user has explicitly disconnected; when true, polling
+  // ignores Freighter's isConnected() result so the UI stays in "connect" mode.
+  const disconnectedRef = useRef(false);
+
+  // ── Core sync logic ──────────────────────────────────────────
+
+  const sync = useCallback(async () => {
+    if (disconnectedRef.current) {
+      setAccount(null);
+      return;
+    }
+
+    try {
+      const connected = await isConnected();
+      if (!connected) {
+        setAccount(null);
+        setIsAllowed(false);
+        setNetwork(null);
+        return;
+      }
+
+      // Fetch each piece independently so one failing call doesn't
+      // prevent the others from updating the UI.
+      try {
+        const user = await getUserInfo();
+        if (user?.publicKey) {
+          setAccount({
+            address: user.publicKey,
+            displayName: `${user.publicKey.slice(0, 4)}...${user.publicKey.slice(-4)}`,
+          });
+        } else {
+          setAccount(null);
+        }
+      } catch {
+        // keep previous account on transient failure
+      }
+
+      try {
+        const allowed = await isAllowed();
+        setIsAllowed(allowed);
+      } catch {
+        // keep previous allowed state
+      }
+
+      try {
+        const netDetails = await getNetworkDetails();
+        if (netDetails) {
+          setNetwork({
+            network: netDetails.network,
+            networkUrl: netDetails.networkUrl,
+            networkPassphrase: netDetails.networkPassphrase,
+          });
+        }
+      } catch {
+        // keep previous network info
+      }
+    } catch {
+      // Freighter may not be installed or may throw during polling;
+      // silently ignore transient errors to avoid flickering the UI.
+    }
+  }, []);
+
+  // ── Polling ───────────────────────────────────────────────────
+
+  useEffect(() => {
+    sync();
+    const interval = setInterval(sync, 2000);
+    return () => clearInterval(interval);
+  }, [sync]);
+
+  // ── Public API ────────────────────────────────────────────────
+
+  const connect = useCallback(async () => {
+    setIsBusy(true);
+    setError(null);
+    disconnectedRef.current = false;
+
+    try {
+      // setAllowed() is called by the ConnectButton component itself;
+      // here we just reset state and sync so the UI updates promptly.
+      await sync();
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to connect wallet";
+      setError(message);
+      disconnectedRef.current = true;
+    } finally {
+      setIsBusy(false);
+    }
+  }, [sync]);
+
+  const disconnect = useCallback(() => {
+    disconnectedRef.current = true;
+    setAccount(null);
+    setNetwork(null);
+    setIsAllowed(false);
+    setError(null);
+  }, []);
+
+  return {
+    account,
+    network,
+    isAllowed: isAllowedState,
+    isBusy,
+    error,
+    connect,
+    disconnect,
+  };
+}
diff --git a/messages/en.json b/messages/en.json
index 9625441..246243d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -10,6 +10,16 @@
     "openMenu": "Open menu",
     "closeMenu": "Close menu"
   },
+  "Wallet": {
+    "switchAccount": "Switch account",
+    "disconnect": "Disconnect",
+    "network": "Network",
+    "testnet": "Testnet",
+    "mainnet": "Mainnet",
+    "futurenet": "Futurenet",
+    "connecting": "Checking wallet…",
+    "notConnected": "Not connected"
+  },
   "LocaleSwitcher": {
     "label": "Language",
     "en": "English",
diff --git a/messages/es.json b/messages/es.json
index dfacfe7..41ab05a 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -10,6 +10,16 @@
     "openMenu": "Abrir menú",
     "closeMenu": "Cerrar menú"
   },
+  "Wallet": {
+    "switchAccount": "Cambiar cuenta",
+    "disconnect": "Desconectar",
+    "network": "Red",
+    "testnet": "Testnet",
+    "mainnet": "Mainnet",
+    "futurenet": "Futurenet",
+    "connecting": "Verificando billetera…",
+    "notConnected": "No conectado"
+  },
   "LocaleSwitcher": {
     "label": "Idioma",
     "en": "English",
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index fcdaeee..3a015d5 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -2,9 +2,8 @@ import { useState } from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { Navbar } from '../components/organisms'
-import { USDCConverter, FileUpload } from '../components/molecules'
+import { USDCConverter, FileUpload, DashboardSidebar } from '../components/molecules'
 import type { UploadedFile } from '../components/molecules'
 import { useUSDCPrice, formatUSD, convertToUSD } from '../hooks/useUSDCPrice'
 
@@ -26,12 +25,9 @@ const NAV_ITEMS: NavItem[] = [
 const ESCROW_USDC = 0
 
 const Dashboard: NextPage = () => {
-  const router = useRouter()
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const { price: usdcPrice, status: priceStatus } = useUSDCPrice()
 
-  const isActive = (href: string) => router.pathname === href
-
   const escrowUSD =
     usdcPrice !== null ? formatUSD(convertToUSD(ESCROW_USDC, usdcPrice)) : null
 
@@ -55,57 +51,11 @@ const Dashboard: NextPage = () => {
         <Navbar />
 
         <div className="flex">
-          {/* Mobile sidebar backdrop */}
-          {sidebarOpen && (
-            <div
-              className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-              onClick={() => setSidebarOpen(false)}
-            />
-          )}
-
-          {/* Sidebar */}
-          <aside
-            className={`
-              fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transition-transform duration-300
-              ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
-            `}
-          >
-            <nav className="p-4 space-y-1">
-              {NAV_ITEMS.map((item) => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  onClick={() => setSidebarOpen(false)}
-                  className={`
-                    flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors group
-                    ${
-                      isActive(item.href)
-                        ? 'bg-indigo-50 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300'
-                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
-                    }
-                  `}
-                >
-                  <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm">{item.label}</div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">
-                      {item.description}
-                    </div>
-                  </div>
-                </Link>
-              ))}
-            </nav>
-
-            {/* Wallet info section */}
-            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800">
-              <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Connected Wallet</div>
-                <div className="text-sm font-mono text-gray-900 dark:text-gray-100 truncate">
-                  Not connected
-                </div>
-              </div>
-            </div>
-          </aside>
+          <DashboardSidebar
+            items={NAV_ITEMS}
+            open={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
 
           {/* Main content */}
           <main className="flex-1 p-6 lg:p-8">
diff --git a/pages/dashboard/disputes.tsx b/pages/dashboard/disputes.tsx
index a9732d7..c8c6b3a 100644
--- a/pages/dashboard/disputes.tsx
+++ b/pages/dashboard/disputes.tsx
@@ -2,8 +2,8 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import { Navbar } from '../../components/organisms'
+import { DashboardSidebar } from '../../components/molecules'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 
 interface NavItem {
   label: string
@@ -20,9 +20,7 @@ const NAV_ITEMS: NavItem[] = [
 ]
 
 const Disputes: NextPage = () => {
-  const router = useRouter()
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const isActive = (href: string) => router.pathname === href
 
   return (
     <>
@@ -35,30 +33,11 @@ const Disputes: NextPage = () => {
         <Navbar />
 
         <div className="flex">
-          {sidebarOpen && (
-            <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
-          )}
-
-          <aside className={`fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transition-transform duration-300 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
-            <nav className="p-4 space-y-1">
-              {NAV_ITEMS.map((item) => (
-                <Link key={item.href} href={item.href} onClick={() => setSidebarOpen(false)} className={`flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors ${isActive(item.href) ? 'bg-indigo-50 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>
-                  <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm">{item.label}</div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">{item.description}</div>
-                  </div>
-                </Link>
-              ))}
-            </nav>
-
-            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800">
-              <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Connected Wallet</div>
-                <div className="text-sm font-mono text-gray-900 dark:text-gray-100 truncate">Not connected</div>
-              </div>
-            </div>
-          </aside>
+          <DashboardSidebar
+            items={NAV_ITEMS}
+            open={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
 
           <main className="flex-1 p-6 lg:p-8">
             <button onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:hidden mb-4 p-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800" aria-label="Toggle menu">
diff --git a/pages/dashboard/profile.tsx b/pages/dashboard/profile.tsx
index 96985d3..7a730d4 100644
--- a/pages/dashboard/profile.tsx
+++ b/pages/dashboard/profile.tsx
@@ -2,8 +2,8 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import { Navbar } from '../../components/organisms'
+import { DashboardSidebar } from '../../components/molecules'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 import { useAccount, useUserProfile } from '../../hooks'
 
 interface NavItem {
@@ -21,11 +21,9 @@ const NAV_ITEMS: NavItem[] = [
 ]
 
 const Profile: NextPage = () => {
-  const router = useRouter()
   const account = useAccount()
   const { profile, status, error, refetch } = useUserProfile(account?.address)
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const isActive = (href: string) => router.pathname === href
 
   const formattedDate = (date: string) =>
     new Date(date).toLocaleDateString(undefined, {
@@ -45,30 +43,11 @@ const Profile: NextPage = () => {
         <Navbar />
 
         <div className="flex">
-          {sidebarOpen && (
-            <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
-          )}
-
-          <aside className={`fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transition-transform duration-300 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
-            <nav className="p-4 space-y-1">
-              {NAV_ITEMS.map((item) => (
-                <Link key={item.href} href={item.href} onClick={() => setSidebarOpen(false)} className={`flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors ${isActive(item.href) ? 'bg-indigo-50 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>
-                  <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm">{item.label}</div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">{item.description}</div>
-                  </div>
-                </Link>
-              ))}
-            </nav>
-
-            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800">
-              <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Connected Wallet</div>
-                <div className="text-sm font-mono text-gray-900 dark:text-gray-100 truncate">Not connected</div>
-              </div>
-            </div>
-          </aside>
+          <DashboardSidebar
+            items={NAV_ITEMS}
+            open={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
 
           <main className="flex-1 p-6 lg:p-8">
             <button onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:hidden mb-4 p-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800" aria-label="Toggle menu">
diff --git a/pages/dashboard/settings.tsx b/pages/dashboard/settings.tsx
index 70f0f24..394ba25 100644
--- a/pages/dashboard/settings.tsx
+++ b/pages/dashboard/settings.tsx
@@ -2,8 +2,8 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import { Navbar } from '../../components/organisms'
+import { DashboardSidebar } from '../../components/molecules'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 
 interface NavItem {
   label: string
@@ -20,9 +20,7 @@ const NAV_ITEMS: NavItem[] = [
 ]
 
 const Settings: NextPage = () => {
-  const router = useRouter()
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const isActive = (href: string) => router.pathname === href
 
   return (
     <>
@@ -35,30 +33,11 @@ const Settings: NextPage = () => {
         <Navbar />
 
         <div className="flex">
-          {sidebarOpen && (
-            <div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
-          )}
-
-          <aside className={`fixed lg:sticky top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transition-transform duration-300 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
-            <nav className="p-4 space-y-1">
-              {NAV_ITEMS.map((item) => (
-                <Link key={item.href} href={item.href} onClick={() => setSidebarOpen(false)} className={`flex items-start gap-3 px-3 py-2.5 rounded-lg transition-colors ${isActive(item.href) ? 'bg-indigo-50 dark:bg-indigo-950 text-indigo-700 dark:text-indigo-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`}>
-                  <span className="text-xl flex-shrink-0 mt-0.5">{item.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium text-sm">{item.label}</div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 leading-tight">{item.description}</div>
-                  </div>
-                </Link>
-              ))}
-            </nav>
-
-            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-800">
-              <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Connected Wallet</div>
-                <div className="text-sm font-mono text-gray-900 dark:text-gray-100 truncate">Not connected</div>
-              </div>
-            </div>
-          </aside>
+          <DashboardSidebar
+            items={NAV_ITEMS}
+            open={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
 
           <main className="flex-1 p-6 lg:p-8">
             <button onClick={() => setSidebarOpen(!sidebarOpen)} className="lg:hidden mb-4 p-2 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800" aria-label="Toggle menu">