React Web3 Wallet Connector

一个用于 React 应用程序的 Web3 钱包连接组件库，支持多种钱包连接方式，包括 Ethereum、Solana 和 Tron。

特性

• 🔌 简单易用的钱包连接组件
• 💼 支持多链钱包（ETH、SOL、TRON）
• 🎨 基于 Ant Design 的 UI 组件
• 📦 完整的 TypeScript 支持
• ⚡ 基于 Vite 构建

安装

npm install react-web3-wallet-connector
# 或
yarn add react-web3-wallet-connector

快速开始

基础用法

import { WalletConnectButton } from 'react-web3-wallet-connector';
import 'react-web3-wallet-connector/dist/style.css'; // 导入样式

function App() {
  return (
    <div>
      <WalletConnectButton />
    </div>
  );
}

完整示例

import { WalletConnect, ChainSelector } from 'react-web3-wallet-connector';
import { Chain } from 'react-web3-wallet-connector/types';

function App() {
  const handleConnect = (address: string, chain: Chain) => {
    console.log('Connected wallet address:', address);
    console.log('Current chain:', chain);
  };

  const handleDisconnect = () => {
    console.log('Wallet disconnected');
  };

  return (
    <div>
      {/* 链选择器 */}
      <ChainSelector />
      
      {/* 钱包连接组件 */}
      <WalletConnect
        onConnect={handleConnect}
        onDisconnect={handleDisconnect}
      />
    </div>
  );
}

使用 Hooks

import { useConnect, useWalletBalance, useWalletSign } from 'react-web3-wallet-connector';

function MyWalletComponent() {
  // 连接钱包
  const { connect, disconnect, isConnected, address } = useConnect();
  
  // 获取余额
  const { balance, isLoading: balanceLoading } = useWalletBalance();
  
  // 签名消息
  const { sign, signing } = useWalletSign();

  const handleSign = async () => {
    const message = 'Hello Web3!';
    const signature = await sign(message);
    console.log('Signature:', signature);
  };

  return (
    <div>
      {isConnected ? (
        <>
          <div>地址: {address}</div>
          <div>余额: {balanceLoading ? '加载中...' : balance}</div>
          <button onClick={handleSign} disabled={signing}>
            {signing ? '签名中...' : '签名消息'}
          </button>
          <button onClick={disconnect}>断开连接</button>
        </>
      ) : (
        <button onClick={connect}>连接钱包</button>
      )}
    </div>
  );
}

API 文档

WalletConnectButton Props

| 属性 | 类型 | 必填 | 默认值 | 描述 | |------|------|------|--------|------| | onConnect | (address: string, chain: Chain) => void | 否 | - | 钱包连接成功回调 | | onDisconnect | () => void | 否 | - | 钱包断开连接回调 | | className | string | 否 | - | 自定义样式类名 |

ChainSelector Props

| 属性 | 类型 | 必填 | 默认值 | 描述 | |------|------|------|--------|------| | onChange | (chain: Chain) => void | 否 | - | 链切换回调 | | defaultChain | Chain | 否 | 'ETH' | 默认选中的链 |

Hooks

useConnect

const {
  connect,          // () => Promise<void>
  disconnect,       // () => void
  isConnected,      // boolean
  address,          // string | null
  chainId,          // number | null
  error            // Error | null
} = useConnect();

useWalletBalance

const {
  balance,         // string | null
  isLoading,       // boolean
  refetch         // () => Promise<void>
} = useWalletBalance();

useWalletSign

const {
  sign,           // (message: string) => Promise<string>
  signing,        // boolean
  error          // Error | null
} = useWalletSign();

支持的钱包

• ETH: MetaMask
• SOL: Phantom
• TRON: TronLink

许可证

MIT

贡献指南

欢迎提交 Issue 和 Pull Request！