Step 1: Requesting Available Providers
After clicking the button below, the EIP-6963 magic begins. This button triggers InjectedWalletProvider.requestProviders.
It sends out an eip6963:requestProvider event. All EIP-6963 compatible wallet extensions in your browser will hear this call and respond with an eip6963:announceProvider event. Each of these events carries the details of a wallet provider. This way, your DApp gets to know all the available wallet providers in the user's browser.
No providers responded to the request with announceProvider event yet. Let's get it rolling!
Click 'Request Providers' to ask your browser what's installed
Wallet providers available in your browser will pop up right here.
Get to Know Your Provider Metadata
Let's dive into the details of the provider you've chosen. If you've selected one, you'll find contents of announced provider's detail.info in the box below:
Haven't picked a provider yet? Go ahead and choose one!
Before the introduction of EIP-6963, regardless of the number of wallets installed in your browser, only one could be active on a page at a time, occupying the window.ethereum space. This limitation meant that during page load, a race condition would occur, and the last wallet to load would take up this space. Developers had no control over this process. However, the advent of EIP-6963 has dramatically changed this scenario.
Now, you're free to use multiple providers at the same time, as many as you need.
Step 2: Connect to Your Wallet Account
Once you've chosen a provider, the next step is to link up with the accounts in your wallet extension. To do this, we have to send a 'eth_requestAccounts' call using the provider.request method. This will connect your DApp to your wallet extension for the first time.
If you refresh the page or come back later, your DApp will still have access to the accounts you've already connected. So, all you'll need to do is call eth_accounts to retrieve them in the background.
Haven't requested providers yet?
There is no provider selected yet
Step 3: Sign a Message
In this step, you'll use the selected provider to sign a message.
With the help of EIP-6963, you can choose which wallet to use to sign whatever you need to.
Give it a try! Sign a message, then choose another wallet provider and repeat the process. You'll notice that messages in the log are being signed by different wallets.
No account available yet
Looks like there are no signed messages yet. Sign one?
Step 4: Send a Transaction
And now, for the grand finale! Let's send a transaction. It's just as easy as everything else we've done:
No account available yet
Step 5: Make Your Wallet the Default Choice
Bonus move: imagine you have a favorite wallet extension that you want to use every time you interact with this DApp. With EIP-6963 you finally can make this happen!
Clicking 'Store' will call storeDefaultProviderRdns on InjectedWalletProvider that will save the unique info.rdns value of your chosen provider into localStorage. So, the next time you refresh the page, the DApp will be able to read localStorage and automatically select your preferred wallet.
No provider selected yet
Existing libraries to help your DApp
Consider looking into existing libraries that already support EIP-6963 to help your DApp kick off:
