@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