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:

• ConnectionProvider ainda envolve endpoint HTTP (migre reads para kit separadamente).
• autoConnect restaura sessão anterior.
• CSS do modal de wallet é opcional mas acelera onboarding.

Aprofundamento

Como Funciona

• Adapters traduzem eventos Wallet Standard em context React.
• useWallet expõe publicKey, 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

FAQs

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.