update app.tsx

src/App.tsx

@@ -1,9 +1,60 @@
+import React, { useEffect } from 'react';
 import './App.css';
+import '@rainbow-me/rainbowkit/styles.css';
 import { RouterProvider } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import {
+  getDefaultConfig,
+  RainbowKitProvider,
+  RainbowKitAuthenticationProvider,
+} from '@rainbow-me/rainbowkit';
+import { WagmiProvider } from 'wagmi';
+import { sepolia } from 'viem/chains';
+import theme from './libs/theme';
 import { router } from './router';
 
-function App() {
-  return <RouterProvider router={router} />;
-}
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: 1000 * 60 * 5,
+    },
+  },
+});
+
+const config = getDefaultConfig({
+  appName: 'RainbowKit demo',
+  projectId: '1cf030f3b91e339bc4e6ecf71a694a88',
+  chains: [sepolia],
+});
+
+const App: React.FC = () => {
+  const authStatus = useAuthStatus();
+
+  useEffect(() => {
+    console.log('Auth status changed:', authStatus);
+  }, [authStatus]);
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <RainbowKitAuthenticationProvider
+            adapter={authAdapter}
+            status={authStatus}
+          >
+            <RainbowKitProvider>
+              <RouterProvider router={router} />
+            </RainbowKitProvider>
+          </RainbowKitAuthenticationProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};
 
 export default App;

src/main.tsx

@@ -1,43 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import '@rainbow-me/rainbowkit/styles.css';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { WagmiProvider } from 'wagmi';
-import { sepolia } from 'viem/chains';
-import theme from './libs/theme';
 import App from './App';
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: false,
-      staleTime: 1000 * 60 * 5,
-    },
-  },
-});
-
-const config = getDefaultConfig({
-  appName: 'RainbowKit demo',
-  projectId: 'YOUR_PROJECT_ID',
-  chains: [sepolia],
-});
+import { AuthProvider } from './context/authContext';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <RainbowKitProvider>
-            <App />
-          </RainbowKitProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <AuthProvider>
+      <App />
+    </AuthProvider>
   </React.StrictMode>
 );