@walletconnect/ethereum-provider

What is @walletconnect/ethereum-provider?

@walletconnect/ethereum-provider is an npm package that allows developers to integrate WalletConnect functionality into their Ethereum-based applications. It provides a bridge between decentralized applications (dApps) and mobile wallets, enabling users to interact with dApps using their mobile wallets.

What are @walletconnect/ethereum-provider's main functionalities?

Initialize WalletConnect Provider

This feature allows you to initialize the WalletConnect provider with your Infura ID. The provider can then be enabled to start connecting with mobile wallets.

const WalletConnectProvider = require('@walletconnect/ethereum-provider');
const provider = new WalletConnectProvider({
  infuraId: 'YOUR_INFURA_ID' // Required
});
await provider.enable();

Send Transaction

This feature allows you to send a transaction using the WalletConnect provider. You need to specify the transaction parameters such as from, to, value, gas, and gasPrice.

const tx = await provider.request({
  method: 'eth_sendTransaction',
  params: [{
    from: '0xYourAddress',
    to: '0xRecipientAddress',
    value: '0xAmountInWei',
    gas: '0xGasLimit',
    gasPrice: '0xGasPrice'
  }]
});

Sign Message

This feature allows you to sign a message using the WalletConnect provider. You need to provide the message and the address of the signer.

const message = 'Hello, WalletConnect!';
const signedMessage = await provider.request({
  method: 'personal_sign',
  params: [message, '0xYourAddress']
});

Switch Ethereum Chain

This feature allows you to switch the Ethereum chain using the WalletConnect provider. You need to specify the chain ID of the desired network.

await provider.request({
  method: 'wallet_switchEthereumChain',
  params: [{ chainId: '0x1' }] // Chain ID for Ethereum Mainnet
});

Other packages similar to @walletconnect/ethereum-provider

web3modal

Web3Modal is a library that allows developers to easily integrate multiple wallet providers into their dApps. It supports WalletConnect, MetaMask, and other popular wallet providers. Compared to @walletconnect/ethereum-provider, Web3Modal offers a more comprehensive solution for integrating various wallet providers.

ethers

Ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. It provides utilities for connecting to Ethereum nodes, signing transactions, and interacting with smart contracts. While it does not specifically focus on WalletConnect, it can be used in conjunction with WalletConnect to achieve similar functionality.

web3

Web3.js is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC, or WebSocket. It provides functionalities for sending transactions, interacting with smart contracts, and more. Like ethers.js, it can be used alongside WalletConnect for similar purposes.

README

@walletconnect/ethereum-provider

Ethereum Provider for WalletConnect Protocol.

Installation

npm i @walletconnect/ethereum-provider

Initialization

import { EthereumProvider } from "@walletconnect/ethereum-provider";

const provider = await EthereumProvider.init({
  projectId, // REQUIRED your projectId
  chains, // REQUIRED chain ids
  showQrModal, // REQUIRED set to "true" to use @walletconnect/modal,
  methods, // OPTIONAL ethereum methods
  events, // OPTIONAL ethereum events
  rpcMap, // OPTIONAL rpc urls for each chain
  metadata, // OPTIONAL metadata of your app
  storage, // OPTIONAL custom storage implementation
  storageOptions, // OPTIONAL storage config options
  qrModalOptions, // OPTIONAL - `undefined` by default
});

Display WalletConnectModal with QR code / Handle connection URI

// WalletConnectModal is disabled by default, enable it during init() to display a QR code modal
await provider.connect({
  chains, // OPTIONAL chain ids
  rpcMap, // OPTIONAL rpc urls
  pairingTopic, // OPTIONAL pairing topic
});
// or
await provider.enable();

// If you are not using WalletConnectModal,
// you can subscribe to the `display_uri` event and handle the URI yourself.
provider.on("display_uri", (uri: string) => {
  // ... custom logic
});

await provider.connect();
// or
await provider.enable();

Sending Requests

const result = await provider.request({ method: "eth_requestAccounts" });

// OR

provider.sendAsync({ method: "eth_requestAccounts" }, CallBackFunction);

Events

// chain changed
provider.on("chainChanged", handler);
// accounts changed
provider.on("accountsChanged", handler);
// session established
provider.on("connect", handler);
// session event - chainChanged/accountsChanged/custom events
provider.on("session_event", handler);
// connection uri
provider.on("display_uri", handler);
// session disconnect
provider.on("disconnect", handler);

Supported WalletConnectModal options (qrModalOptions)

Please reference up to date documentation for WalletConnectModal