Autoconnect e UX de Sessão
Restaure sessões de wallet suavemente sem surpreender usuários.
Receita
<WalletProvider wallets={wallets} autoConnect>Quando usar:
- Visitantes recorrentes em dashboards DeFi.
- Games e apps sociais com txs frequentes.
- Reduzir fricção de connect no mobile.
Exemplo 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>Restoring wallet session…</p>;
if (!connected) return <p>Connect wallet to view portfolio</p>;
return <>{children}</>;
}O que isso demonstra:
- Mostre loading enquanto autoConnect roda.
- Gate apenas features que precisam de pubkey.
- Reads públicos permanecem disponíveis.
Aprofundamento
Como Funciona
- Adapters persistem última escolha de wallet em localStorage.
- autoConnect dispara no mount do provider.
- Mobile pode precisar reconnect manual após OS matar WebView.
- Pareie com SIWS para sessões server separadamente.
Erros Comuns
- Modal instantâneo no load - UX ruim. Correção: autoConnect silencioso + status inline.
- auto-reconnect na wallet errada - usuário possui múltiplas. Correção: switcher de wallet fácil.
- Sessões obsoletas após mudança de rede - erros no send. Correção: badge de cluster + CTA reconnect.
- autoConnect em SSR - crashes. Correção: árvore de provider apenas client.
- Sem disconnect - usuários se sentem presos. Correção: controle disconnect visível.
Alternativas
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| Apenas connect manual | Apps admin alta segurança | Apps consumer |
| Email + embedded wallet | Onboarding Web2 | Narrativa wallet soberana |
FAQs
Devnet ou mainnet?
Corresponda RPC URL, rede da wallet e program IDs a um cluster.
kit vs web3.js?
Use @solana/kit 7.0.0 para código frontend novo.
Testes?
Surfpool 0.12.0 ou devnet com SOL de faucet.
Nível de commitment?
confirmed para UX; finalized para reads de alto valor.
Next.js App Router?
Providers em layout client; reads podem ser server-side.
Wallet rejeitou sign?
Mostre retry; nunca assuma aprovação.
Priority fees?
Instructions compute budget em mainnet congestionada.
Mobile?
Use Mobile Wallet Adapter para apps React Native.
Segurança?
Nunca exponha keypairs de servidor ao browser.
Mudanças de IDL?
Regenere clients tipados em CI.
Relacionado
- Conectando e Desconectando - fluxo connect
- Wallet Adapter - flag autoConnect
- UX de Transação - estados de loading
Versões do stack: Esta página foi escrita 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 e LiteSVM 0.6.x.