Custom EVM Chains

The SDK supports network switching for EVM supported networks. Configuring additional networks is done by providing the evmNetworks parameter inside the DynamicContextProvider settings

EvmNetwork

FieldDescription
blockExplorerUrls?: string[][Optional] List of block explorers
chainId: numberChain Id
chainName: stringChain name
iconUrls?: string[][Optional] Chain icon urls
nativeCurrency: { decimals: number; name: string; symbol: string; }Characteristics of chain's currency
networkId: numberNetwork Id. For most networks, it is the same as the chain id
rpcUrls: string[]list of network node urls

Configuring evmNetworks on DynamicContextProvider

Once you have determined the list of networks you want to support, you will need to pass an array of EvmNetwork to the DynamicContextProvider settings. 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',
    nativeCurrency: {
      decimals: 18,
      name: 'Ether',
      symbol: 'ETH',
    },
    networkId: 1,
    rpcUrls: ['https://mainnet.infura.io/v3/'],
  },
  {
    blockExplorerUrls: ['https://polygonscan.com/'],
    chainId: 137,
    chainName: 'Matic Mainnet',
    nativeCurrency: {
      decimals: 18,
      name: 'MATIC',
      symbol: 'MATIC',
    },
    networkId: 137,
    rpcUrls: ['https://polygon-rpc.com'],
  },
];


const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
      evmNetworks,
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;
// Setting up list of evmNetworks
const evmNetworks = [
  {
    blockExplorerUrls: ['https://etherscan.io/'],
    chainId: 1,
    chainName: 'Ethereum Mainnet',
    nativeCurrency: {
      decimals: 18,
      name: 'Ether',
      symbol: 'ETH',
    },
    networkId: 1,
    rpcUrls: ['https://mainnet.infura.io/v3/'],
  },
  {
    blockExplorerUrls: ['https://polygonscan.com/'],
    chainId: 137,
    chainName: 'Matic Mainnet',
    nativeCurrency: {
      decimals: 18,
      name: 'MATIC',
      symbol: 'MATIC',
    },
    networkId: 137,
    rpcUrls: ['https://polygon-rpc.com'],
  },
];


const App = () => (
  <DynamicContextProvider
    settings={{
      appLogoUrl:
        'https://upload.wikimedia.org/wikipedia/commons/3/34/Examplelogo.svg',
      appName: 'Example App',
      environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
      evmNetworks,
    }}
  >
    <Home />
  </DynamicContextProvider>
);

export default App;

You are now ready to switch networks!

Switching networks

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

MethodDescription
supportsNetworkSwitching(): booleanwhether the connector supports network switching.
switchNetwork({ networkName, networkChainId, }: { 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.

14401440

Metamask network switching prompt


Did this page help you?