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: ['https://hpbnode.com'],

blockExplorerUrls: ['https://hscan.org/']

}

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.