MetaMask has a lot of different uses and functionality built in, with new features being shipped often. It would be good to familiarize yourself with it from a user’s perspective, as it is the most broadly used and supported tool of its kind.
Before your user does anything with your dapp, they’ll need to have MetaMask installed and set up using a Secret Recovery Phrase (SRP) (and save that SRP somewhere safe). If they haven’t yet, or if they have an SRP but haven’t installed MetaMask on their current device, this might mean sending them away from your dapp and its flow; see MetaMask’s recommendations on this here.
OK, now we’ve got your user set up with a web3 identity; let’s get them using your dapp.
Getting the permissions you need from the user while respecting user privacy and autonomy
If you’re not familiar with the Principle of Least Privilege, it’s fairly self-explanatory: design your dapp in such a way that you require the least amount of access to your user’s information as possible. In a web3 context, this translates to questions like:
- At this stage of the user flow, do I need anything besides their public wallet address?
- How do I ensure my dapp is asking for access only to the token(s) required for this transaction?
- How do I ensure my dapp is asking for access to the correct amount of those tokens?
An additional thing to keep in mind on this point: it’s free, and easy, for a user to disconnect their wallet from your dapp. However, revoking permissions requires paying gas, so needlessly asking permissions from your user in order to interact with your dapp disincentivizes security best practices such as removing permissions you no longer use and reduces their autonomy.
Most of these issues are highly dependent upon the specific function of a dapp. However, there is one design pattern that MetaMask highly recommends developers employ: Don’t auto-request wallet connection on page load.
The recommended design paradigm is to place a button on the upper part of the screen (most often, upper right) clearly labelled “Connect Wallet”:
Wallet connection best practices: Leave it up to the user.
The reason for this opinionated stance is not just “the principle of the thing”: over the first few wild years of web3 development, there have been innumerable scam dapps that use every trick possible to gain access, and too much access, to user’s wallets, in order to somehow extract their tokens.
For a discussion of how one team built a dapp along these lines, take a look at the blog post presenting MetaMask Activity.
The user experience of opening a webpage and immediately being presented with a modal wallet connection request can feel very scammy, and that’s the last thing you want–for your dapp, and for web3 as a whole.
Comprehensible User Flow and Transactions
A lot of user flows in web3 are unfamiliar to users, especially new users. Connecting to a dapp is fairly intuitive; it feels similar to logging in to a custodial service. But what if, for example, the user wants to deposit some tokens into a smart contract through your dapp? What steps are involved? Usually, several:
- Connect to dapp
- Navigate through dapp UI and choose the action you want to perform
- Ensure you’re on the right network
- Grant permission for the dapp to access and transact with the tokens in question
- Grant permission for, and submit, the transaction itself
- This may include the user modifying the gas fee, up or down
There are parts of this that you can simplify for the user, such as bundling a switch network action into the wallet connection flow, or showing them only assets or options available on the network they have selected, to prompt them to change the network on their own, depending on the use case.
Broken UX: Transaction readability on Ethereum
There are currently ongoing, unsolved technical issues surrounding the human readability of transactions sent on EVM-compatible networks. In other words: your users might have to sign something, or approve something, without really knowing what they’re doing.
This is another point where your dapp could feel scammy to some, so this is an issue you should stay abreast of. For example, consider the solutions offered in EIP-4361. Another effort in this regard was the release, and ongoing iteration of, MetaMask’s Transaction Insight feature. Keep an eye out for updates on this topic.
Next:
Non-EVM chains, custom wallet UI, and more with MetaMask Snaps
Previous:
MetaMask: A crypto wallet, decentralized identity manager, and blockchain developer tool