@wallet-ui/react

UI e hooks de wallet modernos usados por templates create-solana-dapp.

Receita

npx create-solana-dapp@latest my-dapp
# includes @wallet-ui/react wired to @solana/kit

import { SolanaProvider } from "@wallet-ui/react";

Quando usar:

• Apps greenfield de templates Solana Foundation.
• Botão connect estilizado e dropdown de conta prontos.
• Integração mais apertada com defaults kit 7.x.

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

O que isso demonstra:

• Provider único empacota RPC + descoberta de wallet.
• useSolana expõe state connect e endereços.
• Funciona com layouts client do App Router.

Aprofundamento

Como Funciona

• wallet-ui envolve registro Wallet Standard e config RPC kit.
• Componentes UI são composáveis ou substituíveis.
• Templates entregam defaults amigáveis a Tailwind.
• Verifique README do template para nomes exatos de hooks por release.

Erros Comuns

• Misturar providers wallet-adapter e wallet-ui - modais duplos. Correção: escolha um stack por app.
• NEXT_PUBLIC_RPC_URL faltando - connect funciona mas reads falham. Correção: validação env no build.
• Branding customizado - sobrescreva tokens CSS, não faça fork de internals do provider.
• RN vs React - use pacotes wallet-ui React Native no mobile.
• Skew de versão com kit - alinhe com lockfile create-solana-dapp.

Alternativas

FAQs

Relacionado

• Wallet Adapter - hooks adapter
• Noções Básicas de Integração dApp - estrutura de app
• Noções Básicas de Wallet - Wallet Standard

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.