1.0.2 • Published 7 months ago
@zzispp/web3-wallet-hooks v1.0.2
@zzispp/web3-wallet-hooks
一个用于Web3钱包集成的React Hooks库,支持多链(EVM、Solana、TRON)钱包连接、签名、转账等功能。
特性
- 支持多链钱包(MetaMask、Phantom、TronLink)
- 统一的钱包接口和API
- 完整的TypeScript支持
- 易用的React Hooks API
- 内置UI组件
- 支持钱包连接、签名、转账等功能
安装
npm install @zzispp/web3-wallet-hooks
# 或
yarn add @zzispp/web3-wallet-hooks
快速开始
1. 基础用法 - 使用内置UI组件
import { WalletConnect } from '@zzispp/web3-wallet-hooks'
function App() {
return (
<WalletConnect
requireSignature={true}
signMessage="Welcome to My DApp!"
onConnect={(address, chain, network) => {
console.log('Connected:', { address, chain, network })
}}
onChainChanged={(chain, network) => {
console.log('Chain changed:', { chain, network })
}}
/>
)
}
2. 使用Hooks - 自定义UI
import { useWallet } from '@zzispp/web3-wallet-hooks'
function CustomWallet() {
const {
connect,
disconnect,
sign,
walletAddress,
selectedChain,
selectedNetwork,
isConnected
} = useWallet()
return (
<div>
{!isConnected ? (
<button onClick={connect}>连接钱包</button>
) : (
<div>
<p>地址: {walletAddress}</p>
<p>链: {selectedChain}</p>
<p>网络: {selectedNetwork}</p>
<button onClick={disconnect}>断开连接</button>
</div>
)}
</div>
)
}
3. 发送交易
import { useSendNativeCoin } from '@zzispp/web3-wallet-hooks'
function SendTransaction() {
const { sendTransaction, isLoading } = useSendNativeCoin()
const handleSend = async () => {
try {
const txHash = await sendTransaction({
to: '0x...', // 接收地址
value: '0.1' // 发送数量
})
console.log('Transaction hash:', txHash)
} catch (error) {
console.error('Transaction failed:', error)
}
}
return (
<button onClick={handleSend} disabled={isLoading}>
{isLoading ? '发送中...' : '发送'}
</button>
)
}
4. 签名消息
import { useWalletSign } from '@zzispp/web3-wallet-hooks'
function SignMessage() {
const { sign, isSigning } = useWalletSign()
const handleSign = async () => {
try {
const signature = await sign('Welcome to My DApp!')
console.log('Signature:', signature)
} catch (error) {
console.error('Signing failed:', error)
}
}
return (
<button onClick={handleSign} disabled={isSigning}>
{isSigning ? '签名中...' : '签名'}
</button>
)
}
API文档
Hooks
useWallet
主要的钱包管理Hook,提供钱包的核心功能。
const {
connect, // 连接钱包
disconnect, // 断开连接
walletAddress, // 钱包地址
selectedChain, // 当前选择的链
selectedNetwork, // 当前选择的网络
isConnected, // 连接状态
setChain, // 设置链
setNetwork // 设置网络
} = useWallet()
useWalletBalance
查询钱包余额。
const { balance, isLoading, refresh } = useWalletBalance()
useWalletSign
消息签名功能。
const { sign, isSigning, hasSigned } = useWalletSign()
useSendNativeCoin
发送原生代币交易。
const { sendTransaction, isLoading } = useSendNativeCoin()
组件
WalletConnect
完整的钱包连接组件,支持多链和网络选择。
interface WalletConnectProps {
requireSignature?: boolean
signMessage?: string
defaultChain?: string
defaultNetwork?: string
showChainSelector?: boolean
onConnect?: (address: string, chain: string, network: string) => void
onChainChanged?: (chain: string, network: string) => void
onSignature?: (signature: string) => void
onDisconnect?: () => void
}
支持的链
EVM
- Ethereum Mainnet
- Binance Smart Chain
- Polygon
- 等其他EVM兼容链
Solana
- Mainnet Beta
- Testnet
- Devnet
TRON
- Mainnet
- Shasta Testnet
- Nile Testnet
许可证
MIT