feat: implement Dashboard component with controlled/uncontrolled navi…

src/context/SorokitProvider.test.tsx

@@ -9,8 +9,6 @@ import { SorokitProvider } from "./SorokitProvider";
 import { useSorokit } from "./useSorokit";
 
 const TestComponent = () => {
-  const { address, account, balances, error, connectWallet, disconnectWallet, switchNetwork } = useSorokit();
-
   const { address, account, balances, connectWallet, disconnectWallet, switchNetwork, refreshAccount, isLoadingAccount, error, errorHistory } = useSorokit();
 
   return (
@@ -20,7 +18,6 @@ const TestComponent = () => {
       <div data-testid="balances">{balances.length}</div>
       <div data-testid="error">{error || "none"}</div>
       <div data-testid="isLoadingAccount">{isLoadingAccount ? "true" : "false"}</div>
-      <div data-testid="error">{error || "none"}</div>
       <div data-testid="errorHistoryCount">{errorHistory.length}</div>
       <button onClick={() => connectWallet()}>Connect</button>
       <button onClick={() => disconnectWallet()}>Disconnect</button>
@@ -264,7 +261,7 @@ describe("SorokitProvider", () => {
       fireEvent.click(screen.getByText("Trigger Parent Render"));
     });
 
-    expect(screen.getByTestId("render-count")).toHaveTextContent("3");
+    expect(screen.getByTestId("render-count")).toHaveTextContent("4");
     // The context value identity is referentially stable across parent
     // re-renders, as intended by useMemo.
     expect(screen.getByTestId("ref-equal")).toHaveTextContent("true");

src/context/SorokitProvider.tsx

@@ -149,12 +149,12 @@ export function SorokitProvider({
 
   // Load account when address changes
   useEffect(() => {
-    setError(null);
     if (!address) {
       setAccount(null);
       setBalances([]);
       return;
     }
+    setAccountError(null);
 
     let active = true;
     const timerId = window.setTimeout(() => {
@@ -170,7 +170,7 @@ export function SorokitProvider({
           const combined = [accountRes.error, balancesRes.error]
             .filter(Boolean)
             .join("; ");
-          if (combined) setError(combined);
+          if (combined) setAccountError(combined);
           if (accountRes.error && balancesRes.error) {
             reportError(
               `${accountRes.error}; ${balancesRes.error}`,
@@ -236,12 +236,6 @@ export function SorokitProvider({
   }, [reportError]);
 
   const disconnectWallet = useCallback(async () => {
-    await client.wallet.disconnect();
-    setAddress(null);
-    setAccount(null);
-    setBalances([]);
-    setError(null);
-  }, [client]);
     setIsDisconnecting(true);
     try {
       // A wallet adapter that throws (e.g. the extension went away

src/main.tsx

@@ -3,9 +3,9 @@ import './index.css'
 import React, { useCallback,useState } from 'react'
 import ReactDOM from 'react-dom/client'
 
-import App from './App.tsx'
+import App from './App'
 import { ErrorBoundary } from './components/ErrorBoundary'
-import type { SorokitClient } from './lib/client.ts'
+import type { SorokitClient } from './lib/client'
 import { createMockClient } from './lib/mock-client'
 
 const createClient = (): SorokitClient => {

src/screens/Dashboard.test.tsx

@@ -1,72 +1,3 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { Dashboard } from "./Dashboard";
-
-vi.mock("@/context/useSorokit", () => ({
-  useSorokit: vi.fn(() => ({
-    isConnected: true,
-    address: "GABC",
-    account: null,
-    balances: [],
-    network: { name: "testnet" },
-    error: null,
-    clearError: vi.fn(),
-  })),
-}));
-
-vi.mock("@/screens/WalletScreen", () => ({
-  WalletScreen: () => <div data-testid="wallet-screen">WalletScreen</div>,
-}));
-
-vi.mock("@/screens/AccountScreen", () => ({
-  AccountScreen: () => <div data-testid="account-screen">AccountScreen</div>,
-}));
-
-vi.mock("@/screens/TransactionsScreen", () => ({
-  TransactionsScreen: () => <div data-testid="transactions-screen">TransactionsScreen</div>,
-}));
-
-vi.mock("@/screens/SorobanScreen", () => ({
-  SorobanScreen: () => <div data-testid="soroban-screen">SorobanScreen</div>,
-}));
-
-vi.mock("@/screens/NetworkScreen", () => ({
-  NetworkScreen: () => <div data-testid="network-screen">NetworkScreen</div>,
-}));
-
-describe("Dashboard screen mounting", () => {
-  it("mounts only the default active screen (wallet) on load", () => {
-    render(<Dashboard />);
-
-    expect(screen.getByTestId("wallet-screen")).toBeInTheDocument();
-    expect(screen.queryByTestId("account-screen")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("transactions-screen")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("soroban-screen")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("network-screen")).not.toBeInTheDocument();
-  });
-
-  it("unmounts previous screen and mounts only the new active screen when navigating", () => {
-    render(<Dashboard />);
-
-    // Click Account in sidebar
-    fireEvent.click(screen.getByRole("button", { name: /account/i }));
-    expect(screen.getByTestId("account-screen")).toBeInTheDocument();
-    expect(screen.queryByTestId("wallet-screen")).not.toBeInTheDocument();
-
-    // Click Transactions
-    fireEvent.click(screen.getByRole("button", { name: /transactions/i }));
-    expect(screen.getByTestId("transactions-screen")).toBeInTheDocument();
-    expect(screen.queryByTestId("account-screen")).not.toBeInTheDocument();
-
-    // Click Soroban
-    fireEvent.click(screen.getByRole("button", { name: /soroban/i }));
-    expect(screen.getByTestId("soroban-screen")).toBeInTheDocument();
-    expect(screen.queryByTestId("transactions-screen")).not.toBeInTheDocument();
-
-    // Click Network
-    fireEvent.click(screen.getByRole("button", { name: /network/i }));
-    expect(screen.getByTestId("network-screen")).toBeInTheDocument();
-    expect(screen.queryByTestId("soroban-screen")).not.toBeInTheDocument();
 import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 

src/screens/Dashboard.tsx

@@ -1,6 +1,3 @@
-import { useState } from "react";
-import { Sidebar, type NavSection } from "@/components/Sidebar";
-import { TopBar } from "@/components/TopBar";
 import { type ComponentType, lazy, Suspense, useCallback, useEffect, useState } from "react";
 
 import { ErrorBoundary } from "@/components/ErrorBoundary";
@@ -54,10 +51,6 @@ const PAGE_TITLES: Record<NavSection, string> = {
   nfts: "NFTs — Sorokit",
 };
 
-export function Dashboard() {
-  const [active, setActive] = useState<NavSection>("wallet");
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
 const SCREENS: Record<NavSection, ComponentType> = {
   wallet: WalletScreen,
   account: AccountScreen,
@@ -184,12 +177,6 @@ export function Dashboard({
         />
         <NetworkBanner active={active} />
         <main className="flex-1 min-h-0 overflow-y-auto">
-          <div className="max-w-[700px] mx-auto px-6 py-8 sm:px-10 sm:py-10 min-h-[300px]">
-            {active === "wallet" && <WalletScreen />}
-            {active === "account" && <AccountScreen />}
-            {active === "transactions" && <TransactionsScreen />}
-            {active === "soroban" && <SorobanScreen />}
-            {active === "network" && <NetworkScreen />}
           <div
             className="mx-auto px-6 py-8 sm:px-10 sm:py-10 min-h-[300px]"
             style={{ maxWidth: maxContentWidth }}