Wallet Adapter
Configure hooks @solana/wallet-adapter-react para conexão e assinatura.
Receita
npm install @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets"use client";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import "@solana/wallet-adapter-react-ui/styles.css";Quando usar:
- Apps existentes usando hooks React de wallet de fato.
- UI customizada com state
useWallet. - Bibliotecas e tutoriais ainda referenciando wallet-adapter.
Exemplo Funcional
"use client";
import { useMemo } from "react";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
export function SolanaProviders({ children }: { children: React.ReactNode }) {
const endpoint = process.env.NEXT_PUBLIC_RPC_URL!;
const wallets = useMemo(
() => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
[]
);
return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}O que isso demonstra:
ConnectionProviderainda envolve endpoint HTTP (migre reads para kit separadamente).autoConnectrestaura sessão anterior.- CSS do modal de wallet é opcional mas acelera onboarding.
Aprofundamento
Como Funciona
- Adapters traduzem eventos Wallet Standard em context React.
useWalletexpõepublicKey,connected,signTransaction.- Pareie com kit convertendo signers de wallet para pipeline de mensagem.
- create-solana-dapp pode preferir @wallet-ui/react - ambos são válidos.
Erros Comuns
- SSR importando wallet-adapter - erros de window. Correção: boundary
"use client"apenas. - Array wallets vazio - sem opções no modal. Correção: registre adapters populares.
- autoConnect sem UX - conexões surpresa. Correção: skeleton de loading + disconnect.
- Connection @solana/web3.js obsoleta - stack duplo. Correção: RPC kit para reads, adapter para sign.
- Endpoint mainnet em demo devnet - confusão do usuário. Correção: endpoint dirigido por env.
Alternativas
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| @wallet-ui/react | Templates novos create-solana-dapp | Investimento pesado em hooks adapter |
| Wallet Standard direto | Modal customizado, sem pkg UI | Precisa modal rápido |
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 - state de conexão
- @wallet-ui/react - UI kit moderno
- Providers e App Router - wiring Next.js
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.