ethers vs wagmi vs @walletconnect/client vs @web3modal/core vs @web3-react/core

Package	Downloads	Stars	Size	Issues	Publish	License

ethers	2,628,844	8,598	13 MB	612	11 days ago	MIT
wagmi	424,369	6,612	1.2 MB	15	10 days ago	MIT
@walletconnect/client	106,071	1,632	188 kB	77	-	Apache-2.0
@web3modal/core	53,822	-	725 kB	-	a year ago	Apache-2.0
@web3-react/core	32,723	5,698	67.6 kB	175	2 years ago	GPL-3.0-or-later

Wallet Connection

ethers:
ethers does not provide a built-in wallet connection solution but can be integrated with any wallet provider. It is compatible with wallets that support the Ethereum JSON-RPC API, allowing for flexible wallet interactions.
wagmi:
wagmi provides hooks for connecting to wallets and managing wallet state. It supports multiple wallet providers and is designed to work seamlessly with React applications, making wallet connection easy and intuitive.
@walletconnect/client:
@walletconnect/client provides a decentralized wallet connection protocol that allows users to connect their wallets using QR codes or deep links. It supports multiple wallets and is platform-agnostic, making it versatile for various applications.
@web3modal/core:
@web3modal/core focuses on simplifying the wallet connection process by providing a modal interface for users to select their wallets. It supports multiple wallet providers and offers a seamless onboarding experience for users.
@web3-react/core:
@web3-react/core offers a flexible wallet connection framework that allows developers to integrate multiple wallet providers easily. It provides hooks and context for managing wallet connections, making it highly customizable for React applications.

Smart Contract Interaction

ethers:
ethers is a comprehensive library for interacting with smart contracts on the Ethereum blockchain. It provides a simple and intuitive API for reading and writing data to contracts, handling events, and managing transactions.
wagmi:
wagmi simplifies smart contract interactions by providing hooks and utilities for reading and writing data to contracts. It integrates well with ethers.js, allowing for seamless contract interactions within React applications.
@walletconnect/client:
@walletconnect/client does not handle smart contract interactions directly but facilitates transactions by connecting wallets that can sign and send transactions to the blockchain.
@web3modal/core:
@web3modal/core focuses on wallet connection and does not provide direct support for smart contract interactions. However, it can be used alongside other libraries like ethers.js for contract interactions after the wallet is connected.
@web3-react/core:
@web3-react/core does not provide built-in smart contract interaction features but allows developers to integrate any smart contract library (like ethers.js or web3.js) to interact with contracts once the wallet is connected.

User Experience

ethers:
ethers focuses on providing a robust API for developers and does not directly address user experience. However, its simplicity and documentation make it easy for developers to create user-friendly interfaces for wallet and contract interactions.
wagmi:
wagmi enhances user experience in React applications by providing hooks that simplify wallet connection and contract interactions. Its design encourages best practices and reduces boilerplate code, making it easier for developers to create intuitive interfaces.
@walletconnect/client:
@walletconnect/client offers a user-friendly experience by allowing wallet connections via QR codes and deep links. However, the user interface is dependent on the wallet applications, which may vary.
@web3modal/core:
@web3modal/core excels in user experience by providing a ready-to-use modal for wallet selection. It streamlines the connection process and supports multiple wallets, making it easy for users to connect.
@web3-react/core:
@web3-react/core provides a good user experience but relies on developers to create their own UI components for wallet connection. It is highly customizable, allowing for tailored experiences.

Code Example

ethers:

Smart Contract Interaction Example with ethers

import { ethers } from 'ethers';

const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, contractABI, signer);

// Read from contract
const value = await contract.getValue();
console.log(`Value from contract: ${value}`);

// Write to contract
const tx = await contract.setValue(42);
await tx.wait();
console.log('Value updated in contract');

wagmi:

Smart Contract Interaction Example with wagmi

import { useContractRead, useContractWrite } from 'wagmi';
import { ethers } from 'ethers';

const contractAddress = '0xYourContractAddress';
const contractABI = [/* Your Contract ABI */];

function YourComponent() {
  const { data, isLoading } = useContractRead({
    address: contractAddress,
    abi: contractABI,
    functionName: 'getValue',
  });

  const { write } = useContractWrite({
    address: contractAddress,
    abi: contractABI,
    functionName: 'setValue',
  });

  return (
    <div>
      <h1>Value: {isLoading ? 'Loading...' : data}</h1>
      <button onClick={() => write()}>Update Value</button>
    </div>
  );
}

@walletconnect/client:

Wallet Connection Example with @walletconnect/client

import { WalletConnectClient } from '@walletconnect/client';

const connector = new WalletConnectClient({
  bridge: 'https://bridge.walletconnect.org', // Required
  qrcode: true,
});

// Create a new session
connector.createSession().then(() => {
  // Get URI for QR Code
  const uri = connector.uri;
  console.log(`Connect with URI: ${uri}`);
});

// Subscribe to connection events
connector.on('connect', (error, payload) => {
  if (error) throw error;
  const { account, chainId } = payload.params[0];
  console.log(`Connected: ${account}, Chain ID: ${chainId}`);
});

// Send a transaction
const tx = {
  from: account,
  to: '0xRecipientAddress',
  value: '1000000000000000000', // 1 ETH
};
connector.sendTransaction(tx);

@web3modal/core:

Wallet Connection Example with @web3modal/core

import { Web3Modal } from '@web3modal/core';
import { ethers } from 'ethers';

const web3Modal = new Web3Modal({
  cacheProvider: true,
  providerOptions: {}, // Add your provider options here
});

async function connectWallet() {
  const provider = await web3Modal.connect();
  const web3Provider = new ethers.providers.Web3Provider(provider);
  const signer = web3Provider.getSigner();
  const address = await signer.getAddress();
  console.log(`Connected: ${address}`);
}

@web3-react/core:

Wallet Connection Example with @web3-react/core

import { Web3ReactProvider } from '@web3-react/core';
import { ethers } from 'ethers';

function getLibrary(provider) {
  const library = new ethers.providers.Web3Provider(provider);
  library.pollingInterval = 12000; // Refresh every 12 seconds
  return library;
}

function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <YourComponent />
    </Web3ReactProvider>
  );
}

Wallet Connection

Smart Contract Interaction

User Experience

Code Example

The Ethers Project

Keep Updated

Installing

Documentation

Providers

Extension Packages

License