Ethereum Frontend Tooling: ethers, truffle, wagmi, web3, and web3modal Compared

Building decentralized applications (dApps) requires connecting your frontend to the Ethereum blockchain. But not all libraries serve the same purpose — some handle low-level RPC calls, others manage wallet UIs, and one is strictly for backend development. Let’s clarify what each package does, how they compare technically, and where they fit in a real-world dApp architecture.

🧱 Core Responsibilities: What Each Package Actually Does

ethers and web3 are Ethereum client libraries. They let your app talk to nodes (via Infura, Alchemy, or local providers) using JSON-RPC under the hood. You use them to read blockchain data, send transactions, and interact with smart contracts.

wagmi is a React-specific abstraction over ethers (or web3) that provides hooks like useAccount, useContract, and useSendTransaction. It manages wallet state, providers, and caching automatically.

web3modal is a UI library that renders a modal popup letting users choose and connect wallets (MetaMask, Coinbase Wallet, WalletConnect, etc.). It doesn’t handle blockchain calls — it just establishes the connection.

truffle is a smart contract development framework. It compiles Solidity, runs tests in a local blockchain (Ganache), and deploys contracts. It’s meant for your development workflow — not for inclusion in browser bundles.

⚠️ Important: truffle should never appear in your frontend production code. It’s a Node.js tool, like hardhat or foundry.

🔌 Wallet Connection: How You Link to User Accounts

Connecting a wallet is the first step in any dApp. Here’s how each relevant package approaches it.

ethers requires manual setup with injected providers (like MetaMask):

// ethers: Manual wallet connection
import { ethers } from 'ethers';

if (window.ethereum) {
  const provider = new ethers.BrowserProvider(window.ethereum);
  await provider.send('eth_requestAccounts', []);
  const signer = await provider.getSigner();
  console.log(await signer.getAddress());
}

web3 uses a similar but more verbose pattern:

// web3: Manual connection
import Web3 from 'web3';

if (window.ethereum) {
  const web3 = new Web3(window.ethereum);
  await window.ethereum.request({ method: 'eth_requestAccounts' });
  const accounts = await web3.eth.getAccounts();
  console.log(accounts[0]);
}

wagmi abstracts this into a hook and works with web3modal:

// wagmi + web3modal: Declarative connection
import { createConfig, WagmiConfig, useAccount, useConnect } from 'wagmi';
import { coinbaseWallet, metaMask, walletConnect } from 'wagmi/connectors';
import { Web3Modal } from '@web3modal/react';

const config = createConfig({
  connectors: [metaMask(), coinbaseWallet(), walletConnect({ projectId: '...' })]
});

function App() {
  return (
    <WagmiConfig config={config}>
      <Web3Modal />
      <MyComponent />
    </WagmiConfig>
  );
}

function MyComponent() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  // UI renders based on state
}

web3modal alone doesn’t connect — it just provides the UI. You still need wagmi or ethers underneath.

truffle has no role here — it doesn’t run in the browser.

📜 Contract Interaction: Reading and Writing Data

Once connected, you’ll call smart contract functions. Here’s how each library handles it.

ethers uses human-readable ABI and concise syntax:

// ethers: Contract interaction
const abi = ['function balanceOf(address) view returns (uint256)'];
const contract = new ethers.Contract('0x...', abi, signer);
const balance = await contract.balanceOf('0x...');
await contract.approve('0xspender', 1000); // write

web3 requires more boilerplate and uses PromiEvents for transactions:

// web3: Contract interaction
const abi = [{ name: 'balanceOf', type: 'function', ... }];
const contract = new web3.eth.Contract(abi, '0x...');
const balance = await contract.methods.balanceOf('0x...').call();
await contract.methods.approve('0xspender', 1000).send({ from: account });

wagmi wraps this in React hooks with automatic reloading and error handling:

// wagmi: Hook-based interaction
import { useContractRead, useContractWrite } from 'wagmi';

const { data: balance } = useContractRead({
  address: '0x...',
  abi,
  functionName: 'balanceOf',
  args: ['0x...']
});

const { write } = useContractWrite({
  address: '0x...',
  abi,
  functionName: 'approve',
  args: ['0xspender', 1000]
});

web3modal and truffle do not provide contract interaction APIs in the frontend.

🧪 Testing and Deployment: Where Truffle Fits In

truffle shines in development workflows outside the browser:

// truffle: Migration script (Node.js only)
const MyToken = artifacts.require('MyToken');

module.exports = async function (deployer) {
  await deployer.deploy(MyToken, 'MyToken', 'MTK');
};

You’d use truffle compile to generate contract ABIs, which you then import into your frontend (e.g., into ethers or wagmi). But truffle itself never ships to users.

🧩 Architecture Fit: Where Each Package Belongs

• Frontend bundle: Use ethers (minimal, direct) or wagmi + web3modal (React, high-level).
• Development scripts: Use truffle for compiling, testing, and deploying contracts.
• Legacy codebases: You might encounter web3, but avoid it in new projects.

🔄 Interoperability and Composability

• wagmi uses ethers under the hood by default (though it supports web3 too).
• web3modal is designed to work with wagmi but can also integrate with raw ethers via custom adapters.
• truffle outputs artifacts (JSON files with ABI and bytecode) that any frontend library can consume.

🛑 Deprecation and Maintenance Status

As of 2024:

• web3 (v1.x) is in maintenance mode. The team recommends migrating to web3.js v4 (still evolving) or alternatives like ethers.
• ethers v6 is actively maintained with regular updates.
• wagmi and web3modal are under active development by the WalletConnect team.
• truffle remains widely used but faces competition from hardhat; it’s stable but not aggressively innovating.

💡 Practical Recommendation

For a new React dApp:

• Use wagmi + web3modal for rapid development with built-in best practices.
• Drop down to ethers only if you need custom logic not covered by wagmi hooks.

For a vanilla JS or non-React app:

• Use ethers directly — it’s lean, modern, and well-documented.
• Pair with a lightweight modal (or build your own) for wallet selection.

Never include truffle or web3 in your frontend bundle for new projects.

📊 Summary Table

Choose based on your stack, not trends. If you’re in React, wagmi saves time. If you’re optimizing for performance or using Svelte/Vue/vanilla JS, ethers gives you control without bloat.