🐻⛓️ Berachain Docs

Appearance

Wallets & Configurations ​

This document shows how to integrate the Berachain Network programmatically with your Dapp via MetaMask.

MetaMask ​

Adding new networks to MetaMask is not a trivial task for people that are not technically savvy, and it can be error prone. To help easier onboarding of users to your application it is useful to simplify that process as much as possible. This tutorial will show how to build a simple button in your front-end application that will automate the process of adding the Berachain network to MetaMask.

EIP-3035 & MetaMask ​

EIP-3035 is an Ethereum Improvement Proposal that defines an RPC method for adding Ethereum-compatible chains to wallet applications. Since March 2021 MetaMask has implemented that EIP as part of their MetaMask Custom Networks API.

Data Structures ​

To add the Berachain network to MetaMask, we need to add the network config.

Test network data:

JSON
export const BERACHAIN_TESTNET_PARAMS = {
  chainId: "80085",
  chainName: "Berachain Artio",
  nativeCurrency: {
    name: "BERA",
    symbol: "BERA",
    decimals: 18,
  },
  rpcUrls: ["https://artio.rpc.berachain.com/"],
  blockExplorerUrls: ["https://artio.beratrail.io/"],
}
export const BERACHAIN_TESTNET_PARAMS = {
  chainId: "80085",
  chainName: "Berachain Artio",
  nativeCurrency: {
    name: "BERA",
    symbol: "BERA",
    decimals: 18,
  },
  rpcUrls: ["https://artio.rpc.berachain.com/"],
  blockExplorerUrls: ["https://artio.beratrail.io/"],
}

Adding the Network ​

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

JS
function addBerachainNetwork() {
  injected.getProvider().then((provider) => {
    provider
      .request({
        method: "wallet_addEthereumChain",
        params: [BERACHAIN_TESTNET_PARAMS],
      })
      .catch((error: any) => {
        console.log(error)
      })
  })
}
function addBerachainNetwork() {
  injected.getProvider().then((provider) => {
    provider
      .request({
        method: "wallet_addEthereumChain",
        params: [BERACHAIN_TESTNET_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's website they need to approve connection to MetaMask. After they do that, if you don't detect successful web3 network connection, you can present them with a dialog asking them to confirm adding Berachain as a new network:

Add Berachain Network

After they approve, your app will be connected to the Berachain network. Very easy, no need for any data entry, no chance of wrong data entry. And that's it, users are ready to interact with your dapp!