​
Summary

The SDK supports network switching for EVM supported and custom networks. Configuring additional networks is done by providing the evmNetworks parameter inside the DynamicContextProvider’s overrides settings (see example below).

​
Setup

​
evmNetworks

Once you have determined the list of networks you want to support, you will need to pass an array of EvmNetwork to the DynamicContextProvider’s overrides settings.

This can be done in two different ways:

  1. By passing an array of EvmNetwork (reference), it completely overrides whatever networks were received from your dashboard configurations and uses that array instead.
  2. 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.

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={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
      overrides: { evmNetworks },
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;

​
Custom EVM Network

See the EvmNetwork reference for all props available to define a custom network.

You are now ready to switch networks!

​
Usage

Using the WalletConnector instance provided by useDynamicContext, you have two useful methods for network switching

MethodDescription
supportsNetworkSwitching(): booleanwhether the connector supports network switching.
switchNetwork({ networkChainId, networkName }: { networkChainId?: number; networkName?: string; }): Promise<void>switch to another network by provider either the network name or chain id specified in the list of EvmNetwork

When calling switchNetwork with a connector supporting network switching, the SDK will either request the user to confirm the network switch or add the network if it was not previously set.

const { walletConnector } = useDynamicContext();

if (walletConnector.supportsNetworkSwitching()) {
  await walletConnector.switchNetwork({ networkChainId: 137 });
  console.log("Success! Network switched");
}

1440

Was this page helpful?

Configure in DashboardRPC Urls