React Hooks

React Hooks 适合想完全掌控钱包连接 UI 的项目。你可以只复用连接、账户、签名和断开连接等状态逻辑，把按钮、弹窗、错误提示和布局都交给自己的设计系统。

ℹ️

适合自定义 UI。 如果预置钱包弹窗不符合产品体验，可以从 Hooks 层接入，再自行组织交互。

---

可用库

库	说明
Wagmi	面向 EVM 应用的 React Hooks 工具集

---

适用时机

以下场景更适合从 React Hooks 开始：

• 需要完全自定义钱包入口、连接弹窗或账户展示。
• 项目已经使用 React，并希望保留类型安全的链上交互封装。
• 不希望引入预构建钱包选择器，或需要与现有组件库保持一致。
• 只想接入必要的钱包状态和动作，而不是完整 UI 套件。

---

快例子

import { useAccount, useConnect, useDisconnect } from "wagmi";
import { injected } from "wagmi/connectors";

function WalletEntryButton() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>{address}</p>
        <button onClick={() => disconnect()}>断开连接</button>
      </div>
    );
  }

  return (
    <button onClick={() => connect({ connector: injected() })}>连接钱包</button>
  );
}

---

替代方案：带钱包 UI

如果你更想直接使用成熟的钱包选择弹窗，可以参考：

• RainbowKit - 适合 React/Wagmi 生态的成品连接界面
• Web3Modal - 适合需要 WalletConnect、二维码和多框架支持的场景