AppKit and WalletKit have arrived. Explore the all-new product stacks.
Learn more
Blog Home
AppKit
|
December 18, 2023
The WalletConnect logo
WalletConnect
Modals matter: Should you build with WalletConnect Modal or AppKit?

ℹ️ Please Note: Updated Product Names

As part of our ongoing commitment to streamline and enhance our offerings, AppKit as noted below now has a number of improved and extended products and features. This update reflects our latest advancements and unifies our product suite for better user experience. Please refer to our current documentation for the most accurate information.

The typical flow for signing into our traditional web2 accounts is via Sign in with Google or Facebook. In web3, this is done through a wallet. If you’re looking to swap on Uniswap or collect a post on Orb, then you will need to connect your wallet to the dapp.

AppKit is the solution to this problem. It currently provides a simple UI for users to select their favorite wallet, supports all browser wallets via EIP-6963, and much more.

However, we also have a lightweight modal called WalletConnect Modal. This article dives into the differences between WalletConnect’s AppKit and WalletConnect Modal.

AppKit (left) and WalletConnect Modal (right)

AppKit

Before WalletConnect, the only way to connect wallets and dapps was by checking the client window (i.e. window.ethereum) via a desktop browser extension like MetaMask. The problem with this user experience is that mobile wallets had no way of connecting to dapps.

AppKit solves this problem by providing mobile wallets with a QR code to scan, while also allowing desktop and browser extension wallets to connect seamlessly. For developers, this tool belongs in any dapp’s starter kit because it handles most of the basic items you would expect from a modal, such as your ENS name and an intuitive UI for network switching.

Whether you are starting your first web3 project or integrating it into a production-level application (i.e. zkSync and GemPad), it has several advantages that abstract away the complicated parts of web3 development.

  • Multiple frameworks (React / Vue / Vanilla)
  • EVM compatibility
  • Access to all WalletConnect integrated wallets (500+)
  • Multiple library compatibility
  • wagmi compatibility
  • Ethers V5 compatibility
  • Ethers V6 compatibility
  • EIP-6963 support for browser extension wallets
  • Customizable UI
  • Transaction history
  • ENS name lookups

WalletConnect Modal

On the other hand, WalletConnect Modal is a lightweight modal with limited features and functionalities. It is designed to work hand-in-hand with Ethereum Provider and Universal Provider, which are for developers looking to integrate more complex solutions and/or non-EVM chains.

This modal can allow all mobile wallets to sync and connect; however, it does not support browser extension wallets, which means that you cannot see the typical images of MetaMask which is one of the most popular browser extension wallets. This is solved in Web3Modal, which is why we recommend that developers use this SDK.

Comparison Chart

The following table outlines the differences between AppKit and WalletConnect Modal.

Web3Modal and WalletConnect Modal, by the features

Conclusion

As you can see, there is a stark difference between the two modals and we highly recommend developers to use AppKit as it caters for all EVM chains, a more feature-rich and extensive web3 development experience. While WalletConnect Modal has its utility, developers need control and flexibility when working on web3 applications — which is what Web3Modal provides.

For those interested in AppKit, check out our documentation here.

Recommended Articles
More articles
alt=""

Build what's next.
Build with WalletConnect.

Get started