@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/kit

import { 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.
• useSolana expone 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

Preguntas Frecuentes

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.