anchorage_layer_simple/userwallet/src/App.tsx

import {
  BrowserRouter,
  Routes,
  Route,
  useLocation,
} from 'react-router-dom';
import { PairingWordsProvider } from './contexts/PairingWordsContext';
import { GlobalActionBar } from './components/GlobalActionBar';
import { HomeScreen } from './components/HomeScreen';
import { CreateIdentityScreen } from './components/CreateIdentityScreen';
import { ImportIdentityScreen } from './components/ImportIdentityScreen';
import { PairingDisplayScreen } from './components/PairingDisplayScreen';
import { RelaySettingsScreen } from './components/RelaySettingsScreen';
import { PairManagementScreen } from './components/PairManagementScreen';
import { SyncScreen } from './components/SyncScreen';
import { LoginScreen } from './components/LoginScreen';
import { ServiceListScreen } from './components/ServiceListScreen';
import { DataExportImportScreen } from './components/DataExportImportScreen';
import { UnlockScreen } from './components/UnlockScreen';
import { useChannel } from './hooks/useChannel';
import { useIdentity } from './hooks/useIdentity';
import './index.css';

const PAIRING_DISPLAY_PATH = '/pairing-display';

function usePairingDisplayBypass(): boolean {
  const location = useLocation();
  return location.pathname === PAIRING_DISPLAY_PATH;
}

function AppContent(): JSX.Element {
  useChannel();

  return (
    <Routes>
      <Route path="/" element={<HomeScreen />} />
      <Route path="/create-identity" element={<CreateIdentityScreen />} />
      <Route path="/import-identity" element={<ImportIdentityScreen />} />
      <Route path="/login" element={<LoginScreen />} />
      <Route path="/manage-pairs" element={<PairManagementScreen />} />
      <Route path="/relay-settings" element={<RelaySettingsScreen />} />
      <Route path="/sync" element={<SyncScreen />} />
      <Route path="/services" element={<ServiceListScreen />} />
      <Route path="/data" element={<DataExportImportScreen />} />
    </Routes>
  );
}

function AppGate(): JSX.Element {
  const { identity, isProtected, isUnlocked, isLoading } = useIdentity();

  if (isLoading) {
    return (
      <div role="status" aria-live="polite" aria-busy="true">
        Chargement…
      </div>
    );
  }
  if (identity !== null && isProtected && !isUnlocked) {
    return <UnlockScreen />;
  }
  return <AppContent />;
}

function AppRoot(): JSX.Element {
  const bypass = usePairingDisplayBypass();
  return (
    <PairingWordsProvider>
      <GlobalActionBar />
      {bypass ? <PairingDisplayScreen /> : <AppGate />}
    </PairingWordsProvider>
  );
}

export function App(): JSX.Element {
  return (
    <BrowserRouter>
      <AppRoot />
    </BrowserRouter>
  );
}