0.0.1 • Published 7 months ago
@zzispp/react-web3-wallet-connector v0.0.1
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!
0.0.1
7 months ago