@walletconnect/modal

What is @walletconnect/modal?

@walletconnect/modal is an npm package that provides a modal interface for connecting to WalletConnect-compatible wallets. It simplifies the process of integrating WalletConnect into web applications by offering a user-friendly modal for wallet selection and connection.

What are @walletconnect/modal's main functionalities?

Initialize WalletConnect Modal

This code initializes the WalletConnect modal with the necessary configuration options such as project ID and relay URL.

const WalletConnectModal = require('@walletconnect/modal');
const walletConnectModal = new WalletConnectModal({
  projectId: 'your_project_id',
  relayUrl: 'wss://relay.walletconnect.org'
});

Open WalletConnect Modal

This code opens the WalletConnect modal, allowing users to select and connect their wallet.

walletConnectModal.open();

Handle Wallet Connection

This code sets up an event listener to handle the wallet connection event, logging the connected accounts and chain ID.

walletConnectModal.on('connect', (error, payload) => {
  if (error) {
    throw error;
  }
  const { accounts, chainId } = payload.params[0];
  console.log('Connected accounts:', accounts);
  console.log('Connected chainId:', chainId);
});

Other packages similar to @walletconnect/modal

web3modal

Web3Modal is a popular library for connecting to various wallet providers in a web application. It offers a modal interface similar to @walletconnect/modal but supports a wider range of wallet providers beyond WalletConnect-compatible wallets.

torus

Torus provides a simple and user-friendly way to integrate blockchain wallets into web applications. It offers a seamless login experience using OAuth providers like Google and Facebook, making it easier for users to get started with blockchain applications.

fortmatic

Fortmatic is a wallet provider that allows users to log in using their phone number or email. It offers a straightforward integration process and a user-friendly interface, making it a good alternative to WalletConnect for certain use cases.

README

📚 Documentation

🔎 Examples

🧪 Laboratory

WalletConnect Modal

Simplest and most minimal way to implement ui for WalletConnect.

Development

Please follow developer docs to set up WalletConnect Modal locally.