Adaptador de Billetera

Configura los hooks de @solana/wallet-adapter-react para la conexión y la firma.

Receta

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";

Cuándo usar esto:

• Aplicaciones existentes que utilizan los hooks de billetera de React de facto.
• UI personalizada con estado useWallet.
• Librerías y tutoriales que aún hacen referencia a wallet-adapter.

Ejemplo 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>
  );
}

Lo que esto demuestra:

• ConnectionProvider aún envuelve el endpoint HTTP (migra las lecturas al kit por separado).
• autoConnect restaura la sesión anterior.
• El CSS del modal de billetera es opcional pero acelera la incorporación.

Análisis Profundo

Cómo Funciona

• Los adaptadores traducen los eventos de Wallet Standard a contexto de React.
• useWallet expone publicKey, connected, signTransaction.
• Empareja con el kit convirtiendo los firmantes de la billetera para el pipeline de mensajes.
• create-solana-dapp puede preferir @wallet-ui/react; ambos son válidos.

Errores Comunes

• Importar wallet-adapter en SSR - errores de window. Solución: solo en el límite de "use client".
• Array de billeteras vacío - sin opciones en el modal. Solución: registrar adaptadores populares.
• autoConnect sin UX - conexiones sorpresa. Solución: esqueleto de carga + desconexión.
• Connection de @solana/web3.js obsoleto - doble pila. Solución: usar RPC del kit para lecturas, adaptador para firmar.
• Endpoint de mainnet en demo de devnet - confusión del usuario. Solución: endpoint impulsado por variables de entorno.

Alternativas

Preguntas Frecuentes

Relacionado

• Conexión y Desconexión - estado de conexión
• @wallet-ui/react - kit de UI moderno
• Proveedores y App Router - configuración de Next.js

Versiones de Stack: Esta página fue 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, y LiteSVM 0.6.x.