Presenting Web3connect: A Single Web3 Widget for DApps
Last week, Pedro Gomes and Cristian Garner released Web3connect — a widget that serves as a single Web3 provider solution for dApps.
From a dApp user’s perspective, the click of a single button allows them to connect to a dApp using their preferred choice of web3 provider.
Integrating Web3 Providers Today
Today, there are an array of Web3 providers available and each has its own advantages and usability trade-offs. From MetaMask to Portis to Fortmatic to WalletConnect, the list is only growing.
The choices can be overwhelming — especially for dApp developers deciding which ones to integrate first. Currently, most dApps are building out each integration from scratch. Here are a few live examples of this:
Web3connect Advantages
Web3connect serves as an alternative to building out wallet options from scratch — with a single, easy to implement button.
Advantages:
- Pre-built alternative, no need to build from scratch.
- Single button that onboards end users to their choice of MetaMask, WalletConnect, Portis, or Fortmatic.
- Works with any JavaScript framework.
- Enables end user wallet choice based on what they’re comfortable or familiar with.
How do I integrate Web3Connect into my dApp?
Integrating Web3Connect in your dApp is really simple. You have two options depending on your development environment for your dApp’s frontend but first you need to install it.
You can install Web3Connect using NPM or Yarn.
If your frontend is built with React, you can simply add the Connect button as a React component and pass the following props.
If your frontend is built with another framework like Vue or Angular or vanilla JavaScript (or if you just want the modal without the Connect button) then use the following.
Migrating your dApp from a Metamask integration to Web3Connect is very simple as you can see. The onConnect event will provide you with the Ethereum provider just like the one you’re used to having available in the window.
More documentation can be found here.
Future Features
Coming soon: hardware wallet integrations (Ledger and Trezor).
Need help integrating or have questions? Join the Web3connect community on Discord!
