Display Tokens
When users open MetaMask, they initially see a selection of major tokens. To display additional custom ERC-20 tokens, users must either enable token autodetection or add the tokens manually. Similarly, for NFTs, users need to enable NFT autodetection or manually add them.
This tutorial can enhance the user experience by making it easier to manage and view tokens within MetaMask.
Display ERC-20 Tokens
Use the wallet_watchAsset RPC Method for Seamless Integration.
To provide a more user-friendly approach, integrate the wallet_watchAsset method in your DApp. This method allows users to easily add tokens without manually entering contract details.
Let’s get started!
Step 1 : JavaScript Integration.
Add the following function to your DApp's code:
async function addTokenToMetaMask() {
const tokenAddress = '0xYourTokenContractAddress';
const tokenSymbol = 'SYM';
const tokenDecimals = 18;
const tokenImage = 'https://path.to/your/token-image.png';
try {
const wasAdded = await ethereum.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20',
options: {
// The address of the token.
address: tokenAddress,
// A ticker symbol or shorthand, up to 5 characters.
symbol: tokenSymbol,
// The number of decimals in the token.
decimals: tokenDecimals,
// A string URL of the token logo.
image: tokenImage,
},
},
});
if (wasAdded) {
console.log('Token added');
} else {
console.log('Token not added');
}
} catch (error) {
console.error(error);
}
}Step 2 : Prompt Users.
Call this function at appropriate times, such as after a token purchase or during onboarding, to prompt users to add the token to their MetaMask wallet.
Step 3 : Confirm Addition in MetaMask.
When the wallet_watchAsset function is called, MetaMask will prompt the user to add the specified custom token. The user needs to confirm this action in the MetaMask interface.