Custom EVM networks
For adding a custom EVM networks with Wagmi see: WAGMI - adding custom networks
You can enable any EVM network that we do not currently support out of the box by passing an array of EvmNetwork
to the DynamicContextProvider
’s overrides.evmNetworks
settings.
This can be done in two different ways:
-
By passing an array of
EvmNetwork
, it completely overrides whatever networks were received from your dashboard configurations and uses that array instead. -
By passing a method with signature
(dashboardNetworks: EvmNetwork[]) => EvmNetwork[]
, you can use this callback to first receive the array of networks that was sent from your dashboard configurations, and then return the array of networks you want the app to use.
The second approach is best for making adjustments to the networks you get from our dashboard (like changing rpc urls), as well as when you want to hide some specific networks.
If you’re just trying to merge new networks with the ones from dashboard, we have a helper function that will make that easier:
import { mergeNetworks } from '@dynamic-labs/sdk-react-core';
const DynamicSettings = {
overrides: {
evmNetworks: (networks) => mergeNetworks(myEvmNetworks, networks),
}
};
Note that the order of the params for
mergeNetworks
matters: the first param takes precedence in case of a conflict.
Example
The following example sets the Ethereum mainnet and Polygon as supported networks for the application. A comprehensive list of networks can be found at chainlist.org
// Setting up list of evmNetworks
const evmNetworks = [
{
blockExplorerUrls: ['https://etherscan.io/'],
chainId: 1,
chainName: 'Ethereum Mainnet',
iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
name: 'Ethereum',
nativeCurrency: {
decimals: 18,
name: 'Ether',
symbol: 'ETH',
},
networkId: 1,
rpcUrls: ['https://mainnet.infura.io/v3/'],
vanityName: 'ETH Mainnet',
},
{
blockExplorerUrls: ['https://etherscan.io/'],
chainId: 5,
chainName: 'Ethereum Goerli',
iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
name: 'Ethereum',
nativeCurrency: {
decimals: 18,
name: 'Ether',
symbol: 'ETH',
},
networkId: 5,
rpcUrls: ['https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'],
vanityName: 'Goerli',
},
{
blockExplorerUrls: ['https://polygonscan.com/'],
chainId: 137,
chainName: 'Matic Mainnet',
iconUrls: ["https://app.dynamic.xyz/assets/networks/polygon.svg"],
name: 'Polygon',
nativeCurrency: {
decimals: 18,
name: 'MATIC',
symbol: 'MATIC',
},
networkId: 137,
rpcUrls: ['https://polygon-rpc.com'],
vanityName: 'Polygon',
},
];
const App = () => (
<DynamicContextProvider
settings={{
environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
overrides: { evmNetworks },
}}
>
<Home />
</DynamicContextProvider>
);
export default App;
Type Reference
Definition
Attribute | Value | Required/Optional |
---|---|---|
blockExplorerUrls | string[] | Required |
chainId | number | Required |
name | string | Required |
iconUrls | string[] | Required |
nativeCurrency | NativeCurrency | Required |
networkId | number | Required |
privateCustomerRpcUrls | string[] | Optional |
rpcUrls | string[] | Required |
vanityName | string | Optional |
NativeCurrency
Attribute | Value | Required/Optional |
---|---|---|
decimals | number | Required |
name | string | Required |
symbol | string | Required |
denom | string | Optional |
Was this page helpful?