> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

<Tabs>
  <Tab title="EVM">
    <Note>
      For adding a custom EVM networks with Wagmi see: [WAGMI - adding custom networks](https://dynamic.xyz/docs/react-sdk/using-wagmi#adding-custom-networks)
    </Note>

    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 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.

    <Note>
      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:

      ```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.
    </Note>

    ## 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,
        chainName: 'Ethereum Mainnet',
        iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
        name: 'Ethereum',
        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,
        chainName: 'Ethereum Goerli',
        iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'],
        name: 'Ethereum',
        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,
        chainName: 'Matic Mainnet',
        iconUrls: ["https://app.dynamic.xyz/assets/networks/polygon.svg"],
        name: 'Polygon',
        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;
    ```
  </Tab>

  <Tab title="Solana">
    You can enable any Solana network that is not enabled through the dashboard 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 dashboard 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 dashboard 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 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:

      ```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.
    </Note>

    ## 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>

  <Tab title="Cosmos">
    You can enable any Cosmos network that we do not currently support in our dashboard 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 dashboard 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 dashboard 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 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:

      ```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.
    </Note>

    ## Example

    The following example sets Sei for the application. Remember to enable the cosmos blockchain in the dashboard

    ```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          |
  </Tab>
</Tabs>