Adding HPB to MetaMask (for developers)

Adding new networks to MetaMask is not a trivial task for people that are not technical HPB <-> MetaMask connectivity process as much as possible. The following tutorial will show developers how to build a simple button in their front-end application that will automate the process of adding the HPB network to MetaMask.

EIP-3038 & MetaMask

EIP-3038 is an Ethereum Improvement Proposal that defines an RPC method for adding Ethereum-compatible chains to wallet applications.

Since March 2021 MetaMask has implemented EIP-3038 as part of their MetaMask Custom Networks API.

Preparing data structures

To add the HPB network to MetaMask, we need to prepare the data structures that will be contain all the necessary data.

Main network data:

export const HPB_MAINNET_PARAMS = {

chainId: '0X10D',

chainName: 'HPB Network',

nativeCurrency: { name: 'HPB', symbol: 'HPB', decimals: 18 },

rpcUrls: [''],

blockExplorerUrls: ['']


Adding the network

To add the network to MetaMask, we need to call the wallet_addEthereumChain method, exposed by the web3 provider.

function addHPBNetwork() {

injected.getProvider().then(provider => { provider .request({ method: 'wallet_addEthereumChain', params: [HPB_MAINNET_PARAMS] }) .catch((error: any) => { console.log(error) }) })


Where injected is initialized as a web3-react/injected-connector used to interface with MetaMask APIs. Usage for other popular web frameworks is similar.

Typical usage pattern would be to expose a button calling that method if you get Wrong Network or Error connecting errors when attempting to establish a connection to MetaMask.

User experience

When users first come to your DApp website, they will need to approve connection to MetaMask. Once this is done, if you don't detect a successful web3 network connection, you can present them with dialog asking them to confirm switching to a new network. If they press the button, they are shown a dialog from MetaMask asking for approval to add the new network.

If they approve, your app will be connected to the HPB network. This is a very easy step, with no need for any data entry, and no chance of wrong data entry. Users are then ready to interact with your DApp on the HPB chain.

Last updated