Autoconnect & UX de Sesión
Restaura sesiones de billetera sin problemas y sin sorprender a los usuarios.
Receta
<WalletProvider wallets={wallets} autoConnect>Cuándo usar esto:
- Visitantes recurrentes en paneles de DeFi.
- Juegos y aplicaciones sociales con transacciones frecuentes.
- Reducir la fricción de conexión en dispositivos móviles.
Ejemplo Funcional
"use client";
import { useWallet } from "@solana/wallet-adapter-react";
export function WalletGate({ children }: { children: React.ReactNode }) {
const { connected, connecting } = useWallet();
if (connecting) return <p>Restaurando sesión de billetera…</p>;
if (!connected) return <p>Conecta tu billetera para ver el portafolio</p>;
return <>{children}</>;
}Qué demuestra esto:
- Mostrar carga mientras se ejecuta
autoConnect. - Restringir solo a las funciones que necesitan la clave pública.
- Las lecturas públicas permanecen disponibles.
Análisis Profundo
Cómo Funciona
- Los adaptadores persisten la última elección de billetera en
localStorage. autoConnectse activa al montar el proveedor.- Los dispositivos móviles pueden necesitar reconexión manual después de que el sistema operativo cierre la WebView.
- Emparejar por separado con SIWS para sesiones de servidor.
Trampas Comunes
- Modal instantáneo al cargar - mala UX. Solución:
autoConnectsilencioso + estado en línea. - Reconexión automática de billetera incorrecta - el usuario posee varias. Solución: cambiador de billetera fácil.
- Sesiones obsoletas después de un cambio de red - errores al enviar. Solución: insignia de clúster + CTA de reconexión.
autoConnecten SSR - falla. Solución: árbol de proveedores solo del lado del cliente.- Sin desconexión - los usuarios se sienten atrapados. Solución: control de desconexión visible.
Alternativas
| Alternativa | Usar Cuando | No Usar Cuando |
|---|---|---|
| Solo conexión manual | Aplicaciones administrativas de alta seguridad | Aplicaciones de consumo |
| Correo electrónico + billetera integrada | Onboarding Web2 | Narrativa de billetera soberana |
Preguntas Frecuentes
¿Devnet o Mainnet?
Coincide la URL de RPC, la red de la billetera y los IDs de programa con un clúster.
¿kit vs web3.js?
Usa @solana/kit 7.0.0 para código frontend nuevo.
¿Pruebas?
Surfpool 0.12.0 o devnet con faucet SOL.
¿Nivel de compromiso?
confirmed para UX; finalized para lecturas de alto valor.
¿Next.js App Router?
Proveedores en el layout del cliente; las lecturas pueden ser del lado del servidor.
¿Billetera rechazó firmar?
Muestra reintentar; nunca asumas aprobación.
¿Comisiones de prioridad?
Instrucciones de presupuesto de cómputo en mainnet congestionada.
¿Móvil?
Usa Mobile Wallet Adapter para aplicaciones React Native.
¿Seguridad?
Nunca expongas las claves privadas del servidor al navegador.
¿Cambios en IDL?
Regenera los clientes tipados en CI.
Relacionado
- Conexión y Desconexión - flujo de conexión
- Wallet Adapter - flag
autoConnect - UX de Transacciones - estados de carga
Versiones de Stack: Esta página se escribió para Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0, y LiteSVM 0.6.x.