LLM Notice: This documentation site supports content negotiation for AI agents. Request any page with Accept: text/markdown or Accept: text/plain header to receive Markdown instead of HTML. Alternatively, append ?format=md to any URL. All markdown files are available at /md/ prefix paths. For all content in one file, visit /llms-full.txt
Skip to main content

Wallets & Configurations

This document shows how to integrate the Flow Network programmatically with your dApp via MetaMask.

If you want to add it to your wallet now, click the buttons below, or follow the manual process.

Metamask​

To integrate additional networks into MetaMask can pose challenges for users who lack technical expertise and may lead to errors. If you simplify this process, you can greatly enhance user onboarding for your application. This guide demonstrates how to create a straightforward button within your frontend application to streamline the addition of the Flow 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.

Flow Network configuration​

To add the Flow Testnet network to Metamask, add the following network configuration:


_11
export const TESTNET_PARAMS = {
_11
chainId: '0x221',
_11
chainName: 'Flow',
_11
rpcUrls: ['https://testnet.evm.nodes.onflow.org'],
_11
nativeCurrency: {
_11
name: 'Flow',
_11
symbol: 'FLOW',
_11
decimals: 18,
_11
},
_11
blockExplorerUrls: ['https://evm-testnet.flowscan.io/']
_11
};

Add Flow network​

To add this configuration to MetaMask, call the wallet_addEthereumChain method which is exposed by the web3 provider.


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

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

The typical usage would be to expose this button if you get errors when attempting to connect to MetaMask (i.e. Wrong Network or Error Connecting).

User Experience​

Users of your app will need to first approve a connection to Metamask. After doing this, if you don't detect a successful Web3 network connection, you may present a dialog asking them to add the Flow network to their wallet.

Metamask Network

After they approve, your app will be connected to the Flow network.

If you use this approach to add the Flow network to Metamask, you can avoid manual user data entry and ensure that users are ready to interact with your dApp!

Rate this page