Prompt Users to Add Token to MetaMask

Shmoji
3 min readMay 22, 2022

Does your website need a button that will prompt users to add a certain ERC20 token to their wallet?

Well that is super simple to do. This tutorial will cover that.

Resources for this tutorial:

Steps to Implement Functionality:

1: Create a button

<button>Add DAI to MetaMask</button>

2: Add method to the click handler of that button

const addTokenToMM = async () => {
}
...<button onClick={addTokenToMM}>Add DAI to MetaMask</button>

3: Add function logic for adding token to MetaMask

const addTokenToMM = async () => {
try {
const { ethereum } = window
await ethereum.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20',
options: {
address: "0x6B175474E89094C44Da98b954EedeAC495271d0F", // ERC20 token address
symbol: `DAI`,
decimals: 18,
image: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png',
},
},
})
} catch (ex) {
// We don't handle that error for now
// Might be a different wallet than Metmask
// or user declined
console.error(ex)
}
}

You should be able to copy and paste that logic and you’ll be all good, but I’ll explain some confusing pieces a little bit more.

What is the “ethereum” object?

const { ethereum } = window

Anytime you are using an injected wallet provider like MetaMask, it injects the ethereum object into the window. You can retrieve it like this and use it to do all kinds of wallet-related activities. You can find all functionality available through the RPC API docs.

Make sure correct network is used

--

--