import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import { QueryClient, QueryCache, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import {
  BrowserRouter,
} from 'react-router-dom';
import App from './App';
import { SwarmWebSocketProvider } from './context/WsContext';
import { ErrorProvider } from './context/ErrorContext';

const queryClient = new QueryClient({
  queryCache: new QueryCache(),
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <SwarmWebSocketProvider>
      <ErrorProvider>
        <QueryClientProvider client={queryClient}>
          <BrowserRouter>
            <App />
          </BrowserRouter>

          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </ErrorProvider>
    </SwarmWebSocketProvider>
  </StrictMode>,
);