@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/kitimport { 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.
useSolanaexpõ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
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| wallet-adapter-react-ui | Tutoriais legados | Apps novos baseados em template |
| Modal totalmente customizado | Controle forte de marca | Prazo apertado |
FAQs
Devnet ou mainnet?
Corresponda RPC URL, rede da wallet e program IDs a um cluster.
kit vs web3.js?
Use @solana/kit 7.0.0 para código frontend novo.
Testes?
Surfpool 0.12.0 ou devnet com SOL de faucet.
Nível de commitment?
confirmed para UX; finalized para reads de alto valor.
Next.js App Router?
Providers em layout client; reads podem ser server-side.
Wallet rejeitou sign?
Mostre retry; nunca assuma aprovação.
Priority fees?
Instructions compute budget em mainnet congestionada.
Mobile?
Use Mobile Wallet Adapter para apps React Native.
Segurança?
Nunca exponha keypairs de servidor ao browser.
Mudanças de IDL?
Regenere clients tipados em CI.
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.