Refactor: Improve error handling in authentication flow

frontend/src/components/providers-wrapper.tsx

@@ -1,13 +1,19 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import { ReactNode } from 'react';
-
-const DynamicProviders = dynamic(
-  () => import('./providers').then((mod) => ({ default: mod.Providers })),
-  { ssr: false }
-);
+import { ReactNode, useEffect, useState } from 'react';
+import { Providers } from './providers';
 
 export function ProvidersWrapper({ children }: { children: ReactNode }) {
-  return <DynamicProviders>{children}</DynamicProviders>;
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Prevent hydration issues by not rendering Providers until mounted
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return <Providers>{children}</Providers>;
 }

frontend/src/components/providers.tsx

@@ -1,14 +1,29 @@
 'use client';
 
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ThemeProvider } from 'next-themes';
 import { useStore } from '@/lib/store';
 import { authApi } from '@/lib/api';
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
+import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { clusterApiUrl } from '@solana/web3.js';
 
 export function Providers({ children }: { children: ReactNode }) {
   const [mounted, setMounted] = useState(false);
   const { setUser, setToken } = useStore();
 
+  const network = WalletAdapterNetwork.Devnet;
+  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+  const wallets = useMemo(
+    () => [
+      new PhantomWalletAdapter(),
+      new SolflareWalletAdapter(),
+    ],
+    []
+  );
+
   useEffect(() => {
     setMounted(true);
     
@@ -33,7 +48,13 @@ export function Providers({ children }: { children: ReactNode }) {
 
   return (
     <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-      {children}
+      <ConnectionProvider endpoint={endpoint}>
+        <WalletProvider wallets={wallets} autoConnect>
+          <WalletModalProvider>
+            {children}
+          </WalletModalProvider>
+        </WalletProvider>
+      </ConnectionProvider>
     </ThemeProvider>
   );
 }