@wallet-ui/react
UI y hooks de wallet modernos utilizados por las plantillas de create-solana-dapp.
Receta
npx create-solana-dapp@latest my-dapp
# incluye @wallet-ui/react conectado a @solana/kitimport { SolanaProvider } from "@wallet-ui/react";Cuándo usar esto:
- Aplicaciones nuevas (Greenfield) de las plantillas de Solana Foundation.
- Botón de conexión y menú desplegable de cuenta con estilo listo para usar.
- Integración más estrecha con los valores predeterminados de kit 7.x.
Ejemplo Funcional
"use client";
import { SolanaProvider, useSolana } from "@wallet-ui/react";
function ConnectButton() {
const { connect, connected, account } = useSolana();
if (connected) return <span>{account?.address.slice(0, 4)}…</span>;
return <button onClick={() => connect()}>Connect</button>;
}
export function AppProviders({ children }: { children: React.ReactNode }) {
return (
<SolanaProvider endpoint={process.env.NEXT_PUBLIC_RPC_URL!}>
{children}
</SolanaProvider>
);
}Lo que esto demuestra:
- Un único proveedor agrupa la configuración de RPC y el descubrimiento de wallets.
useSolanaexpone el estado de conexión y las direcciones.- Funciona con los diseños de cliente de App Router.
Análisis Profundo
Cómo Funciona
- wallet-ui envuelve el registro de Wallet Standard y la configuración de RPC de kit.
- Los componentes de UI son componibles o reemplazables.
- Las plantillas envían valores predeterminados compatibles con Tailwind.
- Consulta el README de la plantilla para conocer los nombres exactos de los hooks por versión.
Errores Comunes
- Mezclar proveedores de wallet-adapter y wallet-ui - modales duplicados. Solución: elige una pila por aplicación.
- Falta NEXT_PUBLIC_RPC_URL - la conexión funciona pero las lecturas fallan. Solución: validación de entorno en la compilación.
- Marca personalizada - anula los tokens CSS, no copies internamente el proveedor.
- RN vs React - usa los paquetes de React Native de wallet-ui en móvil.
- Desfase de versión con kit - alinea con el archivo de bloqueo de create-solana-dapp.
Alternativas
| Alternativa | Úsalo Cuando | No lo Uses Cuando |
|---|---|---|
| wallet-adapter-react-ui | Tutoriales heredados | Aplicaciones nuevas basadas en plantillas |
| Modal completamente personalizado | Fuerte control de marca | Plazo ajustado |
Preguntas Frecuentes
¿Devnet o mainnet?
Empareja la URL de RPC, la red de la wallet y los IDs de programa con un clúster.
¿kit vs web3.js?
Usa @solana/kit 7.0.0 para código frontend nuevo.
¿Pruebas?
Surfpool 0.12.0 o devnet con faucet SOL.
¿Nivel de compromiso?
confirmed para UX; finalized para lecturas de alto valor.
¿Next.js App Router?
Proveedores en el diseño del cliente; las lecturas pueden ser del lado del servidor.
¿Wallet 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 las claves de servidor al navegador.
¿Cambios en el IDL?
Regenera los clientes tipados en CI.
Relacionado
- Wallet Adapter - hooks del adaptador
- Conceptos Básicos de Integración de dApp - estructura de la aplicación
- Conceptos Básicos de Wallet - Wallet Standard
Versiones de la pila: Esta página se escribió 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.