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

FAQs

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.