DApp User Experience: Changing Accounts
Improving the user experience of your DApp by listening for “accountsChanged”
User Experience is one of the biggest roadblocks to onboarding users onto your Decentralised Application (DApp). Modern web browsers don’t support web3 by default, so most users have to interact with DApps via the Metamask browser extension.
Metamask allows users to alter the network and change their active wallet address from the extension.
Unfortunately, DApps won’t know when the user changes an account without specifically checking for it. This means that users will be presented with out-of-date information in the browser, which could confuse.
Metamask now allows you to listen for when a user changes their account in real-time with a simple piece of code.
Detecting Account Change
Assume that you have a function called getAccount() which connects to Ethereum and loads the active account being used. This occurs whenever the DApp is loaded.
Metamask now fires an accountsChanged event on account selection changing, which we can listen for. Figure 3 shows what the code for this looks like.
Using this event listener enables your DApp to get the latest wallet data in real-time, making your user experience slick and up to date. Figure 1 (at the top of the page) shows a DApp which retrieves the active wallet address and displays in a button when the accountsChanged event is fired.
For more information on this feature visit the Metamask documentation.
