0.0.1 • Published 7 months ago

@zzispp/react-web3-wallet-connector v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months ago

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-钱包断开连接回调
classNamestring-自定义样式类名

ChainSelector Props

属性类型必填默认值描述
onChange(chain: Chain) => void-链切换回调
defaultChainChain'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!