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:
ConnectionProvideraún envuelve el endpoint HTTP (migra las lecturas al kit por separado).autoConnectrestaura 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.
useWalletexponepublicKey,connected,signTransaction.- Empareja con el kit convirtiendo los firmantes de la billetera para el pipeline de mensajes.
create-solana-dapppuede preferir@wallet-ui/react; ambos son válidos.
Errores Comunes
- Importar
wallet-adapteren SSR - errores dewindow. 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.
autoConnectsin UX - conexiones sorpresa. Solución: esqueleto de carga + desconexión.Connectionde@solana/web3.jsobsoleto - 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
| Alternativa | Usar Cuando | No Usar Cuando |
|---|---|---|
@wallet-ui/react | Nuevas plantillas de create-solana-dapp | Fuerte inversión en hooks de adaptador |
| Wallet Standard directo | Modal personalizado, sin paquete de UI | Necesidad de modal rápido |
Preguntas Frecuentes
¿Devnet o mainnet?
Coincide la URL de RPC, la red de la billetera y los IDs de programa con un solo clúster.
¿Kit vs web3.js?
Usa @solana/kit 7.0.0 para nuevo código frontend.
¿Pruebas?
Surfpool 0.12.0 o devnet con faucet SOL.
¿Nivel de compromiso?
confirmed para UX; finalized para lecturas de alto valor.
¿App Router de Next.js?
Proveedores en el layout del cliente; las lecturas pueden ser del lado del servidor.
¿Billetera rechazó la firma?
Muestra reintentar; nunca asumas aprobación.
¿Tarifas de prioridad?
Instrucciones de presupuesto de cómputo en mainnet congestionada.
¿Móvil?
Usa Mobile Wallet Adapter para aplicaciones React Native.
¿Seguridad?
Nunca expongas los pares de claves del servidor al navegador.
¿Cambios en IDL?
Regenera los clientes tipados en CI.
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.