> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding Custom Networks

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

> [tab] EVM
>
> > [!NOTE]
> >
> > For adding custom EVM networks with Wagmi see: [WAGMI — adding custom networks](https://dynamic.xyz/docs/react-sdk/using-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:
>
> 1. By passing an array of `EvmNetwork`, it completely overrides whatever networks were received from your console 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 console configurations, and then return the array of networks you want the app
>    to use.
>
> > [!NOTE]
> >
> > The second approach is best for making adjustments to the networks you get from our console (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 console, we have a helper function that will make that easier:
> >
> > ```TypeScript theme={"system"}
> > 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](https://chainlist.org)
>
> ```TypeScript theme={"system"}
> // Setting up list of evmNetworks
> const evmNetworks = [
> {
>     blockExplorerUrls: ['https://etherscan.io/'],
>     chainId: 1,
>     iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
>     name: 'Ethereum Mainnet',
>     nativeCurrency: {
>     decimals: 18,
>     name: 'Ether',
>     symbol: 'ETH',
>     iconUrl: 'https://app.dynamic.xyz/assets/networks/eth.svg',
>     },
>     networkId: 1,
>
>     rpcUrls: ['https://mainnet.infura.io/v3/'],
>     vanityName: 'ETH Mainnet',
> },
> {
>     blockExplorerUrls: ['https://etherscan.io/'],
>     chainId: 5,
>     iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
>     name: 'Ethereum Goerli',
>     nativeCurrency: {
>     decimals: 18,
>     name: 'Ether',
>     symbol: 'ETH',
>     iconUrl: 'https://app.dynamic.xyz/assets/networks/eth.svg',
>     },
>     networkId: 5,
>     rpcUrls: ['https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'],
>
>     vanityName: 'Goerli',
> },
> {
>     blockExplorerUrls: ['https://polygonscan.com/'],
>     chainId: 137,
>     iconUrls: ["https://app.dynamic.xyz/assets/networks/polygon.svg"],
>     name: 'Matic Mainnet',
>     nativeCurrency: {
>     decimals: 18,
>     name: 'MATIC',
>     symbol: 'MATIC',
>     iconUrl: 'https://app.dynamic.xyz/assets/networks/polygon.svg',
>     },
>     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;
> ```
>
> > [!WARNING]
> >
> > The transaction confirmation UI renders a network's native token amount using `nativeCurrency.decimals`. Custom or emerging EVM chains must set `decimals` to the chain's correct value (18 for most EVM chains) or the confirm popup will display the wrong amount.
>
> To adjust `decimals`, `rpcUrls`, or other fields on console-provided networks without replacing them, use the callback form of `overrides.evmNetworks` — `(dashboardNetworks: EvmNetwork[]) => EvmNetwork[]` — as shown above.
>
> ## 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 |
> | iconUrl | `string` | Optional |
> | name | `string` | Required |
> | symbol | `string` | Required |

> [tab] Solana
>
> You can enable any Solana network that is not enabled through the Dynamic Console by passing an array of `GenericNetwork`
> to the `DynamicContextProvider`'s `overrides.solNetworks` settings.
>
> This can be done in two different ways:
>
> 1. By passing an array of `GenericNetwork`, it completely overrides whatever networks were received from your console configurations and uses that array instead.
>
> 2. By passing a method with signature `(dashboardNetworks: GenericNetwork[]) => GenericNetwork[]`, you can use this callback to first
>    receive the array of networks that was sent from your console configurations, and then return the array of networks you want the app
>    to use.
>
> > [!NOTE]
> >
> > The second approach is best for making adjustments to the networks you get from our console (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 console, we have a helper function that will make that easier:
> >
> > ```TypeScript theme={"system"}
> > import { mergeNetworks } from '@dynamic-labs/sdk-react-core';
> >
> > const DynamicSettings = {
> >     overrides: {
> >         solNetworks: (networks) => mergeNetworks(mySolNetworks, 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 up Solana mainnet and devnet as supported networks for the application.
>
> ```TypeScript theme={"system"}
> // Setting up list of solNetworks
> const solNetworks = [
> {
>     blockExplorerUrls: ['https://explorer.solana.com/'],
>     chainId: '101',
>     chainName: 'Solana Mainnet',
>     cluster: 'mainnet',
>     genesisHash: '5eykt4SUQpu5YbYaf52VjEVz2YjYLw5wwjiek6fE96dE',
>     iconUrls: ['https://app.dynamic.xyz/assets/networks/sol.svg'],
>     name: 'Solana',
>     nativeCurrency: {
>     decimals: 9,
>     name: 'SOL',
>     symbol: 'SOL',
>     iconUrl: 'https://app.dynamic.xyz/assets/networks/sol.svg',
>     },
>     networkId: '101',
>     rpcUrls: ['https://api.mainnet-beta.solana.com'],
>     vanityName: 'Solana Mainnet',
> },
> {
>     blockExplorerUrls: ['https://explorer.solana.com/?cluster=devnet'],
>     chainId: '103',
>     chainName: 'Solana Devnet',
>     cluster: 'devnet',
>     genesisHash: 'EtWTRABZaYqQqFgQ1BXsR7a1271g31oMDBLv6721YH2',
>     iconUrls: ['https://app.dynamic.xyz/assets/networks/sol.svg'],
>     name: 'Solana',
>     nativeCurrency: {
>     decimals: 9,
>     name: 'SOL',
>     symbol: 'SOL',
>     iconUrl: 'https://app.dynamic.xyz/assets/networks/sol.svg',
>     },
>     networkId: '103',
>     rpcUrls: ['https://api.devnet.solana.com'],
>     vanityName: 'Solana Devnet',
> },
> ];
>
> const App = () => (
> <DynamicContextProvider
>     settings={{
>     environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
>     overrides: { solNetworks },
>     }}
> >
>     <Home />
> </DynamicContextProvider>
> );
>
> export default App;
> ```
>
> ## Type Reference
>
> ### Definition
>
> | Attribute | Value | Required/Optional |
> | - | - | - |
> | blockExplorerUrls | `string[]` | Required |
> | chainId | `string` | Required |
> | cluster | `string` | Required |
> | genesisHash | `string` | Required |
> | name | `string` | Required |
> | iconUrls | `string[]` | Required |
> | nativeCurrency | `NativeCurrency` | Required |
> | networkId | `string` | Required |
> | rpcUrls | `string[]` | Required |
> | vanityName | `string` | Optional |
>
> #### NativeCurrency
>
> | Attribute | Value | Required/Optional |
> | - | - | - |
> | decimals | `number` | Required |
> | iconUrl | `string` | Optional |
> | name | `string` | Required |
> | symbol | `string` | Required |

> [tab] Cosmos
>
> You can enable any Cosmos network that we do not currently support in our console by passing an array of `GenericNetwork`
> to the `DynamicContextProvider`'s `overrides.cosmosNetworks` settings.
>
> This can be done in two different ways:
>
> 1. By passing an array of `GenericNetwork`, it completely overrides whatever networks were received from your console configurations and uses that array instead.
>
> 2. By passing a method with signature `(dashboardNetworks: GenericNetwork[]) => GenericNetwork[]`, you can use this callback to first
>    receive the array of networks that was sent from your console configurations, and then return the array of networks you want the app
>    to use.
>
> > [!NOTE]
> >
> > The second approach is best for making adjustments to the networks you get from our console (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 console, we have a helper function that will make that easier:
> >
> > ```TypeScript theme={"system"}
> > import { mergeNetworks } from '@dynamic-labs/sdk-react-core';
> >
> > const DynamicSettings = {
> >     overrides: {
> >         cosmosNetworks: (networks) => mergeNetworks(myCosmosNetworks, 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 Sei for the application. Remember to enable the cosmos blockchain in the Dynamic Console
>
> ```TypeScript theme={"system"}
> // we are setting the chainId and networkID to a random ID that will not conflict with other active chains in Dynamic.
>
> const cosmosNetworks= [
> {
>     blockExplorerUrls: ["https://www.seiscan.app/pacific-1"],
>     chain: 'Sei',
>     chainId: '404',
>     iconUrls: ['https://app.dynamic.xyz/assets/networks/sei.svg'],
>     lcdUrl: 'https://rest.wallet.pacific-1.sei.io',
>     name: 'pacific-1',
>     nativeCurrency: {
>         decimals: 18,
>         denom: 'usei',
>         name: 'Sei',
>         symbol: 'Sei',
>     },
>     networkId: '404',
>     rpcUrls: ['https://rpc.wallet.pacific-1.sei.io'],
>     shortName: 'Sei',
>     vanityName: 'Sei',
>     }
> ];
>
> const App = () => (
> <DynamicContextProvider
>     settings={{
>     environmentId: 'REPLACE_WITH_YOUR_ENV_ID',
>     overrides: { cosmosNetworks },
>     }}
> >
>     <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 |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.