Wallet Connection
- @walletconnect/client:
@walletconnect/clientprovides the core functionality for establishing a connection between your dApp and WalletConnect-compatible wallets. It handles the QR code generation, session management, and secure communication between the dApp and the wallet. - @walletconnect/web3-provider:
@walletconnect/web3-provideracts as a Web3 provider that wraps around the WalletConnect client, allowing dApps to interact with the Ethereum blockchain through the connected wallet. It integrates seamlessly with existing Web3.js or Ethers.js code, making it easy to use. - @web3-react/core:
@web3-react/coreprovides a set of hooks and components for managing wallet connections in React applications. It supports multiple wallet providers and allows for easy integration and management of wallet connections within your app. - ethers:
ethersprovides wallet connection functionality through itsWalletclass and integration with various wallet providers. It supports EIP-1559 transactions, gas estimation, and more, making it a comprehensive solution for Ethereum dApp development.
Smart Contract Interaction
- @walletconnect/client:
@walletconnect/clientdoes not provide direct support for smart contract interaction. It focuses on establishing secure connections between dApps and wallets, leaving contract interaction to be handled by the dApp using Web3 or Ethers.js. - @walletconnect/web3-provider:
@walletconnect/web3-providerallows dApps to interact with smart contracts by forwarding calls through the connected wallet. It supports all standard Web3 methods, making it compatible with existing smart contract interaction code. - @web3-react/core:
@web3-react/coredoes not handle smart contract interaction directly. It provides the tools to manage wallet connections, while the actual interaction with smart contracts is done using a separate library like Web3.js or Ethers.js. - ethers:
ethersprovides a rich set of features for interacting with smart contracts, including contract deployment, function calls, event listening, and more. It is a full-featured library that supports both simple and complex contract interactions.
Ease of Integration
- @walletconnect/client:
@walletconnect/clientis easy to integrate into any dApp that needs WalletConnect functionality. However, it requires some manual setup to handle the wallet connection flow and integrate with your existing code. - @walletconnect/web3-provider:
@walletconnect/web3-provideris designed for easy integration with dApps, especially those that already use Web3.js or Ethers.js. It requires minimal setup and provides a familiar interface for developers. - @web3-react/core:
@web3-react/coreoffers a flexible and customizable integration for React applications. It allows developers to easily integrate multiple wallet providers and manage connections, but may require some configuration to set up. - ethers:
ethersis straightforward to integrate for Ethereum-related functionality. Its well-documented API and modular design make it easy to use for both simple and complex tasks.
Documentation and Community
- @walletconnect/client:
@walletconnect/clienthas good documentation and an active community, but it is primarily focused on the WalletConnect protocol. Developers may need to refer to additional resources for integrating with specific wallets or dApps. - @walletconnect/web3-provider:
@walletconnect/web3-provideris well-documented and has a growing community of developers. It is widely used in the dApp ecosystem, making it easy to find examples and support. - @web3-react/core:
@web3-react/corehas comprehensive documentation and a supportive community. Its framework-agnostic approach and flexibility have made it popular among React developers. - ethers:
ethersboasts excellent documentation, a large community, and numerous tutorials and resources. It is one of the most widely used Ethereum libraries, ensuring plenty of support for developers.
Code Example
- @walletconnect/client:
WalletConnect Integration Example
import { Client } from '@walletconnect/client'; const connector = new Client({ bridge: 'https://bridge.walletconnect.org', // Required qrcode: true, // Optional }); // Create a new session connector.createSession().then(() => { const uri = connector.uri; console.log(`QR Code URI: ${uri}`); }); // Subscribe to connection events connector.on('connect', (payload) => { const { chainId, accounts } = payload.params[0]; console.log(`Connected to chain ${chainId} with accounts: ${accounts}`); }); // Subscribe to disconnection events connector.on('disconnect', (error) => { if (error) { console.error('Connection error:', error); } console.log('Disconnected from wallet'); }); - @walletconnect/web3-provider:
WalletConnect Web3 Provider Example
import WalletConnectProvider from '@walletconnect/web3-provider'; import { ethers } from 'ethers'; // Create a WalletConnect Provider const provider = new WalletConnectProvider({ infuraId: 'YOUR_INFURA_ID', // Required }); // Enable session (triggers QR Code modal) await provider.enable(); // Create an ethers provider const web3Provider = new ethers.providers.Web3Provider(provider); // Get signer const signer = web3Provider.getSigner(); const address = await signer.getAddress(); console.log(`Connected address: ${address}`); - @web3-react/core:
Web3 React Example
import { Web3ReactProvider } from '@web3-react/core'; import { ethers } from 'ethers'; function getLibrary(provider) { return new ethers.providers.Web3Provider(provider); } function App() { return ( <Web3ReactProvider getLibrary={getLibrary}> {/* Your app components */} </Web3ReactProvider> ); } - ethers:
Ethers.js Example
import { ethers } from 'ethers'; // Connect to the Ethereum network const provider = new ethers.providers.InfuraProvider('mainnet', 'YOUR_INFURA_ID'); // Create a wallet instance const wallet = new ethers.Wallet('YOUR_PRIVATE_KEY', provider); // Interact with a smart contract const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, wallet); const result = await contract.someFunction(); console.log(result);