El problema es que el componente Dashboard es un componente de cliente ('use client') que usa hooks, pero está siendo renderizado directamente en el layout. El issue es que el provider está en el layout.tsx que es un componente de servidor. Necesito verificar si el layout es un cliente component y reorganizar para que todo funcione correctamente.

He identificado el problema. El WalletProvider es un componente de cliente ('use client') pero está siendo renderizado directamente en el layout.tsx que es un componente de servidor. El layout necesita ser declarado como cliente para que pueda renderizar el provider correctamente. Voy a arreglarlo:

Sin embargo, hay una complicación: no puedo usar 'use client' en layout.tsx junto con metadata/viewport (que son solo para Server Components). Necesito una estructura diferente. Voy a crear un componente wrapper cliente y mantener el layout como servidor:

Ahora creo el componente ClientWrapper que envuelve el WalletProvider:

Perfecto. He corregido el problema de la estructura. El layout ahora usa ClientWrapper, un componente cliente que envuelve el WalletProvider. Esto permite que el layout.tsx siga siendo un Server Component (necesario para metadata/viewport) mientras que el provider se renderiza correctamente en el lado del cliente. La aplicación debería cargar sin errores ahora.

The issue is that the page component is being rendered on the SERVER side before the client wrapper initializes. The Dashboard component needs to be a client component. Let me check the current page structure and fix it:

The page component correctly has 'use client' at the top. The problem is that the error is occurring on the SERVER side too, which means the page is being pre-rendered. Let me check the wallet context to ensure it's properly exported:

I found the issue. The WalletProvider returns the children without the context value when !isHydrated is true. During server-side rendering, the condition if (!isHydrated) is always true because the useState starts at false, so the hook fails. The issue is that we're trying to render a client component that uses the context before hydration completes. Let me fix the WalletProvider to handle this better:

I've fixed the hydration issue by initializing the movements state with the initial data directly instead of waiting for a useEffect. The provider now renders the context value immediately on the client, which allows child components to use the useWallet hook without hydration mismatch errors.