ethers vs wagmi vs @walletconnect/client vs @web3-react/core vs @web3modal/core
Web3 连接和钱包集成
etherswagmi@walletconnect/client@web3-react/core@web3modal/core类似的npm包:

Web3 连接和钱包集成

Web3 连接和钱包集成库为去中心化应用(DApps)提供与区块链网络和用户数字钱包交互的工具。这些库简化了钱包连接、用户身份验证和与智能合约的交互,使开发者能够轻松构建与区块链生态系统兼容的应用。它们支持多种钱包提供商,提供 API 和组件来处理交易、签名和区块链数据。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
ethers4,829,7278,72813 MB6785 个月前MIT
wagmi1,528,7876,7681.22 MB2520 小时前MIT
@walletconnect/client56,0141,689188 kB118-Apache-2.0
@web3-react/core17,9305,68367.6 kB1763 年前GPL-3.0-or-later
@web3modal/core0-725 kB-2 年前Apache-2.0

功能对比: ethers vs wagmi vs @walletconnect/client vs @web3-react/core vs @web3modal/core

钱包连接

  • ethers:

    ethers 主要用于与以太坊区块链交互,提供钱包连接功能,但不专注于连接多个钱包。它支持与智能合约和交易的交互。

  • wagmi:

    wagmi 提供现代化的 React 钩子,简化与以太坊的连接和交互。它支持钱包连接、交易和状态管理,特别适合 DApp 开发。

  • @walletconnect/client:

    @walletconnect/client 允许通过 WalletConnect 协议连接钱包,支持二维码扫描和深度链接。它支持多种钱包,提供跨平台连接能力。

  • @web3-react/core:

    @web3-react/core 提供灵活的钱包连接解决方案,支持多个钱包提供商。开发者可以根据需要自定义连接逻辑,支持多种连接方式。

  • @web3modal/core:

    @web3modal/core 提供现成的钱包连接模态,支持多种钱包提供商。它简化了连接流程,用户体验友好,适合快速集成。

智能合约交互

  • ethers:

    ethers 是一个全面的以太坊库,提供与智能合约交互的完整功能。它支持合约部署、调用函数、发送交易等。

  • wagmi:

    wagmi 提供与智能合约交互的钩子,简化了合约调用和交易过程。它与 ethers.js 集成,提供易于使用的 API。

  • @walletconnect/client:

    @walletconnect/client 支持通过 WalletConnect 连接的钱包与智能合约交互。它允许发送交易和签名消息,但不提供直接的合约交互功能。

  • @web3-react/core:

    @web3-react/core 允许与智能合约交互,但需要与其他库结合使用,如 ethers.js 或 web3.js。它提供钱包连接和交易签名功能。

  • @web3modal/core:

    @web3modal/core 主要用于钱包连接,智能合约交互需要与其他库结合使用。它不提供直接的合约交互功能。

用户体验

  • ethers:

    ethers 主要关注区块链交互,用户体验依赖于应用实现。它不提供钱包连接界面。

  • wagmi:

    wagmi 提供现代化的钩子和组件,简化了 DApp 的用户体验。特别是在处理钱包连接和交易状态时,提供了更好的反馈。

  • @walletconnect/client:

    @walletconnect/client 提供良好的用户体验,特别是在移动设备上。用户通过扫描二维码连接钱包,过程简单直观。

  • @web3-react/core:

    @web3-react/core 的用户体验取决于实现。它提供灵活的连接方式,但需要开发者自定义 UI。

  • @web3modal/core:

    @web3modal/core 提供优雅的模态界面,用户可以轻松选择钱包进行连接。它支持多种钱包,提升了用户体验。

社区和支持

  • ethers:

    ethers 拥有庞大的社区和丰富的文档。作为以太坊生态系统中最受欢迎的库之一,得到了广泛的支持和使用。

  • wagmi:

    wagmi 是一个快速增长的项目,拥有活跃的社区和良好的文档。它特别受到使用 React 的开发者欢迎。

  • @walletconnect/client:

    @walletconnect/client 拥有活跃的开源社区和良好的文档支持。作为 WalletConnect 协议的一部分,它得到了多个钱包和 DApp 的支持。

  • @web3-react/core:

    @web3-react/core 由社区驱动,提供灵活的框架。文档详细,但由于其灵活性,可能需要额外的时间来理解。

  • @web3modal/core:

    @web3modal/core 拥有活跃的社区和持续的开发。文档清晰,易于开发者快速上手。

代码示例

  • ethers:

    使用 ethers 进行智能合约交互

    import { ethers } from 'ethers';
    
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, abi, signer);
    const tx = await contract.someFunction();
    
  • wagmi:

    使用 wagmi 进行钱包连接

    import { useAccount, useConnect } from 'wagmi';
    
    const { connect, connectors } = useConnect();
    const { isConnected } = useAccount();
    
    <button onClick={() => connect(connectors[0])}>连接钱包</button>
    
  • @walletconnect/client:

    使用 @walletconnect/client 进行钱包连接

    import { WalletConnectClient } from '@walletconnect/client';
    
    const connector = new WalletConnectClient({
      bridge: 'https://bridge.walletconnect.org', // 你的桥接服务器
      qrcode: true, // 启用二维码
    });
    
    // 连接钱包
    connector.connect().then(() => {
      console.log('钱包已连接');
    });
    
  • @web3-react/core:

    使用 @web3-react/core 进行钱包连接

    import { Web3ReactProvider } from '@web3-react/core';
    
    function getLibrary(provider) {
      return new ethers.providers.Web3Provider(provider);
    }
    
    <Web3ReactProvider getLibrary={getLibrary}>
      <YourComponent />
    </Web3ReactProvider>
    
  • @web3modal/core:

    使用 @web3modal/core 进行钱包连接

    import { Web3Modal } from '@web3modal/core';
    
    const modal = new Web3Modal();
    const provider = await modal.connect();
    

如何选择: ethers vs wagmi vs @walletconnect/client vs @web3-react/core vs @web3modal/core

  • ethers:

    选择 ethers 如果您需要一个全面且轻量级的库来与以太坊区块链交互。它提供了与智能合约、钱包和交易的全面功能,适合需要深度区块链交互的应用。

  • wagmi:

    选择 wagmi 如果您正在寻找一个现代化的 React 钩子库,简化与以太坊的交互。它提供了易于使用的钩子和组件,适合构建以用户为中心的 DApp,特别是在需要处理钱包连接和交易状态时。

  • @walletconnect/client:

    选择 @walletconnect/client 如果您需要一个支持 WalletConnect 协议的轻量级解决方案,允许用户通过移动钱包扫描二维码进行连接。它适用于希望集成多种钱包而无需依赖特定提供商的应用。

  • @web3-react/core:

    选择 @web3-react/core 如果您需要一个灵活且可扩展的框架来管理钱包连接。它提供了与多个钱包提供商集成的能力,适合需要高度自定义连接流程的应用。

  • @web3modal/core:

    选择 @web3modal/core 如果您希望快速集成一个用户友好的钱包连接界面。它提供了一个现成的模态组件,支持多种钱包,适合希望简化连接过程的应用。

ethers的README

The Ethers Project

npm (tag) CI Tests npm bundle size (version) npm (downloads) GitPOAP Badge Twitter Follow


A complete, compact and simple library for Ethereum and ilk, written in TypeScript.

Features

  • Keep your private keys in your client, safe and sound
  • Import and export JSON wallets (Geth, Parity and crowdsale)
  • Import and export BIP 39 mnemonic phrases (12 word backup phrases) and HD Wallets (English as well as Czech, French, Italian, Japanese, Korean, Simplified Chinese, Spanish, Traditional Chinese)
  • Meta-classes create JavaScript objects from any contract ABI, including ABIv2 and Human-Readable ABI
  • Connect to Ethereum nodes over JSON-RPC, INFURA, Etherscan, Alchemy, Ankr or MetaMask
  • ENS names are first-class citizens; they can be used anywhere an Ethereum addresses can be used
  • Small (~144kb compressed; 460kb uncompressed)
  • Tree-shaking focused; include only what you need during bundling
  • Complete functionality for all your Ethereum desires
  • Extensive documentation
  • Large collection of test cases which are maintained and added to
  • Fully written in TypeScript, with strict types for security and safety
  • MIT License (including ALL dependencies); completely open source to do with as you please

Keep Updated

For advisories and important notices, follow @ethersproject on Twitter (low-traffic, non-marketing, important information only) as well as watch this GitHub project.

For more general news, discussions, and feedback, follow or DM me, @ricmoo on Twitter or on the Ethers Discord.

For the latest changes, see the CHANGELOG.

Summaries

Installing

NodeJS

/home/ricmoo/some_project> npm install ethers

Browser (ESM)

The bundled library is available in the ./dist/ folder in this repo.

<script type="module">
    import { ethers } from "./dist/ethers.min.js";
</script>

Documentation

Browse the documentation online:

Providers

Ethers works closely with an ever-growing list of third-party providers to ensure getting started is quick and easy, by providing default keys to each service.

These built-in keys mean you can use ethers.getDefaultProvider() and start developing right away.

However, the API keys provided to ethers are also shared and are intentionally throttled to encourage developers to eventually get their own keys, which unlock many other features, such as faster responses, more capacity, analytics and other features like archival data.

When you are ready to sign up and start using for your own keys, please check out the Provider API Keys in the documentation.

A special thanks to these services for providing community resources:

Extension Packages

The ethers package only includes the most common and most core functionality to interact with Ethereum. There are many other packages designed to further enhance the functionality and experience.

  • MulticallProvider - A Provider which bundles multiple call requests into a single call to reduce latency and backend request capacity
  • MulticoinPlugin - A Provider plugin to expand the support of ENS coin types
  • GanaceProvider - A Provider for in-memory node instances, for fast debugging, testing and simulating blockchain operations
  • Optimism Utilities - A collection of Optimism utilities
  • LedgerSigner - A Signer to interact directly with Ledger Hardware Wallets

License

MIT License (including all dependencies).